https://headlessui.com/_next/static/chunks/47-0747a7fce7a8aa10.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[47],{9780:function(e,s,t){t.d(s,{$F:function(){return a},Ak:function(){return u},Dv:function(){return r},JN:function(){return c},VC:function(){return j},fI:function(){return o},fu:function(){return x},kl:function(){return d},lk:function(){return h},ql:function(){return m},rD:function(){return p},xP:function(){return i}});var n=t(5893),l=t(7294);let r=e=>{let{children:s}=e;return(0,n.jsx)("div",{className:"mt-6 mb-12",children:(0,n.jsx)("div",{className:"-mx-2 overflow-x-auto sm:mx-0",children:(0,n.jsx)("table",{className:"w-full min-w-[540px] border-b border-white/7.5 text-left",children:(0,n.jsx)("tbody",{className:"divide-y divide-white/7.5",children:s})})})})},i=e=>{let{children:s}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("tr",{className:"text-white",children:[(0,n.jsx)("td",{className:"w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0",children:"Prop"}),(0,n.jsx)("td",{className:"w-1/5 py-2 pl-2 text-sm font-medium",children:"Default"}),(0,n.jsx)("td",{className:"w-3/5 py-2 pl-2 text-sm font-medium",children:"Description"})]}),s]})},o=e=>{let{prop:s,type:t,defaultValue:l,defaultHelper:r,children:i}=e;return(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{className:"prose prose-sm py-3 pl-4 align-baseline sm:pl-0",children:(0,n.jsx)("code",{children:s})}),(0,n.jsx)("td",{className:"prose prose-sm py-3 pl-2 align-baseline",children:l?(0,n.jsxs)("span",{children:[(0,n.jsx)("code",{children:l}),r&&(0,n.jsxs)(n.Fragment,{children:[" ",(0,n.jsx)("em",{className:"text-gray-400",children:r})]})]}):(0,n.jsx)("span",{className:"text-gray-400",children:"—"})}),(0,n.jsxs)("td",{className:"py-3 pl-2 align-baseline",children:[(0,n.jsx)("div",{className:"prose prose-sm my-0 space-x-5",children:(0,n.jsx)("code",{children:t})}),(0,n.jsx)("div",{className:"prose prose-sm prose-docs-table",children:i})]})]})},c=e=>{let{children:s,label:t="Render Prop"}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("tr",{className:"text-white",children:[(0,n.jsx)("td",{className:"w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0",children:"Data Attribute"}),(0,n.jsx)("td",{className:"w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0",children:t}),(0,n.jsx)("td",{className:"w-3/5 pb-2 pl-2 text-sm font-medium",children:"Description"})]}),s]})},a=e=>{let{prop:s,type:t,children:l}=e;return(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{className:"prose prose-sm py-3 pl-4 align-baseline text-sm sm:pl-0",children:"Boolean"===t?(0,n.jsxs)("code",{children:["data-",s]}):(0,n.jsx)("span",{className:"text-gray-400",children:"—"})}),(0,n.jsx)("td",{className:"prose prose-sm py-3 pl-2 align-baseline text-sm sm:pl-0",children:(0,n.jsx)("code",{children:s})}),(0,n.jsxs)("td",{className:"py-3 pl-2 align-baseline",children:[(0,n.jsx)("p",{className:"prose prose-sm my-0 space-x-5",children:(0,n.jsx)("span",{children:(0,n.jsx)("code",{children:t})})}),(0,n.jsx)("div",{className:"prose prose-sm prose-docs-table",children:l})]})]})},d=e=>{let{component:s,only:t=[]}=e,r=(0,l.useMemo)(()=>[{prop:"value",type:"T",children:(0,n.jsx)("p",{children:"The selected value."})},{prop:"open",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is open."]})},{prop:"activeOption",type:"T | null",children:(0,n.jsxs)("p",{children:["The focused option, or ",(0,n.jsx)("code",{children:"null"})," if none is focused."]})},{prop:"selected",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is selected."]})},{prop:"checked",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is checked."]})},{prop:"indeterminate",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is indeterminate."]})},{prop:"invalid",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is invalid."]})},{prop:"disabled",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is disabled."]})},{prop:"focus",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is focused."]})},{prop:"hover",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is hovered."]})},{prop:"active",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is in an active or pressed state."]})},{prop:"autofocus",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the ",(0,n.jsx)("code",{children:"autoFocus"})," prop was set to ",(0,n.jsx)("code",{children:"true"}),"."]})},{prop:"changing",type:"Boolean",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("p",{children:"Whether or not the checked state is currently changing."}),(0,n.jsxs)("p",{children:["When the ",(0,n.jsx)("code",{children:"checked"})," state changes, ",(0,n.jsx)("code",{children:"changing"})," will be ",(0,n.jsx)("code",{children:"true"})," for two animation frames, allowing you to fine-tune transitions."]})]})}],[s]),i=(0,l.useMemo)(()=>r.filter(e=>t.includes(e.prop)),[r,t]);return(0,n.jsx)(n.Fragment,{children:i.map(e=>(0,n.jsx)(a,{...e},e.prop))})},h=e=>{let{component:s,defaultAs:t,trigger:r,supportsSelectionPlacement:i,clarifyDisabled:c,only:a}=e,d=(0,l.useMemo)(()=>[{prop:"as",type:"String | Component",defaultValue:t,children:(0,n.jsxs)("p",{children:["The element or component the ",s," should render as."]})},{prop:"defaultValue",type:"T",children:(0,n.jsx)("p",{children:"The default value when using as an uncontrolled component."})},{prop:"by",option:"true",type:"keyof T | ((a: T, z: T) => boolean)",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("p",{children:"Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared."}),(0,n.jsxs)("p",{children:["When you pass an object to the ",(0,n.jsx)("code",{children:"value"})," prop, ",(0,n.jsx)("code",{children:"by"})," will default to",(0,n.jsx)("code",{children:"id"})," when present."]})]})},{prop:"invalid",type:"Boolean",defaultValue:"false",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is invali

1d."]})},{prop:"disabled",type:"Boolean",defaultValue:"false",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," is disabled",c?" for keyboard navigation and ARIA purposes":"","."]})},{prop:"autoFocus",type:"Boolean",defaultValue:"false",children:(0,n.jsxs)("p",{children:["Whether or not the ",s," should receive focus when first rendered."]})},{prop:"name",type:"String",children:(0,n.jsxs)("p",{children:["The name used when using the ",s," inside a form."]})},{prop:"form",type:"String",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{children:["The id of the form that the ",s," belongs to."]}),(0,n.jsxs)("p",{children:["If ",(0,n.jsx)("code",{children:"name"})," is provided but ",(0,n.jsx)("code",{children:"form"})," is not, the ",s," will add its state to the nearest ancestor ",(0,n.jsx)("code",{children:"form"})," element."]})]})},{prop:"transition",type:"Boolean",defaultValue:"false",children:(0,n.jsxs)("p",{children:["Whether the element should render transition attributes like ",(0,n.jsx)("code",{children:"data-closed"}),","," ",(0,n.jsx)("code",{children:"data-enter"})," and ",(0,n.jsx)("code",{children:"data-leave"}),"."]})},{prop:"anchor",type:"Object",children:(0,n.jsxs)("p",{children:["listbox options"===s&&(0,n.jsx)(n.Fragment,{children:"Configures the way the dropdown is anchored to the button."}),"menu items"===s&&(0,n.jsx)(n.Fragment,{children:"Configures the way the dropdown is anchored to the button."}),"popover panel"===s&&(0,n.jsx)(n.Fragment,{children:"Configures the way the panel is anchored to the button."}),"combobox options"===s&&(0,n.jsx)(n.Fragment,{children:"Configures the way the dropdown is anchored to the input."})]})},{prop:"anchor.to",type:"String",defaultValue:"bottom",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{children:["Where to position the ",s," relative to the trigger."]}),(0,n.jsxs)("p",{children:["Use the values ",(0,n.jsx)("code",{children:"top"}),", ",(0,n.jsx)("code",{children:"right"}),", ",(0,n.jsx)("code",{children:"bottom"}),", ",(0,n.jsx)("code",{children:"left"})," to center the"," ",s," along the appropriate edge, or combine it with ",(0,n.jsx)("code",{children:"start"})," or ",(0,n.jsx)("code",{children:"end"})," to align the ",s," to a specific corner, such as ",(0,n.jsx)("code",{children:"top start"})," or ",(0,n.jsx)("code",{children:"bottom end"}),"."]}),i&&(0,n.jsxs)("p",{children:["Alternatively, use the ",(0,n.jsx)("code",{children:"selection"})," option to position the currently selected option directly above the ",r,"."]})]})},{prop:"anchor.gap",type:"Number | String",defaultValue:"0",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{children:["The space between the ",r," and the ",s,"."]}

1),(0,n.jsxs)("p",{children:["Can also be controlled using the ",(0,n.jsx)("code",{children:"--anchor-gap"})," CSS variable."]})]})},{prop:"anchor.offset",type:"Number | String",defaultValue:"0",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{children:["The distance the ",s," should be nudged from its original position."]}),(0,n.jsxs)("p",{children:["Can also be controlled using the ",(0,n.jsx)("code",{children:"--anchor-offset"})," CSS variable."]})]})},{prop:"anchor.padding",type:"Number | String",defaultValue:"0",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("p",{children:["The minimum space between the ",s," and the viewport."]}),(0,n.jsxs)("p",{children:["Can also be controlled using the ",(0,n.jsx)("code",{children:"--anchor-padding"})," CSS variable."]})]})},{prop:"static",type:"Boolean",defaultValue:"false",children:(0,n.jsx)("p",{children:"Whether the element should ignore the internally managed open/closed state."})},{prop:"unmount",type:"Boolean",defaultValue:"true",children:(0,n.jsx)("p",{children:"Whether the element should be unmounted or hidden based on the open/closed state."})},{prop:"portal",type:"Boolean",defaultValue:"false",children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("p",{children:"Whether the element should be rendered in a portal."}),(0,n.jsxs)("p",{children:["Automatically set to ",(0,n.jsx)("code",{children:"true"})," when ",(0,n.jsx)("code",{children:"anchor"})," prop is set."]})]})},{prop:"modal",type:"Boolean",defaultValue:"true",children:(0,n.jsxs)("p",{children:["Whether to enable accessibility features like scroll locking, focus trapping, and making other elements"," ",(0,n.jsx)("code",{children:"inert"}),"."]})}],[]),h=(0,l.useMemo)(()=>d.filter(e=>a.includes(e.prop)||a.includes(e.prop.startsWith("anchor"))),[d,a]);return(0,n.jsx)(n.Fragment,{children:h.map(e=>(0,n.jsx)(o,{...e},e.prop))})},p=()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"prose mt-3",children:(0,n.jsxs)("p",{children:["Groups a ",(0,n.jsx)("code",{children:"Label"}),", ",(0,n.jsx)("code",{children:"Description"}),", and form control together."]})}),(0,n.jsx)(r,{children:(0,n.jsxs)(i,{children:[(0,n.jsx)(h,{component:"field",defaultAs:"div",only:["as"]}),(0,n.jsx)(o,{prop:"disabled",defaultValue:"false",type:"Boolean",children:(0,n.jsx)("p",{children:"Whether or not the field is disabled."})})]})}),(0,n.jsx)(r,{children:(0,n.jsx)(c,{children:(0,n.jsx)(a,{prop:"disabled",type:"Boolean",children:(0,n.jsx)("p",{children:"Whether or not the field is disabled."})})})})]}),x=()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"prose mt-3",children:(0,n.jsxs)("p",{children:["The ",(0,n.jsx)("code",{children:"Label"})," component labels a form control."]})}),(0,n.jsx)(r,{children:(0,n.jsxs)(i,{children:[(0,n.jsx)(h,{component:"label",defaultAs:"label",only:["as"]}),(0,n.jsx)(o,{prop:"passive",defaultValue:"false",type:"Boolean",children:(0,n.jsx)("p",{children:"When true, clicking the label won't focus the associated form control."})})]})}),(0,n.jsx)(r,{children:(0,n.jsx)(c,{children:(0,n.jsx)(a,{prop:"disabled",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the parent ",(0,n.jsx)("code",{children:"Field"})," is disabled."]})})})})]}),u=()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"prose mt-3",children:(0,n.jsxs)("p",{children:["The ",(0,n.jsx)("code",{children:"Description"})," component describes a form control."]})}),(0,n.jsx)(r,{children:(0,n.jsx)(i,{children:(0,n.jsx)(h,{component:"description",defaultAs:"p",only:["as"]})})}),(0,n.jsx)(r,{children:(0,n.jsx)(c,{children:(0,n.jsx)(a,{prop:"disabled",type:"Boolean",children:(0,n.jsxs)("p",{children:["Whether or not the parent ",(0,n.jsx)("code",{children:"Field"})," is disabled."]})})})})]}),m=e=>{let{children:s}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("tr",{className:"text-white",children:[(0,n.jsx)("td",{className:"w-2/5 py-2 pl-4 text-sm font-medium sm:pl-0",children:"Attribute"}),(0,n.jsx)("td",{className:"w-3/5 py-2 pl-2 text-sm font-medium",children:"Description"})]}),s]})},j=e=>{let{name:s,children:t}=e;return(0,n.jsxs)("tr",{children:[(0,n.jsx)("td",{className:"prose prose-sm py-3 pl-4 align-baseline sm:pl-0",children:(0,n.jsx)("code",{children:s})}),(0,n.jsx)("td",{className:"py-3 pl-2 align-baseline",children:(0,n.jsx)("div",{className:"prose prose-sm prose-docs-table",children:t})})]})}},4997:function(e,s,t){t.d(s,{E:function(){return l}});var n=t(5893);function l(e){let{language:s,html:t}=e;return(0,n.jsx)("pre",{className:"language-".concat(s),children:(0,n.jsx)("code",{dangerouslySetInnerHTML:{__html:t}})})}},3941:function(e,s,t){t.d(s,{X:function(){return l}});var n=t(5893);let l=function(e){let{level:s,id:t,children:l,toc:r=!1,...i}=e;return(0,n.jsxs)("h".concat(s),{className:"group whitespace-pre-wrap",id:t,...i,children:[(0,n.jsx)("a",{href:"#".concat(t),className:"absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-['#'] focus-visible:opacity-100","aria-label":l}

1),(0,n.jsx)("span",{"aria-hidden":!0,children:l})]})}},6132:function(e,s,t){t.d(s,{e:function(){return x}});var n=t(5893),l=t(1434),r=t(7759),i=t(7294),o=t(1582),c=t(4997);let a={fieldset:700,popover:500};function d(e){let{isViewingCode:s,setIsViewingCode:t}=e;return(0,n.jsx)("div",{className:"absolute top-0 right-0 z-10 p-2",children:(0,n.jsxs)("div",{"data-viewing-code":s?"true":void 0,className:"flex gap-1 rounded-full bg-black/25 p-1 backdrop-blur-sm",children:[(0,n.jsx)("button",{onClick:()=>t(!1),"data-selected":s?void 0:"true",className:"rounded-full px-2 py-1 text-xs/4 font-medium text-white hover:bg-white/5 data-selected:bg-white/10",children:"Preview"}),(0,n.jsx)("button",{onClick:()=>t(!0),"data-selected":s?"true":void 0,className:"rounded-full px-2 py-1 text-xs/4 font-medium text-white hover:bg-white/5 data-selected:bg-white/10",children:"Code"})]})})}function h(e){let{code:s,html:t}=e,[a,d]=(0,i.useState)(!1),[,,h]=(0,o.Z)(()=>d(!1),1e3);async function p(){await navigator.clipboard.writeText(s),d(!0),h()}return(0,n.jsxs)("div",{className:"relative size-full",children:[(0,n.jsx)("button",{onClick:p,className:"group absolute right-3 bottom-3 size-8 rounded-full bg-white/5 p-2 backdrop-blur-sm hover:bg-white/10","aria-label":"Copy code to clipboard",children:a?(0,n.jsx)(l.Z,{className:"size-4 fill-white"}):(0,n.jsx)(r.Z,{className:"size-4 fill-white/60 group-hover:fill-white"})}),(0,n.jsx)("div",{className:"prose size-full overflow-y-scroll *:h-full",children:(0,n.jsx)(c.E,{language:"jsx",html:t})})]})}function p(e){let{module:s}=e,t=s.split(/[\/.]/).slice(2,4).join("-");return(0,n.jsx)("div",{className:"size-full bg-white/5",children:(0,n.jsx)("iframe",{src:"/examples/".concat(t),className:"size-full [color-scheme:auto]"})})}function x(e){var s;let{module:t,code:l,highlightedCodeHtml:r}=e,[o,c]=(0,i.useState)(!1),x=t.split(/[\/.]/)[3];return(0,n.jsxs)("div",{className:"relative mt-8 mb-12 flex flex-col items-center justify-center overflow-hidden",style:{height:null!==(s=a[x])&&void 0!==s?s:400},children:[(0,n.jsx)(d,{isViewingCode:o,setIsViewingCode:c}),o?(0,n.jsx)(h,{code:l,html:r}):(0,n.jsx)(p,{module:t})]})}},1033:function(e,s,t){t.d(s,{A:function(){return x}});var n=t(5893),l=t(1664),r=t.n(l),i=t(1163);let o=e=>{let{href:s,children:t}=e,l=(0,i.useRouter)().pathname===s;return(0,n.jsx)(r(),{href:s,"data-active":l?"true":void 0,className:"group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm",children:t})};var c=t(8456);let a=e=>{let{headings:s}=e;return(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{className:"font-mono text-xs font-semibold tracking-widest text-white/50 uppercase",children:"On this page"}),(0,n.jsx)("nav",{children:(0,n.jsx)(d,{headings:[...s,{title:"Styled examples",slug:"styled-examples",children:[]}]})})]})},d=e=>{let{headings:s}=e;return s&&(0,n.jsx)("ul",{className:"text-sm text-white/80",children:s.map(e=>(0,n.jsxs)("li",{className:"mt-4",children:[(0,n.jsx)("a",{href:"#".concat(e.slug),className:"hover:text-white",children:e.title}),(0,n.jsx)("div",{className:"pl-4",children:(0,n.jsx)(d,{headings:e.children})})]},e.slug))})};function h(){return(0,n.jsx)("div",{className:"sticky top-0 hidden h-screen w-68 shrink-0 lg:block lg:pr-px xl:pr-[2px]",children:(0,n.jsxs)("div",{className:"h-full overflow-y-auto pb-[calc(80px+4rem)]",children:[(0,n.jsxs)("div",{className:"flex gap-4 px-4 pt-16 pb-8",children:[(0,n.jsx)("div",{className:"rounded-full bg-white/10 px-3 py-1 text-sm/6 font-semibold text-white select-none",children:"React"}),(0,n.jsx)(r(),{href:(0,c.U)("vue"),className:"rounded-full px-3 py-1 text-sm/6 font-semibold text-white/50 hover:bg-white/5 hover:text-white/75",children:"Vue"})]}),(0,n.jsx)("nav",{children:c.$.map((e,s)=>{let{name:t,components:l}=e;return(0,n.jsxs)("div",{className:"border-t border-white/7.5 py-7",children:[0===s?(0,n.jsx)("h2",{className:"px-4 pb-4 font-mono text-xs font-semibold tracking-widest text-white/50 uppercase",children:t}):(0,n.jsx)("h3",{className:"px-4 pb-4 font-mono text-xs font-semibold tracking-widest text-white/50 uppercase",children:t}),(0,n.jsx)("div",{className:"flex flex-col gap-4 px-4",children:l.map(e=>{let{name:s,slug:t}=e;return(0,n.jsx)(o,{href:"/react/".concat(t),children:s},s)})})]},t)})})]})})}function p(e){let{tableOfContents:s}=e;return(0,n.jsx)("div",{className:"sticky top-0 hidden h-screen w-68 xl:block",children:(0,n.jsx)("div",{className:"h-full overflow-y-auto px-4 pt-16 pb-[calc(80px+4rem)]",children:(0,n.jsx)(a,{headings:s})})})}function x(e){let{children:s,tableOfContents:t}=e;return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)("main",{className:"rounded-[2.5rem] bg-black/80 px-4 sm:px-6",children:(0,n.jsxs)("div",{className:"mx-auto flex max-w-7xl",children:[(0,n.jsx)(h,{}),(0,n.jsx)("main",{className:"flex min-w-0 flex-1 pt-16",children:(0,n.jsx)("div",{className:"mx-auto max-w-184 min-w-0 flex-1 px-2 md:px-8",children:s})}),(0,n.jsx)(p,{tableOfContents:t})]})})})}},7416:function(e,s,t){t.d(s,{Z:function(){return l}});var n=t(5893);function l(e){let{children:s}=e;return(0,n.jsx)("div",{className:"prose mt-4 mb-6",children:(0,n.jsx)("p",{className:"text-base/7",children:s})})}},4192:function(e,s,t){t.d(s,{I:function(){return a}});var n=t(5893),l=t(3941),r={src:"/_next/static/media/tailwind-plus.434a3ca6.png",height:716,width:1284,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAAIVBMVEX4+Pnw8PD19fj+///n6OnFw9P8+/rNzc+IipZmbYHQ0+bagNbLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJUlEQVR4nAXBgQEAIAjDsG4DQf8/2ATnnNQY8u6AML2FCkvbQR8IjABtMHV3xQAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:4},i=t(5675),o=t.n(i);function c(){return(0,n.jsxs)("svg",{className:"w-48 max-w-full",fill:"none",viewBox:"0 0 204 24",children:[(0,n.jsx)("path",{className:"fill-sky-400",fillRule:"evenodd",d:"M19.561.526q-7.824 0-9.78 7.825 2.934-3.912 6.846-2.934c1.488.372 2.552 1.451 3.73 2.646 1.917 1.947 4.137 4.2 8.985 4.2q7.825 0 9.78-7.824-2.934 3.912-6.846 2.934C30.788 7 29.724 5.92 28.547 4.726 26.63 2.78 24.41.526 19.561.526m-9.78 11.737q-7.825 0-9.781 7.825 2.934-3.913 6.846-2.934c1.489.372 2.552 1.451 3.73 2.646 1.917 1.947 4.137 4.2 8.985 4.2q7.825 0 9.781-7.825-2.934 3.913-6.846 2.935c-1.489-.372-2.552-1.452-3.73-2.647-1.917-1.947-4.137-4.2-8.985-4.2",clipRule:"evenodd"}),(0,n.jsx)("path",{fill:"#fff",d:"M144.741.81h2.919v18.922h-2.919v-1.946c-1.027 1.432-2.622 2.297-4.731 2.297-3.676 0-6.73-3.108-6.73-7.108 0-4.028 3.054-7.11 6.73-7.11 2.109 0 3.704.866 4.731 2.271zM140.47 17.3c2.433 0 4.271-1.812 4.271-4.325s-1.838-4.325-4.271-4.325-4.271 1.81-4.271 4.325c0 2.513 1.838 4.324 4.271 4.324M125.704 5.866c3.027 0 5.189 2.054 5.189 5.568v8.298h-2.919v-8c0-2.055-1.189-3.136-3.027-3.136-1.919 0-3.433 1.135-3.433 3.892v7.244h-2.919V6.217h2.919v1.73c.892-1.406 2.352-2.081 4.19-2.081M113.746 4.19c-1.028 0-1.866-.865-1.866-1.865A1.87 1.87 0 0 1 113.746.46c1.027 0 1.865.837 1.865 1.865 0 1-.838 1.865-1.865 1.865m-1.46 15.542V6.217h2.919v13.515zM107.055 6.217h3.081l-4.244 13.515h-2.865l-2.811-9.11-2.838 9.11h-2.865L90.269 6.217h3.081l2.622 9.325 2.839-9.325h2.784l2.811 9.325zM85.177 19.732V0h2.919v19.732zM80.327 4.19c-1.027 0-1.865-.865-1.865-1.865 0-1.028.838-1.865 1.865-1.865s1.865.837 1.865 1.865c0 1-.837 1.865-1.865 1.865m-1.46 15.542V6.217h2.92v13.515zM72.546 6.217h2.92v13.515h-2.92v-1.946c-1.027 1.432-2.622 2.297-4.73 2.297-3.677 0-6.731-3.108-6.731-7.108 0-4.028 3.054-7.11 6.73-7.11 2.109 0 3.704.866 4.73 2.271zm-4.271 11.082c2.433 0 4.27-1.81 4.27-4.324s-1.837-4.325-4.27-4.325-4.27 1.81-4.27 4.325c0 2.513 1.837 4.324 4.27 4.324M59.749 9.028h-3.352v6.487c0 1.73 1.135 1.703 3.352 1.595v2.622c-4.488.54-6.272-.703-6.272-4.217V9.028h-2.486V6.217h2.486v-2.92l2.92-.864v3.784h3.352z"}),(0,n.jsx)("path",{className:"fill-sky-400",d:"M198.426 20.01c-2.848 0-4.72-1.373-5.477-3.445l2.35-1.374c.498 1.294 1.474 2.131 3.207 2.131 1.653 0 2.231-.697 2.231-1.474 0-1.036-.936-1.434-3.008-2.031-2.131-.618-4.202-1.514-4.202-4.163 0-2.63 2.191-4.143 4.581-4.143 2.29 0 4.043 1.175 4.979 3.127l-2.311 1.335c-.497-1.056-1.254-1.793-2.668-1.793-1.156 0-1.833.598-1.833 1.394 0 .857.538 1.315 2.649 1.952 2.211.697 4.561 1.434 4.561 4.282 0 2.61-2.091 4.203-5.059 4.203M183.861 20.01c-3.048 0-5.318-1.832-5.318-4.839v-9.38h2.728v9.16c0 1.355.717 2.371 2.59 2.371s2.589-1.016 2.589-2.37V5.79h2.748v9.381c0 3.007-2.27 4.84-5.337 4.84M170.005 17.103h5.318v2.629h-8.066V5.79h2.748zM158.715 5.79c2.689 0 4.761 2.071 4.761 4.68 0 2.61-2.072 4.681-4.761 4.681h-2.449v4.58h-2.749V5.792zm

10 6.792c1.176 0 2.032-.916 2.032-2.111 0-1.215-.856-2.112-2.032-2.112h-2.449v4.223z"})]})}function a(e){let{url:s,type:t,usesHeadlessUI:i=!1}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"prose mt-24",children:[(0,n.jsx)(l.X,{id:"styled-examples",level:2,children:"Styled examples"}),(0,n.jsxs)("p",{children:["If you're interested in predesigned ",(0,n.jsxs)("a",{href:s,children:["Tailwind CSS ",t," examples"]}),i&&" using Headless UI",", check out ",(0,n.jsx)("strong",{children:"Tailwind Plus"})," — a collection of beautifully designed and expertly crafted components built by us."]}),(0,n.jsx)("p",{children:"It's a great way to support our work on open-source projects like this and makes it possible for us to improve them and keep them well-maintained."})]}),(0,n.jsxs)("div",{className:"my-16",children:[(0,n.jsx)(c,{}),(0,n.jsx)("p",{className:"mt-3 text-sm",children:(0,n.jsxs)("a",{className:"text-white hover:underline",href:"https://tailwindcss.com/plus",children:["Explore ",(0,n.jsx)("span",{className:"hidden min-[450px]:inline",children:"more predesigned"})," examples →"]})}),(0,n.jsx)("a",{href:"https://tailwindcss.com/plus",className:"z-10 -mx-2 mt-6 block border border-x-[color-mix(in_srgb,white_10%,black)] border-y-white/5 bg-white/5 p-2 md:-mx-[calc(--spacing(4)+2px)]",children:(0,n.jsx)(o(),{src:r,alt:"Various components from Tailwind UI",className:"pointer-events-none rounded-2xl inset-ring inset-ring-gray-950/5"})})]})]})}}}]);