https://headlessui.com/_next/static/chunks/pages/examples/[id]-9a878eca1d9d0a56.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[761],{3873:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/examples/[id]",function(){return s(9696)}])},9093:function(e,t,s){"use strict";s.d(t,{Z:function(){return i}});var n=s(5893),a=s(9692);function i(){return(0,n.jsx)(a.z,{className:"inline-flex items-center gap-2 rounded-md bg-gray-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-gray-600 data-open:bg-gray-700",children:"Save changes"})}},8567:function(e,t,s){"use strict";s.d(t,{Z:function(){return l}});var n=s(5893),a=s(8162),i=s(4466),o=s(7294);function l(){let[e,t]=(0,o.useState)(!0);return(0,n.jsx)(a.X,{checked:e,onChange:t,className:"group size-6 rounded-md bg-white/10 p-1 ring-1 ring-white/15 ring-inset focus:not-data-focus:outline-none data-checked:bg-white data-focus:outline data-focus:outline-offset-2 data-focus:outline-white",children:(0,n.jsx)(i.Z,{className:"hidden size-4 fill-black group-data-checked:block"})})}},8605:function(e,t,s){"use strict";s.d(t,{Z:function(){return d}});var n=s(5893),a=s(7322),i=s(6220),o=s(9029),l=s(512),r=s(7294);let c=[{id:1,name:"Tom Cook"},{id:2,name:"Wade Cooper"},{id:3,name:"Tanya Fox"},{id:4,name:"Arlene Mccoy"},{id:5,name:"Devon Webb"}];function d(){let[e,t]=(0,r.useState)(""),[s,d]=(0,r.useState)(c[1]),u=""===e?c:c.filter(t=>t.name.toLowerCase().includes(e.toLowerCase()));return(0,n.jsx)("div",{className:"mx-auto h-screen w-52 pt-20",children:(0,n.jsxs)(a.hQ,{value:s,onChange:e=>d(e),onClose:()=>t(""),__demoMode:!0,children:[(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsx)(a.gA,{className:(0,l.Z)("w-full rounded-lg border-none bg-white/5 py-1.5 pr-8 pl-3 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25"),displayValue:e=>null==e?void 0:e.name,onChange:e=>t(e.target.value)}),(0,n.jsx)(a.Q$,{className:"group absolute inset-y-0 right-0 px-2.5",children:(0,n.jsx)(i.Z,{className:"size-4 fill-white/60 group-data-hover:fill-white"})})]}),(0,n.jsx)(a.L5,{anchor:"bottom",transition:!0,className:(0,l.Z)("w-(--input-width) rounded-xl border border-white/5 bg-white/5 p-1 [--anchor-gap:--spacing(1)] empty:invisible","transition duration-100 ease-in data-leave:data-closed:opacity-0"),children:u.map(e=>(0,n.jsxs)(a.O2,{value:e,className:"group flex cursor-default items-center gap-2 rounded-lg px-3 py-1.5 select-none data-focus:bg-white/10",children:[(0,n.jsx)(o.Z,{className:"invisible size-4 fill-white group-data-selected:visible"}),(0,n.jsx)("div",{className:"text-sm/6 text-white",children:e.name})]},e.id))})]})})}},726:function(e,t,s){"use strict";s.d(t,{Z:function(){return l}});var n=s(5893),a=s(9692),i=s(2951),o=s(7294);function l(){let[e,t]=(0,o.useState)(!0);function s(){t(!1)}return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.z,{onClick:function(){t(!0)},className:"rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-black/30",children:"Open dialog"}),(0,n.jsx)(i.Vq,{open:e,as:"div",className:"relative z-10 focus:outline-none",onClose:s,__demoMode:!0,children:(0,n.jsx)("div",{className:"fixed inset-0 z-10 w-screen overflow-y-auto",children:(0,n.jsx)("div",{className:"flex min-h-full items-center justify-center p-4",children:(0,n.jsxs)(i.EM,{transition:!0,className:"w-full max-w-md rounded-xl bg-white/5 p-6 backdrop-blur-2xl duration-300 ease-out data-closed:transform-[scale(95%)] data-closed:opacity-0",children:[(0,n.jsx)(i.$N,{as:"h3",className:"text-base/7 font-medium text-white",children:"Payment successful"}),(0,n.jsx)("p",{className:"mt-2 text-sm/6 text-white/50",children:"Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order."}),(0,n.jsx)("div",{className:"mt-4",children:(0,n.jsx)(a.z,{className:"inline-flex items-center gap-2 rounded-md bg-gray-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-gray-600 data-open:bg-gray-700",onClick:s,children:"Got it, thanks!"})})]})})})})]})}},2389:function(e,t,s){"use strict";s.d(t,{Z:function(){return o}});var n=s(5893),a=s(5705),i=s(6220);function o(){return(0,n.jsx)("div",{className:"h-screen w-full px-4 pt-32",children:(0,n.jsxs)("div",{className:"mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5",children:[(0,n.jsxs)(a.pJ,{as:"div",className:"p-6",defaultOpen:!0,children:[(0,n.jsxs)(a.lG,{className:"group flex w-full items-center justify-between",children:[(0,n.jsx)("span",{className:"text-sm/6 font-medium text-white group-data-hover:text-white/80",children:"What is your refund policy?"}),(0,n.jsx)(i.Z,{className:"size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"})]}),(0,n.jsx)(a.V2,{className:"mt-2 text-sm/5 text-white/50",children:"If you're unhappy with your purchase, we'll refund you in full."})]}),(0,n.jsxs)(a.pJ,{as:"div",className:"p-6",children:[(0,n.jsxs)(a.lG,{className:"group flex w-full items-center justify-between",children:[(0,n.jsx)("span",{className:"text-sm/6 font-medium text-white group-data-hover:text-white/80",children:"Do you offer technical support?"}),(0,n.jsx)(i.Z,{className:"size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"})]}),(0,n.jsx)(a.V2,{className:"mt-2 text-sm/5 text-white/50",children:"No."})]})]})})}},9642:function(e,t,s){"use strict";s.d(t,{Z:function(){return m}});var n=s(5893),a=s(1899),i=s(198),o=s(7988),l=s(4386),r=s(3853),c=s(1539),d=s(7432),u=s(1415),h=s(6220),x=s(512);function m(){return(0,n.jsx)("div",{className:"w-full max-w-lg px-4",children:(0,n.jsxs)(a.p,{className:"space-y-6 rounded-xl bg-white/5 p-6 sm:p-10",children:[(0,n.jsx)(i.D,{className:"text-base/7 font-semibold text-white",children:"Shipping details"}),(0,n.jsxs)(o.g,{children:[(0,n.jsx)(l.__,{className:"text-sm/6 font-medium text-white",children:"Street address"}),(0,n.jsx)(r.I,{className:(0,x.Z)("mt-3 block w-full rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25")})]}),(0,n.jsxs)(o.g,{children:[(0,n.jsx)(l.__,{className:"text-sm/6 font-medium text-white",children:"Country"}),(0,n.jsx)(c.dk,{className:"text-sm/6 text-white/50",children:"We currently only ship to North America."}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)(d.P,{className:(0,x.Z)("mt-3 block w-full appearance-none rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25","*:text-black"),children:[(0,n.jsx)("option",{children:"Canada"}),(0,n.jsx)("option",{children:"Mexico"}),(0,n.jsx)("option",{children:"United States"})]}),(0,n.jsx)(h.Z,{className:"group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60","aria-hidden":"true"})]})]}),(0,n.jsxs)(o.g,{children:[(0,n.jsx)(l.__,{className:"text-sm/6 font-medium text-white",children:"Delivery notes"}),(0,n.jsx)(c.dk,{className:"text-sm/6 text-white/50",children:"If you have a tiger, we'd like to know about it."}),(0,n.jsx)(u.g,{className:(0,x.Z)("mt-3 block w-full resize-none rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25"),rows:3})]})]})})}},3905:function(e,t,s){"use strict";s.d(t,{Z:function(){return c}});var n=s(5893),a=s(7988),i=s(4386),o=s(1539),l=s(3853),r=s(512);function c(){return(0,n.jsx)("div",{className:"w-full max-w-md px-4",children:(0,n.jsxs)(a.g,{children:[(0,n.jsx)(i.__,{className:"text-sm/6 font-medium text-white",children:"Name"}),(0,n.jsx)(o.dk,{className:"text-sm/6 text-white/50",children:"Use your real name so people will recognize you."}),(0,n.jsx)(l.I,{className:(0,r.Z)("mt-3 block w-full rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25")})]})})}},8079:function(e,t,s){"use strict";s.d(t,{Z:function(){return d}});var n=s(5893),a=s(2793),i=s(6220),o=s(9029),l=s(512),r=s(7294);let c=[{id:1,name:"Tom Cook"},{id:2,name:"Wade Cooper"},{id:3,name:"Tanya Fox"},{id:4,name:"Arlene Mccoy"},{id:5,name:"Devon Webb"}];function d(){let[e,t]=(0,r.useState)(c[1]);return(0,n.jsx)("div",{className:"mx-auto h-screen w-52 pt-20",children:(0,n.jsxs)(a.Ri,{value:e,onCh

1ange:t,__demoMode:!0,children:[(0,n.jsxs)(a.Y4,{className:(0,l.Z)("relative block w-full rounded-lg bg-white/5 py-1.5 pr-8 pl-3 text-left text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25"),children:[e.name,(0,n.jsx)(i.Z,{className:"group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60","aria-hidden":"true"})]}),(0,n.jsx)(a.O_,{anchor:"bottom",transition:!0,className:(0,l.Z)("w-(--button-width) rounded-xl border border-white/5 bg-white/5 p-1 [--anchor-gap:--spacing(1)] focus:outline-none","transition duration-100 ease-in data-leave:data-closed:opacity-0"),children:c.map(e=>(0,n.jsxs)(a.wt,{value:e,className:"group flex cursor-default items-center gap-2 rounded-lg px-3 py-1.5 select-none data-focus:bg-white/10",children:[(0,n.jsx)(o.Z,{className:"invisible size-4 fill-white group-data-selected:visible"}),(0,n.jsx)("div",{className:"text-sm/6 text-white",children:e.name})]},e.name))})]})})}},3794:function(e,t,s){"use strict";s.d(t,{Z:function(){return d}});var n=s(5893),a=s(7284),i=s(5835),o=s(2379),l=s(2279),r=s(501),c=s(4401);function d(){return(0,n.jsx)("div",{className:"fixed top-24 w-52 text-right",children:(0,n.jsxs)(a.v2,{__demoMode:!0,children:[(0,n.jsxs)(a.j2,{className:"inline-flex items-center gap-2 rounded-md bg-gray-800 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-gray-700 data-open:bg-gray-700",children:["Options",(0,n.jsx)(i.Z,{className:"size-4 fill-white/60"})]}),(0,n.jsxs)(a.sd,{transition:!0,anchor:"bottom end",className:"w-52 origin-top-right rounded-xl border border-white/5 bg-white/5 p-1 text-sm/6 text-white transition duration-100 ease-out [--anchor-gap:--spacing(1)] focus:outline-none data-closed:scale-95 data-closed:opacity-0",children:[(0,n.jsx)(a.sN,{children:(0,n.jsxs)("button",{className:"group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10",children:[(0,n.jsx)(o.Z,{className:"size-4 fill-white/30"}),"Edit",(0,n.jsx)("kbd",{className:"ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline",children:"⌘E"})]})}),(0,n.jsx)(a.sN,{children:(0,n.jsxs)("button",{className:"group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10",children:[(0,n.jsx)(l.Z,{className:"size-4 fill-white/30"}),"Duplicate",(0,n.jsx)("kbd",{className:"ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline",children:"⌘D"})]})}),(0,n.jsx)("div",{className:"my-1 h-px bg-white/5"}),(0,n.jsx)(a.sN,{children:(0,n.jsxs)("button",{className:"group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10",children:[(0,n.jsx)(r.Z,{className:"size-4 fill-white/30"}),"Archive",(0,n.jsx)("kbd",{className:"ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline",children:"⌘A"})]})}),(0,n.jsx)(a.sN,{children:(0,n.jsxs)("button",{className:"group flex w-full items-center gap-2 rounded-lg px-3 py-1.5 data-focus:bg-white/10",children:[(0,n.jsx)(c.Z,{className:"size-4 fill-white/30"}),"Delete",(0,n.jsx)("kbd",{className:"ml-auto hidden font-sans text-xs text-white/50 group-data-focus:inline",children:"⌘D"})]})})]})]})})}},8088:function(e,t,s){"use strict";s.d(t,{Z:function(){return i}});var n=s(5893),a=s(7820);function i(){return(0,n.jsx)("div",{className:"flex h-screen w-full justify-center pt-20",children:(0,n.jsxs)("div",{className:"flex gap-8",children:[(0,n.jsx)("div",{className:"text-sm/6 font-semibold text-white/50",children:"Products"}),(0,n.jsxs)(a.J2,{__demoMode:!0,children:[(0,n.jsx)(a.O7,{className:"block text-sm/6 font-semibold text-white/50 focus:outline-none data-active:text-white data-focus:outline data-focus:outline-white data-hover:text-white",children:"Solutions"}),(0,n.jsxs)(a.Hi,{transition:!0,anchor:"bottom",className:"divide-y divide-white/5 rounded-xl bg-white/5 text-sm/6 transition duration-200 ease-in-out [--anchor-gap:--spacing(5)] data-closed:-translate-y-1 data-closed:opacity-0",children:[(0,n.jsxs)("div",{className:"p-3",children:[(0,n.jsxs)("a",{className:"block rounded-lg px-3 py-2 transition hover:bg-white/5",href:"#",children:[(0,n.jsx)("p",{className:"font-semibold text-white",children:"Insights"}),(0,n.jsx)("p",{className:"text-white/50",children:"Measure actions your users take"})]}),(0,n.jsxs)("a",{className:"block rounded-lg px-3 py-2 transition hover:bg-white/5",href:"#",children:[(0,n.jsx)("p",{className:"font-semibold text-white",children:"Automations"}),(0,n.jsx)("p",{className:"text-white/50",children:"Create your own targeted content"})]}),(0,n.jsxs)("a",{className:"block rounded-lg px-3 py-2 transition hover:bg-white/5",href:"#",children:[(0,n.jsx)("p",{className:"font-semibold text-white",children:"Reports"}),(0,n.jsx)("p",{className:"text-white/50",children:"Keep track of your growth"})]})]}),(0,n.jsx)("div",{className:"p-3",children:(0,n.jsxs)("a",{className:"block rounded-lg px-3 py-2 transition hover:bg-white/5",href:"#",children:[(0,n.jsx)("p",{className:"font-semibold text-white",children:"Documentation"}),(0,n.jsx)("p",{className:"text-white/50",children:"Start integrating products and tools"})]})})]})]}),(0,n.jsx)("div",{className:"text-sm/6 font-semibold text-white/50",children:"Pricing"})]})})}},7153:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});var n=s(5893),a=s(1718),i=s(175),o=s(7294);let l=[{name:"Startup",ram:"12GB",cpus:"6 CPUs",disk:"256GB SSD disk"},{name:"Business",ram:"16GB",cpus:"8 CPUs",disk:"512GB SSD disk"},{name:"Enterprise",ram:"32GB",cpus:"12 CPUs",disk:"1TB SSD disk"}];function r(){let[e,t]=(0,o.useState)(l[0]);return(0,n.jsx)("div",{className:"w-full px-4",children:(0,n.jsx)("div",{className:"mx-auto w-full max-w-md",children:(0,n.jsx)(a.Ee,{by:"name",value:e,onCh

1ange:t,"aria-label":"Server size",className:"space-y-2",children:l.map(e=>(0,n.jsx)(a.Y8,{value:e,className:"group relative flex cursor-pointer rounded-lg bg-white/5 px-5 py-4 text-white shadow-md transition focus:not-data-focus:outline-none data-checked:bg-white/10 data-focus:outline data-focus:outline-white",children:(0,n.jsxs)("div",{className:"flex w-full items-center justify-between",children:[(0,n.jsxs)("div",{className:"text-sm/6",children:[(0,n.jsx)("p",{className:"font-semibold text-white",children:e.name}),(0,n.jsxs)("div",{className:"flex gap-2 text-white/50",children:[(0,n.jsx)("div",{children:e.ram}),(0,n.jsx)("div",{"aria-hidden":"true",children:"\xb7"}),(0,n.jsx)("div",{children:e.cpus}),(0,n.jsx)("div",{"aria-hidden":"true",children:"\xb7"}),(0,n.jsx)("div",{children:e.disk})]})]}),(0,n.jsx)(i.Z,{className:"size-6 fill-white opacity-0 transition group-data-checked:opacity-100"})]})},e.name))})})})}},6973:function(e,t,s){"use strict";s.d(t,{Z:function(){return d}});var n=s(5893),a=s(7988),i=s(4386),o=s(1539),l=s(7432),r=s(6220),c=s(512);function d(){return(0,n.jsx)("div",{className:"w-full max-w-md px-4",children:(0,n.jsxs)(a.g,{children:[(0,n.jsx)(i.__,{className:"text-sm/6 font-medium text-white",children:"Project status"}),(0,n.jsx)(o.dk,{className:"text-sm/6 text-white/50",children:"This will be visible to clients on the project."}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)(l.P,{className:(0,c.Z)("mt-3 block w-full appearance-none rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25","*:text-black"),children:[(0,n.jsx)("option",{value:"active",children:"Active"}),(0,n.jsx)("option",{value:"paused",children:"Paused"}),(0,n.jsx)("option",{value:"delayed",children:"Delayed"}),(0,n.jsx)("option",{value:"canceled",children:"Canceled"})]}),(0,n.jsx)(r.Z,{className:"group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60","aria-hidden":"true"})]})]})})}},8865:function(e,t,s){"use strict";s.d(t,{Z:function(){return o}});var n=s(5893),a=s(861),i=s(7294);function o(){let[e,t]=(0,i.useState)(!1);return(0,n.jsx)(a.rs,{checked:e,onChange:t,className:"group relative flex h-7 w-14 cursor-pointer rounded-full bg-white/10 p-1 ease-in-out focus:not-data-focus:outline-none data-checked:bg-white/10 data-focus:outline data-focus:outline-white",children:(0,n.jsx)("span",{"aria-hidden":"true",className:"pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out group-data-checked:translate-x-7"})})}},8642:function(e,t,s){"use strict";s.d(t,{Z:function(){return o}});var n=s(5893),a=s(707);let i=[{name:"Recent",posts:[{id:1,title:"Does drinking coffee make you smarter?",date:"5h ago",commentCount:5,shareCount:2},{id:2,title:"So you've bought coffee... now what?",date:"2h ago",commentCount:3,shareCount:2}]},{name:"Popular",posts:[{id:1,title:"Is tech making coffee better or worse?",date:"Jan 7",commentCount:29,shareCount:16},{id:2,title:"The most innovative things happening in coffee",date:"Mar 19",commentCount:24,shareCount:12}]},{name:"Trending",posts:[{id:1,title:"Ask Me Anything: 10 answers to your questions about coffee",date:"2d ago",commentCount:9,shareCount:5},{id:2,title:"The worst advice we've ever heard about coffee",date:"4d ago",commentCount:1,shareCount:2}]}];function o(){return(0,n.jsx)("div",{className:"flex h-screen w-full justify-center px-4 pt-24",children:(0,n.jsx)("div",{className:"w-full max-w-md",children:(0,n.jsxs)(a.v0,{children:[(0,n.jsx)(a.td,{className:"flex gap-4",children:i.map(e=>{let{name:t}=e;return(0,n.jsx)(a.OK,{className:"rounded-full px-3 py-1 text-sm/6 font-semibold text-white focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white data-hover:bg-white/5 data-selected:bg-white/10 data-selected:data-hover:bg-white/10",children:t},t)})}),(0,n.jsx)(a.nP,{className:"mt-3",children:i.map(e=>{let{name:t,posts:s}=e;return(0,n.jsx)(a.x4,{className:"rounded-xl bg-white/5 p-3",children:(0,n.jsx)("ul",{children:s.map(e=>(0,n.jsxs)("li",{className:"relative rounded-md p-3 text-sm/6 transition hover:bg-white/5",children:[(0,n.jsxs)("a",{href:"#",className:"font-semibold text-white",children:[(0,n.jsx)("span",{className:"absolute inset-0"}),e.title]}),(0,n.jsxs)("ul",{className:"flex gap-2 text-white/50","aria-hidden":"true",children:[(0,n.jsx)("li",{children:e.date}),(0,n.jsx)("li",{"aria-hidden":"true",children:"\xb7"}),(0,n.jsxs)("li",{children:[e.commentCount," comments"]}),(0,n.jsx)("li",{"aria-hidden":"true",children:"\xb7"}),(0,n.jsxs)("li",{children:[e.shareCount," shares"]})]})]},e.id))})},t)})})]})})})}},9894:function(e,t,s){"use strict";s.d(t,{Z:function(){return c}});var n=s(5893),a=s(7988),i=s(4386),o=s(1539),l=s(1415),r=s(512);function c(){return(0,n.jsx)("div",{className:"w-full max-w-md px-4",children:(0,n.jsxs)(a.g,{children:[(0,n.jsx)(i.__,{className:"text-sm/6 font-medium text-white",children:"Description"}),(0,n.jsx)(o.dk,{className:"text-sm/6 text-white/50",children:"This will be shown under the product title."}),(0,n.jsx)(l.g,{className:(0,r.Z)("mt-3 block w-full resize-none rounded-lg border-none bg-white/5 px-3 py-1.5 text-sm/6 text-white","focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25"),rows:3})]})})}},9966:function(e,t,s){"use strict";s.d(t,{Z:function(){return c}});var n=s(5893),a=s(2993),i=s(9692),o=s(3181),l=s(512),r=s(7294);function c(){let[e,t]=(0,r.useState)(!0);return(0,n.jsxs)("div",{className:"mt-8 flex flex-col items-center",children:[(0,n.jsx)("div",{className:"size-25",children:(0,n.jsx)(a.u,{show:e,children:(0,n.jsx)("div",{className:(0,l.Z)("size-full rounded-xl bg-white shadow-lg transition duration-400","data-closed:scale-50 data-closed:rotate-[-120deg] data-closed:opacity-0","data-leave:duration-200 data-leave:ease-in-out","data-leave:data-closed:scale-95 data-leave:data-closed:rotate-0")})})}),(0,n.jsxs)(i.z,{onClick:()=>{t(!1),setTimeout(()=>t(!0),500)},className:"mt-10 flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-sm/6 font-semibold text-white transition data-hover:scale-105 data-hover:bg-white/15",children:[(0,n.jsx)(o.Z,{className:"size-4 fill-white/50"}),(0,n.jsx)("span",{children:"Click to transition"})]})]})}},9696:function(e,t,s){"use strict";s.r(t),s.d(t,{__N_SSG:function(){return G},default:function(){return O}});

1var n=s(5893),a=s(9093),i=s(8567),o=s(8605),l=s(726),r=s(2389),c=s(9642),d=s(3905),u=s(8079),h=s(3794),x=s(8088),m=s(7153),f=s(6973),p=s(8865),w=s(8642),g=s(9894),j=s(9966),v=s(6252),b=s(3744);let N=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),y=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),Z=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),k=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),C=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),_=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),z=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),D=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),S=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]),P=(0,b.Z)({},[["render",function(e,t){return(0,v.wg)(),(0,v.iD)("div")}]]);var T=s(1163),M=s(7294),E=s(9963);let A={"react-button":a.Z,"react-checkbox":i.Z,"react-combobox":o.Z,"react-dialog":l.Z,"react-disclosure":r.Z,"react-fieldset":c.Z,"react-input":d.Z,"react-listbox":u.Z,"react-menu":h.Z,"react-popover":x.Z,"react-radio-group":m.Z,"react-select":f.Z,"react-switch":p.Z,"react-tabs":w.Z,"react-textarea":g.Z,"react-transition":j.Z,"vue-combobox":N,"vue-dialog":y,"vue-disclosure":Z,"vue-listbox":k,"vue-menu":C,"vue-popover":_,"vue-radio-group":z,"vue-switch":D,"vue-tabs":S,"vue-transition":P};var G=!0;function O(){let{query:{id:e}}=(0,T.useRouter)();return(0,n.jsx)("div",{children:e.includes("vue")?(0,n.jsx)(B,{VueComponent:A[e]}):(0,n.jsx)(W,{ReactComponent:A[e]})})}function B(e){let{VueComponent:t,onReady:s}=e,a=(0,M.useRef)();return(0,M.useEffect)(()=>{let e=(0,E.ri)(t);return e.mount(a.current),()=>{e.unmount()}},[]),(0,n.jsxs)("div",{className:"relative bg-white/5",children:[(0,n.jsx)("div",{className:"absolute inset-[35%] block rounded-full bg-white/15 blur-2xl"}),(0,n.jsx)("div",{ref:a,className:"relative flex min-h-screen w-full flex-col items-center justify-center"})]})}function W(e){let{ReactComponent:t,onReady:s}=e;return(0,n.jsxs)("div",{className:"relative bg-white/5",children:[(0,n.jsx)("div",{className:"absolute inset-[35%] block rounded-full bg-white/15 blur-2xl"}),(0,n.jsx)("div",{className:"relative flex min-h-screen w-full flex-col items-center justify-center",children:(0,n.jsx)(t,{})})]})}}},function(e){e.O(0,[688,393,793,394,371,888,774,179],function(){return e(e.s=3873)}),_N_E=e.O()}]);