1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[718],{66996:function(e,l,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/components/form",function(){return t(81786)}])},95889:function(e,l,t){"use strict";var r=t(11527),n=t(54433),s=t(40333),a=t(42971),o=t(24531),i=t(60457),d=t(35256),c=t(50959),p=t(28194),u=t(72897),x=t(90943),g=t(25424);let h=e=>{let{codeMetaData:l,componentsArray:t,theme:h,reload:f}=e,[b,m]=(0,c.useState)(0),[w,v]=(0,c.useState)(!1),y=(0,n.p)();return(0,r.jsxs)(r.Fragment,{children:[f?(0,r.jsx)(r.Fragment,{children:w?(0,r.jsxs)("div",{className:"flex my-8 justify-center border border-gray-600 rounded-xl py-16 items-center relative ".concat("light"===h?"bg-gray-400":"bg-gray-800"," "),children:[(0,r.jsx)(g.u,{label:"Reload",children:(0,r.jsx)("button",{className:"absolute cursor-pointer right-3 top-3",onClick:()=>v(!w),children:(0,r.jsx)("svg",{fill:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"h-5 w-5",children:(0,r.jsx)("path",{clipRule:"evenodd",fillRule:"evenodd",d:"M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z"})})})}),(0,r.jsx)(s.m,{size:"md",variant:"enclosed",index:b,defaultIndex:0,colorScheme:"cyan",className:" rounded-xl",children:(0,r.jsx)(a.n,{children:null==t?void 0:t.map((e,l)=>(0,r.jsx)(o.x,{p:0,children:(0,r.jsx)(r.Fragment,{children:e})},l))})})]}):(0,r.jsxs)("div",{className:"flex my-8 justify-center border border-gray-600 rounded-xl py-16 items-center relative ".concat("light"===h?"bg-gray-400":"bg-gray-800"," "),children:[(0,r.jsx)("div",{className:"hidden",children:"re-render"}),(0,r.jsx)(g.u,{label:"Reload",children:(0,r.jsx)("button",{className:"absolute cursor-pointer right-3 top-3",onClick:()=>v(!w),children:(0,r.jsx)("svg",{fill:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",className:"h-5 w-5",children:(0,r.jsx)("path",{clipRule:"evenodd",fillRule:"evenodd",d:"M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z"})})})}),(0,r.jsx)(s.m,{size:"md",variant:"enclosed",index:b,defaultIndex:0,colorScheme:"cyan",className:" rounded-xl",children:(0,r.jsx)(a.n,{children:null==t?void 0:t.map((e,l)=>(0,r.jsx)(o.x,{p:0,children:(0,r.jsx)(r.Fragment,{children:e})},l))})})]})}):(0,r.jsx)("div",{className:"flex my-8 justify-center border border-gray-600 rounded-xl py-16 items-center relative ".concat("light"===h?"bg-gray-400":"bg-gray-800"," "),children:(0,r.jsx)(s.m,{size:"md",variant:"enclosed",index:b,defaultIndex:0,colorScheme:"cyan",className:" rounded-xl",children:(0,r.jsx)(a.n,{children:null==t?void 0:t.map((e,l)=>(0,r.jsx)(o.x,{p:0,children:(0,r.jsx)(r.Fragment,{children:e})},l))})})}),(0,r.jsx)("div",{className:"bg-[#0e1629] backdrop-blur-2xl border-1 rounded-lg",children:(0,r.jsxs)(s.m,{onChange:e=>m(e),size:"md",variant:"enclosed",index:b,defaultIndex:0,colorScheme:"cyan",className:" rounded-xl",children:[(0,r.jsx)(i.t,{style:{display:"relative"},children:(0,r.jsxs)("div",{className:" flex justify-between w-full pr-5",children:[(0,r.jsx)("div",{className:" flex",children:l.map((e,l)=>(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(d.O,{children:e.label},l)}))}),(0,r.jsx)(x.CopyToClipboard,{text:l[b].content,children:(0,r.jsxs)("button",{className:"btn-copy text-sm font-bold rounded-md flex items-center gap-1",onClick:()=>{y({title:"Code Copied",description:"Code is copied to clipboard.",status:"info",duration:5e3,isClosable:!0,position:"bottom-right"})},children:[(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",className:"w-5 h-5 mr-1",children:(0,r.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"})}),"COPY"]})})]})}),(0,r.jsx)(a.n,{children:l.map((e,l)=>(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(o.x,{p:0,children:(0,r.jsx)(p.Z,{customStyle:{padding:"25px"},wrapLines:!0,showLineNumbers:!0,language:"javascript",style:u.FE,children:e.content})},l)}))})]})})]})};l.Z=h},50469:function(e,l,t){"use strict";
1var r=t(11527),n=t(71056);let s=()=>{let{frontMatter:e,title:l}=(0,n.ZR)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/logo.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/logo.png"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/logo.png"}),(0,r.jsx)("link",{rel:"manifest",href:"/logo.png"}),(0,r.jsx)("link",{rel:"mask-icon",href:"/logo.png",color:"#000000"}),(0,r.jsx)("meta",{name:"msapplication-TileColor",content:"#ffffff"}),(0,r.jsx)("meta",{name:"theme-color",content:"#ffffff"}),(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,r.jsx)("meta",{name:"description",content:(null==e?void 0:e.description)||"The next gen UI made with simple HTML and Tailwind CSS. It's compatible with simple HTML, CSS static website or a React, Vue, Angular or Next.js Complex app. Zero JS and no-plugins installed."}),(0,r.jsx)("meta",{name:"og:description",content:e.description||"The next gen UI made with simple HTML and Tailwind CSS. It's compatible with simple HTML, CSS static website or a React, Vue, Angular or Next.js Complex app. Zero JS and no-plugins installed."}),(0,r.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,r.jsx)("meta",{name:"twitter:site",content:"@by_clueless"}),(0,r.jsx)("meta",{name:"twitter:image",content:e.image||"https://user-images.githubusercontent.com/98400348/236500880-7e777463-23a6-4b09-81e0-e83b7b843652.png"}),(0,r.jsx)("meta",{name:"og:title",content:l?l+" â Seamless UI":"Seamless UI"}),(0,r.jsx)("meta",{name:"og:image",content:e.image||"https://user-images.githubusercontent.com/98400348/236500880-7e777463-23a6-4b09-81e0-e83b7b843652.png"}),(0,r.jsx)("meta",{name:"apple-mobile-web-app-title",content:"Seamless UI"}),(0,r.jsx)("link",{rel:"stylesheet",href:"https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css",media:"print",onLoad:"this.media='all'"})]})};l.Z={project:{link:"https://github.com/Clueless-Community/seamless-ui"},editLink:{text:"Edit this page on GitHub"},docsRepositoryBase:"https://github.com/Clueless-Community/seamless-ui/tree/website-dev/",feedback:{content:"Question? Give us feedback â",labels:"feedback"},useNextSeoProps:()=>({titleTemplate:"%s â SeamLess UI"}),toc:{float:!0},head:(0,r.jsx)(s,{}),logo:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("img",{src:"/logo.svg",width:"50px",loading:"lazy"}),(0,r.jsx)("span",{className:"mx-2 font-extrabold hidden md:inline select-none",children:"SeamLess UI"}),(0,r.jsx)("span",{className:"text-gray-600 font-normal hidden lg:!inline whitespace-no-wrap",children:"Your UI Library"})]}),primaryHue:{dark:120,light:120},footer:{text:()=>(0,r.jsxs)("a",{href:"https://clueless.link",target:"_blank",rel:"noopener",className:"inline-flex items-center no-underline text-current font-semibold",children:[(0,r.jsx)("span",{className:"mr-1",children:"Powered by"}),(0,r.jsx)("span",{children:"ClueLess"})]})}}},81786:function(e,l,t){"use strict";t.r(l),t.d(l,{Checkbox0:function(){return eo},ChooseFile0:function(){return ei},ChooseFile0Rounded:function(){return ed},Email:function(){return ep},EmailRounded:function(){return ec},Error:function(){return eu},ErrorRounded:function(){return ex},Search:function(){return em},SearchRounded:function(){return ew},Select:function(){return ev},SelectRounded:function(){return ey},Success:function(){return eg},SuccessRounded:function(){return eh},Switch:function(){return ea},Textarea:function(){return ef},TextareaRounded:function(){return eb},default:function(){return er.ZP}});var r,n=t(11527),s=t(55750),a=t(50469);t(5807);var o=t(26736);t(85518),t(50959);var i=t(95889);let d=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"flex flex-col items-center justify-center gap-2 ",children:[(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-300 bg-gray-900 checked:bg-white"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-gray-900 after:content-[''] checked:border-gray-900 peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-900 bg-white checked:bg-gray-900"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-gray-900 peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-white bg-white checked:bg-gray-900"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-white peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-not-allowed select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-not-allowed appearance-none rounded border border-gray-300 bg-gray-300"})]})})]})}),c=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"flex flex-col items-center justify-center gap-2",children:[(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-300 bg-blue-600 checked:bg-white"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-blue-600 after:content-[''] checked:border-gray-900 peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-blue-600 bg-white checked:bg-blue-600"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-gray-900 peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-white bg-white checked:bg-blue-600"}),(0,n.jsx)("span",{className:"checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-white peer-checked:after:block"})]})}),(0,n.jsx)("div",{className:"flex items-center gap-2",children:(0,n.jsxs)("label",{className:"container relative mb-4 block w-fit cursor-not-allowed select-none pl-9 text-lg text-gray-500",children:["Checkbox",(0,n.jsx)("input",{type:"checkbox",className:"peer absolute left-0 top-0 h-6 w-6 cursor-not-allowed appearance-none rounded border border-gray-300 bg-gray-300"})]})})]})}),p=()=>(0,n.jsx)("div",{className:"px-2",children:(0,n.jsxs)("div",{className:"grid gap-5",children:[(0,n.jsx)("div",{className:"lg:w-[600px] sm:w-[440px] w-[280px]",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"#ffffff",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",fill:"#ffffff",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"text-md w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",fill:"#ffffff",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"text-gl w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})})]})}),u=()=>(0,n.jsx)("div",{className:"px-2",children:(0,n.jsxs)("div",{className:"grid gap-5",children:[(0,n.jsx)("div",{className:"lg:w-[600px] sm:w-[440px] w-[280px]",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_light",className:"w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-2 pl-10 text-sm text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input"
1,{type:"file",id:"file_input_light",className:"text-md w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-3 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_light",className:"text-gl w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-5 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})})]})}),x=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_light",className:"w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-2 pl-10 text-sm text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_light",className:"text-md w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-3 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_light",className:"text-gl w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-5 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})})]})}),g=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"#ffffff",width:"15",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",fill:"#ffffff",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"text-md w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})}),(0,n.jsx)("div",{className:"w-full",children:(0,n.jsxs)("div",{className:"relative flex w-full",children:[(0,n.jsx)("div",{className:"absolute inset-y-0 flex cursor-pointer items-center pl-5",children:(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"15",fill:"#ffffff",height:"15",viewBox:"0 0 24 24",children:(0,n.jsx)("path",{d:"M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z"})})}),(0,n.jsx)("input",{type:"file",id:"file_input_dark",className:"text-gl w-full cursor-pointer rounded-lg border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500",placeholder:"Search",required:!0})]})})]})}),h=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid outline-none gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"email",className:"w-full rounded-full outline-none focus:outline-none bg-[#121225] p-2 pl-5 text-sm text-[400] text-white placeholder-gray-400 ",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"text-md w-full rounded-full bg-[#121225] focu
1s:outline-none p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"w-full rounded-full bg-[#121225] p-5 pl-8 text-lg focus:outline-none text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300",placeholder:"Email *"})]})}),f=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"email",className:"w-full rounded-full border-[#DADADA] bg-[#F9F9F9] p-2 pl-5 text-sm text-[400] text-black placeholder-[#737373]",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"text-md w-full rounded-full border-[#DADADA] bg-[#F9F9F9] p-3 pl-6 text-black placeholder-[#737373]",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"w-full rounded-full border-[#DADADA] bg-[#F9F9F9] p-5 pl-8 text-lg text-black placeholder-[#737373]",placeholder:"Email *"})]})}),b=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"email",className:"w-full rounded-lg outline-none focus:outline-none bg-[#121225] p-2 pl-5 text-sm text-[400] text-white placeholder-gray-400 disabled:border-gray-300 disabled:bg-gray-300",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"text-md w-full focus:outline-none rounded-lg bg-[#121225] p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"w-full rounded-lg focus:outline-none bg-[#121225] p-5 pl-8 text-lg text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300",placeholder:"Email *"})]})}),m=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"email",className:"w-full rounded-lg border-2 border-gray-200 bg-white p-2 pl-5 text-sm text-[400] text-black placeholder-[#737373]",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"text-md w-full rounded-lg border-2 border-gray-200 bg-white p-3 pl-6 text-black placeholder-[#737373]",placeholder:"Email *"}),(0,n.jsx)("input",{type:"email",className:"w-full rounded-lg border-2 border-gray-200 bg-white p-5 pl-8 text-lg text-black placeholder-[#737373]",placeholder:"Email *"})]})}),w=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-red-500 bg-gray-100 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-md border-2 border-red-500 bg-gray-100 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-red-500 bg-gray-100 p-5 text-lg outline-none",placeholder:"Error"})]})}),v=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-md border-2 border-red-500 bg-gray-900 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none",placeholder:"Error"})]})}),y=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-red-500 bg-gray-100 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-full border-2 border-red-500 bg-gray-100 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-red-500 bg-gray-100 p-5 text-lg outline-none",placeholder:"Error"})]})}),j=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-full border-2 border-red-500 bg-gray-900 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none",placeholder:"Error"})]})}),C=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-green-500 bg-gray-100 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-md border-2 border-green-500 bg-gray-100 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-green-500 bg-gray-100 p-5 text-lg outline-none",placeholder:"Error"})]})}),k=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-md border-2 border-green-500 bg-gray-900 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-md border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none",placeholder:"Error"})]})}),N=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-green-500 bg-gray-100 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-full border-2 border-green-500 bg-gray-100 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-green-500 bg-gray-100 p-5 text-lg outline-none",placeholder:"Error"})]})}),S=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"text-md w-full rounded-full border-2 border-green-500 bg-gray-900 p-3 outline-none",placeholder:"Error"}),(0,n.jsx)("input",{type:"text",className:"w-full rounded-full border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none",placeholder:"Error"})]})}),M=()=>(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"my-0 max-w-[900px] p-5",children:(0,n.jsx)("textarea",{name:"message",id:"",cols:50,rows:4,placeholder:"Message",className:"w-[100%] max-w-[500px] resize-none rounded bg-white p-7 text-xl tracking-wide text-gray-300"})})}),L=()=>(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"my-0 max-w-[900px] p-5",children:(0,n.jsx)("textarea",{name:"message",id:"",cols:50,rows:4,placeholder:"Message",className:"w-[100%] max-w-[500px] resize-none rounded bg-gray-900 p-7 text-xl tracking-wide text-white"})})}),z=()=>(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"mx-auto my-0 max-w-[900px] p-5",children:(0,n.jsx)("textarea",{name:"message",id:"",cols:50,rows:4,placeholder:"Message",className:"w-[100%] max-w-[500px] resize-none rounded-2xl bg-gray-900 p-6 text-xl tracking-wide text-white placeholder:text-xl placeholder:text-white"})})}),_=()=>(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"my-0 max-w-[900px] p-5",children:(0,n.jsx)("textarea",{name:"message",id:"",cols:50,rows:4,placeholder:"Message",className:"w-[100%] max-w-[500px] resize-none rounded-2xl bg-white p-7 text-xl tracking-wide text-gray-300"})})}),B=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"flex flex-col items-center justify-center gap-2 py-5",children:[(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"fmRadio h-6 w-11 rounded-full border border-gray-900 bg-gray-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"fmRadio h-6 w-11 rounded-full border border-gray-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[''] peer-checked:bg-gray-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"fmRadio h-6 w-11 rounded-full bg-white after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-900 after:transition-all after:content-[''] peer-checked:bg-gray-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"fmRadio h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-0.5 after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-100 after:transition-all after:content-[''] peer-checked:bg-gray-900 peer-checked:after:translate-x-full peer-checked:after:border-white"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]})]})}),E=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"flex flex-col items-center justify-center gap-2 py-5",children:[(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"h-6 w-11 rounded-full border border-blue-600 bg-blue-600 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"h-6 w-11 rounded-full border border-blue-600 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"h-6 w-11 rounded-full bg-white after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-blue-600 after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-white peer-focus:outline-none"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]}),(0,n.jsxs)("label",{className:"relative inline-flex cursor-pointer items-center",children:[(0,n.jsx)("input",{type:"checkbox",value:"",className:"peer sr-only"}),(0,n.jsx)("div",{className:"peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-0.5 after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-100 after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white"}),(0,n.jsx)("span",{className:"ml-3 select-none text-gray-600",children:"Switch"})]})]})}),D=()=>(0,n.jsxs)("div",{className:"px-2",children:[(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-full border-2 border-gray-900 bg-gray-900 px-2 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400",placeholder:"Search"})]}),(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"18",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.6
10052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-full border-2 border-gray-900 bg-gray-900 px-2 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600",placeholder:"Search"})]})]}),I=()=>(0,n.jsxs)("div",{className:"px-2",children:[(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-full border-2 bg-white px-2 py-2 pl-16 text-base text-black placeholder-gray-400 focus:border-gray-400",placeholder:"Search"})]}),(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"18",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-full border-2 bg-white px-2 py-4 pl-16 text-lg text-black placeholder-gray-400 focus:border-gray-600",placeholder:"Search"})]})]}),R=()=>(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-md border-2 border-gray-900 bg-gray-900 px-2 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400",placeholder:"Search"})]}),(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"18",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-md border-2 border-gray-900 bg-gray-900 px-2 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600",placeholder:"Search"})]})]}),F=()=>(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-md border-2 bg-white px-2 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400",placeholder:"Search"})]}),(0,n.jsxs)("div",{className:"relative mb-6",children:[(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6",children:(0,n.jsx)("svg",{width:"18",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,n.jsx)("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z",fill:"gray"})})}),(0,n.jsx)("input",{type:"text",className:"lg:w-[600px] sm:w-[440px] w-[280px] rounded-md border-2 bg-white px-2 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600",placeholder:"Search"})]})]}),Z=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 p-5",children:[(0,n.jsxs)("div",{className:"relative lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-md border-2 border-gray-200 bg-gray-900 p-2 text-sm text-gray-300 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"text-md block w-full appearance-none rounded-md border-2 border-gray-200 bg-gray-900 p-3 text-gray-300 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-100",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-md border-2 border-gray-200 bg-gray-900 p-5 text-lg text-gray-300 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-100",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]})]})}),T=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 p-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-2 text-sm text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-slate-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"text-md block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-3 text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-slate-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-5 text-lg text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-500",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]})]})}),A=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 p-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-900 p-2 pl-5 text-sm text-gray-100 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-5",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-slate-100",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"text-md block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-900 p-3 pl-6 text-slate-100 outline-none focus:bor
1der-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-slate-100",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-900 p-5 pl-8 text-lg text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-7",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-slate-100",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"white",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]})]})}),P=()=>(0,n.jsx)("div",{children:(0,n.jsxs)("div",{className:"grid gap-5 p-5 lg:w-[600px] sm:w-[440px] w-[280px]",children:[(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-2 text-sm text-gray-600 outline-none pl-5 focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-5",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"text-md block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 outline-none pl-7 focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]}),(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("select",{className:"block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 outline-none pl-8 focus:border-blue-600 disabled:bg-gray-300",children:[(0,n.jsx)("option",{selected:!0,children:"Select"}),(0,n.jsx)("option",{children:"Tailwind"}),(0,n.jsx)("option",{children:"React"}),(0,n.jsx)("option",{children:"SeamLess UI"}),(0,n.jsx)("option",{children:"Input"})]}),(0,n.jsx)("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-7",children:(0,n.jsx)("svg",{className:"h-5 w-5 fill-gray-400",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:(0,n.jsx)("path",{d:"M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z"})})})]})]})});var U=[{label:"Dark",content:'<div class="flex flex-col items-center justify-center gap-2 py-5">\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full border border-slate-900 bg-slate-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[\'\'] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full border border-slate-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[\'\'] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full bg-white after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-slate-900 after:transition-all after:content-[\'\'] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-0.5 after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-100 after:transition-all after:content-[\'\'] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n</div>'},{label:"Light",content:'<div class="flex flex-col items-center justify-center gap-2 py-5">\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full border border-blue-600 bg-blue-600 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[\'\'] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full border border-blue-600 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[\'\'] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="h-6 w-11 rounded-full bg-white after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-blue-600 after:transition-all after:content-[\'\'] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-white peer-focus:outline-none"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n<label class="relative inline-flex cursor-pointer items-center">\n <input type="checkbox" value="" class="peer sr-only" />\n <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-0.5 after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-100 after:transition-all after:content-[\'\'] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white"></div>\n <span class="ml-3 select-none text-gray-600">Switch</span>\n</label>\n</div>'}
1],q=[{label:"Dark",content:'<div class="flex flex-col items-center justify-center gap-2 py-5">\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-300 bg-slate-900 checked:bg-white" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-slate-900 after:content-[\'\'] checked:border-slate-900 peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-slate-900 bg-white checked:bg-slate-900" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[\'\'] checked:border-slate-900 peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-white bg-white checked:bg-slate-900" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[\'\'] checked:border-white peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-not-allowed select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-not-allowed appearance-none rounded border border-gray-300 bg-gray-300" />\n </label>\n</div>\n</div>'},{label:"Light",content:'<div class="flex flex-col items-center justify-center gap-2 py-5">\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-300 bg-blue-600 checked:bg-white" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-blue-600 after:content-[\'\'] checked:border-slate-900 peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-blue-600 bg-white checked:bg-blue-600" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[\'\'] checked:border-slate-900 peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-white bg-white checked:bg-blue-600" />\n <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[\'\'] checked:border-white peer-checked:after:block"></span>\n </label>\n</div>\n\n<div class="flex items-center gap-2">\n <label class="container relative mb-4 block w-fit cursor-not-allowed select-none pl-9 text-lg text-gray-500"\n >Checkbox\n <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-not-allowed appearance-none rounded border border-gray-300 bg-gray-300" />\n </label>\n</div>\n</div>'}
1],H=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- medium -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- large -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-2 pl-10 text-sm text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- medium -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-3 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- large -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-full border-2 border-gray-200 bg-gray-100 p-5 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n</div>'}
1],O=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- medium -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- large -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-lg border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n</div>\n'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-2 pl-10 text-sm text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- medium -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-3 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n\n<!-- large -->\n<div class="w-full">\n <div class="relative flex w-full">\n <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">\n <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">\n <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />\n </svg>\n </div>\n <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-5 pl-10 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />\n </div>\n</div>\n</div>'}
1],V=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="email" class="w-full rounded-full bg-slate-900 p-2 pl-5 text-sm text-normal text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n\n<!-- medium -->\n<input type="email" class="text-md w-full rounded-full bg-slate-900 p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n\n<!-- large -->\n<input type="email" class="w-full rounded-full bg-slate-900 p-5 pl-8 text-lg text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="email" class="w-full rounded-full border-white bg-white p-2 pl-5 text-sm text-normal text-black placeholder-[#737373]" placeholder="Email *" />\n\n<!-- medium -->\n<input type="email" class="text-md w-full rounded-full border-white bg-white p-3 pl-6 text-black placeholder-[#737373]" placeholder="Email *" />\n\n<!-- large -->\n<input type="email" class="w-full rounded-full border-white bg-white p-5 pl-8 text-lg text-black placeholder-[#737373]" placeholder="Email *" />\n</div>'}],G=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="email" class="w-full rounded-lg bg-slate-900 p-2 pl-5 text-sm text-normal text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n\n<!-- medium -->\n<input type="email" class="text-md w-full rounded-lg bg-slate-900 p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n\n<!-- large -->\n<input type="email" class="w-full rounded-lg bg-slate-900 p-5 pl-8 text-lg text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="email" class="w-full rounded-lg border-2 border-gray-200 bg-white p-2 pl-5 text-sm text-normal text-black placeholder-[#737373]" placeholder="Email *" />\n\n<!-- medium -->\n<input type="email" class="text-md w-full rounded-lg border-2 border-gray-200 bg-white p-3 pl-6 text-black placeholder-[#737373]" placeholder="Email *" />\n\n<!-- large -->\n<input type="email" class="w-full rounded-lg border-2 border-gray-200 bg-white p-5 pl-8 text-lg text-black placeholder-[#737373]" placeholder="Email *" />\n</div>'}],J=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-md border-2 border-red-500 bg-gray-900 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-100 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-md border-2 border-red-500 bg-gray-100 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-100 p-5 text-lg outline-none" placeholder="Error" />\n</div>'}],X=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-full border-2 border-red-500 bg-gray-900 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-100 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-full border-2 border-red-500 bg-gray-100 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-100 p-5 text-lg outline-none" placeholder="Error" />\n</div>'}
1],Y=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-md border-2 border-green-500 bg-gray-900 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-100 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-md border-2 border-green-500 bg-gray-100 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-100 p-5 text-lg outline-none" placeholder="Error" />\n</div>'}],K=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-full border-2 border-green-500 bg-gray-900 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-100 p-2 text-sm outline-none" placeholder="Error" />\n\n<!-- medium -->\n<input type="text" class="text-md w-full rounded-full border-2 border-green-500 bg-gray-100 p-3 outline-none" placeholder="Error" />\n\n<!-- large -->\n<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-100 p-5 text-lg outline-none" placeholder="Error" />\n</div>'}],Q=[{label:"Dark",content:'<div class="my-0 max-w-[900px] p-5">\n<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded bg-slate-900 p-7 text-xl tracking-wide text-white"></textarea>\n</div>'},{label:"Light",content:'<div class="my-0 max-w-[900px] p-5">\n<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded bg-white p-7 text-xl tracking-wide text-slate-300"></textarea>\n</div>'}],W=[{label:"Dark",content:'<div class="mx-auto my-0 max-w-[900px] p-5">\n<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded-2xl bg-slate-900 p-6 text-xl tracking-wide text-white placeholder:text-xl placeholder:text-white"></textarea>\n</div>'},{label:"Light",content:'<div class="my-0 max-w-[900px] p-5">\n<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded-2xl bg-white p-7 text-xl tracking-wide text-slate-300"></textarea>\n</div>\n'}],$=[{label:"Dark",content:'<!-- small -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-md border-2 border-gray-900 bg-gray-900 px-72 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400" placeholder="Search" />\n</div>\n\n<!-- Large -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-md border-2 border-gray-900 bg-gray-900 px-72 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600" placeholder="Search" />\n</div>'},{label:"Light",content:'<!-- small -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
1\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-md border-2 bg-white px-72 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400" placeholder="Search" />\n</div>\n\n<!-- Large -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-md border-2 bg-white px-72 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600" placeholder="Search" />\n</div>'}],ee=[{label:"Dark",content:'<!-- small -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-full border-2 border-gray-900 bg-gray-900 px-72 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400" placeholder="Search" />\n</div>\n\n<!-- Large -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-full border-2 border-gray-900 bg-gray-900 px-72 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600" placeholder="Search" />\n</div>'},{label:"Light",content:'<!-- small -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
1\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-full border-2 bg-white px-72 py-2 pl-16 text-base text-black placeholder-gray-400 focus:border-gray-400" placeholder="Search" />\n</div>\n\n<!-- Large -->\n<div class="relative mb-6">\n <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">\n <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />\n </svg>\n </div>\n <input type="text" class="w-full rounded-full border-2 bg-white px-72 py-4 pl-16 text-lg text-black placeholder-gray-400 focus:border-gray-600" placeholder="Search" />\n</div>'}],el=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-2 text-sm text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- medium -->\n<div class="relative">\n <select class="text-md block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-3 text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- large -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-5 text-lg text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-2 text-sm text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- medium -->\n<div class="relative">\n <select class="text-md block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-3 text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- large -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-white p-5 text-lg text-gray-500 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n</div>'}
1],et=[{label:"Dark",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-2 pl-5 text-sm text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-5">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- medium -->\n<div class="relative">\n <select class="text-md block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-3 pl-5 text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- large -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-5 pl-8 text-lg text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-7">\n <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n</div>'},{label:"Light",content:'<div class="grid gap-5 p-5">\n<!-- small -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-2 text-sm text-gray-600 outline-none pl-5 focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-5">\n <svg class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- medium -->\n<div class="relative">\n <select class="text-md block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 outline-none pl-7 focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">\n <svg class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n\n<!-- large -->\n<div class="relative">\n <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 outline-none pl-8 focus:border-blue-600 disabled:bg-gray-300">\n <option selected>Select</option>\n <option>Tailwind</option>\n <option>React</option>\n <option>SeamLess UI</option>\n <option>Input</option>\n </select>\n <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-7">\n <svg class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">\n <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />\n </svg>\n </div>\n</div>\n</div>'}
1],er=t(71056);let en={filePath:"pages/docs/components/form.mdx",route:"/docs/components/form",frontMatter:{},pageMap:[{kind:"Meta",data:{index:{title:"Introduction",type:"page",hidden:!0,display:"hidden"},docs:{title:"Docs",type:"page"},blog:{title:"Blog",type:"page"}}},{kind:"Folder",name:"blog",route:"/blog",children:[{kind:"MdxPage",name:"index",route:"/blog"},{kind:"Meta",data:{index:"Index"}}]},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{introduction:"\uD83D\uDCA1 Introduction","getting-started":"\uD83D\uDE80 Getting Started",components:"\uD83D\uDCBB | Components",design_System:"\uD83C\uDFA8 | Design Systems"}},{kind:"Folder",name:"components",route:"/docs/components",children:[{kind:"MdxPage",name:"accordion",route:"/docs/components/accordion"},{kind:"MdxPage",name:"alerts",route:"/docs/components/alerts"},{kind:"MdxPage",name:"avatar",route:"/docs/components/avatar"},{kind:"MdxPage",name:"badges",route:"/docs/components/badges"},{kind:"MdxPage",name:"breadcrumb",route:"/docs/components/breadcrumb"},{kind:"MdxPage",name:"buttons",route:"/docs/components/buttons"},{kind:"MdxPage",name:"content_Cards",route:"/docs/components/content_Cards"},{kind:"MdxPage",name:"feature_Cards",route:"/docs/components/feature_Cards"},{kind:"MdxPage",name:"form",route:"/docs/components/form"},{kind:"MdxPage",name:"pricing_Cards",route:"/docs/components/pricing_Cards"},{kind:"MdxPage",name:"product_Cards",route:"/docs/components/product_Cards"},{kind:"MdxPage",name:"profile_Card",route:"/docs/components/profile_Card"},{kind:"MdxPage",name:"store_Buttons",route:"/docs/components/store_Buttons"},{kind:"MdxPage",name:"testimonials",route:"/docs/components/testimonials"},{kind:"Meta",data:{accordion:"Accordion",alerts:"Alerts",avatar:"Avatar",badges:"Badges",breadcrumb:"Breadcrumb",buttons:"Buttons",content_Cards:"Content Cards",feature_Cards:"Feature Cards",form:"Form",pricing_Cards:"Pricing Cards",product_Cards:"Product Cards",profile_Card:"Profile Card",store_Buttons:"Store Buttons",testimonials:"Testimonials"}}]},{kind:"Folder",name:"design_System",route:"/docs/design_System",children:[{kind:"MdxPage",name:"AccordionDesignSystem",route:"/docs/design_System/AccordionDesignSystem"},{kind:"MdxPage",name:"AlertsDesignSystem",route:"/docs/design_System/AlertsDesignSystem"},{kind:"MdxPage",name:"AvatarDesignSystem",route:"/docs/design_System/AvatarDesignSystem"},{kind:"MdxPage",name:"BadgesDesignSystem",route:"/docs/design_System/BadgesDesignSystem"},{kind:"MdxPage",name:"BreadcrumbDesignSystem",route:"/docs/design_System/BreadcrumbDesignSystem"},{kind:"MdxPage",name:"ButtonDesignSystem",route:"/docs/design_System/ButtonDesignSystem"},{kind:"MdxPage",name:"ContentCardDesignSystem",route:"/docs/design_System/ContentCardDesignSystem"},{kind:"MdxPage",name:"FeatureCardDesignSystem",route:"/docs/design_System/FeatureCardDesignSystem"},{kind:"MdxPage",name:"PricingCardsDesignsystem",route:"/docs/design_System/PricingCardsDesignsystem"},{kind:"MdxPage",name:"ProductCardsDesignSystem",route:"/docs/design_System/ProductCardsDesignSystem"},{kind:"MdxPage",name:"StoreButtonDesignSystem",route:"/docs/design_System/StoreButtonDesignSystem"},{kind:"MdxPage",name:"TestimonialDesignSystem",route:"/docs/design_System/TestimonialDesignSystem"},{kind:"Meta",data:{AccordionDesignSystem:"Accordion",AlertsDesignSystem:"Alerts",AvatarDesignSystem:"Avatar",BadgesDesignSystem:"Badges",BreadcrumbDesignSystem:"Breadrumb",ButtonDesignSystem:"Button",FeatureCardDesignSystem:"Feature Card",ContentCardDesignSystem:"Content Card",ProductCardsDesignSystem:"Product Card",PricingCardsDesignsystem:"Pricing Card",StoreButtonDesignSystem:"Store Button",TestimonialDesignSystem:"Testimonial"}}]},{kind:"MdxPage",name:"getting-started",route:"/docs/getting-started"},{kind:"MdxPage",name:"introduction",route:"/docs/introduction"}]}],headings:[{type:"heading",depth:1,children:[{type:"text",value:"Form Component",position:{start:{line:1,column:3,offset:2},end:{line:1,column:17,offset:16}}}],position:{start:{line:1,column:1,offset:0},end:{line:1,column:17,offset:16}},value:"Form Component"},{type:"heading",depth:2,children:[{type:"text",value:"Switch",position:{start:{line:40,c
1olumn:4,offset:1464},end:{line:40,column:10,offset:1470}}}],position:{start:{line:40,column:1,offset:1461},end:{line:40,column:10,offset:1470}},value:"Switch"},{type:"heading",depth:2,children:[{type:"text",value:"Checkbox",position:{start:{line:57,column:4,offset:1789},end:{line:57,column:12,offset:1797}}}],position:{start:{line:57,column:1,offset:1786},end:{line:57,column:13,offset:1798}},value:"Checkbox"},{type:"heading",depth:2,children:[{type:"text",value:"Choose File Rounded",position:{start:{line:72,column:4,offset:2136},end:{line:72,column:23,offset:2155}}}],position:{start:{line:72,column:1,offset:2133},end:{line:72,column:23,offset:2155}},value:"Choose File Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Choose File Boxed",position:{start:{line:87,column:4,offset:2507},end:{line:87,column:21,offset:2524}}}],position:{start:{line:87,column:1,offset:2504},end:{line:87,column:21,offset:2524}},value:"Choose File Boxed"},{type:"heading",depth:2,children:[{type:"text",value:"Email Input Rounded",position:{start:{line:102,column:4,offset:2925},end:{line:102,column:23,offset:2944}}}],position:{start:{line:102,column:1,offset:2922},end:{line:102,column:23,offset:2944}},value:"Email Input Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Email Input Boxed",position:{start:{line:117,column:4,offset:3303},end:{line:117,column:21,offset:3320}}}],position:{start:{line:117,column:1,offset:3300},end:{line:117,column:21,offset:3320}},value:"Email Input Boxed"},{type:"heading",depth:2,children:[{type:"text",value:"Error",position:{start:{line:132,column:4,offset:3630},end:{line:132,column:9,offset:3635}}}],position:{start:{line:132,column:1,offset:3627},end:{line:132,column:9,offset:3635}},value:"Error"},{type:"heading",depth:2,children:[{type:"text",value:"Error Rounded",position:{start:{line:147,column:4,offset:3945},end:{line:147,column:17,offset:3958}}}],position:{start:{line:147,column:1,offset:3942},end:{line:147,column:17,offset:3958}},value:"Error Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Success",position:{start:{line:162,column:4,offset:4317},end:{line:162,column:11,offset:4324}}}],position:{start:{line:162,column:1,offset:4314},end:{line:162,column:11,offset:4324}},value:"Success"},{type:"heading",depth:2,children:[{type:"text",value:"Success Rounded",position:{start:{line:178,column:4,offset:4649},end:{line:178,column:19,offset:4664}}}],position:{start:{line:178,column:1,offset:4646},end:{line:178,column:19,offset:4664}},value:"Success Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Textarea",position:{start:{line:193,column:4,offset:5037},end:{line:193,column:12,offset:5045}}}],position:{start:{line:193,column:1,offset:5034},end:{line:193,column:12,offset:5045}},value:"Textarea"},{type:"heading",depth:2,children:[{type:"text",value:"Textarea Rounded",position:{start:{line:208,column:4,offset:5376},end:{line:208,column:20,offset:5392}}}],position:{start:{line:208,column:1,offset:5373},end:{line:208,column:20,offset:5392}},value:"Textarea Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Search",position:{start:{line:224,column:4,offset:5773},end:{line:224,column:10,offset:5779}}}],position:{start:{line:224,column:1,offset:5770},end:{line:224,column:11,offset:5780}},value:"Search"},{type:"heading",depth:2,children:[{type:"text",value:"Search Rounded",position:{start:{line:239,column:4,offset:6097},end:{line:239,column:18,offset:6111}}}],position:{start:{line:239,column:1,offset:6094},end:{line:239,column:18,offset:6111}},value:"Search Rounded"},{type:"heading",depth:2,children:[{type:"text",value:"Select",position:{start:{line:254,column:4,offset:6477},end:{line:254,column:10,offset:6483}}}],position:{start:{line:254,column:1,offset:6474},end:{line:254,column:10,offset:6483}},value:"Select"},{type:"heading",depth:2,children:[{type:"text",value:"Select Rounded",position:{start:{line:269,column:4,offset:6800},end:{line:269,column:18,offset:6814}}}],position:{start:{line:269,column:1,offset:6797},end:{line:269,column:18,offset:6814}},value:"Select Rounded"}],flexsearch:{codeblocks:!1}};globalThis.__nextra_internal__={pageMap:en.pageMap,route:en.route};let es="Form Component",ea=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:U,componentsArray:[(0,n.jsx)(B,{}),(0,n.jsx)(E,{})]})})})},eo=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:q,componentsArray:[(0,n.jsx)(d,{}),(0,n.jsx)(c,{})]})})})},ei=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:H,componentsArray:[(0,n.jsx)(p,{}),(0,n.jsx)(u,{})]})})})},ed=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:O,componentsArray:[(0,n.jsx)(x,{}),(0,n.jsx)(g,{})]})})})},ec=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:V,componentsArray:[(0,n.jsx)(h,{}),(0,n.jsx)(f,{})]})})})},ep=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:G,componentsArray:[(0,n.jsx)(b,{}),(0,n.jsx)(m,{})]})})})},eu=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:J,componentsArray:[(0,n.jsx)(v,{}),(0,n.jsx)(w,{})]})})})},ex=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:X,componentsArray:[(0,n.jsx)(j,{}),(0,n.jsx)(y,{})]})})})},eg=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:Y,componentsArray:[(0,n.jsx)(k,{}),(0,n.jsx)(C,{})]})})})},eh=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:K,componentsArray:[(0,n.jsx)(S,{}),(0,n.jsx)(N,{})]})})})},ef=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:Q,c
1omponentsArray:[(0,n.jsx)(L,{}),(0,n.jsx)(M,{})]})})})},eb=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:W,componentsArray:[(0,n.jsx)(z,{}),(0,n.jsx)(_,{})]})})})},em=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:$,componentsArray:[(0,n.jsx)(R,{}),(0,n.jsx)(F,{})]})})})},ew=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:ee,componentsArray:[(0,n.jsx)(D,{}),(0,n.jsx)(I,{})]})})})},ev=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:el,componentsArray:[(0,n.jsx)(Z,{}),(0,n.jsx)(T,{})]})})})},ey=()=>{let e=Object.assign({div:"div"},(0,o.ah)());return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.div,{className:"mb-20",children:(0,n.jsx)(i.Z,{theme:"light",codeMetaData:et,componentsArray:[(0,n.jsx)(A,{}),(0,n.jsx)(P,{})]})})})};function ej(e){let l=Object.assign({h1:"h1",blockquote:"blockquote",p:"p",h2:"h2"},(0,o.ah)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.h1,{children:"Form Component"}),"\n",(0,n.jsxs)(l.blockquote,{children:["\n",(0,n.jsx)(l.p,{children:"Form elements in a webpage are graphical elements that allow users to input and submit information. They include various types of fields, such as text input, dropdown menus, checkboxes, and radio buttons, and are often used to collect user data or preferences. Form elements can also include buttons to submit or reset the form, as well as validation messages to ensure the user enters the correct information."}),"\n"]}),"\n","\n","\n",(0,n.jsx)(l.h2,{id:"switch",children:"Switch"}),"\n","\n","\n",(0,n.jsx)(ea,{}),"\n",(0,n.jsx)(l.h2,{id:"checkbox",children:"Checkbox"}),"\n","\n","\n",(0,n.jsx)(eo,{}),"\n",(0,n.jsx)(l.h2,{id:"choose-file-rounded",children:"Choose File Rounded"}),"\n","\n","\n",(0,n.jsx)(ei,{}),"\n",(0,n.jsx)(l.h2,{id:"choose-file-boxed",children:"Choose File Boxed"}),"\n","\n","\n",(0,n.jsx)(ed,{}),"\n",(0,n.jsx)(l.h2,{id:"email-input-rounded",children:"Email Input Rounded"}),"\n","\n","\n",(0,n.jsx)(ec,{}),"\n",(0,n.jsx)(l.h2,{id:"email-input-boxed",children:"Email Input Boxed"}),"\n","\n","\n",(0,n.jsx)(ep,{}),"\n",(0,n.jsx)(l.h2,{id:"error",children:"Error"}),"\n","\n","\n",(0,n.jsx)(eu,{}),"\n",(0,n.jsx)(l.h2,{id:"error-rounded",children:"Error Rounded"}),"\n","\n","\n",(0,n.jsx)(ex,{}),"\n",(0,n.jsx)(l.h2,{id:"success",children:"Success"}),"\n","\n","\n",(0,n.jsx)(eg,{}),"\n",(0,n.jsx)(l.h2,{id:"success-rounded",children:"Success Rounded"}),"\n","\n","\n",(0,n.jsx)(eh,{}),"\n",(0,n.jsx)(l.h2,{id:"textarea",children:"Textarea"}),"\n","\n","\n",(0,n.jsx)(ef,{}),"\n",(0,n.jsx)(l.h2,{id:"textarea-rounded",children:"Textarea Rounded"}),"\n","\n","\n",(0,n.jsx)(eb,{}),"\n",(0,n.jsx)(l.h2,{id:"search",children:"Search"}),"\n","\n","\n",(0,n.jsx)(em,{}),"\n",(0,n.jsx)(l.h2,{id:"search-rounded",children:"Search Rounded"}),"\n","\n","\n",(0,n.jsx)(ew,{}),"\n",(0,n.jsx)(l.h2,{id:"select",children:"Select"}),"\n","\n","\n",(0,n.jsx)(ev,{}),"\n",(0,n.jsx)(l.h2,{id:"select-rounded",children:"Select Rounded"}),"\n","\n","\n",(0,n.jsx)(ey,{})]})}function eC(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:l}=Object.assign({},(0,o.ah)(),e.components);return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(ej,{...e})}):ej(e)}en.title="string"==typeof es&&es||"Form";let ek=e=>(0,n.jsx)(s.mK.Provider,{value:e,children:(0,n.jsx)(eC,{})});(r=globalThis).__nextra_pageContext__||(r.__nextra_pageContext__=Object.create(null)),globalThis.__nextra_pageContext__["/docs/components/form"]={Content:ek,pageOpts:en,themeConfig:a.Z}}},function(e){e.O(0,[316,976,424,382,774,888,179],function(){return e(e.s=66996)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.