var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),D=(e,n)=>{for(var r in n)s(e,r,{get:n[r],enumerable:!0})},i=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of y(n))!f.call(e,c)&&c!==r&&s(e,c,{get:()=>n[c],enumerable:!(o=h(n,c))||o.enumerable});return e};var C=(e,n,r)=>(r=e!=null?p(E(e)):{},i(n||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),u=e=>i(s({},"__esModule",{value:!0}),e);var d=g((v,t)=>{t.exports=_jsx_runtime});var T={};D(T,{default:()=>x,frontmatter:()=>m});var l=C(d()),m={title:"Dialog",description:"An impactful dialog that ensures your important messages and actions get the attention they deserve! \u{1F4AC}\u2728",lastUpdated:"04 Nov, 2024",links:{api_reference:"https://www.radix-ui.com/primitives/docs/components/dialog#api-reference",source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Dialog/Dialog.tsx"}};function F(e){let n=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",h4:"h4",h3:"h3"},e.components),{ComponentShowcase:r,ComponentInstall:o,ComponentSource:c}=n;return o||a("ComponentInstall",!0),o.Cli||a("ComponentInstall.Cli",!0),o.Manual||a("ComponentInstall.Manual",!0),r||a("ComponentShowcase",!0),c||a("ComponentSource",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r,{name:"dialog-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/dialog-style-default.tsx",__rawString__:`import { Button, Dialog, Text } from "@/components/ui"; export default function DialogStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Dialog, Text } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Open Dialog"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Text"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm your action?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col gap-4 p-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Are you sure you want to delete this item?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">This action cannout be undone."})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex w-full justify-end"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h2,{id:"instalation",children:"Instalation"}),` `,(0,l.jsxs)(o,{children:[(0,l.jsx)(o.Cli,{children:(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/dialog.json"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,l.jsxs)(o.Manual,{children:[(0,l.jsx)(n.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-dialog"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-visually-hidden"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" tailwindcss-animate"})]})})})}),(0,l.jsx)("br",{}),(0,l.jsxs)(n.h4,{id:"2-configure-your-tailwindconfigts-add",children:["2. Configure your ",(0,l.jsx)(n.code,{children:"tailwind.config.ts"})," add:"]}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" content:"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" [...],"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" theme:"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" [...],"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" //"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" plugin"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" plugins:"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" [require("}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"tailwindcss-animate"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:")],"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})}),(0,l.jsx)(n.h4,{id:"3-copy-the-code--into-your-project",children:"3. Copy the code \u{1F447} into your project:"}),(0,l.jsx)(c,{name:"dialog",children:(0,l.jsx)(n.figure,{__src__:"/retroui/components/ui/Dialog.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ReactDialog "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-dialog"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cva, VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React, { HTMLAttributes, ReactNode } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { VisuallyHidden } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-visually-hidden"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { X } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Dialog "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ReactDialog.Root;"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogTrigger "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ReactDialog.Trigger;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" overlayVariants "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" ` fixed bg-black/80 font-head"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:fade-in-0"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:animate-in "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:animate-out "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:fade-out-0 "})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" `"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"inset-0 z-50 bg-black/80"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" none"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"fixed bg-transparent"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogBackgroupProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" overlayVariants> {}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogBackdrop "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"IDialogBackgroupProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogBackdrop"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"inputProps"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogBackgroupProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"forwardedRef"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { variant "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", className, "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" inputProps;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ReactDialog.Overlay"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"overlayVariants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"({ variant }), className)}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{forwardedRef}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"DialogBackdrop.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"DialogBackdrop"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogVariants "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" `fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" flex flex-col border-2 border-black shadow-md gap-4 overflow-y-auto bg-white"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" w-full h-fit max-h-[80vh] max-w-[97%] duration-300"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:animate-in "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:slide-in-from-left-1/2 "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:slide-in-from-top-[48%]"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:fade-in-0 "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=open]:zoom-in-95 "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:animate-out "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:fade-out-0 "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:slide-out-to-top-[48%] "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:slide-out-to-left-1/2 "})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" data-[state=closed]:zoom-out-95`"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" auto"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"max-w-fit"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" sm"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[30%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" md"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[40%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" lg"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[50%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" xl"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[60%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"2xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[70%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"3xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[80%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"4xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg:max-w-[90%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" screen"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"max-w-[100%]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"auto"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogContentProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogVariants> {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" overlay"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogBackgroupProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogContent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"IDialogContentProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogContent"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"inputProps"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogContentProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"forwardedRef"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" size "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"auto"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" overlay,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" inputProps;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ReactDialog.Portal"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DialogBackdrop"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"overlay} />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ReactDialog.Content"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"dialogVariants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"({ size }), className)}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{forwardedRef}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"VisuallyHidden"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ReactDialog.Title"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col relative"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">{children}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"DialogContent.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"DialogContent"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogDescriptionProps"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"> {}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogDescription"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogDescriptionProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ReactDialog.Description"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(className)} {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}>"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogFooterVariants "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex items-center justify-end border-t-2 border-black min-h-12 gap-4 px-4 py-2"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-white text-black"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" fixed"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"sticky bottom-0"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" static"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"static"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"fixed"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogFooterProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogFooterVariants> {}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogFooter"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogFooterProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"dialogFooterVariants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"({ position, variant }), className)}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogHeaderVariants "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex items-center justify-between border-b-2 border-black px-4 min-h-12"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-primary text-black"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" fixed"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"sticky top-0"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" static"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"static"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"static"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogHeaderDefaultLayout"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { children"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ReactNode"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }) "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <>"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DialogTrigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Close pop-up"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"cursor-pointer"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"X"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogHeaderProps"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" HTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"typeof"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" dialogHeaderVariants>,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ReactDialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DialogTitleProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogHeader"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" children,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" position,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" asChild,"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IDialogHeaderProps"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"dialogHeaderVariants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"({ position, variant }), className)}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {asChild "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" children"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ) "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DialogHeaderDefaultLayout"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">{children}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogComponent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"assign"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(Dialog, {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Trigger"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogTrigger,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Header"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogHeader,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Content"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogContent,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Description"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogDescription,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Footer"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DialogFooter,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { DialogComponent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Dialog };"})]})]})})})})]})]}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h2,{id:"example",children:"Example"}),` `,(0,l.jsx)(n.h3,{id:"confirm-dialog-message",children:"Confirm dialog message"}),` `,(0,l.jsx)(r,{name:"dialog-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/dialog-style-default.tsx",__rawString__:`import { Button, Dialog, Text } from "@/components/ui"; export default function DialogStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Dialog, Text } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Open Dialog"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Text"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm your action?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col gap-4 p-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Are you sure you want to delete this item?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">This action cannout be undone."})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex w-full justify-end"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"with-footer",children:"With footer"}),` `,(0,l.jsx)(r,{name:"dialog-style-with-footer",children:(0,l.jsx)(n.figure,{__src__:"preview/components/dialog-style-with-footer.tsx",__rawString__:`import { Button, Dialog, Text } from "@/components/ui"; export default function DialogStyleWithFooter() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Dialog, Text } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogStyleWithFooter"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Open Dialog"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Header"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"fixed"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:"asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Text"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm your action?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col gap-4 p-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Are you sure you want to delete this item?"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">This action cannout be undone."})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Footer"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Confirm"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}>Close"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"size-variants",children:"Size variants"}),` `,(0,l.jsx)(r,{name:"dialog-style-width-variant",children:(0,l.jsx)(n.figure,{__src__:"preview/components/dialog-style-width-variant.tsx",__rawString__:`import { Button, Dialog, Text } from "@/components/ui"; import { useState } from "react"; type Variants = | "auto" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "screen"; export default function DialogStyleWidthVariant() { const [variant, setVariant] = useState("auto"); const sizes: Variants[] = [ "auto", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "screen", ]; return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Dialog, Text } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { useState } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" Variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"auto"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"sm"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"md"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"2xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"3xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"4xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"screen"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogStyleWidthVariant"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" [variant, setVariant] "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"Variants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"auto"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" sizes"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" Variants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"[] "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ["})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"auto"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"sm"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"md"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"lg"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"2xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"3xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"4xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"screen"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ];"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Open Dialog"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{variant}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Header"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Text"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Dialog with variants"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col gap-4 p-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-xl"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Choose your width size"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-wrap gap-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {sizes."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"singleVariant"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"variant-list-"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" +"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" singleVariant}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{singleVariant "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" :"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{() "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" setVariant"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(singleVariant)}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {singleVariant}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ))}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"with-form",children:"With form"}),` `,(0,l.jsx)(r,{name:"dialog-style-with-form",children:(0,l.jsx)(n.figure,{__src__:"preview/components/dialog-style-with-form.tsx",__rawString__:`import { Button, Dialog, Input, Text } from "@/components/ui"; export default function DialogStyleWithForm() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Dialog, Input, Text } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" DialogStyleWithForm"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Open Form"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"md"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Header"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"fixed"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Text"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"h5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Contact Us"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col gap-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex flex-col p-4 gap-4"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex-col gap-2"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Your name <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-red-500"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">*"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Input"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Type your name"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" required"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"flex-col gap-2"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"label"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"name"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Your e-email <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-red-500"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">*"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Input"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Type your name"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" required"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Footer"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Dialog.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"submit"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Submit"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function S(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(F,e)})):F(e)}var x=S;function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return u(T);})(); ;return Component;