@cubone/react-file-manager 1.13.2 → 1.15.0

package/dist/react-file-manager.es.js

@@ -1,40 +1,40 @@
 import { jsx as e, jsxs as g, Fragment as se } from "react/jsx-runtime";
-import at from "react-loading";
-import { useState as b, useRef as re, useEffect as K, createContext as ve, useContext as ge, useMemo as lt } from "react";
-import { BsGridFill as ct, BsScissors as dt, BsCopy as ut, BsFolderPlus as ft, BsGrid as Be } from "react-icons/bs";
+import lt from "react-loading";
+import Lt, { useState as b, useRef as re, useEffect as V, createContext as ve, useContext as ge, useMemo as $e } from "react";
+import { BsGridFill as ct, BsScissors as dt, BsCopy as ut, BsFolderPlus as ft, BsGrid as Ue } from "react-icons/bs";
 import { FiRefreshCw as ht } from "react-icons/fi";
-import { MdOutlineFileDownload as $e, MdOutlineDelete as pt, MdClear as Lt, MdOutlineFileUpload as mt, MdKeyboardArrowRight as It, MdHome as At, MdOutlineNavigateNext as $t, MdMoreHoriz as jt, MdClose as zt } from "react-icons/md";
-import { BiRename as vt, BiSelectMultiple as Wt } from "react-icons/bi";
-import { FaCheck as gt, FaListUl as we, FaRegPaste as Ie, FaRegFilePdf as Bt, FaRegFileImage as Ee, FaRegFileLines as Ut, FaRegFileWord as Ue, FaRegFileVideo as qe, FaRegFileAudio as He, FaRegFileZipper as qt, FaRegFilePowerpoint as _e, FaRegFileExcel as Ke, FaLaptopFile as Ht, FaRegFileCode as J, FaRegFolderOpen as Ye, FaRegFile as be, FaChevronRight as _t } from "react-icons/fa6";
-import Kt from "react-collapsible";
-import { FaRegFolderOpen as Ve, FaRegFolder as Xe, FaRegCheckCircle as Yt, FaRegFileAlt as Vt } from "react-icons/fa";
-import { IoWarningOutline as Xt } from "react-icons/io5";
-import { PiFolderOpen as Gt } from "react-icons/pi";
-import { AiOutlineClose as Jt, AiOutlineCloudUpload as Zt } from "react-icons/ai";
-import { IoMdRefresh as Qt } from "react-icons/io";
+import { MdOutlineFileDownload as je, MdOutlineDelete as pt, MdClear as It, MdOutlineFileUpload as mt, MdKeyboardArrowRight as At, MdHome as $t, MdOutlineNavigateNext as jt, MdMoreHoriz as zt, MdClose as Wt } from "react-icons/md";
+import { BiRename as vt, BiSelectMultiple as Bt } from "react-icons/bi";
+import { FaCheck as gt, FaListUl as we, FaRegPaste as Ie, FaRegFilePdf as Ut, FaRegFileImage as Ee, FaRegFileLines as qt, FaRegFileWord as qe, FaRegFileVideo as He, FaRegFileAudio as _e, FaRegFileZipper as Ht, FaRegFilePowerpoint as Ke, FaRegFileExcel as Ye, FaLaptopFile as _t, FaRegFileCode as J, FaRegFolderOpen as Ve, FaRegFile as be, FaChevronRight as Kt } from "react-icons/fa6";
+import Yt from "react-collapsible";
+import { FaRegFolderOpen as Xe, FaRegFolder as Ge, FaRegCheckCircle as Vt, FaRegFileAlt as Xt } from "react-icons/fa";
+import { IoWarningOutline as Gt } from "react-icons/io5";
+import { PiFolderOpen as Jt } from "react-icons/pi";
+import { AiOutlineClose as Zt, AiOutlineCloudUpload as Qt } from "react-icons/ai";
+import { IoMdRefresh as en } from "react-icons/io";
 import yt from "react-is";
 const Ct = ({ isLoading: t }) => {
   if (t)
-    return /* @__PURE__ */ e("div", { className: "fm-loader", children: /* @__PURE__ */ e(at, { color: "black", type: "spokes", height: 50, width: 50 }) });
+    return /* @__PURE__ */ e("div", { className: "fm-loader", children: /* @__PURE__ */ e(lt, { color: "black", type: "spokes", height: 50, width: 50 }) });
 }, ye = (t = () => {
 }) => {
-  const [n, s] = b(!1), r = re(null), o = (i) => {
-    var a;
-    (a = r.current) != null && a.contains(i.target) ? s(!1) : (s(!0), t(i, r));
+  const [n, s] = b(!1), r = re(null), o = (a) => {
+    var i;
+    (i = r.current) != null && i.contains(a.target) ? s(!1) : (s(!0), t(a, r));
   };
-  return K(() => (document.addEventListener("click", o, !0), document.addEventListener("mousedown", o, !0), () => {
+  return V(() => (document.addEventListener("click", o, !0), document.addEventListener("mousedown", o, !0), () => {
     document.removeEventListener("click", o, !0), document.removeEventListener("mousedown", o, !0);
   }), []), { ref: r, isClicked: n, setIsClicked: s };
-}, wt = ve(), en = ({ children: t, layout: n }) => {
+}, wt = ve(), tn = ({ children: t, layout: n }) => {
   const [s, r] = b(() => o(n));
-  function o(i) {
-    return ["list", "grid"].includes(i) ? i : "grid";
+  function o(a) {
+    return ["list", "grid"].includes(a) ? a : "grid";
   }
   return /* @__PURE__ */ e(wt.Provider, { value: { activeLayout: s, setActiveLayout: r }, children: t });
-}, ce = () => ge(wt), tn = ({ setShowToggleViewMenu: t, onLayoutChange: n }) => {
+}, ce = () => ge(wt), nn = ({ setShowToggleViewMenu: t, onLayoutChange: n }) => {
   const s = ye(() => {
     t(!1);
-  }), { activeLayout: r, setActiveLayout: o } = ce(), i = [
+  }), { activeLayout: r, setActiveLayout: o } = ce(), a = [
     {
       key: "grid",
       name: "Grid",
@@ -45,15 +45,15 @@ const Ct = ({ isLoading: t }) => {
       name: "List",
       icon: /* @__PURE__ */ e(we, { size: 18 })
     }
-  ], a = (l) => {
+  ], i = (l) => {
     o(l), n(l), t(!1);
   };
-  return /* @__PURE__ */ e("div", { ref: s.ref, className: "toggle-view", role: "dropdown", children: /* @__PURE__ */ e("ul", { role: "menu", "aria-orientation": "vertical", children: i.map((l) => /* @__PURE__ */ g(
+  return /* @__PURE__ */ e("div", { ref: s.ref, className: "toggle-view", role: "dropdown", children: /* @__PURE__ */ e("ul", { role: "menu", "aria-orientation": "vertical", children: a.map((l) => /* @__PURE__ */ g(
     "li",
     {
       role: "menuitem",
-      onClick: () => a(l.key),
-      onKeyDown: () => a(l.key),
+      onClick: () => i(l.key),
+      onKeyDown: () => i(l.key),
       children: [
         /* @__PURE__ */ e("span", { children: l.key === r && /* @__PURE__ */ e(gt, { size: 13 }) }),
         /* @__PURE__ */ e("span", { children: l.icon }),
@@ -62,29 +62,29 @@ const Ct = ({ isLoading: t }) => {
     },
     l.key
   )) }) });
-}, bt = ve(), nn = ({ children: t, filesData: n, onError: s }) => {
+}, bt = ve(), rn = ({ children: t, filesData: n, onError: s }) => {
   const [r, o] = b([]);
-  K(() => {
+  V(() => {
     o(n);
   }, [n]);
-  const i = (a) => a.isDirectory ? r.filter((l) => l.path === `${a.path}/${l.name}`) : [];
-  return /* @__PURE__ */ e(bt.Provider, { value: { files: r, setFiles: o, getChildren: i, onError: s }, children: t });
-}, ke = () => ge(bt), Ft = ve(), rn = ({ children: t, initialPath: n }) => {
-  const { files: s } = ke(), r = re(!1), [o, i] = b(""), [a, l] = b(null), [c, f] = b([]);
-  return K(() => {
-    Array.isArray(s) && s.length > 0 && (f(() => s.filter((h) => h.path === `${o}/${h.name}`)), l(() => s.find((h) => h.path === o) ?? null));
-  }, [s, o]), K(() => {
-    !r.current && Array.isArray(s) && s.length > 0 && (i(s.some((h) => h.path === n) ? n : ""), r.current = !0);
+  const a = (i) => i.isDirectory ? r.filter((l) => l.path === `${i.path}/${l.name}`) : [];
+  return /* @__PURE__ */ e(bt.Provider, { value: { files: r, setFiles: o, getChildren: a, onError: s }, children: t });
+}, ke = () => ge(bt), Ft = ve(), sn = ({ children: t, initialPath: n }) => {
+  const { files: s } = ke(), r = re(!1), [o, a] = b(""), [i, l] = b(null), [c, u] = b([]);
+  return V(() => {
+    Array.isArray(s) && s.length > 0 && (u(() => s.filter((h) => h.path === `${o}/${h.name}`)), l(() => s.find((h) => h.path === o) ?? null));
+  }, [s, o]), V(() => {
+    !r.current && Array.isArray(s) && s.length > 0 && (a(s.some((h) => h.path === n) ? n : ""), r.current = !0);
   }, [n, s]), /* @__PURE__ */ e(
     Ft.Provider,
     {
       value: {
         currentPath: o,
-        setCurrentPath: i,
-        currentFolder: a,
+        setCurrentPath: a,
+        currentFolder: i,
         setCurrentFolder: l,
         currentPathFiles: c,
-        setCurrentPathFiles: f
+        setCurrentPathFiles: u
       },
       children: t
     }
@@ -100,24 +100,24 @@ const Ct = ({ isLoading: t }) => {
   } catch (r) {
     console.error(r.message);
   }
-}, kt = ve(), sn = ({ children: t, onDownload: n }) => {
+}, kt = ve(), on = ({ children: t, onDownload: n }) => {
   const [s, r] = b([]), o = () => {
     fe(n, "onDownload", s);
   };
   return /* @__PURE__ */ e(kt.Provider, { value: { selectedFiles: s, setSelectedFiles: r, handleDownload: o }, children: t });
-}, le = () => ge(kt), Nt = ve(), on = ({ children: t, onPaste: n }) => {
-  const [s, r] = b(null), { selectedFiles: o, setSelectedFiles: i } = le(), a = (c) => {
+}, le = () => ge(kt), Nt = ve(), an = ({ children: t, onPaste: n }) => {
+  const [s, r] = b(null), { selectedFiles: o, setSelectedFiles: a } = le(), i = (c) => {
     r({
       files: o,
       isMoving: c
     });
   }, l = (c) => {
     if (c && !c.isDirectory) return;
-    const f = s.files, h = s.isMoving ? "move" : "copy";
-    fe(n, "onPaste", f, c, h), s.isMoving && r(null), i([]);
+    const u = s.files, h = s.isMoving ? "move" : "copy";
+    fe(n, "onPaste", u, c, h), s.isMoving && r(null), a([]);
   };
-  return /* @__PURE__ */ e(Nt.Provider, { value: { clipBoard: s, setClipBoard: r, handleCutCopy: a, handlePasting: l }, children: t });
-}, Ne = () => ge(Nt), an = ({
+  return /* @__PURE__ */ e(Nt.Provider, { value: { clipBoard: s, setClipBoard: r, handleCutCopy: i, handlePasting: l }, children: t });
+}, Ne = () => ge(Nt), ln = ({
   allowCreateFolder: t = !0,
   allowUploadFile: n = !0,
   onLayoutChange: s,
@@ -125,7 +125,7 @@ const Ct = ({ isLoading: t }) => {
   triggerAction: o
 }) => {
   var N;
-  const [i, a] = b(!1), { currentFolder: l } = oe(), { selectedFiles: c, setSelectedFiles: f, handleDownload: h } = le(), { clipBoard: u, setClipBoard: w, handleCutCopy: x, handlePasting: S } = Ne(), { activeLayout: D } = ce(), M = [
+  const [a, i] = b(!1), { currentFolder: l } = oe(), { selectedFiles: c, setSelectedFiles: u, handleDownload: h } = le(), { clipBoard: f, setClipBoard: w, handleCutCopy: T, handlePasting: R } = Ne(), { activeLayout: O } = ce(), M = [
     {
       icon: /* @__PURE__ */ e(ft, { size: 17, strokeWidth: 0.3 }),
       text: "New folder",
@@ -141,14 +141,14 @@ const Ct = ({ isLoading: t }) => {
     {
       icon: /* @__PURE__ */ e(Ie, { size: 18 }),
       text: "Paste",
-      permission: !!u,
-      onClick: P
+      permission: !!f,
+      onClick: E
     }
   ], C = [
     {
-      icon: D === "grid" ? /* @__PURE__ */ e(ct, { size: 16 }) : /* @__PURE__ */ e(we, { size: 16 }),
+      icon: O === "grid" ? /* @__PURE__ */ e(ct, { size: 16 }) : /* @__PURE__ */ e(we, { size: 16 }),
       title: "Change View",
-      onClick: () => a((m) => !m)
+      onClick: () => i((m) => !m)
     },
     {
       icon: /* @__PURE__ */ e(ht, { size: 16 }),
@@ -158,27 +158,27 @@ const Ct = ({ isLoading: t }) => {
       }
     }
   ];
-  function P() {
-    S(l);
+  function E() {
+    R(l);
   }
   const F = () => {
-    h(), f([]);
+    h(), u([]);
   };
   return c.length > 0 ? /* @__PURE__ */ e("div", { className: "toolbar file-selected", children: /* @__PURE__ */ g("div", { className: "file-action-container", children: [
     /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ g("button", { className: "item-action file-action", onClick: () => x(!0), children: [
+      /* @__PURE__ */ g("button", { className: "item-action file-action", onClick: () => T(!0), children: [
         /* @__PURE__ */ e(dt, { size: 18 }),
         /* @__PURE__ */ e("span", { children: "Cut" })
       ] }),
-      /* @__PURE__ */ g("button", { className: "item-action file-action", onClick: () => x(!1), children: [
+      /* @__PURE__ */ g("button", { className: "item-action file-action", onClick: () => T(!1), children: [
         /* @__PURE__ */ e(ut, { strokeWidth: 0.1, size: 17 }),
         /* @__PURE__ */ e("span", { children: "Copy" })
       ] }),
-      ((N = u == null ? void 0 : u.files) == null ? void 0 : N.length) > 0 && /* @__PURE__ */ g(
+      ((N = f == null ? void 0 : f.files) == null ? void 0 : N.length) > 0 && /* @__PURE__ */ g(
         "button",
         {
           className: "item-action file-action",
-          onClick: P,
+          onClick: E,
           children: [
             /* @__PURE__ */ e(Ie, { size: 18 }),
             /* @__PURE__ */ e("span", { children: "Paste" })
@@ -197,7 +197,7 @@ const Ct = ({ isLoading: t }) => {
         }
       ),
       !c.isDirectory && /* @__PURE__ */ g("button", { className: "item-action file-action", onClick: F, children: [
-        /* @__PURE__ */ e($e, { size: 19 }),
+        /* @__PURE__ */ e(je, { size: 19 }),
         /* @__PURE__ */ e("span", { children: "Download" })
       ] }),
       /* @__PURE__ */ g(
@@ -217,7 +217,7 @@ const Ct = ({ isLoading: t }) => {
       {
         className: "item-action file-action",
         title: "Clear selection",
-        onClick: () => f([]),
+        onClick: () => u([]),
         children: [
           /* @__PURE__ */ g("span", { children: [
             c.length,
@@ -225,7 +225,7 @@ const Ct = ({ isLoading: t }) => {
             c.length > 1 && "s",
             " selected"
           ] }),
-          /* @__PURE__ */ e(Lt, { size: 18 })
+          /* @__PURE__ */ e(It, { size: 18 })
         ]
       }
     )
@@ -239,26 +239,26 @@ const Ct = ({ isLoading: t }) => {
         /* @__PURE__ */ e("button", { className: "item-action icon-only", title: m.title, onClick: m.onClick, children: m.icon }),
         p !== C.length - 1 && /* @__PURE__ */ e("div", { className: "item-separator" })
       ] }, p)),
-      i && /* @__PURE__ */ e(
-        tn,
+      a && /* @__PURE__ */ e(
+        nn,
         {
-          setShowToggleViewMenu: a,
+          setShowToggleViewMenu: i,
           onLayoutChange: s
         }
       )
     ] })
   ] }) });
 }, Pt = ({ folder: t }) => {
-  const [n, s] = b(!1), [r, o] = b(!1), { currentPath: i, setCurrentPath: a } = oe(), l = () => {
-    o(!0), a(t.path);
-  }, c = (f) => {
-    f.stopPropagation(), s((h) => !h);
+  const [n, s] = b(!1), [r, o] = b(!1), { currentPath: a, setCurrentPath: i } = oe(), l = () => {
+    o(!0), i(t.path);
+  }, c = (u) => {
+    u.stopPropagation(), s((h) => !h);
   };
-  return K(() => {
-    o(i === t.path);
-    const f = i.split("/");
-    f.pop(), f.join("/") === t.path && s(!0);
-  }, [i]), t.subDirectories.length > 0 ? /* @__PURE__ */ g(se, { children: [
+  return V(() => {
+    o(a === t.path);
+    const u = a.split("/");
+    u.pop(), u.join("/") === t.path && s(!0);
+  }, [a]), t.subDirectories.length > 0 ? /* @__PURE__ */ g(se, { children: [
     /* @__PURE__ */ g(
       "div",
       {
@@ -266,20 +266,20 @@ const Ct = ({ isLoading: t }) => {
         onClick: l,
         children: [
           /* @__PURE__ */ e("span", { onClick: c, children: /* @__PURE__ */ e(
-            It,
+            At,
             {
               size: 20,
               className: `${n ? "folder-rotate-down" : "folder-rotate-right"}`
             }
           ) }),
           /* @__PURE__ */ g("div", { className: "sb-folder-details", children: [
-            n || r ? /* @__PURE__ */ e(Ve, { size: 20, className: "folder-open-icon" }) : /* @__PURE__ */ e(Xe, { size: 17, className: "folder-close-icon" }),
+            n || r ? /* @__PURE__ */ e(Xe, { size: 20, className: "folder-open-icon" }) : /* @__PURE__ */ e(Ge, { size: 17, className: "folder-close-icon" }),
             /* @__PURE__ */ e("span", { className: "sb-folder-name", title: t.name, children: t.name })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ e(Kt, { open: n, children: /* @__PURE__ */ e("div", { className: "folder-collapsible", children: t.subDirectories.map((f, h) => /* @__PURE__ */ e(Pt, { folder: f }, h)) }) })
+    /* @__PURE__ */ e(Yt, { open: n, children: /* @__PURE__ */ e("div", { className: "folder-collapsible", children: t.subDirectories.map((u, h) => /* @__PURE__ */ e(Pt, { folder: u }, h)) }) })
   ] }) : /* @__PURE__ */ g(
     "div",
     {
@@ -288,69 +288,69 @@ const Ct = ({ isLoading: t }) => {
       children: [
         /* @__PURE__ */ e("span", { className: "non-expanable" }),
         /* @__PURE__ */ g("div", { className: "sb-folder-details", children: [
-          r ? /* @__PURE__ */ e(Ve, { size: 20, className: "folder-open-icon" }) : /* @__PURE__ */ e(Xe, { size: 17, className: "folder-close-icon" }),
+          r ? /* @__PURE__ */ e(Xe, { size: 20, className: "folder-open-icon" }) : /* @__PURE__ */ e(Ge, { size: 17, className: "folder-close-icon" }),
           /* @__PURE__ */ e("span", { className: "sb-folder-name", title: t.name, children: t.name })
         ] })
       ]
     }
   );
-}, ln = (t) => t == null ? void 0 : t.split("/").slice(0, -1).join("/"), cn = () => {
-  const [t, n] = b([]), { files: s } = ke(), r = (o, i) => {
-    var a;
-    return i[o] ? (a = i[o]) == null ? void 0 : a.map((l) => ({
+}, cn = (t) => t == null ? void 0 : t.split("/").slice(0, -1).join("/"), dn = () => {
+  const [t, n] = b([]), { files: s } = ke(), r = (o, a) => {
+    var i;
+    return a[o] ? (i = a[o]) == null ? void 0 : i.map((l) => ({
       ...l,
-      subDirectories: r(l.path, i)
+      subDirectories: r(l.path, a)
     })) : [];
   };
-  return K(() => {
+  return V(() => {
     if (Array.isArray(s)) {
-      const o = s.filter((a) => a.isDirectory), i = Object.groupBy(o, ({ path: a }) => ln(a));
-      n(() => r("", i));
+      const o = s.filter((i) => i.isDirectory), a = Object.groupBy(o, ({ path: i }) => cn(i));
+      n(() => r("", a));
     }
-  }, [s]), /* @__PURE__ */ e("div", { className: "sb-folders-list", children: (t == null ? void 0 : t.length) > 0 ? /* @__PURE__ */ e(se, { children: t == null ? void 0 : t.map((o, i) => /* @__PURE__ */ e(Pt, { folder: o }, i)) }) : /* @__PURE__ */ e("div", { className: "empty-nav-pane", children: "Nothing here yet" }) });
-}, dn = () => {
-  const [t, n] = b([]), [s, r] = b([]), [o, i] = b([]), [a, l] = b(!1), { currentPath: c, setCurrentPath: f } = oe(), h = re(null), u = re([]), w = re(null), x = ye(() => {
+  }, [s]), /* @__PURE__ */ e("div", { className: "sb-folders-list", children: (t == null ? void 0 : t.length) > 0 ? /* @__PURE__ */ e(se, { children: t == null ? void 0 : t.map((o, a) => /* @__PURE__ */ e(Pt, { folder: o }, a)) }) : /* @__PURE__ */ e("div", { className: "empty-nav-pane", children: "Nothing here yet" }) });
+}, un = () => {
+  const [t, n] = b([]), [s, r] = b([]), [o, a] = b([]), [i, l] = b(!1), { currentPath: c, setCurrentPath: u } = oe(), h = re(null), f = re([]), w = re(null), T = ye(() => {
     l(!1);
   });
-  K(() => {
+  V(() => {
     n(() => {
-      let P = "";
+      let E = "";
       return c == null ? void 0 : c.split("/").map((F) => ({
         name: F || "Home",
-        path: F === "" ? F : P += `/${F}`
+        path: F === "" ? F : E += `/${F}`
       }));
-    }), r([]), i([]);
+    }), r([]), a([]);
   }, [c]);
-  const S = (P) => {
-    f(P);
-  }, D = () => {
-    const P = h.current.clientWidth, F = getComputedStyle(h.current), N = parseFloat(F.paddingLeft), m = s.length > 0 ? 1 : 0, p = parseFloat(F.gap) * (t.length + m);
-    return P - (N + p);
+  const R = (E) => {
+    u(E);
+  }, O = () => {
+    const E = h.current.clientWidth, F = getComputedStyle(h.current), N = parseFloat(F.paddingLeft), m = s.length > 0 ? 1 : 0, p = parseFloat(F.gap) * (t.length + m);
+    return E - (N + p);
   }, M = () => {
     var m;
-    const P = D(), F = u.current.reduce((p, T) => T ? p + T.clientWidth : p, 0), N = ((m = w.current) == null ? void 0 : m.clientWidth) || 0;
-    return P - (F + N);
+    const E = O(), F = f.current.reduce((p, D) => D ? p + D.clientWidth : p, 0), N = ((m = w.current) == null ? void 0 : m.clientWidth) || 0;
+    return E - (F + N);
   }, C = () => h.current.scrollWidth > h.current.clientWidth;
-  return K(() => {
-    var P;
+  return V(() => {
+    var E;
     if (C()) {
-      const F = t[1], N = (P = u.current[1]) == null ? void 0 : P.clientWidth;
-      i((m) => [...m, N]), r((m) => [...m, F]), n((m) => m.filter((p, T) => T !== 1));
+      const F = t[1], N = (E = f.current[1]) == null ? void 0 : E.clientWidth;
+      a((m) => [...m, N]), r((m) => [...m, F]), n((m) => m.filter((p, D) => D !== 1));
     } else if (s.length > 0 && M() > o.at(-1)) {
       const F = [t[0], s.at(-1), ...t.slice(1)];
-      n(F), r((N) => N.slice(0, -1)), i((N) => N.slice(0, -1));
+      n(F), r((N) => N.slice(0, -1)), a((N) => N.slice(0, -1));
     }
   }, [C]), /* @__PURE__ */ g("div", { className: "bread-crumb-container", children: [
-    /* @__PURE__ */ e("div", { className: "breadcrumb", ref: h, children: t.map((P, F) => /* @__PURE__ */ g("div", { style: { display: "contents" }, children: [
+    /* @__PURE__ */ e("div", { className: "breadcrumb", ref: h, children: t.map((E, F) => /* @__PURE__ */ g("div", { style: { display: "contents" }, children: [
       /* @__PURE__ */ g(
         "span",
         {
           className: "folder-name",
-          onClick: () => S(P.path),
-          ref: (N) => u.current[F] = N,
+          onClick: () => R(E.path),
+          ref: (N) => f.current[F] = N,
           children: [
-            F === 0 ? /* @__PURE__ */ e(At, {}) : /* @__PURE__ */ e($t, {}),
-            P.name
+            F === 0 ? /* @__PURE__ */ e($t, {}) : /* @__PURE__ */ e(jt, {}),
+            E.name
           ]
         }
       ),
@@ -361,39 +361,39 @@ const Ct = ({ isLoading: t }) => {
           onClick: () => l(!0),
           ref: w,
           title: "Show more folders",
-          children: /* @__PURE__ */ e(jt, { size: 22, className: "hidden-folders" })
+          children: /* @__PURE__ */ e(zt, { size: 22, className: "hidden-folders" })
         }
       )
     ] }, F)) }),
-    a && /* @__PURE__ */ e("ul", { ref: x.ref, className: "hidden-folders-container", children: s.map((P, F) => /* @__PURE__ */ e(
+    i && /* @__PURE__ */ e("ul", { ref: T.ref, className: "hidden-folders-container", children: s.map((E, F) => /* @__PURE__ */ e(
       "li",
       {
         onClick: () => {
-          S(P.path), l(!1);
+          R(E.path), l(!1);
         },
-        children: P.name
+        children: E.name
       },
       F
     )) })
   ] });
 }, Fe = (t) => ({
-  pdf: /* @__PURE__ */ e(Bt, { size: t }),
+  pdf: /* @__PURE__ */ e(Ut, { size: t }),
   jpg: /* @__PURE__ */ e(Ee, { size: t }),
   jpeg: /* @__PURE__ */ e(Ee, { size: t }),
   png: /* @__PURE__ */ e(Ee, { size: t }),
-  txt: /* @__PURE__ */ e(Ut, { size: t }),
-  doc: /* @__PURE__ */ e(Ue, { size: t }),
-  docx: /* @__PURE__ */ e(Ue, { size: t }),
-  mp4: /* @__PURE__ */ e(qe, { size: t }),
-  webm: /* @__PURE__ */ e(qe, { size: t }),
-  mp3: /* @__PURE__ */ e(He, { size: t }),
-  m4a: /* @__PURE__ */ e(He, { size: t }),
-  zip: /* @__PURE__ */ e(qt, { size: t }),
-  ppt: /* @__PURE__ */ e(_e, { size: t }),
-  pptx: /* @__PURE__ */ e(_e, { size: t }),
-  xls: /* @__PURE__ */ e(Ke, { size: t }),
-  xlsx: /* @__PURE__ */ e(Ke, { size: t }),
-  exe: /* @__PURE__ */ e(Ht, { size: t }),
+  txt: /* @__PURE__ */ e(qt, { size: t }),
+  doc: /* @__PURE__ */ e(qe, { size: t }),
+  docx: /* @__PURE__ */ e(qe, { size: t }),
+  mp4: /* @__PURE__ */ e(He, { size: t }),
+  webm: /* @__PURE__ */ e(He, { size: t }),
+  mp3: /* @__PURE__ */ e(_e, { size: t }),
+  m4a: /* @__PURE__ */ e(_e, { size: t }),
+  zip: /* @__PURE__ */ e(Ht, { size: t }),
+  ppt: /* @__PURE__ */ e(Ke, { size: t }),
+  pptx: /* @__PURE__ */ e(Ke, { size: t }),
+  xls: /* @__PURE__ */ e(Ye, { size: t }),
+  xlsx: /* @__PURE__ */ e(Ye, { size: t }),
+  exe: /* @__PURE__ */ e(_t, { size: t }),
   html: /* @__PURE__ */ e(J, { size: t }),
   css: /* @__PURE__ */ e(J, { size: t }),
   js: /* @__PURE__ */ e(J, { size: t }),
@@ -414,20 +414,20 @@ const Ct = ({ isLoading: t }) => {
 }), Et = (t, n, s) => {
   if (s.find((r) => r.name === t)) {
     const r = "", o = t;
-    let i = 0;
-    const a = new RegExp(`${o} \\(\\d+\\)`);
-    s.forEach((f) => {
-      const h = f.isDirectory ? f.name : f.name.split(".").slice(0, -1).join(".");
-      if (a.test(h)) {
-        const u = h.split(`${o} (`).pop().slice(0, -1), w = parseInt(u);
-        !isNaN(w) && w > i && (i = w);
+    let a = 0;
+    const i = new RegExp(`${o} \\(\\d+\\)`);
+    s.forEach((u) => {
+      const h = u.isDirectory ? u.name : u.name.split(".").slice(0, -1).join(".");
+      if (i.test(h)) {
+        const f = h.split(`${o} (`).pop().slice(0, -1), w = parseInt(f);
+        !isNaN(w) && w > a && (a = w);
       }
     });
-    const l = ` (${++i})`;
+    const l = ` (${++a})`;
     return o + l + r;
   } else
     return t;
-}, Rt = ({ nameInputRef: t, maxLength: n, value: s, onChange: r, onKeyDown: o, onClick: i, rows: a }) => /* @__PURE__ */ e(
+}, Rt = ({ nameInputRef: t, maxLength: n, value: s, onChange: r, onKeyDown: o, onClick: a, rows: i }) => /* @__PURE__ */ e(
   "textarea",
   {
     ref: t,
@@ -436,63 +436,63 @@ const Ct = ({ isLoading: t }) => {
     value: s,
     onChange: r,
     onKeyDown: o,
-    onClick: i,
-    rows: a
+    onClick: a,
+    rows: i
   }
-), xt = ({ message: t, xPlacement: n, yPlacement: s }) => /* @__PURE__ */ e("p", { className: `error-tooltip ${n} ${s}`, children: t }), un = 220, fn = ({ filesViewRef: t, file: n, onCreateFolder: s, triggerAction: r }) => {
-  const [o, i] = b(n.name), [a, l] = b(!1), [c, f] = b(""), [h, u] = b("right"), [w, x] = b("bottom"), S = ye((p) => {
+), xt = ({ message: t, xPlacement: n, yPlacement: s }) => /* @__PURE__ */ e("p", { className: `error-tooltip ${n} ${s}`, children: t }), fn = 220, hn = ({ filesViewRef: t, file: n, onCreateFolder: s, triggerAction: r }) => {
+  const [o, a] = b(n.name), [i, l] = b(!1), [c, u] = b(""), [h, f] = b("right"), [w, T] = b("bottom"), R = ye((p) => {
     p.preventDefault(), p.stopPropagation();
-  }), { currentFolder: D, currentPathFiles: M, setCurrentPathFiles: C } = oe(), { activeLayout: P } = ce(), F = (p) => {
-    i(p.target.value), l(!1);
+  }), { currentFolder: O, currentPathFiles: M, setCurrentPathFiles: C } = oe(), { activeLayout: E } = ce(), F = (p) => {
+    a(p.target.value), l(!1);
   }, N = (p) => {
     if (p.stopPropagation(), p.key === "Enter") {
       p.preventDefault(), m();
       return;
     }
-    p.key === "Escape" && (p.preventDefault(), r.close(), C((y) => y.filter((E) => E.key !== n.key))), /[\\/:*?"<>|]/.test(p.key) ? (p.preventDefault(), f(
+    p.key === "Escape" && (p.preventDefault(), r.close(), C((y) => y.filter((P) => P.key !== n.key))), /[\\/:*?"<>|]/.test(p.key) ? (p.preventDefault(), u(
       `A file name can't contain any of the following characters: \\ / : * ? " < > |`
-    ), l(!0)) : (l(!1), f(""));
+    ), l(!0)) : (l(!1), u(""));
   };
-  K(() => {
-    if (a) {
+  V(() => {
+    if (i) {
       const p = setTimeout(() => {
-        l(!1), f("");
+        l(!1), u("");
       }, 7e3);
       return () => clearTimeout(p);
     }
-  }, [a]);
+  }, [i]);
   function m() {
-    var E, R;
+    var P, x;
     let p = o.trim();
-    const T = M.filter((j) => !(j.key && j.key === n.key));
-    if (T.find((j) => j.name.toLowerCase() === p.toLowerCase())) {
-      f(`This destination already contains a folder named '${p}'.`), l(!0), (E = S.ref.current) == null || E.focus(), (R = S.ref.current) == null || R.select(), S.setIsClicked(!1);
+    const D = M.filter((j) => !(j.key && j.key === n.key));
+    if (D.find((j) => j.name.toLowerCase() === p.toLowerCase())) {
+      u(`This destination already contains a folder named '${p}'.`), l(!0), (P = R.ref.current) == null || P.focus(), (x = R.ref.current) == null || x.select(), R.setIsClicked(!1);
       return;
     }
-    p === "" && (p = Et("New Folder", !0, T)), fe(s, "onCreateFolder", p, D), C((j) => j.filter((H) => H.key !== n.key)), r.close();
+    p === "" && (p = Et("New Folder", !0, D)), fe(s, "onCreateFolder", p, O), C((j) => j.filter((H) => H.key !== n.key)), r.close();
   }
-  return K(() => {
-    var p, T, y;
-    if ((p = S.ref.current) == null || p.focus(), (T = S.ref.current) == null || T.select(), (y = S.ref) != null && y.current) {
-      const H = t.current.getBoundingClientRect(), I = S.ref.current, Y = I.getBoundingClientRect();
-      H.right - Y.left > 313 ? u("right") : u("left"), H.bottom - (Y.top + I.clientHeight) > 88 ? x("bottom") : x("top");
+  return V(() => {
+    var p, D, y;
+    if ((p = R.ref.current) == null || p.focus(), (D = R.ref.current) == null || D.select(), (y = R.ref) != null && y.current) {
+      const H = t.current.getBoundingClientRect(), I = R.ref.current, K = I.getBoundingClientRect();
+      H.right - K.left > 313 ? f("right") : f("left"), H.bottom - (K.top + I.clientHeight) > 88 ? T("bottom") : T("top");
     }
-  }, []), K(() => {
-    S.isClicked && m();
-  }, [S.isClicked]), /* @__PURE__ */ g(se, { children: [
+  }, []), V(() => {
+    R.isClicked && m();
+  }, [R.isClicked]), /* @__PURE__ */ g(se, { children: [
     /* @__PURE__ */ e(
       Rt,
       {
-        nameInputRef: S.ref,
-        maxLength: un,
+        nameInputRef: R.ref,
+        maxLength: fn,
         value: o,
         onChange: F,
         onKeyDown: N,
         onClick: (p) => p.stopPropagation(),
-        ...P === "list" && { rows: 1 }
+        ...E === "list" && { rows: 1 }
       }
     ),
-    a && /* @__PURE__ */ e(
+    i && /* @__PURE__ */ e(
       xt,
       {
         message: c,
@@ -516,13 +516,13 @@ const Ct = ({ isLoading: t }) => {
   setShow: s,
   heading: r,
   dialogWidth: o = "25%",
-  contentClassName: i = "",
-  closeButton: a = !0
+  contentClassName: a = "",
+  closeButton: i = !0
 }) => {
-  const l = re(null), c = (f) => {
-    f.key === "Escape" && s(!1);
+  const l = re(null), c = (u) => {
+    u.key === "Escape" && s(!1);
   };
-  return K(() => {
+  return V(() => {
     n ? l.current.showModal() : l.current.close();
   }, [n]), /* @__PURE__ */ g(
     "dialog",
@@ -534,29 +534,29 @@ const Ct = ({ isLoading: t }) => {
       children: [
         /* @__PURE__ */ g("div", { className: "fm-modal-header", children: [
           /* @__PURE__ */ e("span", { className: "fm-modal-heading", children: r }),
-          a && /* @__PURE__ */ e(zt, { size: 18, onClick: () => s(!1), className: "close-icon", title: "Close" })
+          i && /* @__PURE__ */ e(Wt, { size: 18, onClick: () => s(!1), className: "close-icon", title: "Close" })
         ] }),
         t
       ]
     }
   );
-}, pe = (t) => t.split(".").pop(), hn = 220, pn = ({ filesViewRef: t, file: n, onRename: s, triggerAction: r }) => {
-  const [o, i] = b(n == null ? void 0 : n.name), [a, l] = b(!1), [c, f] = b(!1), [h, u] = b(""), [w, x] = b("right"), [S, D] = b("bottom"), { currentPathFiles: M, setCurrentPathFiles: C } = oe(), { activeLayout: P } = ce(), F = re(null), N = ye((y) => {
-    var E;
-    (E = F.current) != null && E.contains(y.target) || (y.preventDefault(), y.stopPropagation());
+}, pe = (t) => t.split(".").pop(), pn = 220, mn = ({ filesViewRef: t, file: n, onRename: s, triggerAction: r }) => {
+  const [o, a] = b(n == null ? void 0 : n.name), [i, l] = b(!1), [c, u] = b(!1), [h, f] = b(""), [w, T] = b("right"), [R, O] = b("bottom"), { currentPathFiles: M, setCurrentPathFiles: C } = oe(), { activeLayout: E } = ce(), F = re(null), N = ye((y) => {
+    var P;
+    (P = F.current) != null && P.contains(y.target) || (y.preventDefault(), y.stopPropagation());
   }), m = (y) => {
     if (y.stopPropagation(), y.key === "Enter") {
       y.preventDefault(), N.setIsClicked(!0);
       return;
     }
-    /[\\/:*?"<>|]/.test(y.key) ? (y.preventDefault(), u(
+    /[\\/:*?"<>|]/.test(y.key) ? (y.preventDefault(), f(
       `A file name can't contain any of the following characters: \\ / : * ? " < > |`
-    ), f(!0)) : f(!1);
+    ), u(!0)) : u(!1);
   };
-  K(() => {
+  V(() => {
     if (c) {
       const y = setTimeout(() => {
-        f(!1), u("");
+        u(!1), f("");
       }, 7e3);
       return () => clearTimeout(y);
     }
@@ -564,51 +564,51 @@ const Ct = ({ isLoading: t }) => {
   function p(y) {
     if (o === "" || o === n.name) {
       C(
-        (E) => E.map((R) => (R.key === n.key && (R.isEditing = !1), R))
+        (P) => P.map((x) => (x.key === n.key && (x.isEditing = !1), x))
       ), r.close();
       return;
-    } else if (M.some((E) => E.name === o)) {
-      f(!0), u(`This destination already contains a folder named '${o}'.`), N.setIsClicked(!1);
+    } else if (M.some((P) => P.name === o)) {
+      u(!0), f(`This destination already contains a folder named '${o}'.`), N.setIsClicked(!1);
       return;
     } else if (!n.isDirectory && !y) {
-      const E = pe(n.name), R = pe(o);
-      if (E !== R) {
+      const P = pe(n.name), x = pe(o);
+      if (P !== x) {
         l(!0);
         return;
       }
     }
-    f(!1), fe(s, "onRename", n, o), C((E) => E.filter((R) => R.key !== n.key)), r.close();
+    u(!1), fe(s, "onRename", n, o), C((P) => P.filter((x) => x.key !== n.key)), r.close();
   }
-  const T = () => {
-    var y, E, R, j, H, I;
-    if ((E = (y = N.ref) == null ? void 0 : y.current) == null || E.focus(), n.isDirectory)
-      (j = (R = N.ref) == null ? void 0 : R.current) == null || j.select();
+  const D = () => {
+    var y, P, x, j, H, I;
+    if ((P = (y = N.ref) == null ? void 0 : y.current) == null || P.focus(), n.isDirectory)
+      (j = (x = N.ref) == null ? void 0 : x.current) == null || j.select();
     else {
-      const Y = pe(n.name), te = n.name.length - Y.length - 1;
-      (I = (H = N.ref) == null ? void 0 : H.current) == null || I.setSelectionRange(0, te);
+      const K = pe(n.name), Z = n.name.length - K.length - 1;
+      (I = (H = N.ref) == null ? void 0 : H.current) == null || I.setSelectionRange(0, Z);
     }
   };
-  return K(() => {
+  return V(() => {
     var y;
-    if (T(), (y = N.ref) != null && y.current) {
-      const H = t.current.getBoundingClientRect(), I = N.ref.current, Y = I.getBoundingClientRect();
-      H.right - Y.left > 313 ? x("right") : x("left"), H.bottom - (Y.top + I.clientHeight) > 88 ? D("bottom") : D("top");
+    if (D(), (y = N.ref) != null && y.current) {
+      const H = t.current.getBoundingClientRect(), I = N.ref.current, K = I.getBoundingClientRect();
+      H.right - K.left > 313 ? T("right") : T("left"), H.bottom - (K.top + I.clientHeight) > 88 ? O("bottom") : O("top");
     }
-  }, []), K(() => {
-    N.isClicked && p(!1), T();
+  }, []), V(() => {
+    N.isClicked && p(!1), D();
   }, [N.isClicked]), /* @__PURE__ */ g(se, { children: [
     /* @__PURE__ */ e(
       Rt,
       {
         nameInputRef: N.ref,
-        maxLength: hn,
+        maxLength: pn,
         value: o,
         onChange: (y) => {
-          i(y.target.value), f(!1);
+          a(y.target.value), u(!1);
         },
         onKeyDown: m,
         onClick: (y) => y.stopPropagation(),
-        ...P === "list" && { rows: 1 }
+        ...E === "list" && { rows: 1 }
       }
     ),
     c && /* @__PURE__ */ e(
@@ -616,20 +616,20 @@ const Ct = ({ isLoading: t }) => {
       {
         message: h,
         xPlacement: w,
-        yPlacement: S
+        yPlacement: R
       }
     ),
     /* @__PURE__ */ e(
       Tt,
       {
         heading: "Rename",
-        show: a,
+        show: i,
         setShow: l,
         dialogWidth: "25vw",
         closeButton: !1,
         children: /* @__PURE__ */ g("div", { className: "fm-rename-folder-container", ref: F, children: [
           /* @__PURE__ */ e("div", { className: "fm-rename-folder-input", children: /* @__PURE__ */ g("div", { className: "fm-rename-warning", children: [
-            /* @__PURE__ */ e(Xt, { size: 70, color: "orange" }),
+            /* @__PURE__ */ e(Gt, { size: 70, color: "orange" }),
             /* @__PURE__ */ e("div", { children: "If you change a file name extension, the file might become unusable. Are you sure you want to change it?" })
           ] }) }),
           /* @__PURE__ */ g("div", { className: "fm-rename-folder-action", children: [
@@ -639,7 +639,7 @@ const Ct = ({ isLoading: t }) => {
                 type: "secondary",
                 onClick: () => {
                   C(
-                    (y) => y.map((E) => (E.key === n.key && (E.isEditing = !1), E))
+                    (y) => y.map((P) => (P.key === n.key && (P.isEditing = !1), P))
                   ), l(!1), r.close();
                 },
                 children: "No"
@@ -669,104 +669,104 @@ const Ct = ({ isLoading: t }) => {
     return `${r.toFixed(n)} MB`;
   if (r >= 1024)
     return `${o.toFixed(n)} GB`;
-}, mn = (t) => {
+}, vn = (t) => {
   if (!t || isNaN(Date.parse(t))) return "";
   t = new Date(t);
   let n = t.getHours();
   const s = t.getMinutes(), r = n >= 12 ? "PM" : "AM";
   n = n % 12, n = n || 12;
-  const o = t.getMonth() + 1, i = t.getDate(), a = t.getFullYear();
-  return `${o}/${i}/${a} ${n}:${s < 10 ? "0" + s : s} ${r}`;
-}, Dt = ({ name: t, id: n, checked: s, onClick: r, onChange: o, className: i = "", title: a, disabled: l = !1 }) => /* @__PURE__ */ e(
+  const o = t.getMonth() + 1, a = t.getDate(), i = t.getFullYear();
+  return `${o}/${a}/${i} ${n}:${s < 10 ? "0" + s : s} ${r}`;
+}, Dt = ({ name: t, id: n, checked: s, onClick: r, onChange: o, className: a = "", title: i, disabled: l = !1 }) => /* @__PURE__ */ e(
   "input",
   {
-    className: `fm-checkbox ${i}`,
+    className: `fm-checkbox ${a}`,
     type: "checkbox",
     name: t,
     id: n,
     checked: s,
     onClick: r,
     onChange: o,
-    title: a,
+    title: i,
     disabled: l
   }
-), Re = 50, vn = ({
+), Re = 50, gn = ({
   index: t,
   file: n,
   onCreateFolder: s,
   onRename: r,
   enableFilePreview: o,
-  onFileOpen: i,
-  filesViewRef: a,
+  onFileOpen: a,
+  filesViewRef: i,
   selectedFileIndexes: l,
   triggerAction: c,
-  handleContextMenu: f,
+  handleContextMenu: u,
   setLastSelectedFile: h
 }) => {
-  var Z, G, ie, ze;
-  const [u, w] = b(!1), [x, S] = b(0), [D, M] = b("hidden"), [C, P] = b(""), [F, N] = b(null), { activeLayout: m } = ce(), p = m === "grid" ? 48 : 20, T = Fe(p), { setCurrentPath: y, currentPathFiles: E } = oe(), { setSelectedFiles: R } = le(), { clipBoard: j, handleCutCopy: H, setClipBoard: I, handlePasting: Y } = Ne(), te = re(null), X = Fe(Re), V = (j == null ? void 0 : j.isMoving) && j.files.find((W) => W.name === n.name && W.path === n.path), de = () => {
-    i(n), n.isDirectory ? (y(n.path), R([])) : o && c.show("previewFile");
-  }, Ce = (W, ne) => {
-    if (l.length > 0 && W) {
+  var Q, G, ie, We;
+  const [f, w] = b(!1), [T, R] = b(0), [O, M] = b("hidden"), [C, E] = b(""), [F, N] = b(null), { activeLayout: m } = ce(), p = m === "grid" ? 48 : 20, D = Fe(p), { setCurrentPath: y, currentPathFiles: P } = oe(), { setSelectedFiles: x } = le(), { clipBoard: j, handleCutCopy: H, setClipBoard: I, handlePasting: K } = Ne(), Z = re(null), X = Fe(Re), Y = (j == null ? void 0 : j.isMoving) && j.files.find((B) => B.name === n.name && B.path === n.path), de = () => {
+    a(n), n.isDirectory ? (y(n.path), x([])) : o && c.show("previewFile");
+  }, Ce = (B, ne) => {
+    if (l.length > 0 && B) {
       let ae = !1, ue = l[0], he = t;
       if (ue >= he) {
         const Mt = ue;
         ue = he, he = Mt, ae = !0;
       }
-      const We = E.slice(ue, he + 1);
-      R(ae ? We.reverse() : We);
-    } else l.length > 0 && ne ? R((ae) => {
+      const Be = P.slice(ue, he + 1);
+      x(ae ? Be.reverse() : Be);
+    } else l.length > 0 && ne ? x((ae) => {
       const ue = ae.filter((he) => he.path !== n.path);
       return ae.length === ue.length ? [...ae, n] : ue;
-    }) : R([n]);
-  }, d = (W) => {
-    if (W.stopPropagation(), n.isEditing) return;
-    Ce(W.shiftKey, W.ctrlKey);
+    }) : x([n]);
+  }, d = (B) => {
+    if (B.stopPropagation(), n.isEditing) return;
+    Ce(B.shiftKey, B.ctrlKey);
     const ne = (/* @__PURE__ */ new Date()).getTime();
-    if (ne - x < 300) {
+    if (ne - T < 300) {
       de();
       return;
     }
-    S(ne);
-  }, v = (W) => {
-    W.key === "Enter" && (W.stopPropagation(), R([n]), de());
-  }, $ = (W) => {
-    W.stopPropagation(), W.preventDefault(), !n.isEditing && (u || R([n]), h(n), f(W, !0));
+    R(ne);
+  }, v = (B) => {
+    B.key === "Enter" && (B.stopPropagation(), x([n]), de());
+  }, $ = (B) => {
+    B.stopPropagation(), B.preventDefault(), !n.isEditing && (f || x([n]), h(n), u(B, !0));
   }, A = () => {
     M("visible");
-  }, O = () => {
-    !u && M("hidden");
-  }, z = (W) => {
-    W.target.checked ? R((ne) => [...ne, n]) : R((ne) => ne.filter((ae) => ae.name !== n.name && ae.path !== n.path)), w(W.target.checked);
-  }, k = (W) => {
-    W.dataTransfer.setDragImage(te.current, 30, 50), W.dataTransfer.effectAllowed = "copy", H(!0);
-  }, L = () => I(null), B = (W) => {
-    W.preventDefault(), u || !n.isDirectory ? W.dataTransfer.dropEffect = "none" : (N({ x: W.clientX, y: W.clientY + 12 }), W.dataTransfer.dropEffect = "copy", P("file-drop-zone"));
-  }, _ = (W) => {
-    W.currentTarget.contains(W.relatedTarget) || (P((ne) => ne && ""), N(null));
-  }, U = (W) => {
-    W.preventDefault(), !(u || !n.isDirectory) && (Y(n), P((ne) => ne && ""), N(null));
+  }, S = () => {
+    !f && M("hidden");
+  }, W = (B) => {
+    B.target.checked ? x((ne) => [...ne, n]) : x((ne) => ne.filter((ae) => ae.name !== n.name && ae.path !== n.path)), w(B.target.checked);
+  }, k = (B) => {
+    B.dataTransfer.setDragImage(Z.current, 30, 50), B.dataTransfer.effectAllowed = "copy", H(!0);
+  }, L = () => I(null), U = (B) => {
+    B.preventDefault(), f || !n.isDirectory ? B.dataTransfer.dropEffect = "none" : (N({ x: B.clientX, y: B.clientY + 12 }), B.dataTransfer.dropEffect = "copy", E("file-drop-zone"));
+  }, _ = (B) => {
+    B.currentTarget.contains(B.relatedTarget) || (E((ne) => ne && ""), N(null));
+  }, q = (B) => {
+    B.preventDefault(), !(f || !n.isDirectory) && (K(n), E((ne) => ne && ""), N(null));
   };
-  return K(() => {
+  return V(() => {
     w(l.includes(t)), M(l.includes(t) ? "visible" : "hidden");
   }, [l]), /* @__PURE__ */ g(
     "div",
     {
-      className: `file-item-container ${C} ${u || n.isEditing ? "file-selected" : ""} ${V ? "file-moving" : ""}`,
+      className: `file-item-container ${C} ${f || n.isEditing ? "file-selected" : ""} ${Y ? "file-moving" : ""}`,
       tabIndex: 0,
       title: n.name,
       onClick: d,
       onKeyDown: v,
       onContextMenu: $,
       onMouseOver: A,
-      onMouseLeave: O,
-      draggable: u,
+      onMouseLeave: S,
+      draggable: f,
       onDragStart: k,
       onDragEnd: L,
-      onDragEnter: B,
-      onDragOver: B,
+      onDragEnter: U,
+      onDragOver: U,
       onDragLeave: _,
-      onDrop: U,
+      onDrop: q,
       children: [
         /* @__PURE__ */ g("div", { className: "file-item", children: [
           !n.isEditing && /* @__PURE__ */ e(
@@ -774,25 +774,25 @@ const Ct = ({ isLoading: t }) => {
             {
               name: n.name,
               id: n.name,
-              checked: u,
-              className: `selection-checkbox ${D}`,
-              onChange: z,
-              onClick: (W) => W.stopPropagation()
+              checked: f,
+              className: `selection-checkbox ${O}`,
+              onChange: W,
+              onClick: (B) => B.stopPropagation()
             }
           ),
-          n.isDirectory ? /* @__PURE__ */ e(Ye, { size: p }) : /* @__PURE__ */ e(se, { children: T[(G = (Z = n.name) == null ? void 0 : Z.split(".").pop()) == null ? void 0 : G.toLowerCase()] ?? /* @__PURE__ */ e(be, { size: p }) }),
+          n.isDirectory ? /* @__PURE__ */ e(Ve, { size: p }) : /* @__PURE__ */ e(se, { children: D[(G = (Q = n.name) == null ? void 0 : Q.split(".").pop()) == null ? void 0 : G.toLowerCase()] ?? /* @__PURE__ */ e(be, { size: p }) }),
           n.isEditing ? /* @__PURE__ */ e("div", { className: `rename-file-container ${m}`, children: c.actionType === "createFolder" ? /* @__PURE__ */ e(
-            fn,
+            hn,
             {
-              filesViewRef: a,
+              filesViewRef: i,
               file: n,
               onCreateFolder: s,
               triggerAction: c
             }
           ) : /* @__PURE__ */ e(
-            pn,
+            mn,
             {
-              filesViewRef: a,
+              filesViewRef: i,
               file: n,
               onRename: r,
               triggerAction: c
@@ -800,7 +800,7 @@ const Ct = ({ isLoading: t }) => {
           ) }) : /* @__PURE__ */ e("span", { className: "text-truncate file-name", children: n.name })
         ] }),
         m === "list" && /* @__PURE__ */ g(se, { children: [
-          /* @__PURE__ */ e("div", { className: "modified-date", children: mn(n.updatedAt) }),
+          /* @__PURE__ */ e("div", { className: "modified-date", children: vn(n.updatedAt) }),
           /* @__PURE__ */ e("div", { className: "size", children: (n == null ? void 0 : n.size) > 0 ? Pe(n == null ? void 0 : n.size) : "" })
         ] }),
         F && /* @__PURE__ */ g(
@@ -817,57 +817,57 @@ const Ct = ({ isLoading: t }) => {
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { ref: te, className: "drag-icon", children: n.isDirectory ? /* @__PURE__ */ e(Ye, { size: Re }) : /* @__PURE__ */ e(se, { children: X[(ze = (ie = n.name) == null ? void 0 : ie.split(".").pop()) == null ? void 0 : ze.toLowerCase()] ?? /* @__PURE__ */ e(be, { size: Re }) }) })
+        /* @__PURE__ */ e("div", { ref: Z, className: "drag-icon", children: n.isDirectory ? /* @__PURE__ */ e(Ve, { size: Re }) : /* @__PURE__ */ e(se, { children: X[(We = (ie = n.name) == null ? void 0 : ie.split(".").pop()) == null ? void 0 : We.toLowerCase()] ?? /* @__PURE__ */ e(be, { size: Re }) }) })
       ]
     }
   );
-}, gn = ({ subMenuRef: t, list: n, position: s = "right" }) => /* @__PURE__ */ e("ul", { ref: t, className: `sub-menu ${s}`, children: n == null ? void 0 : n.map((r) => /* @__PURE__ */ g("li", { onClick: r.onClick, children: [
+}, yn = ({ subMenuRef: t, list: n, position: s = "right" }) => /* @__PURE__ */ e("ul", { ref: t, className: `sub-menu ${s}`, children: n == null ? void 0 : n.map((r) => /* @__PURE__ */ g("li", { onClick: r.onClick, children: [
   /* @__PURE__ */ e("span", { className: "item-selected", children: r.selected && /* @__PURE__ */ e(gt, { size: 13 }) }),
   r.icon,
   /* @__PURE__ */ e("span", { children: r.title })
-] }, r.title)) }), yn = ({ filesViewRef: t, contextMenuRef: n, menuItems: s, visible: r, clickPosition: o }) => {
-  const [i, a] = b(0), [l, c] = b(0), [f, h] = b(null), [u, w] = b("right"), x = re(null), S = () => {
-    const { clickX: C, clickY: P } = o, F = t.current, N = F.getBoundingClientRect(), m = F.offsetWidth - F.clientWidth, p = n.current.getBoundingClientRect(), T = p.width, y = p.height, E = C - N.left, R = N.width - (E + m) > T, j = !R, H = P - N.top, I = N.height - H > y, Y = !I;
-    R ? (a(`${E}px`), w("right")) : j && (a(`${E - T}px`), w("left")), I ? c(`${H + F.scrollTop}px`) : Y && c(`${H + F.scrollTop - y}px`);
-  }, D = (C) => {
+] }, r.title)) }), Cn = ({ filesViewRef: t, contextMenuRef: n, menuItems: s, visible: r, clickPosition: o }) => {
+  const [a, i] = b(0), [l, c] = b(0), [u, h] = b(null), [f, w] = b("right"), T = re(null), R = () => {
+    const { clickX: C, clickY: E } = o, F = t.current, N = F.getBoundingClientRect(), m = F.offsetWidth - F.clientWidth, p = n.current.getBoundingClientRect(), D = p.width, y = p.height, P = C - N.left, x = N.width - (P + m) > D, j = !x, H = E - N.top, I = N.height - H > y, K = !I;
+    x ? (i(`${P}px`), w("right")) : j && (i(`${P - D}px`), w("left")), I ? c(`${H + F.scrollTop}px`) : K && c(`${H + F.scrollTop - y}px`);
+  }, O = (C) => {
     C.preventDefault(), C.stopPropagation();
   }, M = (C) => {
     h(C);
   };
-  if (K(() => {
-    r && n.current ? S() : (c(0), a(0), h(null));
+  if (V(() => {
+    r && n.current ? R() : (c(0), i(0), h(null));
   }, [r]), r)
     return /* @__PURE__ */ e(
       "div",
       {
         ref: n,
-        onContextMenu: D,
+        onContextMenu: O,
         onClick: (C) => C.stopPropagation(),
         className: `fm-context-menu ${l ? "visible" : "hidden"}`,
         style: {
           top: l,
-          left: i
+          left: a
         },
-        children: /* @__PURE__ */ e("div", { className: "file-context-menu-list", children: /* @__PURE__ */ e("ul", { children: s.filter((C) => !C.hidden).map((C, P) => {
-          const F = C.hasOwnProperty("children"), N = f === P && F;
+        children: /* @__PURE__ */ e("div", { className: "file-context-menu-list", children: /* @__PURE__ */ e("ul", { children: s.filter((C) => !C.hidden).map((C, E) => {
+          const F = C.hasOwnProperty("children"), N = u === E && F;
           return /* @__PURE__ */ g("div", { children: [
             /* @__PURE__ */ g(
               "li",
               {
                 onClick: C.onClick,
                 className: `${C.className ?? ""} ${N ? "active" : ""}`,
-                onMouseOver: () => M(P),
+                onMouseOver: () => M(E),
                 children: [
                   C.icon,
                   /* @__PURE__ */ e("span", { children: C.title }),
                   F && /* @__PURE__ */ g(se, { children: [
-                    /* @__PURE__ */ e(_t, { size: 14, className: "list-expand-icon" }),
+                    /* @__PURE__ */ e(Kt, { size: 14, className: "list-expand-icon" }),
                     N && /* @__PURE__ */ e(
-                      gn,
+                      yn,
                       {
-                        subMenuRef: x,
+                        subMenuRef: T,
                         list: C.children,
-                        position: u
+                        position: f
                       }
                     )
                   ] })
@@ -879,32 +879,32 @@ const Ct = ({ isLoading: t }) => {
         }) }) })
       }
     );
-}, Cn = (t, n, s) => {
-  const [r, o] = b([]), [i, a] = b(!1), [l, c] = b(!1), [f, h] = b({ clickX: 0, clickY: 0 }), [u, w] = b(null), { clipBoard: x, setClipBoard: S, handleCutCopy: D, handlePasting: M } = Ne(), { selectedFiles: C, setSelectedFiles: P, handleDownload: F } = le(), { currentPath: N, setCurrentPath: m, currentPathFiles: p, setCurrentPathFiles: T } = oe(), { activeLayout: y, setActiveLayout: E } = ce(), R = () => {
-    u.isDirectory ? (m(u.path), o([]), P([])) : n && s.show("previewFile"), a(!1);
+}, wn = (t, n, s) => {
+  const [r, o] = b([]), [a, i] = b(!1), [l, c] = b(!1), [u, h] = b({ clickX: 0, clickY: 0 }), [f, w] = b(null), { clipBoard: T, setClipBoard: R, handleCutCopy: O, handlePasting: M } = Ne(), { selectedFiles: C, setSelectedFiles: E, handleDownload: F } = le(), { currentPath: N, setCurrentPath: m, currentPathFiles: p, setCurrentPathFiles: D } = oe(), { activeLayout: y, setActiveLayout: P } = ce(), x = () => {
+    f.isDirectory ? (m(f.path), o([]), E([])) : n && s.show("previewFile"), i(!1);
   }, j = (k) => {
-    D(k), a(!1);
+    O(k), i(!1);
   }, H = () => {
-    M(u), a(!1);
+    M(f), i(!1);
   }, I = () => {
-    a(!1), s.show("rename");
-  }, Y = () => {
-    F(), a(!1);
-  }, te = () => {
-    a(!1), s.show("delete");
+    i(!1), s.show("rename");
+  }, K = () => {
+    F(), i(!1);
+  }, Z = () => {
+    i(!1), s.show("delete");
   }, d = [
     {
       title: "View",
-      icon: y === "grid" ? /* @__PURE__ */ e(Be, { size: 18 }) : /* @__PURE__ */ e(we, { size: 18 }),
+      icon: y === "grid" ? /* @__PURE__ */ e(Ue, { size: 18 }) : /* @__PURE__ */ e(we, { size: 18 }),
       onClick: () => {
       },
       children: [
         {
           title: "Grid",
-          icon: /* @__PURE__ */ e(Be, { size: 18 }),
+          icon: /* @__PURE__ */ e(Ue, { size: 18 }),
           selected: y === "grid",
           onClick: () => {
-            E("grid"), a(!1);
+            P("grid"), i(!1);
           }
         },
         {
@@ -912,7 +912,7 @@ const Ct = ({ isLoading: t }) => {
           icon: /* @__PURE__ */ e(we, { size: 18 }),
           selected: y === "list",
           onClick: () => {
-            E("list"), a(!1);
+            P("list"), i(!1);
           }
         }
       ]
@@ -921,7 +921,7 @@ const Ct = ({ isLoading: t }) => {
       title: "Refresh",
       icon: /* @__PURE__ */ e(ht, { size: 18 }),
       onClick: () => {
-        a(!1), fe(t, "onRefresh"), S(null);
+        i(!1), fe(t, "onRefresh"), R(null);
       },
       divider: !0
     },
@@ -929,29 +929,29 @@ const Ct = ({ isLoading: t }) => {
       title: "New folder",
       icon: /* @__PURE__ */ e(ft, { size: 18 }),
       onClick: () => {
-        s.show("createFolder"), a(!1);
+        s.show("createFolder"), i(!1);
       }
     },
     {
       title: "Upload",
       icon: /* @__PURE__ */ e(mt, { size: 18 }),
       onClick: () => {
-        a(!1), s.show("uploadFile");
+        i(!1), s.show("uploadFile");
       },
       divider: !0
     },
     {
       title: "Select all",
-      icon: /* @__PURE__ */ e(Wt, { size: 18 }),
+      icon: /* @__PURE__ */ e(Bt, { size: 18 }),
       onClick: () => {
-        P(p), a(!1);
+        E(p), i(!1);
       }
     }
   ], v = [
     {
       title: "Open",
-      icon: u != null && u.isDirectory ? /* @__PURE__ */ e(Gt, { size: 20 }) : /* @__PURE__ */ e(be, { size: 16 }),
-      onClick: R,
+      icon: f != null && f.isDirectory ? /* @__PURE__ */ e(Jt, { size: 20 }) : /* @__PURE__ */ e(be, { size: 16 }),
+      onClick: x,
       divider: !0
     },
     {
@@ -963,14 +963,14 @@ const Ct = ({ isLoading: t }) => {
       title: "Copy",
       icon: /* @__PURE__ */ e(ut, { strokeWidth: 0.1, size: 17 }),
       onClick: () => j(!1),
-      divider: !(u != null && u.isDirectory)
+      divider: !(f != null && f.isDirectory)
     },
     {
       title: "Paste",
       icon: /* @__PURE__ */ e(Ie, { size: 18 }),
       onClick: H,
-      className: `${x ? "" : "disable-paste"}`,
-      hidden: !(u != null && u.isDirectory),
+      className: `${T ? "" : "disable-paste"}`,
+      hidden: !(f != null && f.isDirectory),
       divider: !0
     },
     {
@@ -981,17 +981,17 @@ const Ct = ({ isLoading: t }) => {
     },
     {
       title: "Download",
-      icon: /* @__PURE__ */ e($e, { size: 18 }),
-      onClick: Y,
-      hidden: u == null ? void 0 : u.isDirectory
+      icon: /* @__PURE__ */ e(je, { size: 18 }),
+      onClick: K,
+      hidden: f == null ? void 0 : f.isDirectory
     },
     {
       title: "Delete",
       icon: /* @__PURE__ */ e(pt, { size: 19 }),
-      onClick: te
+      onClick: Z
     }
   ], $ = () => {
-    T((k) => [
+    D((k) => [
       ...k,
       {
         name: Et("New Folder", !0, k),
@@ -1002,13 +1002,13 @@ const Ct = ({ isLoading: t }) => {
       }
     ]);
   }, A = () => {
-    T((k) => (k[r.at(-1)] && (k[r.at(-1)].isEditing = !0), k)), o([]), P([]);
-  }, O = () => {
-    o([]), P((k) => k.length > 0 ? [] : k);
-  }, z = (k, L = !1) => {
-    k.preventDefault(), h({ clickX: k.clientX, clickY: k.clientY }), c(L), !L && O(), a(!0);
+    D((k) => (k[r.at(-1)] && (k[r.at(-1)].isEditing = !0), k)), o([]), E([]);
+  }, S = () => {
+    o([]), E((k) => k.length > 0 ? [] : k);
+  }, W = (k, L = !1) => {
+    k.preventDefault(), h({ clickX: k.clientX, clickY: k.clientY }), c(L), !L && S(), i(!0);
   };
-  return K(() => {
+  return V(() => {
     if (s.isActive)
       switch (s.actionType) {
         case "createFolder":
@@ -1018,24 +1018,24 @@ const Ct = ({ isLoading: t }) => {
           A();
           break;
       }
-  }, [s.isActive]), K(() => {
-    o([]), P([]);
-  }, [N]), K(() => {
+  }, [s.isActive]), V(() => {
+    o([]), E([]);
+  }, [N]), V(() => {
     C.length > 0 ? o(() => C.map((k) => p.findIndex((L) => L.path === k.path))) : o([]);
   }, [C, p]), {
     emptySelecCtxItems: d,
     selecCtxItems: v,
-    handleContextMenu: z,
-    unselectFiles: O,
-    visible: i,
-    setVisible: a,
+    handleContextMenu: W,
+    unselectFiles: S,
+    visible: a,
+    setVisible: i,
     setLastSelectedFile: w,
     selectedFileIndexes: r,
-    clickPosition: f,
+    clickPosition: u,
     isSelectionCtx: l
   };
-}, wn = ({ unselectFiles: t }) => {
-  const [n, s] = b(!1), { selectedFiles: r, setSelectedFiles: o } = le(), { currentPathFiles: i } = oe(), a = lt(() => i.length > 0 && r.length === i.length, [r, i]);
+}, bn = ({ unselectFiles: t }) => {
+  const [n, s] = b(!1), { selectedFiles: r, setSelectedFiles: o } = le(), { currentPathFiles: a } = oe(), i = $e(() => a.length > 0 && r.length === a.length, [r, a]);
   return /* @__PURE__ */ g(
     "div",
     {
@@ -1043,46 +1043,46 @@ const Ct = ({ isLoading: t }) => {
       onMouseOver: () => s(!0),
       onMouseLeave: () => s(!1),
       children: [
-        /* @__PURE__ */ e("div", { className: "file-select-all", children: (n || a) && /* @__PURE__ */ e(Dt, { checked: a, onChange: (c) => {
-          c.target.checked ? (o(i), s(!0)) : t();
-        }, title: "Select all", disabled: i.length === 0 }) }),
+        /* @__PURE__ */ e("div", { className: "file-select-all", children: (n || i) && /* @__PURE__ */ e(Dt, { checked: i, onChange: (c) => {
+          c.target.checked ? (o(a), s(!0)) : t();
+        }, title: "Select all", disabled: a.length === 0 }) }),
         /* @__PURE__ */ e("div", { className: "file-name", children: "Name" }),
         /* @__PURE__ */ e("div", { className: "file-date", children: "Modified" }),
         /* @__PURE__ */ e("div", { className: "file-size", children: "Size" })
       ]
     }
   );
-}, bn = ({
+}, Fn = ({
   onCreateFolder: t,
   onRename: n,
   onFileOpen: s,
   onRefresh: r,
   enableFilePreview: o,
-  triggerAction: i
+  triggerAction: a
 }) => {
-  const { currentPathFiles: a } = oe(), l = re(null), { activeLayout: c } = ce(), {
-    emptySelecCtxItems: f,
+  const { currentPathFiles: i } = oe(), l = re(null), { activeLayout: c } = ce(), {
+    emptySelecCtxItems: u,
     selecCtxItems: h,
-    handleContextMenu: u,
+    handleContextMenu: f,
     unselectFiles: w,
-    visible: x,
-    setVisible: S,
-    setLastSelectedFile: D,
+    visible: T,
+    setVisible: R,
+    setLastSelectedFile: O,
     selectedFileIndexes: M,
     clickPosition: C,
-    isSelectionCtx: P
-  } = Cn(r, o, i), F = ye(() => S(!1));
+    isSelectionCtx: E
+  } = wn(r, o, a), F = ye(() => R(!1));
   return /* @__PURE__ */ g(
     "div",
     {
       ref: l,
       className: `files ${c}`,
-      onContextMenu: u,
+      onContextMenu: f,
       onClick: w,
       children: [
-        c === "list" && /* @__PURE__ */ e(wn, { unselectFiles: w }),
-        (a == null ? void 0 : a.length) > 0 ? /* @__PURE__ */ e(se, { children: a.map((N, m) => /* @__PURE__ */ e(
-          vn,
+        c === "list" && /* @__PURE__ */ e(bn, { unselectFiles: w }),
+        (i == null ? void 0 : i.length) > 0 ? /* @__PURE__ */ e(se, { children: i.map((N, m) => /* @__PURE__ */ e(
+          gn,
           {
             index: m,
             file: N,
@@ -1090,32 +1090,32 @@ const Ct = ({ isLoading: t }) => {
             onRename: n,
             onFileOpen: s,
             enableFilePreview: o,
-            triggerAction: i,
+            triggerAction: a,
             filesViewRef: l,
             selectedFileIndexes: M,
-            handleContextMenu: u,
-            setVisible: S,
-            setLastSelectedFile: D
+            handleContextMenu: f,
+            setVisible: R,
+            setLastSelectedFile: O
           },
           m
         )) }) : /* @__PURE__ */ e("div", { className: "empty-folder", children: "This folder is empty." }),
         /* @__PURE__ */ e(
-          yn,
+          Cn,
           {
             filesViewRef: l,
             contextMenuRef: F.ref,
-            menuItems: P ? h : f,
-            visible: x,
-            setVisible: S,
+            menuItems: E ? h : u,
+            visible: T,
+            setVisible: R,
             clickPosition: C
           }
         )
       ]
     }
   );
-}, Fn = ({ triggerAction: t, onDelete: n }) => {
-  const [s, r] = b(""), { selectedFiles: o, setSelectedFiles: i } = le();
-  return K(() => {
+}, kn = ({ triggerAction: t, onDelete: n }) => {
+  const [s, r] = b(""), { selectedFiles: o, setSelectedFiles: a } = le();
+  return V(() => {
     r(() => {
       if (o.length === 1)
         return `Are you sure you want to delete "${o[0].name}"?`;
@@ -1127,24 +1127,24 @@ const Ct = ({ isLoading: t }) => {
     /* @__PURE__ */ g("div", { className: "file-delete-confirm-actions", children: [
       /* @__PURE__ */ e(me, { type: "secondary", onClick: () => t.close(), children: "Cancel" }),
       /* @__PURE__ */ e(me, { type: "danger", onClick: () => {
-        n(o), i([]), t.close();
+        n(o), a([]), t.close();
       }, children: "Delete" })
     ] })
   ] });
-}, kn = ({ percent: t = 0, isCanceled: n = !1, isCompleted: s = !1, error: r }) => /* @__PURE__ */ g("div", { role: "progressbar", className: "fm-progress", children: [
+}, Nn = ({ percent: t = 0, isCanceled: n = !1, isCompleted: s = !1, error: r }) => /* @__PURE__ */ g("div", { role: "progressbar", className: "fm-progress", children: [
   !r && /* @__PURE__ */ e("div", { className: "fm-progress-bar", children: /* @__PURE__ */ e("div", { className: "fm-progress-bar-fill", style: { width: `${t}%` } }) }),
   n ? /* @__PURE__ */ e("span", { className: "fm-upload-canceled", children: "Canceled" }) : r ? /* @__PURE__ */ e("span", { className: "fm-upload-canceled", children: r }) : /* @__PURE__ */ e("div", { className: "fm-progress-status", children: /* @__PURE__ */ e("span", { children: s ? "Completed" : t + "% done" }) })
-] }), Nn = ({
+] }), Pn = ({
   index: t,
   fileData: n,
   setFiles: s,
   setIsUploading: r,
   fileUploadConfig: o,
-  onFileUploaded: i,
-  handleFileRemove: a
+  onFileUploaded: a,
+  handleFileRemove: i
 }) => {
-  var p, T, y, E;
-  const [l, c] = b(0), [f, h] = b(!1), [u, w] = b(!1), [x, S] = b(!1), D = Fe(33), M = re(), { onError: C } = ke(), P = (R) => {
+  var p, D, y, P;
+  const [l, c] = b(0), [u, h] = b(!1), [f, w] = b(!1), [T, R] = b(!1), O = Fe(33), M = re(), { onError: C } = ke(), E = (x) => {
     c(0), r((H) => ({
       ...H,
       [t]: !1
@@ -1153,100 +1153,100 @@ const Ct = ({ isLoading: t }) => {
       type: "upload",
       message: "Upload failed.",
       response: {
-        status: R.status,
-        statusText: R.statusText,
-        data: R.response
+        status: x.status,
+        statusText: x.statusText,
+        data: x.response
       }
     };
     s(
-      (H) => H.map((I, Y) => t === Y ? {
+      (H) => H.map((I, K) => t === K ? {
         ...I,
         error: j.message
       } : I)
-    ), S(!0), C(j, n.file);
-  }, F = (R) => {
-    if (!R.error)
+    ), R(!0), C(j, n.file);
+  }, F = (x) => {
+    if (!x.error)
       return new Promise((j, H) => {
         const I = new XMLHttpRequest();
-        M.current = I, r((V) => ({
-          ...V,
+        M.current = I, r((Y) => ({
+          ...Y,
           [t]: !0
-        })), I.upload.onprogress = (V) => {
-          if (V.lengthComputable) {
-            const de = Math.round(V.loaded / V.total * 100);
+        })), I.upload.onprogress = (Y) => {
+          if (Y.lengthComputable) {
+            const de = Math.round(Y.loaded / Y.total * 100);
             c(de);
           }
         }, I.onload = () => {
-          r((V) => ({
-            ...V,
+          r((Y) => ({
+            ...Y,
             [t]: !1
-          })), I.status === 200 || I.status === 201 ? (h(!0), i(I.response), j(I.response)) : (H(I.statusText), P(I));
+          })), I.status === 200 || I.status === 201 ? (h(!0), a(I.response), j(I.response)) : (H(I.statusText), E(I));
         }, I.onerror = () => {
-          H(I.statusText), P(I);
+          H(I.statusText), E(I);
         }, I.open("POST", o == null ? void 0 : o.url, !0);
-        const Y = o == null ? void 0 : o.headers;
-        for (let V in Y)
-          I.setRequestHeader(V, Y[V]);
-        const te = new FormData(), X = R == null ? void 0 : R.appendData;
-        for (let V in X)
-          X[V] && te.append(V, X[V]);
-        te.append("file", R.file), I.send(te);
+        const K = o == null ? void 0 : o.headers;
+        for (let Y in K)
+          I.setRequestHeader(Y, K[Y]);
+        const Z = new FormData(), X = x == null ? void 0 : x.appendData;
+        for (let Y in X)
+          X[Y] && Z.append(Y, X[Y]);
+        Z.append("file", x.file), I.send(Z);
       });
   };
-  K(() => {
+  V(() => {
     M.current || F(n);
   }, []);
   const N = () => {
-    M.current && (M.current.abort(), r((R) => ({
-      ...R,
+    M.current && (M.current.abort(), r((x) => ({
+      ...x,
       [t]: !1
     })), w(!0), c(0));
   }, m = () => {
     n != null && n.file && (s(
-      (R) => R.map((j, H) => t === H ? {
+      (x) => x.map((j, H) => t === H ? {
         ...j,
         error: !1
       } : j)
-    ), F({ ...n, error: !1 }), w(!1), S(!1));
+    ), F({ ...n, error: !1 }), w(!1), R(!1));
   };
   return n.removed ? null : /* @__PURE__ */ g("li", { children: [
-    /* @__PURE__ */ e("div", { className: "file-icon", children: D[pe((p = n.file) == null ? void 0 : p.name)] ?? /* @__PURE__ */ e(be, { size: 33 }) }),
+    /* @__PURE__ */ e("div", { className: "file-icon", children: O[pe((p = n.file) == null ? void 0 : p.name)] ?? /* @__PURE__ */ e(be, { size: 33 }) }),
     /* @__PURE__ */ g("div", { className: "file", children: [
       /* @__PURE__ */ g("div", { className: "file-details", children: [
         /* @__PURE__ */ g("div", { className: "file-info", children: [
-          /* @__PURE__ */ e("span", { className: "file-name text-truncate", title: (T = n.file) == null ? void 0 : T.name, children: (y = n.file) == null ? void 0 : y.name }),
-          /* @__PURE__ */ e("span", { className: "file-size", children: Pe((E = n.file) == null ? void 0 : E.size) })
+          /* @__PURE__ */ e("span", { className: "file-name text-truncate", title: (D = n.file) == null ? void 0 : D.name, children: (y = n.file) == null ? void 0 : y.name }),
+          /* @__PURE__ */ e("span", { className: "file-size", children: Pe((P = n.file) == null ? void 0 : P.size) })
         ] }),
-        f ? /* @__PURE__ */ e(Yt, { color: "#5c5bb1", title: "Uploaded" }) : u || x ? /* @__PURE__ */ e(Qt, { className: "retry-upload", title: "Retry", onClick: m }) : /* @__PURE__ */ e(
+        u ? /* @__PURE__ */ e(Vt, { title: "Uploaded", className: "upload-success" }) : f || T ? /* @__PURE__ */ e(en, { className: "retry-upload", title: "Retry", onClick: m }) : /* @__PURE__ */ e(
           "div",
           {
             className: "rm-file",
             title: `${n.error ? "Remove" : "Abort Upload"}`,
-            onClick: n.error ? () => a(t) : N,
-            children: /* @__PURE__ */ e(Jt, {})
+            onClick: n.error ? () => i(t) : N,
+            children: /* @__PURE__ */ e(Zt, {})
           }
         )
       ] }),
       /* @__PURE__ */ e(
-        kn,
+        Nn,
         {
           percent: l,
-          isCanceled: u,
-          isCompleted: f,
+          isCanceled: f,
+          isCompleted: u,
           error: n.error
         }
       )
     ] })
   ] });
-}, Pn = ({
+}, En = ({
   fileUploadConfig: t,
   maxFileSize: n,
   acceptedFileTypes: s,
   onFileUploading: r,
   onFileUploaded: o
 }) => {
-  const [i, a] = b([]), [l, c] = b(!1), [f, h] = b({}), { currentFolder: u, currentPathFiles: w } = oe(), { onError: x } = ke(), S = re(null), D = (m) => {
-    m.key === "Enter" && S.current.click();
+  const [a, i] = b([]), [l, c] = b(!1), [u, h] = b({}), { currentFolder: f, currentPathFiles: w } = oe(), { onError: T } = ke(), R = re(null), O = (m) => {
+    m.key === "Enter" && R.current.click();
   }, M = (m) => {
     if (s && !s.includes(pe(m.name)))
       return "File type is not allowed.";
@@ -1256,19 +1256,19 @@ const Ct = ({ isLoading: t }) => {
     if (n && m.size > n) return `Maximum upload size is ${Pe(n, 0)}.`;
   }, C = (m) => {
     if (m = m.filter(
-      (p) => !i.some((T) => T.file.name.toLowerCase() === p.name.toLowerCase())
+      (p) => !a.some((D) => D.file.name.toLowerCase() === p.name.toLowerCase())
     ), m.length > 0) {
-      const p = m.map((T) => {
-        const y = r(T, u), E = M(T);
-        return E && x({ type: "upload", message: E }, T), {
-          file: T,
+      const p = m.map((D) => {
+        const y = r(D, f), P = M(D);
+        return P && T({ type: "upload", message: P }, D), {
+          file: D,
           appendData: y,
-          ...E && { error: E }
+          ...P && { error: P }
         };
       });
-      a((T) => [...T, ...p]);
+      i((D) => [...D, ...p]);
     }
-  }, P = (m) => {
+  }, E = (m) => {
     m.preventDefault(), c(!1);
     const p = Array.from(m.dataTransfer.files);
     C(p);
@@ -1276,36 +1276,36 @@ const Ct = ({ isLoading: t }) => {
     const p = Array.from(m.target.files);
     C(p);
   }, N = (m) => {
-    a((p) => {
-      const T = p.map((y, E) => m === E ? {
+    i((p) => {
+      const D = p.map((y, P) => m === P ? {
         ...y,
         removed: !0
       } : y);
-      return T.every((y) => !!y.removed) ? [] : T;
+      return D.every((y) => !!y.removed) ? [] : D;
     });
   };
-  return /* @__PURE__ */ g("div", { className: `fm-upload-file ${i.length > 0 ? "file-selcted" : ""}`, children: [
+  return /* @__PURE__ */ g("div", { className: `fm-upload-file ${a.length > 0 ? "file-selcted" : ""}`, children: [
     /* @__PURE__ */ g("div", { className: "select-files", children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: `draggable-file-input ${l ? "dragging" : ""}`,
-          onDrop: P,
+          onDrop: E,
           onDragOver: (m) => m.preventDefault(),
           onDragEnter: () => c(!0),
           onDragLeave: () => c(!1),
           children: /* @__PURE__ */ g("div", { className: "input-text", children: [
-            /* @__PURE__ */ e(Zt, { size: 30 }),
+            /* @__PURE__ */ e(Qt, { size: 30 }),
             /* @__PURE__ */ e("span", { children: "Drag files to upload" })
           ] })
         }
       ),
-      /* @__PURE__ */ e("div", { className: "btn-choose-file", children: /* @__PURE__ */ g(me, { padding: "0", onKeyDown: D, children: [
+      /* @__PURE__ */ e("div", { className: "btn-choose-file", children: /* @__PURE__ */ g(me, { padding: "0", onKeyDown: O, children: [
         /* @__PURE__ */ e("label", { htmlFor: "chooseFile", children: "Choose File" }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: S,
+            ref: R,
             type: "file",
             id: "chooseFile",
             className: "choose-file-input",
@@ -1316,17 +1316,17 @@ const Ct = ({ isLoading: t }) => {
         )
       ] }) })
     ] }),
-    i.length > 0 && /* @__PURE__ */ g("div", { className: "files-progress", children: [
-      /* @__PURE__ */ e("div", { className: "heading", children: Object.values(f).some((m) => m) ? /* @__PURE__ */ g(se, { children: [
+    a.length > 0 && /* @__PURE__ */ g("div", { className: "files-progress", children: [
+      /* @__PURE__ */ e("div", { className: "heading", children: Object.values(u).some((m) => m) ? /* @__PURE__ */ g(se, { children: [
         /* @__PURE__ */ e("h2", { children: "Uploading" }),
-        /* @__PURE__ */ e(at, { type: "cylon", color: "black", height: 18, width: 20 })
+        /* @__PURE__ */ e(lt, { type: "cylon", color: "black", height: 18, width: 20 })
       ] }) : /* @__PURE__ */ e("h2", { children: "Completed" }) }),
-      /* @__PURE__ */ e("ul", { children: i.map((m, p) => /* @__PURE__ */ e(
-        Nn,
+      /* @__PURE__ */ e("ul", { children: a.map((m, p) => /* @__PURE__ */ e(
+        Pn,
         {
           index: p,
           fileData: m,
-          setFiles: a,
+          setFiles: i,
           fileUploadConfig: t,
           setIsUploading: h,
           onFileUploaded: o,
@@ -1336,76 +1336,79 @@ const Ct = ({ isLoading: t }) => {
       )) })
     ] })
   ] });
-}, Ge = ["jpg", "jpeg", "png"], Je = ["mp4", "mov", "avi"], Ze = ["mp3", "wav", "m4a"], Qe = ["txt", "pdf"], En = ({ filePreviewPath: t }) => {
-  var w;
-  const [n, s] = b(!0), [r, o] = b(!1), { selectedFiles: i } = le(), a = Fe(73), l = (w = pe(i[0].name)) == null ? void 0 : w.toLowerCase(), c = `${t}${i[0].path}`, f = () => {
-    s(!1), o(!1);
-  }, h = () => {
-    s(!1), o(!0);
-  }, u = () => {
-    window.location.href = c;
+}, Je = ["jpg", "jpeg", "png"], Ze = ["mp4", "mov", "avi"], Qe = ["mp3", "wav", "m4a"], et = ["txt", "pdf"], Rn = ({ filePreviewPath: t, filePreviewComponent: n }) => {
+  var R;
+  const [s, r] = b(!0), [o, a] = b(!1), { selectedFiles: i } = le(), l = Fe(73), c = (R = pe(i[0].name)) == null ? void 0 : R.toLowerCase(), u = `${t}${i[0].path}`, h = $e(
+    () => n == null ? void 0 : n(i[0]),
+    [n]
+  ), f = () => {
+    r(!1), a(!1);
+  }, w = () => {
+    r(!1), a(!0);
+  }, T = () => {
+    window.location.href = u;
   };
-  return /* @__PURE__ */ g("section", { className: `file-previewer ${l === "pdf" ? "pdf-previewer" : ""}`, children: [
-    r || ![
-      ...Ge,
+  return Lt.isValidElement(h) ? h : /* @__PURE__ */ g("section", { className: `file-previewer ${c === "pdf" ? "pdf-previewer" : ""}`, children: [
+    o || ![
       ...Je,
       ...Ze,
-      ...Qe
-    ].includes(l) && /* @__PURE__ */ g("div", { className: "preview-error", children: [
-      /* @__PURE__ */ e("span", { className: "error-icon", children: a[l] ?? /* @__PURE__ */ e(Vt, { size: 73 }) }),
+      ...Qe,
+      ...et
+    ].includes(c) && /* @__PURE__ */ g("div", { className: "preview-error", children: [
+      /* @__PURE__ */ e("span", { className: "error-icon", children: l[c] ?? /* @__PURE__ */ e(Xt, { size: 73 }) }),
       /* @__PURE__ */ e("span", { className: "error-msg", children: "Sorry! Preview is not available for this file." }),
       /* @__PURE__ */ g("div", { className: "file-info", children: [
         /* @__PURE__ */ e("span", { className: "file-name", children: i[0].name }),
         i[0].size && /* @__PURE__ */ e("span", { children: "-" }),
         /* @__PURE__ */ e("span", { className: "file-size", children: Pe(i[0].size) })
       ] }),
-      /* @__PURE__ */ e(me, { onClick: u, padding: "0.45rem .9rem", children: /* @__PURE__ */ g("div", { className: "download-btn", children: [
-        /* @__PURE__ */ e($e, { size: 18 }),
+      /* @__PURE__ */ e(me, { onClick: T, padding: "0.45rem .9rem", children: /* @__PURE__ */ g("div", { className: "download-btn", children: [
+        /* @__PURE__ */ e(je, { size: 18 }),
         /* @__PURE__ */ e("span", { children: "Download" })
       ] }) })
     ] }),
-    Ge.includes(l) && /* @__PURE__ */ g(se, { children: [
-      /* @__PURE__ */ e(Ct, { isLoading: n }),
+    Je.includes(c) && /* @__PURE__ */ g(se, { children: [
+      /* @__PURE__ */ e(Ct, { isLoading: s }),
       /* @__PURE__ */ e(
         "img",
         {
-          src: c,
+          src: u,
           alt: "Preview Unavailable",
-          className: `photo-popup-image ${n ? "img-loading" : ""}`,
+          className: `photo-popup-image ${s ? "img-loading" : ""}`,
           onLoad: f,
-          onError: h,
+          onError: w,
           loading: "lazy"
         }
       )
     ] }),
-    Je.includes(l) && /* @__PURE__ */ e("video", { src: c, className: "video-preview", controls: !0, autoPlay: !0 }),
-    Ze.includes(l) && /* @__PURE__ */ e("audio", { src: c, controls: !0, autoPlay: !0, className: "audio-preview" }),
-    Qe.includes(l) && /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(
+    Ze.includes(c) && /* @__PURE__ */ e("video", { src: u, className: "video-preview", controls: !0, autoPlay: !0 }),
+    Qe.includes(c) && /* @__PURE__ */ e("audio", { src: u, controls: !0, autoPlay: !0, className: "audio-preview" }),
+    et.includes(c) && /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(
       "iframe",
       {
-        src: c,
+        src: u,
         onLoad: f,
-        onError: h,
+        onError: w,
         frameBorder: "0",
-        className: `photo-popup-iframe ${n ? "img-loading" : ""}`
+        className: `photo-popup-iframe ${s ? "img-loading" : ""}`
       }
     ) })
   ] });
-}, xe = (t) => t.toLowerCase(), Q = (t, n, s = !1) => {
-  const r = re(/* @__PURE__ */ new Set([])), o = lt(() => new Set(t.map((c) => xe(c))), [t]), i = (c) => {
+}, xe = (t) => t.toLowerCase(), ee = (t, n, s = !1) => {
+  const r = re(/* @__PURE__ */ new Set([])), o = $e(() => new Set(t.map((c) => xe(c))), [t]), a = (c) => {
     if (!c.repeat && (r.current.add(xe(c.key)), o.isSubsetOf(r.current) && !s)) {
       c.preventDefault(), n(c);
       return;
     }
-  }, a = (c) => {
+  }, i = (c) => {
     r.current.delete(xe(c.key));
   }, l = () => {
     r.current.clear();
   };
-  K(() => (window.addEventListener("keydown", i), window.addEventListener("keyup", a), window.addEventListener("blur", l), () => {
-    window.removeEventListener("keydown", i), window.removeEventListener("keyup", a), window.removeEventListener("blur", l);
+  V(() => (window.addEventListener("keydown", a), window.addEventListener("keyup", i), window.addEventListener("blur", l), () => {
+    window.removeEventListener("keydown", a), window.removeEventListener("keyup", i), window.removeEventListener("blur", l);
   }), [o, n, s]);
-}, ee = {
+}, te = {
   createFolder: ["Alt", "Shift", "N"],
   uploadFiles: ["Control", "U"],
   cut: ["Control", "X"],
@@ -1427,61 +1430,62 @@ const Ct = ({ isLoading: t }) => {
   // Act as Ctrl + Shift + 2 but could cause problems for QWERTZ or DVORAK etc. keyborad layouts.
   refresh: ["F5"],
   clearSelection: ["Escape"]
-}, Rn = (t, n) => {
-  const { setClipBoard: s, handleCutCopy: r, handlePasting: o } = Ne(), { currentFolder: i, currentPathFiles: a } = oe(), { setSelectedFiles: l, handleDownload: c } = le(), { setActiveLayout: f } = ce(), h = () => {
+}, xn = (t, n) => {
+  const { setClipBoard: s, handleCutCopy: r, handlePasting: o } = Ne(), { currentFolder: a, currentPathFiles: i } = oe(), { setSelectedFiles: l, handleDownload: c } = le(), { setActiveLayout: u } = ce(), h = () => {
     t.show("createFolder");
-  }, u = () => {
+  }, f = () => {
     t.show("uploadFile");
   }, w = () => {
     r(!0);
-  }, x = () => {
+  }, T = () => {
     r(!1);
-  }, S = () => {
-    o(i);
-  }, D = () => {
+  }, R = () => {
+    o(a);
+  }, O = () => {
     t.show("rename");
   }, M = () => {
     c();
   }, C = () => {
     t.show("delete");
-  }, P = () => {
-    a.length > 0 && l([a[0]]);
+  }, E = () => {
+    i.length > 0 && l([i[0]]);
   }, F = () => {
-    a.length > 0 && l([a.at(-1)]);
+    i.length > 0 && l([i.at(-1)]);
   }, N = () => {
-    l(a);
+    l(i);
   }, m = () => {
-    l((E) => E.length > 0 ? [] : E);
+    l((P) => P.length > 0 ? [] : P);
   }, p = () => {
     fe(n, "onRefresh"), s(null);
-  }, T = () => {
-    f("grid");
+  }, D = () => {
+    u("grid");
   }, y = () => {
-    f("list");
+    u("list");
   };
-  Q(ee.createFolder, h, t.isActive), Q(ee.uploadFiles, u, t.isActive), Q(ee.cut, w, t.isActive), Q(ee.copy, x, t.isActive), Q(ee.paste, S, t.isActive), Q(ee.rename, D, t.isActive), Q(ee.download, M, t.isActive), Q(ee.delete, C, t.isActive), Q(ee.jumpToFirst, P, t.isActive), Q(ee.jumpToLast, F, t.isActive), Q(ee.selectAll, N, t.isActive), Q(ee.clearSelection, m, t.isActive), Q(ee.refresh, p, t.isActive), Q(ee.gridLayout, T, t.isActive), Q(ee.listLayout, y, t.isActive);
-}, xn = ({
+  ee(te.createFolder, h, t.isActive), ee(te.uploadFiles, f, t.isActive), ee(te.cut, w, t.isActive), ee(te.copy, T, t.isActive), ee(te.paste, R, t.isActive), ee(te.rename, O, t.isActive), ee(te.download, M, t.isActive), ee(te.delete, C, t.isActive), ee(te.jumpToFirst, E, t.isActive), ee(te.jumpToLast, F, t.isActive), ee(te.selectAll, N, t.isActive), ee(te.clearSelection, m, t.isActive), ee(te.refresh, p, t.isActive), ee(te.gridLayout, D, t.isActive), ee(te.listLayout, y, t.isActive);
+}, Tn = ({
   fileUploadConfig: t,
   onFileUploading: n,
   onFileUploaded: s,
   onDelete: r,
   onRefresh: o,
-  maxFileSize: i,
-  filePreviewPath: a,
-  acceptedFileTypes: l,
-  triggerAction: c
+  maxFileSize: a,
+  filePreviewPath: i,
+  filePreviewComponent: l,
+  acceptedFileTypes: c,
+  triggerAction: u
 }) => {
-  const [f, h] = b(null), { selectedFiles: u } = le();
-  Rn(c, o);
-  const w = {
+  const [h, f] = b(null), { selectedFiles: w } = le();
+  xn(u, o);
+  const T = {
     uploadFile: {
       title: "Upload",
       component: /* @__PURE__ */ e(
-        Pn,
+        En,
         {
           fileUploadConfig: t,
-          maxFileSize: i,
-          acceptedFileTypes: l,
+          maxFileSize: a,
+          acceptedFileTypes: c,
           onFileUploading: n,
           onFileUploaded: s
         }
@@ -1490,66 +1494,72 @@ const Ct = ({ isLoading: t }) => {
     },
     delete: {
       title: "Delete",
-      component: /* @__PURE__ */ e(Fn, { triggerAction: c, onDelete: r }),
+      component: /* @__PURE__ */ e(kn, { triggerAction: u, onDelete: r }),
       width: "25%"
     },
     previewFile: {
       title: "Preview",
-      component: /* @__PURE__ */ e(En, { filePreviewPath: a }),
+      component: /* @__PURE__ */ e(
+        Rn,
+        {
+          filePreviewPath: i,
+          filePreviewComponent: l
+        }
+      ),
       width: "50%"
     }
   };
-  if (K(() => {
-    if (c.isActive) {
-      const x = c.actionType;
-      x === "previewFile" && (w[x].title = (u == null ? void 0 : u.name) ?? "Preview"), h(w[x]);
+  if (V(() => {
+    if (u.isActive) {
+      const R = u.actionType;
+      R === "previewFile" && (T[R].title = (w == null ? void 0 : w.name) ?? "Preview"), f(T[R]);
     } else
-      h(null);
-  }, [c.isActive]), f)
+      f(null);
+  }, [u.isActive]), h)
     return /* @__PURE__ */ e(
       Tt,
       {
-        heading: f.title,
-        show: c.isActive,
-        setShow: c.close,
-        dialogWidth: f.width,
-        children: f == null ? void 0 : f.component
+        heading: h.title,
+        show: u.isActive,
+        setShow: u.close,
+        dialogWidth: h.width,
+        children: h == null ? void 0 : h.component
       }
     );
-}, Tn = () => {
+}, Dn = () => {
   const [t, n] = b(!1), [s, r] = b(null);
   return {
     isActive: t,
     actionType: s,
-    show: (a) => {
-      n(!0), r(a);
+    show: (i) => {
+      n(!0), r(i);
     },
     close: () => {
       n(!1), r(null);
     }
   };
-}, Dn = (t, n) => {
-  const [s, r] = b({ col1: t, col2: n }), [o, i] = b(!1), a = re(null);
+}, On = (t, n) => {
+  const [s, r] = b({ col1: t, col2: n }), [o, a] = b(!1), i = re(null);
   return {
-    containerRef: a,
+    containerRef: i,
     colSizes: s,
     setColSizes: r,
     isDragging: o,
     handleMouseDown: () => {
-      i(!0);
+      a(!0);
     },
     handleMouseUp: () => {
-      i(!1);
+      a(!1);
     },
     handleMouseMove: (h) => {
       if (!o) return;
       h.preventDefault();
-      const w = a.current.getBoundingClientRect(), x = (h.clientX - w.left) / w.width * 100;
-      x >= 15 && x <= 60 && r({ col1: x, col2: 100 - x });
+      const w = i.current.getBoundingClientRect(), T = (h.clientX - w.left) / w.width * 100;
+      T >= 15 && T <= 60 && r({ col1: T, col2: 100 - T });
     }
   };
 };
-function On(t) {
+function Sn(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 var Ae = { exports: {} };
@@ -1558,103 +1568,103 @@ object-assign
 (c) Sindre Sorhus
 @license MIT
 */
-var Te, et;
-function Sn() {
-  if (et) return Te;
-  et = 1;
+var Te, tt;
+function Mn() {
+  if (tt) return Te;
+  tt = 1;
   var t = Object.getOwnPropertySymbols, n = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
-  function r(i) {
-    if (i == null)
+  function r(a) {
+    if (a == null)
       throw new TypeError("Object.assign cannot be called with null or undefined");
-    return Object(i);
+    return Object(a);
   }
   function o() {
     try {
       if (!Object.assign)
         return !1;
-      var i = new String("abc");
-      if (i[5] = "de", Object.getOwnPropertyNames(i)[0] === "5")
+      var a = new String("abc");
+      if (a[5] = "de", Object.getOwnPropertyNames(a)[0] === "5")
         return !1;
-      for (var a = {}, l = 0; l < 10; l++)
-        a["_" + String.fromCharCode(l)] = l;
-      var c = Object.getOwnPropertyNames(a).map(function(h) {
-        return a[h];
+      for (var i = {}, l = 0; l < 10; l++)
+        i["_" + String.fromCharCode(l)] = l;
+      var c = Object.getOwnPropertyNames(i).map(function(h) {
+        return i[h];
       });
       if (c.join("") !== "0123456789")
         return !1;
-      var f = {};
+      var u = {};
       return "abcdefghijklmnopqrst".split("").forEach(function(h) {
-        f[h] = h;
-      }), Object.keys(Object.assign({}, f)).join("") === "abcdefghijklmnopqrst";
+        u[h] = h;
+      }), Object.keys(Object.assign({}, u)).join("") === "abcdefghijklmnopqrst";
     } catch {
       return !1;
     }
   }
-  return Te = o() ? Object.assign : function(i, a) {
-    for (var l, c = r(i), f, h = 1; h < arguments.length; h++) {
+  return Te = o() ? Object.assign : function(a, i) {
+    for (var l, c = r(a), u, h = 1; h < arguments.length; h++) {
       l = Object(arguments[h]);
-      for (var u in l)
-        n.call(l, u) && (c[u] = l[u]);
+      for (var f in l)
+        n.call(l, f) && (c[f] = l[f]);
       if (t) {
-        f = t(l);
-        for (var w = 0; w < f.length; w++)
-          s.call(l, f[w]) && (c[f[w]] = l[f[w]]);
+        u = t(l);
+        for (var w = 0; w < u.length; w++)
+          s.call(l, u[w]) && (c[u[w]] = l[u[w]]);
       }
     }
     return c;
   }, Te;
 }
-var De, tt;
-function je() {
-  if (tt) return De;
-  tt = 1;
+var De, nt;
+function ze() {
+  if (nt) return De;
+  nt = 1;
   var t = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
   return De = t, De;
 }
-var Oe, nt;
+var Oe, rt;
 function Ot() {
-  return nt || (nt = 1, Oe = Function.call.bind(Object.prototype.hasOwnProperty)), Oe;
+  return rt || (rt = 1, Oe = Function.call.bind(Object.prototype.hasOwnProperty)), Oe;
 }
-var Se, rt;
-function Mn() {
-  if (rt) return Se;
-  rt = 1;
+var Se, st;
+function Ln() {
+  if (st) return Se;
+  st = 1;
   var t = function() {
   };
   if (process.env.NODE_ENV !== "production") {
-    var n = je(), s = {}, r = Ot();
-    t = function(i) {
-      var a = "Warning: " + i;
-      typeof console < "u" && console.error(a);
+    var n = ze(), s = {}, r = Ot();
+    t = function(a) {
+      var i = "Warning: " + a;
+      typeof console < "u" && console.error(i);
       try {
-        throw new Error(a);
+        throw new Error(i);
       } catch {
       }
     };
   }
-  function o(i, a, l, c, f) {
+  function o(a, i, l, c, u) {
     if (process.env.NODE_ENV !== "production") {
-      for (var h in i)
-        if (r(i, h)) {
-          var u;
+      for (var h in a)
+        if (r(a, h)) {
+          var f;
           try {
-            if (typeof i[h] != "function") {
+            if (typeof a[h] != "function") {
               var w = Error(
-                (c || "React class") + ": " + l + " type `" + h + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[h] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+                (c || "React class") + ": " + l + " type `" + h + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof a[h] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
               );
               throw w.name = "Invariant Violation", w;
             }
-            u = i[h](a, h, c, l, null, n);
-          } catch (S) {
-            u = S;
+            f = a[h](i, h, c, l, null, n);
+          } catch (R) {
+            f = R;
           }
-          if (u && !(u instanceof Error) && t(
-            (c || "React class") + ": type specification of " + l + " `" + h + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof u + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
-          ), u instanceof Error && !(u.message in s)) {
-            s[u.message] = !0;
-            var x = f ? f() : "";
+          if (f && !(f instanceof Error) && t(
+            (c || "React class") + ": type specification of " + l + " `" + h + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof f + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), f instanceof Error && !(f.message in s)) {
+            s[f.message] = !0;
+            var T = u ? u() : "";
             t(
-              "Failed " + l + " type: " + u.message + (x ?? "")
+              "Failed " + l + " type: " + f.message + (T ?? "")
             );
           }
         }
@@ -1664,13 +1674,13 @@ function Mn() {
     process.env.NODE_ENV !== "production" && (s = {});
   }, Se = o, Se;
 }
-var Me, st;
-function Ln() {
-  if (st) return Me;
-  st = 1;
-  var t = yt, n = Sn(), s = je(), r = Ot(), o = Mn(), i = function() {
+var Me, ot;
+function In() {
+  if (ot) return Me;
+  ot = 1;
+  var t = yt, n = Mn(), s = ze(), r = Ot(), o = Ln(), a = function() {
   };
-  process.env.NODE_ENV !== "production" && (i = function(l) {
+  process.env.NODE_ENV !== "production" && (a = function(l) {
     var c = "Warning: " + l;
     typeof console < "u" && console.error(c);
     try {
@@ -1678,17 +1688,17 @@ function Ln() {
     } catch {
     }
   });
-  function a() {
+  function i() {
     return null;
   }
   return Me = function(l, c) {
-    var f = typeof Symbol == "function" && Symbol.iterator, h = "@@iterator";
-    function u(d) {
-      var v = d && (f && d[f] || d[h]);
+    var u = typeof Symbol == "function" && Symbol.iterator, h = "@@iterator";
+    function f(d) {
+      var v = d && (u && d[u] || d[h]);
       if (typeof v == "function")
         return v;
     }
-    var w = "<<anonymous>>", x = {
+    var w = "<<anonymous>>", T = {
       array: C("array"),
       bigint: C("bigint"),
       bool: C("boolean"),
@@ -1697,55 +1707,55 @@ function Ln() {
       object: C("object"),
       string: C("string"),
       symbol: C("symbol"),
-      any: P(),
+      any: E(),
       arrayOf: F,
       element: N(),
       elementType: m(),
       instanceOf: p,
-      node: R(),
+      node: x(),
       objectOf: y,
-      oneOf: T,
-      oneOfType: E,
+      oneOf: D,
+      oneOfType: P,
       shape: H,
       exact: I
     };
-    function S(d, v) {
+    function R(d, v) {
       return d === v ? d !== 0 || 1 / d === 1 / v : d !== d && v !== v;
     }
-    function D(d, v) {
+    function O(d, v) {
       this.message = d, this.data = v && typeof v == "object" ? v : {}, this.stack = "";
     }
-    D.prototype = Error.prototype;
+    O.prototype = Error.prototype;
     function M(d) {
       if (process.env.NODE_ENV !== "production")
         var v = {}, $ = 0;
-      function A(z, k, L, B, _, U, Z) {
-        if (B = B || w, U = U || L, Z !== s) {
+      function A(W, k, L, U, _, q, Q) {
+        if (U = U || w, q = q || L, Q !== s) {
           if (c) {
             var G = new Error(
               "Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types"
             );
             throw G.name = "Invariant Violation", G;
           } else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
-            var ie = B + ":" + L;
+            var ie = U + ":" + L;
             !v[ie] && // Avoid spamming the console because they are often not actionable except for lib authors
-            $ < 3 && (i(
-              "You are manually calling a React.PropTypes validation function for the `" + U + "` prop on `" + B + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
+            $ < 3 && (a(
+              "You are manually calling a React.PropTypes validation function for the `" + q + "` prop on `" + U + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
             ), v[ie] = !0, $++);
           }
         }
-        return k[L] == null ? z ? k[L] === null ? new D("The " + _ + " `" + U + "` is marked as required " + ("in `" + B + "`, but its value is `null`.")) : new D("The " + _ + " `" + U + "` is marked as required in " + ("`" + B + "`, but its value is `undefined`.")) : null : d(k, L, B, _, U);
+        return k[L] == null ? W ? k[L] === null ? new O("The " + _ + " `" + q + "` is marked as required " + ("in `" + U + "`, but its value is `null`.")) : new O("The " + _ + " `" + q + "` is marked as required in " + ("`" + U + "`, but its value is `undefined`.")) : null : d(k, L, U, _, q);
       }
-      var O = A.bind(null, !1);
-      return O.isRequired = A.bind(null, !0), O;
+      var S = A.bind(null, !1);
+      return S.isRequired = A.bind(null, !0), S;
     }
     function C(d) {
-      function v($, A, O, z, k, L) {
-        var B = $[A], _ = X(B);
+      function v($, A, S, W, k, L) {
+        var U = $[A], _ = X(U);
         if (_ !== d) {
-          var U = V(B);
-          return new D(
-            "Invalid " + z + " `" + k + "` of type " + ("`" + U + "` supplied to `" + O + "`, expected ") + ("`" + d + "`."),
+          var q = Y(U);
+          return new O(
+            "Invalid " + W + " `" + k + "` of type " + ("`" + q + "` supplied to `" + S + "`, expected ") + ("`" + d + "`."),
             { expectedType: d }
           );
         }
@@ -1753,159 +1763,159 @@ function Ln() {
       }
       return M(v);
     }
-    function P() {
-      return M(a);
+    function E() {
+      return M(i);
     }
     function F(d) {
-      function v($, A, O, z, k) {
+      function v($, A, S, W, k) {
         if (typeof d != "function")
-          return new D("Property `" + k + "` of component `" + O + "` has invalid PropType notation inside arrayOf.");
+          return new O("Property `" + k + "` of component `" + S + "` has invalid PropType notation inside arrayOf.");
         var L = $[A];
         if (!Array.isArray(L)) {
-          var B = X(L);
-          return new D("Invalid " + z + " `" + k + "` of type " + ("`" + B + "` supplied to `" + O + "`, expected an array."));
+          var U = X(L);
+          return new O("Invalid " + W + " `" + k + "` of type " + ("`" + U + "` supplied to `" + S + "`, expected an array."));
         }
         for (var _ = 0; _ < L.length; _++) {
-          var U = d(L, _, O, z, k + "[" + _ + "]", s);
-          if (U instanceof Error)
-            return U;
+          var q = d(L, _, S, W, k + "[" + _ + "]", s);
+          if (q instanceof Error)
+            return q;
         }
         return null;
       }
       return M(v);
     }
     function N() {
-      function d(v, $, A, O, z) {
+      function d(v, $, A, S, W) {
         var k = v[$];
         if (!l(k)) {
           var L = X(k);
-          return new D("Invalid " + O + " `" + z + "` of type " + ("`" + L + "` supplied to `" + A + "`, expected a single ReactElement."));
+          return new O("Invalid " + S + " `" + W + "` of type " + ("`" + L + "` supplied to `" + A + "`, expected a single ReactElement."));
         }
         return null;
       }
       return M(d);
     }
     function m() {
-      function d(v, $, A, O, z) {
+      function d(v, $, A, S, W) {
         var k = v[$];
         if (!t.isValidElementType(k)) {
           var L = X(k);
-          return new D("Invalid " + O + " `" + z + "` of type " + ("`" + L + "` supplied to `" + A + "`, expected a single ReactElement type."));
+          return new O("Invalid " + S + " `" + W + "` of type " + ("`" + L + "` supplied to `" + A + "`, expected a single ReactElement type."));
         }
         return null;
       }
       return M(d);
     }
     function p(d) {
-      function v($, A, O, z, k) {
+      function v($, A, S, W, k) {
         if (!($[A] instanceof d)) {
-          var L = d.name || w, B = Ce($[A]);
-          return new D("Invalid " + z + " `" + k + "` of type " + ("`" + B + "` supplied to `" + O + "`, expected ") + ("instance of `" + L + "`."));
+          var L = d.name || w, U = Ce($[A]);
+          return new O("Invalid " + W + " `" + k + "` of type " + ("`" + U + "` supplied to `" + S + "`, expected ") + ("instance of `" + L + "`."));
         }
         return null;
       }
       return M(v);
     }
-    function T(d) {
+    function D(d) {
       if (!Array.isArray(d))
-        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? i(
+        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? a(
           "Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."
-        ) : i("Invalid argument supplied to oneOf, expected an array.")), a;
-      function v($, A, O, z, k) {
-        for (var L = $[A], B = 0; B < d.length; B++)
-          if (S(L, d[B]))
+        ) : a("Invalid argument supplied to oneOf, expected an array.")), i;
+      function v($, A, S, W, k) {
+        for (var L = $[A], U = 0; U < d.length; U++)
+          if (R(L, d[U]))
             return null;
-        var _ = JSON.stringify(d, function(Z, G) {
-          var ie = V(G);
+        var _ = JSON.stringify(d, function(Q, G) {
+          var ie = Y(G);
           return ie === "symbol" ? String(G) : G;
         });
-        return new D("Invalid " + z + " `" + k + "` of value `" + String(L) + "` " + ("supplied to `" + O + "`, expected one of " + _ + "."));
+        return new O("Invalid " + W + " `" + k + "` of value `" + String(L) + "` " + ("supplied to `" + S + "`, expected one of " + _ + "."));
       }
       return M(v);
     }
     function y(d) {
-      function v($, A, O, z, k) {
+      function v($, A, S, W, k) {
         if (typeof d != "function")
-          return new D("Property `" + k + "` of component `" + O + "` has invalid PropType notation inside objectOf.");
-        var L = $[A], B = X(L);
-        if (B !== "object")
-          return new D("Invalid " + z + " `" + k + "` of type " + ("`" + B + "` supplied to `" + O + "`, expected an object."));
+          return new O("Property `" + k + "` of component `" + S + "` has invalid PropType notation inside objectOf.");
+        var L = $[A], U = X(L);
+        if (U !== "object")
+          return new O("Invalid " + W + " `" + k + "` of type " + ("`" + U + "` supplied to `" + S + "`, expected an object."));
         for (var _ in L)
           if (r(L, _)) {
-            var U = d(L, _, O, z, k + "." + _, s);
-            if (U instanceof Error)
-              return U;
+            var q = d(L, _, S, W, k + "." + _, s);
+            if (q instanceof Error)
+              return q;
           }
         return null;
       }
       return M(v);
     }
-    function E(d) {
+    function P(d) {
       if (!Array.isArray(d))
-        return process.env.NODE_ENV !== "production" && i("Invalid argument supplied to oneOfType, expected an instance of array."), a;
+        return process.env.NODE_ENV !== "production" && a("Invalid argument supplied to oneOfType, expected an instance of array."), i;
       for (var v = 0; v < d.length; v++) {
         var $ = d[v];
         if (typeof $ != "function")
-          return i(
+          return a(
             "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + de($) + " at index " + v + "."
-          ), a;
+          ), i;
       }
-      function A(O, z, k, L, B) {
-        for (var _ = [], U = 0; U < d.length; U++) {
-          var Z = d[U], G = Z(O, z, k, L, B, s);
+      function A(S, W, k, L, U) {
+        for (var _ = [], q = 0; q < d.length; q++) {
+          var Q = d[q], G = Q(S, W, k, L, U, s);
           if (G == null)
             return null;
           G.data && r(G.data, "expectedType") && _.push(G.data.expectedType);
         }
         var ie = _.length > 0 ? ", expected one of type [" + _.join(", ") + "]" : "";
-        return new D("Invalid " + L + " `" + B + "` supplied to " + ("`" + k + "`" + ie + "."));
+        return new O("Invalid " + L + " `" + U + "` supplied to " + ("`" + k + "`" + ie + "."));
       }
       return M(A);
     }
-    function R() {
-      function d(v, $, A, O, z) {
-        return Y(v[$]) ? null : new D("Invalid " + O + " `" + z + "` supplied to " + ("`" + A + "`, expected a ReactNode."));
+    function x() {
+      function d(v, $, A, S, W) {
+        return K(v[$]) ? null : new O("Invalid " + S + " `" + W + "` supplied to " + ("`" + A + "`, expected a ReactNode."));
       }
       return M(d);
     }
-    function j(d, v, $, A, O) {
-      return new D(
-        (d || "React class") + ": " + v + " type `" + $ + "." + A + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + O + "`."
+    function j(d, v, $, A, S) {
+      return new O(
+        (d || "React class") + ": " + v + " type `" + $ + "." + A + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + S + "`."
       );
     }
     function H(d) {
-      function v($, A, O, z, k) {
-        var L = $[A], B = X(L);
-        if (B !== "object")
-          return new D("Invalid " + z + " `" + k + "` of type `" + B + "` " + ("supplied to `" + O + "`, expected `object`."));
+      function v($, A, S, W, k) {
+        var L = $[A], U = X(L);
+        if (U !== "object")
+          return new O("Invalid " + W + " `" + k + "` of type `" + U + "` " + ("supplied to `" + S + "`, expected `object`."));
         for (var _ in d) {
-          var U = d[_];
-          if (typeof U != "function")
-            return j(O, z, k, _, V(U));
-          var Z = U(L, _, O, z, k + "." + _, s);
-          if (Z)
-            return Z;
+          var q = d[_];
+          if (typeof q != "function")
+            return j(S, W, k, _, Y(q));
+          var Q = q(L, _, S, W, k + "." + _, s);
+          if (Q)
+            return Q;
         }
         return null;
       }
       return M(v);
     }
     function I(d) {
-      function v($, A, O, z, k) {
-        var L = $[A], B = X(L);
-        if (B !== "object")
-          return new D("Invalid " + z + " `" + k + "` of type `" + B + "` " + ("supplied to `" + O + "`, expected `object`."));
+      function v($, A, S, W, k) {
+        var L = $[A], U = X(L);
+        if (U !== "object")
+          return new O("Invalid " + W + " `" + k + "` of type `" + U + "` " + ("supplied to `" + S + "`, expected `object`."));
         var _ = n({}, $[A], d);
-        for (var U in _) {
-          var Z = d[U];
-          if (r(d, U) && typeof Z != "function")
-            return j(O, z, k, U, V(Z));
-          if (!Z)
-            return new D(
-              "Invalid " + z + " `" + k + "` key `" + U + "` supplied to `" + O + "`.\nBad object: " + JSON.stringify($[A], null, "  ") + `
+        for (var q in _) {
+          var Q = d[q];
+          if (r(d, q) && typeof Q != "function")
+            return j(S, W, k, q, Y(Q));
+          if (!Q)
+            return new O(
+              "Invalid " + W + " `" + k + "` key `" + q + "` supplied to `" + S + "`.\nBad object: " + JSON.stringify($[A], null, "  ") + `
 Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
             );
-          var G = Z(L, U, O, z, k + "." + U, s);
+          var G = Q(L, q, S, W, k + "." + q, s);
           if (G)
             return G;
         }
@@ -1913,7 +1923,7 @@ Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
       }
       return M(v);
     }
-    function Y(d) {
+    function K(d) {
       switch (typeof d) {
         case "number":
         case "string":
@@ -1923,20 +1933,20 @@ Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
           return !d;
         case "object":
           if (Array.isArray(d))
-            return d.every(Y);
+            return d.every(K);
           if (d === null || l(d))
             return !0;
-          var v = u(d);
+          var v = f(d);
           if (v) {
             var $ = v.call(d), A;
             if (v !== d.entries) {
               for (; !(A = $.next()).done; )
-                if (!Y(A.value))
+                if (!K(A.value))
                   return !1;
             } else
               for (; !(A = $.next()).done; ) {
-                var O = A.value;
-                if (O && !Y(O[1]))
+                var S = A.value;
+                if (S && !K(S[1]))
                   return !1;
               }
           } else
@@ -1946,14 +1956,14 @@ Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
           return !1;
       }
     }
-    function te(d, v) {
+    function Z(d, v) {
       return d === "symbol" ? !0 : v ? v["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && v instanceof Symbol : !1;
     }
     function X(d) {
       var v = typeof d;
-      return Array.isArray(d) ? "array" : d instanceof RegExp ? "object" : te(v, d) ? "symbol" : v;
+      return Array.isArray(d) ? "array" : d instanceof RegExp ? "object" : Z(v, d) ? "symbol" : v;
     }
-    function V(d) {
+    function Y(d) {
       if (typeof d > "u" || d === null)
         return "" + d;
       var v = X(d);
@@ -1966,7 +1976,7 @@ Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
       return v;
     }
     function de(d) {
-      var v = V(d);
+      var v = Y(d);
       switch (v) {
         case "array":
         case "object":
@@ -1982,21 +1992,21 @@ Valid keys: ` + JSON.stringify(Object.keys(d), null, "  ")
     function Ce(d) {
       return !d.constructor || !d.constructor.name ? w : d.constructor.name;
     }
-    return x.checkPropTypes = o, x.resetWarningCache = o.resetWarningCache, x.PropTypes = x, x;
+    return T.checkPropTypes = o, T.resetWarningCache = o.resetWarningCache, T.PropTypes = T, T;
   }, Me;
 }
-var Le, ot;
-function In() {
-  if (ot) return Le;
-  ot = 1;
-  var t = je();
+var Le, it;
+function An() {
+  if (it) return Le;
+  it = 1;
+  var t = ze();
   function n() {
   }
   function s() {
   }
   return s.resetWarningCache = n, Le = function() {
-    function r(a, l, c, f, h, u) {
-      if (u !== t) {
+    function r(i, l, c, u, h, f) {
+      if (f !== t) {
         var w = new Error(
           "Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
         );
@@ -2007,7 +2017,7 @@ function In() {
     function o() {
       return r;
     }
-    var i = {
+    var a = {
       array: r,
       bigint: r,
       bool: r,
@@ -2030,22 +2040,22 @@ function In() {
       checkPropTypes: s,
       resetWarningCache: n
     };
-    return i.PropTypes = i, i;
+    return a.PropTypes = a, a;
   }, Le;
 }
 if (process.env.NODE_ENV !== "production") {
-  var An = yt, $n = !0;
-  Ae.exports = Ln()(An.isElement, $n);
+  var $n = yt, jn = !0;
+  Ae.exports = In()($n.isElement, jn);
 } else
-  Ae.exports = In()();
-var jn = Ae.exports;
-const q = /* @__PURE__ */ On(jn), zn = (t, n, s) => {
+  Ae.exports = An()();
+var zn = Ae.exports;
+const z = /* @__PURE__ */ Sn(zn), Wn = (t, n, s) => {
   const r = t[n];
   if (r && isNaN(Date.parse(r)))
     return new Error(
       `Invalid prop \`${n}\` supplied to \`${s}\`. Expected a valid date string (ISO 8601) but received \`${r}\`.`
     );
-}, it = (t, n, s) => {
+}, at = (t, n, s) => {
   const r = t[n];
   try {
     new URL(r);
@@ -2062,137 +2072,141 @@ const q = /* @__PURE__ */ On(jn), zn = (t, n, s) => {
   onCreateFolder: r,
   onFileUploading: o = () => {
   },
-  onFileUploaded: i = () => {
+  onFileUploaded: a = () => {
   },
-  onPaste: a,
+  onPaste: i,
   onRename: l,
   onDownload: c,
-  onDelete: f = () => null,
+  onDelete: u = () => null,
   onLayoutChange: h = () => {
   },
-  onRefresh: u,
+  onRefresh: f,
   onFileOpen: w = () => {
   },
-  onError: x = () => {
+  onError: T = () => {
   },
-  layout: S = "grid",
-  enableFilePreview: D = !0,
+  layout: R = "grid",
+  enableFilePreview: O = !0,
   maxFileSize: M,
   filePreviewPath: C,
-  acceptedFileTypes: P,
+  acceptedFileTypes: E,
   height: F = "600px",
   width: N = "100%",
-  initialPath: m = ""
+  initialPath: m = "",
+  filePreviewComponent: p,
+  primaryColor: D = "#6155b4",
+  fontFamily: y = "Nunito Sans, sans-serif"
 }) => {
-  const p = Tn(), { containerRef: T, colSizes: y, isDragging: E, handleMouseMove: R, handleMouseUp: j, handleMouseDown: H } = Dn(20, 80);
-  return /* @__PURE__ */ g(
-    "main",
-    {
-      className: "file-explorer",
-      onContextMenu: (I) => I.preventDefault(),
-      style: { height: F, width: N },
-      children: [
-        /* @__PURE__ */ e(Ct, { isLoading: s }),
-        /* @__PURE__ */ e(nn, { filesData: t, onError: x, children: /* @__PURE__ */ e(rn, { initialPath: m, children: /* @__PURE__ */ e(sn, { onDownload: c, children: /* @__PURE__ */ e(on, { onPaste: a, children: /* @__PURE__ */ g(en, { layout: S, children: [
-          /* @__PURE__ */ e(
-            an,
-            {
-              allowCreateFolder: !0,
-              allowUploadFile: !0,
-              onLayoutChange: h,
-              onRefresh: u,
-              triggerAction: p
-            }
-          ),
-          /* @__PURE__ */ g(
-            "section",
-            {
-              ref: T,
-              onMouseMove: R,
-              onMouseUp: j,
-              className: "files-container",
-              children: [
-                /* @__PURE__ */ g("div", { className: "navigation-pane", style: { width: y.col1 + "%" }, children: [
-                  /* @__PURE__ */ e(cn, {}),
-                  /* @__PURE__ */ e(
-                    "div",
-                    {
-                      className: `sidebar-resize ${E ? "sidebar-dragging" : ""}`,
-                      onMouseDown: H
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ g("div", { className: "folders-preview", style: { width: y.col2 + "%" }, children: [
-                  /* @__PURE__ */ e(dn, {}),
-                  /* @__PURE__ */ e(
-                    bn,
-                    {
-                      onCreateFolder: r,
-                      onRename: l,
-                      onFileOpen: w,
-                      onRefresh: u,
-                      enableFilePreview: D,
-                      triggerAction: p
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            xn,
-            {
-              fileUploadConfig: n,
-              onFileUploading: o,
-              onFileUploaded: i,
-              onDelete: f,
-              onRefresh: u,
-              maxFileSize: M,
-              filePreviewPath: C,
-              acceptedFileTypes: P,
-              triggerAction: p
-            }
-          )
-        ] }) }) }) }) })
-      ]
-    }
-  );
+  const P = Dn(), { containerRef: x, colSizes: j, isDragging: H, handleMouseMove: I, handleMouseUp: K, handleMouseDown: Z } = On(20, 80);
+  return /* @__PURE__ */ g("main", { className: "file-explorer", onContextMenu: (Y) => Y.preventDefault(), style: {
+    "--file-manager-font-family": y,
+    "--file-manager-primary-color": D,
+    height: F,
+    width: N
+  }, children: [
+    /* @__PURE__ */ e(Ct, { isLoading: s }),
+    /* @__PURE__ */ e(rn, { filesData: t, onError: T, children: /* @__PURE__ */ e(sn, { initialPath: m, children: /* @__PURE__ */ e(on, { onDownload: c, children: /* @__PURE__ */ e(an, { onPaste: i, children: /* @__PURE__ */ g(tn, { layout: R, children: [
+      /* @__PURE__ */ e(
+        ln,
+        {
+          allowCreateFolder: !0,
+          allowUploadFile: !0,
+          onLayoutChange: h,
+          onRefresh: f,
+          triggerAction: P
+        }
+      ),
+      /* @__PURE__ */ g(
+        "section",
+        {
+          ref: x,
+          onMouseMove: I,
+          onMouseUp: K,
+          className: "files-container",
+          children: [
+            /* @__PURE__ */ g("div", { className: "navigation-pane", style: { width: j.col1 + "%" }, children: [
+              /* @__PURE__ */ e(dn, {}),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `sidebar-resize ${H ? "sidebar-dragging" : ""}`,
+                  onMouseDown: Z
+                }
+              )
+            ] }),
+            /* @__PURE__ */ g("div", { className: "folders-preview", style: { width: j.col2 + "%" }, children: [
+              /* @__PURE__ */ e(un, {}),
+              /* @__PURE__ */ e(
+                Fn,
+                {
+                  onCreateFolder: r,
+                  onRename: l,
+                  onFileOpen: w,
+                  onRefresh: f,
+                  enableFilePreview: O,
+                  triggerAction: P
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        Tn,
+        {
+          fileUploadConfig: n,
+          onFileUploading: o,
+          onFileUploaded: a,
+          onDelete: u,
+          onRefresh: f,
+          maxFileSize: M,
+          filePreviewPath: C,
+          filePreviewComponent: p,
+          acceptedFileTypes: E,
+          triggerAction: P
+        }
+      )
+    ] }) }) }) }) })
+  ] });
 };
 St.displayName = "FileManager";
 St.propTypes = {
-  files: q.arrayOf(
-    q.shape({
-      name: q.string.isRequired,
-      isDirectory: q.bool.isRequired,
-      path: q.string.isRequired,
-      updatedAt: zn,
-      size: q.number
+  files: z.arrayOf(
+    z.shape({
+      name: z.string.isRequired,
+      isDirectory: z.bool.isRequired,
+      path: z.string.isRequired,
+      updatedAt: Wn,
+      size: z.number
     })
   ).isRequired,
-  fileUploadConfig: q.shape({
-    url: it,
-    headers: q.objectOf(q.string)
+  fileUploadConfig: z.shape({
+    url: at,
+    headers: z.objectOf(z.string)
   }),
-  isLoading: q.bool,
-  onCreateFolder: q.func,
-  onFileUploading: q.func,
-  onFileUploaded: q.func,
-  onRename: q.func,
-  onDelete: q.func,
-  onPaste: q.func,
-  onDownload: q.func,
-  onLayoutChange: q.func,
-  onRefresh: q.func,
-  onFileOpen: q.func,
-  onError: q.func,
-  layout: q.oneOf(["grid", "list"]),
-  maxFileSize: q.number,
-  enableFilePreview: q.bool,
-  filePreviewPath: it,
-  acceptedFileTypes: q.string,
-  height: q.oneOfType([q.string, q.number]),
-  width: q.oneOfType([q.string, q.number]),
-  initialPath: q.string
+  isLoading: z.bool,
+  onCreateFolder: z.func,
+  onFileUploading: z.func,
+  onFileUploaded: z.func,
+  onRename: z.func,
+  onDelete: z.func,
+  onPaste: z.func,
+  onDownload: z.func,
+  onLayoutChange: z.func,
+  onRefresh: z.func,
+  onFileOpen: z.func,
+  onError: z.func,
+  layout: z.oneOf(["grid", "list"]),
+  maxFileSize: z.number,
+  enableFilePreview: z.bool,
+  filePreviewPath: at,
+  acceptedFileTypes: z.string,
+  height: z.oneOfType([z.string, z.number]),
+  width: z.oneOfType([z.string, z.number]),
+  initialPath: z.string,
+  filePreviewComponent: z.func,
+  primaryColor: z.string,
+  fontFamily: z.string
 };
 export {
   St as FileManager