var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var B=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),F=(n,l)=>{for(var t in l)o(n,t,{get:l[t],enumerable:!0})},c=(n,l,t,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of D(l))!C.call(n,s)&&s!==t&&o(n,s,{get:()=>l[s],enumerable:!(r=y(l,s))||r.enumerable});return n};var m=(n,l,t)=>(t=n!=null?h(A(n)):{},c(l||!n||!n.__esModule?o(t,"default",{value:n,enumerable:!0}):t,n)),g=n=>c(o({},"__esModule",{value:!0}),n);var i=B((P,a)=>{a.exports=_jsx_runtime});var f={};F(f,{default:()=>x,frontmatter:()=>u});var e=m(i()),u={title:"Popover",description:"Popover is a component that displays a list of items in a popover.",component:!0,type:"Doc",package:{name:"ui",path:"popover.tsx"}};function d(n){let l=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",a:"a"},n.components),{ComponentExample:t,PopoverDemo:r}=l;return t||p("ComponentExample",!0),r||p("PopoverDemo",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(t,{src:"/src/components/examples/popover/demo.tsx",children:[(0,e.jsx)(r,{}),(0,e.jsx)(l.figure,{__src__:"/src/components/examples/popover/demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'use client'"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { Button, Input, FieldLabel, Popover } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { Cake } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'lucide-react'"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"PopoverDemo"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Root"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"asChild"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"outline"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-10 rounded-full p-0"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Cake"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"size-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"sr-only"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Open popover"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Content"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"space-y-2"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"font-medium leading-none"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Cake Dimensions"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"text-sm text-gray-500 dark:text-gray-400"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" Set the dimensions for the cake layer."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid grid-cols-2 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"FieldLabel"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"width"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Diameter"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"width"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"width"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"10 inches"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"col-span-2 h-8"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid grid-cols-2 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"FieldLabel"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxWidth"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Max. Layers"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxWidth"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxWidth"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"3"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"col-span-2 h-8"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid grid-cols-2 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"FieldLabel"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"height"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Height"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"height"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"height"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"4 inches"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"col-span-2 h-8"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"grid grid-cols-2 items-center gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"FieldLabel"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxHeight"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Max. Toppings"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxHeight"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"maxHeight"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"Unlimited"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"col-span-2 h-8"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { Popover } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:"'@nerdfish/ui'"})]})})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Root"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Open"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"Popover.Content"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Popover content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:""})]})]})})})]})}function v(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var x=v;function p(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(f);})(); ;return Component;