Merge branch 'release/rc-v1.2.0' into bugfix/backup

2023-01-30 10:42:33 +03:00 · 2023-01-30 10:42:33 +03:00 · f6c5c7a437
commit f6c5c7a437
parent a27fac0255 5a2b8c871f
159 changed files with 1172 additions and 795 deletions
--- a/common/Tests/images-tests/src/constants.js
+++ b/common/Tests/images-tests/src/constants.js
@ -42,6 +42,13 @@ const paths = {

 const imageHelperPath = path.join(commonPath, "/utils/image-helpers.js");

+const wrongImportImages = [
+  `"/static/images`,
+  `"/images`,
+  `"static/images`,
+  `"images/`,
+];
+
 module.exports = {
  imagesPattern,
  filesPattern,
@ -50,4 +57,5 @@ module.exports = {
  paths,
  imageHelperPath,
  excludePath,
+  wrongImportImages,
 };
--- a/common/Tests/images-tests/src/index.js
+++ b/common/Tests/images-tests/src/index.js
@ -13,7 +13,7 @@ const {
  findImagesWithDifferentNameButEqualMD5,
 } = require("./differentNameEqualMD5");
 const { findImagesWithEqualMD5AndEqualName } = require("./equalMD5EqualName");
-
+const { findWrongImagesImport } = require("./wrongImagesImport");
 const { importImgToImageHelper } = require("./importImgToImageHelper");

 const runAllTests = async () => {
@ -66,6 +66,7 @@ const runAllTests = async () => {
  findImagesWithDifferentMD5ButEqualName(allImgs);
  findImagesWithDifferentNameButEqualMD5(allImgs);
  findImagesWithEqualMD5AndEqualName(allImgs);
+  findWrongImagesImport(allFiles);
 };

 runAllTests();
--- a/common/Tests/images-tests/src/wrongImagesImport.js
+++ b/common/Tests/images-tests/src/wrongImagesImport.js
@ -0,0 +1,44 @@
+const fs = require("fs");
+const path = require("path");
+
+const { wrongImportImages } = require("./constants");
+
+const pathToResultFile = path.join(
+  __dirname,
+  "..",
+  "result",
+  "WrongImagesImport"
+);
+
+const findWrongImagesImport = async (files) => {
+  let wrongImports = "";
+
+  files.forEach((file) => {
+    const data = fs.readFileSync(file.path, "utf8");
+
+    wrongImportImages.forEach((i) => {
+      const idx = data.indexOf(i);
+
+      //   console.log(file.path.indexOf("\\webpack"));
+
+      if (
+        idx > 0 &&
+        file.fileName.indexOf("webpack") === -1 &&
+        file.path.indexOf("common\\utils\\index.ts") === -1 &&
+        file.path.indexOf("context-menu\\sub-components\\sub-menu.js") === -1 &&
+        file.path.indexOf("drop-down-item\\index.js") === -1 &&
+        file.path.indexOf("common\\utils\\index.ts") === -1 &&
+        file.path.indexOf(".html") === -1 &&
+        file.path.indexOf("storybook-static") === -1
+      ) {
+        wrongImports = wrongImports + `${file.path}\n`;
+      }
+    });
+  });
+
+  fs.writeFileSync(pathToResultFile, "");
+
+  fs.appendFileSync(pathToResultFile, `${wrongImports}\n`);
+};
+
+module.exports = { findWrongImagesImport };
--- a/packages/client/public/locales/en/CreateEditRoomDialog.json
+++ b/packages/client/public/locales/en/CreateEditRoomDialog.json
@ -1,6 +1,7 @@
 {
  "ChooseRoomType": "Choose room type",
  "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
+  "CreateRoomConfirmation": "Continue without connecting the storage?\nYou have selected a third-party storage option that is not connected yet. If you proceed without connecting the service, this option will not be added.",
  "CollaborationRoomTitle": "Collaboration room",
  "CreateTagOption": "Create tag",
  "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose",
--- a/packages/client/public/locales/ru/CreateEditRoomDialog.json
+++ b/packages/client/public/locales/ru/CreateEditRoomDialog.json
@ -2,6 +2,7 @@
  "ChooseRoomType": "Выберите тип комнаты",
  "CollaborationRoomDescription": "Совместная работа над одним или несколькими документами с вашей командой",
  "CollaborationRoomTitle": "Комната для совместного редактирования",
+  "CreateRoomConfirmation": "Продолжить без подключения хранилища?\nВы выбрали сторонний вариант хранения, который еще не подключен. Если вы продолжите без подключения услуги, эта опция не будет добавлена",
  "CreateTagOption": "Создать тэг",
  "CustomRoomDescription": "Примените собственные настройки, чтобы использовать эту комнату для любых пользовательских целей",
  "CustomRoomTitle": "Пользовательская комната",
--- a/packages/client/src/components/Article/Body/index.js
+++ b/packages/client/src/components/Article/Body/index.js
@ -105,9 +105,6 @@ const ArticleBodyContent = (props) => {
            );
          })
          .finally(() => {
-            if (isMobileOnly || isMobile()) {
-              toggleArticleOpen();
-            }
            if (filesSection) {
              setIsLoading(false);
            } else {
@ -139,9 +136,6 @@ const ArticleBodyContent = (props) => {
          })
          .catch((err) => toastr.error(err))
          .finally(() => {
-            if (isMobileOnly || isMobile()) {
-              toggleArticleOpen();
-            }
            if (filesSection) {
              setIsLoading(false);
            } else {
@ -149,6 +143,10 @@ const ArticleBodyContent = (props) => {
            }
          });
      }
+
+      if (isMobileOnly || isMobile()) {
+        toggleArticleOpen();
+      }
    },
    [categoryType, roomsFolderId, archiveFolderId]
  );
--- a/packages/client/src/components/FilesPanels/index.js
+++ b/packages/client/src/components/FilesPanels/index.js
@ -22,6 +22,7 @@ import {
  ConvertDialog,
  CreateRoomDialog,
  InviteUsersWarningDialog,
+  CreateRoomConfirmDialog,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
 import ArchiveDialog from "../dialogs/ArchiveDialog";
@ -51,6 +52,8 @@ const Panels = (props) => {
    invitePanelVisible,
    convertPasswordDialogVisible,
    createRoomDialogVisible,
+    createRoomConfirmDialogVisible,
+    confirmDialogIsLoading,
    restoreAllPanelVisible,
    archiveDialogVisible,
    inviteUsersWarningDialogVisible,
@ -96,6 +99,9 @@ const Panels = (props) => {
    ),
    convertDialogVisible && <ConvertDialog key="convert-dialog" />,
    createRoomDialogVisible && <CreateRoomDialog key="create-room-dialog" />,
+    (createRoomConfirmDialogVisible || confirmDialogIsLoading) && (
+      <CreateRoomConfirmDialog key="create-room-confirm-dialog" />
+    ),
    selectFileDialogVisible && (
      <SelectFileDialog
        key="select-file-dialog"
@ -128,7 +134,14 @@ const Panels = (props) => {
 };

 export default inject(
-  ({ auth, dialogsStore, uploadDataStore, versionHistoryStore, backup }) => {
+  ({
+    auth,
+    dialogsStore,
+    uploadDataStore,
+    versionHistoryStore,
+    backup,
+    createEditRoomStore,
+  }) => {
    const {
      sharingPanelVisible,
      ownerPanelVisible,
@ -144,6 +157,7 @@ export default inject(
      conflictResolveDialogVisible,
      convertDialogVisible,
      createRoomDialogVisible,
+      createRoomConfirmDialogVisible,
      convertPasswordDialogVisible,
      connectItem, //TODO:
      restoreAllPanelVisible,
@ -161,6 +175,7 @@ export default inject(
    const { uploadPanelVisible } = uploadDataStore;
    const { isVisible: versionHistoryPanelVisible } = versionHistoryStore;
    const { hotkeyPanelVisible } = auth.settingsStore;
+    const { confirmDialogIsLoading } = createEditRoomStore;

    return {
      preparationPortalDialogVisible,
@ -180,6 +195,7 @@ export default inject(
      conflictResolveDialogVisible,
      convertDialogVisible,
      createRoomDialogVisible,
+      createRoomConfirmDialogVisible,
      convertPasswordDialogVisible,
      selectFileDialogVisible,
      createMasterForm,
@ -189,6 +205,7 @@ export default inject(
      invitePanelVisible: invitePanelOptions.visible,
      archiveDialogVisible,
      inviteUsersWarningDialogVisible,
+      confirmDialogIsLoading,
    };
  }
 )(observer(Panels));
--- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js
+++ b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js
@ -2,122 +2,43 @@ import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import { CreateRoomDialog } from "../dialogs";
-import { toastr } from "@docspace/components";
 import { isMobile } from "react-device-detect";

 const CreateRoomEvent = ({
  visible,
  onClose,

-  createRoom,
-  createRoomInThirdpary,
-  createTag,
-  addTagsToRoom,
-  deleteThirdParty,
-  fetchThirdPartyProviders,
-  calculateRoomLogoParams,
-  uploadRoomLogo,
-  addLogoToRoom,
  fetchTags,
-
+  setRoomParams,
+  onCreateRoom,
+  createRoomConfirmDialogVisible,
+  setCreateRoomConfirmDialogVisible,
+  confirmDialogIsLoading,
  connectDialogVisible,

-  currentFolderId,
-  updateCurrentFolder,
-
-  withPaging,
+  isLoading,
+  setIsLoading,
+  setOnClose,
  setCreateRoomDialogVisible,
-  fetchFiles,
-  setInfoPanelIsVisible,
-  setView,
+
+  fetchThirdPartyProviders,
  enableThirdParty,
+  deleteThirdParty,
 }) => {
  const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
  const [fetchedTags, setFetchedTags] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);

-  const openNewRoom = (id) => {
-    setView("info_members");
-    fetchFiles(id)
-      .then(() => {
-        !isMobile && setInfoPanelIsVisible(true);
-      })
-      .finally(() => {
-        setIsLoading(false);
-        onClose();
-      });
-  };
+  const onCreate = (roomParams) => {
+    setRoomParams(roomParams);
+    setOnClose(onClose);

-  const onCreate = async (roomParams) => {
-    const createRoomData = {
-      roomType: roomParams.type,
-      title: roomParams.title || t("Files:NewRoom"),
-    };
-
-    const createTagsData = roomParams.tags
-      .filter((t) => t.isNew)
-      .map((t) => t.name);
-    const addTagsData = roomParams.tags.map((tag) => tag.name);
-
-    const isThirdparty = roomParams.storageLocation.isThirdparty;
-    const storageFolderId = roomParams.storageLocation.storageFolderId;
-    const thirdpartyAccount = roomParams.storageLocation.thirdpartyAccount;
-
-    const uploadLogoData = new FormData();
-    uploadLogoData.append(0, roomParams.icon.uploadedFile);
-
-    try {
-      setIsLoading(true);
-
-      // create room
-      let room =
-        isThirdparty && storageFolderId
-          ? await createRoomInThirdpary(storageFolderId, createRoomData)
-          : await createRoom(createRoomData);
-
-      room.isLogoLoading = true;
-
-      // delete thirdparty account if not needed
-      if (!isThirdparty && storageFolderId)
-        await deleteThirdParty(thirdpartyAccount.providerId);
-
-      // create new tags
-      for (let i = 0; i < createTagsData.length; i++)
-        await createTag(createTagsData[i]);
-
-      // add new tags to room
-      if (!!addTagsData.length)
-        room = await addTagsToRoom(room.id, addTagsData);
-
-      // calculate and upload logo to room
-      if (roomParams.icon.uploadedFile) {
-        await uploadRoomLogo(uploadLogoData).then((response) => {
-          const url = URL.createObjectURL(roomParams.icon.uploadedFile);
-          const img = new Image();
-          img.onload = async () => {
-            const { x, y, zoom } = roomParams.icon;
-            room = await addLogoToRoom(room.id, {
-              tmpFile: response.data,
-              ...calculateRoomLogoParams(img, x, y, zoom),
-            });
-
-            !withPaging && openNewRoom(room.id);
-
-            URL.revokeObjectURL(img.src);
-          };
-          img.src = url;
-        });
-      } else !withPaging && openNewRoom(room.id);
-    } catch (err) {
-      toastr.error(err);
-      console.log(err);
-
-      setIsLoading(false);
-      onClose();
-    } finally {
-      if (withPaging) {
-        await updateCurrentFolder(null, currentFolderId);
-      }
+    if (
+      roomParams.storageLocation.isThirdparty &&
+      !roomParams.storageLocation.storageFolderId
+    ) {
+      setCreateRoomConfirmDialogVisible(true);
+    } else {
+      onCreateRoom();
    }
  };

@ -128,14 +49,18 @@ const CreateRoomEvent = ({

  useEffect(() => {
    setCreateRoomDialogVisible(true);
-
    return () => setCreateRoomDialogVisible(false);
  }, []);

  return (
    <CreateRoomDialog
      t={t}
-      visible={visible && !connectDialogVisible}
+      visible={
+        visible &&
+        !connectDialogVisible &&
+        !createRoomConfirmDialogVisible &&
+        !confirmDialogIsLoading
+      }
      onClose={onClose}
      onCreate={onCreate}
      fetchedTags={fetchedTags}
@ -151,65 +76,51 @@ const CreateRoomEvent = ({
 export default inject(
  ({
    auth,
+    createEditRoomStore,
    filesStore,
    tagsStore,
-    filesActionsStore,
-    selectedFolderStore,
    dialogsStore,
    settingsStore,
  }) => {
-    const {
-      createRoom,
-      createRoomInThirdpary,
-      addTagsToRoom,
-      calculateRoomLogoParams,
-      uploadRoomLogo,
-      addLogoToRoom,
-      fetchFiles,
-      addItem,
-    } = filesStore;
-    const { createTag, fetchTags } = tagsStore;
-
-    const { id: currentFolderId } = selectedFolderStore;
-    const { updateCurrentFolder } = filesActionsStore;
-
-    const { connectDialogVisible, setCreateRoomDialogVisible } = dialogsStore;
+    const { fetchTags } = tagsStore;

    const {
      deleteThirdParty,
      fetchThirdPartyProviders,
    } = settingsStore.thirdPartyStore;
-    const { withPaging } = auth.settingsStore;
-
-    const {
-      setIsVisible: setInfoPanelIsVisible,
-      setView,
-    } = auth.infoPanelStore;
-
    const { enableThirdParty } = settingsStore;

-    return {
-      createRoom,
-      createRoomInThirdpary,
-      createTag,
-      fetchTags,
-      addTagsToRoom,
-      deleteThirdParty,
-      fetchThirdPartyProviders,
-      calculateRoomLogoParams,
-      uploadRoomLogo,
-      addLogoToRoom,
-
+    const {
+      createRoomConfirmDialogVisible,
+      setCreateRoomConfirmDialogVisible,
      connectDialogVisible,
-      currentFolderId,
-      updateCurrentFolder,
-
-      withPaging,
      setCreateRoomDialogVisible,
-      fetchFiles,
-      setInfoPanelIsVisible,
-      setView,
+    } = dialogsStore;
+
+    const {
+      setRoomParams,
+      onCreateRoom,
+      isLoading,
+      setIsLoading,
+      setOnClose,
+      confirmDialogIsLoading,
+    } = createEditRoomStore;
+
+    return {
+      fetchTags,
+      setRoomParams,
+      onCreateRoom,
+      createRoomConfirmDialogVisible,
+      setCreateRoomConfirmDialogVisible,
+      connectDialogVisible,
+      isLoading,
+      setIsLoading,
+      setOnClose,
+      confirmDialogIsLoading,
+      setCreateRoomDialogVisible,
+      fetchThirdPartyProviders,
      enableThirdParty,
+      deleteThirdParty,
    };
  }
 )(observer(CreateRoomEvent));
--- a/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
+++ b/packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js
@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { isMobileOnly } from "react-device-detect";
-import MenuIcon from "../../../../../../public/images/menu.react.svg";
+import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
 import { mobile } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";

--- a/packages/client/src/components/PeopleArticle/MainButton/index.js
+++ b/packages/client/src/components/PeopleArticle/MainButton/index.js
@ -1,6 +1,8 @@
 import InvitationLinkReactSvgUrl from "PUBLIC_DIR/images/invitation.link.react.svg?url";
 import PlaneReactSvgUrl from "PUBLIC_DIR/images/plane.react.svg?url";
 import ImportReactSvgUrl from "PUBLIC_DIR/images/import.react.svg?url";
+import AddDepartmentReactSvgUrl from "PUBLIC_DIR/images/add.department.react.svg?url";
+import AddGuestReactSvgUrl from "PUBLIC_DIR/images/add.guest.react.svg?url";
 import AddEmployeeReactSvgUrl from "ASSETS/images/add.employee.react.svg?url";
 import React from "react";
 //import PropTypes from "prop-types";
@ -110,7 +112,7 @@ class ArticleMainButtonContent extends React.Component {
      //   icon: combineUrl(
      //     window.DocSpaceConfig?.proxy?.url,
      //     homepage,
-      //     "/images/add.guest.react.svg"
+      //     AddGuestReactSvgUrl
      //   ),
      //   label: guestCaption,
      //   onClick: this.goToGuestCreate,
@ -120,7 +122,7 @@ class ArticleMainButtonContent extends React.Component {
      //   icon: combineUrl(
      //     window.DocSpaceConfig?.proxy?.url,
      //     homepage,
-      //     "/images/add.department.react.svg"
+      //     AddDepartmentReactSvgUrl
      //   ),
      //   label: groupCaption,
      //   onClick: this.goToGroupCreate,
--- a/packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js
+++ b/packages/client/src/components/dialogs/CreateRoomConfirmDialog/index.js
@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import ModalDialog from "@docspace/components/modal-dialog";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import { Button } from "@docspace/components";
+
+const CreateRoomConfirmDialog = ({
+  t,
+
+  visible,
+  setVisible,
+
+  confirmDialogIsLoading,
+  onCreateRoom,
+}) => {
+  const onContinue = async () => {
+    await onCreateRoom();
+    onClose();
+  };
+
+  const onClose = () => setVisible(false);
+
+  return (
+    <ModalDialog
+      visible={visible || confirmDialogIsLoading}
+      onClose={onClose}
+      isLarge
+      zIndex={310}
+    >
+      <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        {t("CreateEditRoomDialog:CreateRoomConfirmation")}
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          label={t("Common:ContinueButton")}
+          size="normal"
+          primary
+          isLoading={confirmDialogIsLoading}
+          onClick={onContinue}
+        />
+        <Button
+          label={t("Common:CancelButton")}
+          size="normal"
+          onClick={onClose}
+        />
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default inject(({ dialogsStore, createEditRoomStore }) => {
+  const {
+    createRoomConfirmDialogVisible: visible,
+    setCreateRoomConfirmDialogVisible: setVisible,
+  } = dialogsStore;
+
+  const { confirmDialogIsLoading, onCreateRoom } = createEditRoomStore;
+
+  return {
+    visible,
+    setVisible,
+
+    confirmDialogIsLoading,
+    onCreateRoom,
+  };
+})(withTranslation(["Common, Files"])(observer(CreateRoomConfirmDialog)));
--- a/packages/client/src/components/dialogs/index.js
+++ b/packages/client/src/components/dialogs/index.js
@ -26,6 +26,7 @@ import DeletePortalDialog from "./DeletePortalDialog";
 import InviteUsersWarningDialog from "./InviteUsersWarningDialog";
 import LogoutConnectionDialog from "./LogoutConnectionDialog";
 import LogoutAllConnectionDialog from "./LogoutAllConnectionDialog";
+import CreateRoomConfirmDialog from "./CreateRoomConfirmDialog";

 export {
  EmptyTrashDialog,
@ -48,6 +49,7 @@ export {
  ResetApplicationDialog,
  BackupCodesDialog,
  CreateRoomDialog,
+  CreateRoomConfirmDialog,
  EditRoomDialog,
  ChangePortalOwnerDialog,
  ChangeNameDialog,
--- a/packages/client/src/pages/Files.jsx
+++ b/packages/client/src/pages/Files.jsx
@ -113,11 +113,11 @@ const FilesSection = React.memo(() => {
          "/rooms/archived/:room",
          "/rooms/archived/:room/filter",

-          "/files/favorite",
-          "/files/favorite/filter",
+          // "/files/favorite",
+          // "/files/favorite/filter",

-          "/files/recent",
-          "/files/recent/filter",
+          // "/files/recent",
+          // "/files/recent/filter",
          "/products/files/",
        ]}
        component={Home}
--- a/packages/client/src/pages/Home/MediaViewer/index.js
+++ b/packages/client/src/pages/Home/MediaViewer/index.js
@ -135,19 +135,17 @@ const FilesMediaViewer = (props) => {

    setMediaViewerData({ visible: false, id: null });

-    if (e) {
-      const url = localStorage.getItem("isFirstUrl");
+    const url = localStorage.getItem("isFirstUrl");

-      if (!url) {
-        return;
-      }
-
-      setScrollToItem({ id: currentMediaFileId, type: "file" });
-      const targetFile = files.find((item) => item.id === currentMediaFileId);
-      if (targetFile) setBufferSelection(targetFile);
-
-      window.history.replaceState(null, null, url);
+    if (!url) {
+      return;
    }
+
+    setScrollToItem({ id: currentMediaFileId, type: "file" });
+    const targetFile = files.find((item) => item.id === currentMediaFileId);
+    if (targetFile) setBufferSelection(targetFile);
+
+    window.history.replaceState(null, null, url);
  };

  return (
--- a/packages/client/src/store/CreateEditRoomStore.js
+++ b/packages/client/src/store/CreateEditRoomStore.js
@ -0,0 +1,166 @@
+import { makeAutoObservable } from "mobx";
+import { toastr } from "@docspace/components";
+import { isMobile } from "react-device-detect";
+
+class CreateEditRoomStore {
+  roomParams = null;
+  isLoading = null;
+  confirmDialogIsLoading = false;
+  onClose = null;
+
+  filesStore = null;
+  tagsStore = null;
+  selectedFolderStore = null;
+  filesActionsStore = null;
+  thirdPartyStore = null;
+  settingsStore = null;
+  infoPanelStore = null;
+
+  constructor(
+    filesStore,
+    filesActionsStore,
+    selectedFolderStore,
+    tagsStore,
+    thirdPartyStore,
+    settingsStore,
+    infoPanelStore
+  ) {
+    makeAutoObservable(this);
+
+    this.filesStore = filesStore;
+    this.tagsStore = tagsStore;
+    this.selectedFolderStore = selectedFolderStore;
+    this.filesActionsStore = filesActionsStore;
+    this.thirdPartyStore = thirdPartyStore;
+    this.settingsStore = settingsStore;
+    this.infoPanelStore = infoPanelStore;
+  }
+
+  setRoomParams = (roomParams) => {
+    this.roomParams = roomParams;
+  };
+
+  setIsLoading = (isLoading) => {
+    this.isLoading = isLoading;
+  };
+
+  setConfirmDialogIsLoading = (confirmDialogIsLoading) => {
+    this.confirmDialogIsLoading = confirmDialogIsLoading;
+  };
+
+  setOnClose = (onClose) => {
+    this.onClose = onClose;
+  };
+
+  setRoomIsCreated = (onClose) => {
+    this.onClose = onClose;
+  };
+
+  onCreateRoom = async () => {
+    const roomParams = this.roomParams;
+
+    const { createTag } = this.tagsStore;
+    const { id: currentFolderId } = this.selectedFolderStore;
+    const { updateCurrentFolder } = this.filesActionsStore;
+    const { deleteThirdParty } = this.thirdPartyStore;
+    const { withPaging } = this.settingsStore;
+    const {
+      createRoom,
+      createRoomInThirdpary,
+      addTagsToRoom,
+      calculateRoomLogoParams,
+      uploadRoomLogo,
+      addLogoToRoom,
+    } = this.filesStore;
+
+    const createRoomData = {
+      roomType: roomParams.type,
+      title: roomParams.title || t("Files:NewRoom"),
+    };
+
+    const createTagsData = roomParams.tags
+      .filter((t) => t.isNew)
+      .map((t) => t.name);
+    const addTagsData = roomParams.tags.map((tag) => tag.name);
+
+    const isThirdparty = roomParams.storageLocation.isThirdparty;
+    const storageFolderId = roomParams.storageLocation.storageFolderId;
+    const thirdpartyAccount = roomParams.storageLocation.thirdpartyAccount;
+
+    const uploadLogoData = new FormData();
+    uploadLogoData.append(0, roomParams.icon.uploadedFile);
+
+    try {
+      this.setIsLoading(true);
+      this.setConfirmDialogIsLoading(true);
+
+      // create room
+      let room =
+        isThirdparty && storageFolderId
+          ? await createRoomInThirdpary(storageFolderId, createRoomData)
+          : await createRoom(createRoomData);
+
+      room.isLogoLoading = true;
+
+      // delete thirdparty account if not needed
+      if (!isThirdparty && storageFolderId)
+        await deleteThirdParty(thirdpartyAccount.providerId);
+
+      // create new tags
+      for (let i = 0; i < createTagsData.length; i++)
+        await createTag(createTagsData[i]);
+
+      // add new tags to room
+      if (!!addTagsData.length)
+        room = await addTagsToRoom(room.id, addTagsData);
+
+      // calculate and upload logo to room
+      if (roomParams.icon.uploadedFile) {
+        await uploadRoomLogo(uploadLogoData).then(async (response) => {
+          const url = URL.createObjectURL(roomParams.icon.uploadedFile);
+          const img = new Image();
+          img.onload = async () => {
+            const { x, y, zoom } = roomParams.icon;
+            room = await addLogoToRoom(room.id, {
+              tmpFile: response.data,
+              ...calculateRoomLogoParams(img, x, y, zoom),
+            });
+
+            !withPaging && this.onOpenNewRoom(room.id);
+
+            URL.revokeObjectURL(img.src);
+          };
+          img.src = url;
+        });
+      } else !withPaging && this.onOpenNewRoom(room.id);
+      this.roomIsCreated = true;
+    } catch (err) {
+      toastr.error(err);
+      console.log(err);
+      this.setIsLoading(false);
+      this.setConfirmDialogIsLoading(false);
+      this.onClose();
+      this.roomIsCreated = true;
+    } finally {
+      if (withPaging) await updateCurrentFolder(null, currentFolderId);
+    }
+  };
+
+  onOpenNewRoom = async (id) => {
+    const { fetchFiles } = this.filesStore;
+    const { setView, setIsVisible } = this.infoPanelStore;
+
+    setView("info_members");
+    fetchFiles(id)
+      .then(() => {
+        !isMobile && setIsVisible(true);
+      })
+      .finally(() => {
+        this.setIsLoading(false);
+        this.setConfirmDialogIsLoading(false);
+        this.onClose();
+      });
+  };
+}
+
+export default CreateEditRoomStore;
--- a/packages/client/src/store/DialogsStore.js
+++ b/packages/client/src/store/DialogsStore.js
@ -56,6 +56,7 @@ class DialogsStore {
  isConnectDialogReconnect = false;
  saveAfterReconnectOAuth = false;
  createRoomDialogVisible = false;
+  createRoomConfirmDialogVisible = false;

  constructor(
    authStore,
@ -302,6 +303,10 @@ class DialogsStore {
    this.createRoomDialogVisible = createRoomDialogVisible;
  };

+  setCreateRoomConfirmDialogVisible = (createRoomConfirmDialogVisible) => {
+    this.createRoomConfirmDialogVisible = createRoomConfirmDialogVisible;
+  };
+
  get someDialogIsOpen() {
    return (
      this.sharingPanelVisible ||
@ -325,7 +330,8 @@ class DialogsStore {
      this.archiveDialogVisible ||
      this.restoreAllPanelVisible ||
      this.inviteUsersWarningDialogVisible ||
-      this.createRoomDialogVisible
+      this.createRoomDialogVisible ||
+      this.createRoomConfirmDialogVisible
    );
  }

--- a/packages/client/src/store/FilesActionsStore.js
+++ b/packages/client/src/store/FilesActionsStore.js
@ -324,6 +324,7 @@ class FilesActionStore {
            } else {
              this.updateFilesAfterDelete(folderIds);
              this.filesStore.removeFiles(fileIds, folderIds, showToast);
+              this.uploadDataStore.removeFiles(fileIds);
            }

            if (currentFolderId) {
--- a/packages/client/src/store/FilesStore.js
+++ b/packages/client/src/store/FilesStore.js
@ -1,3 +1,4 @@
+import axios from "axios";
 import { makeAutoObservable, runInAction } from "mobx";
 import api from "@docspace/common/api";
 import {
@ -104,6 +105,7 @@ class FilesStore {
  isLoadedFetchFiles = false;

  tempActionFilesIds = [];
+  tempActionFoldersIds = [];
  operationAction = false;

  isErrorRoomNotAvailable = false;
@ -266,7 +268,7 @@ class FilesStore {
          }
          break;
        case "delete":
-          if (opt?.type == "file" && opt?.id) {
+          if (opt?.type === "file" && opt?.id) {
            const foundIndex = this.files.findIndex((x) => x.id === opt?.id);
            if (foundIndex == -1) return;

@ -299,6 +301,37 @@ class FilesStore {
              this.isHidePagination = true;
            });

+            runInAction(() => {
+              if (
+                this.files.length === 0 &&
+                this.folders.length === 0 &&
+                this.pageItemsLength > 1
+              ) {
+                this.isLoadingFilesFind = true;
+              }
+            });
+          } else if (opt?.type === "folder" && opt?.id) {
+            const foundIndex = this.folders.findIndex((x) => x.id === opt?.id);
+            if (foundIndex == -1) return;
+
+            console.log(
+              "[WS] delete folder",
+              this.folders[foundIndex].id,
+              this.folders[foundIndex].title
+            );
+
+            const tempActionFoldersIds = JSON.parse(
+              JSON.stringify(this.tempActionFoldersIds)
+            );
+            tempActionFoldersIds.push(this.folders[foundIndex].id);
+
+            this.setTempActionFoldersIds(tempActionFoldersIds);
+            this.debounceRemoveFolders();
+
+            runInAction(() => {
+              this.isHidePagination = true;
+            });
+
            runInAction(() => {
              if (
                this.files.length === 0 &&
@ -406,6 +439,10 @@ class FilesStore {
    this.removeFiles(this.tempActionFilesIds);
  }, 1000);

+  debounceRemoveFolders = debounce(() => {
+    this.removeFiles(null, this.tempActionFoldersIds);
+  }, 1000);
+
  setIsErrorRoomNotAvailable = (state) => {
    this.isErrorRoomNotAvailable = state;
  };
@ -414,6 +451,10 @@ class FilesStore {
    this.tempActionFilesIds = tempActionFilesIds;
  };

+  setTempActionFoldersIds = (tempActionFoldersIds) => {
+    this.tempActionFoldersIds = tempActionFoldersIds;
+  };
+
  setOperationAction = (operationAction) => {
    this.operationAction = operationAction;
  };
@ -1090,7 +1131,11 @@ class FilesStore {
            this.isErrorRoomNotAvailable = true;
          });
        } else {
-          toastr.error(err);
+          if (axios.isCancel(err)) {
+            console.log("Request canceled", err.message);
+          } else {
+            toastr.error(err);
+          }
        }
      })
      .finally(() => {
@ -1204,7 +1249,11 @@ class FilesStore {
          return Promise.resolve(selectedFolder);
        })
        .catch((err) => {
-          toastr.error(err);
+          if (axios.isCancel(err)) {
+            console.log("Request canceled", err.message);
+          } else {
+            toastr.error(err);
+          }
        });

    return request();
--- a/packages/client/src/store/UploadDataStore.js
+++ b/packages/client/src/store/UploadDataStore.js
@ -73,6 +73,14 @@ class UploadDataStore {
    this.settingsStore = settingsStore;
  }

+  removeFiles = (fileIds) => {
+    fileIds.forEach((id) => {
+      this.files = this.files?.filter(
+        (file) => !(file.action === "converted" && file.fileInfo.id === id)
+      );
+    });
+  };
+
  selectUploadedFile = (file) => {
    this.selectedUploadFile = file;
  };
@ -365,9 +373,9 @@ class UploadDataStore {
      const res = convertFile(fileId, itemPassword)
        .then((res) => res)
        .catch(() => {
-          runInAction(() => {
-            const error = t("FailedToConvert");
+          const error = t("FailedToConvert");

+          runInAction(() => {
            if (file) file.error = error;
            if (historyFile) historyFile.error = error;
          });
@ -744,7 +752,8 @@ class UploadDataStore {
    fileSize,
    indexOfFile,
    file,
-    path
+    path,
+    t
  ) => {
    this.filesStore.setOperationAction(true);
    const length = requestsDataArray.length;
@ -815,7 +824,7 @@ class UploadDataStore {

      if (!this.filesToConversion.length || this.converted) {
        this.filesToConversion.push(currentFile);
-        this.startConversion();
+        this.startConversion(t);
      } else {
        this.filesToConversion.push(currentFile);
      }
@ -948,7 +957,8 @@ class UploadDataStore {
          fileSize,
          indexOfFile,
          file,
-          path
+          path,
+          t
        );
      })
      .catch((error) => {
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@ -32,6 +32,7 @@ import PeopleStore from "./PeopleStore";
 import OformsStore from "./OformsStore";
 import AccessRightsStore from "./AccessRightsStore";
 import TableStore from "./TableStore";
+import CreateEditRoomStore from "./CreateEditRoomStore";

 const oformsStore = new OformsStore(authStore);

@ -146,6 +147,16 @@ authStore.infoPanelStore.peopleStore = peopleStore;
 authStore.infoPanelStore.selectedFolderStore = selectedFolderStore;
 authStore.infoPanelStore.treeFoldersStore = treeFoldersStore;

+const createEditRoomStore = new CreateEditRoomStore(
+  filesStore,
+  filesActionsStore,
+  selectedFolderStore,
+  tagsStore,
+  thirdPartyStore,
+  authStore.settingsStore,
+  authStore.infoPanelStore
+);
+
 const store = {
  auth: authStore,
  payments: paymentStore,
@ -180,6 +191,7 @@ const store = {
  peopleStore,

  accessRightsStore,
+  createEditRoomStore,
 };

 export default store;
--- a/packages/common/components/AdvancedSelector/AdvancedSelector.js
+++ b/packages/common/components/AdvancedSelector/AdvancedSelector.js
@ -9,7 +9,7 @@ import { Base } from "@docspace/components/themes";
 import Selector from "./sub-components/Selector";
 import Backdrop from "@docspace/components/backdrop";

-import CrossIcon from "../../../../public/images/cross.react.svg";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";

 const StyledBlock = styled.div`
  position: fixed;
--- a/packages/common/components/AdvancedSelector/sub-components/Header.js
+++ b/packages/common/components/AdvancedSelector/sub-components/Header.js
@ -3,7 +3,7 @@ import React from "react";
 import Heading from "@docspace/components/heading";
 import IconButton from "@docspace/components/icon-button";

-import ArrowPathReactSvgUrl from "../../../../../public/images/arrow.path.react.svg?url";
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";

 const Header = ({ headerLabel, onArrowClickAction }) => {
  return (
--- a/packages/common/components/Article/styled-article.js
+++ b/packages/common/components/Article/styled-article.js
@ -8,8 +8,8 @@ import {
 } from "@docspace/components/utils/device";

 import { Base } from "@docspace/components/themes";
-import MenuIcon from "../../../../public/images/menu.react.svg";
-import CrossIcon from "../../../../public/images/cross.react.svg";
+import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";

 const StyledArticle = styled.article`
  position: relative;
--- a/packages/common/components/Article/sub-components/article-hide-menu-button.js
+++ b/packages/common/components/Article/sub-components/article-hide-menu-button.js
@ -6,8 +6,8 @@ import { desktop, mobile, tablet } from "@docspace/components/utils/device";
 import { isTablet, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import Base from "@docspace/components/themes/base";
-import ArticleHideMenuReactSvgUrl from "../../../../../public/images/article-hide-menu.react.svg?url";
-import ArticleShowMenuReactSvgUrl from "../../../../../public/images/article-show-menu.react.svg?url";
+import ArticleHideMenuReactSvgUrl from "PUBLIC_DIR/images/article-hide-menu.react.svg?url";
+import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg?url";

 const StyledHideArticleMenuButton = styled.div`
  display: flex;
--- a/packages/common/components/Article/sub-components/article-payment-alert.js
+++ b/packages/common/components/Article/sub-components/article-payment-alert.js
@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import { withRouter } from "react-router";
 import { useTranslation, Trans } from "react-i18next";
 import Text from "@docspace/components/text";
-import ArrowRightIcon from "../../../../../public/images/arrow.right.react.svg";
+import ArrowRightIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
 import { StyledArticlePaymentAlert } from "../styled-article";
 import styled from "styled-components";
 import { combineUrl } from "@docspace/common/utils";
--- a/packages/common/components/Article/sub-components/article-profile.js
+++ b/packages/common/components/Article/sub-components/article-profile.js
@ -13,8 +13,8 @@ import {
  StyledUserName,
  StyledProfileWrapper,
 } from "../styled-article";
-import VerticalDotsReactSvgUrl from "../../../../../public/images/vertical-dots.react.svg?url";
-import DefaultUserPhotoPngUrl from "../../../../../public/images/default_user_photo_size_82-82.png";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
+import DefaultUserPhotoPngUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";

 const ArticleProfile = (props) => {
  const { user, showText, getUserRole, getActions, onProfileClick } = props;
--- a/packages/common/components/FilterInput/sub-components/FilterBlock.js
+++ b/packages/common/components/FilterInput/sub-components/FilterBlock.js
@ -2,7 +2,7 @@ import React from "react";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";

-import ClearReactSvgUrl from "../../../../../public/images/clear.react.svg?url";
+import ClearReactSvgUrl from "PUBLIC_DIR/images/clear.react.svg?url";

 import Loaders from "../../Loaders";

--- a/packages/common/components/FilterInput/sub-components/FilterBlockItem.js
+++ b/packages/common/components/FilterInput/sub-components/FilterBlockItem.js
@ -23,7 +23,7 @@ import {

 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";

-import XIcon from "../../../../../public/images/x.react.svg";
+import XIcon from "PUBLIC_DIR/images/x.react.svg";

 const FilterBlockItem = ({
  group,
--- a/packages/common/components/FilterInput/sub-components/FilterButton.js
+++ b/packages/common/components/FilterInput/sub-components/FilterButton.js
@ -1,5 +1,5 @@
 import React from "react";
-import FilterReactSvrUrl from "../../../../../public/images/filter.react.svg?url";
+import FilterReactSvrUrl from "PUBLIC_DIR/images/filter.react.svg?url";

 import IconButton from "@docspace/components/icon-button";
 import { Base } from "@docspace/components/themes";
--- a/packages/common/components/FilterInput/sub-components/SelectedItem.js
+++ b/packages/common/components/FilterInput/sub-components/SelectedItem.js
@ -1,6 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import CrossReactSvgUrl from "../../../../../public/images/cross.react.svg?url";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";

 import Text from "@docspace/components/text";
 import IconButton from "@docspace/components/icon-button";
--- a/packages/common/components/FilterInput/sub-components/SortButton.js
+++ b/packages/common/components/FilterInput/sub-components/SortButton.js
@ -12,8 +12,8 @@ import Text from "@docspace/components/text";
 import { mobile } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";

-import SortDesc from "../../../../../public/images/sort.desc.react.svg";
-import SortReactSvgUrl from "../../../../../public/images/sort.react.svg?url";
+import SortDesc from "PUBLIC_DIR/images/sort.desc.react.svg";
+import SortReactSvgUrl from "PUBLIC_DIR/images/sort.react.svg?url";
 import Backdrop from "@docspace/components/backdrop";
 import { Events } from "@docspace/common/constants";

--- a/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js
+++ b/packages/common/components/FilterInput/sub-components/StyledFilterBlock.js
@ -5,7 +5,7 @@ import { isMobileOnly, isMobile } from "react-device-detect";
 import ToggleButton from "@docspace/components/toggle-button";
 import { mobile, tablet } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
-import CrossIcon from "../../../../../public/images/cross.react.svg";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";

 const StyledFilterBlock = styled.div`
  position: fixed;
--- a/packages/common/components/FloatingButton/FloatingButton.js
+++ b/packages/common/components/FloatingButton/FloatingButton.js
@ -11,16 +11,16 @@ import {
  IconBox,
 } from "./StyledFloatingButton";

-import ButtonUploadIcon from "../../../../public/images/button.upload.react.svg";
-import ButtonFileIcon from "../../../../public/images/button.file.react.svg";
-import ButtonTrashIcon from "../../../../public/images/button.trash.react.svg";
-import ButtonMoveIcon from "../../../../public/images/button.move.react.svg";
-import ButtonDuplicateIcon from "../../../../public/images/button.duplicate.react.svg";
-import ButtonAlertIcon from "../../../../public/images/button.alert.react.svg";
+import ButtonUploadIcon from "PUBLIC_DIR/images/button.upload.react.svg";
+import ButtonFileIcon from "PUBLIC_DIR/images/button.file.react.svg";
+import ButtonTrashIcon from "PUBLIC_DIR/images/button.trash.react.svg";
+import ButtonMoveIcon from "PUBLIC_DIR/images/button.move.react.svg";
+import ButtonDuplicateIcon from "PUBLIC_DIR/images/button.duplicate.react.svg";
+import ButtonAlertIcon from "PUBLIC_DIR/images/button.alert.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import ButtonPlusIcon from "../../../../public/images/actions.button.plus.react.svg";
-import ButtonMinusIcon from "../../../../public/images/actions.button.minus.react.svg";
-import CloseIcon from "../../../../public/images/close-icon.react.svg";
+import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
+import ButtonMinusIcon from "PUBLIC_DIR/images/actions.button.minus.react.svg";
+import CloseIcon from "PUBLIC_DIR/images/close-icon.react.svg";

 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";

--- a/packages/common/components/MediaViewer/MediaViewer.js
+++ b/packages/common/components/MediaViewer/MediaViewer.js
@ -7,14 +7,14 @@ import Hammer from "hammerjs";
 import { isMobileOnly } from "react-device-detect";
 import { FileStatus } from "@docspace/common/constants";

-import InfoOutlineReactSvgUrl from "../../../../public/images/info.outline.react.svg?url";
-import CopyReactSvgUrl from "../../../../public/images/copy.react.svg?url";
-import DuplicateReactSvgUrl from "../../../../public/images/duplicate.react.svg?url";
-import DownloadReactSvgUrl from "../../../../public/images/download.react.svg?url";
-import DownloadAsReactSvgUrl from "../../../../public/images/download-as.react.svg?url";
-import RenameReactSvgUrl from "../../../../public/images/rename.react.svg?url";
-import TrashReactSvgUrl from "../../../../public/images/trash.react.svg?url";
-import MoveReactSvgUrl from "../../../../public/images/duplicate.react.svg?url";
+import InfoOutlineReactSvgUrl from "PUBLIC_DIR/images/info.outline.react.svg?url";
+import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
+import DuplicateReactSvgUrl from "PUBLIC_DIR/images/duplicate.react.svg?url";
+import DownloadReactSvgUrl from "PUBLIC_DIR/images/download.react.svg?url";
+import DownloadAsReactSvgUrl from "PUBLIC_DIR/images/download-as.react.svg?url";
+import RenameReactSvgUrl from "PUBLIC_DIR/images/rename.react.svg?url";
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
+import MoveReactSvgUrl from "PUBLIC_DIR/images/duplicate.react.svg?url";

 const mediaTypes = Object.freeze({
  audio: 1,
--- a/packages/common/components/MediaViewer/sub-components/image-viewer.js
+++ b/packages/common/components/MediaViewer/sub-components/image-viewer.js
@ -2,17 +2,17 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";

-import MediaZoomInIcon from "../../../../../public/images/media.zoomin.react.svg";
-import MediaZoomOutIcon from "../../../../../public/images/media.zoomout.react.svg";
-import MediaRotateLeftIcon from "../../../../../public/images/media.rotateleft.react.svg";
-import MediaRotateRightIcon from "../../../../../public/images/media.rotateright.react.svg";
-import MediaDeleteIcon from "../../../../../public/images/media.delete.react.svg";
-import MediaDownloadIcon from "../../../../../public/images/download.react.svg";
+import MediaZoomInIcon from "PUBLIC_DIR/images/media.zoomin.react.svg";
+import MediaZoomOutIcon from "PUBLIC_DIR/images/media.zoomout.react.svg";
+import MediaRotateLeftIcon from "PUBLIC_DIR/images/media.rotateleft.react.svg";
+import MediaRotateRightIcon from "PUBLIC_DIR/images/media.rotateright.react.svg";
+import MediaDeleteIcon from "PUBLIC_DIR/images/media.delete.react.svg";
+import MediaDownloadIcon from "PUBLIC_DIR/images/download.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import MediaFavoriteIcon from "../../../../../public/images/favorite.react.svg";
+import MediaFavoriteIcon from "PUBLIC_DIR/images/favorite.react.svg";

-import ViewerSeparator from "../../../../../public/images/viewer.separator.react.svg";
-import MediaShare from "../../../../../public/images/share.react.svg";
+import ViewerSeparator from "PUBLIC_DIR/images/viewer.separator.react.svg";
+import MediaShare from "PUBLIC_DIR/images/share.react.svg";

 import DropDownItem from "@docspace/components/drop-down-item";
 import DropDown from "@docspace/components/drop-down";
--- a/packages/common/components/MediaViewer/sub-components/video-viewer.js
+++ b/packages/common/components/MediaViewer/sub-components/video-viewer.js
@ -7,11 +7,11 @@ import ReactPlayer from "react-player";

 import Duration from "./duration";
 import Progress from "./progress";
-import MediaPauseIcon from "../../../../../public/images/media.pause.react.svg";
-import MediaPlayIcon from "../../../../../public/images/media.play.react.svg";
-import MediaFullScreenIcon from "../../../../../public/images/media.fullscreen.video.react.svg";
-import MediaMuteIcon from "../../../../../public/images/media.mute.react.svg";
-import MediaMuteOffIcon from "../../../../../public/images/media.muteoff.react.svg";
+import MediaPauseIcon from "PUBLIC_DIR/images/media.pause.react.svg";
+import MediaPlayIcon from "PUBLIC_DIR/images/media.play.react.svg";
+import MediaFullScreenIcon from "PUBLIC_DIR/images/media.fullscreen.video.react.svg";
+import MediaMuteIcon from "PUBLIC_DIR/images/media.mute.react.svg";
+import MediaMuteOffIcon from "PUBLIC_DIR/images/media.muteoff.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 import { Base } from "@docspace/components/themes";

--- a/packages/common/components/MoreLoginModal/index.tsx
+++ b/packages/common/components/MoreLoginModal/index.tsx
@ -6,7 +6,7 @@ import { providersData } from "@docspace/common/constants";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
 import { getProviderTranslation } from "@docspace/common/utils";
-import SsoReactSvgUrl from "../../../../public/images/sso.react.svg?url";
+import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url";

 const ProviderRow = styled.div`
  width: 100%;
--- a/packages/common/components/Navigation/sub-components/arrow-btn.js
+++ b/packages/common/components/Navigation/sub-components/arrow-btn.js
@ -1,7 +1,7 @@
 import React from "react";
 import IconButton from "@docspace/components/icon-button";

-import ArrowPathReactSvgUrl from "../../../../../public/images/arrow.path.react.svg?url";
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";

 const ArrowButton = ({ isRootFolder, onBackToParentFolder }) => {
  return (
--- a/packages/common/components/Navigation/sub-components/control-btn.js
+++ b/packages/common/components/Navigation/sub-components/control-btn.js
@ -8,7 +8,7 @@ import { tablet } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
 import ToggleInfoPanelButton from "./toggle-infopanel-btn";
 import PlusButton from "./plus-btn";
-import VerticalDotsReactSvgUrl from "../../../../../public/images/vertical-dots.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";

 const StyledContainer = styled.div`
  margin-left: 20px;
--- a/packages/common/components/Navigation/sub-components/item.js
+++ b/packages/common/components/Navigation/sub-components/item.js
@ -4,10 +4,10 @@ import styled from "styled-components";

 import Text from "@docspace/components/text";

-import DefaultIcon from "../../../../../public/images/default.react.svg";
-import RootIcon from "../../../../../public/images/root.react.svg";
-import DefaultTabletIcon from "../../../../../public/images/default.tablet.react.svg";
-import RootTabletIcon from "../../../../../public/images/root.tablet.react.svg";
+import DefaultIcon from "PUBLIC_DIR/images/default.react.svg";
+import RootIcon from "PUBLIC_DIR/images/root.react.svg";
+import DefaultTabletIcon from "PUBLIC_DIR/images/default.tablet.react.svg";
+import RootTabletIcon from "PUBLIC_DIR/images/root.tablet.react.svg";

 import { isMobile } from "react-device-detect";
 import {
--- a/packages/common/components/Navigation/sub-components/plus-btn.js
+++ b/packages/common/components/Navigation/sub-components/plus-btn.js
@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";

-import PlusReactSvgUrl from "../../../../../public/images/plus.svg?url";
+import PlusReactSvgUrl from "PUBLIC_DIR/images/plus.svg?url";

 import IconButton from "@docspace/components/icon-button";
 import ContextMenu from "@docspace/components/context-menu";
--- a/packages/common/components/Navigation/sub-components/text.js
+++ b/packages/common/components/Navigation/sub-components/text.js
@ -2,7 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";

-import ExpanderDownIcon from "../../../../../public/images/expander-down.react.svg";
+import ExpanderDownIcon from "PUBLIC_DIR/images/expander-down.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 import Heading from "@docspace/components/heading";

--- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
+++ b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
@ -1,6 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import PanelReactSvgUrl from "../../../../../public/images/panel.react.svg?url";
+import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
 import IconButton from "@docspace/components/icon-button";
 import { isMobile } from "react-device-detect";
 import { tablet } from "@docspace/components/utils/device";
--- a/packages/common/components/Section/section.stories.js
+++ b/packages/common/components/Section/section.stories.js
@ -17,7 +17,7 @@ import withReadme from "storybook-readme/with-readme";
 import { boolean, withKnobs } from "@storybook/addon-knobs/react";
 import Readme from "./README.md";
 import { Router } from "react-router-dom";
-import ActionsHeaderTouchReactSvgUrl from "../../../../public/images/actions.header.touch.react.svg?url";
+import ActionsHeaderTouchReactSvgUrl from "PUBLIC_DIR/images/actions.header.touch.react.svg?url";

 const { authStore } = store;

--- a/packages/common/components/Section/sub-components/info-panel.js
+++ b/packages/common/components/Section/sub-components/info-panel.js
@ -9,7 +9,7 @@ import { inject } from "mobx-react";
 import PropTypes from "prop-types";
 import React, { useEffect } from "react";
 import styled, { css } from "styled-components";
-import CrossIcon from "../../../../../public/images/cross.react.svg";
+import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";

 import { isMobile, isMobileOnly } from "react-device-detect";
 import { Portal } from "@docspace/components";
--- a/packages/common/components/VersionMarkIcon/index.js
+++ b/packages/common/components/VersionMarkIcon/index.js
@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import VersionSvg from "../../../../public/images/versionrevision_active.react.svg";
+import VersionSvg from "PUBLIC_DIR/images/versionrevision_active.react.svg";

 const VersionMarkIcon = styled(VersionSvg)`
  path {
--- a/packages/common/constants/index.js
+++ b/packages/common/constants/index.js
@ -1,7 +1,7 @@
-import ShareGoogleReactSvgUrl from "../../../public/images/share.google.react.svg?url";
-import ShareFacebookReactSvgUrl from "../../../public/images/share.facebook.react.svg?url";
-import ShareTwitterReactSvgUrl from "../../../public/images/share.twitter.react.svg?url";
-import ShareLinkedinReactSvgUrl from "../../../public/images/share.linkedin.react.svg?url";
+import ShareGoogleReactSvgUrl from "PUBLIC_DIR/images/share.google.react.svg?url";
+import ShareFacebookReactSvgUrl from "PUBLIC_DIR/images/share.facebook.react.svg?url";
+import ShareTwitterReactSvgUrl from "PUBLIC_DIR/images/share.twitter.react.svg?url";
+import ShareLinkedinReactSvgUrl from "PUBLIC_DIR/images/share.linkedin.react.svg?url";

 export const LANGUAGE = "asc_language";
 export const COOKIE_EXPIRATION_YEAR = 31536000000;
--- a/packages/common/store/SettingsStore.js
+++ b/packages/common/store/SettingsStore.js
@ -236,7 +236,14 @@ class SettingsStore {
  };

  getPortalSettings = async () => {
-    const origSettings = await this.getSettings();
+    const origSettings = await this.getSettings().catch((err) => {
+      if (err?.response?.status === 404) {
+        // portal not found
+        return window.location.replace(
+          `https://www.onlyoffice.com/wrongportalname.aspx?url=${window.location.hostname}`
+        );
+      }
+    });

    if (origSettings?.plugins?.enabled) {
      initPluginStore();
--- a/packages/common/utils/axiosClient.js
+++ b/packages/common/utils/axiosClient.js
@ -1,6 +1,6 @@
 import axios from "axios";
 import combineUrl from "./combineUrl";
-import defaultConfig from "../../../public/scripts/config.json";
+import defaultConfig from "PUBLIC_DIR/scripts/config.json";

 let { api: apiConf, proxy: proxyConf } = defaultConfig;
 let { orign: apiOrigin, prefix: apiPrefix, timeout: apiTimeout } = apiConf;
--- a/packages/common/utils/firebase.js
+++ b/packages/common/utils/firebase.js
@ -2,11 +2,11 @@ import firebase from "firebase/app";
 import "firebase/remote-config";
 import "firebase/storage";

-import CampaignsCloudPngUrl from "../../../public/images/campaigns.cloud.png";
-import CampaignsDesktopPngUrl from "../../../public/images/campaigns.desktop.png";
-import CampaignsEducationPngUrl from "../../../public/images/campaigns.education.png";
-import CampaignsEnterprisePngUrl from "../../../public/images/campaigns.enterprise.png";
-import CampaignsIntegrationPngUrl from "../../../public/images/campaigns.integration.png";
+import CampaignsCloudPngUrl from "PUBLIC_DIR/images/campaigns.cloud.png";
+import CampaignsDesktopPngUrl from "PUBLIC_DIR/images/campaigns.desktop.png";
+import CampaignsEducationPngUrl from "PUBLIC_DIR/images/campaigns.education.png";
+import CampaignsEnterprisePngUrl from "PUBLIC_DIR/images/campaigns.enterprise.png";
+import CampaignsIntegrationPngUrl from "PUBLIC_DIR/images/campaigns.integration.png";

 class FirebaseHelper {
  remoteConfig = null;
--- a/packages/common/utils/image-helpers.js
+++ b/packages/common/utils/image-helpers.js
@ -1,307 +1,307 @@
-import AzReactSvgUrl from "../../../public/images/flags/az.react.svg?url";
-import BgReactSvgUrl from "../../../public/images/flags/bg.react.svg?url";
-import CsReactSvgUrl from "../../../public/images/flags/cs.react.svg?url";
-import DeATReactSvgUrl from "../../../public/images/flags/de-AT.react.svg?url";
-import DeCHReactSvgUrl from "../../../public/images/flags/de-CH.react.svg?url";
-import DeReactSvgUrl from "../../../public/images/flags/de.react.svg?url";
-import ElGRReactSvgUrl from "../../../public/images/flags/el-GR.react.svg?url";
-import EnGBReactSvgUrl from "../../../public/images/flags/en-GB.react.svg?url";
-import EnUSReactSvgUrl from "../../../public/images/flags/en-US.react.svg?url";
-import EsMXReactSvgUrl from "../../../public/images/flags/es-MX.react.svg?url";
-import EsReactSvgUrl from "../../../public/images/flags/es.react.svg?url";
-import FiReactSvgUrl from "../../../public/images/flags/fi.react.svg?url";
-import FrReactSvgUrl from "../../../public/images/flags/fr.react.svg?url";
-import ItReactSvgUrl from "../../../public/images/flags/it.react.svg?url";
-import JaJPReactSvgUrl from "../../../public/images/flags/ja-JP.react.svg?url";
-import KoKRReactSvgUrl from "../../../public/images/flags/ko-KR.react.svg?url";
-import LoLAReactSvgUrl from "../../../public/images/flags/lo-LA.react.svg?url";
-import LvReactSvgUrl from "../../../public/images/flags/lv.react.svg?url";
-import NlReactSvgUrl from "../../../public/images/flags/nl.react.svg?url";
-import PlReactSvgUrl from "../../../public/images/flags/pl.react.svg?url";
-import PtBRReactSvgUrl from "../../../public/images/flags/pt-BR.react.svg?url";
-import PtReactSvgUrl from "../../../public/images/flags/pt.react.svg?url";
-import RoReactSvgUrl from "../../../public/images/flags/ro.react.svg?url";
-import RuReactSvgUrl from "../../../public/images/flags/ru.react.svg?url";
-import SkReactSvgUrl from "../../../public/images/flags/sk.react.svg?url";
-import SlReactSvgUrl from "../../../public/images/flags/sl.react.svg?url";
-import TrReactSvgUrl from "../../../public/images/flags/tr.react.svg?url";
-import UkUAReactSvgUrl from "../../../public/images/flags/uk-UA.react.svg?url";
-import ViReactSvgUrl from "../../../public/images/flags/vi.react.svg?url";
-import ZhCNReactSvgUrl from "../../../public/images/flags/zh-CN.react.svg?url";
+import AzReactSvgUrl from "PUBLIC_DIR/images/flags/az.react.svg?url";
+import BgReactSvgUrl from "PUBLIC_DIR/images/flags/bg.react.svg?url";
+import CsReactSvgUrl from "PUBLIC_DIR/images/flags/cs.react.svg?url";
+import DeATReactSvgUrl from "PUBLIC_DIR/images/flags/de-AT.react.svg?url";
+import DeCHReactSvgUrl from "PUBLIC_DIR/images/flags/de-CH.react.svg?url";
+import DeReactSvgUrl from "PUBLIC_DIR/images/flags/de.react.svg?url";
+import ElGRReactSvgUrl from "PUBLIC_DIR/images/flags/el-GR.react.svg?url";
+import EnGBReactSvgUrl from "PUBLIC_DIR/images/flags/en-GB.react.svg?url";
+import EnUSReactSvgUrl from "PUBLIC_DIR/images/flags/en-US.react.svg?url";
+import EsMXReactSvgUrl from "PUBLIC_DIR/images/flags/es-MX.react.svg?url";
+import EsReactSvgUrl from "PUBLIC_DIR/images/flags/es.react.svg?url";
+import FiReactSvgUrl from "PUBLIC_DIR/images/flags/fi.react.svg?url";
+import FrReactSvgUrl from "PUBLIC_DIR/images/flags/fr.react.svg?url";
+import ItReactSvgUrl from "PUBLIC_DIR/images/flags/it.react.svg?url";
+import JaJPReactSvgUrl from "PUBLIC_DIR/images/flags/ja-JP.react.svg?url";
+import KoKRReactSvgUrl from "PUBLIC_DIR/images/flags/ko-KR.react.svg?url";
+import LoLAReactSvgUrl from "PUBLIC_DIR/images/flags/lo-LA.react.svg?url";
+import LvReactSvgUrl from "PUBLIC_DIR/images/flags/lv.react.svg?url";
+import NlReactSvgUrl from "PUBLIC_DIR/images/flags/nl.react.svg?url";
+import PlReactSvgUrl from "PUBLIC_DIR/images/flags/pl.react.svg?url";
+import PtBRReactSvgUrl from "PUBLIC_DIR/images/flags/pt-BR.react.svg?url";
+import PtReactSvgUrl from "PUBLIC_DIR/images/flags/pt.react.svg?url";
+import RoReactSvgUrl from "PUBLIC_DIR/images/flags/ro.react.svg?url";
+import RuReactSvgUrl from "PUBLIC_DIR/images/flags/ru.react.svg?url";
+import SkReactSvgUrl from "PUBLIC_DIR/images/flags/sk.react.svg?url";
+import SlReactSvgUrl from "PUBLIC_DIR/images/flags/sl.react.svg?url";
+import TrReactSvgUrl from "PUBLIC_DIR/images/flags/tr.react.svg?url";
+import UkUAReactSvgUrl from "PUBLIC_DIR/images/flags/uk-UA.react.svg?url";
+import ViReactSvgUrl from "PUBLIC_DIR/images/flags/vi.react.svg?url";
+import ZhCNReactSvgUrl from "PUBLIC_DIR/images/flags/zh-CN.react.svg?url";

-import AppleidSvgUrl from "../../../public/images/thirdparties/appleid.svg?url";
-import BitlySvgUrl from "../../../public/images/thirdparties/bitly.svg?url";
-import BoxSvgUrl from "../../../public/images/thirdparties/box.svg?url";
-import ClickatellSvgUrl from "../../../public/images/thirdparties/clickatell.svg?url";
-import DocusignSvgUrl from "../../../public/images/thirdparties/docusign.svg?url";
-import DropboxSvgUrl from "../../../public/images/thirdparties/dropbox.svg?url";
-import EasybibSvgUrl from "../../../public/images/thirdparties/easybib.svg?url";
-import FacebookSvgUrl from "../../../public/images/thirdparties/facebook.svg?url";
-import FirebaseSvgUrl from "../../../public/images/thirdparties/firebase.svg?url";
-import GoogleSvgUrl from "../../../public/images/thirdparties/google.svg?url";
-import GooglecloudSvgUrl from "../../../public/images/thirdparties/googlecloud.svg?url";
-import LinkedinSvgUrl from "../../../public/images/thirdparties/linkedin.svg?url";
-import MailruSvgUrl from "../../../public/images/thirdparties/mailru.svg?url";
-import MicrosoftSvgUrl from "../../../public/images/thirdparties/microsoft.svg?url";
-import RackspaceSvgUrl from "../../../public/images/thirdparties/rackspace.svg?url";
-import S3SvgUrl from "../../../public/images/thirdparties/s3.svg?url";
-import SelectelSvgUrl from "../../../public/images/thirdparties/selectel.svg?url";
-import SkydriveSvgUrl from "../../../public/images/thirdparties/skydrive.svg?url";
-import SmscSvgUrl from "../../../public/images/thirdparties/smsc.svg?url";
-import TelegramSvgUrl from "../../../public/images/thirdparties/telegram.svg?url";
-import TwilioSvgUrl from "../../../public/images/thirdparties/twilio.svg?url";
-import TwitterSvgUrl from "../../../public/images/thirdparties/twitter.svg?url";
-import VkSvgUrl from "../../../public/images/thirdparties/vk.svg?url";
-import WordpressSvgUrl from "../../../public/images/thirdparties/wordpress.svg?url";
-import YahooSvgUrl from "../../../public/images/thirdparties/yahoo.svg?url";
-import YandexSvgUrl from "../../../public/images/thirdparties/yandex.svg?url";
+import AppleidSvgUrl from "PUBLIC_DIR/images/thirdparties/appleid.svg?url";
+import BitlySvgUrl from "PUBLIC_DIR/images/thirdparties/bitly.svg?url";
+import BoxSvgUrl from "PUBLIC_DIR/images/thirdparties/box.svg?url";
+import ClickatellSvgUrl from "PUBLIC_DIR/images/thirdparties/clickatell.svg?url";
+import DocusignSvgUrl from "PUBLIC_DIR/images/thirdparties/docusign.svg?url";
+import DropboxSvgUrl from "PUBLIC_DIR/images/thirdparties/dropbox.svg?url";
+import EasybibSvgUrl from "PUBLIC_DIR/images/thirdparties/easybib.svg?url";
+import FacebookSvgUrl from "PUBLIC_DIR/images/thirdparties/facebook.svg?url";
+import FirebaseSvgUrl from "PUBLIC_DIR/images/thirdparties/firebase.svg?url";
+import GoogleSvgUrl from "PUBLIC_DIR/images/thirdparties/google.svg?url";
+import GooglecloudSvgUrl from "PUBLIC_DIR/images/thirdparties/googlecloud.svg?url";
+import LinkedinSvgUrl from "PUBLIC_DIR/images/thirdparties/linkedin.svg?url";
+import MailruSvgUrl from "PUBLIC_DIR/images/thirdparties/mailru.svg?url";
+import MicrosoftSvgUrl from "PUBLIC_DIR/images/thirdparties/microsoft.svg?url";
+import RackspaceSvgUrl from "PUBLIC_DIR/images/thirdparties/rackspace.svg?url";
+import S3SvgUrl from "PUBLIC_DIR/images/thirdparties/s3.svg?url";
+import SelectelSvgUrl from "PUBLIC_DIR/images/thirdparties/selectel.svg?url";
+import SkydriveSvgUrl from "PUBLIC_DIR/images/thirdparties/skydrive.svg?url";
+import SmscSvgUrl from "PUBLIC_DIR/images/thirdparties/smsc.svg?url";
+import TelegramSvgUrl from "PUBLIC_DIR/images/thirdparties/telegram.svg?url";
+import TwilioSvgUrl from "PUBLIC_DIR/images/thirdparties/twilio.svg?url";
+import TwitterSvgUrl from "PUBLIC_DIR/images/thirdparties/twitter.svg?url";
+import VkSvgUrl from "PUBLIC_DIR/images/thirdparties/vk.svg?url";
+import WordpressSvgUrl from "PUBLIC_DIR/images/thirdparties/wordpress.svg?url";
+import YahooSvgUrl from "PUBLIC_DIR/images/thirdparties/yahoo.svg?url";
+import YandexSvgUrl from "PUBLIC_DIR/images/thirdparties/yandex.svg?url";

-import AviSvg24Url from "../../../public/images/icons/24/avi.svg?url";
-import CsvSvg24Url from "../../../public/images/icons/24/csv.svg?url";
-import DjvuSvg24Url from "../../../public/images/icons/24/djvu.svg?url";
-import DocSvg24Url from "../../../public/images/icons/24/doc.svg?url";
-import DocmSvg24Url from "../../../public/images/icons/24/docm.svg?url";
-import DocxSvg24Url from "../../../public/images/icons/24/docx.svg?url";
-import DocxfSvg24Url from "../../../public/images/icons/24/docxf.svg?url";
-import DotxSvg24Url from "../../../public/images/icons/24/dotx.svg?url";
-import DvdSvg24Url from "../../../public/images/icons/24/dvd.svg?url";
-import EpubSvg24Url from "../../../public/images/icons/24/epub.svg?url";
-import Fb2Svg24Url from "../../../public/images/icons/24/fb2.svg?url";
-import FileSvg24Url from "../../../public/images/icons/24/file.svg?url";
-import File_archiveSvg24Url from "../../../public/images/icons/24/file_archive.svg?url";
-import FlvSvg24Url from "../../../public/images/icons/24/flv.svg?url";
-import FodtSvg24Url from "../../../public/images/icons/24/fodt.svg?url";
-import BoxSvg24Url from "../../../public/images/icons/24/folder/box.svg?url";
-import DropboxSvg24Url from "../../../public/images/icons/24/folder/dropbox.svg?url";
-import GoogleSvg24Url from "../../../public/images/icons/24/folder/google.svg?url";
-import KdriveSvg24Url from "../../../public/images/icons/24/folder/kdrive.svg?url";
-import NextcloudSvg24Url from "../../../public/images/icons/24/folder/nextcloud.svg?url";
-import OnedriveSvg24Url from "../../../public/images/icons/24/folder/onedrive.svg?url";
-import OwncloudSvg24Url from "../../../public/images/icons/24/folder/owncloud.svg?url";
-import SharepointSvg24Url from "../../../public/images/icons/24/folder/sharepoint.svg?url";
-import WebdavSvg24Url from "../../../public/images/icons/24/folder/webdav.svg?url";
-import YandexSvg24Url from "../../../public/images/icons/24/folder/yandex.svg?url";
-import FolderSvg24Url from "../../../public/images/icons/24/folder.svg?url";
-import HtmlSvg24Url from "../../../public/images/icons/24/html.svg?url";
-import IafSvg24Url from "../../../public/images/icons/24/iaf.svg?url";
-import IcsSvg24Url from "../../../public/images/icons/24/ics.svg?url";
-import ImageSvg24Url from "../../../public/images/icons/24/image.svg?url";
-import M2tsSvg24Url from "../../../public/images/icons/24/m2ts.svg?url";
-import MhtSvg24Url from "../../../public/images/icons/24/mht.svg?url";
-import MkvSvg24Url from "../../../public/images/icons/24/mkv.svg?url";
-import MovSvg24Url from "../../../public/images/icons/24/mov.svg?url";
-import Mp4Svg24Url from "../../../public/images/icons/24/mp4.svg?url";
-import MpgSvg24Url from "../../../public/images/icons/24/mpg.svg?url";
-import OdpSvg24Url from "../../../public/images/icons/24/odp.svg?url";
-import OdsSvg24Url from "../../../public/images/icons/24/ods.svg?url";
-import OdtSvg24Url from "../../../public/images/icons/24/odt.svg?url";
-import OformSvg24Url from "../../../public/images/icons/24/oform.svg?url";
-import OtpSvg24Url from "../../../public/images/icons/24/otp.svg?url";
-import OtsSvg24Url from "../../../public/images/icons/24/ots.svg?url";
-import OttSvg24Url from "../../../public/images/icons/24/ott.svg?url";
-import PdfSvg24Url from "../../../public/images/icons/24/pdf.svg?url";
-import PotSvg24Url from "../../../public/images/icons/24/pot.svg?url";
-import PpsSvg24Url from "../../../public/images/icons/24/pps.svg?url";
-import PpsxSvg24Url from "../../../public/images/icons/24/ppsx.svg?url";
-import PptSvg24Url from "../../../public/images/icons/24/ppt.svg?url";
-import PptmSvg24Url from "../../../public/images/icons/24/pptm.svg?url";
-import PptxSvg24Url from "../../../public/images/icons/24/pptx.svg?url";
-import RtfSvg24Url from "../../../public/images/icons/24/rtf.svg?url";
-import SoundSvg24Url from "../../../public/images/icons/24/sound.svg?url";
-import SvgSvg24Url from "../../../public/images/icons/24/svg.svg?url";
-import TxtSvg24Url from "../../../public/images/icons/24/txt.svg?url";
-import WebmSvg24Url from "../../../public/images/icons/24/webm.svg?url";
-import XlsSvg24Url from "../../../public/images/icons/24/xls.svg?url";
-import XlsmSvg24Url from "../../../public/images/icons/24/xlsm.svg?url";
-import XlsxSvg24Url from "../../../public/images/icons/24/xlsx.svg?url";
-import XmlSvg24Url from "../../../public/images/icons/24/xml.svg?url";
-import XpsSvg24Url from "../../../public/images/icons/24/xps.svg?url";
-import AviSvg32Url from "../../../public/images/icons/32/avi.svg?url";
-import CsvSvg32Url from "../../../public/images/icons/32/csv.svg?url";
-import DjvuSvg32Url from "../../../public/images/icons/32/djvu.svg?url";
-import DocSvg32Url from "../../../public/images/icons/32/doc.svg?url";
-import DocmSvg32Url from "../../../public/images/icons/32/docm.svg?url";
-import DocxSvg32Url from "../../../public/images/icons/32/docx.svg?url";
-import DocxfSvg32Url from "../../../public/images/icons/32/docxf.svg?url";
-import DotxSvg32Url from "../../../public/images/icons/32/dotx.svg?url";
-import DvdSvg32Url from "../../../public/images/icons/32/dvd.svg?url";
-import EpubSvg32Url from "../../../public/images/icons/32/epub.svg?url";
-import Fb2Svg32Url from "../../../public/images/icons/32/fb2.svg?url";
-import FileSvg32Url from "../../../public/images/icons/32/file.svg?url";
-import File_archiveSvg32Url from "../../../public/images/icons/32/file_archive.svg?url";
-import FlvSvg32Url from "../../../public/images/icons/32/flv.svg?url";
-import FodtSvg32Url from "../../../public/images/icons/32/fodt.svg?url";
-import BoxSvg32Url from "../../../public/images/icons/32/folder/box.svg?url";
-import DropboxSvg32Url from "../../../public/images/icons/32/folder/dropbox.svg?url";
-import GoogleSvg32Url from "../../../public/images/icons/32/folder/google.svg?url";
-import KdriveSvg32Url from "../../../public/images/icons/32/folder/kdrive.svg?url";
-import NextcloudSvg32Url from "../../../public/images/icons/32/folder/nextcloud.svg?url";
-import OnedriveSvg32Url from "../../../public/images/icons/32/folder/onedrive.svg?url";
-import OwncloudSvg32Url from "../../../public/images/icons/32/folder/owncloud.svg?url";
-import SharepointSvg32Url from "../../../public/images/icons/32/folder/sharepoint.svg?url";
-import WebdavSvg32Url from "../../../public/images/icons/32/folder/webdav.svg?url";
-import YandexSvg32Url from "../../../public/images/icons/32/folder/yandex.svg?url";
-import FolderSvg32Url from "../../../public/images/icons/32/folder.svg?url";
-import HtmlSvg32Url from "../../../public/images/icons/32/html.svg?url";
-import IafSvg32Url from "../../../public/images/icons/32/iaf.svg?url";
-import IcsSvg32Url from "../../../public/images/icons/32/ics.svg?url";
-import ImageSvg32Url from "../../../public/images/icons/32/image.svg?url";
-import M2tsSvg32Url from "../../../public/images/icons/32/m2ts.svg?url";
-import MhtSvg32Url from "../../../public/images/icons/32/mht.svg?url";
-import MkvSvg32Url from "../../../public/images/icons/32/mkv.svg?url";
-import MovSvg32Url from "../../../public/images/icons/32/mov.svg?url";
-import Mp4Svg32Url from "../../../public/images/icons/32/mp4.svg?url";
-import MpgSvg32Url from "../../../public/images/icons/32/mpg.svg?url";
-import OdpSvg32Url from "../../../public/images/icons/32/odp.svg?url";
-import OdsSvg32Url from "../../../public/images/icons/32/ods.svg?url";
-import OdtSvg32Url from "../../../public/images/icons/32/odt.svg?url";
-import OformSvg32Url from "../../../public/images/icons/32/oform.svg?url";
-import OtpSvg32Url from "../../../public/images/icons/32/otp.svg?url";
-import OtsSvg32Url from "../../../public/images/icons/32/ots.svg?url";
-import OttSvg32Url from "../../../public/images/icons/32/ott.svg?url";
-import PdfSvg32Url from "../../../public/images/icons/32/pdf.svg?url";
-import PotSvg32Url from "../../../public/images/icons/32/pot.svg?url";
-import PpsSvg32Url from "../../../public/images/icons/32/pps.svg?url";
-import PpsxSvg32Url from "../../../public/images/icons/32/ppsx.svg?url";
-import PptSvg32Url from "../../../public/images/icons/32/ppt.svg?url";
-import PptmSvg32Url from "../../../public/images/icons/32/pptm.svg?url";
-import PptxSvg32Url from "../../../public/images/icons/32/pptx.svg?url";
-import ArchiveSvg32Url from "../../../public/images/icons/32/room/archive.svg?url";
-import CustomSvg32Url from "../../../public/images/icons/32/room/custom.svg?url";
-import EditingSvg32Url from "../../../public/images/icons/32/room/editing.svg?url";
-import FillingFormSvg32Url from "../../../public/images/icons/32/room/filling.form.svg?url";
-import ReviewSvg32Url from "../../../public/images/icons/32/room/review.svg?url";
-import ViewOnlySvg32Url from "../../../public/images/icons/32/room/view.only.svg?url";
-import RtfSvg32Url from "../../../public/images/icons/32/rtf.svg?url";
-import SoundSvg32Url from "../../../public/images/icons/32/sound.svg?url";
-import SvgSvg32Url from "../../../public/images/icons/32/svg.svg?url";
-import TxtSvg32Url from "../../../public/images/icons/32/txt.svg?url";
-import WebmSvg32Url from "../../../public/images/icons/32/webm.svg?url";
-import XlsSvg32Url from "../../../public/images/icons/32/xls.svg?url";
-import XlsmSvg32Url from "../../../public/images/icons/32/xlsm.svg?url";
-import XlsxSvg32Url from "../../../public/images/icons/32/xlsx.svg?url";
-import XmlSvg32Url from "../../../public/images/icons/32/xml.svg?url";
-import XpsSvg32Url from "../../../public/images/icons/32/xps.svg?url";
-import AviSvg64Url from "../../../public/images/icons/64/avi.svg?url";
-import CsvSvg64Url from "../../../public/images/icons/64/csv.svg?url";
-import DjvuSvg64Url from "../../../public/images/icons/64/djvu.svg?url";
-import DocSvg64Url from "../../../public/images/icons/64/doc.svg?url";
-import DocmSvg64Url from "../../../public/images/icons/64/docm.svg?url";
-import DocxSvg64Url from "../../../public/images/icons/64/docx.svg?url";
-import DocxfSvg64Url from "../../../public/images/icons/64/docxf.svg?url";
-import DotxSvg64Url from "../../../public/images/icons/64/dotx.svg?url";
-import DvdSvg64Url from "../../../public/images/icons/64/dvd.svg?url";
-import EpubSvg64Url from "../../../public/images/icons/64/epub.svg?url";
-import Fb2Svg64Url from "../../../public/images/icons/64/fb2.svg?url";
-import FileSvg64Url from "../../../public/images/icons/64/file.svg?url";
-import File_archiveSvg64Url from "../../../public/images/icons/64/file_archive.svg?url";
-import FlvSvg64Url from "../../../public/images/icons/64/flv.svg?url";
-import FodtSvg64Url from "../../../public/images/icons/64/fodt.svg?url";
-import BoxSvg64Url from "../../../public/images/icons/64/folder/box.svg?url";
-import DropboxSvg64Url from "../../../public/images/icons/64/folder/dropbox.svg?url";
-import GoogleSvg64Url from "../../../public/images/icons/64/folder/google.svg?url";
-import KdriveSvg64Url from "../../../public/images/icons/64/folder/kdrive.svg?url";
-import NextcloudSvg64Url from "../../../public/images/icons/64/folder/nextcloud.svg?url";
-import OnedriveSvg64Url from "../../../public/images/icons/64/folder/onedrive.svg?url";
-import OwncloudSvg64Url from "../../../public/images/icons/64/folder/owncloud.svg?url";
-import SharepointSvg64Url from "../../../public/images/icons/64/folder/sharepoint.svg?url";
-import WebdavSvg64Url from "../../../public/images/icons/64/folder/webdav.svg?url";
-import YandexSvg64Url from "../../../public/images/icons/64/folder/yandex.svg?url";
-import FolderSvg64Url from "../../../public/images/icons/64/folder.svg?url";
-import HtmlSvg64Url from "../../../public/images/icons/64/html.svg?url";
-import IafSvg64Url from "../../../public/images/icons/64/iaf.svg?url";
-import IcsSvg64Url from "../../../public/images/icons/64/ics.svg?url";
-import ImageSvg64Url from "../../../public/images/icons/64/image.svg?url";
-import M2tsSvg64Url from "../../../public/images/icons/64/m2ts.svg?url";
-import MhtSvg64Url from "../../../public/images/icons/64/mht.svg?url";
-import MkvSvg64Url from "../../../public/images/icons/64/mkv.svg?url";
-import MovSvg64Url from "../../../public/images/icons/64/mov.svg?url";
-import Mp4Svg64Url from "../../../public/images/icons/64/mp4.svg?url";
-import MpgSvg64Url from "../../../public/images/icons/64/mpg.svg?url";
-import OdpSvg64Url from "../../../public/images/icons/64/odp.svg?url";
-import OdsSvg64Url from "../../../public/images/icons/64/ods.svg?url";
-import OdtSvg64Url from "../../../public/images/icons/64/odt.svg?url";
-import OformSvg64Url from "../../../public/images/icons/64/oform.svg?url";
-import OtpSvg64Url from "../../../public/images/icons/64/otp.svg?url";
-import OtsSvg64Url from "../../../public/images/icons/64/ots.svg?url";
-import OttSvg64Url from "../../../public/images/icons/64/ott.svg?url";
-import PdfSvg64Url from "../../../public/images/icons/64/pdf.svg?url";
-import PotSvg64Url from "../../../public/images/icons/64/pot.svg?url";
-import PpsSvg64Url from "../../../public/images/icons/64/pps.svg?url";
-import PpsxSvg64Url from "../../../public/images/icons/64/ppsx.svg?url";
-import PptSvg64Url from "../../../public/images/icons/64/ppt.svg?url";
-import PptmSvg64Url from "../../../public/images/icons/64/pptm.svg?url";
-import PptxSvg64Url from "../../../public/images/icons/64/pptx.svg?url";
-import RtfSvg64Url from "../../../public/images/icons/64/rtf.svg?url";
-import SoundSvg64Url from "../../../public/images/icons/64/sound.svg?url";
-import SvgSvg64Url from "../../../public/images/icons/64/svg.svg?url";
-import TxtSvg64Url from "../../../public/images/icons/64/txt.svg?url";
-import WebmSvg64Url from "../../../public/images/icons/64/webm.svg?url";
-import XlsSvg64Url from "../../../public/images/icons/64/xls.svg?url";
-import XlsmSvg64Url from "../../../public/images/icons/64/xlsm.svg?url";
-import XlsxSvg64Url from "../../../public/images/icons/64/xlsx.svg?url";
-import XmlSvg64Url from "../../../public/images/icons/64/xml.svg?url";
-import XpsSvg64Url from "../../../public/images/icons/64/xps.svg?url";
-import AviSvg96Url from "../../../public/images/icons/96/avi.svg?url";
-import CsvSvg96Url from "../../../public/images/icons/96/csv.svg?url";
-import DjvuSvg96Url from "../../../public/images/icons/96/djvu.svg?url";
-import DocSvg96Url from "../../../public/images/icons/96/doc.svg?url";
-import DocmSvg96Url from "../../../public/images/icons/96/docm.svg?url";
-import DocxSvg96Url from "../../../public/images/icons/96/docx.svg?url";
-import DocxfSvg96Url from "../../../public/images/icons/96/docxf.svg?url";
-import DotxSvg96Url from "../../../public/images/icons/96/dotx.svg?url";
-import DvdSvg96Url from "../../../public/images/icons/96/dvd.svg?url";
-import EpubSvg96Url from "../../../public/images/icons/96/epub.svg?url";
-import Fb2Svg96Url from "../../../public/images/icons/96/fb2.svg?url";
-import FileSvg96Url from "../../../public/images/icons/96/file.svg?url";
-import File_archiveSvg96Url from "../../../public/images/icons/96/file_archive.svg?url";
-import FlvSvg96Url from "../../../public/images/icons/96/flv.svg?url";
-import FodtSvg96Url from "../../../public/images/icons/96/fodt.svg?url";
-import BoxSvg96Url from "../../../public/images/icons/96/folder/box.svg?url";
-import DropboxSvg96Url from "../../../public/images/icons/96/folder/dropbox.svg?url";
-import GoogleSvg96Url from "../../../public/images/icons/96/folder/google.svg?url";
-import KdriveSvg96Url from "../../../public/images/icons/96/folder/kdrive.svg?url";
-import NextcloudSvg96Url from "../../../public/images/icons/96/folder/nextcloud.svg?url";
-import OnedriveSvg96Url from "../../../public/images/icons/96/folder/onedrive.svg?url";
-import OwncloudSvg96Url from "../../../public/images/icons/96/folder/owncloud.svg?url";
-import SharepointSvg96Url from "../../../public/images/icons/96/folder/sharepoint.svg?url";
-import WebdavSvg96Url from "../../../public/images/icons/96/folder/webdav.svg?url";
-import YandexSvg96Url from "../../../public/images/icons/96/folder/yandex.svg?url";
-import FolderSvg96Url from "../../../public/images/icons/96/folder.svg?url";
-import HtmlSvg96Url from "../../../public/images/icons/96/html.svg?url";
-import IafSvg96Url from "../../../public/images/icons/96/iaf.svg?url";
-import IcsSvg96Url from "../../../public/images/icons/96/ics.svg?url";
-import ImageSvg96Url from "../../../public/images/icons/96/image.svg?url";
-import M2tsSvg96Url from "../../../public/images/icons/96/m2ts.svg?url";
-import MhtSvg96Url from "../../../public/images/icons/96/mht.svg?url";
-import MkvSvg96Url from "../../../public/images/icons/96/mkv.svg?url";
-import MovSvg96Url from "../../../public/images/icons/96/mov.svg?url";
-import Mp4Svg96Url from "../../../public/images/icons/96/mp4.svg?url";
-import MpgSvg96Url from "../../../public/images/icons/96/mpg.svg?url";
-import OdpSvg96Url from "../../../public/images/icons/96/odp.svg?url";
-import OdsSvg96Url from "../../../public/images/icons/96/ods.svg?url";
-import OdtSvg96Url from "../../../public/images/icons/96/odt.svg?url";
-import OformSvg96Url from "../../../public/images/icons/96/oform.svg?url";
-import OtpSvg96Url from "../../../public/images/icons/96/otp.svg?url";
-import OtsSvg96Url from "../../../public/images/icons/96/ots.svg?url";
-import OttSvg96Url from "../../../public/images/icons/96/ott.svg?url";
-import PdfSvg96Url from "../../../public/images/icons/96/pdf.svg?url";
-import PotSvg96Url from "../../../public/images/icons/96/pot.svg?url";
-import PpsSvg96Url from "../../../public/images/icons/96/pps.svg?url";
-import PpsxSvg96Url from "../../../public/images/icons/96/ppsx.svg?url";
-import PptSvg96Url from "../../../public/images/icons/96/ppt.svg?url";
-import PptmSvg96Url from "../../../public/images/icons/96/pptm.svg?url";
-import PptxSvg96Url from "../../../public/images/icons/96/pptx.svg?url";
-import RtfSvg96Url from "../../../public/images/icons/96/rtf.svg?url";
-import SoundSvg96Url from "../../../public/images/icons/96/sound.svg?url";
-import SvgSvg96Url from "../../../public/images/icons/96/svg.svg?url";
-import TxtSvg96Url from "../../../public/images/icons/96/txt.svg?url";
-import WebmSvg96Url from "../../../public/images/icons/96/webm.svg?url";
-import XlsSvg96Url from "../../../public/images/icons/96/xls.svg?url";
-import XlsmSvg96Url from "../../../public/images/icons/96/xlsm.svg?url";
-import XlsxSvg96Url from "../../../public/images/icons/96/xlsx.svg?url";
-import XmlSvg96Url from "../../../public/images/icons/96/xml.svg?url";
-import XpsSvg96Url from "../../../public/images/icons/96/xps.svg?url";
+import AviSvg24Url from "PUBLIC_DIR/images/icons/24/avi.svg?url";
+import CsvSvg24Url from "PUBLIC_DIR/images/icons/24/csv.svg?url";
+import DjvuSvg24Url from "PUBLIC_DIR/images/icons/24/djvu.svg?url";
+import DocSvg24Url from "PUBLIC_DIR/images/icons/24/doc.svg?url";
+import DocmSvg24Url from "PUBLIC_DIR/images/icons/24/docm.svg?url";
+import DocxSvg24Url from "PUBLIC_DIR/images/icons/24/docx.svg?url";
+import DocxfSvg24Url from "PUBLIC_DIR/images/icons/24/docxf.svg?url";
+import DotxSvg24Url from "PUBLIC_DIR/images/icons/24/dotx.svg?url";
+import DvdSvg24Url from "PUBLIC_DIR/images/icons/24/dvd.svg?url";
+import EpubSvg24Url from "PUBLIC_DIR/images/icons/24/epub.svg?url";
+import Fb2Svg24Url from "PUBLIC_DIR/images/icons/24/fb2.svg?url";
+import FileSvg24Url from "PUBLIC_DIR/images/icons/24/file.svg?url";
+import File_archiveSvg24Url from "PUBLIC_DIR/images/icons/24/file_archive.svg?url";
+import FlvSvg24Url from "PUBLIC_DIR/images/icons/24/flv.svg?url";
+import FodtSvg24Url from "PUBLIC_DIR/images/icons/24/fodt.svg?url";
+import BoxSvg24Url from "PUBLIC_DIR/images/icons/24/folder/box.svg?url";
+import DropboxSvg24Url from "PUBLIC_DIR/images/icons/24/folder/dropbox.svg?url";
+import GoogleSvg24Url from "PUBLIC_DIR/images/icons/24/folder/google.svg?url";
+import KdriveSvg24Url from "PUBLIC_DIR/images/icons/24/folder/kdrive.svg?url";
+import NextcloudSvg24Url from "PUBLIC_DIR/images/icons/24/folder/nextcloud.svg?url";
+import OnedriveSvg24Url from "PUBLIC_DIR/images/icons/24/folder/onedrive.svg?url";
+import OwncloudSvg24Url from "PUBLIC_DIR/images/icons/24/folder/owncloud.svg?url";
+import SharepointSvg24Url from "PUBLIC_DIR/images/icons/24/folder/sharepoint.svg?url";
+import WebdavSvg24Url from "PUBLIC_DIR/images/icons/24/folder/webdav.svg?url";
+import YandexSvg24Url from "PUBLIC_DIR/images/icons/24/folder/yandex.svg?url";
+import FolderSvg24Url from "PUBLIC_DIR/images/icons/24/folder.svg?url";
+import HtmlSvg24Url from "PUBLIC_DIR/images/icons/24/html.svg?url";
+import IafSvg24Url from "PUBLIC_DIR/images/icons/24/iaf.svg?url";
+import IcsSvg24Url from "PUBLIC_DIR/images/icons/24/ics.svg?url";
+import ImageSvg24Url from "PUBLIC_DIR/images/icons/24/image.svg?url";
+import M2tsSvg24Url from "PUBLIC_DIR/images/icons/24/m2ts.svg?url";
+import MhtSvg24Url from "PUBLIC_DIR/images/icons/24/mht.svg?url";
+import MkvSvg24Url from "PUBLIC_DIR/images/icons/24/mkv.svg?url";
+import MovSvg24Url from "PUBLIC_DIR/images/icons/24/mov.svg?url";
+import Mp4Svg24Url from "PUBLIC_DIR/images/icons/24/mp4.svg?url";
+import MpgSvg24Url from "PUBLIC_DIR/images/icons/24/mpg.svg?url";
+import OdpSvg24Url from "PUBLIC_DIR/images/icons/24/odp.svg?url";
+import OdsSvg24Url from "PUBLIC_DIR/images/icons/24/ods.svg?url";
+import OdtSvg24Url from "PUBLIC_DIR/images/icons/24/odt.svg?url";
+import OformSvg24Url from "PUBLIC_DIR/images/icons/24/oform.svg?url";
+import OtpSvg24Url from "PUBLIC_DIR/images/icons/24/otp.svg?url";
+import OtsSvg24Url from "PUBLIC_DIR/images/icons/24/ots.svg?url";
+import OttSvg24Url from "PUBLIC_DIR/images/icons/24/ott.svg?url";
+import PdfSvg24Url from "PUBLIC_DIR/images/icons/24/pdf.svg?url";
+import PotSvg24Url from "PUBLIC_DIR/images/icons/24/pot.svg?url";
+import PpsSvg24Url from "PUBLIC_DIR/images/icons/24/pps.svg?url";
+import PpsxSvg24Url from "PUBLIC_DIR/images/icons/24/ppsx.svg?url";
+import PptSvg24Url from "PUBLIC_DIR/images/icons/24/ppt.svg?url";
+import PptmSvg24Url from "PUBLIC_DIR/images/icons/24/pptm.svg?url";
+import PptxSvg24Url from "PUBLIC_DIR/images/icons/24/pptx.svg?url";
+import RtfSvg24Url from "PUBLIC_DIR/images/icons/24/rtf.svg?url";
+import SoundSvg24Url from "PUBLIC_DIR/images/icons/24/sound.svg?url";
+import SvgSvg24Url from "PUBLIC_DIR/images/icons/24/svg.svg?url";
+import TxtSvg24Url from "PUBLIC_DIR/images/icons/24/txt.svg?url";
+import WebmSvg24Url from "PUBLIC_DIR/images/icons/24/webm.svg?url";
+import XlsSvg24Url from "PUBLIC_DIR/images/icons/24/xls.svg?url";
+import XlsmSvg24Url from "PUBLIC_DIR/images/icons/24/xlsm.svg?url";
+import XlsxSvg24Url from "PUBLIC_DIR/images/icons/24/xlsx.svg?url";
+import XmlSvg24Url from "PUBLIC_DIR/images/icons/24/xml.svg?url";
+import XpsSvg24Url from "PUBLIC_DIR/images/icons/24/xps.svg?url";
+import AviSvg32Url from "PUBLIC_DIR/images/icons/32/avi.svg?url";
+import CsvSvg32Url from "PUBLIC_DIR/images/icons/32/csv.svg?url";
+import DjvuSvg32Url from "PUBLIC_DIR/images/icons/32/djvu.svg?url";
+import DocSvg32Url from "PUBLIC_DIR/images/icons/32/doc.svg?url";
+import DocmSvg32Url from "PUBLIC_DIR/images/icons/32/docm.svg?url";
+import DocxSvg32Url from "PUBLIC_DIR/images/icons/32/docx.svg?url";
+import DocxfSvg32Url from "PUBLIC_DIR/images/icons/32/docxf.svg?url";
+import DotxSvg32Url from "PUBLIC_DIR/images/icons/32/dotx.svg?url";
+import DvdSvg32Url from "PUBLIC_DIR/images/icons/32/dvd.svg?url";
+import EpubSvg32Url from "PUBLIC_DIR/images/icons/32/epub.svg?url";
+import Fb2Svg32Url from "PUBLIC_DIR/images/icons/32/fb2.svg?url";
+import FileSvg32Url from "PUBLIC_DIR/images/icons/32/file.svg?url";
+import File_archiveSvg32Url from "PUBLIC_DIR/images/icons/32/file_archive.svg?url";
+import FlvSvg32Url from "PUBLIC_DIR/images/icons/32/flv.svg?url";
+import FodtSvg32Url from "PUBLIC_DIR/images/icons/32/fodt.svg?url";
+import BoxSvg32Url from "PUBLIC_DIR/images/icons/32/folder/box.svg?url";
+import DropboxSvg32Url from "PUBLIC_DIR/images/icons/32/folder/dropbox.svg?url";
+import GoogleSvg32Url from "PUBLIC_DIR/images/icons/32/folder/google.svg?url";
+import KdriveSvg32Url from "PUBLIC_DIR/images/icons/32/folder/kdrive.svg?url";
+import NextcloudSvg32Url from "PUBLIC_DIR/images/icons/32/folder/nextcloud.svg?url";
+import OnedriveSvg32Url from "PUBLIC_DIR/images/icons/32/folder/onedrive.svg?url";
+import OwncloudSvg32Url from "PUBLIC_DIR/images/icons/32/folder/owncloud.svg?url";
+import SharepointSvg32Url from "PUBLIC_DIR/images/icons/32/folder/sharepoint.svg?url";
+import WebdavSvg32Url from "PUBLIC_DIR/images/icons/32/folder/webdav.svg?url";
+import YandexSvg32Url from "PUBLIC_DIR/images/icons/32/folder/yandex.svg?url";
+import FolderSvg32Url from "PUBLIC_DIR/images/icons/32/folder.svg?url";
+import HtmlSvg32Url from "PUBLIC_DIR/images/icons/32/html.svg?url";
+import IafSvg32Url from "PUBLIC_DIR/images/icons/32/iaf.svg?url";
+import IcsSvg32Url from "PUBLIC_DIR/images/icons/32/ics.svg?url";
+import ImageSvg32Url from "PUBLIC_DIR/images/icons/32/image.svg?url";
+import M2tsSvg32Url from "PUBLIC_DIR/images/icons/32/m2ts.svg?url";
+import MhtSvg32Url from "PUBLIC_DIR/images/icons/32/mht.svg?url";
+import MkvSvg32Url from "PUBLIC_DIR/images/icons/32/mkv.svg?url";
+import MovSvg32Url from "PUBLIC_DIR/images/icons/32/mov.svg?url";
+import Mp4Svg32Url from "PUBLIC_DIR/images/icons/32/mp4.svg?url";
+import MpgSvg32Url from "PUBLIC_DIR/images/icons/32/mpg.svg?url";
+import OdpSvg32Url from "PUBLIC_DIR/images/icons/32/odp.svg?url";
+import OdsSvg32Url from "PUBLIC_DIR/images/icons/32/ods.svg?url";
+import OdtSvg32Url from "PUBLIC_DIR/images/icons/32/odt.svg?url";
+import OformSvg32Url from "PUBLIC_DIR/images/icons/32/oform.svg?url";
+import OtpSvg32Url from "PUBLIC_DIR/images/icons/32/otp.svg?url";
+import OtsSvg32Url from "PUBLIC_DIR/images/icons/32/ots.svg?url";
+import OttSvg32Url from "PUBLIC_DIR/images/icons/32/ott.svg?url";
+import PdfSvg32Url from "PUBLIC_DIR/images/icons/32/pdf.svg?url";
+import PotSvg32Url from "PUBLIC_DIR/images/icons/32/pot.svg?url";
+import PpsSvg32Url from "PUBLIC_DIR/images/icons/32/pps.svg?url";
+import PpsxSvg32Url from "PUBLIC_DIR/images/icons/32/ppsx.svg?url";
+import PptSvg32Url from "PUBLIC_DIR/images/icons/32/ppt.svg?url";
+import PptmSvg32Url from "PUBLIC_DIR/images/icons/32/pptm.svg?url";
+import PptxSvg32Url from "PUBLIC_DIR/images/icons/32/pptx.svg?url";
+import ArchiveSvg32Url from "PUBLIC_DIR/images/icons/32/room/archive.svg?url";
+import CustomSvg32Url from "PUBLIC_DIR/images/icons/32/room/custom.svg?url";
+import EditingSvg32Url from "PUBLIC_DIR/images/icons/32/room/editing.svg?url";
+import FillingFormSvg32Url from "PUBLIC_DIR/images/icons/32/room/filling.form.svg?url";
+import ReviewSvg32Url from "PUBLIC_DIR/images/icons/32/room/review.svg?url";
+import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url";
+import RtfSvg32Url from "PUBLIC_DIR/images/icons/32/rtf.svg?url";
+import SoundSvg32Url from "PUBLIC_DIR/images/icons/32/sound.svg?url";
+import SvgSvg32Url from "PUBLIC_DIR/images/icons/32/svg.svg?url";
+import TxtSvg32Url from "PUBLIC_DIR/images/icons/32/txt.svg?url";
+import WebmSvg32Url from "PUBLIC_DIR/images/icons/32/webm.svg?url";
+import XlsSvg32Url from "PUBLIC_DIR/images/icons/32/xls.svg?url";
+import XlsmSvg32Url from "PUBLIC_DIR/images/icons/32/xlsm.svg?url";
+import XlsxSvg32Url from "PUBLIC_DIR/images/icons/32/xlsx.svg?url";
+import XmlSvg32Url from "PUBLIC_DIR/images/icons/32/xml.svg?url";
+import XpsSvg32Url from "PUBLIC_DIR/images/icons/32/xps.svg?url";
+import AviSvg64Url from "PUBLIC_DIR/images/icons/64/avi.svg?url";
+import CsvSvg64Url from "PUBLIC_DIR/images/icons/64/csv.svg?url";
+import DjvuSvg64Url from "PUBLIC_DIR/images/icons/64/djvu.svg?url";
+import DocSvg64Url from "PUBLIC_DIR/images/icons/64/doc.svg?url";
+import DocmSvg64Url from "PUBLIC_DIR/images/icons/64/docm.svg?url";
+import DocxSvg64Url from "PUBLIC_DIR/images/icons/64/docx.svg?url";
+import DocxfSvg64Url from "PUBLIC_DIR/images/icons/64/docxf.svg?url";
+import DotxSvg64Url from "PUBLIC_DIR/images/icons/64/dotx.svg?url";
+import DvdSvg64Url from "PUBLIC_DIR/images/icons/64/dvd.svg?url";
+import EpubSvg64Url from "PUBLIC_DIR/images/icons/64/epub.svg?url";
+import Fb2Svg64Url from "PUBLIC_DIR/images/icons/64/fb2.svg?url";
+import FileSvg64Url from "PUBLIC_DIR/images/icons/64/file.svg?url";
+import File_archiveSvg64Url from "PUBLIC_DIR/images/icons/64/file_archive.svg?url";
+import FlvSvg64Url from "PUBLIC_DIR/images/icons/64/flv.svg?url";
+import FodtSvg64Url from "PUBLIC_DIR/images/icons/64/fodt.svg?url";
+import BoxSvg64Url from "PUBLIC_DIR/images/icons/64/folder/box.svg?url";
+import DropboxSvg64Url from "PUBLIC_DIR/images/icons/64/folder/dropbox.svg?url";
+import GoogleSvg64Url from "PUBLIC_DIR/images/icons/64/folder/google.svg?url";
+import KdriveSvg64Url from "PUBLIC_DIR/images/icons/64/folder/kdrive.svg?url";
+import NextcloudSvg64Url from "PUBLIC_DIR/images/icons/64/folder/nextcloud.svg?url";
+import OnedriveSvg64Url from "PUBLIC_DIR/images/icons/64/folder/onedrive.svg?url";
+import OwncloudSvg64Url from "PUBLIC_DIR/images/icons/64/folder/owncloud.svg?url";
+import SharepointSvg64Url from "PUBLIC_DIR/images/icons/64/folder/sharepoint.svg?url";
+import WebdavSvg64Url from "PUBLIC_DIR/images/icons/64/folder/webdav.svg?url";
+import YandexSvg64Url from "PUBLIC_DIR/images/icons/64/folder/yandex.svg?url";
+import FolderSvg64Url from "PUBLIC_DIR/images/icons/64/folder.svg?url";
+import HtmlSvg64Url from "PUBLIC_DIR/images/icons/64/html.svg?url";
+import IafSvg64Url from "PUBLIC_DIR/images/icons/64/iaf.svg?url";
+import IcsSvg64Url from "PUBLIC_DIR/images/icons/64/ics.svg?url";
+import ImageSvg64Url from "PUBLIC_DIR/images/icons/64/image.svg?url";
+import M2tsSvg64Url from "PUBLIC_DIR/images/icons/64/m2ts.svg?url";
+import MhtSvg64Url from "PUBLIC_DIR/images/icons/64/mht.svg?url";
+import MkvSvg64Url from "PUBLIC_DIR/images/icons/64/mkv.svg?url";
+import MovSvg64Url from "PUBLIC_DIR/images/icons/64/mov.svg?url";
+import Mp4Svg64Url from "PUBLIC_DIR/images/icons/64/mp4.svg?url";
+import MpgSvg64Url from "PUBLIC_DIR/images/icons/64/mpg.svg?url";
+import OdpSvg64Url from "PUBLIC_DIR/images/icons/64/odp.svg?url";
+import OdsSvg64Url from "PUBLIC_DIR/images/icons/64/ods.svg?url";
+import OdtSvg64Url from "PUBLIC_DIR/images/icons/64/odt.svg?url";
+import OformSvg64Url from "PUBLIC_DIR/images/icons/64/oform.svg?url";
+import OtpSvg64Url from "PUBLIC_DIR/images/icons/64/otp.svg?url";
+import OtsSvg64Url from "PUBLIC_DIR/images/icons/64/ots.svg?url";
+import OttSvg64Url from "PUBLIC_DIR/images/icons/64/ott.svg?url";
+import PdfSvg64Url from "PUBLIC_DIR/images/icons/64/pdf.svg?url";
+import PotSvg64Url from "PUBLIC_DIR/images/icons/64/pot.svg?url";
+import PpsSvg64Url from "PUBLIC_DIR/images/icons/64/pps.svg?url";
+import PpsxSvg64Url from "PUBLIC_DIR/images/icons/64/ppsx.svg?url";
+import PptSvg64Url from "PUBLIC_DIR/images/icons/64/ppt.svg?url";
+import PptmSvg64Url from "PUBLIC_DIR/images/icons/64/pptm.svg?url";
+import PptxSvg64Url from "PUBLIC_DIR/images/icons/64/pptx.svg?url";
+import RtfSvg64Url from "PUBLIC_DIR/images/icons/64/rtf.svg?url";
+import SoundSvg64Url from "PUBLIC_DIR/images/icons/64/sound.svg?url";
+import SvgSvg64Url from "PUBLIC_DIR/images/icons/64/svg.svg?url";
+import TxtSvg64Url from "PUBLIC_DIR/images/icons/64/txt.svg?url";
+import WebmSvg64Url from "PUBLIC_DIR/images/icons/64/webm.svg?url";
+import XlsSvg64Url from "PUBLIC_DIR/images/icons/64/xls.svg?url";
+import XlsmSvg64Url from "PUBLIC_DIR/images/icons/64/xlsm.svg?url";
+import XlsxSvg64Url from "PUBLIC_DIR/images/icons/64/xlsx.svg?url";
+import XmlSvg64Url from "PUBLIC_DIR/images/icons/64/xml.svg?url";
+import XpsSvg64Url from "PUBLIC_DIR/images/icons/64/xps.svg?url";
+import AviSvg96Url from "PUBLIC_DIR/images/icons/96/avi.svg?url";
+import CsvSvg96Url from "PUBLIC_DIR/images/icons/96/csv.svg?url";
+import DjvuSvg96Url from "PUBLIC_DIR/images/icons/96/djvu.svg?url";
+import DocSvg96Url from "PUBLIC_DIR/images/icons/96/doc.svg?url";
+import DocmSvg96Url from "PUBLIC_DIR/images/icons/96/docm.svg?url";
+import DocxSvg96Url from "PUBLIC_DIR/images/icons/96/docx.svg?url";
+import DocxfSvg96Url from "PUBLIC_DIR/images/icons/96/docxf.svg?url";
+import DotxSvg96Url from "PUBLIC_DIR/images/icons/96/dotx.svg?url";
+import DvdSvg96Url from "PUBLIC_DIR/images/icons/96/dvd.svg?url";
+import EpubSvg96Url from "PUBLIC_DIR/images/icons/96/epub.svg?url";
+import Fb2Svg96Url from "PUBLIC_DIR/images/icons/96/fb2.svg?url";
+import FileSvg96Url from "PUBLIC_DIR/images/icons/96/file.svg?url";
+import File_archiveSvg96Url from "PUBLIC_DIR/images/icons/96/file_archive.svg?url";
+import FlvSvg96Url from "PUBLIC_DIR/images/icons/96/flv.svg?url";
+import FodtSvg96Url from "PUBLIC_DIR/images/icons/96/fodt.svg?url";
+import BoxSvg96Url from "PUBLIC_DIR/images/icons/96/folder/box.svg?url";
+import DropboxSvg96Url from "PUBLIC_DIR/images/icons/96/folder/dropbox.svg?url";
+import GoogleSvg96Url from "PUBLIC_DIR/images/icons/96/folder/google.svg?url";
+import KdriveSvg96Url from "PUBLIC_DIR/images/icons/96/folder/kdrive.svg?url";
+import NextcloudSvg96Url from "PUBLIC_DIR/images/icons/96/folder/nextcloud.svg?url";
+import OnedriveSvg96Url from "PUBLIC_DIR/images/icons/96/folder/onedrive.svg?url";
+import OwncloudSvg96Url from "PUBLIC_DIR/images/icons/96/folder/owncloud.svg?url";
+import SharepointSvg96Url from "PUBLIC_DIR/images/icons/96/folder/sharepoint.svg?url";
+import WebdavSvg96Url from "PUBLIC_DIR/images/icons/96/folder/webdav.svg?url";
+import YandexSvg96Url from "PUBLIC_DIR/images/icons/96/folder/yandex.svg?url";
+import FolderSvg96Url from "PUBLIC_DIR/images/icons/96/folder.svg?url";
+import HtmlSvg96Url from "PUBLIC_DIR/images/icons/96/html.svg?url";
+import IafSvg96Url from "PUBLIC_DIR/images/icons/96/iaf.svg?url";
+import IcsSvg96Url from "PUBLIC_DIR/images/icons/96/ics.svg?url";
+import ImageSvg96Url from "PUBLIC_DIR/images/icons/96/image.svg?url";
+import M2tsSvg96Url from "PUBLIC_DIR/images/icons/96/m2ts.svg?url";
+import MhtSvg96Url from "PUBLIC_DIR/images/icons/96/mht.svg?url";
+import MkvSvg96Url from "PUBLIC_DIR/images/icons/96/mkv.svg?url";
+import MovSvg96Url from "PUBLIC_DIR/images/icons/96/mov.svg?url";
+import Mp4Svg96Url from "PUBLIC_DIR/images/icons/96/mp4.svg?url";
+import MpgSvg96Url from "PUBLIC_DIR/images/icons/96/mpg.svg?url";
+import OdpSvg96Url from "PUBLIC_DIR/images/icons/96/odp.svg?url";
+import OdsSvg96Url from "PUBLIC_DIR/images/icons/96/ods.svg?url";
+import OdtSvg96Url from "PUBLIC_DIR/images/icons/96/odt.svg?url";
+import OformSvg96Url from "PUBLIC_DIR/images/icons/96/oform.svg?url";
+import OtpSvg96Url from "PUBLIC_DIR/images/icons/96/otp.svg?url";
+import OtsSvg96Url from "PUBLIC_DIR/images/icons/96/ots.svg?url";
+import OttSvg96Url from "PUBLIC_DIR/images/icons/96/ott.svg?url";
+import PdfSvg96Url from "PUBLIC_DIR/images/icons/96/pdf.svg?url";
+import PotSvg96Url from "PUBLIC_DIR/images/icons/96/pot.svg?url";
+import PpsSvg96Url from "PUBLIC_DIR/images/icons/96/pps.svg?url";
+import PpsxSvg96Url from "PUBLIC_DIR/images/icons/96/ppsx.svg?url";
+import PptSvg96Url from "PUBLIC_DIR/images/icons/96/ppt.svg?url";
+import PptmSvg96Url from "PUBLIC_DIR/images/icons/96/pptm.svg?url";
+import PptxSvg96Url from "PUBLIC_DIR/images/icons/96/pptx.svg?url";
+import RtfSvg96Url from "PUBLIC_DIR/images/icons/96/rtf.svg?url";
+import SoundSvg96Url from "PUBLIC_DIR/images/icons/96/sound.svg?url";
+import SvgSvg96Url from "PUBLIC_DIR/images/icons/96/svg.svg?url";
+import TxtSvg96Url from "PUBLIC_DIR/images/icons/96/txt.svg?url";
+import WebmSvg96Url from "PUBLIC_DIR/images/icons/96/webm.svg?url";
+import XlsSvg96Url from "PUBLIC_DIR/images/icons/96/xls.svg?url";
+import XlsmSvg96Url from "PUBLIC_DIR/images/icons/96/xlsm.svg?url";
+import XlsxSvg96Url from "PUBLIC_DIR/images/icons/96/xlsx.svg?url";
+import XmlSvg96Url from "PUBLIC_DIR/images/icons/96/xml.svg?url";
+import XpsSvg96Url from "PUBLIC_DIR/images/icons/96/xps.svg?url";

 export const iconSize24 = new Map([
  ["avi.svg", AviSvg24Url],
--- a/packages/common/utils/index.ts
+++ b/packages/common/utils/index.ts
@ -1,19 +1,19 @@
-import LoginPageSvgUrl from "../../../public/images/logo/loginpage.svg?url";
-import DarkLoginPageSvgUrl from "../../../public/images/logo/dark_loginpage.svg?url";
-import LeftMenuSvgUrl from "../../../public/images/logo/leftmenu.svg?url";
-import DocseditorSvgUrl from "../../../public/images/logo/docseditor.svg?url";
-import LightSmallSvgUrl from "../../../public/images/logo/lightsmall.svg?url";
-import DocsEditoRembedSvgUrl from "../../../public/images/logo/docseditorembed.svg?url";
-import DarkLightSmallSvgUrl from "../../../public/images/logo/dark_lightsmall.svg?url";
-import FaviconIco from "../../../public/favicon.ico";
+import LoginPageSvgUrl from "PUBLIC_DIR/images/logo/loginpage.svg?url";
+import DarkLoginPageSvgUrl from "PUBLIC_DIR/images/logo/dark_loginpage.svg?url";
+import LeftMenuSvgUrl from "PUBLIC_DIR/images/logo/leftmenu.svg?url";
+import DocseditorSvgUrl from "PUBLIC_DIR/images/logo/docseditor.svg?url";
+import LightSmallSvgUrl from "PUBLIC_DIR/images/logo/lightsmall.svg?url";
+import DocsEditoRembedSvgUrl from "PUBLIC_DIR/images/logo/docseditorembed.svg?url";
+import DarkLightSmallSvgUrl from "PUBLIC_DIR/images/logo/dark_lightsmall.svg?url";
+import FaviconIco from "PUBLIC_DIR/favicon.ico";

-import BackgroundPatternReactSvgUrl from "../../../public/images/background.pattern.react.svg?url";
-import BackgroundPatternOrangeReactSvgUrl from "../../../public/images/background.pattern.orange.react.svg?url";
-import BackgroundPatternGreenReactSvgUrl from "../../../public/images/background.pattern.green.react.svg?url";
-import BackgroundPatternRedReactSvgUrl from "../../../public/images/background.pattern.red.react.svg?url";
-import BackgroundPatternPurpleReactSvgUrl from "../../../public/images/background.pattern.purple.react.svg?url";
-import BackgroundPatternLightBlueReactSvgUrl from "../../../public/images/background.pattern.lightBlue.react.svg?url";
-import BackgroundPatternBlackReactSvgUrl from "../../../public/images/background.pattern.black.react.svg?url";
+import BackgroundPatternReactSvgUrl from "PUBLIC_DIR/images/background.pattern.react.svg?url";
+import BackgroundPatternOrangeReactSvgUrl from "PUBLIC_DIR/images/background.pattern.orange.react.svg?url";
+import BackgroundPatternGreenReactSvgUrl from "PUBLIC_DIR/images/background.pattern.green.react.svg?url";
+import BackgroundPatternRedReactSvgUrl from "PUBLIC_DIR/images/background.pattern.red.react.svg?url";
+import BackgroundPatternPurpleReactSvgUrl from "PUBLIC_DIR/images/background.pattern.purple.react.svg?url";
+import BackgroundPatternLightBlueReactSvgUrl from "PUBLIC_DIR/images/background.pattern.lightBlue.react.svg?url";
+import BackgroundPatternBlackReactSvgUrl from "PUBLIC_DIR/images/background.pattern.black.react.svg?url";

 import { LANGUAGE } from "../constants";
 import sjcl from "sjcl";
--- a/packages/components/.storybook/webpack.config.js
+++ b/packages/components/.storybook/webpack.config.js
@ -6,6 +6,10 @@ const pathToAssets = path.resolve(__dirname, "../../../public/images");
 module.exports = ({ config }) => {
  const rules = config.module.rules;

+  config.resolve.alias = {
+    PUBLIC_DIR: path.resolve(__dirname, "../../../public"),
+  };
+
  const fileLoaderRule = rules.find((rule) => rule.test.test(".svg"));
  fileLoaderRule.exclude = /\.svg$/;

--- a/packages/components/ImageEditor/Dropzone/index.js
+++ b/packages/components/ImageEditor/Dropzone/index.js
@ -110,7 +110,7 @@ const Dropzone = ({ t, setUploadedFile, isDisabled }) => {
  };

  const { getRootProps, getInputProps } = useDropzone({
-    maxFiles: 1,
+    maxFiles: 0,
    noClick: isDisabled,
    noKeyboard: isDisabled,
    // maxSize: 1000000,
--- a/packages/components/ImageEditor/ImageCropper/index.js
+++ b/packages/components/ImageEditor/ImageCropper/index.js
@ -3,10 +3,10 @@ import { ReactSVG } from "react-svg";
 import throttle from "lodash/throttle";
 import AvatarEditor from "react-avatar-editor";

-import ZoomMinusReactSvgUrl from "../../../../public/images/zoom-minus.react.svg?url";
-import ZoomPlusReactSvgUrl from "../../../../public/images/zoom-plus.react.svg?url";
-import IconCropperGridSvgUrl from "../../../../public/images/icon-cropper-grid.svg?url";
-import TrashReactSvgUrl from "../../../../public/images/trash.react.svg?url";
+import ZoomMinusReactSvgUrl from "PUBLIC_DIR/images/zoom-minus.react.svg?url";
+import ZoomPlusReactSvgUrl from "PUBLIC_DIR/images/zoom-plus.react.svg?url";
+import IconCropperGridSvgUrl from "PUBLIC_DIR/images/icon-cropper-grid.svg?url";
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";

 import Slider from "../../slider";
 import IconButton from "../../icon-button";
--- a/packages/components/access-right-select/data.js
+++ b/packages/components/access-right-select/data.js
@ -1,10 +1,10 @@
-import ActionsDocumentReactSvgUrl from "../../../public/images/actions.documents.react.svg?url";
-import CheckReactSvgUrl from "../../../public/images/check.react.svg?url";
-import AccessEditReactSvgUrl from "../../../public/images/access.edit.react.svg?url";
-import AccessReviewReactSvgUrl from "../../../public/images/access.review.react.svg?url";
-import AccessCommentReactSvgUrl from "../../../public/images/access.comment.react.svg?url";
-import EyeReactSvgUrl from "../../../public/images/eye.react.svg?url";
-import AccessNoneReactSvgUrl from "../../../public/images/access.none.react.svg?url";
+import ActionsDocumentReactSvgUrl from "PUBLIC_DIR/images/actions.documents.react.svg?url";
+import CheckReactSvgUrl from "PUBLIC_DIR/images/check.react.svg?url";
+import AccessEditReactSvgUrl from "PUBLIC_DIR/images/access.edit.react.svg?url";
+import AccessReviewReactSvgUrl from "PUBLIC_DIR/images/access.review.react.svg?url";
+import AccessCommentReactSvgUrl from "PUBLIC_DIR/images/access.comment.react.svg?url";
+import EyeReactSvgUrl from "PUBLIC_DIR/images/eye.react.svg?url";
+import AccessNoneReactSvgUrl from "PUBLIC_DIR/images/access.none.react.svg?url";

 export const data = [
  {
--- a/packages/components/all/all.stories.js
+++ b/packages/components/all/all.stories.js
@ -27,11 +27,12 @@ import Toast from "../toast";
 import toastr from "../toast/toastr";
 import ToggleContent from "../toggle-content";
 import Tooltip from "../tooltip";
-import SettingsReactSvg from "../../../public/images/settings.react.svg";
-import CatalogFolderReactSvg from "../../../public/images/catalog.folder.react.svg";
-import CatalogEmployeeReactSvgUrl from "../../../public/images/catalog.employee.react.svg?url";
-import ItemActiveReactSvgUrl from "../../../public/images/item.active.react.svg?url";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SettingsReactSvg from "PUBLIC_DIR/images/settings.react.svg";
+import CatalogFolderReactSvg from "PUBLIC_DIR/images/catalog.folder.react.svg";
+import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
+import ItemActiveReactSvgUrl from "PUBLIC_DIR/images/item.active.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg";

 const array_items = [
  {
@ -268,7 +269,7 @@ const Template = (args) => (
        {/*
            <div style={{ padding: "8px 0" }}>
            <ContextMenuButton
-              iconName="static/images/vertical-dots.react.svg"
+              iconName={VerticalDotsReactSvgUrl}
              size={16}
              color="#A3A9AE"
              isDisabled={false}
@ -290,7 +291,7 @@ const Template = (args) => (
                  size="25"
                  isDisabled={false}
                  onClick={() => {}}
-                  iconName={"search.react.svg"}
+                  iconName={VerticalDotsReactSvgUrl}
                  isFill={true}
                  isClickable={false}
                />
--- a/packages/components/aside/styled-aside.js
+++ b/packages/components/aside/styled-aside.js
@ -2,7 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import Base from "../themes/base";

-import CrossReactSvg from "../../../public/images/cross.react.svg";
+import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";

 import { isMobile } from "react-device-detect";

--- a/packages/components/avatar-editor/sub-components/avatar-editor-body.js
+++ b/packages/components/avatar-editor/sub-components/avatar-editor-body.js
@ -1,7 +1,7 @@
 import React from "react";
-import ZoomMinusReactSvgUrl from "../../../../public/images/zoom-minus.react.svg?url";
-import ZoomPlusReactSvgUrl from "../../../../public/images/zoom-plus.react.svg?url";
-import CatalogTrashReactSvgUrl from "../../../../public/images/catalog.trash.react.svg?url";
+import ZoomMinusReactSvgUrl from "PUBLIC_DIR/images/zoom-minus.react.svg?url";
+import ZoomPlusReactSvgUrl from "PUBLIC_DIR/images/zoom-plus.react.svg?url";
+import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
 import Dropzone from "react-dropzone";
 import ReactAvatarEditor from "./react-avatar-editor";
 import PropTypes from "prop-types";
--- a/packages/components/avatar/avatar.stories.js
+++ b/packages/components/avatar/avatar.stories.js
@ -1,6 +1,6 @@
 import React from "react";
 import Avatar from "./";
-import AtReactSvgUrl from "../../../public/images/@.react.svg?url";
+import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";

 const editAction = () => console.log("Edit action");

--- a/packages/components/avatar/index.js
+++ b/packages/components/avatar/index.js
@ -1,7 +1,7 @@
 import React, { memo } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import PencilReactSvgUrl from "../../../public/images/pencil.react.svg?url";
+import PencilReactSvgUrl from "PUBLIC_DIR/images/pencil.react.svg?url";

 import { GuestReactSvg, AdministratorReactSvg, OwnerReactSvg } from "./svg";
 import {
--- a/packages/components/avatar/svg/index.js
+++ b/packages/components/avatar/svg/index.js
@ -1,4 +1,4 @@
-export { default as CameraReactSvg } from "../../../../public/images/camera.react.svg";
-export { default as AdministratorReactSvg } from "../../../../public/images/administrator.react.svg";
-export { default as OwnerReactSvg } from "../../../../public/images/owner.react.svg";
-export { default as GuestReactSvg } from "../../../../public/images/guest.react.svg";
+export { default as CameraReactSvg } from "PUBLIC_DIR/images/camera.react.svg";
+export { default as AdministratorReactSvg } from "PUBLIC_DIR/images/administrator.react.svg";
+export { default as OwnerReactSvg } from "PUBLIC_DIR/images/owner.react.svg";
+export { default as GuestReactSvg } from "PUBLIC_DIR/images/guest.react.svg";
--- a/packages/components/button/button.stories.js
+++ b/packages/components/button/button.stories.js
@ -1,6 +1,6 @@
 import React from "react";

-import Icon from "../../../public/images/button.alert.react.svg";
+import Icon from "PUBLIC_DIR/images/button.alert.react.svg";
 import Button from "./";

 export default {
--- a/packages/components/campaigns-banner/campaigns-banner.stories.js
+++ b/packages/components/campaigns-banner/campaigns-banner.stories.js
@ -1,6 +1,6 @@
 import React from "react";
 import CampaignsBanner from "./";
-import CampaignsCloudPng from "../../../public/images/campaigns.cloud.png";
+import CampaignsCloudPng from "PUBLIC_DIR/images/campaigns.cloud.png";

 export default {
  title: "Components/CampaignsBanner",
--- a/packages/components/campaigns-banner/campaigns-banner.test.js
+++ b/packages/components/campaigns-banner/campaigns-banner.test.js
@ -1,7 +1,7 @@
 import React from "react";
 import { mount } from "enzyme";
 import CampaignsBanner from ".";
-import CampaignsCloudPng from "../../../public/images/campaigns.cloud.png";
+import CampaignsCloudPng from "PUBLIC_DIR/images/campaigns.cloud.png";

 describe("<CampaignsBanner />", () => {
  it("renders without error", () => {
--- a/packages/components/catalog-item/catalog-item.stories.js
+++ b/packages/components/catalog-item/catalog-item.stories.js
@ -1,8 +1,8 @@
 import React from "react";
 import CatalogItem from "./";
-import CatalogFolderReactSvgUrl from "../../../public/images/catalog.folder.react.svg?url";
-import CatalogGuestReactSvgUrl from "../../../public/images/catalog.guest.react.svg?url";
-import CatalogTrashReactSvgUrl from "../../../public/images/catalog.trash.react.svg?url";
+import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
+import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
+import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";

 export default {
  title: "Components/CatalogItem",
--- a/packages/components/catalog-item/catalog-item.test.js
+++ b/packages/components/catalog-item/catalog-item.test.js
@ -2,8 +2,8 @@ import React from "react";
 import { mount } from "enzyme";
 import CatalogItem from ".";

-import CatalogFolderReactSvgUrl from "../../../public/images/catalog.folder.react.svg?url";
-import CatalogTrashReactSvgUrl from "../../../public/images/catalog.trash.react.svg?url";
+import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
+import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";

 const baseProps = {
  icon: CatalogFolderReactSvgUrl,
--- a/packages/components/checkbox/index.js
+++ b/packages/components/checkbox/index.js
@ -3,9 +3,9 @@ import PropTypes from "prop-types";

 import Text from "../text";
 import { StyledLabel, HiddenInput } from "./styled-checkbox";
-import CheckboxIndeterminateIcon from "../../../public/images/checkbox.indeterminate.react.svg";
-import CheckboxCheckedIcon from "../../../public/images/checkbox.checked.react.svg";
-import CheckboxIcon from "../../../public/images/checkbox.react.svg";
+import CheckboxIndeterminateIcon from "PUBLIC_DIR/images/checkbox.indeterminate.react.svg";
+import CheckboxCheckedIcon from "PUBLIC_DIR/images/checkbox.checked.react.svg";
+import CheckboxIcon from "PUBLIC_DIR/images/checkbox.react.svg";

 // eslint-disable-next-line react/prop-types
 const RenderCheckboxIcon = ({ isChecked, isIndeterminate, tabIndex }) => {
--- a/packages/components/combobox/README.md
+++ b/packages/components/combobox/README.md
@ -6,8 +6,8 @@ Custom combo box input

 ```js
 import ComboBox from "@docspace/components/combobox";
-import NavLogoReactSvg from "../../../public/images/nav.logo.react.svg";
-import CatalogEmployeeReactSvg from "../../../public/images/catalog.employee.react.svg?url";
+import NavLogoReactSvg from "PUBLIC_DIR/images/nav.logo.react.svg";
+import CatalogEmployeeReactSvg from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
 ```

 ```js
--- a/packages/components/combobox/combobox.stories.js
+++ b/packages/components/combobox/combobox.stories.js
@ -3,10 +3,10 @@ import React from "react";
 import ComboBox from "./";
 import RadioButton from "../radio-button";
 import DropDownItem from "../drop-down-item";
-import NavLogoIcon from "../../../public/images/nav.logo.opened.react.svg";
-import CatalogEmployeeReactSvgUrl from "../../../public/images/catalog.employee.react.svg?url";
-import CatalogGuestReactSvgUrl from "../../../public/images/catalog.guest.react.svg?url";
-import CopyReactSvgUrl from "../../../public/images/copy.react.svg?url";
+import NavLogoIcon from "PUBLIC_DIR/images/nav.logo.opened.react.svg";
+import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
+import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
+import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";

 const comboOptions = [
  {
--- a/packages/components/combobox/combobox.stories.mdx
+++ b/packages/components/combobox/combobox.stories.mdx
@ -1,5 +1,5 @@
 import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
-import CatalogEmployeeReactSvg from "../../../public/images/catalog.employee.react.svg?url";
+import CatalogEmployeeReactSvg from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
 import ComboBox from "./";
 import * as stories from "./combobox.stories.js";

@ -47,7 +47,7 @@ Custom combo box input

 ```js
 import ComboBox from "@docspace/components/combobox";
-import NavLogoReactSvg from "../../../public/images/nav.logo.react.svg";
+import NavLogoReactSvg from "PUBLIC_DIR/images/nav.logo.react.svg";
 ```

 ```js
--- a/packages/components/combobox/sub-components/styled-combobutton.js
+++ b/packages/components/combobox/sub-components/styled-combobutton.js
@ -3,7 +3,7 @@ import { isMobileOnly } from "react-device-detect";
 import Base from "../../themes/base";
 import NoUserSelect from "../../utils/commonStyles";

-import TriangleDownIcon from "../../../../public/images/triangle.down.react.svg";
+import TriangleDownIcon from "PUBLIC_DIR/images/triangle.down.react.svg";
 import commonIconsStyles from "../../utils/common-icons-style";

 const StyledTriangleDownIcon = styled(TriangleDownIcon)`
--- a/packages/components/context-menu-button/README.md
+++ b/packages/components/context-menu-button/README.md
@ -6,7 +6,7 @@ ContextMenuButton is used for displaying context menu actions on a list's item

 ```js
 import ContextMenuButton from "@docspace/components/context-menu-button";
-import VerticalDotsReactSvgUrl from "../../../public/images/vertical-dots.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
 ```

 ```jsx
--- a/packages/components/context-menu-button/context-menu-button.stories.js
+++ b/packages/components/context-menu-button/context-menu-button.stories.js
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import VerticalDotsReactSvgUrl from "../../../public/images/vertical-dots.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
 import ContextMenuButton from "./";

 export default {
--- a/packages/components/context-menu-button/context-menu-button.test.js
+++ b/packages/components/context-menu-button/context-menu-button.test.js
@ -1,7 +1,7 @@
 import React from "react";
 import { mount, shallow } from "enzyme";
 import ContextMenuButton from ".";
-import VerticalDotsReactSvgUrl from "../../../public/images/vertical-dots.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";

 const baseData = () => [
  {
--- a/packages/components/context-menu-button/index.js
+++ b/packages/components/context-menu-button/index.js
@ -18,7 +18,7 @@ import {
  StyledOuter,
 } from "./styled-context-menu-button";

-import VerticalDotsReactSvgUrl from "../../../public/images/vertical-dots.react.svg?url";
+import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";

 class ContextMenuButton extends React.Component {
  constructor(props) {
--- a/packages/components/context-menu/context-menu.stories.js
+++ b/packages/components/context-menu/context-menu.stories.js
@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import CatalogFolderReactSvgUrl from "../../../public/images/catalog.folder.react.svg?url";
+import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
 import ContextMenu from "./index";

 export default {
--- a/packages/components/context-menu/sub-components/sub-menu.js
+++ b/packages/components/context-menu/sub-components/sub-menu.js
@ -5,7 +5,7 @@ import ObjectUtils from "../../utils/objectUtils";
 import { classNames } from "../../utils/classNames";
 import { CSSTransition } from "react-transition-group";
 import { ReactSVG } from "react-svg";
-import ArrowIcon from "../../../../public/images/arrow.right.react.svg";
+import ArrowIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
 import Scrollbar from "../../scrollbar";

 //import CustomScrollbarsVirtualList from "../../scrollbar/custom-scrollbars-virtual-list";
--- a/packages/components/date-picker/index.js
+++ b/packages/components/date-picker/index.js
@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";

-import CalendarReactSvgUrl from "../../../public/images/calendar.react.svg?url";
+import CalendarReactSvgUrl from "PUBLIC_DIR/images/calendar.react.svg?url";

 import InputBlock from "../input-block";
 import DropDown from "../drop-down";
--- a/packages/components/drop-down-item/README.md
+++ b/packages/components/drop-down-item/README.md
@ -6,7 +6,7 @@ Is a item of DropDown component

 ```js
 import DropDownItem from "@docspace/components/drop-down-item";
-import NavLogoReactSvgUrl from "../../../public/images/nav.logo.react.svg?url";
+import NavLogoReactSvgUrl from "PUBLIC_DIR/images/nav.logo.react.svg?url";
 ```

 ```jsx
--- a/packages/components/drop-down-item/drop-down-item.stories.js
+++ b/packages/components/drop-down-item/drop-down-item.stories.js
@ -1,11 +1,11 @@
 import React from "react";
 import DropDown from "../drop-down";
 import DropDownItem from ".";
-import QuestionReactSvgUrl from "../../../public/images/question.react.svg?url";
-import EyeReactSvgUrl from "../../../public/images/eye.react.svg?url";
-import CopyReactSvgUrl from "../../../public/images/copy.react.svg?url";
-import ChatReactSvgUrl from "../../../public/images/chat.react.svg?url";
-import NavLogoReactSvgUrl from "../../../public/images/nav.logo.react.svg?url";
+import QuestionReactSvgUrl from "PUBLIC_DIR/images/question.react.svg?url";
+import EyeReactSvgUrl from "PUBLIC_DIR/images/eye.react.svg?url";
+import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
+import ChatReactSvgUrl from "PUBLIC_DIR/images/chat.react.svg?url";
+import NavLogoReactSvgUrl from "PUBLIC_DIR/images/nav.logo.react.svg?url";

 export default {
  title: "Components/DropDownItem",
--- a/packages/components/drop-down-item/drop-down-item.test.js
+++ b/packages/components/drop-down-item/drop-down-item.test.js
@ -1,7 +1,7 @@
 import React from "react";
 import { mount, shallow } from "enzyme";
 import DropDownItem from ".";
-import NavLogoReactSvgUrl from "../../../public/images/nav.logo.react.svg?url";
+import NavLogoReactSvgUrl from "PUBLIC_DIR/images/nav.logo.react.svg?url";

 const baseProps = {
  isSeparator: false,
--- a/packages/components/drop-down-item/index.js
+++ b/packages/components/drop-down-item/index.js
@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { ReactSVG } from "react-svg";

-import RightArrowReactSvgUrl from "../../../public/images/right.arrow.react.svg?url";
+import RightArrowReactSvgUrl from "PUBLIC_DIR/images/right.arrow.react.svg?url";

 import { StyledDropdownItem, IconWrapper } from "./styled-drop-down-item";
 import { isNull } from "lodash";
--- a/packages/components/email-chips/svg/index.js
+++ b/packages/components/email-chips/svg/index.js
@ -1,2 +1,2 @@
-export { default as WarningIconSvgUrl } from "../../../../public/images/Warning.svg?url";
-export { default as DeleteIconSvgUrl } from "../../../../public/images/Delete.svg?url";
+export { default as WarningIconSvgUrl } from "PUBLIC_DIR/images/Warning.svg?url";
+export { default as DeleteIconSvgUrl } from "PUBLIC_DIR/images/Delete.svg?url";
--- a/packages/components/empty-screen-container/empty-screen-container.stories.js
+++ b/packages/components/empty-screen-container/empty-screen-container.stories.js
@ -1,8 +1,8 @@
 import React from "react";
 import EmptyScreenContainer from "./";
 import Link from "../link";
-import CrossReactSvgUrl from "../../../public/images/cross.react.svg";
-import EmptyScreenFilterPng from "../../../public/images/empty_screen_filter.png";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg";
+import EmptyScreenFilterPng from "PUBLIC_DIR/images/empty_screen_filter.png";

 export default {
  title: "Components/EmptyScreenContainer",
--- a/packages/components/examples/people.row.stories.js
+++ b/packages/components/examples/people.row.stories.js
@ -4,8 +4,8 @@ import Row from "../row";
 import Avatar from "../avatar";
 import Link from "../link";
 import RowContent from "../row-content";
-import SendClockReactSvg from "../../../public/images/send.clock.react.svg";
-import CatalogSpamReactSvg from "../../../public/images/catalog.spam.react.svg";
+import SendClockReactSvg from "PUBLIC_DIR/images/send.clock.react.svg";
+import CatalogSpamReactSvg from "PUBLIC_DIR/images/catalog.spam.react.svg";

 export default {
  title: "Examples/Row",
@ -259,10 +259,18 @@ const Template = (args) => {
              </Link>
              <>
                {user.status === "pending" && (
-                  <SendClockReactSvg size="small" isfill={true} color="#3B72A7" />
+                  <SendClockReactSvg
+                    size="small"
+                    isfill={true}
+                    color="#3B72A7"
+                  />
                )}
                {user.status === "disabled" && (
-                  <CatalogSpamReactSvg size="small" isfill={true} color="#3B72A7" />
+                  <CatalogSpamReactSvg
+                    size="small"
+                    isfill={true}
+                    color="#3B72A7"
+                  />
                )}
              </>
              {user.isHead ? (
--- a/packages/components/examples/people.tree-menu.stories.js
+++ b/packages/components/examples/people.tree-menu.stories.js
@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import TreeMenu from "../tree-menu";
 import TreeNode from "../tree-menu/sub-components/tree-node";
-import CatalogDepartmentsReactSvg from "../../../public/images/catalog.departments.react.svg";
-import CatalogFolderReactSvg from "../../../public/images/catalog.folder.react.svg";
-import ExpanderDownReactSvg from "../../../public/images/expander-down.react.svg";
-import ExpanderRightReactSvg from "../../../public/images/expander-right.react.svg";
+import CatalogDepartmentsReactSvg from "PUBLIC_DIR/images/catalog.departments.react.svg";
+import CatalogFolderReactSvg from "PUBLIC_DIR/images/catalog.folder.react.svg";
+import ExpanderDownReactSvg from "PUBLIC_DIR/images/expander-down.react.svg";
+import ExpanderRightReactSvg from "PUBLIC_DIR/images/expander-right.react.svg";

 export default {
  title: "Examples/Tree",
@ -143,7 +143,11 @@ const Template = (args) => {
          title={item.title}
          icon={
            !item.root ? (
-              <CatalogFolderReactSvg size="scale" isfill={true} color="dimgray" />
+              <CatalogFolderReactSvg
+                size="scale"
+                isfill={true}
+                color="dimgray"
+              />
            ) : (
              ""
            )
@ -160,7 +164,9 @@ const Template = (args) => {
    if (obj.expanded) {
      return <ExpanderDownReactSvg width="8px" isfill={true} color="dimgray" />;
    } else {
-      return <ExpanderRightReactSvg width="8px" isfill={true} color="dimgray" />;
+      return (
+        <ExpanderRightReactSvg width="8px" isfill={true} color="dimgray" />
+      );
    }
  };

--- a/packages/components/file-input/index.js
+++ b/packages/components/file-input/index.js
@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import equal from "fast-deep-equal/react";
-import CatalogFolderReactSvgUrl from "../../../public/images/catalog.folder.react.svg?url";
+import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";

 import IconButton from "../icon-button";
 import Button from "../button";
--- a/packages/components/group-button/index.js
+++ b/packages/components/group-button/index.js
@ -12,7 +12,7 @@ import {
  StyledDropdownToggle,
  StyledGroupButton,
 } from "./styled-group-button";
-import ExpanderDownReactSvg from "../../../public/images/expander-down.react.svg";
+import ExpanderDownReactSvg from "PUBLIC_DIR/images/expander-down.react.svg";
 import commonIconsStyles from "../utils/common-icons-style";
 import Base from "../themes/base";

--- a/packages/components/help-button/index.js
+++ b/packages/components/help-button/index.js
@ -6,7 +6,7 @@ import Tooltip from "../tooltip";
 import { handleAnyClick } from "../utils/event";
 import uniqueId from "lodash/uniqueId";

-import InfoReactSvgUrl from "../../../public/images/info.react.svg?url";
+import InfoReactSvgUrl from "PUBLIC_DIR/images/info.react.svg?url";

 class HelpButton extends React.Component {
  constructor(props) {
--- a/packages/components/icon-button/README.md
+++ b/packages/components/icon-button/README.md
@ -6,7 +6,7 @@ IconButton is used for a action on a page

 ```js
 import IconButton from "@docspace/components/icon-button";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
 ```

 ```jsx
--- a/packages/components/icon-button/icon-button.stories.js
+++ b/packages/components/icon-button/icon-button.stories.js
@ -1,16 +1,16 @@
 import React from "react";
 import IconButton from "./";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
-import EyeReactSvgUrl from "../../../public/images/eye.react.svg?url";
-import InfoReactSvgUrl from "../../../public/images/info.react.svg?url";
-import MailReactSvgUrl from "../../../public/images/mail.react.svg?url";
-import CatalogPinReactSvgUrl from "../../../public/images/catalog.pin.react.svg?url";
-import CrossReactSvgUrl from "../../../public/images/cross.react.svg?url";
-import MediaMuteReactSvgUrl from "../../../public/images/media.mute.react.svg?url";
-import NavLogoReactSvg from "../../../public/images/nav.logo.react.svg?url";
-import PersonReactSvg from "../../../public/images/person.react.svg?url";
-import QuestionReactSvg from "../../../public/images/question.react.svg?url";
-import SettingsReactSvg from "../../../public/images/settings.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
+import EyeReactSvgUrl from "PUBLIC_DIR/images/eye.react.svg?url";
+import InfoReactSvgUrl from "PUBLIC_DIR/images/info.react.svg?url";
+import MailReactSvgUrl from "PUBLIC_DIR/images/mail.react.svg?url";
+import CatalogPinReactSvgUrl from "PUBLIC_DIR/images/catalog.pin.react.svg?url";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
+import MediaMuteReactSvgUrl from "PUBLIC_DIR/images/media.mute.react.svg?url";
+import NavLogoReactSvg from "PUBLIC_DIR/images/nav.logo.react.svg?url";
+import PersonReactSvg from "PUBLIC_DIR/images/person.react.svg?url";
+import QuestionReactSvg from "PUBLIC_DIR/images/question.react.svg?url";
+import SettingsReactSvg from "PUBLIC_DIR/images/settings.react.svg?url";

 export default {
  title: "Components/IconButton",
--- a/packages/components/icon-button/icon-button.test.js
+++ b/packages/components/icon-button/icon-button.test.js
@ -1,7 +1,7 @@
 import React from "react";
 import { mount } from "enzyme";
 import IconButton from ".";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";

 const baseProps = {
  size: "25",
--- a/packages/components/icons/README.md
+++ b/packages/components/icons/README.md
@ -6,7 +6,7 @@ List of all available icons

 ```js
 import Icons from "@docspace/components/icons";
-import NavLogoReactSvg from "../../../public/images/nav.logo.react.svg";
+import NavLogoReactSvg from "PUBLIC_DIR/images/nav.logo.react.svg";
 ```

 ```jsx
--- a/packages/components/icons/icons.test.js
+++ b/packages/components/icons/icons.test.js
@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import AZSortingReactSvg from "../../../public/images/a-z.sorting.react.svg";
+import AZSortingReactSvg from "PUBLIC_DIR/images/a-z.sorting.react.svg";
 describe("<Icons />", () => {
  it("renders without error", () => {
    const wrapper = mount(<AZSortingReactSvg />);
--- a/packages/components/input-block/README.md
+++ b/packages/components/input-block/README.md
@ -6,7 +6,7 @@ InputBlock description

 ```js
 import InputBlock from "@docspace/components/input-block";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
 ```

 ```js
--- a/packages/components/input-block/input-block.stories.js
+++ b/packages/components/input-block/input-block.stories.js
@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import SettingsReactSvgUrl from "../../../public/images/settings.react.svg?url";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SettingsReactSvgUrl from "PUBLIC_DIR/images/settings.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
 import InputBlock from ".";
 import Button from "../button";
 import IconButton from "../icon-button";
--- a/packages/components/input-block/input-block.test.js
+++ b/packages/components/input-block/input-block.test.js
@ -2,7 +2,7 @@ import React from "react";
 import { mount } from "enzyme";
 import InputBlock from ".";
 import Button from "../button";
-import SearchReactSvgUrl from "../../../public/images/search.react.svg?url";
+import SearchReactSvgUrl from "PUBLIC_DIR/images/search.react.svg?url";
 describe("<IconButton />", () => {
  it("renders without error", () => {
    const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
@ -93,7 +93,7 @@ describe("<IconButton />", () => {
    const onChange = jest.fn();
    const wrapper = mount(
      <InputBlock
-        iconName="static/images/search.react.svg"
+        iconName={SearchReactSvgUrl}
        size="huge"
        onChange={onChange}
      />
@ -106,7 +106,7 @@ describe("<IconButton />", () => {
    const onIconClick = jest.fn();
    const wrapper = mount(
      <InputBlock
-        iconName="static/images/search.react.svg"
+        iconName={SearchReactSvgUrl}
        size="huge"
        isDisabled={false}
        onIconClick={onIconClick}
@ -119,7 +119,7 @@ describe("<IconButton />", () => {
  it("not call onChange", () => {
    const onChange = jest.fn();
    const wrapper = mount(
-      <InputBlock iconName="static/images/search.react.svg" size="huge" />
+      <InputBlock iconName={SearchReactSvgUrl} size="huge" />
    );
    const input = wrapper.find("input");
    input.first().simulate("change", { target: { value: "test" } });
@ -129,7 +129,7 @@ describe("<IconButton />", () => {
    const onIconClick = jest.fn();
    const wrapper = mount(
      <InputBlock
-        iconName="static/images/search.react.svg"
+        iconName={SearchReactSvgUrl}
        size="huge"
        isDisabled={true}
        onIconClick={onIconClick}
--- a/packages/components/input-phone/index.js
+++ b/packages/components/input-phone/index.js
@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { options } from "./options";
 import { FixedSizeList as List } from "react-window";
 import { StyledBox } from "./styled-input-phone";
-import InvalidSvgUrl from "../../../public/images/phoneFlags/invalid.svg?url";
+import InvalidSvgUrl from "PUBLIC_DIR/images/phoneFlags/invalid.svg?url";
 import PropTypes from "prop-types";
 import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
 import Box from "@docspace/components/box";
--- a/packages/components/input-phone/options.js
+++ b/packages/components/input-phone/options.js
@ -247,7 +247,7 @@ import {
  YemenSvgUrl,
  ZambiaSvgUrl,
  ZimbabweSvgUrl,
-} from "../../../public/images/phoneFlags";
+} from "PUBLIC_DIR/images/phoneFlags";

 export const options = [
  {
--- a/Show More
+++ b/Show More