@ngrok/mantle 0.69.2 → 0.70.1

package/dist/accordion.d.ts

@@ -1,4 +1,4 @@
-import { n as IconProps } from "./icon-Dh1ONyO_.js";
+import { n as IconProps } from "./icon-C0YAAaLZ.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef } from "react";
@@ -134,7 +134,7 @@ declare const Accordion: {
    * </Accordion.Root>
    * ```
    */
-  readonly Item: _$react.ForwardRefExoticComponent<AccordionPrimitive.AccordionItemProps & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Item: _$react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Toggles the collapsed state of its associated item.
    * The interactive element that expands or collapses the accordion content.

package/dist/accordion.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{CaretDownIcon as n}from"@phosphor-icons/react/CaretDown";import*as r from"@radix-ui/react-accordion";import{forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=i(({className:t,...n},i)=>a(r.Root,{ref:i,className:e(`w-full space-y-2.5`,t),...n}));o.displayName=`Accordion`;const s=r.Item;s.displayName=`AccordionItem`;const c=i(({className:t,...n},i)=>a(r.Header,{ref:i,className:e(`flex items-center gap-2`,t),...n}));c.displayName=`AccordionHeading`;const l=i(({className:t,children:n,...i},o)=>a(r.Trigger,{ref:o,className:e(`group flex items-center gap-1.5`,t),...i,children:n}));l.displayName=`AccordionTrigger`;const u=({className:r,...i})=>a(t,{...i,svg:a(n,{weight:`fill`}),className:e(`group-data-[state=open]:rotate-0 -rotate-90`,r)});u.displayName=`AccordionTriggerIcon`;const d=i(({className:t,children:n,...i},o)=>a(r.Content,{ref:o,className:e(`data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4`,t),...i,children:n}));d.displayName=`AccordionContent`;const f={Root:o,Content:d,Heading:c,Item:s,Trigger:l,TriggerIcon:u};export{f as Accordion};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{CaretDownIcon as n}from"@phosphor-icons/react/CaretDown";import*as r from"@radix-ui/react-accordion";import{forwardRef as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=i(({className:t,...n},i)=>a(r.Root,{ref:i,"data-slot":`accordion`,className:e(`w-full space-y-2.5`,t),...n}));o.displayName=`Accordion`;const s=i(({...e},t)=>a(r.Item,{ref:t,"data-slot":`accordion-item`,...e}));s.displayName=`AccordionItem`;const c=i(({className:t,...n},i)=>a(r.Header,{ref:i,"data-slot":`accordion-heading`,className:e(`flex items-center gap-2`,t),...n}));c.displayName=`AccordionHeading`;const l=i(({className:t,children:n,...i},o)=>a(r.Trigger,{ref:o,"data-slot":`accordion-trigger`,className:e(`group flex items-center gap-1.5`,t),...i,children:n}));l.displayName=`AccordionTrigger`;const u=({className:r,...i})=>a(t,{...i,"data-slot":`accordion-trigger-icon`,svg:a(n,{weight:`fill`}),className:e(`group-data-[state=open]:rotate-0 -rotate-90`,r)});u.displayName=`AccordionTriggerIcon`;const d=i(({className:t,children:n,...i},o)=>a(r.Content,{ref:o,"data-slot":`accordion-content`,className:e(`data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4`,t),...i,children:n}));d.displayName=`AccordionContent`;const f={Root:o,Content:d,Heading:c,Item:s,Trigger:l,TriggerIcon:u};export{f as Accordion};
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon, type IconProps } from \"../icon/icon.js\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n * The root component that contains all accordion items.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root ref={ref} className={cx(\"w-full space-y-2.5\", className)} {...props} />\n));\nRoot.displayName = \"Accordion\";\n\n/**\n * Contains all the parts of a collapsible section.\n * A single accordion item that can be expanded or collapsed.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Item = AccordionPrimitive.Item;\nItem.displayName = \"AccordionItem\";\n\n/**\n * Wraps an AccordionTrigger.\n * Contains the accordion trigger and provides proper heading semantics.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Heading = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Header\n\t\tref={ref}\n\t\tclassName={cx(\"flex items-center gap-2\", className)}\n\t\t{...props}\n\t/>\n));\nHeading.displayName = \"AccordionHeading\";\n\n/**\n * Toggles the collapsed state of its associated item.\n * The interactive element that expands or collapses the accordion content.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<\"button\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cx(\"group flex items-center gap-1.5\", className)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Trigger>\n));\nTrigger.displayName = \"AccordionTrigger\";\n\n/**\n * An icon that indicates the expanded/collapsed state of the accordion trigger.\n * Rotates based on the accordion item state to provide visual feedback.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst TriggerIcon = ({ className, ...props }: Omit<IconProps, \"svg\">) => (\n\t<Icon\n\t\t{...props}\n\t\tsvg={<CaretDownIcon weight=\"fill\" />}\n\t\tclassName={cx(\"group-data-[state=open]:rotate-0 -rotate-90\", className)}\n\t/>\n);\nTriggerIcon.displayName = \"AccordionTriggerIcon\";\n\n/**\n * Contains the collapsible content for an item.\n * The content area that is revealed when the accordion item is expanded.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Content>\n));\nContent.displayName = \"AccordionContent\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n *\n * @see https://mantle.ngrok.com/components/accordion\n *\n * @example\n * Composition:\n * ```\n * Accordion.Root\n * ├── Accordion.Item\n * │   ├── Accordion.Heading\n * │   │   └── Accordion.Trigger\n * │   │       └── Accordion.TriggerIcon\n * │   └── Accordion.Content\n * ```\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Accordion = {\n\t/**\n\t * A vertically stacked set of interactive headings that each reveal a section of content.\n\t * The root component that contains all accordion items.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the collapsible content for an item.\n\t * The content area that is revealed when the accordion item is expanded.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Wraps an AccordionTrigger.\n\t * Contains the accordion trigger and provides proper heading semantics.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tHeading,\n\t/**\n\t * Contains all the parts of a collapsible section.\n\t * A single accordion item that can be expanded or collapsed.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Toggles the collapsed state of its associated item.\n\t * The interactive element that expands or collapses the accordion content.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * An icon that indicates the expanded/collapsed state of the accordion trigger.\n\t * Rotates based on the accordion item state to provide visual feedback.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTriggerIcon,\n} as const;\n\nexport {\n\t//,\n\tAccordion,\n};\n"],"mappings":"8PA+BA,MAAM,EAAO,GAGV,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,KAApB,CAA8B,MAAK,UAAW,EAAG,qBAAsB,EAAU,CAAE,GAAI,EAAS,CAAA,CAC/F,CACF,EAAK,YAAc,YAyBnB,MAAM,EAAO,EAAmB,KAChC,EAAK,YAAc,gBAyBnB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,OAApB,CACM,MACL,UAAW,EAAG,0BAA2B,EAAU,CACnD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,mBAyBtB,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAyBtB,MAAM,GAAe,CAAE,YAAW,GAAG,KACpC,EAAC,EAAD,CACC,GAAI,EACJ,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CACpC,UAAW,EAAG,8CAA+C,EAAU,CACtE,CAAA,CAEH,EAAY,YAAc,uBAyB1B,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,UAAW,EACV,6GACA,EACA,CACD,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAmCtB,MAAM,EAAY,CAwBjB,OAwBA,UAwBA,UAwBA,OAwBA,UAwBA,cACA"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon, type IconProps } from \"../icon/icon.js\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n * The root component that contains all accordion items.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Root\n\t\tref={ref}\n\t\tdata-slot=\"accordion\"\n\t\tclassName={cx(\"w-full space-y-2.5\", className)}\n\t\t{...props}\n\t/>\n));\nRoot.displayName = \"Accordion\";\n\n/**\n * Contains all the parts of a collapsible section.\n * A single accordion item that can be expanded or collapsed.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof AccordionPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ ...props }, ref) => (\n\t<AccordionPrimitive.Item ref={ref} data-slot=\"accordion-item\" {...props} />\n));\nItem.displayName = \"AccordionItem\";\n\n/**\n * Wraps an AccordionTrigger.\n * Contains the accordion trigger and provides proper heading semantics.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Heading = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Header\n\t\tref={ref}\n\t\tdata-slot=\"accordion-heading\"\n\t\tclassName={cx(\"flex items-center gap-2\", className)}\n\t\t{...props}\n\t/>\n));\nHeading.displayName = \"AccordionHeading\";\n\n/**\n * Toggles the collapsed state of its associated item.\n * The interactive element that expands or collapses the accordion content.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<\"button\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Trigger\n\t\tref={ref}\n\t\tdata-slot=\"accordion-trigger\"\n\t\tclassName={cx(\"group flex items-center gap-1.5\", className)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Trigger>\n));\nTrigger.displayName = \"AccordionTrigger\";\n\n/**\n * An icon that indicates the expanded/collapsed state of the accordion trigger.\n * Rotates based on the accordion item state to provide visual feedback.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst TriggerIcon = ({ className, ...props }: Omit<IconProps, \"svg\">) => (\n\t<Icon\n\t\t{...props}\n\t\tdata-slot=\"accordion-trigger-icon\"\n\t\tsvg={<CaretDownIcon weight=\"fill\" />}\n\t\tclassName={cx(\"group-data-[state=open]:rotate-0 -rotate-90\", className)}\n\t/>\n);\nTriggerIcon.displayName = \"AccordionTriggerIcon\";\n\n/**\n * Contains the collapsible content for an item.\n * The content area that is revealed when the accordion item is expanded.\n *\n * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Content\n\t\tref={ref}\n\t\tdata-slot=\"accordion-content\"\n\t\tclassName={cx(\n\t\t\t\"data-state-closed:animate-accordion-up data-state-open:animate-accordion-down overflow-hidden *:first:mt-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</AccordionPrimitive.Content>\n));\nContent.displayName = \"AccordionContent\";\n\n/**\n * A vertically stacked set of interactive headings that each reveal a section of content.\n *\n * @see https://mantle.ngrok.com/components/accordion\n *\n * @example\n * Composition:\n * ```\n * Accordion.Root\n * ├── Accordion.Item\n * │   ├── Accordion.Heading\n * │   │   └── Accordion.Trigger\n * │   │       └── Accordion.TriggerIcon\n * │   └── Accordion.Content\n * ```\n *\n * @example\n * ```tsx\n * <Accordion.Root type=\"single\" collapsible>\n *   <Accordion.Item value=\"item-1\">\n *     <Accordion.Heading>\n *       <Accordion.Trigger>\n *         <Accordion.TriggerIcon />\n *         Is it accessible?\n *       </Accordion.Trigger>\n *     </Accordion.Heading>\n *     <Accordion.Content>\n *       Yes. It adheres to the WAI-ARIA design pattern.\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion.Root>\n * ```\n */\nconst Accordion = {\n\t/**\n\t * A vertically stacked set of interactive headings that each reveal a section of content.\n\t * The root component that contains all accordion items.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the collapsible content for an item.\n\t * The content area that is revealed when the accordion item is expanded.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Wraps an AccordionTrigger.\n\t * Contains the accordion trigger and provides proper heading semantics.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-heading\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tHeading,\n\t/**\n\t * Contains all the parts of a collapsible section.\n\t * A single accordion item that can be expanded or collapsed.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Toggles the collapsed state of its associated item.\n\t * The interactive element that expands or collapses the accordion content.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * An icon that indicates the expanded/collapsed state of the accordion trigger.\n\t * Rotates based on the accordion item state to provide visual feedback.\n\t *\n\t * @see https://mantle.ngrok.com/components/accordion#api-accordion-trigger-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Accordion.Root type=\"single\" collapsible>\n\t *   <Accordion.Item value=\"item-1\">\n\t *     <Accordion.Heading>\n\t *       <Accordion.Trigger>\n\t *         <Accordion.TriggerIcon />\n\t *         Is it accessible?\n\t *       </Accordion.Trigger>\n\t *     </Accordion.Heading>\n\t *     <Accordion.Content>\n\t *       Yes. It adheres to the WAI-ARIA design pattern.\n\t *     </Accordion.Content>\n\t *   </Accordion.Item>\n\t * </Accordion.Root>\n\t * ```\n\t */\n\tTriggerIcon,\n} as const;\n\nexport {\n\t//,\n\tAccordion,\n};\n"],"mappings":"8PA+BA,MAAM,EAAO,GAGV,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,KAApB,CACM,MACL,YAAU,YACV,UAAW,EAAG,qBAAsB,EAAU,CAC9C,GAAI,EACH,CAAA,CACD,CACF,EAAK,YAAc,YAyBnB,MAAM,EAAO,GAGV,CAAE,GAAG,GAAS,IAChB,EAAC,EAAmB,KAApB,CAA8B,MAAK,YAAU,iBAAiB,GAAI,EAAS,CAAA,CAC1E,CACF,EAAK,YAAc,gBAyBnB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAAC,EAAmB,OAApB,CACM,MACL,YAAU,oBACV,UAAW,EAAG,0BAA2B,EAAU,CACnD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,mBAyBtB,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,YAAU,oBACV,UAAW,EAAG,kCAAmC,EAAU,CAC3D,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAyBtB,MAAM,GAAe,CAAE,YAAW,GAAG,KACpC,EAAC,EAAD,CACC,GAAI,EACJ,YAAU,yBACV,IAAK,EAAC,EAAD,CAAe,OAAO,OAAS,CAAA,CACpC,UAAW,EAAG,8CAA+C,EAAU,CACtE,CAAA,CAEH,EAAY,YAAc,uBAyB1B,MAAM,EAAU,GAGb,CAAE,YAAW,WAAU,GAAG,GAAS,IACrC,EAAC,EAAmB,QAApB,CACM,MACL,YAAU,oBACV,UAAW,EACV,6GACA,EACA,CACD,GAAI,EAEH,WAC2B,CAAA,CAC5B,CACF,EAAQ,YAAc,mBAmCtB,MAAM,EAAY,CAwBjB,OAwBA,UAwBA,UAwBA,OAwBA,UAwBA,cACA"}

package/dist/alert-dialog.d.ts

@@ -1,7 +1,7 @@
-import { t as SvgAttributes } from "./types-yU-Byhue.js";
-import { t as DeepNonNullable } from "./deep-non-nullable-BBByg3-i.js";
-import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
-import { t as Root$1 } from "./primitive-BqLYh79k.js";
+import { t as SvgAttributes } from "./types-DEYyl5LX.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-DwBZzk4x.js";
+import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
+import { t as Root$1 } from "./primitive-DXo0gUqw.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -257,7 +257,7 @@ declare const AlertDialog: {
    * </AlertDialog.Close>
    * ```
    */
-  readonly Close: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Close: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * The popover alert dialog container.
    *
@@ -380,7 +380,7 @@ declare const AlertDialog: {
    * </AlertDialog.Trigger>
    * ```
    */
-  readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
 export { AlertDialog };

package/dist/alert-dialog.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./button-BKykcpgJ.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-pggbsddf.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=a;w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=d;I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-7gYlsX8f.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./button-GokecthL.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-tXm_8n_t.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,"data-slot":`alert-dialog-action`,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
 //# sourceMappingURL=alert-dialog.js.map

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 = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ 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-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 <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-center text-sm font-normal sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n *   <AlertDialog.Action\n *     type=\"button\"\n *     onClick={() => doThing()}\n *   >\n *     Do thing and close\n *   </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * 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 * @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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"}

package/dist/alert.d.ts

@@ -1,6 +1,6 @@
-import { t as SvgAttributes } from "./types-yU-Byhue.js";
-import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
-import { n as IconButtonProps } from "./icon-button-gO-7F_MZ.js";
+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 * as _$react from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/alert.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./types-884RJJqm.js";import{t as r}from"./slot-D_ZUrdEW.js";import{t as i}from"./icon-button-CxxVPiKp.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{MegaphoneIcon as p}from"@phosphor-icons/react/Megaphone";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as g}from"@phosphor-icons/react/X";import{cva as _}from"class-variance-authority";const v=a(null);function y(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const b=_(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{priority:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900`,important:`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`,info:`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`,success:`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`,warning:`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`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`important`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),x=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,className:e(b({appearance:t,priority:r}),n),...i})})});x.displayName=`Alert`;const S={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},C=o(({className:n,svg:r,...i},a)=>{let o=S[y().priority];return u(t,{ref:a,className:e(`size-5`,n),svg:r??o,...i})});C.displayName=`AlertIcon`;const w=o(({className:t,...n},r)=>u(`div`,{ref:r,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));w.displayName=`AlertContent`;const T=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`h5`,{ref:a,className:e(`font-medium`,n),...i}));T.displayName=`AlertTitle`;const E=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`div`,{ref:a,className:e(`text-sm`,n),...i}));E.displayName=`AlertDescription`;const D=e=>`var(--color-${e}-700)`,O=e=>`var(--color-${e}-800)`,k=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,A=({size:t=`sm`,type:r=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=u(g,{}),style:l,...d})=>{let f=y();return u(i,{appearance:o,icon:c,label:a,size:t,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:r,style:n({...l,"--alert-dismiss-icon-color":D(f.priority),"--alert-dismiss-icon-hover-color":O(f.priority),"--alert-dismiss-hover-bg":k(f.priority)}),...d})};A.displayName=`AlertDismissIconButton`;const j={Root:x,Content:w,Description:E,DismissIconButton:A,Icon:C,Title:T};export{j as Alert};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-7gYlsX8f.js";import{t as n}from"./types-884RJJqm.js";import{t as r}from"./slot-D_ZUrdEW.js";import{t as i}from"./icon-button-ZKN0sRIJ.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{MegaphoneIcon as p}from"@phosphor-icons/react/Megaphone";import{WarningIcon as m}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as h}from"@phosphor-icons/react/WarningDiamond";import{XIcon as g}from"@phosphor-icons/react/X";import{cva as _}from"class-variance-authority";const v=a(null);function y(){let e=s(v);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const b=_(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{priority:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline`,important:`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`,info:`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`,success:`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`,warning:`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`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`important`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),x=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(v.Provider,{value:o,children:u(`div`,{ref:a,"data-slot":`alert`,className:e(b({appearance:t,priority:r}),n),...i})})});x.displayName=`Alert`;const S={danger:u(m,{}),important:u(p,{mirrored:!0}),info:u(f,{}),success:u(d,{}),warning:u(h,{})},C=o(({className:n,svg:r,...i},a)=>{let o=S[y().priority];return u(t,{ref:a,"data-slot":`alert-icon`,className:e(`size-5`,n),svg:r??o,...i})});C.displayName=`AlertIcon`;const w=o(({className:t,...n},r)=>u(`div`,{ref:r,"data-slot":`alert-content`,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));w.displayName=`AlertContent`;const T=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`h5`,{ref:a,"data-slot":`alert-title`,className:e(`font-medium`,n),...i}));T.displayName=`AlertTitle`;const E=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`div`,{ref:a,"data-slot":`alert-description`,className:e(`text-sm`,n),...i}));E.displayName=`AlertDescription`;const D=e=>`var(--color-${e}-700)`,O=e=>`var(--color-${e}-800)`,k=e=>`color-mix(in oklab, var(--color-${e}-500) 10%, transparent)`,A=({size:t=`sm`,type:r=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=u(g,{}),style:l,...d})=>{let f=y();return u(i,{appearance:o,icon:c,label:a,size:t,"data-slot":`alert-dismiss-icon-button`,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,s),type:r,style:n({...l,"--alert-dismiss-icon-color":D(f.priority),"--alert-dismiss-icon-hover-color":O(f.priority),"--alert-dismiss-hover-bg":k(f.priority)}),...d})};A.displayName=`AlertDismissIconButton`;const j={Root:x,Content:w,Description:E,DismissIconButton:A,Icon:C,Title:T};export{j as Alert};
 //# sourceMappingURL=alert.js.map

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\",\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\",\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\",\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\",\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\",\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\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 ref={ref} className={cx(\"size-5\", className)} svg={svg ?? defaultIcon} {...props} />\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\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 <Component ref={ref} className={cx(\"font-medium\", className)} {...props} />;\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 <Component ref={ref} className={cx(\"text-sm\", className)} {...props} />;\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-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

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={"data-slot":`anchor`,className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};
+//# sourceMappingURL=anchor-2stEauOz.js.map

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

@@ -0,0 +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"}

package/dist/anchor.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
+import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 

package/dist/anchor.js

@@ -1,2 +1 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{f as Anchor,d as anchorClassNames,p as resolveRel};
-//# sourceMappingURL=anchor.js.map
+import{n as e,r as t,t as n}from"./anchor-2stEauOz.js";export{n as Anchor,e as anchorClassNames,t as resolveRel};

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

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

package/dist/badge.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-CRRsxi3Y.js";
-import { t as Color } from "./index-C3IiAC5H.js";
+import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
+import { t as Color } from "./index-B6SPk_xb.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/badge.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{t as n}from"./slot-D_ZUrdEW.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`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`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})};u.displayName=`Badge`;const d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-7gYlsX8f.js";import{t as n}from"./slot-D_ZUrdEW.js";import{Children as r,cloneElement as i,isValidElement as a}from"react";import o from"tiny-invariant";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";const u=({appearance:u,asChild:d=!1,children:p,className:h,color:g=`neutral`,icon:_,...v})=>{let y=f(g,u),b=m(g,u),x=e(`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`,_&&`ps-1`,y,b,h);if(d){let e=r.only(p);o(a(e),"When using `asChild`, Badge must be passed a single child as a JSX tag.");let u=e.props?.children;return c(n,{"data-slot":`badge`,className:x,...v,children:i(e,{},l(s,{children:[_&&c(t,{className:`size-4`,svg:_}),u]}))})}return l(`span`,{"data-slot":`badge`,className:x,...v,children:[_&&c(t,{className:`size-4`,svg:_}),p]})};u.displayName=`Badge`;const d={amber:`bg-amber-500/20`,blue:`bg-blue-500/20`,cyan:`bg-cyan-500/20`,emerald:`bg-emerald-500/20`,fuchsia:`bg-fuchsia-500/20`,gray:`bg-gray-500/20`,green:`bg-green-500/20`,indigo:`bg-indigo-500/20`,lime:`bg-lime-500/20`,orange:`bg-orange-500/20`,pink:`bg-pink-500/20`,purple:`bg-purple-500/20`,red:`bg-red-500/20`,rose:`bg-rose-500/20`,sky:`bg-sky-500/20`,teal:`bg-teal-500/20`,violet:`bg-violet-500/20`,yellow:`bg-yellow-500/20`,accent:`bg-accent-500/20`,danger:`bg-danger-500/20`,important:`bg-important-500/20`,info:`bg-info-500/20`,neutral:`bg-neutral-500/20`,success:`bg-success-500/20`,warning:`bg-warning-500/20`};function f(e,t){switch(t){case`muted`:return d[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}const p={amber:`text-amber-700`,blue:`text-blue-700`,cyan:`text-cyan-700`,emerald:`text-emerald-700`,fuchsia:`text-fuchsia-700`,gray:`text-gray-700`,green:`text-green-700`,indigo:`text-indigo-700`,lime:`text-lime-700`,orange:`text-orange-700`,pink:`text-pink-700`,purple:`text-purple-700`,red:`text-red-700`,rose:`text-rose-700`,sky:`text-sky-700`,teal:`text-teal-700`,violet:`text-violet-700`,yellow:`text-yellow-700`,accent:`text-accent-700`,danger:`text-danger-700`,important:`text-important-700`,info:`text-info-700`,neutral:`text-neutral-700`,success:`text-success-700`,warning:`text-warning-700`};function m(e,t){switch(t){case`muted`:return p[e];default:o(!1,`Invalid appearance: ${String(t)}`)}}export{u as Badge};
 //# sourceMappingURL=badge.js.map

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 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 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,UAAW,EAAc,GAAI,WACjC,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,UAAW,EAAc,GAAI,WAAnC,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 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"}