@plutonhq/core-frontend 0.0.1

package/dist/components/common/FileManager/FileManager.js

@@ -0,0 +1,156 @@
+import { jsxs as r, jsx as t, Fragment as G } from "react/jsx-runtime";
+import { useState as v, useMemo as K } from "react";
+import { FixedSizeList as T } from "react-window";
+import N from "../Icon/Icon.js";
+import s from "./FileManager.module.scss.js";
+import { useBrowseDir as q } from "../../../services/devices.js";
+import { sortFileItems as x, formatBytes as A, formatDateTime as B, isMobile as J } from "../../../utils/helpers.js";
+import Q from "../FileIcon/FileIcon.js";
+const H = J(), V = H ? 68 : 38, ne = ({
+  deviceId: L,
+  onSelect: k,
+  selectedPaths: f = { includes: [], excludes: [] },
+  defaultPath: w,
+  allowMultiple: b = !0,
+  selectionType: g = "all"
+}) => {
+  const [n, d] = v(() => w || ""), [O, C] = v(!1), [I, P] = v(""), [m, j] = v(null), [u, S] = v("asc"), { data: l, isLoading: E, refetch: $ } = q({ deviceId: L, path: n }), R = (i) => {
+    d(i);
+  }, W = () => {
+    if (n === w)
+      return;
+    if (!n.includes("/") || n === "/") {
+      d("");
+      return;
+    }
+    const i = n.split("/").slice(0, -1).join("/");
+    console.log("parentPath :", n, i), d(i);
+  }, h = (i) => {
+    m === i ? S(u === "asc" ? "desc" : "asc") : (j(i), S("asc"));
+  }, F = (i) => {
+    const o = g === "directory" && b === !1, e = f.includes.includes(i), c = f.excludes.includes(i), D = !o && f.includes.some((y) => i.startsWith(y + "/"));
+    return c ? !1 : e || D;
+  }, M = (i) => {
+    const o = f.includes.some((e) => i.startsWith(e + "/"));
+    return !f.includes.some((e) => i.startsWith(e + "/")) || o;
+  }, z = K(() => {
+    var y;
+    if (!((y = l == null ? void 0 : l.result) != null && y.items)) return [];
+    if (!m) return g === "directory" ? l.result.items.filter((a) => a.isDirectory) : l.result.items;
+    const i = g === "directory" ? l.result.items.filter((a) => a.isDirectory) : l.result.items, o = i.filter((a) => a.isDirectory), e = i.filter((a) => !a.isDirectory), c = x([...o], m, u), D = x([...e], m, u);
+    return [...c, ...D];
+  }, [l, m, u]), p = (i) => m !== i ? null : u === "asc" ? " ↑" : " ↓", _ = () => {
+    if (!n) return "Drives";
+    const i = n.split("/").filter(Boolean);
+    return i.map((o, e) => {
+      const c = i.slice(0, e + 1).join("/");
+      return /* @__PURE__ */ r("span", { children: [
+        /* @__PURE__ */ t("button", { onClick: () => d(c), children: o }),
+        e < i.length - 1 && " > "
+      ] }, c);
+    });
+  }, U = ({ index: i, style: o }) => {
+    const e = z[i];
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        style: o,
+        className: `${s.fileRow} ${F(e.path) ? s.selected : ""}`,
+        onClick: () => e.isDirectory && R(e.path),
+        children: [
+          /* @__PURE__ */ r("div", { className: s.fileName, children: [
+            /* @__PURE__ */ t(
+              "button",
+              {
+                onClick: (c) => {
+                  c.stopPropagation(), M(e.path) && k(e.path);
+                },
+                disabled: !M(e.path),
+                children: /* @__PURE__ */ t(N, { type: F(e.path) ? "check-circle-filled" : "check-circle" })
+              }
+            ),
+            e.type != "file" ? /* @__PURE__ */ t(N, { type: `fm-${e.type}`, size: 18 }) : /* @__PURE__ */ t(Q, { filename: e.name }),
+            e.name
+          ] }),
+          H ? /* @__PURE__ */ r("div", { className: s.mobileFileInfo, children: [
+            !e.isDirectory && /* @__PURE__ */ t("div", { className: s.fileSize, children: e.size ? A(e.size) : "-" }),
+            /* @__PURE__ */ t("div", { className: s.fileDate, children: e.modifiedAt ? B(e.modifiedAt) : "-" })
+          ] }) : /* @__PURE__ */ r(G, { children: [
+            " ",
+            /* @__PURE__ */ t("div", { className: s.fileSize, children: e.size ? A(e.size) : "-" }),
+            /* @__PURE__ */ t("div", { className: s.fileDate, children: e.modifiedAt ? B(e.modifiedAt) : "-" }),
+            /* @__PURE__ */ t("div", { className: s.fileOwner, children: e.owner || "-" }),
+            /* @__PURE__ */ t("div", { className: s.filePerms, children: e.permissions ? e.permissions : "-" })
+          ] })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ r("div", { className: s.fileManager, children: [
+    /* @__PURE__ */ r("div", { className: s.navigationBar, children: [
+      /* @__PURE__ */ t("button", { onClick: W, disabled: n === "", title: "Move Up", children: /* @__PURE__ */ t(N, { type: "arrow-up", size: 18 }) }),
+      /* @__PURE__ */ t("button", { onClick: () => d(""), disabled: n === "", title: "Home", children: /* @__PURE__ */ t(N, { type: "home", size: 18 }) }),
+      /* @__PURE__ */ t("button", { onClick: () => $(), title: "Refresh", children: /* @__PURE__ */ t(N, { type: "reload", size: 18 }) }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: s.currentPath,
+          onClick: () => {
+            P(n), C(!0);
+          },
+          children: O ? /* @__PURE__ */ t(
+            "input",
+            {
+              value: I,
+              onChange: (i) => P(i.target.value),
+              onKeyDown: (i) => {
+                i.key === "Enter" && (d(I), C(!1));
+              },
+              onBlur: () => C(!1),
+              autoFocus: !0
+            }
+          ) : _()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("div", { className: s.fileListContainer, children: [
+      /* @__PURE__ */ r("div", { className: s.fileHeader, children: [
+        /* @__PURE__ */ r("div", { className: s.fileName, onClick: () => h("name"), children: [
+          "Name ",
+          p("name")
+        ] }),
+        /* @__PURE__ */ r("div", { className: s.fileSize, onClick: () => h("size"), children: [
+          "Size ",
+          p("size")
+        ] }),
+        /* @__PURE__ */ r("div", { className: s.fileDate, onClick: () => h("modifiedAt"), children: [
+          "Modified ",
+          p("modifiedAt")
+        ] }),
+        /* @__PURE__ */ r("div", { className: s.fileOwner, onClick: () => h("owner"), children: [
+          "Owner ",
+          p("owner")
+        ] }),
+        /* @__PURE__ */ r("div", { className: s.filePerms, onClick: () => h("permissions"), children: [
+          "Permissions ",
+          p("permissions")
+        ] })
+      ] }),
+      E ? /* @__PURE__ */ t("div", { className: s.loading, children: "Loading..." }) : z.length === 0 ? /* @__PURE__ */ t("div", { className: s.empty, children: g === "directory" ? "No folders found" : "No files or folders found" }) : /* @__PURE__ */ t(
+        T,
+        {
+          height: window.innerHeight - 250,
+          itemCount: z.length,
+          itemSize: V,
+          width: "100%",
+          className: `${s.fileList} styled__scrollbar`,
+          children: U
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ne as FileManager
+};
+//# sourceMappingURL=FileManager.js.map

package/dist/components/common/FileManager/FileManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileManager.js","sources":["../../../../src/components/common/FileManager/FileManager.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\r\nimport { FixedSizeList as List } from 'react-window';\r\nimport Icon from '../Icon/Icon';\r\nimport classes from './FileManager.module.scss';\r\nimport { useBrowseDir } from '../../../services/devices';\r\nimport { formatBytes, formatDateTime, isMobile, sortFileItems } from '../../../utils/helpers';\r\nimport FileIcon from '../FileIcon/FileIcon';\r\n\r\ntype FileManagerProps = {\r\n   deviceId: string;\r\n   onSelect: (path: string) => void;\r\n   selectedPaths?: {\r\n      includes: string[];\r\n      excludes: string[];\r\n   };\r\n   defaultPath?: string;\r\n   selectionType?: 'all' | 'directory' | 'file';\r\n   allowMultiple?: boolean;\r\n};\r\n\r\ntype FileItem = {\r\n   name: string;\r\n   path: string;\r\n   type: 'directory' | 'file';\r\n   isDirectory: boolean;\r\n   size: number;\r\n   modifiedAt: string;\r\n   owner: string;\r\n   permissions: number;\r\n};\r\n\r\ntype SortField = 'name' | 'size' | 'modifiedAt' | 'owner' | 'permissions' | null;\r\ntype SortOrder = 'asc' | 'desc';\r\nconst isMobileDevice = isMobile();\r\nconst ITEM_HEIGHT = isMobileDevice ? 68 : 38;\r\n\r\nexport const FileManager = ({\r\n   deviceId,\r\n   onSelect,\r\n   selectedPaths = { includes: [], excludes: [] },\r\n   defaultPath,\r\n   allowMultiple = true,\r\n   selectionType = 'all',\r\n}: FileManagerProps) => {\r\n   const [currentPath, setCurrentPath] = useState(() => defaultPath || '');\r\n   const [showPathInput, setShowPathInput] = useState(false);\r\n   const [customPath, setCustomPath] = useState('');\r\n   const [sortField, setSortField] = useState<SortField>(null);\r\n   const [sortOrder, setSortOrder] = useState<SortOrder>('asc');\r\n\r\n   const { data, isLoading, refetch } = useBrowseDir({ deviceId, path: currentPath });\r\n\r\n   const navigateToPath = (path: string) => {\r\n      setCurrentPath(path);\r\n   };\r\n\r\n   const navigateUp = () => {\r\n      // If we're at a root drive/mount point, go to drives list\r\n      if (currentPath === defaultPath) {\r\n         return;\r\n      }\r\n      if (!currentPath.includes('/') || currentPath === '/') {\r\n         setCurrentPath('');\r\n         return;\r\n      }\r\n\r\n      const parentPath = currentPath.split('/').slice(0, -1).join('/');\r\n      console.log('parentPath :', currentPath, parentPath);\r\n      setCurrentPath(parentPath);\r\n   };\r\n\r\n   const handleSort = (field: SortField) => {\r\n      if (sortField === field) {\r\n         setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');\r\n      } else {\r\n         setSortField(field);\r\n         setSortOrder('asc');\r\n      }\r\n   };\r\n\r\n   const isPathSelected = (path: string) => {\r\n      const isDirectorySelection = selectionType === 'directory' && allowMultiple === false;\r\n      const isIncluded = selectedPaths.includes.includes(path);\r\n      const isExcluded = selectedPaths.excludes.includes(path);\r\n      const isParentIncluded = !isDirectorySelection && selectedPaths.includes.some((p) => path.startsWith(p + '/'));\r\n\r\n      if (isExcluded) return false;\r\n      return isIncluded || isParentIncluded;\r\n   };\r\n\r\n   const isPathSelectable = (path: string) => {\r\n      const isParentIncluded = selectedPaths.includes.some((p) => path.startsWith(p + '/'));\r\n      return !selectedPaths.includes.some((p) => path.startsWith(p + '/')) || isParentIncluded;\r\n   };\r\n\r\n   const sortedItems = useMemo(() => {\r\n      if (!data?.result?.items) return [];\r\n      if (!sortField) return selectionType === 'directory' ? data.result.items.filter((item: FileItem) => item.isDirectory) : data.result.items;\r\n      const filteredItems: FileItem[] =\r\n         selectionType === 'directory' ? data.result.items.filter((item: FileItem) => item.isDirectory) : data.result.items;\r\n\r\n      const directories = filteredItems.filter((item) => item.isDirectory);\r\n      const files = filteredItems.filter((item) => !item.isDirectory);\r\n      const sortedDirectories = sortFileItems([...directories], sortField, sortOrder);\r\n      const sortedFiles = sortFileItems([...files], sortField, sortOrder);\r\n\r\n      return [...sortedDirectories, ...sortedFiles];\r\n   }, [data, sortField, sortOrder]);\r\n\r\n   const getSortIcon = (field: SortField) => {\r\n      if (sortField !== field) return null;\r\n      return sortOrder === 'asc' ? ' ↑' : ' ↓';\r\n   };\r\n\r\n   const renderPathBreadcrumbs = () => {\r\n      if (!currentPath) return 'Drives';\r\n\r\n      const segments = currentPath.split('/').filter(Boolean);\r\n      return segments.map((segment, index) => {\r\n         const path = segments.slice(0, index + 1).join('/');\r\n         return (\r\n            <span key={path}>\r\n               <button onClick={() => setCurrentPath(path)}>{segment}</button>\r\n               {index < segments.length - 1 && ' > '}\r\n            </span>\r\n         );\r\n      });\r\n   };\r\n\r\n   const FileRow = ({ index, style }: { index: number; style: React.CSSProperties }) => {\r\n      const item = sortedItems[index];\r\n\r\n      return (\r\n         <div\r\n            style={style}\r\n            className={`${classes.fileRow} ${isPathSelected(item.path) ? classes.selected : ''}`}\r\n            onClick={() => item.isDirectory && navigateToPath(item.path)}\r\n         >\r\n            <div className={classes.fileName}>\r\n               <button\r\n                  onClick={(e) => {\r\n                     e.stopPropagation();\r\n                     if (isPathSelectable(item.path)) {\r\n                        if (!allowMultiple) {\r\n                           onSelect(item.path);\r\n                        } else {\r\n                           onSelect(item.path);\r\n                        }\r\n                     }\r\n                  }}\r\n                  disabled={!isPathSelectable(item.path)}\r\n               >\r\n                  <Icon type={isPathSelected(item.path) ? 'check-circle-filled' : 'check-circle'} />\r\n               </button>\r\n               {item.type != 'file' ? <Icon type={`fm-${item.type}`} size={18} /> : <FileIcon filename={item.name} />}\r\n               {item.name}\r\n            </div>\r\n            {isMobileDevice ? (\r\n               <div className={classes.mobileFileInfo}>\r\n                  {!item.isDirectory && <div className={classes.fileSize}>{item.size ? formatBytes(item.size) : '-'}</div>}\r\n                  <div className={classes.fileDate}>{item.modifiedAt ? formatDateTime(item.modifiedAt) : '-'}</div>\r\n               </div>\r\n            ) : (\r\n               <>\r\n                  {' '}\r\n                  <div className={classes.fileSize}>{item.size ? formatBytes(item.size) : '-'}</div>\r\n                  <div className={classes.fileDate}>{item.modifiedAt ? formatDateTime(item.modifiedAt) : '-'}</div>\r\n                  <div className={classes.fileOwner}>{item.owner || '-'}</div>\r\n                  <div className={classes.filePerms}>{item.permissions ? item.permissions : '-'}</div>\r\n               </>\r\n            )}\r\n         </div>\r\n      );\r\n   };\r\n\r\n   return (\r\n      <div className={classes.fileManager}>\r\n         <div className={classes.navigationBar}>\r\n            <button onClick={navigateUp} disabled={currentPath === ''} title=\"Move Up\">\r\n               <Icon type=\"arrow-up\" size={18} />\r\n            </button>\r\n            <button onClick={() => setCurrentPath('')} disabled={currentPath === ''} title=\"Home\">\r\n               <Icon type=\"home\" size={18} />\r\n            </button>\r\n            <button onClick={() => refetch()} title=\"Refresh\">\r\n               <Icon type=\"reload\" size={18} />\r\n            </button>\r\n            <div\r\n               className={classes.currentPath}\r\n               onClick={() => {\r\n                  setCustomPath(currentPath);\r\n                  setShowPathInput(true);\r\n               }}\r\n            >\r\n               {showPathInput ? (\r\n                  <input\r\n                     value={customPath}\r\n                     onChange={(e) => setCustomPath(e.target.value)}\r\n                     onKeyDown={(e) => {\r\n                        if (e.key === 'Enter') {\r\n                           setCurrentPath(customPath);\r\n                           setShowPathInput(false);\r\n                        }\r\n                     }}\r\n                     onBlur={() => setShowPathInput(false)}\r\n                     autoFocus\r\n                  />\r\n               ) : (\r\n                  renderPathBreadcrumbs()\r\n               )}\r\n            </div>\r\n         </div>\r\n\r\n         <div className={classes.fileListContainer}>\r\n            <div className={classes.fileHeader}>\r\n               <div className={classes.fileName} onClick={() => handleSort('name')}>\r\n                  Name {getSortIcon('name')}\r\n               </div>\r\n               <div className={classes.fileSize} onClick={() => handleSort('size')}>\r\n                  Size {getSortIcon('size')}\r\n               </div>\r\n               <div className={classes.fileDate} onClick={() => handleSort('modifiedAt')}>\r\n                  Modified {getSortIcon('modifiedAt')}\r\n               </div>\r\n               <div className={classes.fileOwner} onClick={() => handleSort('owner')}>\r\n                  Owner {getSortIcon('owner')}\r\n               </div>\r\n               <div className={classes.filePerms} onClick={() => handleSort('permissions')}>\r\n                  Permissions {getSortIcon('permissions')}\r\n               </div>\r\n            </div>\r\n\r\n            {isLoading ? (\r\n               <div className={classes.loading}>Loading...</div>\r\n            ) : sortedItems.length === 0 ? (\r\n               <div className={classes.empty}>{selectionType === 'directory' ? 'No folders found' : 'No files or folders found'}</div>\r\n            ) : (\r\n               <List\r\n                  height={window.innerHeight - 250}\r\n                  itemCount={sortedItems.length}\r\n                  itemSize={ITEM_HEIGHT}\r\n                  width=\"100%\"\r\n                  className={`${classes.fileList} styled__scrollbar`}\r\n               >\r\n                  {FileRow}\r\n               </List>\r\n            )}\r\n         </div>\r\n      </div>\r\n   );\r\n};\r\n"],"names":["isMobileDevice","isMobile","ITEM_HEIGHT","FileManager","deviceId","onSelect","selectedPaths","defaultPath","allowMultiple","selectionType","currentPath","setCurrentPath","useState","showPathInput","setShowPathInput","customPath","setCustomPath","sortField","setSortField","sortOrder","setSortOrder","data","isLoading","refetch","useBrowseDir","navigateToPath","path","navigateUp","parentPath","handleSort","field","isPathSelected","isDirectorySelection","isIncluded","isExcluded","isParentIncluded","p","isPathSelectable","sortedItems","useMemo","_a","item","filteredItems","directories","files","sortedDirectories","sortFileItems","sortedFiles","getSortIcon","renderPathBreadcrumbs","segments","segment","index","jsx","FileRow","style","jsxs","classes","e","Icon","FileIcon","formatBytes","formatDateTime","Fragment","List"],"mappings":";;;;;;;;AAiCA,MAAMA,IAAiBC,EAAA,GACjBC,IAAcF,IAAiB,KAAK,IAE7BG,KAAc,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC,IAAgB,EAAE,UAAU,IAAI,UAAU,CAAA,EAAC;AAAA,EAC3C,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AACnB,MAAwB;AACrB,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,MAAML,KAAe,EAAE,GAChE,CAACM,GAAeC,CAAgB,IAAIF,EAAS,EAAK,GAClD,CAACG,GAAYC,CAAa,IAAIJ,EAAS,EAAE,GACzC,CAACK,GAAWC,CAAY,IAAIN,EAAoB,IAAI,GACpD,CAACO,GAAWC,CAAY,IAAIR,EAAoB,KAAK,GAErD,EAAE,MAAAS,GAAM,WAAAC,GAAW,SAAAC,EAAA,IAAYC,EAAa,EAAE,UAAApB,GAAU,MAAMM,GAAa,GAE3Ee,IAAiB,CAACC,MAAiB;AACtC,IAAAf,EAAee,CAAI;AAAA,EACtB,GAEMC,IAAa,MAAM;AAEtB,QAAIjB,MAAgBH;AACjB;AAEH,QAAI,CAACG,EAAY,SAAS,GAAG,KAAKA,MAAgB,KAAK;AACpD,MAAAC,EAAe,EAAE;AACjB;AAAA,IACH;AAEA,UAAMiB,IAAalB,EAAY,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG;AAC/D,YAAQ,IAAI,gBAAgBA,GAAakB,CAAU,GACnDjB,EAAeiB,CAAU;AAAA,EAC5B,GAEMC,IAAa,CAACC,MAAqB;AACtC,IAAIb,MAAca,IACfV,EAAaD,MAAc,QAAQ,SAAS,KAAK,KAEjDD,EAAaY,CAAK,GAClBV,EAAa,KAAK;AAAA,EAExB,GAEMW,IAAiB,CAACL,MAAiB;AACtC,UAAMM,IAAuBvB,MAAkB,eAAeD,MAAkB,IAC1EyB,IAAa3B,EAAc,SAAS,SAASoB,CAAI,GACjDQ,IAAa5B,EAAc,SAAS,SAASoB,CAAI,GACjDS,IAAmB,CAACH,KAAwB1B,EAAc,SAAS,KAAK,CAAC8B,MAAMV,EAAK,WAAWU,IAAI,GAAG,CAAC;AAE7G,WAAIF,IAAmB,KAChBD,KAAcE;AAAA,EACxB,GAEME,IAAmB,CAACX,MAAiB;AACxC,UAAMS,IAAmB7B,EAAc,SAAS,KAAK,CAAC8B,MAAMV,EAAK,WAAWU,IAAI,GAAG,CAAC;AACpF,WAAO,CAAC9B,EAAc,SAAS,KAAK,CAAC8B,MAAMV,EAAK,WAAWU,IAAI,GAAG,CAAC,KAAKD;AAAA,EAC3E,GAEMG,IAAcC,EAAQ,MAAM;;AAC/B,QAAI,GAACC,IAAAnB,KAAA,gBAAAA,EAAM,WAAN,QAAAmB,EAAc,eAAc,CAAA;AACjC,QAAI,CAACvB,EAAW,QAAOR,MAAkB,cAAcY,EAAK,OAAO,MAAM,OAAO,CAACoB,MAAmBA,EAAK,WAAW,IAAIpB,EAAK,OAAO;AACpI,UAAMqB,IACHjC,MAAkB,cAAcY,EAAK,OAAO,MAAM,OAAO,CAACoB,MAAmBA,EAAK,WAAW,IAAIpB,EAAK,OAAO,OAE1GsB,IAAcD,EAAc,OAAO,CAACD,MAASA,EAAK,WAAW,GAC7DG,IAAQF,EAAc,OAAO,CAACD,MAAS,CAACA,EAAK,WAAW,GACxDI,IAAoBC,EAAc,CAAC,GAAGH,CAAW,GAAG1B,GAAWE,CAAS,GACxE4B,IAAcD,EAAc,CAAC,GAAGF,CAAK,GAAG3B,GAAWE,CAAS;AAElE,WAAO,CAAC,GAAG0B,GAAmB,GAAGE,CAAW;AAAA,EAC/C,GAAG,CAAC1B,GAAMJ,GAAWE,CAAS,CAAC,GAEzB6B,IAAc,CAAClB,MACdb,MAAca,IAAc,OACzBX,MAAc,QAAQ,OAAO,MAGjC8B,IAAwB,MAAM;AACjC,QAAI,CAACvC,EAAa,QAAO;AAEzB,UAAMwC,IAAWxC,EAAY,MAAM,GAAG,EAAE,OAAO,OAAO;AACtD,WAAOwC,EAAS,IAAI,CAACC,GAASC,MAAU;AACrC,YAAM1B,IAAOwB,EAAS,MAAM,GAAGE,IAAQ,CAAC,EAAE,KAAK,GAAG;AAClD,+BACI,QAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,YAAO,SAAS,MAAM1C,EAAee,CAAI,GAAI,UAAAyB,GAAQ;AAAA,QACrDC,IAAQF,EAAS,SAAS,KAAK;AAAA,MAAA,EAAA,GAFxBxB,CAGX;AAAA,IAEN,CAAC;AAAA,EACJ,GAEM4B,IAAU,CAAC,EAAE,OAAAF,GAAO,OAAAG,QAA2D;AAClF,UAAMd,IAAOH,EAAYc,CAAK;AAE9B,WACG,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,OAAAD;AAAA,QACA,WAAW,GAAGE,EAAQ,OAAO,IAAI1B,EAAeU,EAAK,IAAI,IAAIgB,EAAQ,WAAW,EAAE;AAAA,QAClF,SAAS,MAAMhB,EAAK,eAAehB,EAAegB,EAAK,IAAI;AAAA,QAE3D,UAAA;AAAA,UAAA,gBAAAe,EAAC,OAAA,EAAI,WAAWC,EAAQ,UACrB,UAAA;AAAA,YAAA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,SAAS,CAACK,MAAM;AACb,kBAAAA,EAAE,gBAAA,GACErB,EAAiBI,EAAK,IAAI,KAIxBpC,EAASoC,EAAK,IAAI;AAAA,gBAG3B;AAAA,gBACA,UAAU,CAACJ,EAAiBI,EAAK,IAAI;AAAA,gBAErC,UAAA,gBAAAY,EAACM,KAAK,MAAM5B,EAAeU,EAAK,IAAI,IAAI,wBAAwB,eAAA,CAAgB;AAAA,cAAA;AAAA,YAAA;AAAA,YAElFA,EAAK,QAAQ,SAAS,gBAAAY,EAACM,GAAA,EAAK,MAAM,MAAMlB,EAAK,IAAI,IAAI,MAAM,GAAA,CAAI,sBAAMmB,GAAA,EAAS,UAAUnB,EAAK,MAAM;AAAA,YACnGA,EAAK;AAAA,UAAA,GACT;AAAA,UACCzC,IACE,gBAAAwD,EAAC,OAAA,EAAI,WAAWC,EAAQ,gBACpB,UAAA;AAAA,YAAA,CAAChB,EAAK,eAAe,gBAAAY,EAAC,OAAA,EAAI,WAAWI,EAAQ,UAAW,UAAAhB,EAAK,OAAOoB,EAAYpB,EAAK,IAAI,IAAI,KAAI;AAAA,YAClG,gBAAAY,EAAC,OAAA,EAAI,WAAWI,EAAQ,UAAW,UAAAhB,EAAK,aAAaqB,EAAerB,EAAK,UAAU,IAAI,IAAA,CAAI;AAAA,UAAA,EAAA,CAC9F,IAEA,gBAAAe,EAAAO,GAAA,EACI,UAAA;AAAA,YAAA;AAAA,YACD,gBAAAV,EAAC,OAAA,EAAI,WAAWI,EAAQ,UAAW,UAAAhB,EAAK,OAAOoB,EAAYpB,EAAK,IAAI,IAAI,IAAA,CAAI;AAAA,YAC5E,gBAAAY,EAAC,OAAA,EAAI,WAAWI,EAAQ,UAAW,UAAAhB,EAAK,aAAaqB,EAAerB,EAAK,UAAU,IAAI,IAAA,CAAI;AAAA,8BAC1F,OAAA,EAAI,WAAWgB,EAAQ,WAAY,UAAAhB,EAAK,SAAS,KAAI;AAAA,YACtD,gBAAAY,EAAC,SAAI,WAAWI,EAAQ,WAAY,UAAAhB,EAAK,cAAcA,EAAK,cAAc,IAAA,CAAI;AAAA,UAAA,EAAA,CACjF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIZ;AAEA,SACG,gBAAAe,EAAC,OAAA,EAAI,WAAWC,EAAQ,aACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAQ,eACrB,UAAA;AAAA,MAAA,gBAAAJ,EAAC,UAAA,EAAO,SAAS1B,GAAY,UAAUjB,MAAgB,IAAI,OAAM,WAC9D,UAAA,gBAAA2C,EAACM,GAAA,EAAK,MAAK,YAAW,MAAM,IAAI,GACnC;AAAA,wBACC,UAAA,EAAO,SAAS,MAAMhD,EAAe,EAAE,GAAG,UAAUD,MAAgB,IAAI,OAAM,QAC5E,UAAA,gBAAA2C,EAACM,GAAA,EAAK,MAAK,QAAO,MAAM,IAAI,GAC/B;AAAA,MACA,gBAAAN,EAAC,UAAA,EAAO,SAAS,MAAM9B,KAAW,OAAM,WACrC,UAAA,gBAAA8B,EAACM,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,GACjC;AAAA,MACA,gBAAAN;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,WAAWI,EAAQ;AAAA,UACnB,SAAS,MAAM;AACZ,YAAAzC,EAAcN,CAAW,GACzBI,EAAiB,EAAI;AAAA,UACxB;AAAA,UAEC,UAAAD,IACE,gBAAAwC;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,OAAOtC;AAAA,cACP,UAAU,CAAC2C,MAAM1C,EAAc0C,EAAE,OAAO,KAAK;AAAA,cAC7C,WAAW,CAACA,MAAM;AACf,gBAAIA,EAAE,QAAQ,YACX/C,EAAeI,CAAU,GACzBD,EAAiB,EAAK;AAAA,cAE5B;AAAA,cACA,QAAQ,MAAMA,EAAiB,EAAK;AAAA,cACpC,WAAS;AAAA,YAAA;AAAA,UAAA,IAGZmC,EAAA;AAAA,QAAsB;AAAA,MAAA;AAAA,IAE5B,GACH;AAAA,IAEA,gBAAAO,EAAC,OAAA,EAAI,WAAWC,EAAQ,mBACrB,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAQ,YACrB,UAAA;AAAA,QAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAQ,UAAU,SAAS,MAAM5B,EAAW,MAAM,GAAG,UAAA;AAAA,UAAA;AAAA,UAC5DmB,EAAY,MAAM;AAAA,QAAA,GAC3B;AAAA,QACA,gBAAAQ,EAAC,SAAI,WAAWC,EAAQ,UAAU,SAAS,MAAM5B,EAAW,MAAM,GAAG,UAAA;AAAA,UAAA;AAAA,UAC5DmB,EAAY,MAAM;AAAA,QAAA,GAC3B;AAAA,QACA,gBAAAQ,EAAC,SAAI,WAAWC,EAAQ,UAAU,SAAS,MAAM5B,EAAW,YAAY,GAAG,UAAA;AAAA,UAAA;AAAA,UAC9DmB,EAAY,YAAY;AAAA,QAAA,GACrC;AAAA,QACA,gBAAAQ,EAAC,SAAI,WAAWC,EAAQ,WAAW,SAAS,MAAM5B,EAAW,OAAO,GAAG,UAAA;AAAA,UAAA;AAAA,UAC7DmB,EAAY,OAAO;AAAA,QAAA,GAC7B;AAAA,QACA,gBAAAQ,EAAC,SAAI,WAAWC,EAAQ,WAAW,SAAS,MAAM5B,EAAW,aAAa,GAAG,UAAA;AAAA,UAAA;AAAA,UAC7DmB,EAAY,aAAa;AAAA,QAAA,EAAA,CACzC;AAAA,MAAA,GACH;AAAA,MAEC1B,sBACG,OAAA,EAAI,WAAWmC,EAAQ,SAAS,UAAA,aAAA,CAAU,IAC1CnB,EAAY,WAAW,IACxB,gBAAAe,EAAC,OAAA,EAAI,WAAWI,EAAQ,OAAQ,gBAAkB,cAAc,qBAAqB,6BAA4B,IAEjH,gBAAAJ;AAAA,QAACW;AAAAA,QAAA;AAAA,UACE,QAAQ,OAAO,cAAc;AAAA,UAC7B,WAAW1B,EAAY;AAAA,UACvB,UAAUpC;AAAA,UACV,OAAM;AAAA,UACN,WAAW,GAAGuD,EAAQ,QAAQ;AAAA,UAE7B,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,EAAA,CAEN;AAAA,EAAA,GACH;AAEN;"}

package/dist/components/common/FileManager/FileManager.module.scss

@@ -0,0 +1,196 @@
+.fileManager {
+   background: var(--content-background-color);
+   border-radius: 4px;
+   width: 100%;
+   max-height: 65vh;
+   display: flex;
+   flex-direction: column;
+}
+
+.navigationBar {
+   display: flex;
+   align-items: center;
+   padding: 12px;
+   border-bottom: 1px solid var(--line-color);
+   gap: 12px;
+
+   button {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 5px 10px;
+      border-radius: 4px;
+      border: 1px solid var(--line-color);
+      background: transparent;
+      cursor: pointer;
+      color: var(--icon-color);
+
+      &:hover {
+         background: var(--light-grey);
+         color: var(--content-color);
+      }
+
+      &:disabled {
+         opacity: 0.5;
+         cursor: not-allowed;
+      }
+   }
+}
+
+.currentPath {
+   flex: 1;
+   padding: 6px 12px;
+   background: var(--light-grey);
+   border-radius: 4px;
+   font-family: inherit;
+   height: 21px;
+   color: inherit;
+   cursor: text;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   &:hover {
+      background: var(--line-color);
+      color: var(--content-text-color);
+   }
+   input {
+      background-color: transparent;
+      border: none;
+      width: 100%;
+      outline: none;
+      color: var(--content-text-color);
+   }
+   button {
+      background: none;
+      border: none;
+      padding: 2px 0px;
+      cursor: pointer;
+      font-family: inherit;
+      display: inline-block;
+      border-radius: 0;
+      color: inherit;
+      &:hover {
+         color: var(--primary-color);
+         text-decoration: underline;
+      }
+   }
+}
+
+.fileList {
+   flex: 1;
+   overflow-y: auto;
+   min-height: 300px;
+}
+
+.empty {
+   text-align: center;
+   width: 100%;
+   height: 100%;
+   padding: 10%;
+   box-sizing: border-box;
+}
+
+.fileHeader {
+   display: grid;
+   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+   padding: 8px 12px;
+   background: var(--light-grey);
+   border-bottom: 1px solid var(--line-color);
+   font-weight: 500;
+   position: sticky;
+   top: 0;
+   z-index: 3;
+   text-align: center;
+   div {
+      cursor: pointer;
+      user-select: none;
+   }
+}
+
+.fileListContainer {
+   display: flex;
+   flex-direction: column;
+   flex: 1;
+   overflow: hidden;
+}
+
+.fileRow {
+   display: grid;
+   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+   padding: 8px 12px;
+   border-bottom: 1px solid var(--line-color);
+   box-sizing: border-box;
+   cursor: pointer;
+   text-align: center;
+   color: var(--content-text-color-light);
+
+   &:hover {
+      background: var(--light-grey);
+   }
+   &.selected {
+      background-color: var(--background-color);
+      .fileName button {
+         color: var(--primary-color);
+         opacity: 1;
+      }
+   }
+   &:last-child {
+      border-bottom: none;
+   }
+}
+
+.fileName {
+   display: flex;
+   align-items: center;
+   text-align: left;
+   word-break: break-all;
+   gap: 6px;
+   color: var(--content-text-color);
+   button {
+      opacity: 0.3;
+      color: var(--icon-color);
+   }
+}
+
+.selected {
+   background: #e6f7ff;
+}
+
+.loading {
+   padding: 24px;
+   text-align: center;
+   color: #666;
+}
+
+@media only screen and (max-width: 768px) {
+   .fileHeader {
+      display: none;
+   }
+   .fileList {
+      height: 100% !important;
+   }
+   .fileRow {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      .fileName {
+         width: 100%;
+         margin-bottom: 5px;
+      }
+      .mobileFileInfo {
+         display: flex;
+         flex-direction: row;
+         justify-content: flex-start;
+         width: 100%;
+         padding-left: 30px;
+         box-sizing: border-box;
+         & > div {
+            padding: 0 10px;
+         }
+      }
+   }
+   .fileManager {
+      height: calc(100vh - 120px);
+      max-height: unset;
+   }
+}

package/dist/components/common/FileManager/FileManager.module.scss.js

@@ -0,0 +1,30 @@
+const e = "FileManager-module__fileManager___AbT8a", _ = "FileManager-module__navigationBar___sucry", a = "FileManager-module__currentPath___O8-h1", l = "FileManager-module__fileList___2FNbN", i = "FileManager-module__empty___M9rfL", n = "FileManager-module__fileHeader___GsfZc", o = "FileManager-module__fileListContainer___eUZEB", t = "FileManager-module__fileRow___n78fq", r = "FileManager-module__selected___GXDRl", s = "FileManager-module__fileName___bMPjO", f = "FileManager-module__loading___1M2ZD", c = "FileManager-module__mobileFileInfo___r8auj", d = {
+  fileManager: e,
+  navigationBar: _,
+  currentPath: a,
+  fileList: l,
+  empty: i,
+  fileHeader: n,
+  fileListContainer: o,
+  fileRow: t,
+  selected: r,
+  fileName: s,
+  loading: f,
+  mobileFileInfo: c
+};
+export {
+  a as currentPath,
+  d as default,
+  i as empty,
+  n as fileHeader,
+  l as fileList,
+  o as fileListContainer,
+  e as fileManager,
+  s as fileName,
+  t as fileRow,
+  f as loading,
+  c as mobileFileInfo,
+  _ as navigationBar,
+  r as selected
+};
+//# sourceMappingURL=FileManager.module.scss.js.map

package/dist/components/common/FileManager/FileManager.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileManager.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/components/common/FolderPicker/FolderPicker.d.ts

@@ -0,0 +1,12 @@
+interface FolderPickerProps {
+    title: string;
+    selected: string;
+    deviceId: string;
+    footerText?: string;
+    buttonText?: string;
+    close: () => void;
+    onSelect: (path: string) => void;
+}
+declare const FolderPicker: ({ title, selected, footerText, buttonText, deviceId, close, onSelect }: FolderPickerProps) => import("react").ReactPortal;
+export default FolderPicker;
+//# sourceMappingURL=FolderPicker.d.ts.map

package/dist/components/common/FolderPicker/FolderPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/common/FolderPicker/FolderPicker.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,YAAY,GAAI,wEAAsG,iBAAiB,gCAyC5I,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/common/FolderPicker/FolderPicker.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { createPortal as f } from "react-dom";
+import a from "../Icon/Icon.js";
+import { FileManager as k } from "../FileManager/FileManager.js";
+import t from "./FolderPicker.module.scss.js";
+import { useState as u } from "react";
+const M = ({ title: n, selected: d, footerText: o = "", buttonText: s = "Insert Path", deviceId: m = "main", close: c, onSelect: h }) => {
+  const [l, p] = u(d), P = (r) => {
+    r.stopPropagation(), r.nativeEvent.stopImmediatePropagation(), r.target === r.currentTarget && c();
+  };
+  return f(
+    /* @__PURE__ */ e("div", { className: t.folderPickerModal, onClick: P, children: /* @__PURE__ */ i("div", { className: t.folderPickerModalInner, children: [
+      /* @__PURE__ */ i("div", { className: t.folderPickerHeader, children: [
+        /* @__PURE__ */ e("h4", { children: n }),
+        /* @__PURE__ */ e("button", { onClick: () => c(), children: /* @__PURE__ */ e(a, { type: "close", size: 20 }) })
+      ] }),
+      /* @__PURE__ */ e(
+        k,
+        {
+          deviceId: m,
+          onSelect: (r) => p(r),
+          selectionType: "directory",
+          allowMultiple: !1,
+          selectedPaths: { includes: [l], excludes: [] }
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: `${t.folderPickerFooter} ${o ? t.folderPickerFooterWithText : ""}`, children: [
+        o && /* @__PURE__ */ e("div", { children: o }),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: () => {
+              h(l), c();
+            },
+            children: [
+              /* @__PURE__ */ e(a, { type: "check", size: 12 }),
+              " ",
+              s
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    document.body
+  );
+};
+export {
+  M as default
+};
+//# sourceMappingURL=FolderPicker.js.map

package/dist/components/common/FolderPicker/FolderPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderPicker.js","sources":["../../../../src/components/common/FolderPicker/FolderPicker.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\r\nimport Icon from '../Icon/Icon';\r\nimport { FileManager } from '../FileManager/FileManager';\r\nimport classes from './FolderPicker.module.scss';\r\nimport { useState } from 'react';\r\n\r\ninterface FolderPickerProps {\r\n   title: string;\r\n   selected: string;\r\n   deviceId: string;\r\n   footerText?: string;\r\n   buttonText?: string;\r\n   close: () => void;\r\n   onSelect: (path: string) => void;\r\n}\r\n\r\nconst FolderPicker = ({ title, selected, footerText = '', buttonText = 'Insert Path', deviceId = 'main', close, onSelect }: FolderPickerProps) => {\r\n   const [selectedPath, setSelectedPath] = useState(selected);\r\n   const closeOnBGClick = (e: React.SyntheticEvent) => {\r\n      e.stopPropagation();\r\n      e.nativeEvent.stopImmediatePropagation();\r\n      if (e.target === e.currentTarget) {\r\n         close();\r\n      }\r\n   };\r\n\r\n   return createPortal(\r\n      <div className={classes.folderPickerModal} onClick={closeOnBGClick}>\r\n         <div className={classes.folderPickerModalInner}>\r\n            <div className={classes.folderPickerHeader}>\r\n               <h4>{title}</h4>\r\n               <button onClick={() => close()}>\r\n                  <Icon type=\"close\" size={20} />\r\n               </button>\r\n            </div>\r\n            <FileManager\r\n               deviceId={deviceId}\r\n               onSelect={(p) => setSelectedPath(p)}\r\n               selectionType={'directory'}\r\n               allowMultiple={false}\r\n               selectedPaths={{ includes: [selectedPath], excludes: [] }}\r\n            />\r\n            <div className={`${classes.folderPickerFooter} ${footerText ? classes.folderPickerFooterWithText : ''}`}>\r\n               {footerText && <div>{footerText}</div>}\r\n               <button\r\n                  onClick={() => {\r\n                     onSelect(selectedPath);\r\n                     close();\r\n                  }}\r\n               >\r\n                  <Icon type=\"check\" size={12} /> {buttonText}\r\n               </button>\r\n            </div>\r\n         </div>\r\n      </div>,\r\n      document.body,\r\n   );\r\n};\r\n\r\nexport default FolderPicker;\r\n"],"names":["FolderPicker","title","selected","footerText","buttonText","deviceId","close","onSelect","selectedPath","setSelectedPath","useState","closeOnBGClick","e","createPortal","jsx","classes","jsxs","Icon","FileManager","p"],"mappings":";;;;;;AAgBA,MAAMA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,YAAAC,IAAa,IAAI,YAAAC,IAAa,eAAe,UAAAC,IAAW,QAAQ,OAAAC,GAAO,UAAAC,QAAkC;AAC/I,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASR,CAAQ,GACnDS,IAAiB,CAACC,MAA4B;AACjD,IAAAA,EAAE,gBAAA,GACFA,EAAE,YAAY,yBAAA,GACVA,EAAE,WAAWA,EAAE,iBAChBN,EAAA;AAAA,EAEN;AAEA,SAAOO;AAAA,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAQ,mBAAmB,SAASJ,GACjD,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAQ,wBACrB,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAQ,oBACrB,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAI,UAAAb,EAAA,CAAM;AAAA,QACX,gBAAAa,EAAC,UAAA,EAAO,SAAS,MAAMR,EAAA,GACpB,UAAA,gBAAAQ,EAACG,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,EAAA,CAChC;AAAA,MAAA,GACH;AAAA,MACA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,UAAAb;AAAA,UACA,UAAU,CAACc,MAAMV,EAAgBU,CAAC;AAAA,UAClC,eAAe;AAAA,UACf,eAAe;AAAA,UACf,eAAe,EAAE,UAAU,CAACX,CAAY,GAAG,UAAU,CAAA,EAAC;AAAA,QAAE;AAAA,MAAA;AAAA,MAE3D,gBAAAQ,EAAC,OAAA,EAAI,WAAW,GAAGD,EAAQ,kBAAkB,IAAIZ,IAAaY,EAAQ,6BAA6B,EAAE,IACjG,UAAA;AAAA,QAAAZ,KAAc,gBAAAW,EAAC,SAAK,UAAAX,EAAA,CAAW;AAAA,QAChC,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,SAAS,MAAM;AACZ,cAAAT,EAASC,CAAY,GACrBF,EAAA;AAAA,YACH;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAQ,EAACG,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI;AAAA,cAAE;AAAA,cAAEb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CACH;AAAA,IAAA,EAAA,CACH,EAAA,CACH;AAAA,IACA,SAAS;AAAA,EAAA;AAEf;"}

package/dist/components/common/FolderPicker/FolderPicker.module.scss

@@ -0,0 +1,77 @@
+.folderPickerModal {
+   position: fixed;
+   width: 100%;
+   height: 100vh;
+   top: 0;
+   left: 0;
+   z-index: 99999999;
+   background: var(--modal-shadow-color-light);
+   .folderPickerModalInner {
+      position: absolute;
+      width: 70%;
+      max-width: 1000px;
+      background: var(--content-background-color);
+      color: var(--content-text-color);
+      border-radius: 8px;
+      border: 1px solid var(--content-shadow-color);
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top: 10%;
+      box-sizing: border-box;
+      box-shadow: 0 0 20px var(--modal-shadow-color);
+      .folderPickerHeader {
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         padding: 10px 15px;
+         border-bottom: 1px solid var(--line-color);
+         h4 {
+            margin: 0;
+         }
+         button {
+            padding: 10px;
+            cursor: pointer;
+            background: transparent;
+            opacity: 0.5;
+            color: var(--content-text-color);
+            transition: all 0.2s linear;
+            &:hover {
+               opacity: 1;
+               transform: rotate(90deg);
+            }
+         }
+      }
+      .folderPickerFooter {
+         display: flex;
+         align-items: center;
+         justify-content: flex-end;
+         padding: 10px 15px;
+         border-top: 1px solid var(--line-color);
+         button {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+            padding: 10px 12px;
+            cursor: pointer;
+            border-radius: 6px;
+         }
+         &.folderPickerFooterWithText {
+            justify-content: space-between;
+         }
+      }
+      .folderPickerContent {
+         padding: 20px;
+         max-height: 500px;
+         overflow: auto;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .folderPickerModal {
+      .folderPickerModalInner {
+         width: 100%;
+         top: 0;
+      }
+   }
+}

package/dist/components/common/FolderPicker/FolderPicker.module.scss.js

@@ -0,0 +1,16 @@
+const e = "FolderPicker-module__folderPickerModal___CSxTT", r = "FolderPicker-module__folderPickerModalInner___q82sj", o = "FolderPicker-module__folderPickerHeader___6ohHC", d = "FolderPicker-module__folderPickerFooter___OvnkC", l = "FolderPicker-module__folderPickerFooterWithText___uW3BC", c = {
+  folderPickerModal: e,
+  folderPickerModalInner: r,
+  folderPickerHeader: o,
+  folderPickerFooter: d,
+  folderPickerFooterWithText: l
+};
+export {
+  c as default,
+  d as folderPickerFooter,
+  l as folderPickerFooterWithText,
+  o as folderPickerHeader,
+  e as folderPickerModal,
+  r as folderPickerModalInner
+};
+//# sourceMappingURL=FolderPicker.module.scss.js.map

package/dist/components/common/FolderPicker/FolderPicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderPicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/common/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+type IconProps = {
+    type: string;
+    color?: string;
+    size?: number;
+    title?: string;
+    classes?: string;
+};
+declare const Icon: ({ type, color, size, title, classes }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/common/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/components/common/Icon/Icon.tsx"],"names":[],"mappings":"AAEA,KAAK,SAAS,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAOF,QAAA,MAAM,IAAI,GAAI,uCAAuE,SAAS,4CAm7C7F,CAAC;AAmBF,eAAe,IAAI,CAAC"}