formik-form-components 0.2.14 → 0.2.15

package/dist/index.js

@@ -7,7 +7,7 @@ var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var dayjs = require('dayjs');
-var _ = require('lodash');
+var _19 = require('lodash');
 var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
 var Autocomplete3 = require('@mui/material/Autocomplete');
@@ -34,12 +34,15 @@ var UndoIcon = require('@mui/icons-material/Undo');
 var RedoIcon = require('@mui/icons-material/Redo');
 var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
 var CloseIcon = require('@mui/icons-material/Close');
-var iconsMaterial = require('@mui/icons-material');
+var styles = require('@mui/material/styles');
+var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
+var framerMotion = require('framer-motion');
 var reactDropzone = require('react-dropzone');
+var reactI18next = require('react-i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var ___default = /*#__PURE__*/_interopDefault(_);
+var _19__default = /*#__PURE__*/_interopDefault(_19);
 var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
 var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -84,9 +87,9 @@ var AppDatePicker = react.forwardRef(
     ...otherProps
   }, ref) => {
     const { values, setFieldValue, touched, errors, setFieldTouched } = formik.useFormikContext();
-    const fieldValue = ___default.default.get(values, name);
-    const fieldError = ___default.default.get(errors, name);
-    const isTouched = ___default.default.get(touched, name);
+    const fieldValue = _19__default.default.get(values, name);
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = _19__default.default.get(touched, name);
     const handleChange = (newValue, context) => {
       setFieldValue(name, newValue);
       if (externalOnChange) {
@@ -224,9 +227,9 @@ var AppDateAndTimePicker = react.forwardRef((props, ref) => {
   } = props;
   const theme = material.useTheme();
   const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-  const fieldError = _.get(errors, name);
-  const isTouched = _.get(touched, name);
-  const val = _.get(values, name);
+  const fieldError = _19.get(errors, name);
+  const isTouched = _19.get(touched, name);
+  const val = _19.get(values, name);
   const handleChange = (value) => {
     setFieldValue(name, value);
     if (externalOnChange) {
@@ -402,8 +405,8 @@ function AppFormErrorMessage({
   textSx
 }) {
   const { errors, touched } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   const showError = fieldError && typeof fieldError === "string";
   if (alwaysShow) {
     return showError ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -480,9 +483,9 @@ var AppTextArea = react.forwardRef(({
 }, ref) => {
   var _a, _b, _c, _d;
   const { errors, getFieldProps, touched, setFieldValue } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const value = ___default.default.get(getFieldProps(name), "value", "");
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const value = _19__default.default.get(getFieldProps(name), "value", "");
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (maxLength && newValue.length > maxLength)
@@ -636,9 +639,9 @@ function AppTagsCreator({
   inputSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const val = ___default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const val = _19__default.default.get(values, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.FormControl,
     {
@@ -761,8 +764,8 @@ function AppSwitchInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
@@ -851,9 +854,9 @@ function AppSwitch({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldValue = ___default.default.get(values, name);
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldValue = _19__default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Stack,
     {
@@ -950,9 +953,9 @@ function AppAutoComplete({
   errorSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const formikValue = ___default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const formikValue = _19__default.default.get(values, name);
   const val = propValue !== void 0 ? propValue : formikValue || [];
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1024,9 +1027,9 @@ function AppAutoCompleter({
   errorSx
 }) {
   const { errors, touched, values, setFieldValue } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const value = ___default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const value = _19__default.default.get(values, name);
   const selectedOption = options.find((opt) => opt.value === value) || null;
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1089,8 +1092,8 @@ var AppCheckBox = ({
   ...rest
 }) => {
   const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   material.useTheme();
   const value = getFieldProps(name).value;
   const checkedValues = (() => {
@@ -1253,8 +1256,8 @@ function AppInputField({
   ...otherProps
 }) {
   const { errors, getFieldProps, touched } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   const [showPassword, setShowPassword] = react.useState(false);
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
@@ -1345,9 +1348,9 @@ var AppMultiSelector = react.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-    const fieldError = ___default.default.get(errors, name);
-    const isTouched = ___default.default.get(touched, name);
-    const val = ___default.default.get(values, name);
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = _19__default.default.get(touched, name);
+    const val = _19__default.default.get(values, name);
     const selectedValues = Array.isArray(val) ? val : [];
     const handleChange = (event, child) => {
       const newValue = event.target.value;
@@ -1605,8 +1608,8 @@ var AppPhoneNoInput = ({
   ...otherProps
 }) => {
   const { values, errors, touched, setFieldValue, getFieldProps } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       material.Typography,
@@ -1690,9 +1693,9 @@ var AppRadioGroup = react.forwardRef(({
   ...rest
 }, ref) => {
   const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const value = ___default.default.get(getFieldProps(name), "value");
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const value = _19__default.default.get(getFieldProps(name), "value");
   const handleChange = (event) => {
     const newValue = event.target.value;
     setFieldValue(name, newValue);
@@ -1870,9 +1873,9 @@ var AppRating = react.forwardRef(({
 }, ref) => {
   material.useTheme();
   const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
-  const val = ___default.default.get(values, name);
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
+  const val = _19__default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
   const hasError = Boolean(fieldError) && isTouched;
   const handleChange = (event, newValue) => {
     setFieldValue(name, newValue);
@@ -3553,7 +3556,7 @@ var Node = class {
       copy2 = mark.addToSet(copy2);
     }
     if (!Mark.sameSet(copy2, this.marks))
-      throw new RangeError(`Invalid collection of marks for node ${this.type.name}: ${this.marks.map((m) => m.type.name)}`);
+      throw new RangeError(`Invalid collection of marks for node ${this.type.name}: ${this.marks.map((m2) => m2.type.name)}`);
     this.content.forEach((node) => node.check());
   }
   /**
@@ -3802,17 +3805,17 @@ var ContentMatch = class {
   */
   toString() {
     let seen = [];
-    function scan(m) {
-      seen.push(m);
-      for (let i = 0; i < m.next.length; i++)
-        if (seen.indexOf(m.next[i].next) == -1)
-          scan(m.next[i].next);
+    function scan(m2) {
+      seen.push(m2);
+      for (let i = 0; i < m2.next.length; i++)
+        if (seen.indexOf(m2.next[i].next) == -1)
+          scan(m2.next[i].next);
     }
     scan(this);
-    return seen.map((m, i) => {
-      let out = i + (m.validEnd ? "*" : " ") + " ";
-      for (let i2 = 0; i2 < m.next.length; i2++)
-        out += (i2 ? ", " : "") + m.next[i2].type.name + "->" + seen.indexOf(m.next[i2].next);
+    return seen.map((m2, i) => {
+      let out = i + (m2.validEnd ? "*" : " ") + " ";
+      for (let i2 = 0; i2 < m2.next.length; i2++)
+        out += (i2 ? ", " : "") + m2.next[i2].type.name + "->" + seen.indexOf(m2.next[i2].next);
       return out;
     }).join("\n");
   }
@@ -4693,13 +4696,13 @@ var NodeContext = class {
   }
   finish(openEnd) {
     if (!(this.options & OPT_PRESERVE_WS)) {
-      let last = this.content[this.content.length - 1], m;
-      if (last && last.isText && (m = /[ \t\r\n\u000c]+$/.exec(last.text))) {
+      let last = this.content[this.content.length - 1], m2;
+      if (last && last.isText && (m2 = /[ \t\r\n\u000c]+$/.exec(last.text))) {
         let text = last;
-        if (last.text.length == m[0].length)
+        if (last.text.length == m2[0].length)
           this.content.pop();
         else
-          this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m[0].length));
+          this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
       }
     }
     let content = Fragment2.from(this.content);
@@ -4851,7 +4854,7 @@ var ParseContext = class {
             if (rule.ignore)
               return null;
             if (rule.clearMark)
-              marks = marks.filter((m) => !rule.clearMark(m));
+              marks = marks.filter((m2) => !rule.clearMark(m2));
             else
               marks = marks.concat(this.parser.schema.marks[rule.mark].create(rule.attrs));
             if (rule.consuming === false)
@@ -4957,9 +4960,9 @@ var ParseContext = class {
       if (top.match)
         top.match = top.match.matchType(node.type);
       let nodeMarks = Mark.none;
-      for (let m of innerMarks.concat(node.marks))
-        if (top.type ? top.type.allowsMarkType(m.type) : markMayApply(m.type, node.type))
-          nodeMarks = m.addToSet(nodeMarks);
+      for (let m2 of innerMarks.concat(node.marks))
+        if (top.type ? top.type.allowsMarkType(m2.type) : markMayApply(m2.type, node.type))
+          nodeMarks = m2.addToSet(nodeMarks);
       top.content.push(node.mark(nodeMarks));
       return true;
     }
@@ -4982,9 +4985,9 @@ var ParseContext = class {
     if (top.options & OPT_OPEN_LEFT && top.content.length == 0)
       options |= OPT_OPEN_LEFT;
     let applyMarks = Mark.none;
-    marks = marks.filter((m) => {
-      if (top.type ? top.type.allowsMarkType(m.type) : markMayApply(m.type, type)) {
-        applyMarks = m.addToSet(applyMarks);
+    marks = marks.filter((m2) => {
+      if (top.type ? top.type.allowsMarkType(m2.type) : markMayApply(m2.type, type)) {
+        applyMarks = m2.addToSet(applyMarks);
         return false;
       }
       return true;
@@ -5372,10 +5375,10 @@ var Mapping = class {
   /**
   @internal
   */
-  setMirror(n, m) {
+  setMirror(n, m2) {
     if (!this.mirror)
       this.mirror = [];
-    this.mirror.push(n, m);
+    this.mirror.push(n, m2);
   }
   /**
   Append the inverse of the given mapping to this one.
@@ -5917,9 +5920,9 @@ function removeMark(tr, from, to, mark) {
       for (let i = 0; i < toRemove.length; i++) {
         let style = toRemove[i], found2;
         for (let j = 0; j < matched.length; j++) {
-          let m = matched[j];
-          if (m.step == step - 1 && style.eq(matched[j].style))
-            found2 = m;
+          let m2 = matched[j];
+          if (m2.step == step - 1 && style.eq(matched[j].style))
+            found2 = m2;
         }
         if (found2) {
           found2.to = end;
@@ -5930,7 +5933,7 @@ function removeMark(tr, from, to, mark) {
       }
     }
   });
-  matched.forEach((m) => tr.step(new RemoveMarkStep(m.from, m.to, m.style)));
+  matched.forEach((m2) => tr.step(new RemoveMarkStep(m2.from, m2.to, m2.style)));
 }
 function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch, clearNewlines = true) {
   let node = tr.doc.nodeAt(pos);
@@ -5946,11 +5949,11 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
         if (!parentType.allowsMarkType(child.marks[j].type))
           tr.step(new RemoveMarkStep(cur, end, child.marks[j]));
       if (clearNewlines && child.isText && parentType.whitespace != "pre") {
-        let m, newline = /\r?\n|\r/g, slice;
-        while (m = newline.exec(child.text)) {
+        let m2, newline = /\r?\n|\r/g, slice;
+        while (m2 = newline.exec(child.text)) {
           if (!slice)
             slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
-          replSteps.push(new ReplaceStep(cur + m.index, cur + m.index + m[0].length, slice));
+          replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
         }
       }
     }
@@ -6082,9 +6085,9 @@ function setBlockType(tr, from, to, type, attrs) {
 function replaceNewlines(tr, node, pos, mapFrom) {
   node.forEach((child, offset) => {
     if (child.isText) {
-      let m, newline = /\r?\n|\r/g;
-      while (m = newline.exec(child.text)) {
-        let start = tr.mapping.slice(mapFrom).map(pos + 1 + offset + m.index);
+      let m2, newline = /\r?\n|\r/g;
+      while (m2 = newline.exec(child.text)) {
+        let start = tr.mapping.slice(mapFrom).map(pos + 1 + offset + m2.index);
         tr.replaceWith(start, start + 1, node.type.schema.linebreakReplacement.create());
       }
     }
@@ -10150,11 +10153,11 @@ var Mark2 = class _Mark extends Extendable {
     const isAtEnd = currentPos.pos === currentPos.end();
     if (isAtEnd) {
       const currentMarks = currentPos.marks();
-      const isInMark = !!currentMarks.find((m) => (m == null ? void 0 : m.type.name) === mark.name);
+      const isInMark = !!currentMarks.find((m2) => (m2 == null ? void 0 : m2.type.name) === mark.name);
       if (!isInMark) {
         return false;
       }
-      const removeMark2 = currentMarks.find((m) => (m == null ? void 0 : m.type.name) === mark.name);
+      const removeMark2 = currentMarks.find((m2) => (m2 == null ? void 0 : m2.type.name) === mark.name);
       if (removeMark2) {
         tr.removeStoredMark(removeMark2);
       }
@@ -11558,10 +11561,10 @@ var AppSearchableMultiSelector = react.forwardRef(
   }, ref) => {
     material.useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-    const fieldError = ___default.default.get(errors, name);
-    const isTouched = Boolean(___default.default.get(touched, name));
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = Boolean(_19__default.default.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const val = ___default.default.get(values, name);
+    const val = _19__default.default.get(values, name);
     const selectedValues = Array.isArray(val) ? val : [];
     const selectedCount = selectedValues.length;
     const handleChange = (event, value, reason, details) => {
@@ -11937,9 +11940,9 @@ function AppSearchableSelectInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const val = ___default.default.get(values, name);
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const val = _19__default.default.get(values, name);
   const selectedOption = options.find((option) => option.value === val) || null;
   const handleChange = (event, newValue) => {
     setFieldValue(name, newValue ? newValue.value : "");
@@ -12065,10 +12068,10 @@ var AppSelectInput = react.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-    const fieldError = ___default.default.get(errors, name);
-    const isTouched = ___default.default.get(touched, name);
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = _19__default.default.get(touched, name);
     const hasError = Boolean(fieldError) && isTouched;
-    const value = ___default.default.get(values, name);
+    const value = _19__default.default.get(values, name);
     const handleChange = (event, child) => {
       setFieldValue(name, event.target.value, true);
       if (externalOnChange) {
@@ -12310,8 +12313,8 @@ var AppSimpleUploadFile = ({
   onError
 }) => {
   const { setFieldValue, values, errors, touched } = formik.useFormikContext();
-  const fieldValue = ___default.default.get(values, name);
-  const fieldError = ___default.default.get(touched, name) ? ___default.default.get(errors, name) : void 0;
+  const fieldValue = _19__default.default.get(values, name);
+  const fieldError = _19__default.default.get(touched, name) ? _19__default.default.get(errors, name) : void 0;
   const handleChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0)
@@ -12432,244 +12435,1527 @@ var AppSimpleUploadFile = ({
   ] });
 };
 var AppSimpleUploadFile_default = AppSimpleUploadFile;
-var AppUploadFile = ({
-  name,
-  label,
+
+// src/file-thumbnail/utils.ts
+var FORMAT_PDF = ["pdf"];
+var FORMAT_TEXT = ["txt"];
+var FORMAT_PHOTOSHOP = ["psd"];
+var FORMAT_WORD = ["doc", "docx"];
+var FORMAT_EXCEL = ["xls", "xlsx"];
+var FORMAT_ZIP = ["zip", "rar", "iso"];
+var FORMAT_ILLUSTRATOR = ["ai", "esp"];
+var FORMAT_POWERPOINT = ["ppt", "pptx"];
+var FORMAT_AUDIO = ["wav", "aif", "mp3", "aac"];
+var FORMAT_IMG = ["jpg", "jpeg", "gif", "bmp", "png", "svg"];
+var FORMAT_VIDEO = ["m4v", "avi", "mpg", "mp4", "webm"];
+var iconUrl = (icon) => `/assets/icons/files/${icon}.svg`;
+function fileFormat(fileUrl) {
+  let format;
+  switch (fileUrl == null ? void 0 : fileUrl.includes(fileTypeByUrl(fileUrl))) {
+    case FORMAT_TEXT.includes(fileTypeByUrl(fileUrl)):
+      format = "txt";
+      break;
+    case FORMAT_ZIP.includes(fileTypeByUrl(fileUrl)):
+      format = "zip";
+      break;
+    case FORMAT_AUDIO.includes(fileTypeByUrl(fileUrl)):
+      format = "audio";
+      break;
+    case FORMAT_IMG.includes(fileTypeByUrl(fileUrl)):
+      format = "image";
+      break;
+    case FORMAT_VIDEO.includes(fileTypeByUrl(fileUrl)):
+      format = "video";
+      break;
+    case FORMAT_WORD.includes(fileTypeByUrl(fileUrl)):
+      format = "word";
+      break;
+    case FORMAT_EXCEL.includes(fileTypeByUrl(fileUrl)):
+      format = "excel";
+      break;
+    case FORMAT_POWERPOINT.includes(fileTypeByUrl(fileUrl)):
+      format = "powerpoint";
+      break;
+    case FORMAT_PDF.includes(fileTypeByUrl(fileUrl)):
+      format = "pdf";
+      break;
+    case FORMAT_PHOTOSHOP.includes(fileTypeByUrl(fileUrl)):
+      format = "photoshop";
+      break;
+    case FORMAT_ILLUSTRATOR.includes(fileTypeByUrl(fileUrl)):
+      format = "illustrator";
+      break;
+    default:
+      format = fileTypeByUrl(fileUrl);
+  }
+  return format;
+}
+function fileThumb(fileUrl) {
+  let thumb;
+  switch (fileFormat(fileUrl)) {
+    case "folder":
+      thumb = iconUrl("ic_folder");
+      break;
+    case "txt":
+      thumb = iconUrl("ic_txt");
+      break;
+    case "zip":
+      thumb = iconUrl("ic_zip");
+      break;
+    case "audio":
+      thumb = iconUrl("ic_audio");
+      break;
+    case "video":
+      thumb = iconUrl("ic_video");
+      break;
+    case "word":
+      thumb = iconUrl("ic_word");
+      break;
+    case "excel":
+      thumb = iconUrl("ic_excel");
+      break;
+    case "powerpoint":
+      thumb = iconUrl("ic_power_point");
+      break;
+    case "pdf":
+      thumb = iconUrl("ic_pdf");
+      break;
+    case "photoshop":
+      thumb = iconUrl("ic_pts");
+      break;
+    case "illustrator":
+      thumb = iconUrl("ic_ai");
+      break;
+    case "image":
+      thumb = iconUrl("ic_img");
+      break;
+    default:
+      thumb = iconUrl("ic_file");
+  }
+  return thumb;
+}
+function fileTypeByUrl(fileUrl = "") {
+  return fileUrl && fileUrl.split(".").pop() || "";
+}
+function fileNameByUrl(fileUrl) {
+  return fileUrl.split("/").pop();
+}
+function fileData(file) {
+  if (typeof file === "string") {
+    return {
+      key: file,
+      preview: file,
+      name: fileNameByUrl(file),
+      type: fileTypeByUrl(file)
+    };
+  }
+  return {
+    key: file == null ? void 0 : file.preview,
+    name: file == null ? void 0 : file.name,
+    size: file == null ? void 0 : file.size,
+    path: file == null ? void 0 : file.path,
+    type: file == null ? void 0 : file.type,
+    preview: file == null ? void 0 : file.preview,
+    lastModified: file == null ? void 0 : file.lastModified,
+    lastModifiedDate: file == null ? void 0 : file.lastModifiedDate
+  };
+}
+function DownloadButton({ onDownload }) {
+  const theme = styles.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      onClick: onDownload,
+      sx: {
+        p: 0,
+        top: 0,
+        right: 0,
+        width: 1,
+        height: 1,
+        zIndex: 9,
+        opacity: 0,
+        position: "absolute",
+        borderRadius: "unset",
+        // color: 'common.white',
+        justifyContent: "center",
+        bgcolor: "grey.800",
+        color: "common.white",
+        transition: theme.transitions.create("opacity"),
+        "&:hover": {
+          opacity: 1,
+          backgroundColor: styles.alpha(theme.palette.grey[900], 0.64),
+          backdropFilter: "blur(6px)"
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:arrow-circle-down-fill", width: 24 })
+    }
+  );
+}
+function FileThumbnail({
+  file,
+  tooltip,
+  imageView,
+  onDownload,
+  sx,
+  imgSx
+}) {
+  const { name = "", path = "", preview = "" } = fileData(file);
+  const format = fileFormat(path || preview);
+  const renderContent = format === "image" && imageView === true ? /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      component: "img",
+      src: preview,
+      sx: {
+        width: 1,
+        height: 1,
+        flexShrink: 0,
+        objectFit: "cover",
+        ...imgSx
+      }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      component: "img",
+      src: fileThumb(format),
+      sx: {
+        width: 32,
+        height: 32,
+        flexShrink: 0,
+        ...sx
+      }
+    }
+  );
+  if (tooltip === true) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: name, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Stack,
+      {
+        flexShrink: 0,
+        component: "span",
+        alignItems: "center",
+        justifyContent: "center",
+        sx: {
+          width: "fit-content",
+          height: "inherit"
+        },
+        children: [
+          renderContent,
+          onDownload && /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onDownload })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    renderContent,
+    onDownload && /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onDownload })
+  ] });
+}
+function RejectionFiles({ fileRejections }) {
+  if (!fileRejections.length) {
+    return null;
+  }
+  function formatBytes2(bytes) {
+    const b = bytes != null ? bytes : 0;
+    if (b === 0)
+      return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(b) / Math.log(k));
+    return `${parseFloat((b / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Paper,
+    {
+      variant: "outlined",
+      sx: {
+        py: 1,
+        px: 2,
+        mt: 3,
+        bgcolor: (theme) => styles.alpha(theme.palette.error.main, 0.08),
+        borderColor: (theme) => styles.alpha(theme.palette.error.main, 0.24)
+      },
+      children: fileRejections.map(({ file, errors }) => {
+        const { path, size } = fileData(file);
+        return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { my: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "subtitle2", noWrap: true, children: [
+            path,
+            " - ",
+            size != null ? formatBytes2(size) : ""
+          ] }),
+          errors.map((error) => /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "span", sx: { typography: "caption" }, children: [
+            "- ",
+            error.message
+          ] }, error.code))
+        ] }, path);
+      })
+    }
+  );
+}
+
+// src/image/getRatio.ts
+function getRatio(ratio = "1/1") {
+  return {
+    "4/3": "calc(100% / 4 * 3)",
+    "3/4": "calc(100% / 3 * 4)",
+    "6/4": "calc(100% / 6 * 4)",
+    "4/6": "calc(100% / 4 * 6)",
+    "16/9": "calc(100% / 16 * 9)",
+    "9/16": "calc(100% / 9 * 16)",
+    "21/9": "calc(100% / 21 * 9)",
+    "9/21": "calc(100% / 9 * 21)",
+    "1/1": "100%"
+  }[ratio];
+}
+var TRANSPARENT_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AApIBgX6cJqkAAAAASUVORK5CYII=";
+var Image = react.forwardRef(
+  ({
+    ratio,
+    disabledEffect = false,
+    effect = "blur",
+    src,
+    wrapperProps,
+    style,
+    sx,
+    ...other
+  }, ref) => {
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        component: reactLazyLoadImageComponent.LazyLoadImage,
+        wrapperClassName: "wrapper",
+        effect: disabledEffect ? void 0 : effect,
+        placeholderSrc: disabledEffect ? TRANSPARENT_PNG : TRANSPARENT_PNG,
+        src,
+        wrapperProps,
+        style,
+        sx: {
+          width: 1,
+          height: 1,
+          objectFit: "cover",
+          ...sx
+        },
+        ...other
+      }
+    );
+    if (ratio) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          ref,
+          component: "span",
+          sx: {
+            width: 1,
+            lineHeight: 1,
+            display: "block",
+            overflow: "hidden",
+            position: "relative",
+            pt: getRatio(ratio),
+            "& .wrapper": {
+              top: 0,
+              left: 0,
+              width: 1,
+              height: 1,
+              position: "absolute",
+              backgroundSize: "cover !important"
+            },
+            ...sx
+          },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        ref,
+        component: "span",
+        sx: {
+          lineHeight: 1,
+          display: "block",
+          overflow: "hidden",
+          position: "relative",
+          "& .wrapper": {
+            width: 1,
+            height: 1,
+            backgroundSize: "cover !important"
+          },
+          ...sx
+        },
+        children: content
+      }
+    );
+  }
+);
+Image.displayName = "Image";
+var Image_default = Image;
+
+// src/animate/variants/transition.ts
+var varTranEnter = (props) => {
+  const duration = (props == null ? void 0 : props.durationIn) != null ? props == null ? void 0 : props.durationIn : 0.64;
+  const ease = (props == null ? void 0 : props.easeIn) != null ? props == null ? void 0 : props.easeIn : [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+var varTranExit = (props) => {
+  const duration = (props == null ? void 0 : props.durationOut) != null ? props == null ? void 0 : props.durationOut : 0.48;
+  const ease = (props == null ? void 0 : props.easeOut) != null ? props == null ? void 0 : props.easeOut : [0.43, 0.13, 0.23, 0.96];
+  return { duration, ease };
+};
+
+// src/animate/variants/fade.ts
+var varFade = (props) => {
+  const distance = (props == null ? void 0 : props.distance) != null ? props == null ? void 0 : props.distance : 120;
+  const durationIn = props == null ? void 0 : props.durationIn;
+  const durationOut = props == null ? void 0 : props.durationOut;
+  const easeIn = props == null ? void 0 : props.easeIn;
+  const easeOut = props == null ? void 0 : props.easeOut;
+  return {
+    // IN
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit }
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    // OUT
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) }
+    }
+  };
+};
+function formatBytes(bytes) {
+  const b = bytes != null ? bytes : 0;
+  if (b === 0)
+    return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(b) / Math.log(k));
+  return `${parseFloat((b / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+function MultiFilePreview({
+  thumbnail,
+  files,
+  onRemove,
+  sx,
+  isClickable,
+  isEditable,
+  onDeleteButtonClick,
+  onPrivacyUpdateClick
+}) {
+  if ((files == null ? void 0 : files.length) == null) {
+    return null;
+  }
+  const [anchorEl, setAnchorEl] = react.useState(null);
+  const [selectedFile, setSelectedFile] = react.useState(null);
+  const canViewPrivate = true;
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: files.map((file) => {
+    const typedFile = file;
+    const { key, name = "", size = 0 } = fileData(typedFile);
+    const isStringFile = typeof file === "string";
+    if (thumbnail === true) {
+      return (
+        // @ts-ignore
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Stack,
+          {
+            component: framerMotion.m.div,
+            ...varFade().inUp,
+            alignItems: "center",
+            display: "inline-flex",
+            justifyContent: "center",
+            sx: {
+              m: 0.5,
+              width: 80,
+              height: 80,
+              borderRadius: 1.25,
+              overflow: "hidden",
+              position: "relative",
+              border: (theme) => `solid 1px ${theme.palette.divider}`,
+              ...sx
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FileThumbnail,
+                {
+                  tooltip: true,
+                  imageView: true,
+                  file: typedFile,
+                  sx: { position: "absolute" },
+                  imgSx: { position: "absolute" }
+                }
+              ),
+              onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  size: "small",
+                  onClick: () => onRemove(typedFile),
+                  sx: {
+                    top: 4,
+                    right: 4,
+                    p: "1px",
+                    position: "absolute",
+                    color: (theme) => styles.alpha(theme.palette.common.white, 0.72),
+                    bgcolor: (theme) => styles.alpha(theme.palette.grey[900], 0.48),
+                    "&:hover": {
+                      bgcolor: (theme) => styles.alpha(theme.palette.grey[900], 0.72)
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:close-fill", width: 16 })
+                }
+              )
+            ]
+          },
+          key
+        )
+      );
+    }
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Stack,
+        {
+          component: framerMotion.m.div,
+          ...varFade().inUp,
+          spacing: 2,
+          direction: "row",
+          alignItems: "center",
+          sx: {
+            my: 1,
+            px: 1,
+            py: 0.75,
+            borderRadius: 0.75,
+            border: (theme) => `solid 1px ${theme.palette.divider}`,
+            ...sx,
+            opacity: "1 !important",
+            transform: "none !important"
+          },
+          children: [
+            (typedFile == null ? void 0 : typedFile.preview) != null ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (typedFile == null ? void 0 : typedFile.is_private) === true && !canViewPrivate ? /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "garden:lock-locked-fill-12", sx: { width: "26px", height: "26px" } }) : (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: `${typedFile == null ? void 0 : typedFile.preview}`,
+                  alt: (typedFile == null ? void 0 : typedFile.name) != null ? typedFile == null ? void 0 : typedFile.name : "",
+                  style: { width: "40px", height: "40px" }
+                }
+              )
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx(FileThumbnail, { file: typedFile }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Stack,
+              {
+                flexGrow: 1,
+                sx: { minWidth: 0, cursor: "pointer" },
+                onClick: () => {
+                  if (isClickable === true && typedFile.url != null) {
+                    window.open(`${typedFile == null ? void 0 : typedFile.url}`, "_blank");
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", sx: { wordBreak: "break-all", whiteSpace: "break-spaces" }, noWrap: true, children: isStringFile ? file : name }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: "text.secondary" }, children: isStringFile ? "" : formatBytes(size) })
+                ]
+              }
+            ),
+            onRemove && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { edge: "end", size: "small", onClick: () => onRemove(typedFile), children: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:close-fill" }) }),
+            isEditable === true && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  edge: "end",
+                  size: "small",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    setAnchorEl(event.currentTarget);
+                    setSelectedFile(typedFile);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:more-horizontal-fill" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Menu,
+                {
+                  anchorEl,
+                  open: Boolean(anchorEl) && selectedFile === file,
+                  onClose: () => setAnchorEl(null),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.MenuItem,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setAnchorEl(null);
+                          if (onDeleteButtonClick) {
+                            onDeleteButtonClick(typedFile);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:trash-2-outline", width: 20 }),
+                          "Delete"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      material.MenuItem,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          if (onPrivacyUpdateClick) {
+                            onPrivacyUpdateClick(typedFile);
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Iconify_default,
+                            {
+                              icon: (typedFile == null ? void 0 : typedFile.is_private) === true ? "eva:unlock-outline" : "eva:lock-outline",
+                              width: 20
+                            }
+                          ),
+                          (typedFile == null ? void 0 : typedFile.is_private) === true ? "Public" : "Private"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        key
+      )
+    );
+  }) });
+}
+function SingleFilePreview({
+  file
+}) {
+  if (!file) {
+    return null;
+  }
+  const imgUrl = (typeof file === "string" ? file : file.preview) || "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        "& .wrapper": {
+          width: "100%",
+          height: "100%",
+          position: "relative"
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Image_default,
+        {
+          src: imgUrl,
+          effect: "opacity",
+          wrapperProps: {
+            style: {
+              width: "100%",
+              height: "100%",
+              position: "relative"
+            }
+          },
+          style: {
+            top: 8,
+            left: 8,
+            zIndex: 8,
+            borderRadius: 1,
+            position: "absolute",
+            width: "calc(100% - 16px)",
+            height: "calc(100% - 16px)",
+            objectFit: "cover"
+          }
+        }
+      )
+    }
+  );
+}
+function BackgroundIllustration() {
+  const theme = styles.useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "BG", x1: "19.496%", x2: "77.479%", y1: "71.822%", y2: "16.69%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: PRIMARY_MAIN }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: PRIMARY_MAIN, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "url(#BG)",
+        fillRule: "nonzero",
+        d: "M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434a148.44 148.44 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z",
+        opacity: "0.2"
+      }
+    )
+  ] });
+}
+var BackgroundIllustration_default = react.memo(BackgroundIllustration);
+function UploadIllustration({ ...other }) {
+  const theme = styles.useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.dark;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ...other, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 480 360", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(BackgroundIllustration_default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "linearGradient-2", x1: "30.113%", x2: "30.113%", y1: "0%", y2: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopOpacity: "0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M293.006 206.192c-2.248 2.672-4.676 2.628-6.123 2.251l.054-1.384s5.979-2.733 5.827-2.159c-.057.215.057.733.242 1.292zM309.393 209.217c-3.818 2.206-6.058-.38-6.578-1.112.32-.84.801-2.204.703-2.592-.144-.577 5.827 2.155 5.827 2.155l.048 1.549zM305.303 187.204s3.632-2.093 4.425-1.151c.792.942-4.425 1.151-4.425 1.151zM307.497 188.355s-.598.299.721.681c1.318.383-.721-.681-.721-.681zM285.532 182.599c-.123.036 3.022 2.123 5.862.395-.012 0-5.154-.61-5.862-.395zM291.239 186.591s-.861 1.692-2.625 1.943c-1.764.251 2.625-1.943 2.625-1.943zM302.785 190.262s4.138 6.578 3.346 8.129c-.793 1.552-3.346-8.129-3.346-8.129zM294.62 216.416c0 .368 0 .712-.036.996-.107 1.33-3.381.828-3.381.828-2.99.416-4.066-1.019-4.422-2.392a5.444 5.444 0 01-.164-1.363 5.606 5.606 0 01.054-.819v-.272a1.998 1.998 0 011.859.379c1.331 1.08 3.095.252 3.095.252s1.294.107 1.793.538c.281.242.745-.341 1.098-.897.021.359.054 1.007.074 1.701.024.356.03.714.03 1.049z",
+        opacity: "0.05"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M289.37 216.339s-.897.879-2.589-.479a5.444 5.444 0 01-.164-1.363c.864.658 2.466 1.842 2.753 1.842zM294.62 216.416a.67.67 0 01-.519.132.672.672 0 01-.452-.287c.348-.266.669-.566.956-.897.009.359.015.717.015 1.052zM301.637 217.032c0 .371 0 .715.033.996.108 1.333 3.382.828 3.382.828 2.989.419 4.066-1.017 4.421-2.392a5.728 5.728 0 00.111-2.182v-.272a2.024 2.024 0 00-1.862.379c-1.331 1.08-3.092.251-3.092.251s-1.294.111-1.794.542c-.281.242-.744-.341-1.094-.897a61.426 61.426 0 00-.078 1.701c-.024.35-.03.708-.027 1.046z",
+        opacity: "0.05"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M306.887 216.949s.897.879 2.587-.479c.112-.444.169-.901.167-1.36-.867.655-2.47 1.839-2.754 1.839zM301.637 217.032a.67.67 0 00.969-.155 6.35 6.35 0 01-.957-.897c-.009.356-.014.714-.012 1.052zM319.614 106.269c.063-.138.123-.275.18-.41.057-.134.077-.209.11-.317-.11.237-.206.48-.29.727z",
+        opacity: "0.05"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_DARKER,
+        fillRule: "nonzero",
+        d: "M157.592 279.461a4.114 4.114 0 01-.917-3.131l13.196-107.979 1.094-8.97a4.142 4.142 0 014.078-3.635l38.654-.257a4.135 4.135 0 004.108-4.249l-.015-.409a4.14 4.14 0 014.135-4.279h40.619a4.134 4.134 0 014.098 4.682 4.137 4.137 0 003.995 4.682l39.01.996a4.13 4.13 0 013.97 4.831l-19.502 113.909-.368 2.152a4.042 4.042 0 01-.598 1.543l-135.557.114z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        d: "M251.256817 123.296578L274.098317 123.296578 274.098317 200.823078 251.256817 200.823078z",
+        transform: "rotate(34.64 262.678 162.06)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFC107",
+        fillRule: "nonzero",
+        d: "M270.624591 129.857671L286.750291 129.857671 286.750291 145.983371 270.624591 145.983371z",
+        transform: "rotate(34.804 278.687 137.92)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFC107",
+        fillRule: "nonzero",
+        d: "M260.275579 145.813111L276.423079 145.813111 276.423079 161.960611 260.275579 161.960611z",
+        opacity: "0.5",
+        transform: "rotate(34.64 268.35 153.887)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFC107",
+        fillRule: "nonzero",
+        d: "M249.191579 161.852111L265.339079 161.852111 265.339079 177.999611 249.191579 177.999611z",
+        opacity: "0.3",
+        transform: "rotate(34.64 257.265 169.926)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        d: "M237.472537 121.334214L260.314037 121.334214 260.314037 198.567714 237.472537 198.567714z",
+        transform: "rotate(16.29 248.893 159.951)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M249.053192 123.761554L265.200692 123.761554 265.200692 139.909054 249.053192 139.909054z",
+        transform: "rotate(16.29 257.127 131.835)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M243.584192 142.473554L259.731692 142.473554 259.731692 158.621053 243.584192 158.621053z",
+        opacity: "0.5",
+        transform: "rotate(16.29 251.658 150.547)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M238.116192 161.182554L254.263692 161.182554 254.263692 177.330054 238.116192 177.330054z",
+        opacity: "0.3",
+        transform: "rotate(16.29 246.19 169.256)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        d: "M230.099192 121.641542L252.940692 121.641542 252.940692 198.875042 230.099192 198.875042z",
+        transform: "rotate(4.6 241.52 160.258)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#1890FF",
+        fillRule: "nonzero",
+        d: "M235.800489 122.985499L251.947989 122.985499 251.947989 139.132999 235.800489 139.132999z",
+        transform: "rotate(4.6 243.874 131.06)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#1890FF",
+        fillRule: "nonzero",
+        d: "M234.234488 142.413498L250.381988 142.413498 250.381988 158.560998 234.234488 158.560998z",
+        opacity: "0.5",
+        transform: "rotate(4.6 242.308 150.487)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#1890FF",
+        fillRule: "nonzero",
+        d: "M232.672488 161.846499L248.819988 161.846499 248.819988 177.993999 232.672488 177.993999z",
+        opacity: "0.3",
+        transform: "rotate(4.6 240.746 169.92)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        d: "M224.736657 123.384871L247.578157 123.384871 247.578157 200.618371 224.736657 200.618371z",
+        transform: "rotate(-2.61 236.157 162.002)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M226.751283 124.659968L242.898783 124.659968 242.898783 140.807468 226.751283 140.807468z",
+        transform: "rotate(-2.61 234.825 132.734)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M228.305601 143.479224L244.473301 143.479224 244.473301 159.646924 228.305601 159.646924z",
+        opacity: "0.5",
+        transform: "rotate(-2.862 236.39 151.563)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M228.525282 163.608968L244.672782 163.608968 244.672782 179.756468 228.525282 179.756468z",
+        opacity: "0.3",
+        transform: "rotate(-2.61 236.599 171.683)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#F4F6F8",
+        fillRule: "nonzero",
+        d: "M232.679 225.726l-20.294 7.851-29.661 11.466c-1.121-2.093-2.771-4.921-4.813-8.297-7.026-11.642-18.65-29.75-29.001-45.665-11.66-17.938-21.696-33.075-21.696-33.075l7.265-2.093 59.346-17.23 38.854 87.043z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#000",
+        fillRule: "nonzero",
+        d: "M232.679 225.726l-20.294 7.851a152.535 152.535 0 01-34.484 3.169c-7.026-11.642-18.65-29.75-29-45.665l-14.42-35.18 59.343-17.218 38.855 87.043z",
+        opacity: "0.1"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M247.777 220.841s-31.526 18.65-78.596 14.432l-37.525-91.486 17.984-3.091 62.168-10.677 35.279 89.043.69 1.779z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FF4842",
+        fillRule: "nonzero",
+        d: "M247.075 219.074c-7.424.365-16.013.329-24.654-.702-9.351-1.101-18.757-3.367-26.82-7.523-6.742-3.471-12.506-7.247-17.532-11.776-13.074-11.759-21.164-28.579-28.429-58.365l62.168-10.677 35.267 89.043z",
+        opacity: "0.1"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#FFF",
+        fillRule: "nonzero",
+        d: "M270.203 213.959s-23.239 4.55-46.894 1.749c-9.351-1.1-18.757-3.367-26.82-7.522-6.742-3.471-12.503-7.247-17.532-11.777-16.181-14.557-24.725-36.866-33.536-81.918 0 0 38.633 9.325 76.836-11.101-.012.015 12.865 80.373 47.946 110.569z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M165.405 131.03s31.416-1.776 40.187-8.548l1.331 4.276s-20.758 9.157-41.518 9.268v-4.996zM165.405 152.137s30.417-1.665 53.399-12.766l.777 1.776s-18.237 10.647-54.176 13.433v-2.443zM167.853 160.362s30.418-1.665 53.397-12.766l.777 1.776s-18.237 10.643-54.174 13.433v-2.443zM170.299 168.599s30.417-1.666 53.399-12.766l.774 1.775s-18.237 10.647-54.173 13.433v-2.442zM172.748 176.835s30.417-1.665 53.396-12.766l.777 1.776s-18.237 10.647-54.173 13.433v-2.443zM175.193 185.075s30.417-1.665 53.399-12.766l.774 1.776s-18.237 10.643-54.173 13.433v-2.443z",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M389.069 287.344s-12.641-.762-11.152 8.097c0 0-.299 1.563 1.124 2.275 0 0 .021-.658 1.295-.434.454.077.916.099 1.375.066a2.832 2.832 0 001.677-.694c.468-.409 3.555-1.468 4.936-7.274 0 0 1.023-1.267.981-1.593l-2.132.897s.73 1.54.156 2.816c0 0-.069-2.759-.479-2.691-.083 0-1.109.533-1.109.533s1.253 2.69.299 4.628c0 0 .359-3.304-.699-4.434l-1.495.876s1.465 2.768.472 5.029c0 0 .254-3.465-.789-4.817l-1.361 1.062s1.379 2.729.539 4.604c0 0-.111-4.036-.835-4.341 0 0-1.195 1.049-1.369 1.494 0 0 .942 1.98.356 3.026 0 0-.359-2.691-.652-2.691 0 0-1.196 1.794-1.309 2.99 0 0 .051-1.818 1.022-3.172a3.593 3.593 0 00-1.818.942s.186-1.262 2.111-1.37c0 0 .981-1.351 1.241-1.435 0 0-1.914-.158-3.074.356 0 0 1.023-1.196 3.427-.649l1.342-1.094s-2.52-.347-3.588.036c0 0 1.229-1.052 3.95-.299l1.462-.873s-2.147-.463-3.426-.299c0 0 1.348-.729 3.856.06l1.044-.47s-1.573-.299-2.033-.358c-.461-.06-.488-.174-.488-.174a5.426 5.426 0 012.957.329s2.222-.813 2.186-.954z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "380.363", cy: "298.487", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "8.945", ry: "1.513" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M394.956 258.102s-7.125-.43-6.279 4.565a1.218 1.218 0 00.631 1.283s.015-.371.733-.245c.255.042.515.054.774.036.349-.023.681-.159.945-.389.264-.23 2.003-.828 2.783-4.102 0 0 .577-.714.553-.897l-1.196.511s.41.87.087 1.591c0 0-.039-1.558-.269-1.522-.048 0-.625.299-.625.299s.706 1.495.173 2.61c0 0 .204-1.862-.394-2.502l-.846.496s.825 1.561.266 2.834c0 0 .143-1.955-.446-2.714l-.765.598s.774 1.539.299 2.595c0 0-.063-2.275-.469-2.446a4.75 4.75 0 00-.775.834s.532 1.118.204 1.707c0 0-.204-1.515-.368-1.521 0 0-.67 1.001-.739 1.689a3.671 3.671 0 01.577-1.794 2.007 2.007 0 00-1.025.532s.104-.711 1.196-.771c0 0 .553-.763.699-.81 0 0-1.079-.09-1.734.2 0 0 .577-.67 1.932-.365l.759-.619s-1.423-.194-2.024.021c0 0 .694-.598 2.227-.161l.826-.494a7.445 7.445 0 00-1.935-.164s.763-.413 2.174.033l.598-.263s-.897-.177-1.148-.203c-.252-.027-.275-.099-.275-.099a3.078 3.078 0 011.668.185s1.232-.46 1.208-.538z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "390.052", cy: "264.383", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "5.044", ry: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M352.896 262.437s-8.604-.52-7.588 5.51a1.47 1.47 0 00.763 1.549s0-.449.897-.299c.309.052.623.067.935.045a1.923 1.923 0 001.142-.473c.318-.279 2.419-.998 3.361-4.951 0 0 .697-.861.667-1.085l-1.468.622s.496 1.046.104 1.916c0 0-.048-1.877-.326-1.835-.056 0-.753.364-.753.364s.852 1.824.209 3.152c0 0 .245-2.249-.475-3.02l-1.023.598s.996 1.886.32 3.423c0 0 .174-2.359-.535-3.289l-.927.724s.939 1.857.365 3.133c0 0-.072-2.747-.565-2.954 0 0-.81.715-.933 1.008 0 0 .64 1.348.242 2.06 0 0-.245-1.83-.445-1.839 0 0-.804 1.214-.897 2.042.04-.768.28-1.512.697-2.159a2.427 2.427 0 00-1.235.643s.125-.858 1.435-.933c0 0 .667-.92.846-.974 0 0-1.303-.111-2.093.239 0 0 .694-.807 2.329-.44l.915-.747s-1.713-.233-2.442.024c0 0 .837-.715 2.69-.191l.996-.598s-1.462-.314-2.335-.201c0 0 .921-.496 2.625.042l.711-.32s-1.07-.209-1.384-.242c-.314-.033-.329-.119-.329-.119a3.69 3.69 0 012.012.221s1.519-.553 1.492-.646z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "346.97", cy: "270.022", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "6.09", ry: "1.028" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        width: "51.026",
+        height: "91.312",
+        x: "303.926",
+        y: "69.211",
+        fill: "#FFF",
+        fillRule: "nonzero",
+        rx: "4.737",
+        transform: "rotate(-71.99 329.44 114.867)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "303.613", cy: "103.507", r: "9.376", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.2" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M344.582495 86.4883769L347.150665 86.4883769 347.150665 127.336977 344.582495 127.336977z",
+        opacity: "0.2",
+        transform: "rotate(-71.99 345.867 106.913)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M333.028401 99.6373982L335.596571 99.6373982 335.596571 120.445898 333.028401 120.445898z",
+        opacity: "0.2",
+        transform: "rotate(-71.99 334.312 110.042)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M337.109071 101.431004L339.677241 101.431004 339.677241 135.086304 337.109071 135.086304z",
+        opacity: "0.2",
+        transform: "rotate(-71.99 338.393 118.259)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M338.505494 105.174377L341.073664 105.174377 341.073664 146.022978 338.505494 146.022978z",
+        opacity: "0.2",
+        transform: "rotate(-71.99 339.79 125.599)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M348.060839 134.648161L353.026769 134.648161 353.026769 145.952261 348.060839 145.952261z",
+        opacity: "0.5",
+        transform: "rotate(-71.99 350.544 140.3)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        width: "50.3",
+        height: "78.305",
+        x: "291.549",
+        y: "174.486",
+        fill: "#FFF",
+        fillRule: "nonzero",
+        rx: "4",
+        transform: "rotate(-57.265 316.7 213.638)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M278.038439 203.88874L292.269539 203.88874 292.269539 207.23723 278.038439 207.23723z",
+        transform: "rotate(-57.57 285.154 205.563)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M283.007935 199.201889L314.262535 199.201889 314.262535 202.272339 283.007935 202.272339z",
+        transform: "rotate(-57.57 298.635 200.737)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M288.543935 202.715889L319.798535 202.715889 319.798535 205.786339 288.543935 205.786339z",
+        transform: "rotate(-57.57 304.171 204.251)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M294.078936 206.235889L325.333536 206.235889 325.333536 209.306339 294.078936 209.306339z",
+        transform: "rotate(-57.57 309.706 207.771)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M299.879919 211.40702L331.090719 211.40702 331.090719 214.47316 299.879919 214.47316z",
+        transform: "rotate(-57.265 315.485 212.94)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#F4F6F8",
+        fillRule: "nonzero",
+        d: "M305.149936 213.268889L336.404536 213.268889 336.404536 216.339339 305.149936 216.339339z",
+        transform: "rotate(-57.57 320.777 214.804)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#F4F6F8",
+        fillRule: "nonzero",
+        d: "M310.685935 216.782889L341.940535 216.782889 341.940535 219.853339 310.685935 219.853339z",
+        transform: "rotate(-57.57 326.313 218.318)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#DFE3E8",
+        fillRule: "nonzero",
+        d: "M341.417983 210.406958L349.511163 210.406958 349.511163 218.500138 341.417983 218.500138z",
+        transform: "rotate(-57.57 345.465 214.454)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_DARK,
+        fillRule: "nonzero",
+        d: "M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z",
+        opacity: "0.243"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "url(#linearGradient-2)",
+        fillRule: "nonzero",
+        d: "M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z",
+        opacity: "0.32"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "119.593", cy: "258.664", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "4.846", ry: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "101.03", cy: "260.545", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "4.846", ry: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "108.459", cy: "265.905", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "3.444", ry: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "89.193", cy: "265.433", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1", rx: "3.444", ry: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M100.925 260.398s6.796-22.279-1.064-31.204c-5.881-6.676-12.557-5.877-15.547-5.052a5.528 5.528 0 00-3.564 2.963c-1.046 2.254-.858 5.913 6.521 10.186 12.35 7.151 13.119 16.96 13.119 16.96l.535 6.147z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        stroke: PRIMARY_DARKER,
+        strokeLinecap: "round",
+        strokeWidth: "0.5",
+        d: "M85.382 227.302s20.031 6.278 15.546 33.096M97.083 229.547s-2.76 1.86-1.88 4.655M87.39 231.203s1.687-1.716 3.741-.768M95.31 239.832s2.963-1.495 3.728.379M102.638 242.962s-2.224-.176-2.263.897"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M101.2 260.575s-7.961-16.193-10.147-15.846c-1.037.17-1.516 1.196-1.734 2.218a6.516 6.516 0 00.434 3.941c1.13 2.601 4.165 7.519 11.447 9.687z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        stroke: PRIMARY_DARKER,
+        strokeLinecap: "round",
+        strokeWidth: "0.5",
+        d: "M91.113 247.808s8.353 12.115 9.968 12.647"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M90.344 249.701L92.293 249.701" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M92.68 254.132L95.738 254.263" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M94.542 250.586L94.21 252.179" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M97.792 255.432L97.732 256.879" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M100.964 260.575s7.959-16.193 10.144-15.846c1.041.17 1.519 1.196 1.734 2.218a6.514 6.514 0 01-.433 3.941c-1.13 2.601-4.168 7.519-11.445 9.687z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        stroke: PRIMARY_DARKER,
+        strokeLinecap: "round",
+        strokeWidth: "0.5",
+        d: "M111.051 247.808s-8.371 12.115-9.97 12.647"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M111.82 249.701L109.871 249.701" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M109.485 254.132L106.426 254.263" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M107.622 250.586L107.954 252.179" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: PRIMARY_DARKER, strokeLinecap: "round", strokeWidth: "0.5", d: "M104.372 255.432L104.432 256.879" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M87.295 264.357a1.375 1.375 0 01-.452-.685.599.599 0 01.317-.697c.3-.11.598.09.837.299.24.21.512.431.81.38a1.237 1.237 0 01-.382-1.16.47.47 0 01.105-.236c.161-.174.454-.099.648.039.598.43.787 1.264.79 2.018.03-.277.03-.555 0-.831a.853.853 0 01.334-.727.938.938 0 01.476-.114.988.988 0 01.774.222.767.767 0 01-.03.947c-.229.257-.5.474-.801.64a1.805 1.805 0 00-.571.547.399.399 0 00-.042.096h-1.74a4.826 4.826 0 01-1.073-.738zM117.626 257.833a1.355 1.355 0 01-.452-.682.599.599 0 01.314-.696c.299-.111.598.089.837.299.239.209.509.436.817.391a1.236 1.236 0 01-.386-1.157.472.472 0 01.107-.236c.162-.173.455-.099.649.036.613.433.787 1.268.79 2.021a4.008 4.008 0 000-.834.852.852 0 01.299-.736.955.955 0 01.475-.11.998.998 0 01.774.218.768.768 0 01-.033.951 2.996 2.996 0 01-.798.64 1.767 1.767 0 00-.571.544.499.499 0 00-.042.098h-1.701a4.78 4.78 0 01-1.079-.747zM107.518 264.357a1.406 1.406 0 01-.455-.685.6.6 0 01.317-.697c.299-.11.598.09.837.299.239.21.505.437.816.395a1.247 1.247 0 01-.385-1.16.472.472 0 01.107-.236c.162-.174.455-.099.649.039.613.43.783 1.264.789 2.018.03-.277.03-.555 0-.832a.855.855 0 01.314-.735.93.93 0 01.476-.114.988.988 0 01.774.222.764.764 0 01-.033.947 3.028 3.028 0 01-.798.64 1.798 1.798 0 00-.571.547.411.411 0 00-.042.096h-1.734c-.385-.2-.742-.45-1.061-.744z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "84.467", cy: "87.003", r: "6.467", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "395.425", cy: "138.681", r: "6.467", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "279.178", cy: "66.467", r: "6.467", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "97.4", cy: "122.68", r: "10.838", fill: PRIMARY_MAIN, fillRule: "nonzero", opacity: "0.1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_DARK,
+        fillRule: "nonzero",
+        d: "M206.029 209.911c-7.975 0-14.44 6.465-14.44 14.44s6.465 14.44 14.44 14.44 14.44-6.465 14.44-14.44-6.465-14.44-14.44-14.44z"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_MAIN,
+        fillRule: "nonzero",
+        d: "M206.029 211.59c7.047 0 12.761 5.714 12.761 12.761 0 7.048-5.714 12.761-12.761 12.761-7.048 0-12.761-5.713-12.761-12.761.006-7.045 5.716-12.754 12.761-12.761",
+        opacity: "0.72"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: PRIMARY_DARK,
+        fillRule: "nonzero",
+        d: "M200.058 225.406l-.699-.681a.721.721 0 010-1.065l6.127-5.984a.753.753 0 01.546-.231c.206 0 .404.083.545.231l6.127 5.978a.733.733 0 010 1.065l-.699.682a.768.768 0 01-1.091 0l-3.622-3.727v8.843a.725.725 0 01-.219.523.76.76 0 01-.534.217h-1.009a.75.75 0 01-.759-.74v-8.832l-3.622 3.726a.768.768 0 01-1.091-.005z"
+      }
+    )
+  ] }) });
+}
+var UploadIllustration_default = react.memo(UploadIllustration);
+var StyledDropZone = styles.styled("div")(({ theme }) => ({
+  outline: "none",
+  cursor: "pointer",
+  overflow: "hidden",
+  position: "relative",
+  padding: theme.spacing(5),
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create("padding"),
+  backgroundColor: theme.palette.background.default,
+  border: `1px dashed ${styles.alpha(theme.palette.grey[500], 0.32)}`,
+  "&:hover": {
+    opacity: 0.72
+  }
+}));
+function Upload({
+  disabled,
   multiple = false,
-  accept = "image/*",
-  maxFiles = 5,
-  maxSize = 5 * 1024 * 1024,
-  // 5MB
-  disabled = false,
+  error,
+  helperText,
+  //
+  file,
+  onDelete,
+  //
+  files,
+  thumbnail,
+  onUpload,
+  onRemove,
+  onRemoveAll,
   sx,
-  dropZoneSx,
-  previewSx,
-  errorSx,
-  helperTextSx,
-  onDrop: externalOnDrop,
-  onDelete: externalOnDelete,
-  ...rest
-}) => {
-  var _a;
-  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = ___default.default.get(errors, name);
-  const isTouched = ___default.default.get(touched, name);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const currentFiles = ___default.default.get(values, name, multiple ? [] : []) || [];
-  const isMaxFilesReached = multiple && currentFiles && currentFiles.length >= maxFiles;
-  const processFile = async (file) => {
-    if (file.type.startsWith("image/")) {
-      const preview = await new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.readAsDataURL(file);
-      });
-      return { file, preview, name: file.name, type: file.type };
-    }
-    return { file, name: file.name, type: file.type };
-  };
-  const handleDrop = react.useCallback(
-    async (acceptedFiles) => {
-      if (disabled || isMaxFilesReached)
-        return;
-      try {
-        const newFiles = await Promise.all(acceptedFiles.map(processFile));
-        if (multiple) {
-          const updatedFiles = [...currentFiles || [], ...newFiles].slice(
-            0,
-            maxFiles
-          );
-          setFieldValue(name, updatedFiles, true);
-        } else {
-          setFieldValue(name, newFiles[0] || null, true);
-        }
-        externalOnDrop == null ? void 0 : externalOnDrop(acceptedFiles);
-      } catch (error) {
-        console.error("Error processing files:", error);
-      }
-    },
-    [
-      currentFiles,
-      disabled,
-      isMaxFilesReached,
-      multiple,
-      name,
-      setFieldValue,
-      maxFiles,
-      externalOnDrop
-    ]
-  );
-  const handleRemove = (index) => {
-    if (disabled)
-      return;
-    if (multiple) {
-      const updatedFiles = [...currentFiles || []];
-      updatedFiles.splice(index, 1);
-      setFieldValue(name, updatedFiles, true);
-    } else {
-      setFieldValue(name, null, true);
-    }
-    externalOnDelete == null ? void 0 : externalOnDelete();
-  };
-  const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
-    onDrop: handleDrop,
-    accept: accept ? { [accept]: [] } : void 0,
-    maxFiles: multiple ? maxFiles - ((currentFiles == null ? void 0 : currentFiles.length) || 0) : 1,
-    maxSize,
+  ...other
+}) {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject,
+    fileRejections
+  } = reactDropzone.useDropzone({
     multiple,
-    disabled: disabled || isMaxFilesReached,
-    onDragEnter: () => setIsDragging(true),
-    onDragLeave: () => setIsDragging(false),
-    onDropAccepted: () => setIsDragging(false)
+    disabled,
+    ...other
   });
-  const renderPreview = (file, index) => {
-    var _a2;
-    const isImage = (_a2 = file.type) == null ? void 0 : _a2.startsWith("image/");
-    const previewUrl = file.preview || (typeof file.file === "string" ? file.file : "");
-    const fileName = file.name || (typeof file.file === "string" ? file.file.split("/").pop() : file.file.name);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Paper,
-      {
-        sx: [
-          {
-            position: "relative",
-            p: 1,
-            borderRadius: 1,
-            overflow: "hidden",
-            border: "1px solid",
-            borderColor: "divider",
-            "&:hover .file-actions": {
-              opacity: 1
-            }
-          },
-          ...Array.isArray(previewSx) ? previewSx : [previewSx]
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          isImage && previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            material.Avatar,
-            {
-              variant: "rounded",
-              src: previewUrl,
-              sx: { width: 48, height: 48, bgcolor: "background.paper" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Image, {})
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            material.Avatar,
-            {
-              variant: "rounded",
-              sx: { width: 48, height: 48, bgcolor: "action.hover" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.InsertDriveFile, {})
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", noWrap: true, sx: { flex: 1, maxWidth: 200 }, children: fileName }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              className: "file-actions",
-              sx: { opacity: 0, transition: "opacity 0.2s" },
-              children: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove", children: /* @__PURE__ */ jsxRuntime.jsx(
-                material.IconButton,
-                {
-                  size: "small",
-                  color: "error",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleRemove(index);
-                  },
-                  disabled,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Delete, { fontSize: "small" })
-                }
-              ) })
-            }
-          )
-        ] })
-      },
-      index
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
+  const { t } = reactI18next.useTranslation();
+  const hasFile = !!file && !multiple;
+  const hasFiles = files && multiple && files.length > 0;
+  const isError = isDragReject || !!error;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: 1, position: "relative", ...sx }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Box,
+      StyledDropZone,
       {
         ...getRootProps(),
-        sx: [
-          {
-            p: 3,
-            border: "2px dashed",
-            borderRadius: 1,
-            bgcolor: isDragging ? "action.hover" : "background.paper",
-            borderColor: isDragging ? "primary.main" : "divider",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.7 : 1,
-            transition: "all 0.2s ease-in-out",
-            "&:hover": !disabled && {
-              borderColor: "primary.main",
-              bgcolor: "action.hover"
-            }
+        sx: {
+          ...isDragActive && {
+            opacity: 0.72
           },
-          ...Array.isArray(dropZoneSx) ? dropZoneSx : [dropZoneSx]
-        ],
+          ...isError && {
+            color: "error.main",
+            bgcolor: "error.lighter",
+            borderColor: "error.light"
+          },
+          ...disabled && {
+            opacity: 0.48,
+            pointerEvents: "none"
+          },
+          ...hasFile && {
+            padding: "12% 0"
+          }
+        },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            material.Stack,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Placeholder,
             {
-              spacing: 1,
-              alignItems: "center",
-              justifyContent: "center",
-              textAlign: "center",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: isDragActive ? "Drop the files here..." : `Drag & drop ${multiple ? "files" : "a file"} here, or click to select ${multiple ? "files" : "a file"}` }),
-                /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", color: "text.secondary", children: [
-                  accept,
-                  " \u2022 Max ",
-                  maxSize / (1024 * 1024),
-                  "MB per file \u2022",
-                  " ",
-                  multiple ? `Max ${maxFiles} files` : "Single file only"
-                ] })
-              ]
+              sx: {
+                ...hasFile && {
+                  opacity: 0
+                }
+              }
             }
-          )
+          ),
+          hasFile && /* @__PURE__ */ jsxRuntime.jsx(SingleFilePreview, { file })
         ]
       }
     ),
-    ((_a = currentFiles == null ? void 0 : currentFiles.length) != null ? _a : 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { spacing: 1, sx: { mt: 2 }, children: currentFiles == null ? void 0 : currentFiles.map((file, index) => renderPreview(file, index)) }),
-    Boolean(fieldError) && isTouched && /* @__PURE__ */ jsxRuntime.jsx(
-      material.Typography,
+    helperText && helperText,
+    /* @__PURE__ */ jsxRuntime.jsx(RejectionFiles, { fileRejections }),
+    hasFile && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      material.IconButton,
       {
-        variant: "caption",
-        sx: [
+        size: "small",
+        onClick: onDelete,
+        sx: {
+          top: 16,
+          right: 16,
+          zIndex: 9,
+          position: "absolute",
+          color: (theme) => styles.alpha(theme.palette.common.white, 0.8),
+          bgcolor: (theme) => styles.alpha(theme.palette.grey[900], 0.72),
+          "&:hover": {
+            bgcolor: (theme) => styles.alpha(theme.palette.grey[900], 0.48)
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Iconify_default, { icon: "eva:close-fill", width: 18 })
+      }
+    ),
+    hasFiles === true && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { my: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        MultiFilePreview,
+        {
+          files,
+          thumbnail,
+          onRemove
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", justifyContent: "flex-end", spacing: 1.5, children: [
+        onRemoveAll && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
           {
-            display: "block",
-            color: "error.main",
-            mt: 1
-          },
-          ...Array.isArray(errorSx) ? errorSx : [errorSx]
-        ],
-        children: fieldError
+            color: "inherit",
+            variant: "outlined",
+            size: "small",
+            onClick: onRemoveAll,
+            children: t("Remove all")
+          }
+        ),
+        onUpload && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", variant: "contained", onClick: onUpload, children: t("Upload files") })
+      ] })
+    ] })
+  ] });
+}
+function Placeholder({ sx, ...other }) {
+  const { t } = reactI18next.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Stack,
+    {
+      spacing: 5,
+      alignItems: "center",
+      justifyContent: "center",
+      direction: {
+        xs: "column",
+        md: "row"
+      },
+      sx: {
+        width: 1,
+        textAlign: {
+          xs: "center",
+          md: "left"
+        },
+        ...sx
+      },
+      ...other,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UploadIllustration_default, { sx: { width: 220 } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { gutterBottom: true, variant: "h5", children: t("Drop or Select file") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", sx: { color: "text.secondary" }, children: [
+            t("Drop files here or click"),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Typography,
+              {
+                variant: "body2",
+                component: "span",
+                sx: {
+                  mx: 0.5,
+                  textDecoration: "underline"
+                },
+                children: t("browse")
+              }
+            ),
+            t("thorough your machine")
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+async function blobToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = function() {
+      const base64data = reader.result;
+      resolve(base64data);
+    };
+    reader.onerror = function(err) {
+      reject(err);
+    };
+  });
+}
+var AppUploadFile = ({ name, ...rest }) => {
+  var _a, _b, _c, _d, _e;
+  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  let val = _19__default.default.get(values, name);
+  if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
+    val = val ? [val] : [];
+  } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
+    val = val[0];
+  }
+  const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Upload,
+      {
+        ...rest,
+        file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
+        files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
+        error: Boolean(fieldError) && isTouched,
+        disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (value == null ? void 0 : value.length) >= (rest == null ? void 0 : rest.maxFiles),
+        onDrop: (fileVal) => {
+          (async () => {
+            var _a2;
+            const images = await Promise.all(
+              fileVal.map(async (single) => {
+                var _a3;
+                return {
+                  preview: ((_a3 = single == null ? void 0 : single.type) == null ? void 0 : _a3.includes("image")) ? await blobToBase64(single) : void 0,
+                  file: single
+                };
+              })
+            );
+            const currentValue = Array.isArray(value) ? value : [];
+            if (rest.multiple === true) {
+              if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
+                return;
+              setFieldValue(name, [...currentValue, ...images], true);
+            } else {
+              setFieldValue(name, images[0], true);
+            }
+          })();
+        },
+        onDelete: () => {
+          var _a2;
+          if ((_a2 = rest.multiple) != null ? _a2 : false) {
+            setFieldValue(name, [], true);
+          } else {
+            setFieldValue(name, "", true);
+          }
+        },
+        onRemove: (e) => {
+          const afterFilter = val.filter((file) => {
+            var _a2;
+            if ((_a2 = file.file) != null ? _a2 : false) {
+              return !_19__default.default.isEqual(e, file.file);
+            }
+            return !_19__default.default.isEqual(e, file);
+          });
+          setFieldValue(name, afterFilter, true);
+        }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(
       material.Typography,
       {
+        color: "#FF5630",
         variant: "caption",
-        sx: [
-          {
-            display: "block",
-            color: "text.secondary",
-            mt: 0.5
-          },
-          ...Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx]
-        ],
-        children: [
-          (currentFiles == null ? void 0 : currentFiles.length) || 0,
-          " of ",
-          maxFiles,
-          " files selected"
-        ]
+        display: "block",
+        gutterBottom: true,
+        children: fieldError
       }
-    )
+    ),
+    rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", display: "block", gutterBottom: true, children: [
+      "Maximum ",
+      rest.maxFiles,
+      " file allowed"
+    ] })
   ] });
 };
 var AppUploadFile_default = AppUploadFile;