var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),u=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let F of y(e))!g.call(n,F)&&F!==s&&r(n,F,{get:()=>e[F],enumerable:!(c=h(e,F))||c.enumerable});return n};var N=(n,e,s)=>(s=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?r(s,"default",{value:n,enumerable:!0}):s,n)),D=n=>o(r({},"__esModule",{value:!0}),n);var i=f((w,a)=>{a.exports=_jsx_runtime});var z={};u(z,{default:()=>d,frontmatter:()=>x});var l=N(i()),x={title:"Image Dropzone",description:"Image file uploads using Dropzone.js.",toc:!1,component:!0};function t(n){let e={a:"a",code:"code",div:"div",h2:"h2",pre:"pre",span:"span",...n.components},{ComponentPreview:s}=e;return s||_("ComponentPreview",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s,{name:"image-dropzone-demo",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]",description:"Image file uploads using Dropzone.js.",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import * as React from 'react'; import { ImageDropzone } from '../ui/image-dropzone'; export function ImageDropzoneDemo() { const [file, setFile] = React.useState(); const handleDrop = async (files: File[]): Promise => { if (files && files.length > 0) { const reader = new FileReader(); reader.onload = (e) => { setFile(e.target?.result); }; reader.readAsDataURL(files[0]); } else { setFile(undefined); } }; return ( ); } `,__src__:"registry/default/example/image-dropzone-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 'react'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ImageDropzone "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" '../ui/image-dropzone'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ImageDropzoneDemo"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"file"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"any"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">();"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" async"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" File"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"[]):"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Promise"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"void"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" if"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"length "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 0)"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" new"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FileReader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"onload"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"e"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"e"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"?."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"result"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"readAsDataURL"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"[0]);"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" else"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(undefined);"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ImageDropzone"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" accept"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 'image/*'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" []"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" multiple"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={false}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" onDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"handleDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" borderRadius"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"md"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"min-h-[160px] w-[320px] p-1"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"file"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import * as React from 'react'; import { ImageDropzone } from '../ui/image-dropzone'; export function ImageDropzoneDemo() { const [file, setFile] = React.useState(); const handleDrop = async (files: File[]): Promise => { if (files && files.length > 0) { const reader = new FileReader(); reader.onload = (e) => { setFile(e.target?.result); }; reader.readAsDataURL(files[0]); } else { setFile(undefined); } }; return ( ); } `,__src__:"registry/new-york/example/image-dropzone-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 'react'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ImageDropzone "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" '../ui/image-dropzone'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ImageDropzoneDemo"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"file"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"any"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">();"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" async"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" File"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"[]):"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Promise"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"void"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" if"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"length "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 0)"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" new"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" FileReader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"onload"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"e"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"e"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"target"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"?."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"result"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" reader"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"readAsDataURL"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"files"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"[0]);"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" else"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" setFile"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(undefined);"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ImageDropzone"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" accept"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 'image/*'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" []"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" multiple"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={false}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" onDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"handleDrop"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" borderRadius"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"md"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"min-h-[160px] w-[320px] p-1"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" src"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"file"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ImageDropzone } from '@/components/ui/image-dropzone'; `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ImageDropzone "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" '@/components/ui/image-dropzone'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]})})})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ImageDropzone accept"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" 'image/*'"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" []"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" }}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]})})})})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(t,{...n})}):t(n)}function _(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(z);})(); ;return Component;