var Component=(()=>{var N=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),g=(l,n)=>{for(var s in n)a(l,s,{get:n[s],enumerable:!0})},p=(l,n,s,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of w(n))!v.call(l,r)&&r!==s&&a(l,r,{get:()=>n[r],enumerable:!(o=f(n,r))||o.enumerable});return l};var M=(l,n,s)=>(s=l!=null?N(x(l)):{},p(n||!l||!l.__esModule?a(s,"default",{value:l,enumerable:!0}):s,l)),D=l=>p(a({},"__esModule",{value:!0}),l);var y=b((C,h)=>{h.exports=_jsx_runtime});var _={};g(_,{default:()=>u,frontmatter:()=>P});var e=M(y()),P={title:"Dropdown Menu",description:"Display a menu of options for selection within a dropdown interface.",component:!0,links:{doc:"https://ui.shadcn.com/docs/components/dropdown-menu",api:"https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference"}};function m(l){let n={a:"a",code:"code",div:"div",h2:"h2",p:"p",pre:"pre",span:"span",...l.components},{ComponentSource:s,Step:o,Steps:r,Tabs:t,TabsContent:F,TabsList:d,TabsTrigger:i}=n;return s||c("ComponentSource",!0),o||c("Step",!0),r||c("Steps",!0),t||c("Tabs",!0),F||c("TabsContent",!0),d||c("TabsList",!0),i||c("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"installation",children:[(0,e.jsx)(n.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(t,{defaultValue:"cli",children:[(0,e.jsxs)(d,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(F,{value:"cli",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcx@latest add dropdown-menu -r plate-ui `,__npmCommand__:`npx shadcx@latest add dropdown-menu -r plate-ui `,__yarnCommand__:`npx shadcx@latest add dropdown-menu -r plate-ui `,__pnpmCommand__:`pnpm dlx shadcx@latest add dropdown-menu -r plate-ui `,__bunCommand__:`bunx --bun shadcx@latest add dropdown-menu -r plate-ui `,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" shadcx@latest"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" add"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" dropdown-menu"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" -r"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" plate-ui"})]})})})})}),(0,e.jsx)(F,{value:"manual",children:(0,e.jsxs)(r,{children:[(0,e.jsxs)(o,{children:[(0,e.jsxs)(n.p,{children:["Install the ",(0,e.jsx)(n.code,{children:"@radix-ui/react-dropdown-menu"})," component from radix-ui:"]}),(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-dropdown-menu `,__npmCommand__:`npm install @radix-ui/react-dropdown-menu `,__yarnCommand__:`yarn add @radix-ui/react-dropdown-menu `,__pnpmCommand__:`pnpm add @radix-ui/react-dropdown-menu `,__bunCommand__:`bun add @radix-ui/react-dropdown-menu `,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npm"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" install"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" @radix-ui/react-dropdown-menu"})]})})})})]}),(0,e.jsx)(o,{children:(0,e.jsx)(n.p,{children:"Copy and paste the following code into your project."})}),(0,e.jsx)(s,{name:"dropdown-menu",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import * as React from 'react'; import { useCallback, useState } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { cn, createPrimitiveElement, withCn, withProps, withRef, withVariants, } from '@udecode/cn'; import { cva } from 'class-variance-authority'; import { Icons } from '@/components/icons'; export const DropdownMenu = DropdownMenuPrimitive.Root; export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; export const DropdownMenuGroup = DropdownMenuPrimitive.Group; export const DropdownMenuPortal = DropdownMenuPrimitive.Portal; export const DropdownMenuSub = DropdownMenuPrimitive.Sub; export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; export const DropdownMenuSubTrigger = withRef< typeof DropdownMenuPrimitive.SubTrigger, { inset?: boolean; } >(({ children, className, inset, ...props }, ref) => ( {children} )); export const DropdownMenuSubContent = withCn( DropdownMenuPrimitive.SubContent, 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' ); const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, { className: cn( 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' ), sideOffset: 4, }); export const DropdownMenuContent = withRef< typeof DropdownMenuPrimitive.Content >(({ ...props }, ref) => ( { e.preventDefault(); }} {...props} /> )); const menuItemVariants = cva( cn( 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50' ), { variants: { inset: { true: 'pl-8', }, }, } ); export const DropdownMenuItem = withVariants( DropdownMenuPrimitive.Item, menuItemVariants, ['inset'] ); export const DropdownMenuCheckboxItem = withRef< typeof DropdownMenuPrimitive.CheckboxItem >(({ children, className, ...props }, ref) => ( {children} )); export const DropdownMenuRadioItem = withRef< typeof DropdownMenuPrimitive.RadioItem, { hideIcon?: boolean; } >(({ children, className, hideIcon, ...props }, ref) => ( {!hideIcon && ( )} {children} )); const dropdownMenuLabelVariants = cva( cn('select-none px-2 py-1.5 text-sm font-semibold'), { variants: { inset: { true: 'pl-8', }, }, } ); export const DropdownMenuLabel = withVariants( DropdownMenuPrimitive.Label, dropdownMenuLabelVariants, ['inset'] ); export const DropdownMenuSeparator = withCn( DropdownMenuPrimitive.Separator, '-mx-1 my-1 h-px bg-muted' ); export const DropdownMenuShortcut = withCn( createPrimitiveElement('span'), 'ml-auto text-xs tracking-widest opacity-60' ); export const useOpenState = () => { const [open, setOpen] = useState(false); const onOpenChange = useCallback( (_value = !open) => { setOpen(_value); }, [open] ); return { open, onOpenChange, }; }; `,__src__:"registry/default/plate-ui/dropdown-menu.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" '@radix-ui/react-dropdown-menu'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" createPrimitiveElement"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withRef"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withVariants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" '@udecode/cn'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cva "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'class-variance-authority'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" Icons "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" '@/components/icons'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenu "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Root"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuTrigger "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Trigger"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuGroup "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Group"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPortal "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Portal"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuSub "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Sub"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuRadioGroup "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"RadioGroup"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuSubTrigger "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withRef"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" typeof"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"SubTrigger"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" boolean"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.SubTrigger"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" inset "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'pl-8'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Icons.chevronRight className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:'"ml-auto size-4"'}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"));"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuSubContent "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"SubContent"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuContentVariants "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Content"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" sideOffset"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 4,"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"});"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuContent "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withRef"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" typeof"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Content"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.Portal"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuContentVariants"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" onCloseAutoFocus"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"preventDefault"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"));"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" menuItemVariants "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cva"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" variants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" true"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'pl-8'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuItem "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withVariants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Item"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" menuItemVariants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"'inset'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"]"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuCheckboxItem "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withRef"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" typeof"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"CheckboxItem"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.CheckboxItem"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'cursor-pointer'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"span className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:'"absolute left-2 flex size-3.5 items-center justify-center"'}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.ItemIndicator"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Icons.check className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-4"'}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"));"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuRadioItem "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withRef"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" typeof"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"RadioItem"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" hideIcon"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" boolean"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" hideIcon"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.RadioItem"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {!"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"hideIcon "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"span className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:'"absolute right-2 flex size-3.5 items-center justify-center"'}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"DropdownMenuPrimitive.ItemIndicator"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Icons.check className"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:'"size-4"'}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"children"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"));"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" dropdownMenuLabelVariants "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cva"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"'select-none px-2 py-1.5 text-sm font-semibold'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" variants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" inset"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" true"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'pl-8'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuLabel "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withVariants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" dropdownMenuLabelVariants"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"'inset'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"]"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuSeparator "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuPrimitive"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"Separator"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" '-mx-1 my-1 h-px bg-muted'"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuShortcut "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" createPrimitiveElement"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"'span'"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" 'ml-auto text-xs tracking-widest opacity-60'"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useOpenState"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"open"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" setOpen"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" onOpenChange "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"_value "}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" !"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"open"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" setOpen"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"_value"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"open"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"]"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" open"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" onOpenChange"}),(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#FFF8"},children:"};"})})]})})})}),(0,e.jsx)(o,{children:(0,e.jsx)(n.p,{children:"Update the import paths to match your project setup."})})]})})]})]})}function u(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(m,{...l})}):m(l)}function c(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(_);})(); ;return Component;