Client: fix after rewrite to typescript

frontend.code-workspace

@@ -24,10 +24,6 @@
       "name": "📦 @docspace/common",
       "path": "packages/common"
     },
-    {
-      "name": "📦 @docspace/components",
-      "path": "packages/components"
-    },
     {
       "name": "📦 @docspace/shared",
       "path": "packages/shared"

package.json

@@ -18,10 +18,10 @@
     "deploy": "shx rm -rf ../publish/web && yarn workspaces foreach -ptR --from '{@docspace/client,@docspace/login,@docspace/editor,@docspace/management}' run deploy && shx cp -r public ../publish/web/ && node common/scripts/minify-common-locales.js",
     "start": "node ./common/scripts/before-build.js && yarn workspaces foreach -vptiR --from '{@docspace/client,@docspace/login,@docspace/editor,@docspace/management}' run start",
     "start-prod": "yarn workspaces foreach -vptiR --from '{@docspace/client,@docspace/login,@docspace/editor,@docspace/management}' run start-prod",
-    "storybook": "yarn workspace @docspace/components storybook",
-    "storybook-build": "yarn workspace @docspace/components run storybook-build",
-    "storybook-serve": "yarn workspace @docspace/components run storybook-serve",
-    "test": "yarn workspace @docspace/components test",
+    "storybook": "yarn workspace @docspace/shared storybook",
+    "storybook-build": "yarn workspace @docspace/shared run storybook-build",
+    "storybook-serve": "yarn workspace @docspace/shared run storybook-serve",
+    "test": "yarn workspace @docspace/shared test",
     "wipe": "shx rm -rf node_modules yarn.lock packages/**/node_modules",
     "licenses-audit": "yarn licenses audit --output-csv=licenses.csv --config=licenses.config.js --summary",
     "check-circular": "yarn madge --circular ./packages",

packages/client/jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "components": ["@docspace/components"]
+      "components": ["@docspace/shared/components"]
     }
   },
   "exclude": ["node_modules"]

packages/client/src/Client.jsx

@@ -11,7 +11,7 @@ import {
 } from "@docspace/common/utils";
 import { regDesktop } from "@docspace/common/desktop";
 
-import toastr from "@docspace/components/toast/toastr";
+import {toastr} from "@docspace/shared/components";
 
 import FilesPanels from "./components/FilesPanels";
 import GlobalEvents from "./components/GlobalEvents";

packages/client/src/DocspaceLogo/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
-import { mobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/shared/utils";
 import { inject, observer } from "mobx-react";
 import { getLogoFromPath } from "@docspace/common/utils";
 

packages/client/src/HOCs/withBadges.js

@@ -6,7 +6,7 @@ import { combineUrl } from "@docspace/common/utils";
 import Badges from "../components/Badges";
 import config from "PACKAGE_FILE";
 import copy from "copy-to-clipboard";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 import { isMobileOnly } from "react-device-detect";
 
 export default function withBadges(WrappedComponent) {
@@ -76,7 +76,7 @@ export default function withBadges(WrappedComponent) {
       const elem = e.target.closest(".is-mute");
       const data = elem.dataset;
       const { id, rootfolderid } = data;
-      
+
       setMuteAction(
         "unmute",
         { id, rootFolderId: rootfolderid, new: data.new },

packages/client/src/HOCs/withContent.js

@@ -1,20 +1,19 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-//import toastr from "@docspace/components/toast/toastr";
+//import {toastr} from "@docspace/shared/components";
 import {
   // FileAction,
   FileStatus,
   ShareAccessRights,
 } from "@docspace/common/constants";
 //import { combineUrl } from "@docspace/common/utils";
-import getCorrectDate from "@docspace/components/utils/getCorrectDate";
-import { LANGUAGE } from "@docspace/common/constants";
+import { getCorrectDate, getCookie } from "@docspace/shared/utils";
+import { LANGUAGE } from "@docspace/shared/constants";
 import config from "PACKAGE_FILE";
 //import EditingWrapperComponent from "../components/EditingWrapperComponent";
 import { getTitleWithoutExtension } from "SRC_DIR/helpers/filesUtils";
 //import { getDefaultFileName } from "@docspace/client/src/helpers/filesUtils";
 //import ItemIcon from "../components/ItemIcon";
-import { getCookie } from "@docspace/components/utils/cookie";
 
 export default function withContent(WrappedContent) {
   class WithContent extends React.Component {

packages/client/src/HOCs/withHotkeys.js

@@ -3,7 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { observer, inject } from "mobx-react";
 import { useNavigate } from "react-router-dom";
 import { Events } from "@docspace/common/constants";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 import throttle from "lodash/throttle";
 import { checkDialogsOpen } from "@docspace/common/utils/checkDialogsOpen";
 

packages/client/src/HOCs/withLoader.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { observer, inject } from "mobx-react";
 import { useLocation } from "react-router-dom";
-import TableSkeleton from "@docspace/components/skeletons/table";
-import RowsSkeleton from "@docspace/components/skeletons/rows";
+import { TableSkeleton } from "@docspace/shared/skeletons";
+import { RowsSkeleton } from "@docspace/shared/skeletons";
 import Loaders from "@docspace/common/components/Loaders";
 
 const pathname = window.location.pathname.toLowerCase();

packages/client/src/HOCs/withLoading.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { observer, inject } from "mobx-react";
-import { isMobile } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/shared/utils";
 
 const withLoading = (WrappedComponent) => {
   const withLoading = (props) => {

packages/client/src/HOCs/withPeopleContent.js

@@ -2,9 +2,9 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
-import Link from "@docspace/components/link";
-import LinkWithDropdown from "@docspace/components/link-with-dropdown";
-import Avatar from "@docspace/components/avatar";
+import { Link } from "@docspace/shared/components";
+import { LinkWithDropdown } from "@docspace/shared/components";
+import { Avatar } from "@docspace/shared/components";
 
 export default function withContent(WrappedContent) {
   const WithContent = (props) => {

packages/client/src/HOCs/withQuickButtons.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 import QuickButtons from "../components/QuickButtons";
 import copy from "copy-to-clipboard";
 

packages/client/src/Hooks/useViewEffect.ts

@@ -2,8 +2,7 @@ import { useEffect, useContext } from "react";
 
 import { DeviceType } from "@docspace/common/constants";
 //@ts-ignore
-import { Context } from "@docspace/components/utils/context";
-import { isTablet, isMobile } from "@docspace/components/utils/device";
+import { isTablet, isMobile, Context } from "@docspace/shared/utils";
 import { isMobile as isMobileDevice } from "react-device-detect";
 
 type DeviceUnionType = (typeof DeviceType)[keyof typeof DeviceType];

packages/client/src/Shell.jsx

@@ -6,18 +6,21 @@ import Main from "./components/Main";
 
 import Layout from "./components/Layout";
 import ScrollToTop from "./components/Layout/ScrollToTop";
-import Toast from "@docspace/components/toast";
-import toastr from "@docspace/components/toast/toastr";
+import {
+  Toast,
+  toastr,
+  ThemeProvider,
+  SnackBar,
+  Portal,
+} from "@docspace/shared/components";
 import { getLogoFromPath, updateTempContent } from "@docspace/common/utils";
 
-import ThemeProvider from "@docspace/components/theme-provider";
 import store from "client/store";
 
 import config from "PACKAGE_FILE";
 import { I18nextProvider, useTranslation } from "react-i18next";
 import i18n from "./i18n";
 
-import Snackbar from "@docspace/components/snackbar";
 import moment from "moment-timezone";
 //import ReactSmartBanner from "./components/SmartBanner";
 import { useThemeDetector } from "@docspace/common/utils/useThemeDetector";
@@ -25,7 +28,7 @@ import { isMobile, isIOS, isFirefox } from "react-device-detect";
 import IndicatorLoader from "./components/IndicatorLoader";
 import DialogsWrapper from "./components/dialogs/DialogsWrapper";
 import MainBar from "./components/MainBar";
-import { Portal } from "@docspace/components";
+
 import indexedDbHelper from "@docspace/common/utils/indexedDBHelper";
 import { DeviceType, IndexedDBStores } from "@docspace/common/constants";
 import { getRestoreProgress } from "@docspace/common/api/portal";
@@ -198,20 +201,20 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     if (now.isBefore(from)) {
       setSnackBarTimer(campaign);
 
-      Snackbar.close();
+      SnackBar.close();
       console.log(`Show snackBar has been delayed for 1 minute`, now);
       skipMaintenance = true;
     }
 
     if (now.isAfter(to)) {
       console.log("Skip snackBar by current date", now);
-      Snackbar.close();
+      SnackBar.close();
       skipMaintenance = true;
     }
 
     if (isDesktop && !desktop) {
       console.log("Skip snackBar by desktop", desktop);
-      Snackbar.close();
+      SnackBar.close();
       skipMaintenance = true;
     }
 
@@ -246,7 +249,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       onAction: () => {
         setMaintenanceExist(false);
         setSnackbarExist(false);
-        Snackbar.close();
+        SnackBar.close();
         localStorage.setItem(LS_CAMPAIGN_DATE, to.format(DATE_FORMAT));
       },
       opacity: 1,
@@ -258,7 +261,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       theme,
     };
 
-    Snackbar.show(barConfig);
+    SnackBar.show(barConfig);
   };
 
   const fetchMaintenance = () => {
@@ -271,7 +274,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
           if (!campaign) {
             setCheckedMaintenance(true);
             clearSnackBarTimer();
-            Snackbar.close();
+            SnackBar.close();
             return;
           }
 
@@ -433,8 +436,8 @@ const ShellWrapper = inject(({ auth, backup, clientLoadingStore }) => {
     ? auth?.userStore?.user?.theme
       ? auth?.userStore?.user?.theme
       : window.RendererProcessVariable?.theme?.type === "dark"
-      ? "Dark"
-      : "Base"
+        ? "Dark"
+        : "Base"
     : auth?.userStore?.user?.theme;
 
   return {

packages/client/src/components/Article/Body/AccountsItem.js

@@ -5,7 +5,7 @@ import { withTranslation } from "react-i18next";
 import { PageType } from "@docspace/common/constants";
 import { getCatalogIconUrlByType } from "@docspace/common/utils/catalogIcon.helper";
 
-import CatalogItem from "@docspace/components/catalog-item";
+import { ArticleItem } from "@docspace/shared/components";
 
 const PureAccountsItem = ({ showText, isActive, onClick, t }) => {
   const onClickAction = React.useCallback(() => {
@@ -15,7 +15,7 @@ const PureAccountsItem = ({ showText, isActive, onClick, t }) => {
   const icon = getCatalogIconUrlByType(PageType.account);
 
   return (
-    <CatalogItem
+    <ArticleItem
       key="accounts"
       text={t("Accounts")}
       icon={icon}

packages/client/src/components/Article/Body/Banner.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import CampaignsBanner from "@docspace/components/campaigns-banner";
+import { CampaignsBanner } from "@docspace/shared/components";
 import { ADS_TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
-import { LANGUAGE } from "@docspace/common/constants";
-import { getLanguage } from "@docspace/common/utils";
-import { getCookie } from "@docspace/components/utils/cookie";
+import { LANGUAGE } from "@docspace/shared/constants";
+import { getLanguage } from "@docspace/shared/utils";
+import { getCookie } from "@docspace/shared/utils";
 
 const Banner = () => {
   const [campaignImage, setCampaignImage] = useState();

packages/client/src/components/Article/Body/BonusItem.js

@@ -2,7 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
-import CatalogItem from "@docspace/components/catalog-item";
+import { ArticleItem } from "@docspace/shared/components";
 import { combineUrl } from "@docspace/common/utils";
 import { useNavigate } from "react-router-dom";
 import GiftReactSvgUrl from "PUBLIC_DIR/images/gift.react.svg?url";
@@ -24,7 +24,7 @@ const BonusItem = ({ showText, toggleArticleOpen }) => {
   }, []);
 
   return (
-    <CatalogItem
+    <ArticleItem
       key="bonus"
       text={t("Common:Bonus")}
       icon={GiftReactSvgUrl}

packages/client/src/components/Article/Body/Items.js

@@ -12,8 +12,7 @@ import {
 } from "@docspace/common/constants";
 import { getCatalogIconUrlByType } from "@docspace/common/utils/catalogIcon.helper";
 
-import CatalogItem from "@docspace/components/catalog-item";
-import DragAndDrop from "@docspace/components/drag-and-drop";
+import { ArticleItem, DragAndDrop } from "@docspace/shared/components";
 
 import BonusItem from "./BonusItem";
 import AccountsItem from "./AccountsItem";
@@ -127,7 +126,7 @@ const Item = ({
       onDragLeave={onDragLeave}
       className={"document-catalog"}
     >
-      <CatalogItem
+      <ArticleItem
         key={item.id}
         id={item.id}
         folderId={folderId}

packages/client/src/components/Article/Body/SettingsItem.js

@@ -2,7 +2,7 @@
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 
-import CatalogItem from "@docspace/components/catalog-item";
+import { ArticleItem } from "@docspace/shared/components";
 
 import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
 
@@ -12,7 +12,7 @@ const PureSettingsItem = ({ t, showText, isActive, onClick }) => {
   }, [onClick]);
 
   return (
-    <CatalogItem
+    <ArticleItem
       key="settings"
       text={t("Common:Settings")}
       icon={CatalogSettingsReactSvgUrl}

packages/client/src/components/Article/Body/index.js

@@ -7,7 +7,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 
 import { DeviceType, RoomSearchArea } from "@docspace/common/constants";
 import Items from "./Items";
-import { tablet } from "@docspace/components/utils/device";
+import { tablet } from "@docspace/shared/utils";
 
 import FilesFilter from "@docspace/common/api/files/filter";
 import RoomsFilter from "@docspace/common/api/rooms/filter";

packages/client/src/components/Article/MainButton/MobileView.js

@@ -4,9 +4,9 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { inject, observer } from "mobx-react";
 
-import { mobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/shared/utils";
 
-import MainButtonMobile from "@docspace/components/main-button-mobile";
+import { MainButtonMobile } from "@docspace/shared/components";
 
 const StyledMainButtonMobile = styled(MainButtonMobile)`
   position: fixed;

packages/client/src/components/Article/MainButton/index.js

@@ -17,7 +17,7 @@ import React from "react";
 
 import { inject, observer } from "mobx-react";
 
-import MainButton from "@docspace/components/main-button";
+import { MainButton, toastr, Button } from "@docspace/shared/components";
 import { withTranslation } from "react-i18next";
 import Loaders from "@docspace/common/components/Loaders";
 import { encryptionUploadDialog } from "../../../helpers/desktop";
@@ -26,12 +26,11 @@ import { useNavigate, useLocation } from "react-router-dom";
 import MobileView from "./MobileView";
 
 import { Events, EmployeeType, DeviceType } from "@docspace/common/constants";
-import toastr from "@docspace/components/toast/toastr";
+
 import styled, { css } from "styled-components";
-import Button from "@docspace/components/button";
 
 import { resendInvitesAgain } from "@docspace/common/api/people";
-import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
+import { getCorrectFourValuesStyle } from "@docspace/shared/utils";
 
 const StyledButton = styled(Button)`
   font-weight: 700;

packages/client/src/components/Badges.js

@@ -13,20 +13,16 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { isMobile as isMobileDevice } from "react-device-detect";
 
-import Badge from "@docspace/components/badge";
-import IconButton from "@docspace/components/icon-button";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import { Badge, ColorTheme, ThemeId } from "@docspace/shared/components";
 
 import {
   FileStatus,
   RoomsType,
   ShareAccessRights,
 } from "@docspace/common/constants";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 
-import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
-import { isTablet, isDesktop, size } from "@docspace/components/utils/device";
-import { classNames } from "@docspace/components/utils/classNames";
+import { isTablet, isDesktop, size, classNames } from "@docspace/shared/utils";
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -195,7 +191,7 @@ const Badges = ({
     <div className="badges additional-badges file__badges">
       {isEditing && !isVisitor && !isPdf && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           isEditing={isEditing}
           iconName={iconEdit}
           className="badge icons-group is-editing tablet-badge tablet-edit"
@@ -210,7 +206,7 @@ const Badges = ({
         !isTrashFolder &&
         !isArchiveFolderRoot && (
           <ColorTheme
-            themeId={ThemeType.IconButton}
+            themeId={ThemeId.IconButton}
             onClick={setConvertDialogVisible}
             iconName={iconRefresh}
             className="badge tablet-badge icons-group can-convert"
@@ -252,7 +248,7 @@ const Badges = ({
     >
       {showCopyLinkIcon && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={LinkReactSvgUrl}
           className="badge row-copy-link icons-group tablet-badge"
           size={sizeBadge}
@@ -263,7 +259,7 @@ const Badges = ({
 
       {showCopyLinkIcon && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={TabletLinkReactSvgUrl}
           className="badge tablet-row-copy-link icons-group  tablet-badge"
           size={sizeBadge}
@@ -274,7 +270,7 @@ const Badges = ({
 
       {isRoom && mute && (
         <ColorTheme
-          themeId={ThemeType.IconButtonMute}
+          themeId={ThemeId.IconButtonMute}
           onClick={onUnmuteClick}
           iconName={iconMute}
           size={sizeBadge}
@@ -284,7 +280,7 @@ const Badges = ({
       )}
       {isRoom && pinned && (
         <ColorTheme
-          themeId={ThemeType.IconButtonPin}
+          themeId={ThemeId.IconButtonPin}
           onClick={onUnpinClick}
           className="badge icons-group is-pinned tablet-badge tablet-pinned"
           iconName={iconPin}

packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
-import { mobileMore } from "@docspace/components/utils/device";
+import { getCorrectFourValuesStyle, mobileMore } from "@docspace/shared/utils";
 
 const StyledBreakpointWarning = styled.div`
   padding: ${({ theme }) =>

packages/client/src/components/BreakpointWarning/sub-components/loader.js

@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react";
 import styled from "styled-components";
-import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
+import RectangleSkeleton from "@docspace/shared/skeletons";
 
-import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
-import { isMobile, mobileMore } from "@docspace/components/utils/device";
+import {
+  getCorrectFourValuesStyle,
+  isMobile,
+  mobileMore,
+} from "@docspace/shared/utils";
 
 const StyledLoader = styled.div`
   padding-top: 25px;

packages/client/src/components/DragTooltip/DragTooltip.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import styled, { css, useTheme } from "styled-components";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 
 const StyledTooltip = styled.div`
   position: fixed;

packages/client/src/components/EditingWrapperComponent.js

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
 import styled, { css } from "styled-components";
-import Button from "@docspace/components/button";
-import TextInput from "@docspace/components/text-input";
-import Text from "@docspace/components/text";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import { Button, TextInput, Text } from "@docspace/shared/components";
+
+import { commonIconsStyles, tablet } from "@docspace/shared/utils";
 
 import CheckIcon from "PUBLIC_DIR/images/check.react.svg";
 import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
-import { tablet } from "@docspace/components/utils/device";
-import { Base } from "@docspace/components/themes";
+
+import { Base } from "@docspace/shared/themes";
 
 const StyledCheckIcon = styled(CheckIcon)`
   ${commonIconsStyles}

packages/client/src/components/EmptyContainer/EmptyContainer.js

@@ -1,8 +1,8 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import EmptyScreenContainer from "@docspace/components/empty-screen-container";
+import { EmptyScreenContainer } from "@docspace/shared/components";
 
-import { classNames } from "@docspace/components/utils/classNames";
+import { classNames } from "@docspace/shared/utils";
 
 const EmptyFolderWrapper = styled.div`
   .empty-folder_container {

packages/client/src/components/EmptyContainer/EmptyFilterContainer.js

@@ -8,9 +8,7 @@ import { inject, observer } from "mobx-react";
 import EmptyContainer from "./EmptyContainer";
 import FilesFilter from "@docspace/common/api/files/filter";
 import RoomsFilter from "@docspace/common/api/rooms/filter";
-import Link from "@docspace/components/link";
-import IconButton from "@docspace/components/icon-button";
-import toastr from "@docspace/components/toast/toastr";
+import { Link, IconButton, toastr } from "@docspace/shared/components";
 
 const EmptyFilterContainer = ({
   t,

packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js

@@ -7,9 +7,7 @@ import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import EmptyContainer from "./EmptyContainer";
-import Link from "@docspace/components/link";
-
-import IconButton from "@docspace/components/icon-button";
+import { Link, IconButton } from "@docspace/shared/components";
 import RoomsFilter from "@docspace/common/api/rooms/filter";
 
 import { getCategoryUrl } from "SRC_DIR/helpers/utils";

packages/client/src/components/EmptyContainer/RootFolderContainer.js

@@ -8,10 +8,8 @@ import { FolderType, RoomSearchArea } from "@docspace/common/constants";
 import { inject, observer } from "mobx-react";
 import { withTranslation, Trans } from "react-i18next";
 import EmptyContainer from "./EmptyContainer";
-import Link from "@docspace/components/link";
-import Text from "@docspace/components/text";
-import Box from "@docspace/components/box";
-import IconButton from "@docspace/components/icon-button";
+import { Link, Box, Text, IconButton } from "@docspace/shared/components";
+
 import RoomsFilter from "@docspace/common/api/rooms/filter";
 import FilesFilter from "@docspace/common/api/files/filter";
 

packages/client/src/components/EmptyContainer/sub-components/CommonButtons.js

@@ -5,11 +5,8 @@ import { inject, observer } from "mobx-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 
-import Link from "@docspace/components/link";
-import Box from "@docspace/components/box";
-import { Text } from "@docspace/components";
+import { Link, Box, Text, IconButton } from "@docspace/shared/components";
 
-import IconButton from "@docspace/components/icon-button";
 import { FolderType, RoomSearchArea } from "@docspace/common/constants";
 import RoomsFilter from "@docspace/common/api/rooms/filter";
 import FilesFilter from "@docspace/common/api/files/filter";

packages/client/src/components/FilesSelector/helpers/useFilesHelper.ts

@@ -22,7 +22,7 @@ import {
   FolderType,
 } from "@docspace/common/constants";
 //@ts-ignore
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 
 const DEFAULT_FILE_EXTS = "file";
 

packages/client/src/components/FilesSelector/i18n.js

@@ -1,10 +1,10 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "@docspace/common/utils/i18next-http-backend";
-import { LANGUAGE } from "@docspace/common/constants";
+import { LANGUAGE } from "@docspace/shared/constants";
 import config from "PACKAGE_FILE";
 import { getLtrLanguageForEditor } from "@docspace/common/utils";
-import { getCookie } from "@docspace/components/utils/cookie";
+import { getCookie } from "@docspace/shared/utils";
 import { loadLanguagePath } from "SRC_DIR/helpers/utils";
 const newInstance = i18n.createInstance();
 

packages/client/src/components/FilesSelector/index.tsx

@@ -7,12 +7,13 @@ import Loaders from "@docspace/common/components/Loaders";
 import { FolderType, RoomsType } from "@docspace/common/constants";
 import { DeviceType } from "@docspace/common/constants";
 
-import Aside from "@docspace/components/aside";
-import Backdrop from "@docspace/components/backdrop";
-import Selector from "@docspace/components/selector";
-import Portal from "@docspace/components/portal";
-// @ts-ignore
-import toastr from "@docspace/components/toast/toastr";
+import {
+  Aside,
+  Backdrop,
+  Selector,
+  Portal,
+  toastr,
+} from "@docspace/shared/components";
 
 import EmptyScreenFilterAltSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt.svg?url";
 import EmptyScreenFilterAltDarkSvgUrl from "PUBLIC_DIR/images/empty_screen_filter_alt_dark.svg?url";

packages/client/src/components/FilesSelectorInput/index.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 
-import FileInput from "@docspace/components/file-input";
+import { FileInput } from "@docspace/shared/components";
 
 import FilesSelector from "../FilesSelector";
 import { StyledBodyWrapper } from "./StyledComponents";

packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js

@@ -4,9 +4,8 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import { ChangeUserTypeDialog } from "../dialogs";
-import toastr from "@docspace/components/toast/toastr";
-import Link from "@docspace/components/link";
-import Text from "@docspace/components/text";
+import { toastr, Link, Text } from "@docspace/shared/components";
+
 import { combineUrl } from "@docspace/common/utils";
 
 const ChangeUserTypeEvent = ({

packages/client/src/components/GlobalEvents/CreateEvent.js

@@ -2,7 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 
 import { combineUrl } from "@docspace/common/utils";
 

packages/client/src/components/GlobalEvents/EditRoomEvent.js

@@ -5,7 +5,7 @@ import { EditRoomDialog } from "../dialogs";
 import { Encoder } from "@docspace/common/utils/encoder";
 import api from "@docspace/common/api";
 import { getRoomInfo } from "@docspace/common/api/rooms";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 
 const EditRoomEvent = ({
   addActiveItems,

packages/client/src/components/GlobalEvents/RenameEvent.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 import Dialog from "./sub-components/Dialog";
 import { getTitleWithoutExtension } from "SRC_DIR/helpers/filesUtils";
 

packages/client/src/components/GlobalEvents/sub-components/Dialog.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useCallback, useState } from "react";
 import { inject, observer } from "mobx-react";
 
-import toastr from "@docspace/components/toast/toastr";
-import ModalDialog from "@docspace/components/modal-dialog";
-import TextInput from "@docspace/components/text-input";
-import Button from "@docspace/components/button";
-import ComboBox from "@docspace/components/combobox";
-import Checkbox from "@docspace/components/checkbox";
-import Box from "@docspace/components/box";
-import FieldContainer from "@docspace/components/field-container";
+import { toastr } from "@docspace/shared/components";
+import { ModalDialog } from "@docspace/shared/components";
+import { TextInput } from "@docspace/shared/components";
+import { Button } from "@docspace/shared/components";
+import { ComboBox } from "@docspace/shared/components";
+import { Checkbox } from "@docspace/shared/components";
+import { Box } from "@docspace/shared/components";
+import { FieldContainer } from "@docspace/shared/components";
 
 const Dialog = ({
   t,

packages/client/src/components/Icons.js

@@ -1,13 +1,13 @@
 import SecuritySvgUrl from "PUBLIC_DIR/images/security.svg?url";
 import styled from "styled-components";
 
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import { commonIconsStyles } from "@docspace/shared/utils";
 
 import FavoriteIcon from "PUBLIC_DIR/images/favorite.react.svg";
 import FileActionsConvertEditDocIcon from "PUBLIC_DIR/images/file.actions.convert.edit.doc.react.svg";
 import FileActionsLockedIcon from "PUBLIC_DIR/images/file.actions.locked.react.svg";
 import EditFormIcon from "PUBLIC_DIR/images/access.edit.form.react.svg";
-import Base from "@docspace/components/themes/base";
+import { Base } from "@docspace/shared/themes";
 
 export const EncryptedFileIcon = styled.div`
   background: url(${SecuritySvgUrl}) no-repeat 0 0 / 16px 16px transparent;
@@ -15,14 +15,14 @@ export const EncryptedFileIcon = styled.div`
   position: absolute;
   width: 16px;
   margin-top: 14px;
-  ${props =>
+  ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
-              margin-right: 12px;
-            `
+          margin-right: 12px;
+        `
       : css`
-              margin-left: 12px;
-            `}
+          margin-left: 12px;
+        `}
 `;
 
 export const StyledFavoriteIcon = styled(FavoriteIcon)`

packages/client/src/components/IndicatorLoader/index.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
+import { ColorTheme, ThemeId } from "@docspace/shared/components";
 
 const IndicatorLoader = () => {
   return (
-    <ColorTheme themeId={ThemeType.IndicatorLoader}>
+    <ColorTheme themeId={ThemeId.IndicatorLoader}>
       <div id="ipl-progress-indicator"></div>
     </ColorTheme>
   );

packages/client/src/components/ItemIcon.js

@@ -2,9 +2,9 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
-import Base from "@docspace/components/themes/base";
-import NoUserSelect from "@docspace/components/utils/commonStyles";
-import RoomIcon from "@docspace/components/room-icon";
+import { Base } from "@docspace/shared/themes";
+import { NoUserSelect } from "@docspace/shared/utils";
+import { RoomIcon } from "@docspace/shared/components";
 
 const StyledIcon = styled.img`
   ${NoUserSelect}

packages/client/src/components/Layout/MobileLayout.js

@@ -1,8 +1,12 @@
 import React, { Component, createRef } from "react";
-import { isDesktop, isTouchDevice } from "@docspace/components/utils/device";
-import Scrollbar from "@docspace/components/scrollbar";
+import {
+  isDesktop,
+  isTouchDevice,
+  getBannerAttribute,
+} from "@docspace/shared/utils";
+import { Scrollbar } from "@docspace/shared/components";
 import { LayoutContextProvider } from "./context";
-import { getBannerAttribute } from "@docspace/components/utils/banner";
+
 import PropTypes from "prop-types";
 import {
   isTablet,

packages/client/src/components/Layout/index.js

@@ -7,7 +7,7 @@ import {
   isTablet as isTabletUtils,
   isMobile as isMobileUtils,
   tablet,
-} from "@docspace/components/utils/device";
+} from "@docspace/shared/utils";
 import {
   isIOS,
   isMobile,

packages/client/src/components/Main/index.js

@@ -3,10 +3,7 @@ import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import { isMobile, isIOS, isFirefox } from "react-device-detect";
 
-import {
-  mobile,
-  isMobile as isMobileUtils,
-} from "@docspace/components/utils/device";
+import { mobile, isMobile as isMobileUtils } from "@docspace/shared/utils";
 
 const StyledMain = styled.main`
   height: ${(props) => props.mainHeight && `${props.mainHeight}px`};

packages/client/src/components/MainBar/Bar.js

@@ -7,8 +7,8 @@ import { ADS_TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
 
 import { getConvertedSize } from "@docspace/common/utils";
 
-import { getBannerAttribute } from "@docspace/components/utils/banner";
-import SnackBar from "@docspace/components/snackbar";
+import { getBannerAttribute } from "@docspace/shared/utils";
+import { SnackBar } from "@docspace/shared/components";
 import { QuotaBarTypes } from "SRC_DIR/helpers/constants";
 
 import QuotasBar from "./QuotasBar";

packages/client/src/components/MainBar/ConfirmEmailBar.js

@@ -2,9 +2,9 @@ import React from "react";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 
-import SnackBar from "@docspace/components/snackbar";
+import { SnackBar } from "@docspace/shared/components";
 
-import Link from "@docspace/components/link";
+import { Link } from "@docspace/shared/components";
 
 const ConfirmEmailBar = ({
   t,

packages/client/src/components/MainBar/QuotasBar.js

@@ -2,9 +2,9 @@ import React from "react";
 import { withTranslation, Trans } from "react-i18next";
 import styled, { css } from "styled-components";
 
-import SnackBar from "@docspace/components/snackbar";
+import { SnackBar } from "@docspace/shared/components";
 
-import Link from "@docspace/components/link";
+import { Link } from "@docspace/shared/components";
 import { QuotaBarTypes } from "SRC_DIR/helpers/constants";
 
 const QuotasBar = ({

packages/client/src/components/MainBar/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
 
-import { mobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/shared/utils";
 import Bar from "./Bar";
 
 const StyledContainer = styled.div`

packages/client/src/components/NavMenu/i18n.js

@@ -1,9 +1,9 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "@docspace/common/utils/i18next-http-backend";
-import { LANGUAGE } from "@docspace/common/constants";
+import { LANGUAGE } from "@docspace/shared/constants";
 import config from "PACKAGE_FILE";
-import { getCookie } from "@docspace/components/utils/cookie";
+import { getCookie } from "@docspace/shared/utils";
 
 import { loadLanguagePath } from "SRC_DIR/helpers/utils";
 

packages/client/src/components/NavMenu/index.js

@@ -2,9 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 
-import { isMobile, mobile } from "@docspace/components/utils/device";
-import Backdrop from "@docspace/components/backdrop";
-import Aside from "@docspace/components/aside";
+import { isMobile, mobile } from "@docspace/shared/utils";
+import { Backdrop } from "@docspace/shared/components";
+import { Aside } from "@docspace/shared/components";
 
 import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
@@ -18,7 +18,7 @@ import { LayoutContextConsumer } from "../Layout/context";
 import { inject, observer } from "mobx-react";
 import i18n from "./i18n";
 import PreparationPortalDialog from "../dialogs/PreparationPortalDialog";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 import { DeviceType } from "@docspace/common/constants";
 
 const StyledContainer = styled.header`

packages/client/src/components/NavMenu/sub-components/header-catalog-burger.js

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
-import { mobile } from "@docspace/components/utils/device";
-import { Base } from "@docspace/components/themes";
+import { mobile } from "@docspace/shared/utils";
+import { Base } from "@docspace/shared/themes";
 
 const StyledIconBox = styled.div`
   display: none;

packages/client/src/components/NavMenu/sub-components/header-nav.js

@@ -3,11 +3,13 @@ import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import ProfileActions from "./profile-actions";
 import { useTranslation } from "react-i18next";
-import { mobile, tablet } from "@docspace/components/utils/device";
+import {
+  mobile,
+  tablet,
+  getCorrectFourValuesStyle,
+} from "@docspace/shared/utils";
 import { inject, observer } from "mobx-react";
 
-import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
-
 const StyledNav = styled.nav`
   display: flex;
 

packages/client/src/components/NavMenu/sub-components/header-navigation-icon.js

@@ -2,8 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
-import Badge from "@docspace/components/badge";
-import { Base } from "@docspace/components/themes";
+import { Badge } from "@docspace/shared/components";
+import { Base } from "@docspace/shared/themes";
 
 const StyledContainer = styled.div`
   position: relative;

packages/client/src/components/NavMenu/sub-components/header-unauth.js

@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import Box from "@docspace/components/box";
+import { Box } from "@docspace/shared/components";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/components/themes";
-import { mobile } from "@docspace/components/utils/device";
+import { Base } from "@docspace/shared/themes";
+import { mobile } from "@docspace/shared/utils";
 
 const Header = styled.header`
   align-items: left;

packages/client/src/components/NavMenu/sub-components/header.js

@@ -7,11 +7,11 @@ import { Link as LinkWithoutRedirect } from "react-router-dom";
 import { isMobileOnly, isMobile } from "react-device-detect";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { isDesktop, tablet, mobile } from "@docspace/components/utils/device";
+import { isDesktop, tablet, mobile } from "@docspace/shared/utils";
 import { combineUrl } from "@docspace/common/utils";
-import NoUserSelect from "@docspace/components/utils/commonStyles";
+import { NoUserSelect } from "@docspace/shared/utils";
 import HeaderCatalogBurger from "./header-catalog-burger";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 import { getLogoFromPath } from "@docspace/common/utils";
 
 const Header = styled.header`

packages/client/src/components/NavMenu/sub-components/nav-item.js

@@ -3,14 +3,17 @@ import { ReactSVG } from "react-svg";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 
-import Badge from "@docspace/components/badge";
-import Link from "@docspace/components/link";
-import Text from "@docspace/components/text";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import { tablet } from "@docspace/components/utils/device";
+import { Badge } from "@docspace/shared/components";
+import { Link } from "@docspace/shared/components";
+import { Text } from "@docspace/shared/components";
+import {
+  commonIconsStyles,
+  getCorrectFourValuesStyle,
+  tablet,
+} from "@docspace/shared/utils";
+
 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
-import { Base } from "@docspace/components/themes";
-import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
+import { Base } from "@docspace/shared/themes";
 
 const NavItemSeparator = styled.div`
   border-bottom: 1px ${(props) => (props.dashed ? "dashed" : "solid")}

packages/client/src/components/NavMenu/sub-components/nav-logo-item.js

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
-import NoUserSelect from "@docspace/components/utils/commonStyles";
+import { NoUserSelect } from "@docspace/shared/utils";
 import { getLogoFromPath } from "@docspace/common/utils";
 const LogoItem = styled.div`
   display: flex;

packages/client/src/components/NavMenu/sub-components/nav.js

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import Scrollbar from "@docspace/components/scrollbar";
+import { Scrollbar } from "@docspace/shared/components";
 import { isMobileOnly, isMobile } from "react-device-detect";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 
 const StyledNav = styled.nav`
   background-color: ${(props) => props.theme.nav.backgroundColor};

packages/client/src/components/NavMenu/sub-components/profile-actions.js

@@ -2,14 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 
-import Avatar from "@docspace/components/avatar";
-import DropDownItem from "@docspace/components/drop-down-item";
-import Link from "@docspace/components/link";
+import { Avatar } from "@docspace/shared/components";
+import { DropDownItem } from "@docspace/shared/components";
+import { Link } from "@docspace/shared/components";
 import ProfileMenu from "./profile-menu";
 import api from "@docspace/common/api";
 import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
-import ToggleButton from "@docspace/components/toggle-button";
-import Button from "@docspace/components/button";
+import { ToggleButton } from "@docspace/shared/components";
+import { Button } from "@docspace/shared/components";
 
 const StyledDiv = styled.div`
   width: 32px;

packages/client/src/components/NavMenu/sub-components/profile-menu.js

@@ -2,16 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import { inject, observer } from "mobx-react";
 
-import Avatar from "@docspace/components/avatar";
-import DropDown from "@docspace/components/drop-down";
+import { Avatar } from "@docspace/shared/components";
+import { DropDown } from "@docspace/shared/components";
 
 import styled, { css, withTheme } from "styled-components";
-import DropDownItem from "@docspace/components/drop-down-item";
+import { DropDownItem } from "@docspace/shared/components";
 
-import { Base } from "@docspace/components/themes";
-import { mobile, tablet } from "@docspace/components/utils/device";
+import { Base } from "@docspace/shared/themes";
+import { mobile, tablet } from "@docspace/shared/utils";
 import CrossIcon from "PUBLIC_DIR/images/icons/17/cross.react.svg";
-import Portal from "@docspace/components/portal";
+import { Portal } from "@docspace/shared/components";
 
 const StyledWrapper = styled.div``;
 

packages/client/src/components/PeopleArticle/Body/index.js

@@ -7,11 +7,11 @@ import Loaders from "@docspace/common/components/Loaders";
 import { inject, observer } from "mobx-react";
 import { getSelectedGroup } from "../../../helpers/people-helpers";
 import { useNavigate } from "react-router-dom";
-import { isMobile } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/shared/utils";
 import { isMobileOnly } from "react-device-detect";
 import config from "PACKAGE_FILE";
 import { combineUrl } from "@docspace/common/utils";
-import CatalogItem from "@docspace/components/catalog-item";
+import { ArticleItem } from "@docspace/shared/components";
 import withLoader from "../../../HOCs/withLoader";
 
 const departmentsIcon = DepartmentsGroupReactSvgUrl;
@@ -86,7 +86,7 @@ const ArticleBodyContent = ({
       const items = data.map((group) => {
         const active = isActive(group.id);
         return (
-          <CatalogItem
+          <ArticleItem
             key={group.id}
             id={group.id}
             icon={groupIcon}
@@ -111,7 +111,7 @@ const ArticleBodyContent = ({
     <>
       {!isVisitor && (
         <div style={!isAdmin && isMobileOnly ? { marginTop: "16px" } : null}>
-          <CatalogItem
+          <ArticleItem
             key={"root"}
             id={"departments"}
             icon={departmentsIcon}

packages/client/src/components/PeopleArticle/MainButton/index.js

@@ -7,10 +7,10 @@ import AddEmployeeReactSvgUrl from "ASSETS/images/add.employee.react.svg?url";
 import React from "react";
 //import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import MainButton from "@docspace/components/main-button";
+import { MainButton } from "@docspace/shared/components";
 import InviteDialog from "../../dialogs/InviteDialog/index";
 import { withTranslation } from "react-i18next";
-import toastr from "@docspace/components/toast/toastr";
+import { toastr } from "@docspace/shared/components";
 import Loaders from "@docspace/common/components/Loaders";
 import { inject, observer } from "mobx-react";
 import config from "PACKAGE_FILE";
@@ -19,7 +19,7 @@ import { isMobile } from "react-device-detect";
 import {
   isMobile as isMobileUtils,
   isTablet as isTabletUtils,
-} from "@docspace/components/utils/device";
+} from "@docspace/shared/utils";
 import MobileView from "./MobileView";
 
 import withLoader from "../../../HOCs/withLoader";

packages/client/src/components/PeopleSelector/i18n.js

@@ -1,9 +1,9 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "@docspace/common/utils/i18next-http-backend";
-import { LANGUAGE } from "@docspace/common/constants";
+import { LANGUAGE } from "@docspace/shared/constants";
 import config from "PACKAGE_FILE";
-import { getCookie } from "@docspace/components/utils/cookie";
+import { getCookie } from "@docspace/shared/utils";
 import { loadLanguagePath } from "SRC_DIR/helpers/utils";
 const newInstance = i18n.createInstance();
 

packages/client/src/components/PeopleSelector/index.js

@@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
 import React, { useState, useEffect } from "react";
 import { I18nextProvider, withTranslation } from "react-i18next";
 
-import Selector from "@docspace/components/selector";
+import { Selector } from "@docspace/shared/components";
 
 import { getUserRole } from "@docspace/common/utils";
 import Filter from "@docspace/common/api/people/filter";

packages/client/src/components/PeopleSelector/sub-components/UserTooltip.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Avatar from "@docspace/components/avatar";
-import Text from "@docspace/components/text";
+import { Avatar } from "@docspace/shared/components";
+import { Text } from "@docspace/shared/components";
 import StyledUserTooltip from "./StyledUserTooltip";
 
 const UserTooltip = ({ avatarUrl, label, email, position, theme }) => (

packages/client/src/components/QuickButtons.js

@@ -6,16 +6,15 @@ import FileActionsFavoriteReactSvgUrl from "PUBLIC_DIR/images/file.actions.favor
 import FavoriteReactSvgUrl from "PUBLIC_DIR/images/favorite.react.svg?url";
 import React from "react";
 import styled from "styled-components";
-import IconButton from "@docspace/components/icon-button";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import { isTablet } from "@docspace/components/utils/device";
+
+import { isTablet, commonIconsStyles } from "@docspace/shared/utils";
 import {
   FileStatus,
   RoomsType,
   ShareAccessRights,
 } from "@docspace/common/constants";
 
-import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
+import { ColorTheme, ThemeId } from "@docspace/shared/components";
 
 const QuickButtons = (props) => {
   const {
@@ -87,7 +86,7 @@ const QuickButtons = (props) => {
     <div className="badges additional-badges  badges__quickButtons">
       {isAvailableLockFile && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={iconLock}
           className="badge lock-file icons-group"
           size={sizeQuickButton}
@@ -102,7 +101,7 @@ const QuickButtons = (props) => {
       )}
       {isAvailableDownloadFile && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={FileActionsDownloadReactSvgUrl}
           className="badge download-file icons-group"
           size={sizeQuickButton}
@@ -115,7 +114,7 @@ const QuickButtons = (props) => {
       )}
       {showCopyLinkIcon && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={LinkReactSvgUrl}
           className="badge copy-link icons-group"
           size={sizeQuickButton}
@@ -128,7 +127,7 @@ const QuickButtons = (props) => {
       )}
       {/* {fileExst && !isTrashFolder && displayBadges && (
         <ColorTheme
-          themeId={ThemeType.IconButton}
+          themeId={ThemeId.IconButton}
           iconName={iconFavorite}
           isFavorite={isFavorite}
           className="favorite badge icons-group"

packages/client/src/components/RoomSelector/index.js

@@ -9,7 +9,7 @@ import { iconSize32 } from "@docspace/common/utils/image-helpers";
 
 import Loaders from "@docspace/common/components/Loaders";
 
-import Selector from "@docspace/components/selector";
+import { Selector } from "@docspace/shared/components";
 
 const pageCount = 100;
 

packages/client/src/components/SharedButton.js

@@ -1,8 +1,8 @@
 import CatalogShareSmallReactSvgUrl from "PUBLIC_DIR/images/catalog.share.small.react.svg?url";
 import CatalogSharedReactSvgUrl from "PUBLIC_DIR/images/catalog.shared.react.svg?url";
 import React from "react";
-import Text from "@docspace/components/text";
-import IconButton from "@docspace/components/icon-button";
+import { Text, IconButton } from "@docspace/shared/components";
+
 import { inject, observer } from "mobx-react";
 
 const SharedButton = ({

packages/client/src/components/SimulatePassword/index.js

@@ -4,8 +4,8 @@ import React, { useState, useEffect, memo } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import InputBlock from "@docspace/components/input-block";
-import globalColors from "@docspace/components/utils/globalColors";
+import { InputBlock } from "@docspace/shared/components";
+import { globalColors } from "@docspace/shared/themes";
 
 const iconColor = globalColors.gray;
 

packages/client/src/components/SmartBanner/index.js

@@ -4,7 +4,7 @@ import { isMobile, isIOS } from "react-device-detect";
 import { inject, observer } from "mobx-react";
 import { useLocation } from "react-router-dom";
 import SmartBanner from "react-smartbanner";
-import { getCookie } from "@docspace/components/utils/cookie";
+import { getCookie } from "@docspace/shared/utils";
 import "./main.css";
 
 const Wrapper = styled.div`

packages/client/src/components/StandaloneComponents/BenefitsContainer.js

@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 import { ReactSVG } from "react-svg";
 import { useTranslation } from "react-i18next";
 
-import Text from "@docspace/components/text";
+import { Text } from "@docspace/shared/components";
 
 import LifetimeLicenseReactSvgUrl from "PUBLIC_DIR/images/lifetime_license.react.svg?url";
 import TechSupportReactSvgUrl from "PUBLIC_DIR/images/tech_support.react.svg?url";

packages/client/src/components/StandaloneComponents/ContactContainer.js

@@ -3,8 +3,8 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { Trans, useTranslation } from "react-i18next";
 
-import Text from "@docspace/components/text";
-import Link from "@docspace/components/link";
+import { Text } from "@docspace/shared/components";
+import { Link } from "@docspace/shared/components";
 
 import { StyledContactComponent } from "./StyledComponent";
 const ContactContainer = (props) => {

packages/client/src/components/dialogs/ArchiveDialog/index.js

@@ -2,9 +2,8 @@ import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import ModalDialogContainer from "../ModalDialogContainer";
-import Text from "@docspace/components/text";
-import Button from "@docspace/components/button";
-import ModalDialog from "@docspace/components/modal-dialog";
+import { Text, Button, ModalDialog } from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 

packages/client/src/components/dialogs/AvatarEditorDialog/editor/avatar-cropper.js

@@ -8,9 +8,8 @@ import { ReactSVG } from "react-svg";
 import throttle from "lodash/throttle";
 import AvatarEditor from "react-avatar-editor";
 
-import Slider from "@docspace/components/slider";
-import IconButton from "@docspace/components/icon-button";
-import { Base } from "@docspace/components/themes";
+import { Slider, IconButton } from "@docspace/shared/components";
+import { Base } from "@docspace/shared/themes";
 
 const StyledAvatarCropper = styled.div`
   max-width: 216px;

packages/client/src/components/dialogs/AvatarEditorDialog/index.js

@@ -3,14 +3,18 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
-import ModalDialog from "@docspace/components/modal-dialog";
-import Text from "@docspace/components/text";
-import Button from "@docspace/components/button";
-import toastr from "@docspace/components/toast/toastr";
+import {
+  ModalDialog,
+  Text,
+  Button,
+  toastr,
+  ImageEditor,
+  AvatarPreview,
+} from "@docspace/shared/components";
+
 import { loadAvatar, deleteAvatar } from "@docspace/common/api/people";
 import { dataUrlToFile } from "@docspace/common/utils/dataUrlToFile";
-import ImageEditor from "@docspace/components/ImageEditor";
-import AvatarPreview from "@docspace/components/ImageEditor/AvatarPreview";
+
 import DefaultUserAvatarMax from "PUBLIC_DIR/images/default_user_photo_size_200-200.png";
 
 const StyledModalDialog = styled(ModalDialog)`

packages/client/src/components/dialogs/BackupCodesDialog/index.js

@@ -1,16 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
+import {
+  ModalDialog,
+  Button,
+  Text,
+  Link,
+  toastr,
+} from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
 import ModalDialogContainer from "../ModalDialogContainer";
-import toastr from "@docspace/components/toast/toastr";
-import Link from "@docspace/components/link";
 
 import { DeviceType } from "@docspace/common/constants";
-import { isDesktop } from "@docspace/components/utils/device";
+import { isDesktop } from "@docspace/shared/utils";
 
 const StyledModal = styled(ModalDialogContainer)`
   .backup-codes-counter {

packages/client/src/components/dialogs/BackupToPublicRoom/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
+import { ModalDialog, Button, Text } from "@docspace/shared/components";
+
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 

packages/client/src/components/dialogs/ChangeEmailDialog/index.js

@@ -1,15 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
-import EmailInput from "@docspace/components/email-input";
-import FieldContainer from "@docspace/components/field-container";
+import {
+  ModalDialog,
+  Button,
+  Text,
+  EmailInput,
+  FieldContainer,
+  toastr,
+} from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
 import ModalDialogContainer from "../ModalDialogContainer";
 import { sendInstructionsToChangeEmail } from "@docspace/common/api/people";
-import toastr from "@docspace/components/toast/toastr";
-import { errorKeys } from "@docspace/components/utils/constants";
+
+import { errorKeys } from "@docspace/shared/constants";
 import { inject, observer } from "mobx-react";
 class ChangeEmailDialogComponent extends React.Component {
   constructor(props) {

packages/client/src/components/dialogs/ChangeNameDialog/index.js

@@ -2,16 +2,22 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
-import ModalDialog from "@docspace/components/modal-dialog";
-import FieldContainer from "@docspace/components/field-container";
-import TextInput from "@docspace/components/text-input";
-import Button from "@docspace/components/button";
-import toastr from "@docspace/components/toast/toastr";
+import {
+  ModalDialog,
+  FieldContainer,
+  TextInput,
+  Button,
+  toastr,
+} from "@docspace/shared/components";
 
 import { ChangeNameContainer } from "./StyledChangeName";
 
 const ChangeNameDialog = (props) => {
-  const { t, ready } = useTranslation(["ProfileAction", "PeopleTranslations", "Common"]);
+  const { t, ready } = useTranslation([
+    "ProfileAction",
+    "PeopleTranslations",
+    "Common",
+  ]);
   const {
     visible,
     onClose,
@@ -81,8 +87,11 @@ const ChangeNameDialog = (props) => {
       isLoading={!ready}
       visible={visible}
       onClose={onCloseAction}
-      displayType="modal">
-      <ModalDialog.Header>{t("PeopleTranslations:NameChangeButton")}</ModalDialog.Header>
+      displayType="modal"
+    >
+      <ModalDialog.Header>
+        {t("PeopleTranslations:NameChangeButton")}
+      </ModalDialog.Header>
       <ModalDialog.Body className="change-name-dialog-body">
         <FieldContainer
           isVertical
@@ -93,7 +102,8 @@ const ChangeNameDialog = (props) => {
             firstName.trim().length === 0
               ? t("Common:RequiredField")
               : t("Common:IncorrectFirstName")
-          }>
+          }
+        >
           <TextInput
             className="first-name"
             scale={true}
@@ -114,8 +124,11 @@ const ChangeNameDialog = (props) => {
           className="field"
           hasError={!isSurnameValid}
           errorMessage={
-            lastName.trim().length === 0 ? t("Common:RequiredField") : t("Common:IncorrectLastName")
-          }>
+            lastName.trim().length === 0
+              ? t("Common:RequiredField")
+              : t("Common:IncorrectLastName")
+          }
+        >
           <TextInput
             className="last-name"
             scale={true}

packages/client/src/components/dialogs/ChangePasswordDialog/index.js

@@ -1,13 +1,16 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Link from "@docspace/components/link";
-import Text from "@docspace/components/text";
+import {
+  ModalDialog,
+  Button,
+  Link,
+  Text,
+  toastr,
+} from "@docspace/shared/components";
+
 import { withTranslation, Trans } from "react-i18next";
 import { sendInstructionsToChangePassword } from "@docspace/common/api/people";
-import toastr from "@docspace/components/toast/toastr";
 
 class ChangePasswordDialogComponent extends React.Component {
   constructor() {

packages/client/src/components/dialogs/ChangePhoneDialog/index.js

@@ -1,10 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
+import { ModalDialog, Button, Text, toastr } from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
-import toastr from "@docspace/components/toast/toastr";
 
 class ChangePhoneDialogComponent extends React.Component {
   constructor(props) {

packages/client/src/components/dialogs/ChangePortalOwnerDialog/StyledDialog.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 
 const StyledOwnerInfo = styled.div`
   display: flex;

packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js

@@ -7,13 +7,15 @@ import { withTranslation } from "react-i18next";
 import PeopleSelector from "SRC_DIR/components/PeopleSelector";
 
 import Filter from "@docspace/common/api/people/filter";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Avatar from "@docspace/components/avatar";
-import Text from "@docspace/components/text";
-import SelectorAddButton from "@docspace/components/selector-add-button";
-import Button from "@docspace/components/button";
-import Link from "@docspace/components/link";
-import toastr from "@docspace/components/toast/toastr";
+import {
+  ModalDialog,
+  Avatar,
+  Text,
+  SelectorAddButton,
+  Button,
+  Link,
+  toastr,
+} from "@docspace/shared/components";
 
 import {
   StyledOwnerInfo,

packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js

@@ -2,9 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { useTranslation, Trans } from "react-i18next";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
-import ModalDialog from "@docspace/components/modal-dialog";
+import { Button, Text, ModalDialog } from "@docspace/shared/components";
+
 import { inject, observer } from "mobx-react";
 import { getConvertedSize } from "@docspace/common/utils";
 

packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js

@@ -1,14 +1,18 @@
 import React, { memo } from "react";
 import PropTypes from "prop-types";
 
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
-import Link from "@docspace/components/link";
+import {
+  ModalDialog,
+  Button,
+  Text,
+  Link,
+  toastr,
+} from "@docspace/shared/components";
+
 import { combineUrl } from "@docspace/common/utils";
 
 import { withTranslation } from "react-i18next";
-import toastr from "@docspace/components/toast/toastr";
+
 import { EmployeeStatus } from "@docspace/common/constants";
 import ModalDialogContainer from "../ModalDialogContainer";
 import { inject, observer } from "mobx-react";

packages/client/src/components/dialogs/ChangeUserTypeDialog/index.js

@@ -1,7 +1,6 @@
 import React from "react";
-import Text from "@docspace/components/text";
-import Button from "@docspace/components/button";
-import ModalDialog from "@docspace/components/modal-dialog";
+import { Text, Button, ModalDialog } from "@docspace/shared/components";
+
 import { withTranslation, Trans } from "react-i18next";
 
 const ChangeUserTypeDialog = ({

packages/client/src/components/dialogs/ConflictResolveDialog/index.js

@@ -1,12 +1,16 @@
 import React, { useState } from "react";
-import ModalDialog from "@docspace/components/modal-dialog";
-import RadioButtonGroup from "@docspace/components/radio-button-group";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
+import {
+  ModalDialog,
+  RadioButtonGroup,
+  Button,
+  Text,
+  toastr,
+} from "@docspace/shared/components";
+
 import { withTranslation, Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { ConflictResolveType } from "@docspace/common/constants";
-import toastr from "@docspace/components/toast/toastr";
+
 import styled from "styled-components";
 
 const StyledModalDialog = styled(ModalDialog)`
@@ -90,7 +94,7 @@ const ConflictResolveDialog = (props) => {
     folderTitle,
     isCopy,
     translations,
-    isUploadConflict
+    isUploadConflict,
   } = conflictResolveDialogData;
 
   const [resolveType, setResolveType] = useState("overwrite");
@@ -178,20 +182,20 @@ const ConflictResolveDialog = (props) => {
   const onAcceptUploadType = async () => {
     const conflictResolveType = getResolveType();
 
-    let data = conflictResolveDialogData.newUploadData
-    
-    if(conflictResolveType === ConflictResolveType.Skip){
-      let filesSize = 0;
-      const newFiles = []
+    let data = conflictResolveDialogData.newUploadData;
 
-      for(let i = 0; i < data.files.length; i++){
-        if(!items.includes(data.files[i].file.name)){
+    if (conflictResolveType === ConflictResolveType.Skip) {
+      let filesSize = 0;
+      const newFiles = [];
+
+      for (let i = 0; i < data.files.length; i++) {
+        if (!items.includes(data.files[i].file.name)) {
           filesSize += data.files[i].file.size;
-          newFiles.push(data.files[i])
+          newFiles.push(data.files[i]);
         }
       }
 
-      data = {...data, files: newFiles, filesSize};
+      data = { ...data, files: newFiles, filesSize };
     }
 
     if (data.files.length === 0) {
@@ -203,11 +207,15 @@ const ConflictResolveDialog = (props) => {
     setSelected("none");
     onClosePanels();
     try {
-      handleFilesUpload(data, t, conflictResolveType === ConflictResolveType.Duplicate )
+      handleFilesUpload(
+        data,
+        t,
+        conflictResolveType === ConflictResolveType.Duplicate
+      );
     } catch (error) {
       toastr.error(error.message ? error.message : error);
     }
-  }
+  };
 
   const radioOptions = [
     {
@@ -352,7 +360,7 @@ export default inject(({ auth, dialogsStore, uploadDataStore, filesStore }) => {
     setRestoreAllPanelVisible,
     setCopyPanelVisible,
     setMoveToPublicRoomVisible,
-    handleFilesUpload
+    handleFilesUpload,
   };
 })(
   withTranslation(["ConflictResolveDialog", "Common"])(

packages/client/src/components/dialogs/ConnectDialog/index.js

@@ -1,11 +1,14 @@
 import React, { useState, useEffect, useCallback } from "react";
-import toastr from "@docspace/components/toast/toastr";
-import Button from "@docspace/components/button";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Checkbox from "@docspace/components/checkbox";
-import TextInput from "@docspace/components/text-input";
-import PasswordInput from "@docspace/components/password-input";
-import FieldContainer from "@docspace/components/field-container";
+import {
+  toastr,
+  Button,
+  ModalDialog,
+  TextInput,
+  Checkbox,
+  PasswordInput,
+  FieldContainer,
+} from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { getOAuthToken } from "@docspace/common/utils";

packages/client/src/components/dialogs/ConvertDialog/index.js

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
 import ModalDialogContainer from "../ModalDialogContainer";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
-import Checkbox from "@docspace/components/checkbox";
+import {
+  ModalDialog,
+  Button,
+  Text,
+  Checkbox,
+} from "@docspace/shared/components";
 import { withTranslation, Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Loaders from "@docspace/common/components/Loaders";

packages/client/src/components/dialogs/ConvertPasswordDialog/index.js

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useEffect } from "react";
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
-import Text from "@docspace/components/text";
+import { ModalDialog, Button, Text, toastr } from "@docspace/shared/components";
+
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import SimulatePassword from "../../SimulatePassword";
@@ -9,7 +8,7 @@ import StyledComponent from "./StyledConvertPasswordDialog";
 import config from "PACKAGE_FILE";
 import { openDocEditor } from "@docspace/client/src/helpers/filesUtils";
 import combineUrl from "@docspace/common/utils/combineUrl";
-import toastr from "@docspace/components/toast/toastr";
+
 let tab, _isMounted;
 const ConvertPasswordDialogComponent = (props) => {
   const {

packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import styled, { css } from "styled-components";
 
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
+import { ModalDialog, Button } from "@docspace/shared/components";
 
 import TagHandler from "./handlers/TagHandler";
 

packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js

@@ -4,8 +4,7 @@ import TagHandler from "./handlers/TagHandler";
 import SetRoomParams from "./sub-components/SetRoomParams";
 import DialogHeader from "./sub-components/DialogHeader";
 
-import ModalDialog from "@docspace/components/modal-dialog";
-import Button from "@docspace/components/button";
+import { ModalDialog, Button } from "@docspace/shared/components";
 
 const EditRoomDialog = ({
   t,

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js

@@ -1,9 +1,7 @@
 import { inject } from "mobx-react";
 import { withTranslation } from "react-i18next";
 
-import Text from "@docspace/components/text";
-import Link from "@docspace/components/link";
-import Avatar from "@docspace/components/avatar";
+import { Text, Link, Avatar } from "@docspace/shared/components";
 
 import * as Styled from "./index.styled";
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.styled.js

@@ -1,4 +1,4 @@
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 import styled from "styled-components";
 
 export const ChangeRoomOwner = styled.div`

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js

@@ -4,7 +4,7 @@ import { withTranslation } from "react-i18next";
 
 import withLoader from "@docspace/client/src/HOCs/withLoader";
 import Loaders from "@docspace/common/components/Loaders";
-import { IconButton } from "@docspace/components";
+import { IconButton } from "@docspace/shared/components";
 
 const DialogHeader = ({ t, isEdit, isChooseRoomType, onArrowClick }) => {
   return (

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js

@@ -8,9 +8,9 @@ import { ReactSVG } from "react-svg";
 import throttle from "lodash/throttle";
 import AvatarEditor from "react-avatar-editor";
 
-import Slider from "@docspace/components/slider";
-import IconButton from "@docspace/components/icon-button";
-import { Base } from "@docspace/components/themes";
+import { Slider, IconButton } from "@docspace/shared/components";
+
+import { Base } from "@docspace/shared/themes";
 
 const StyledIconCropper = styled.div`
   max-width: 216px;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js

@@ -3,7 +3,7 @@ import React from "react";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
 
-import { Base } from "@docspace/components/themes";
+import { Base } from "@docspace/shared/themes";
 
 const StyledPrivacyLimitationsWarning = styled.div`
   box-sizing: border-box;