{
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault()
                    handleSubmit()
                  }
                }}
                onChange={(e) => {
                  setValue(e.target.value)
                  adjustHeight()
                }}
              />
              {!value && (
                <div className="absolute left-4 top-3">
                  <AnimatedPlaceholder showSearch={showSearch} />
                </div>
              )}
            </div>
          </div>

<div className="h-12 bg-black/5 dark:bg-white/5 rounded-b-xl">
            <div className="absolute left-3 bottom-3 flex items-center gap-2">
              <label
                className={cn(
                  "cursor-pointer relative rounded-full p-2 bg-black/5 dark:bg-white/5",
                  imagePreview
                    ? "bg-[#ff3f17]/15 border border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handelChange}
                  className="hidden"
                />
                <Paperclip
                  className={cn(
                    "w-4 h-4 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white transition-colors",
                    imagePreview && "text-[#ff3f17]"
                  )}
                />
                {imagePreview && (
                  <div className="absolute w-[100px] h-[100px] top-14 -left-4">
                    <Image
                      className="object-cover rounded-2xl"
                      src={imagePreview || "/picture1.jpeg"}
                      height={500}
                      width={500}
                      alt="additional image"
                    />
                    <button
                      onClick={handelClose}
                      className="bg-[#e8e8e8] text-[#464646] absolute -top-1 -left-1 shadow-3xl rounded-full rotate-45"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </label>
              <button
                type="button"
                onClick={() => {
                  setShowSearch(!showSearch)
                }}
                className={cn(
                  "rounded-full transition-all flex items-center gap-2 px-1.5 py-1 border h-8",
                  showSearch
                    ? "bg-[#ff3f17]/15 border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 border-transparent text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <div className="w-4 h-4 flex items-center justify-center flex-shrink-0">
                  <motion.div
                    animate={{
                      rotate: showSearch ? 180 : 0,
                      scale: showSearch ? 1.1 : 1,
                    }}
                    whileHover={{
                      rotate: showSearch ? 180 : 15,
                      scale: 1.1,
                      transition: {
                        type: "spring",
                        stiffness: 300,
                        damping: 10,
                      },
                    }}
                    transition={{
                      type: "spring",
                      stiffness: 260,
                      damping: 25,
                    }}
                  >
                    <Globe
                      className={cn(
                        "w-4 h-4",
                        showSearch ? "text-[#ff3f17]" : "text-inherit"
                      )}
                    />
                  </motion.div>
                </div>
                <AnimatePresence>
                  {showSearch && (
                    <motion.span
                      initial={{ width: 0, opacity: 0 }}
                      animate={{
                        width: "auto",
                        opacity: 1,
                      }}
                      exit={{ width: 0, opacity: 0 }}
                      transition={{ duration: 0.2 }}
                      className="text-sm overflow-hidden whitespace-nowrap text-[#ff3f17] flex-shrink-0"
                    >
                      Search
                    </motion.span>
                  )}
                </AnimatePresence>
              </button>
            </div>
            <div className="absolute right-3 bottom-3">
              <button
                type="button"
                onClick={handleSubmit}
                className={cn(
                  "rounded-full p-2 transition-colors",
                  value
                    ? "bg-[#ff3f17]/15 text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <Send className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
`,__src__:"registry/default/ui/ai-input.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Image "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "next/image"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" motion "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "framer-motion"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Globe"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Paperclip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plus"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Send "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" UseAutoResizeTextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useAutoResizeTextarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" UseAutoResizeTextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"reset"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"reset"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        return"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" newHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        Math"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"scrollHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Number"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"POSITIVE_INFINITY"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"newHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    },"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MIN_HEIGHT "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 48"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MAX_HEIGHT "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 164"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AnimatedPlaceholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" boolean "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence mode"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"wait"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.p"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      key"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "search"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "ask"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      initial"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 5"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      exit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" -5"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" duration"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.1"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"pointer-events-none w-[150px] text-sm absolute text-black/70 dark:text-white/70"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Search the web..."'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Ask Skiper Ai..."'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.p"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AiInput"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useAutoResizeTextarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MIN_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MAX_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  })"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setShowSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"string "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" fileInputRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLInputElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handelClose"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"stopPropagation"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' ""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Reset file input"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(null)"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Use null instead of empty string"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handelChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"[0]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"URL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createObjectURL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        URL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"revokeObjectURL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full py-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative max-w-xl border rounded-[22px] border-black/5 p-1 w-full mx-auto"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative rounded-2xl border border-black/5 bg-neutral-800/5 flex flex-col"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"            className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"overflow-y-auto"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"            style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MAX_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"ai-input-04"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full rounded-2xl rounded-b-none px-4 py-3 bg-black/5 dark:bg-white/5 border-none dark:text-white resize-none focus-visible:ring-0 leading-[1.2]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onKeyDown"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"key "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Enter"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" !"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"shiftKey"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              {!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute left-4 top-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatedPlaceholder showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-12 bg-black/5 dark:bg-white/5 rounded-b-xl"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute left-3 bottom-3 flex items-center gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"label"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "cursor-pointer relative rounded-full p-2 bg-black/5 dark:bg-white/5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  imagePreview"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 border border-[#ff3f17] text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"input"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"file"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handelChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"hidden"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Paperclip"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                    "w-4 h-4 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white transition-colors"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-[#ff3f17]"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute w-[100px] h-[100px] top-14 -left-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Image"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"object-cover rounded-2xl"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "/picture1.jpeg"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={500}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={500}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      alt"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"additional image"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handelClose"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"bg-[#e8e8e8] text-[#464646] absolute -top-1 -left-1 shadow-3xl rounded-full rotate-45"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plus className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  setShowSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "rounded-full transition-all flex items-center gap-2 px-1.5 py-1 border h-8"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  showSearch"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 border-[#ff3f17] text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 border-transparent text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4 flex items-center justify-center flex-shrink-0"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      rotate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 180"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      scale"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1.1"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      rotate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 180"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 15,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      scale"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1.1,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        stiffness"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 300,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        damping"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 10,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      },"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      stiffness"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 260,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      damping"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 25,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Globe"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                        "w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-[#ff3f17]"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-inherit"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.span"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      initial"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "auto"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      exit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" duration"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.2"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm overflow-hidden whitespace-nowrap text-[#ff3f17] flex-shrink-0"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    >"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      Search"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.span"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute right-3 bottom-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "rounded-full p-2 transition-colors"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  value"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Send className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),`
`,(0,e.jsxs)(l.h1,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,e.jsx)(l.p,{children:"Install the required dependencies."}),`
`,(0,e.jsxs)(a,{defaultValue:"cli",children:[(0,e.jsxs)(F,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"cli",children:(0,e.jsx)(h,{children:(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Paste the below command in your terminal"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`  npx shadcn@latest add "http://skiper-ui.com/registry/ai-input.json"
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"  npx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "http://skiper-ui.com/registry/ai-input.json"'})]})})})})]})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(h,{children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Install the required dependencies."}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`  npm i framer-motion clsx tailwind-merge
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"  npm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,e.jsxs)(r,{children:[(0,e.jsx)(l.p,{children:"Add util file"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
`,children:(0,e.jsxs)(l.code,{"data-language":"bash","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" clsx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" function cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8",fontWeight:"bold"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,e.jsxs)(r,{children:["Copy the source code to ",(0,e.jsx)(l.code,{children:"components/ui/ai-input.tsx"})," "]}),(0,e.jsx)(d,{name:"ai-input",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import Image from "next/image"
import { AnimatePresence, motion } from "framer-motion"
import { Globe, Paperclip, Plus, Send } from "lucide-react"

import { cn } from "@/lib/utils"
import { Textarea } from "@/components/ui/textarea"

interface UseAutoResizeTextareaProps {
  minHeight: number
  maxHeight?: number
}

function useAutoResizeTextarea({
  minHeight,
  maxHeight,
}: UseAutoResizeTextareaProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)

const adjustHeight = useCallback(
    (reset?: boolean) => {
      const textarea = textareaRef.current
      if (!textarea) return

if (reset) {
        textarea.style.height = \`\${minHeight}px\`
        return
      }

textarea.style.height = \`\${minHeight}px\`
      const newHeight = Math.max(
        minHeight,
        Math.min(textarea.scrollHeight, maxHeight ?? Number.POSITIVE_INFINITY)
      )

textarea.style.height = \`\${newHeight}px\`
    },
    [minHeight, maxHeight]
  )

useEffect(() => {
    const textarea = textareaRef.current
    if (textarea) {
      textarea.style.height = \`\${minHeight}px\`
    }
  }, [minHeight])

useEffect(() => {
    const handleResize = () => adjustHeight()
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [adjustHeight])

return { textareaRef, adjustHeight }
}

const MIN_HEIGHT = 48
const MAX_HEIGHT = 164

const AnimatedPlaceholder = ({ showSearch }: { showSearch: boolean }) => (
  <AnimatePresence mode="wait">
    <motion.p
      key={showSearch ? "search" : "ask"}
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -5 }}
      transition={{ duration: 0.1 }}
      className="pointer-events-none w-[150px] text-sm absolute text-black/70 dark:text-white/70"
    >
      {showSearch ? "Search the web..." : "Ask Skiper Ai..."}
    </motion.p>
  </AnimatePresence>
)

export function AiInput() {
  const [value, setValue] = useState("")
  const { textareaRef, adjustHeight } = useAutoResizeTextarea({
    minHeight: MIN_HEIGHT,
    maxHeight: MAX_HEIGHT,
  })
  const [showSearch, setShowSearch] = useState(true)
  const [imagePreview, setImagePreview] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const handelClose = (e: any) => {
    e.preventDefault()
    e.stopPropagation()
    if (fileInputRef.current) {
      fileInputRef.current.value = "" // Reset file input
    }
    setImagePreview(null) // Use null instead of empty string
  }

const handelChange = (e: any) => {
    const file = e.target.files ? e.target.files[0] : null
    if (file) {
      setImagePreview(URL.createObjectURL(file))
    }
  }

const handleSubmit = () => {
    setValue("")
    adjustHeight(true)
  }

useEffect(() => {
    return () => {
      if (imagePreview) {
        URL.revokeObjectURL(imagePreview)
      }
    }
  }, [imagePreview])
  return (
    <div className="w-full py-4">
      <div className="relative max-w-xl border rounded-[22px] border-black/5 p-1 w-full mx-auto">
        <div className="relative rounded-2xl border border-black/5 bg-neutral-800/5 flex flex-col">
          <div
            className="overflow-y-auto"
            style={{ maxHeight: \`\${MAX_HEIGHT}px\` }}
          >
            <div className="relative">
              <Textarea
                id="ai-input-04"
                value={value}
                placeholder=""
                className="w-full rounded-2xl rounded-b-none px-4 py-3 bg-black/5 dark:bg-white/5 border-none dark:text-white resize-none focus-visible:ring-0 leading-[1.2]"
                ref={textareaRef}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault()
                    handleSubmit()
                  }
                }}
                onChange={(e) => {
                  setValue(e.target.value)
                  adjustHeight()
                }}
              />
              {!value && (
                <div className="absolute left-4 top-3">
                  <AnimatedPlaceholder showSearch={showSearch} />
                </div>
              )}
            </div>
          </div>

<div className="h-12 bg-black/5 dark:bg-white/5 rounded-b-xl">
            <div className="absolute left-3 bottom-3 flex items-center gap-2">
              <label
                className={cn(
                  "cursor-pointer relative rounded-full p-2 bg-black/5 dark:bg-white/5",
                  imagePreview
                    ? "bg-[#ff3f17]/15 border border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handelChange}
                  className="hidden"
                />
                <Paperclip
                  className={cn(
                    "w-4 h-4 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white transition-colors",
                    imagePreview && "text-[#ff3f17]"
                  )}
                />
                {imagePreview && (
                  <div className="absolute w-[100px] h-[100px] top-14 -left-4">
                    <Image
                      className="object-cover rounded-2xl"
                      src={imagePreview || "/picture1.jpeg"}
                      height={500}
                      width={500}
                      alt="additional image"
                    />
                    <button
                      onClick={handelClose}
                      className="bg-[#e8e8e8] text-[#464646] absolute -top-1 -left-1 shadow-3xl rounded-full rotate-45"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </label>
              <button
                type="button"
                onClick={() => {
                  setShowSearch(!showSearch)
                }}
                className={cn(
                  "rounded-full transition-all flex items-center gap-2 px-1.5 py-1 border h-8",
                  showSearch
                    ? "bg-[#ff3f17]/15 border-[#ff3f17] text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 border-transparent text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <div className="w-4 h-4 flex items-center justify-center flex-shrink-0">
                  <motion.div
                    animate={{
                      rotate: showSearch ? 180 : 0,
                      scale: showSearch ? 1.1 : 1,
                    }}
                    whileHover={{
                      rotate: showSearch ? 180 : 15,
                      scale: 1.1,
                      transition: {
                        type: "spring",
                        stiffness: 300,
                        damping: 10,
                      },
                    }}
                    transition={{
                      type: "spring",
                      stiffness: 260,
                      damping: 25,
                    }}
                  >
                    <Globe
                      className={cn(
                        "w-4 h-4",
                        showSearch ? "text-[#ff3f17]" : "text-inherit"
                      )}
                    />
                  </motion.div>
                </div>
                <AnimatePresence>
                  {showSearch && (
                    <motion.span
                      initial={{ width: 0, opacity: 0 }}
                      animate={{
                        width: "auto",
                        opacity: 1,
                      }}
                      exit={{ width: 0, opacity: 0 }}
                      transition={{ duration: 0.2 }}
                      className="text-sm overflow-hidden whitespace-nowrap text-[#ff3f17] flex-shrink-0"
                    >
                      Search
                    </motion.span>
                  )}
                </AnimatePresence>
              </button>
            </div>
            <div className="absolute right-3 bottom-3">
              <button
                type="button"
                onClick={handleSubmit}
                className={cn(
                  "rounded-full p-2 transition-colors",
                  value
                    ? "bg-[#ff3f17]/15 text-[#ff3f17]"
                    : "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"
                )}
              >
                <Send className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
`,__src__:"registry/default/ui/ai-input.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Image "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "next/image"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" motion "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "framer-motion"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Globe"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Paperclip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Plus"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Send "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" UseAutoResizeTextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useAutoResizeTextarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" UseAutoResizeTextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"reset"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"reset"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        return"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" newHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Math"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        Math"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"scrollHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Number"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"POSITIVE_INFINITY"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"newHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    },"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textarea "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      textarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"height "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleResize"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MIN_HEIGHT "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 48"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MAX_HEIGHT "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 164"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AnimatedPlaceholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" boolean "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence mode"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"wait"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.p"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      key"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "search"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "ask"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      initial"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 5"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      exit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" y"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" -5"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" duration"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.1"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"pointer-events-none w-[150px] text-sm absolute text-black/70 dark:text-white/70"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Search the web..."'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Ask Skiper Ai..."'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.p"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AiInput"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" adjustHeight "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useAutoResizeTextarea"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    minHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MIN_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" MAX_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  })"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setShowSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"string "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" null"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" fileInputRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLInputElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handelClose"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"stopPropagation"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' ""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Reset file input"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(null)"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,e.jsx)(l.span,{style:{color:"#FFF4"},children:" Use null instead of empty string"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handelChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" file "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"files"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"[0]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"      setImagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"URL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"createObjectURL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"file"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"    adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true)"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"  useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"        URL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"revokeObjectURL"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    }"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"])"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full py-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative max-w-xl border rounded-[22px] border-black/5 p-1 w-full mx-auto"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative rounded-2xl border border-black/5 bg-neutral-800/5 flex flex-col"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"            className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"overflow-y-auto"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"            style"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" maxHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"MAX_HEIGHT"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}px`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"relative"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"ai-input-04"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                placeholder"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'""'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full rounded-2xl rounded-b-none px-4 py-3 bg-black/5 dark:bg-white/5 border-none dark:text-white resize-none focus-visible:ring-0 leading-[1.2]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"textareaRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onKeyDown"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"key "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "Enter"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" !"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"shiftKey"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"preventDefault"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  setValue"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  adjustHeight"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              {!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute left-4 top-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatedPlaceholder showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-12 bg-black/5 dark:bg-white/5 rounded-b-xl"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute left-3 bottom-3 flex items-center gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"label"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "cursor-pointer relative rounded-full p-2 bg-black/5 dark:bg-white/5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  imagePreview"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 border border-[#ff3f17] text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"input"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"file"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"fileInputRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handelChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"hidden"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Paperclip"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                    "w-4 h-4 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white transition-colors"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-[#ff3f17]"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute w-[100px] h-[100px] top-14 -left-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Image"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"object-cover rounded-2xl"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"imagePreview "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "/picture1.jpeg"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      height"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={500}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={500}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      alt"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"additional image"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handelClose"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"bg-[#e8e8e8] text-[#464646] absolute -top-1 -left-1 shadow-3xl rounded-full rotate-45"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Plus className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  setShowSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "rounded-full transition-all flex items-center gap-2 px-1.5 py-1 border h-8"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  showSearch"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 border-[#ff3f17] text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 border-transparent text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4 flex items-center justify-center flex-shrink-0"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      rotate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 180"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      scale"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1.1"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    whileHover"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      rotate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 180"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 15,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      scale"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1.1,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        stiffness"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 300,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        damping"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 10,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      },"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                    transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "spring"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      stiffness"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 260,"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      damping"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 25,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    }}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Globe"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                        "w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-[#ff3f17]"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "text-inherit"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"showSearch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.span"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      initial"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      animate"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "auto"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                        opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 1,"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                      }}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      exit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" width"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0,"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" opacity"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      transition"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" duration"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 0.2"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-sm overflow-hidden whitespace-nowrap text-[#ff3f17] flex-shrink-0"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    >"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                      Search"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"motion.span"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                  )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AnimatePresence"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"absolute right-3 bottom-3"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                onClick"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'                  "rounded-full p-2 transition-colors"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"                  value"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    ?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-[#ff3f17]/15 text-[#ff3f17]"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                    :"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "bg-black/5 dark:bg-white/5 text-black/40 dark:text-white/40 hover:text-black dark:hover:text-white"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              >"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Send className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-4 h-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"          </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"        </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,e.jsxs)(l.h2,{id:"import-and-use",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#import-and-use",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Import and use"]}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`<AiInput/>
`,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"AiInput"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})]})})})})]})}function P(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(N,n)})):N(n)}var I=P;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return H(R);})();
;return Component;</article></body></html>

AI Input

Installation

Paste the below command in your terminal npx shadcn@latest add "http://skiper-ui.com/registry/ai-input.json"Copy

Import and use

Paste the below command in your terminal
`npx shadcn@latest add "http://skiper-ui.com/registry/ai-input.json"`