formik-form-components 0.2.12 → 0.2.14

package/dist/index.js

@@ -7,8 +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 demo = require('@mui/x-date-pickers/internals/demo');
-var _19 = require('lodash');
+var _ = require('lodash');
 var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
 var Autocomplete3 = require('@mui/material/Autocomplete');
@@ -35,15 +34,12 @@ 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 styles = require('@mui/material/styles');
-var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var framerMotion = require('framer-motion');
+var iconsMaterial = require('@mui/icons-material');
 var reactDropzone = require('react-dropzone');
-var reactI18next = require('react-i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _19__default = /*#__PURE__*/_interopDefault(_19);
+var ___default = /*#__PURE__*/_interopDefault(_);
 var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
 var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -88,9 +84,9 @@ var AppDatePicker = react.forwardRef(
     ...otherProps
   }, ref) => {
     const { values, setFieldValue, touched, errors, setFieldTouched } = formik.useFormikContext();
-    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 fieldValue = ___default.default.get(values, name);
+    const fieldError = ___default.default.get(errors, name);
+    const isTouched = ___default.default.get(touched, name);
     const handleChange = (newValue, context) => {
       setFieldValue(name, newValue);
       if (externalOnChange) {
@@ -103,7 +99,7 @@ var AppDatePicker = react.forwardRef(
         externalOnBlur(event);
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(demo.DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker.DatePicker,
       {
         label,
@@ -198,7 +194,7 @@ var AppDatePicker = react.forwardRef(
         },
         ...otherProps
       }
-    ) }) }) });
+    ) }) });
   }
 );
 AppDatePicker.displayName = "AppDatePicker";
@@ -228,9 +224,9 @@ var AppDateAndTimePicker = react.forwardRef((props, ref) => {
   } = props;
   const theme = material.useTheme();
   const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const val = _19.get(values, name);
+  const fieldError = _.get(errors, name);
+  const isTouched = _.get(touched, name);
+  const val = _.get(values, name);
   const handleChange = (value) => {
     setFieldValue(name, value);
     if (externalOnChange) {
@@ -406,8 +402,8 @@ function AppFormErrorMessage({
   textSx
 }) {
   const { errors, touched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   const showError = fieldError && typeof fieldError === "string";
   if (alwaysShow) {
     return showError ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -484,9 +480,9 @@ var AppTextArea = react.forwardRef(({
 }, ref) => {
   var _a, _b, _c, _d;
   const { errors, getFieldProps, touched, setFieldValue } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const value = ___default.default.get(getFieldProps(name), "value", "");
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (maxLength && newValue.length > maxLength)
@@ -640,9 +636,9 @@ function AppTagsCreator({
   inputSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const val = ___default.default.get(values, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.FormControl,
     {
@@ -765,8 +761,8 @@ function AppSwitchInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
@@ -855,9 +851,9 @@ function AppSwitch({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  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 fieldValue = ___default.default.get(values, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Stack,
     {
@@ -945,6 +941,8 @@ function AppAutoComplete({
   variant = "outlined",
   label,
   options = [],
+  value: propValue,
+  onChange: propOnChange,
   sx,
   formControlSx,
   textFieldSx,
@@ -952,9 +950,10 @@ function AppAutoComplete({
   errorSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const formikValue = ___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(
       material.Autocomplete,
@@ -964,10 +963,23 @@ function AppAutoComplete({
         id: "tags-filled",
         options,
         freeSolo: true,
-        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index, sx: chipSx })),
+        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(
+          material.Chip,
+          {
+            variant: "outlined",
+            label: option,
+            ...getTagProps({ index }),
+            key: index,
+            sx: chipSx
+          }
+        )),
         value: val,
-        onChange: (event, newValue) => {
-          setFieldValue(name, newValue, true);
+        onChange: (event, newValue, reason, details) => {
+          if (propOnChange) {
+            propOnChange(event, newValue, reason, details);
+          } else {
+            setFieldValue(name, newValue, true);
+          }
         },
         renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
           material.TextField,
@@ -1012,9 +1024,9 @@ function AppAutoCompleter({
   errorSx
 }) {
   const { errors, touched, values, setFieldValue } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const value = ___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(
@@ -1077,14 +1089,23 @@ var AppCheckBox = ({
   ...rest
 }) => {
   const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   material.useTheme();
   const value = getFieldProps(name).value;
-  const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
-  const handleChange = (itemName, isChecked) => {
-    const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
-    setFieldValue(name, option.length === 1 ? isChecked : newValue);
+  const checkedValues = (() => {
+    if (Array.isArray(value)) {
+      return value.map(String);
+    }
+    return value ? [String(value)] : [];
+  })();
+  const handleChange = (itemValue, isChecked) => {
+    if (option.length === 1) {
+      setFieldValue(name, isChecked ? itemValue : false);
+    } else {
+      const newValue = isChecked ? [...checkedValues, String(itemValue)] : checkedValues.filter((v) => v !== String(itemValue));
+      setFieldValue(name, newValue);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
@@ -1153,11 +1174,9 @@ var AppCheckBox = ({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     material.Checkbox,
                     {
-                      ...getFieldProps(name),
-                      name,
-                      value: item.name,
-                      checked: checkedNames.includes(item.name),
-                      onChange: (e) => handleChange(item.name, e.target.checked),
+                      name: `${name}.${item.name}`,
+                      checked: option.length === 1 ? getFieldProps(name).value === item.value : checkedValues.includes(String(item.value)),
+                      onChange: (e) => handleChange(item.value, e.target.checked),
                       disabled: disabled || item.disabled,
                       sx: [{
                         color: "primary.main",
@@ -1234,8 +1253,8 @@ function AppInputField({
   ...otherProps
 }) {
   const { errors, getFieldProps, touched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   const [showPassword, setShowPassword] = react.useState(false);
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
@@ -1326,9 +1345,9 @@ var AppMultiSelector = react.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-    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 fieldError = ___default.default.get(errors, name);
+    const isTouched = ___default.default.get(touched, name);
+    const val = ___default.default.get(values, name);
     const selectedValues = Array.isArray(val) ? val : [];
     const handleChange = (event, child) => {
       const newValue = event.target.value;
@@ -1586,8 +1605,8 @@ var AppPhoneNoInput = ({
   ...otherProps
 }) => {
   const { values, errors, touched, setFieldValue, getFieldProps } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       material.Typography,
@@ -1671,9 +1690,9 @@ var AppRadioGroup = react.forwardRef(({
   ...rest
 }, ref) => {
   const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const value = ___default.default.get(getFieldProps(name), "value");
   const handleChange = (event) => {
     const newValue = event.target.value;
     setFieldValue(name, newValue);
@@ -1851,9 +1870,9 @@ var AppRating = react.forwardRef(({
 }, ref) => {
   material.useTheme();
   const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
-  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 val = ___default.default.get(values, name);
+  const fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
   const hasError = Boolean(fieldError) && isTouched;
   const handleChange = (event, newValue) => {
     setFieldValue(name, newValue);
@@ -3534,7 +3553,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((m2) => m2.type.name)}`);
+      throw new RangeError(`Invalid collection of marks for node ${this.type.name}: ${this.marks.map((m) => m.type.name)}`);
     this.content.forEach((node) => node.check());
   }
   /**
@@ -3783,17 +3802,17 @@ var ContentMatch = class {
   */
   toString() {
     let seen = [];
-    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);
+    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);
     }
     scan(this);
-    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 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 out;
     }).join("\n");
   }
@@ -4674,13 +4693,13 @@ var NodeContext = class {
   }
   finish(openEnd) {
     if (!(this.options & OPT_PRESERVE_WS)) {
-      let last = this.content[this.content.length - 1], m2;
-      if (last && last.isText && (m2 = /[ \t\r\n\u000c]+$/.exec(last.text))) {
+      let last = this.content[this.content.length - 1], m;
+      if (last && last.isText && (m = /[ \t\r\n\u000c]+$/.exec(last.text))) {
         let text = last;
-        if (last.text.length == m2[0].length)
+        if (last.text.length == m[0].length)
           this.content.pop();
         else
-          this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
+          this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m[0].length));
       }
     }
     let content = Fragment2.from(this.content);
@@ -4832,7 +4851,7 @@ var ParseContext = class {
             if (rule.ignore)
               return null;
             if (rule.clearMark)
-              marks = marks.filter((m2) => !rule.clearMark(m2));
+              marks = marks.filter((m) => !rule.clearMark(m));
             else
               marks = marks.concat(this.parser.schema.marks[rule.mark].create(rule.attrs));
             if (rule.consuming === false)
@@ -4938,9 +4957,9 @@ var ParseContext = class {
       if (top.match)
         top.match = top.match.matchType(node.type);
       let nodeMarks = Mark.none;
-      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);
+      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);
       top.content.push(node.mark(nodeMarks));
       return true;
     }
@@ -4963,9 +4982,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((m2) => {
-      if (top.type ? top.type.allowsMarkType(m2.type) : markMayApply(m2.type, type)) {
-        applyMarks = m2.addToSet(applyMarks);
+    marks = marks.filter((m) => {
+      if (top.type ? top.type.allowsMarkType(m.type) : markMayApply(m.type, type)) {
+        applyMarks = m.addToSet(applyMarks);
         return false;
       }
       return true;
@@ -5353,10 +5372,10 @@ var Mapping = class {
   /**
   @internal
   */
-  setMirror(n, m2) {
+  setMirror(n, m) {
     if (!this.mirror)
       this.mirror = [];
-    this.mirror.push(n, m2);
+    this.mirror.push(n, m);
   }
   /**
   Append the inverse of the given mapping to this one.
@@ -5898,9 +5917,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 m2 = matched[j];
-          if (m2.step == step - 1 && style.eq(matched[j].style))
-            found2 = m2;
+          let m = matched[j];
+          if (m.step == step - 1 && style.eq(matched[j].style))
+            found2 = m;
         }
         if (found2) {
           found2.to = end;
@@ -5911,7 +5930,7 @@ function removeMark(tr, from, to, mark) {
       }
     }
   });
-  matched.forEach((m2) => tr.step(new RemoveMarkStep(m2.from, m2.to, m2.style)));
+  matched.forEach((m) => tr.step(new RemoveMarkStep(m.from, m.to, m.style)));
 }
 function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch, clearNewlines = true) {
   let node = tr.doc.nodeAt(pos);
@@ -5927,11 +5946,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 m2, newline = /\r?\n|\r/g, slice;
-        while (m2 = newline.exec(child.text)) {
+        let m, newline = /\r?\n|\r/g, slice;
+        while (m = 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 + m2.index, cur + m2.index + m2[0].length, slice));
+          replSteps.push(new ReplaceStep(cur + m.index, cur + m.index + m[0].length, slice));
         }
       }
     }
@@ -6063,9 +6082,9 @@ function setBlockType(tr, from, to, type, attrs) {
 function replaceNewlines(tr, node, pos, mapFrom) {
   node.forEach((child, offset) => {
     if (child.isText) {
-      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);
+      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);
         tr.replaceWith(start, start + 1, node.type.schema.linebreakReplacement.create());
       }
     }
@@ -10131,11 +10150,11 @@ var Mark2 = class _Mark extends Extendable {
     const isAtEnd = currentPos.pos === currentPos.end();
     if (isAtEnd) {
       const currentMarks = currentPos.marks();
-      const isInMark = !!currentMarks.find((m2) => (m2 == null ? void 0 : m2.type.name) === mark.name);
+      const isInMark = !!currentMarks.find((m) => (m == null ? void 0 : m.type.name) === mark.name);
       if (!isInMark) {
         return false;
       }
-      const removeMark2 = currentMarks.find((m2) => (m2 == null ? void 0 : m2.type.name) === mark.name);
+      const removeMark2 = currentMarks.find((m) => (m == null ? void 0 : m.type.name) === mark.name);
       if (removeMark2) {
         tr.removeStoredMark(removeMark2);
       }
@@ -11163,12 +11182,14 @@ var AppRichTextEditor = ({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             children: msg
           }
         )
@@ -11178,167 +11199,173 @@ var AppRichTextEditor = ({
       material.Typography,
       {
         variant: "button",
-        sx: [{
-          color: "text.primary",
-          mb: 1,
-          display: "block",
-          ...labelSx
-        }],
+        sx: [
+          {
+            color: "text.primary",
+            mb: 1,
+            display: "block",
+            ...labelSx
+          }
+        ],
         children: [
           label,
           required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
-      mb: 1,
-      display: "flex",
-      gap: 1,
-      flexWrap: "wrap",
-      p: 1,
-      bgcolor: "background.paper",
-      borderRadius: 1,
-      border: "1px solid",
-      borderColor: "divider",
-      ...toolbarSx
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBold().run(),
-          color: editor.isActive("bold") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bold") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleItalic().run(),
-          color: editor.isActive("italic") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("italic") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleUnderline().run(),
-          color: editor.isActive("underline") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("underline") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Strike", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleStrike().run(),
-          color: editor.isActive("strike") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("strike") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBulletList().run(),
-          color: editor.isActive("bulletList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bulletList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleOrderedList().run(),
-          color: editor.isActive("orderedList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("orderedList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("left").run(),
-          color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("center").run(),
-          color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("right").run(),
-          color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-          color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-          color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {})
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          mb: 1,
+          display: "flex",
+          gap: 1,
+          flexWrap: "wrap",
+          p: 1,
+          bgcolor: "background.paper",
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: "divider",
+          ...toolbarSx
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBold().run(),
+              color: editor.isActive("bold") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bold") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              color: editor.isActive("italic") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("italic") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleUnderline().run(),
+              color: editor.isActive("underline") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("underline") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Strike", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              color: editor.isActive("strike") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("strike") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              color: editor.isActive("bulletList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bulletList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              color: editor.isActive("orderedList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("orderedList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {}) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
@@ -11531,10 +11558,10 @@ var AppSearchableMultiSelector = react.forwardRef(
   }, ref) => {
     material.useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = Boolean(_19__default.default.get(touched, name));
+    const fieldError = ___default.default.get(errors, name);
+    const isTouched = Boolean(___default.default.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const val = _19__default.default.get(values, name);
+    const val = ___default.default.get(values, name);
     const selectedValues = Array.isArray(val) ? val : [];
     const selectedCount = selectedValues.length;
     const handleChange = (event, value, reason, details) => {
@@ -11910,9 +11937,9 @@ function AppSearchableSelectInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  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 fieldError = ___default.default.get(errors, name);
+  const isTouched = ___default.default.get(touched, name);
+  const val = ___default.default.get(values, name);
   const selectedOption = options.find((option) => option.value === val) || null;
   const handleChange = (event, newValue) => {
     setFieldValue(name, newValue ? newValue.value : "");
@@ -12038,10 +12065,10 @@ var AppSelectInput = react.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = _19__default.default.get(touched, name);
+    const fieldError = ___default.default.get(errors, name);
+    const isTouched = ___default.default.get(touched, name);
     const hasError = Boolean(fieldError) && isTouched;
-    const value = _19__default.default.get(values, name);
+    const value = ___default.default.get(values, name);
     const handleChange = (event, child) => {
       setFieldValue(name, event.target.value, true);
       if (externalOnChange) {
@@ -12283,8 +12310,8 @@ var AppSimpleUploadFile = ({
   onError
 }) => {
   const { setFieldValue, values, errors, touched } = formik.useFormikContext();
-  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 fieldValue = ___default.default.get(values, name);
+  const fieldError = ___default.default.get(touched, name) ? ___default.default.get(errors, name) : void 0;
   const handleChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0)
@@ -12405,1545 +12432,241 @@ var AppSimpleUploadFile = ({
   ] });
 };
 var AppSimpleUploadFile_default = AppSimpleUploadFile;
-
-// 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,
+var AppUploadFile = ({
+  name,
+  label,
+  multiple = false,
+  accept = "image/*",
+  maxFiles = 5,
+  maxSize = 5 * 1024 * 1024,
+  // 5MB
+  disabled = false,
   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
-      }
+  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 };
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
-    {
-      component: "img",
-      src: fileThumb(format),
-      sx: {
-        width: 32,
-        height: 32,
-        flexShrink: 0,
-        ...sx
+    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
+    ]
   );
-  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);
-      })
+  const handleRemove = (index) => {
+    if (disabled)
+      return;
+    if (multiple) {
+      const updatedFiles = [...currentFiles || []];
+      updatedFiles.splice(index, 1);
+      setFieldValue(name, updatedFiles, true);
+    } else {
+      setFieldValue(name, null, true);
     }
-  );
-}
-
-// 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,
-  error,
-  helperText,
-  //
-  file,
-  onDelete,
-  //
-  files,
-  thumbnail,
-  onUpload,
-  onRemove,
-  onRemoveAll,
-  sx,
-  ...other
-}) {
-  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = reactDropzone.useDropzone({
+    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,
     multiple,
-    disabled,
-    ...other
+    disabled: disabled || isMaxFilesReached,
+    onDragEnter: () => setIsDragging(true),
+    onDragLeave: () => setIsDragging(false),
+    onDropAccepted: () => setIsDragging(false)
   });
-  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(
-      StyledDropZone,
+  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,
       {
-        ...getRootProps(),
-        sx: {
-          ...isDragActive && {
-            opacity: 0.72
-          },
-          ...isError && {
-            color: "error.main",
-            bgcolor: "error.lighter",
-            borderColor: "error.light"
-          },
-          ...disabled && {
-            opacity: 0.48,
-            pointerEvents: "none"
+        sx: [
+          {
+            position: "relative",
+            p: 1,
+            borderRadius: 1,
+            overflow: "hidden",
+            border: "1px solid",
+            borderColor: "divider",
+            "&:hover .file-actions": {
+              opacity: 1
+            }
           },
-          ...hasFile && {
-            padding: "12% 0"
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          ...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(
-            Placeholder,
+            material.Box,
             {
-              sx: {
-                ...hasFile && {
-                  opacity: 0
+              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" })
                 }
-              }
+              ) })
             }
-          ),
-          hasFile && /* @__PURE__ */ jsxRuntime.jsx(SingleFilePreview, { file })
-        ]
-      }
-    ),
-    helperText && helperText,
-    /* @__PURE__ */ jsxRuntime.jsx(RejectionFiles, { fileRejections }),
-    hasFile && onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-      material.IconButton,
-      {
-        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, { 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,
-  sx,
-  uploadSx,
-  errorSx,
-  helperTextSx,
-  previewSx,
-  dropZoneSx,
-  ...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;
+      },
+      index
+    );
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Upload,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
       {
-        ...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),
-        sx: [{
-          "& .MuiDropzoneArea-root": {
-            minHeight: 200,
+        ...getRootProps(),
+        sx: [
+          {
+            p: 3,
             border: "2px dashed",
-            borderColor: "divider",
             borderRadius: 1,
-            "&:hover": {
+            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",
-              backgroundColor: "action.hover"
-            },
-            ...dropZoneSx
-          },
-          "& .MuiDropzonePreviewList-root": {
-            ...previewSx
-          },
-          ...uploadSx
-        }],
-        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);
+              bgcolor: "action.hover"
             }
-          })();
-        },
-        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);
+          },
+          ...Array.isArray(dropZoneSx) ? dropZoneSx : [dropZoneSx]
+        ],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Stack,
+            {
+              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"
+                ] })
+              ]
             }
-            return !_19__default.default.isEqual(e, file);
-          });
-          setFieldValue(name, afterFilter, true);
-        }
+          )
+        ]
       }
     ),
-    Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(
+    ((_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,
       {
         variant: "caption",
-        sx: [{
-          color: "error.main",
-          display: "block",
-          mt: 0.5,
-          ...errorSx
-        }],
-        gutterBottom: true,
+        sx: [
+          {
+            display: "block",
+            color: "error.main",
+            mt: 1
+          },
+          ...Array.isArray(errorSx) ? errorSx : [errorSx]
+        ],
         children: fieldError
       }
     ),
-    rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       material.Typography,
       {
         variant: "caption",
-        sx: [{
-          display: "block",
-          color: "text.secondary",
-          mt: 0.5,
-          ...helperTextSx
-        }],
-        gutterBottom: true,
+        sx: [
+          {
+            display: "block",
+            color: "text.secondary",
+            mt: 0.5
+          },
+          ...Array.isArray(helperTextSx) ? helperTextSx : [helperTextSx]
+        ],
         children: [
-          "Maximum ",
-          rest.maxFiles,
-          " file",
-          rest.maxFiles !== 1 ? "s" : "",
-          " allowed"
+          (currentFiles == null ? void 0 : currentFiles.length) || 0,
+          " of ",
+          maxFiles,
+          " files selected"
         ]
       }
     )