import{taggedTemplateLiteral as e,slicedToArray as n}from"../../_virtual/_rollupPluginBabelHelpers.esm.js";import"@mui/material";import r from"../../_virtual/index.esm.js";import{useRef as i,useState as o}from"react";import a from"styled-components";import{jsxs as t,jsx as l}from"react/jsx-runtime";var c,s,d,p,f,u=function(e){var r=i(null),a=o(!1),c=n(a,2),s=c[0],d=c[1];return t(g,{children:[t(v,{className:s?"drag-over":"",onClick:function(){r.current.click()},onDragOver:function(e){e.preventDefault(),d(!0)},onDragLeave:function(){d(!1)},onDrop:function(n){n.preventDefault(),n.stopPropagation(),n.dataTransfer.files&&e.onFileChange({target:{files:n.dataTransfer.files}}),d(!1)},children:[t(h,{children:[e.label,e.required&&"*"]}),t(x,{children:["Drag & Drop file here or ",l("strong",{children:"Click to upload"})," (file name:"," ",e.fileName||"No file chosen",")"]})]}),l(m,{accept:e.accept||"*",type:"file",ref:r,onChange:e.onFileChange,required:e.required})]})};u.PropTypes={onFileChange:r.func};var g=a.div(c||(c=e(['\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0px 1px;\n  font-family: "Roboto", "Helvetica", "Arial", sans-serif;\n']))),m=a.input(s||(s=e(["\n  display: none;\n"]))),v=a.div(d||(d=e(["\n  width: 100%;\n  height: 54px;\n  border: 1px solid rgb(202, 202, 202);\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.3s ease;\n  color: rgb(102, 102, 102);\n\n  &:hover {\n    border-color: rgb(33, 33, 33);\n  }\n\n  &.drag-over {\n    border-color: rgb(33, 33, 33);\n  }\n"]))),h=a.div(p||(p=e(["\n  display: flex;\n  margin-left: 13px;\n"]))),x=a.div(f||(f=e(["\n  flex: 1;\n"])));export{u as default};
//# sourceMappingURL=FileInputComponent.esm.js.map
