@ngrok/mantle 0.32.0 → 0.32.1

package/dist/dialog.d.ts

@@ -2,19 +2,111 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps } from 'react';
 import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
-import { a as IconButtonProps } from './icon-button-D41yiI7H.js';
-import { R as Root } from './primitive-hud69IM9.js';
+import { a as IconButtonProps } from './icon-button-D4BTvC7F.js';
+import { R as Root } from './primitive-BUbUB7RS.js';
 import 'class-variance-authority/types';
 import './as-child-DJ7x3JFV.js';
 import './variant-props-oDo2u-We.js';
 import 'class-variance-authority';
 import './deep-non-nullable-SmpSvoSd.js';
 
+/**
+ * A window overlaid on either the primary window or another dialog window.
+ * The root stateful component for the Dialog.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogCloseIconButton />
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *     <DialogFooter>
+ *       <Button type="button" appearance="outlined">
+ *         Cancel
+ *       </Button>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const Dialog: typeof Root;
+/**
+ * A button that opens the dialog.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogTrigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: react.FC<_radix_ui_react_dialog.DialogPortalProps>;
 declare const DialogClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The container for the dialog content.
+ * Renders on top of the overlay and is centered in the viewport.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-content
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogCloseIconButton />
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *     <DialogFooter>
+ *       <Button type="button" appearance="outlined">
+ *         Cancel
+ *       </Button>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
     /**
      * The preferred width of the `DialogContent` as a tailwind `max-w-` class.
@@ -26,21 +118,182 @@ declare const DialogContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui
      */
     preferredWidth?: `max-w-${string}`;
 } & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Contains the header content of the dialog, including the title and close button.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-header
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogCloseIconButton />
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogHeader: {
     ({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 type DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
-declare const DialogCloseIconButton: ({ size, type, label, appearance, ...props }: DialogCloseIconButtonProps) => react_jsx_runtime.JSX.Element;
+/**
+ * An icon button that closes the dialog when clicked.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogCloseIconButton />
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+declare const DialogCloseIconButton: {
+    ({ size, type, label, appearance, ...props }: DialogCloseIconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Contains the main content of the dialog.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-body
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogBody: {
     ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/**
+ * Contains the footer content of the dialog, including action buttons.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *     <DialogFooter>
+ *       <Button type="button" appearance="outlined">
+ *         Cancel
+ *       </Button>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogFooter: {
     ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/**
+ * An accessible name to be announced when the dialog is opened.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-title
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogCloseIconButton />
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogTitle: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+/**
+ * An accessible description to be announced when the dialog is opened.
+ *
+ * @see https://mantle.ngrok.com/components/dialog#api-dialog-description
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Dialog
+ *     </Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogDescription>
+ *         This is an optional description.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <DialogBody>
+ *       <p>This is the dialog content.</p>
+ *     </DialogBody>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
 declare const DialogDescription: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
 export { Dialog, DialogBody, DialogClose, DialogCloseIconButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as v,b as u,c as y,d as m,e as p,f as d,g,h as D}from"./chunk-HVMKFNT3.js";import{g as c}from"./chunk-BGY3DO4G.js";import"./chunk-3XX7M573.js";import"./chunk-D3XF6J5A.js";import{a as P}from"./chunk-BK4P33ZH.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-XQVVOOLT.js";import"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as O}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var T=v,W=u,C=y,z=m,f=r(({className:o,...t},i)=>e(p,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...t}));f.displayName=p.displayName;var x=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...B},I)=>F(C,{children:[e(f,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(d,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:l=>{c(l),i?.(l)},onPointerDownOutside:l=>{c(l),n?.(l)},ref:I,...B,children:o})})]}));x.displayName=d.displayName;var N=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});N.displayName="DialogHeader";var k=({size:o="md",type:t="button",label:i="Close Dialog",appearance:n="ghost",...s})=>e(m,{asChild:!0,children:e(P,{appearance:n,icon:e(O,{}),label:i,size:o,type:t,...s})}),b=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});b.displayName="DialogBody";var h=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});h.displayName="DialogFooter";var R=r(({className:o,...t},i)=>e(g,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));R.displayName=g.displayName;var w=r(({className:o,...t},i)=>e(D,{ref:i,className:a("text-muted",o),...t}));w.displayName=D.displayName;export{T as Dialog,b as DialogBody,z as DialogClose,k as DialogCloseIconButton,x as DialogContent,w as DialogDescription,h as DialogFooter,N as DialogHeader,f as DialogOverlay,C as DialogPortal,R as DialogTitle,W as DialogTrigger};
+import{a as c,b as f,c as P,d as m,e as u,f as y,g as v,h as C}from"./chunk-IVXZIYX4.js";import{g as p}from"./chunk-NRMIFYYG.js";import"./chunk-6RJ2G2DK.js";import"./chunk-D3XF6J5A.js";import{a as D}from"./chunk-RTXWW6ND.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as t,jsxs as F}from"react/jsx-runtime";var x=c;x.displayName="Dialog";var N=f;N.displayName="DialogTrigger";var g=P;g.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var d=r(({className:o,...e},i)=>t(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...e}));d.displayName="DialogOverlay";var h=r(({children:o,className:e,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...W},z)=>F(g,{children:[t(d,{}),t("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:t(y,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,e),onInteractOutside:l=>{p(l),i?.(l)},onPointerDownOutside:l=>{p(l),n?.(l)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:e,...i})=>t("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:e});R.displayName="DialogHeader";var B=({size:o="md",type:e="button",label:i="Close Dialog",appearance:n="ghost",...s})=>t(m,{asChild:!0,children:t(D,{appearance:n,icon:t(k,{}),label:i,size:o,type:e,...s})});B.displayName="DialogCloseIconButton";var I=({className:o,...e})=>t("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...e});I.displayName="DialogBody";var w=({className:o,...e})=>t("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...e});w.displayName="DialogFooter";var T=r(({className:o,...e},i)=>t(v,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...e}));T.displayName="DialogTitle";var O=r(({className:o,...e},i)=>t(C,{ref:i,className:a("text-muted",o),...e}));O.displayName="DialogDescription";export{x as Dialog,I as DialogBody,b as DialogClose,B as DialogCloseIconButton,h as DialogContent,O as DialogDescription,w as DialogFooter,R as DialogHeader,d as DialogOverlay,g as DialogPortal,T as DialogTitle,N as DialogTrigger};
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\ntype DialogContentProps = ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `DialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `DialogContent`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\nconst DialogContent = forwardRef<ComponentRef<\"div\">, DialogContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-none focus-within:outline-none\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n\tclassName,\n\tchildren,\n\t...props\n}: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\n\nconst DialogBody = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nDialogBody.displayName = \"DialogBody\";\n\nconst DialogFooter = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\nconst DialogTitle = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n\tDialog,\n\tDialogBody,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogOverlay,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"],"mappings":"2YAAA,OAAS,SAAAA,MAAa,0BAMtB,OAAS,cAAAC,MAAkB,QAkB1B,cAAAC,EAqCC,QAAAC,MArCD,oBAZD,IAAMC,EAAyBC,EAEzBC,EAAgCC,EAEhCC,EAA+BC,EAE/BC,EAA8BC,EAE9BC,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBe,EAAhB,CACA,IAAKD,EACL,UAAWE,EACV,iKACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAA8BK,EAAQ,YAgBpD,IAAME,EAAgBN,EACrB,CACC,CACC,SAAAO,EACA,UAAAN,EACA,kBAAAO,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGR,CACJ,EACAC,IAEAb,EAACK,EAAA,CACA,UAAAN,EAACU,EAAA,EAAc,EACfV,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiBsB,EAAhB,CACA,UAAWN,EACV,yCACA,yCACA,wFACA,2KACAK,EACAT,CACD,EACA,kBAAoBW,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACA,IAAKT,EACJ,GAAGD,EAEH,SAAAK,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAA8BK,EAAQ,YAEpD,IAAMG,EAAe,CAAC,CACrB,UAAAb,EACA,SAAAM,EACA,GAAGL,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,+GACA,0BACAJ,CACD,EACC,GAAGC,EAEH,SAAAK,EACF,EAEDO,EAAa,YAAc,eAG3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGjB,CACJ,IACCb,EAAiBS,EAAhB,CAAsB,QAAO,GAC7B,SAAAT,EAAC+B,EAAA,CACA,WAAYD,EACZ,KAAM9B,EAACgC,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGf,EACL,EACD,EAGKoB,EAAa,CAAC,CAAE,UAAArB,EAAW,GAAGC,CAAM,IACzCb,EAAC,OACA,UAAWgB,EAAG,iDAAkDJ,CAAS,EACxE,GAAGC,EACL,EAEDoB,EAAW,YAAc,aAEzB,IAAMC,EAAe,CAAC,CAAE,UAAAtB,EAAW,GAAGC,CAAM,IAC3Cb,EAAC,OACA,UAAWgB,EACV,8EACAJ,CACD,EACC,GAAGC,EACL,EAEDqB,EAAa,YAAc,eAE3B,IAAMC,EAAcxB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBoC,EAAhB,CACA,IAAKtB,EACL,UAAWE,EAAG,2CAA4CJ,CAAS,EAClE,GAAGC,EACL,CACA,EACDsB,EAAY,YAA8BC,EAAM,YAEhD,IAAMC,EAAoB1B,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBsC,EAAhB,CACA,IAAKxB,EACL,UAAWE,EAAG,aAAcJ,CAAS,EACpC,GAAGC,EACL,CACA,EACDwB,EAAkB,YAA8BC,EAAY","names":["XIcon","forwardRef","jsx","jsxs","Dialog","Root","DialogTrigger","Trigger","DialogPortal","Portal","DialogClose","Close","DialogOverlay","forwardRef","className","props","ref","Overlay","cx","DialogContent","children","onInteractOutside","onPointerDownOutside","preferredWidth","Content","event","preventCloseOnPromptInteraction","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","XIcon","DialogBody","DialogFooter","DialogTitle","Title","DialogDescription","Description"]}
+{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst Dialog = DialogPrimitive.Root;\nDialog.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogTrigger = DialogPrimitive.Trigger;\nDialogTrigger.displayName = \"DialogTrigger\";\n\nconst DialogPortal = DialogPrimitive.Portal;\nDialogPortal.displayName = \"DialogPortal\";\n\nconst DialogClose = DialogPrimitive.Close;\nDialogClose.displayName = \"DialogClose\";\n\nconst DialogOverlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\ntype DialogContentProps = ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `DialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `DialogContent`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogContent = forwardRef<ComponentRef<\"div\">, DialogContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-none focus-within:outline-none\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogHeader = ({\n\tclassName,\n\tchildren,\n\t...props\n}: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nDialogCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogBody = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nDialogBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogFooter = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogTitle = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogDescription>\n *         This is an optional description.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogDescription = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n\tDialog,\n\tDialogBody,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogOverlay,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"],"mappings":"gZAAA,OAAS,SAAAA,MAAa,0BAMtB,OAAS,cAAAC,MAAkB,QAgF1B,cAAAC,EAuEC,QAAAC,MAvED,oBAxCD,IAAMC,EAAyBC,EAC/BD,EAAO,YAAc,SA0BrB,IAAME,EAAgCC,EACtCD,EAAc,YAAc,gBAE5B,IAAME,EAA+BC,EACrCD,EAAa,YAAc,eAE3B,IAAME,EAA8BC,EACpCD,EAAY,YAAc,cAE1B,IAAME,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBe,EAAhB,CACA,IAAKD,EACL,UAAWE,EACV,iKACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAAc,gBAkD5B,IAAMO,EAAgBN,EACrB,CACC,CACC,SAAAO,EACA,UAAAN,EACA,kBAAAO,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGR,CACJ,EACAC,IAEAb,EAACK,EAAA,CACA,UAAAN,EAACU,EAAA,EAAc,EACfV,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiBsB,EAAhB,CACA,UAAWN,EACV,yCACA,yCACA,wFACA,2KACAK,EACAT,CACD,EACA,kBAAoBW,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACA,IAAKT,EACJ,GAAGD,EAEH,SAAAK,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAAc,gBA2B5B,IAAMQ,EAAe,CAAC,CACrB,UAAAb,EACA,SAAAM,EACA,GAAGL,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,+GACA,0BACAJ,CACD,EACC,GAAGC,EAEH,SAAAK,EACF,EAEDO,EAAa,YAAc,eA6B3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGjB,CACJ,IACCb,EAAiBS,EAAhB,CAAsB,QAAO,GAC7B,SAAAT,EAAC+B,EAAA,CACA,WAAYD,EACZ,KAAM9B,EAACgC,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGf,EACL,EACD,EAEDa,EAAsB,YAAc,wBA0BpC,IAAMO,EAAa,CAAC,CAAE,UAAArB,EAAW,GAAGC,CAAM,IACzCb,EAAC,OACA,UAAWgB,EAAG,iDAAkDJ,CAAS,EACxE,GAAGC,EACL,EAEDoB,EAAW,YAAc,aAkCzB,IAAMC,EAAe,CAAC,CAAE,UAAAtB,EAAW,GAAGC,CAAM,IAC3Cb,EAAC,OACA,UAAWgB,EACV,8EACAJ,CACD,EACC,GAAGC,EACL,EAEDqB,EAAa,YAAc,eA2B3B,IAAMC,EAAcxB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBoC,EAAhB,CACA,IAAKtB,EACL,UAAWE,EAAG,2CAA4CJ,CAAS,EAClE,GAAGC,EACL,CACA,EACDsB,EAAY,YAAc,cA6B1B,IAAME,EAAoB1B,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBsC,EAAhB,CACA,IAAKxB,EACL,UAAWE,EAAG,aAAcJ,CAAS,EACpC,GAAGC,EACL,CACA,EACDwB,EAAkB,YAAc","names":["XIcon","forwardRef","jsx","jsxs","Dialog","Root","DialogTrigger","Trigger","DialogPortal","Portal","DialogClose","Close","DialogOverlay","forwardRef","className","props","ref","Overlay","cx","DialogContent","children","onInteractOutside","onPointerDownOutside","preferredWidth","Content","event","preventCloseOnPromptInteraction","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","XIcon","DialogBody","DialogFooter","DialogTitle","Title","DialogDescription","Description"]}

package/dist/dropdown-menu.d.ts

@@ -3,7 +3,47 @@ import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 import * as react from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
+/**
+ * A menu of options or actions, triggered by a button.
+ * This is the root, stateful component that manages the open/closed state of the dropdown menu.
+ *
+ * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Menu
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuItem>Item 2</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+/**
+ * The trigger button that opens the dropdown menu.
+ *
+ * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Menu
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
@@ -13,12 +53,52 @@ declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<Dropd
     inset?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * The container for the dropdown menu content.
+ *
+ * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Menu
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuItem>Item 2</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     /**
      * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.
      */
     width?: "trigger" | "content";
 } & react.RefAttributes<HTMLDivElement>>;
+/**
+ * An item in the dropdown menu.
+ *
+ * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Open Menu
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuItem>Item 2</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
 declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;

package/dist/dropdown-menu.js

@@ -1,2 +1,2 @@
-import{b as c}from"./chunk-UXH22BMO.js";import{a as s}from"./chunk-XQVVOOLT.js";import"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{CaretRightIcon as y}from"@phosphor-icons/react/CaretRight";import{CheckIcon as w}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as u}from"react/jsx-runtime";var R=e.Root,I=e.Trigger,k=e.Group,m=e.Portal,S=e.Sub,N=e.RadioGroup,f=d(({className:t,inset:n,children:r,...i},p)=>u(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(y,{weight:"bold"}),className:"size-4"})})]}));f.displayName="DropdownMenuSubTrigger";var g=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));g.displayName="DropdownMenuSubContent";var h=d(({className:t,onClick:n,loop:r=!0,width:i,...p},C)=>o(m,{children:o(e.Content,{ref:C,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:l=>{l.stopPropagation(),n?.(l)},...p})}));h.displayName="DropdownMenuContent";var v=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));v.displayName="DropdownMenuItem";var M=d(({className:t,children:n,checked:r,...i},p)=>u(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));M.displayName="DropdownMenuCheckboxItem";var D=d(({className:t,children:n,...r},i)=>u(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));D.displayName="DropdownMenuRadioItem";var b=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));b.displayName="DropdownMenuLabel";var P=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));P.displayName="DropdownMenuSeparator";var x=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});x.displayName="DropdownMenuShortcut";export{R as DropdownMenu,M as DropdownMenuCheckboxItem,h as DropdownMenuContent,k as DropdownMenuGroup,v as DropdownMenuItem,b as DropdownMenuLabel,m as DropdownMenuPortal,N as DropdownMenuRadioGroup,D as DropdownMenuRadioItem,P as DropdownMenuSeparator,x as DropdownMenuShortcut,S as DropdownMenuSub,g as DropdownMenuSubContent,f as DropdownMenuSubTrigger,I as DropdownMenuTrigger};
+import{b as c}from"./chunk-J6ZF5J72.js";import{a as s}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{CaretRightIcon as k}from"@phosphor-icons/react/CaretRight";import{CheckIcon as w}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as u}from"react/jsx-runtime";var f=e.Root;f.displayName="DropdownMenu";var g=e.Trigger;g.displayName="DropdownMenuTrigger";var M=e.Group;M.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var D=e.Sub;D.displayName="DropdownMenuSub";var h=e.RadioGroup;h.displayName="DropdownMenuRadioGroup";var v=d(({className:t,inset:n,children:r,...i},p)=>u(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(k,{weight:"bold"}),className:"size-4"})})]}));v.displayName="DropdownMenuSubTrigger";var b=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));b.displayName="DropdownMenuSubContent";var P=d(({className:t,onClick:n,loop:r=!0,width:i,...p},S)=>o(m,{children:o(e.Content,{ref:S,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:l=>{l.stopPropagation(),n?.(l)},...p})}));P.displayName="DropdownMenuContent";var y=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));y.displayName="DropdownMenuItem";var x=d(({className:t,children:n,checked:r,...i},p)=>u(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:t,children:n,...r},i)=>u(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));R.displayName="DropdownMenuLabel";var I=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));I.displayName="DropdownMenuSeparator";var N=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});N.displayName="DropdownMenuShortcut";export{f as DropdownMenu,x as DropdownMenuCheckboxItem,P as DropdownMenuContent,M as DropdownMenuGroup,y as DropdownMenuItem,R as DropdownMenuLabel,m as DropdownMenuPortal,h as DropdownMenuRadioGroup,C as DropdownMenuRadioItem,I as DropdownMenuSeparator,N as DropdownMenuShortcut,D as DropdownMenuSub,b as DropdownMenuSubContent,v as DropdownMenuSubTrigger,g as DropdownMenuTrigger};
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-state-open:bg-popover-hover\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\nconst DropdownMenuSubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<DropdownMenuPortal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPortal>\n));\nDropdownMenuSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.Content\n> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\nconst DropdownMenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<DropdownMenuPortal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-dropdown-menu-trigger-width)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPortal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\nconst DropdownMenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\nconst DropdownMenuCheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\nconst DropdownMenuRadioItem = forwardRef<\n\tComponentRef<\"input\">,\n\tDropdownMenuRadioItemProps\n>(({ className, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioItem\n\t\tclassName={cx(\n\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuLabel = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"px-2 py-1.5 text-sm font-semibold\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\nconst DropdownMenuSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst DropdownMenuShortcut = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"],"mappings":"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","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","DropdownMenu","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuPortal","DropdownMenuSub","DropdownMenuRadioGroup","DropdownMenuSubTrigger","forwardRef","className","inset","children","props","ref","cx","Icon","CaretRightIcon","DropdownMenuSubContent","loop","DropdownMenuContent","onClick","width","event","DropdownMenuItem","DropdownMenuCheckboxItem","checked","CheckIcon","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator","Separator","DropdownMenuShortcut"]}
+{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Item 1</DropdownMenuItem>\n *     <DropdownMenuItem>Item 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nconst DropdownMenu = DropdownMenuPrimitive.Root;\nDropdownMenu.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Item 1</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nDropdownMenuGroup.displayName = \"DropdownMenuGroup\";\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nDropdownMenuPortal.displayName = \"DropdownMenuPortal\";\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nDropdownMenuSub.displayName = \"DropdownMenuSub\";\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\nDropdownMenuRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\nconst DropdownMenuSubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-state-open:bg-popover-hover\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\nconst DropdownMenuSubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<DropdownMenuPortal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPortal>\n));\nDropdownMenuSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.Content\n> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Item 1</DropdownMenuItem>\n *     <DropdownMenuItem>Item 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nconst DropdownMenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<DropdownMenuPortal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-dropdown-menu-trigger-width)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</DropdownMenuPortal>\n));\nDropdownMenuContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem>Item 1</DropdownMenuItem>\n *     <DropdownMenuItem>Item 2</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n */\nconst DropdownMenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuItem.displayName = \"DropdownMenuItem\";\n\nconst DropdownMenuCheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\nconst DropdownMenuRadioItem = forwardRef<\n\tComponentRef<\"input\">,\n\tDropdownMenuRadioItemProps\n>(({ className, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioItem\n\t\tclassName={cx(\n\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuLabel = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"px-2 py-1.5 text-sm font-semibold\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuLabel.displayName = \"DropdownMenuLabel\";\n\nconst DropdownMenuSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownMenuSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst DropdownMenuShortcut = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"],"mappings":"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","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","DropdownMenu","DropdownMenuTrigger","DropdownMenuGroup","DropdownMenuPortal","DropdownMenuSub","DropdownMenuRadioGroup","DropdownMenuSubTrigger","forwardRef","className","inset","children","props","ref","cx","Icon","CaretRightIcon","DropdownMenuSubContent","loop","DropdownMenuContent","onClick","width","event","DropdownMenuItem","DropdownMenuCheckboxItem","checked","CheckIcon","DropdownMenuRadioItem","DropdownMenuLabel","DropdownMenuSeparator","Separator","DropdownMenuShortcut"]}

package/dist/flag.d.ts

@@ -35,7 +35,7 @@ type Props = Omit<ComponentProps<"div">, "children"> & {
  * A flag component that displays a flag based on the provided country code.
  * Inspired by [react-flagpack](https://flagpack.xyz/docs/development/react).
  *
- * @see https://mantle.ngrok.com/components/flag#api
+ * @see https://mantle.ngrok.com/components/flag#api-flag
  *
  * @example
  * ```tsx
@@ -46,5 +46,8 @@ type Props = Omit<ComponentProps<"div">, "children"> & {
  * ```
  */
 declare function Flag({ className, code, size, loading, ...props }: Props): react_jsx_runtime.JSX.Element;
+declare namespace Flag {
+    var displayName: string;
+}
 
 export { type CountryCode, Flag, type Props as FlagProps, countryCodes, isCountryCode };