sceyt-chat-react-uikit 1.7.8-beta.13 → 1.7.8-beta.14

package/index.modern.js

@@ -9334,7 +9334,10 @@ var initialState = {
   draftIsRemoved: '',
   channelInviteKeys: {},
   joinableChannel: null,
-  channelInviteKeyAvailable: true
+  channelInviteKeyAvailable: true,
+  mutualChannels: [],
+  mutualChannelsHasNext: false,
+  mutualChannelsLoadingState: null
 };
 var channelSlice = createSlice({
   name: 'channels',
@@ -9643,6 +9646,19 @@ var channelSlice = createSlice({
     },
     setChannelInviteKeyAvailable: function setChannelInviteKeyAvailable(state, action) {
       state.channelInviteKeyAvailable = action.payload.available;
+    },
+    setMutualChannels: function setMutualChannels(state, action) {
+      if (action.payload.channels.length === 0 && state.mutualChannels.length > 0) {
+        state.mutualChannels = [];
+      } else {
+        state.mutualChannels = [].concat(state.mutualChannels, action.payload.channels);
+      }
+    },
+    setMutualChannelsHasNext: function setMutualChannelsHasNext(state, action) {
+      state.mutualChannelsHasNext = action.payload.hasNext;
+    },
+    setMutualChannelsLoadingState: function setMutualChannelsLoadingState(state, action) {
+      state.mutualChannelsLoadingState = action.payload.state;
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -9688,7 +9704,10 @@ var _channelSlice$actions = channelSlice.actions,
   setDraftIsRemoved = _channelSlice$actions.setDraftIsRemoved,
   setChannelInviteKeys = _channelSlice$actions.setChannelInviteKeys,
   setJoinableChannel = _channelSlice$actions.setJoinableChannel,
-  setChannelInviteKeyAvailable = _channelSlice$actions.setChannelInviteKeyAvailable;
+  setChannelInviteKeyAvailable = _channelSlice$actions.setChannelInviteKeyAvailable,
+  setMutualChannels = _channelSlice$actions.setMutualChannels,
+  setMutualChannelsHasNext = _channelSlice$actions.setMutualChannelsHasNext,
+  setMutualChannelsLoadingState = _channelSlice$actions.setMutualChannelsLoadingState;
 var ChannelReducer = channelSlice.reducer;
 
 var CREATE_CHANNEL = 'CREATE_CHANNEL';
@@ -9728,6 +9747,8 @@ var DESTROY_SESSION = 'DESTROY_SESSION';
 var GET_CHANNEL_BY_INVITE_KEY = 'GET_CHANNEL_BY_INVITE_KEY';
 var JOIN_TO_CHANNEL_WITH_INVITE_KEY = 'JOIN_TO_CHANNEL_WITH_INVITE_KEY';
 var SET_MESSAGE_RETENTION_PERIOD = 'SET_MESSAGE_RETENTION_PERIOD';
+var GET_CHANNELS_WITH_USER = 'GET_CHANNELS_WITH_USER';
+var LOAD_MORE_MUTUAL_CHANNELS = 'LOAD_MORE_MUTUAL_CHANNELS';
 var CHANNEL_EVENT_TYPES = {
   POLL_ADDED: 'POLL_ADDED',
   POLL_DELETED: 'POLL_DELETED',
@@ -12898,6 +12919,37 @@ var setMessageRetentionPeriodAC = function setMessageRetentionPeriodAC(channelId
     }
   };
 };
+var getChannelsWithUserAC = function getChannelsWithUserAC(userId) {
+  return {
+    type: GET_CHANNELS_WITH_USER,
+    payload: {
+      userId: userId
+    }
+  };
+};
+var setMutualChannelsAC = function setMutualChannelsAC(channels) {
+  return setMutualChannels({
+    channels: channels
+  });
+};
+var setMutualChannelsHasNextAC = function setMutualChannelsHasNextAC(hasNext) {
+  return setMutualChannelsHasNext({
+    hasNext: hasNext
+  });
+};
+var setMutualChannelsLoadingStateAC = function setMutualChannelsLoadingStateAC(state) {
+  return setMutualChannelsLoadingState({
+    state: state
+  });
+};
+var loadMoreMutualChannelsAC = function loadMoreMutualChannelsAC(limit) {
+  return {
+    type: LOAD_MORE_MUTUAL_CHANNELS,
+    payload: {
+      limit: limit
+    }
+  };
+};
 
 var getUsersAC = function getUsersAC(params) {
   return {
@@ -16115,7 +16167,9 @@ var _marked$2 = /*#__PURE__*/_regenerator().m(createChannel),
   _marked33 = /*#__PURE__*/_regenerator().m(getChannelByInviteKey),
   _marked34 = /*#__PURE__*/_regenerator().m(joinChannelWithInviteKey),
   _marked35 = /*#__PURE__*/_regenerator().m(setMessageRetentionPeriod),
-  _marked36 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
+  _marked36 = /*#__PURE__*/_regenerator().m(getChannelsWithUser),
+  _marked37 = /*#__PURE__*/_regenerator().m(loadMoreMutualChannels),
+  _marked38 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
 function createChannel(action) {
   var payload, channelData, dontCreateIfNotExists, callback, SceytChatClient, createChannelData, fileToUpload, isSelfChannel, channelIsExistOnAllChannels, createdChannel, allChannels, memberId, checkChannelExist, messageToSend, _allChannels, _memberId, _t;
   return _regenerator().w(function (_context) {
@@ -18468,124 +18522,250 @@ function setMessageRetentionPeriod(action) {
     }
   }, _marked35, null, [[0, 5]]);
 }
-function ChannelsSaga() {
+function getChannelsWithUser(action) {
+  var payload, userId, _SceytChatClient10, channelsQueryBuilder, channelsQuery, channelsData, channels, _t36;
   return _regenerator().w(function (_context36) {
-    while (1) switch (_context36.n) {
+    while (1) switch (_context36.p = _context36.n) {
       case 0:
         _context36.n = 1;
-        return takeLatest(CREATE_CHANNEL, createChannel);
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
         _context36.n = 2;
-        return takeLatest(GET_CHANNELS, getChannels);
+        return put(setMutualChannelsAC([]));
       case 2:
+        _context36.p = 2;
+        payload = action.payload;
+        userId = payload.userId;
+        _SceytChatClient10 = getClient();
+        channelsQueryBuilder = new _SceytChatClient10.ChannelListQueryBuilder();
+        channelsQueryBuilder.memberCount(0);
+        channelsQueryBuilder.setMutualWithUserId(userId);
+        channelsQueryBuilder.limit(15);
         _context36.n = 3;
-        return takeLatest(SEARCH_CHANNELS, searchChannels);
+        return call(channelsQueryBuilder.build);
       case 3:
+        channelsQuery = _context36.v;
+        query.mutualChannelsQuery = channelsQuery;
         _context36.n = 4;
-        return takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
+        return call(channelsQuery.loadNextPage);
       case 4:
+        channelsData = _context36.v;
+        channels = channelsData.channels;
+        if (!channelsData.hasNext) {
+          _context36.n = 6;
+          break;
+        }
         _context36.n = 5;
-        return takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
+        return put(setMutualChannelsHasNextAC(true));
       case 5:
-        _context36.n = 6;
-        return takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
+        _context36.n = 7;
+        break;
       case 6:
         _context36.n = 7;
-        return takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
+        return put(setMutualChannelsHasNextAC(false));
       case 7:
         _context36.n = 8;
-        return takeEvery(SWITCH_CHANNEL, switchChannel);
+        return put(setMutualChannelsAC(channels));
       case 8:
-        _context36.n = 9;
-        return takeLatest(LEAVE_CHANNEL, leaveChannel);
-      case 9:
         _context36.n = 10;
-        return takeLatest(DELETE_CHANNEL, deleteChannel);
+        break;
+      case 9:
+        _context36.p = 9;
+        _t36 = _context36.v;
+        log.error('ERROR in get groups in common', _t36);
       case 10:
+        _context36.p = 10;
         _context36.n = 11;
-        return takeLatest(BLOCK_CHANNEL, blockChannel);
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADED));
       case 11:
-        _context36.n = 12;
-        return takeLatest(UPDATE_CHANNEL, updateChannel);
+        return _context36.f(10);
       case 12:
-        _context36.n = 13;
-        return takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
+        return _context36.a(2);
+    }
+  }, _marked36, null, [[2, 9, 10, 12]]);
+}
+function loadMoreMutualChannels(action) {
+  var payload, limit, mutualChannelsQuery, channelsData, _t37;
+  return _regenerator().w(function (_context37) {
+    while (1) switch (_context37.p = _context37.n) {
+      case 0:
+        _context37.n = 1;
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADING));
+      case 1:
+        _context37.p = 1;
+        payload = action.payload;
+        limit = payload.limit;
+        mutualChannelsQuery = query.mutualChannelsQuery;
+        if (mutualChannelsQuery) {
+          _context37.n = 2;
+          break;
+        }
+        return _context37.a(2);
+      case 2:
+        if (limit) {
+          mutualChannelsQuery.limit = limit;
+        }
+        _context37.n = 3;
+        return call(mutualChannelsQuery.loadNextPage);
+      case 3:
+        channelsData = _context37.v;
+        if (!channelsData.hasNext) {
+          _context37.n = 5;
+          break;
+        }
+        _context37.n = 4;
+        return put(setMutualChannelsHasNextAC(true));
+      case 4:
+        _context37.n = 6;
+        break;
+      case 5:
+        _context37.n = 6;
+        return put(setMutualChannelsHasNextAC(false));
+      case 6:
+        _context37.n = 7;
+        return put(setMutualChannelsAC(channelsData.channels));
+      case 7:
+        _context37.n = 9;
+        break;
+      case 8:
+        _context37.p = 8;
+        _t37 = _context37.v;
+        log.error('ERROR in load more mutual channels', _t37);
+      case 9:
+        _context37.p = 9;
+        _context37.n = 10;
+        return put(setMutualChannelsLoadingStateAC(LOADING_STATE.LOADED));
+      case 10:
+        return _context37.f(9);
+      case 11:
+        return _context37.a(2);
+    }
+  }, _marked37, null, [[1, 8, 9, 11]]);
+}
+function ChannelsSaga() {
+  return _regenerator().w(function (_context38) {
+    while (1) switch (_context38.n) {
+      case 0:
+        _context38.n = 1;
+        return takeLatest(CREATE_CHANNEL, createChannel);
+      case 1:
+        _context38.n = 2;
+        return takeLatest(GET_CHANNELS, getChannels);
+      case 2:
+        _context38.n = 3;
+        return takeLatest(SEARCH_CHANNELS, searchChannels);
+      case 3:
+        _context38.n = 4;
+        return takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
+      case 4:
+        _context38.n = 5;
+        return takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
+      case 5:
+        _context38.n = 6;
+        return takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
+      case 6:
+        _context38.n = 7;
+        return takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
+      case 7:
+        _context38.n = 8;
+        return takeLatest(GET_CHANNELS_WITH_USER, getChannelsWithUser);
+      case 8:
+        _context38.n = 9;
+        return takeLatest(LOAD_MORE_MUTUAL_CHANNELS, loadMoreMutualChannels);
+      case 9:
+        _context38.n = 10;
+        return takeEvery(SWITCH_CHANNEL, switchChannel);
+      case 10:
+        _context38.n = 11;
+        return takeLatest(LEAVE_CHANNEL, leaveChannel);
+      case 11:
+        _context38.n = 12;
+        return takeLatest(DELETE_CHANNEL, deleteChannel);
+      case 12:
+        _context38.n = 13;
+        return takeLatest(BLOCK_CHANNEL, blockChannel);
       case 13:
-        _context36.n = 14;
-        return takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
+        _context38.n = 14;
+        return takeLatest(UPDATE_CHANNEL, updateChannel);
       case 14:
-        _context36.n = 15;
-        return takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
+        _context38.n = 15;
+        return takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
       case 15:
-        _context36.n = 16;
-        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
+        _context38.n = 16;
+        return takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
       case 16:
-        _context36.n = 17;
-        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
+        _context38.n = 17;
+        return takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
       case 17:
-        _context36.n = 18;
-        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
+        _context38.n = 18;
+        return takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
       case 18:
-        _context36.n = 19;
-        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
+        _context38.n = 19;
+        return takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
       case 19:
-        _context36.n = 20;
-        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
+        _context38.n = 20;
+        return takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
       case 20:
-        _context36.n = 21;
-        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
+        _context38.n = 21;
+        return takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
       case 21:
-        _context36.n = 22;
-        return takeLatest(SEND_TYPING, sendTyping);
+        _context38.n = 22;
+        return takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 22:
-        _context36.n = 23;
-        return takeLatest(SEND_RECORDING, sendRecording);
+        _context38.n = 23;
+        return takeLatest(CHECK_USER_STATUS, checkUsersStatus);
       case 23:
-        _context36.n = 24;
-        return takeLatest(PIN_CHANNEL, pinChannel);
+        _context38.n = 24;
+        return takeLatest(SEND_TYPING, sendTyping);
       case 24:
-        _context36.n = 25;
-        return takeLatest(UNPIN_CHANNEL, unpinChannel);
+        _context38.n = 25;
+        return takeLatest(SEND_RECORDING, sendRecording);
       case 25:
-        _context36.n = 26;
-        return takeLatest(CLEAR_HISTORY, clearHistory);
+        _context38.n = 26;
+        return takeLatest(PIN_CHANNEL, pinChannel);
       case 26:
-        _context36.n = 27;
-        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
+        _context38.n = 27;
+        return takeLatest(UNPIN_CHANNEL, unpinChannel);
       case 27:
-        _context36.n = 28;
-        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
+        _context38.n = 28;
+        return takeLatest(CLEAR_HISTORY, clearHistory);
       case 28:
-        _context36.n = 29;
-        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
+        _context38.n = 29;
+        return takeLatest(JOIN_TO_CHANNEL, joinChannel);
       case 29:
-        _context36.n = 30;
-        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
+        _context38.n = 30;
+        return takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
       case 30:
-        _context36.n = 31;
-        return takeLatest(CREATE_CHANNEL_INVITE_KEY, createChannelInviteKey);
+        _context38.n = 31;
+        return takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
       case 31:
-        _context36.n = 32;
-        return takeLatest(UPDATE_CHANNEL_INVITE_KEY, updateChannelInviteKey);
+        _context38.n = 32;
+        return takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
       case 32:
-        _context36.n = 33;
-        return takeLatest(REGENERATE_CHANNEL_INVITE_KEY, regenerateChannelInviteKey);
+        _context38.n = 33;
+        return takeLatest(CREATE_CHANNEL_INVITE_KEY, createChannelInviteKey);
       case 33:
-        _context36.n = 34;
-        return takeLatest(GET_CHANNEL_INVITE_KEYS, getChannelInviteKeys);
+        _context38.n = 34;
+        return takeLatest(UPDATE_CHANNEL_INVITE_KEY, updateChannelInviteKey);
       case 34:
-        _context36.n = 35;
-        return takeLatest(GET_CHANNEL_BY_INVITE_KEY, getChannelByInviteKey);
+        _context38.n = 35;
+        return takeLatest(REGENERATE_CHANNEL_INVITE_KEY, regenerateChannelInviteKey);
       case 35:
-        _context36.n = 36;
-        return takeLatest(JOIN_TO_CHANNEL_WITH_INVITE_KEY, joinChannelWithInviteKey);
+        _context38.n = 36;
+        return takeLatest(GET_CHANNEL_INVITE_KEYS, getChannelInviteKeys);
       case 36:
-        _context36.n = 37;
-        return takeLatest(SET_MESSAGE_RETENTION_PERIOD, setMessageRetentionPeriod);
+        _context38.n = 37;
+        return takeLatest(GET_CHANNEL_BY_INVITE_KEY, getChannelByInviteKey);
       case 37:
-        return _context36.a(2);
+        _context38.n = 38;
+        return takeLatest(JOIN_TO_CHANNEL_WITH_INVITE_KEY, joinChannelWithInviteKey);
+      case 38:
+        _context38.n = 39;
+        return takeLatest(SET_MESSAGE_RETENTION_PERIOD, setMessageRetentionPeriod);
+      case 39:
+        return _context38.a(2);
     }
-  }, _marked36);
+  }, _marked38);
 }
 
 function rgbaToThumbHash(w, h, rgba) {
@@ -23333,6 +23513,15 @@ var joinableChannelSelector = function joinableChannelSelector(store) {
 var channelInviteKeyAvailableSelector = function channelInviteKeyAvailableSelector(store) {
   return store.ChannelReducer.channelInviteKeyAvailable;
 };
+var mutualChannelsSelector = function mutualChannelsSelector(store) {
+  return store.ChannelReducer.mutualChannels;
+};
+var mutualChannelsHasNextSelector = function mutualChannelsHasNextSelector(store) {
+  return store.ChannelReducer.mutualChannelsHasNext;
+};
+var mutualChannelsLoadingStateSelector = function mutualChannelsLoadingStateSelector(store) {
+  return store.ChannelReducer.mutualChannelsLoadingState;
+};
 
 var activeChannelMembersSelector = function activeChannelMembersSelector(store) {
   return store.MembersReducer.activeChannelMembers;
@@ -44146,7 +44335,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
     backgroundColor: accentColor,
     iconColor: textOnPrimary
-  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
+  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, {
+    linkColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
   }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.body && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? MessageTextFormat({
     text: messageForReply.body,
@@ -44394,7 +44585,9 @@ var CloseEditMode = styled.span(_templateObject6$q || (_templateObject6$q = _tag
   return props.color;
 });
 var UserName$1 = styled.span(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
-var ReplyMessageBody$1 = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var ReplyMessageBody$1 = styled.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  a {\n    color: ", ";\n  }\n"])), function (props) {
+  return props.linkColor;
+});
 var EditReplyMessageHeader = styled.h4(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.color;
 });
@@ -44792,6 +44985,29 @@ function SvgChevronBottom(props) {
   })));
 }
 
+var _path$1v;
+function _extends$1z() {
+  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1z.apply(null, arguments);
+}
+function SvgUsers(props) {
+  return /*#__PURE__*/createElement$1("svg", _extends$1z({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1v || (_path$1v = /*#__PURE__*/createElement$1("path", {
+    d: "M13.75 10.625c1.911 0 5.416.714 5.416 3.571 0 1.25-.318 1.429-.956 1.429h-5.075c.132-.407.198-.885.198-1.429 0-1.436-.526-2.556-1.393-3.385a9.226 9.226 0 011.81-.186zm-7.5 0c1.911 0 5.416.714 5.416 3.571 0 1.25-.318 1.429-.956 1.429H1.79c-.637 0-.956-.179-.956-1.429 0-2.857 3.505-3.571 5.417-3.571zm0-6.25a2.5 2.5 0 11.001 4.998 2.5 2.5 0 01-.001-4.998zm7.5 0a2.5 2.5 0 11.001 4.998 2.5 2.5 0 01-.001-4.998z",
+    fill: "#818C99"
+  })));
+}
+
 var _templateObject$S, _templateObject2$N, _templateObject3$G;
 function NetworkErrorPopup(_ref) {
   var theme = _ref.theme,
@@ -45097,7 +45313,185 @@ var CustomDropdownOptionsUl = styled(DropdownOptionsUl)(_templateObject7$q || (_
 }, CustomDropdownOptionLi);
 var SetButton = styled(Button)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  width: 57px;\n  height: 36px;\n  min-width: 57px;\n  max-width: 57px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
-var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
+var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o;
+var formatMemberCount = function formatMemberCount(count, channelType) {
+  if (channelType === DEFAULT_CHANNEL_TYPE.BROADCAST || channelType === DEFAULT_CHANNEL_TYPE.PUBLIC) {
+    return count + " " + (count > 1 ? 'subscribers' : 'subscriber');
+  }
+  return count + " " + (count > 1 ? 'members' : 'member');
+};
+var MutualChannelItem = function MutualChannelItem(_ref) {
+  var channel = _ref.channel,
+    backgroundHovered = _ref.backgroundHovered,
+    textPrimary = _ref.textPrimary,
+    textSecondary = _ref.textSecondary,
+    currentUser = _ref.currentUser,
+    contactsMap = _ref.contactsMap,
+    getFromContacts = _ref.getFromContacts,
+    iconPrimary = _ref.iconPrimary,
+    activeChannel = _ref.activeChannel,
+    togglePopup = _ref.togglePopup;
+  var dispatch = useDispatch();
+  var setSelectedChannel = function setSelectedChannel(channel) {
+    if (activeChannel.id !== channel.id) {
+      dispatch(clearMessagesAC());
+      dispatch(switchChannelActionAC(channel));
+      togglePopup();
+    }
+  };
+  var isDirectChannel = useMemo(function () {
+    return channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
+  }, [channel.type]);
+  var directChannelUser = useMemo(function () {
+    return isDirectChannel && channel.members.find(function (member) {
+      return member.id !== (currentUser === null || currentUser === void 0 ? void 0 : currentUser.id) || '';
+    });
+  }, [isDirectChannel, channel.members, currentUser === null || currentUser === void 0 ? void 0 : currentUser.id]);
+  var avatarName = useMemo(function () {
+    return channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : '');
+  }, [channel.subject, isDirectChannel, directChannelUser]);
+  return /*#__PURE__*/React__default.createElement(ChannelItem$1, {
+    key: "mutual-channel-" + channel.id,
+    backgroundHover: backgroundHovered,
+    onClick: function onClick() {
+      return setSelectedChannel(channel);
+    }
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    name: avatarName,
+    image: channel.avatarUrl || (isDirectChannel && directChannelUser ? directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.avatarUrl : ''),
+    size: 40,
+    textSize: 12,
+    setDefaultAvatar: isDirectChannel
+  }), /*#__PURE__*/React__default.createElement(ChannelInfo$4, null, /*#__PURE__*/React__default.createElement(ChannelTitle$1, {
+    color: textPrimary
+  }, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembers$1, {
+    color: textSecondary
+  }, formatMemberCount(channel.memberCount, channel.type))), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+    color: iconPrimary
+  })));
+};
+var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
+  var theme = _ref2.theme,
+    togglePopup = _ref2.togglePopup,
+    user = _ref2.user;
+  var ChatClient = getClient();
+  var currentUser = ChatClient.user;
+  var _useColor = useColors(),
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
+  var contactsMap = useSelector(contactsMapSelector);
+  var getFromContacts = getShowOnlyContactUsers();
+  var dispatch = useDispatch();
+  var mutualChannels = useSelector(mutualChannelsSelector) || [];
+  var mutualChannelsHasNext = useSelector(mutualChannelsHasNextSelector);
+  var mutualChannelsLoadingState = useSelector(mutualChannelsLoadingStateSelector);
+  var connectionStatus = useSelector(connectionStatusSelector);
+  var activeChannel = useSelector(activeChannelSelector);
+  var _useState = useState(false),
+    isScrolling = _useState[0],
+    setIsScrolling = _useState[1];
+  var loadingRef = useRef(false);
+  var isLoading = mutualChannelsLoadingState === LOADING_STATE.LOADING;
+  var isLoadingInitial = mutualChannels.length === 0 && isLoading;
+  useEffect(function () {
+    if (mutualChannelsLoadingState === LOADING_STATE.LOADED) {
+      loadingRef.current = false;
+    }
+  }, [mutualChannelsLoadingState]);
+  var handleScroll = useCallback(function (event) {
+    var target = event.currentTarget;
+    var isNearBottom = target.scrollTop >= target.scrollHeight - target.offsetHeight - 100;
+    if (isNearBottom && mutualChannelsHasNext && !isLoading && !loadingRef.current) {
+      loadingRef.current = true;
+      dispatch(loadMoreMutualChannelsAC(15));
+    }
+  }, [mutualChannelsHasNext, isLoading, dispatch]);
+  useEffect(function () {
+    console.log('connectionStatus', connectionStatus, 'mutualChannels', !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length), 'user', user === null || user === void 0 ? void 0 : user.id);
+    if (connectionStatus === CONNECTION_STATUS.CONNECTED && !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length)) {
+      if (user !== null && user !== void 0 && user.id) {
+        dispatch(getChannelsWithUserAC(user.id));
+      }
+    }
+  }, [connectionStatus, dispatch, user === null || user === void 0 ? void 0 : user.id, mutualChannels === null || mutualChannels === void 0 ? void 0 : mutualChannels.length]);
+  useEffect(function () {
+    return function () {
+      dispatch(setMutualChannelsAC([]));
+    };
+  }, [dispatch]);
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    theme: theme,
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    isLoading: isLoadingInitial,
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: togglePopup
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, "Groups in common"), /*#__PURE__*/React__default.createElement(ChannelsList$1, {
+    onScroll: handleScroll,
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
+    thumbColor: background
+  }, isLoadingInitial ? (/*#__PURE__*/React__default.createElement(LoadingText$1, {
+    color: textSecondary
+  }, "Loading...")) : mutualChannels.length > 0 ? mutualChannels.map(function (channel) {
+    return /*#__PURE__*/React__default.createElement(MutualChannelItem, {
+      key: "mutual-channel-" + channel.id,
+      channel: channel,
+      backgroundHovered: backgroundHovered,
+      textPrimary: textPrimary,
+      textSecondary: textSecondary,
+      currentUser: currentUser,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      iconPrimary: iconPrimary,
+      activeChannel: activeChannel,
+      togglePopup: togglePopup
+    });
+  }) : (/*#__PURE__*/React__default.createElement(EmptyText, {
+    color: textSecondary
+  }, "No groups in common")), isLoading && mutualChannels.length > 0 && /*#__PURE__*/React__default.createElement(LoadingText$1, {
+    color: textSecondary
+  }, "Loading more...")))));
+};
+var ChannelsList$1 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  max-height: 400px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding-right: 8px;\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 3px;\n    opacity: 0.3;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    opacity: 0.6;\n  }\n"])), function (props) {
+  return props.thumbColor;
+});
+var ChannelItem$1 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 6px 2px 6px 6px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.backgroundHover;
+});
+var ChannelInfo$4 = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 12px;\n  min-width: 0;\n"])));
+var ChannelTitle$1 = styled.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 20px;\n  color: ", ";\n  margin-bottom: 4px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])), function (props) {
+  return props.color;
+});
+var ChannelMembers$1 = styled.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var LoadingText$1 = styled.div(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var EmptyText = styled.div(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 40px 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var ChevronRightIconWrapper = styled.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
+
+var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
 var Actions = function Actions(_ref) {
   var _getDisappearingSetti;
   var setActionsHeight = _ref.setActionsHeight,
@@ -45172,7 +45566,12 @@ var Actions = function Actions(_ref) {
     deleteAllMessagesIcon = _ref.deleteAllMessagesIcon,
     deleteAllMessagesTextColor = _ref.deleteAllMessagesTextColor,
     actionItemsFontSize = _ref.actionItemsFontSize,
-    borderColor = _ref.borderColor;
+    borderColor = _ref.borderColor,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -45209,14 +45608,17 @@ var Actions = function Actions(_ref) {
   var _useState9 = useState(false),
     disappearingMessagesPopupOpen = _useState9[0],
     setDisappearingMessagesPopupOpen = _useState9[1];
+  var _useState0 = useState(false),
+    groupsInCommonPopupOpen = _useState0[0],
+    setGroupsInCommonPopupOpen = _useState0[1];
   var _usePermissions = usePermissions(channel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState0 = useState(''),
-    popupButtonText = _useState0[0],
-    setPopupButtonText = _useState0[1];
   var _useState1 = useState(''),
-    popupTitle = _useState1[0],
-    setPopupTitle = _useState1[1];
+    popupButtonText = _useState1[0],
+    setPopupButtonText = _useState1[1];
+  var _useState10 = useState(''),
+    popupTitle = _useState10[0],
+    setPopupTitle = _useState10[1];
   var dispatch = useDispatch();
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
@@ -45309,6 +45711,9 @@ var Actions = function Actions(_ref) {
       dispatch(pinChannelAC(channel.id));
     }
   };
+  var handleToggleGroupsInCommonPopup = function handleToggleGroupsInCommonPopup() {
+    setGroupsInCommonPopupOpen(!groupsInCommonPopupOpen);
+  };
   var handleToggleDisappearingMessagesPopup = function handleToggleDisappearingMessagesPopup() {
     setDisappearingMessagesPopupOpen(!disappearingMessagesPopupOpen);
   };
@@ -45420,7 +45825,7 @@ var Actions = function Actions(_ref) {
     "$isLightMode": backgroundColor === '#FFFFFF'
   }), "Disappearing messages", /*#__PURE__*/React__default.createElement(DisappearingMessagesStatusWrapper, null, /*#__PURE__*/React__default.createElement(DisappearingMessagesStatus, {
     color: textSecondary
-  }, formatDisappearingMessageTime(channel.messageRetentionPeriod)), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+  }, formatDisappearingMessageTime(channel.messageRetentionPeriod)), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper$1, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
     color: iconPrimary
   })))))), showPinChannel && !channel.isMockChannel && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(ActionItem, {
     key: 2,
@@ -45446,7 +45851,17 @@ var Actions = function Actions(_ref) {
     color: markAsReadUnreadTextColor || textPrimary,
     hoverColor: markAsReadUnreadTextColor || textPrimary,
     fontSize: actionItemsFontSize
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markAsUnreadIcon || /*#__PURE__*/React__default.createElement(DefaultMarkAsUnRead, null), " Mark as unread")))), !isDirectChannel && showLeaveChannel && (/*#__PURE__*/React__default.createElement(ActionItem, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, markAsUnreadIcon || /*#__PURE__*/React__default.createElement(DefaultMarkAsUnRead, null), " Mark as unread")))), !isSelfChannel && isDirectChannel && !channel.isMockChannel && showGroupsInCommon && (/*#__PURE__*/React__default.createElement(ActionItem, {
+    key: 4,
+    order: commonGroupsOrder,
+    iconColor: commonGroupsTextColor || iconPrimary,
+    color: commonGroupsIconColor || textPrimary,
+    hoverColor: commonGroupsTextColor || textPrimary,
+    fontSize: actionItemsFontSize,
+    onClick: handleToggleGroupsInCommonPopup
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, commonGroupsIcon || /*#__PURE__*/React__default.createElement(SvgUsers, null), "Groups in common", /*#__PURE__*/React__default.createElement(DisappearingMessagesStatusWrapper, null, /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper$1, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+    color: iconPrimary
+  })))))), !isDirectChannel && showLeaveChannel && (/*#__PURE__*/React__default.createElement(ActionItem, {
     key: 4,
     order: leaveChannelOrder,
     color: leaveChannelTextColor || warningColor,
@@ -45593,20 +46008,26 @@ var Actions = function Actions(_ref) {
     togglePopup: handleToggleDisappearingMessagesPopup,
     handleSetTimer: handleSetDisappearingMessagesTimer,
     currentTimer: channel.messageRetentionPeriod
+  })), groupsInCommonPopupOpen && (/*#__PURE__*/React__default.createElement(GroupsInCommonPopup, {
+    theme: theme,
+    togglePopup: handleToggleGroupsInCommonPopup,
+    user: channel.members.find(function (member) {
+      return member.id !== user.id;
+    })
   })));
 };
-var Container$n = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$n = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 25px 0 22px;\n  cursor: pointer;\n"])));
-var MenuTriggerIcon = styled.span(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var ActionHeader = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 25px 0 22px;\n  cursor: pointer;\n"])));
+var MenuTriggerIcon = styled.span(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
-var ActionsMenu = styled.ul(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var DefaultMutedIcon = styled(SvgUnmuteNotifications)(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose([""])));
-var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled(SvgStar)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu = styled.ul(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var DefaultMutedIcon = styled(SvgUnmuteNotifications)(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled(SvgStar)(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose([""])));
@@ -45638,20 +46059,20 @@ var DisappearingMessagesStatusWrapper = styled.div(_templateObject18$3 || (_temp
 var DisappearingMessagesStatus = styled.span(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-style: normal;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
-var ChevronRightIconWrapper = styled.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
+var ChevronRightIconWrapper$1 = styled.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _rect$2, _rect2, _path$1v;
-function _extends$1z() {
-  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$2, _rect2, _path$1w;
+function _extends$1A() {
+  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1z.apply(null, arguments);
+  }, _extends$1A.apply(null, arguments);
 }
 function SvgAddMember(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1z({
+  return /*#__PURE__*/createElement$1("svg", _extends$1A({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -45671,35 +46092,35 @@ function SvgAddMember(props) {
     stroke: "#000",
     strokeOpacity: 0.08,
     strokeWidth: 0.5
-  })), _path$1v || (_path$1v = /*#__PURE__*/createElement$1("path", {
+  })), _path$1w || (_path$1w = /*#__PURE__*/createElement$1("path", {
     d: "M20 12a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0l-.001-6H13a1 1 0 110-2h5.999L19 13a1 1 0 011-1z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1w;
-function _extends$1A() {
-  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1x;
+function _extends$1B() {
+  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1A.apply(null, arguments);
+  }, _extends$1B.apply(null, arguments);
 }
 function SvgMoreVert(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1A({
+  return /*#__PURE__*/createElement$1("svg", _extends$1B({
     width: 4,
     height: 14,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1w || (_path$1w = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1x || (_path$1x = /*#__PURE__*/createElement$1("path", {
     d: "M.532 11.012c.355-.355.764-.533 1.228-.533.464 0 .874.178 1.228.533.355.354.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 13.113 0 12.704 0 12.24c0-.464.177-.873.532-1.228zm0-5.24c.355-.355.764-.532 1.228-.532.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 7.873 0 7.464 0 7c0-.464.177-.873.532-1.228zm2.456-2.784c-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 2.634 0 2.224 0 1.76 0 1.296.177.887.532.532.887.177 1.296 0 1.76 0c.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.874-.532 1.228z",
     fill: "#9B9DA8"
   })));
 }
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$J;
+var _templateObject$W, _templateObject2$R, _templateObject3$K;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -45802,12 +46223,12 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
+var RolesSelect = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return color;
 });
-var RoleSpan = styled.span(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled.span(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -45844,7 +46265,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -46328,34 +46749,34 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
-var Tabs$1 = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
+var LogoIconCont = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
+var Tabs$1 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
   return p.borderColor;
 });
-var TabButton = styled.button(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
+var TabButton = styled.button(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
   return p.active ? p.activeBackgroundColor : p.backgroundColor;
 }, function (p) {
   return p.active && "\n    box-shadow: 0px 3px 6px -4px #0000001F;\n  ";
 }, function (p) {
   return p.active ? p.activeColor : p.inactiveColor;
 });
-var Description = styled.p(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var Description = styled.p(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var FieldLabel = styled.span(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var LinkField = styled.div(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
+var LinkField = styled.div(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
   return p.borderColor;
 }, function (p) {
   return p.backgroundColor;
 });
-var LinkInput = styled.input(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
+var LinkInput = styled.input(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-var CopyButton = styled.button(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
+var CopyButton = styled.button(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
 var CopyButtonWrapper = styled.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var SectionTitle = styled.h4(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
@@ -46376,7 +46797,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
   return p.color;
 });
 
-var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q, _templateObject9$m;
+var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$u, _templateObject8$r, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -46688,18 +47109,18 @@ var Members = function Members(_ref) {
     channelId: channel.id
   })));
 };
-var Container$o = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled.div(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled.h4(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var Container$o = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled.h4(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var EditMemberIcon = styled.span(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
+var EditMemberIcon = styled.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MembersList = styled.ul(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled.li(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
+var MembersList = styled.ul(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled.li(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -46716,7 +47137,7 @@ var RoleBadge = styled.span(_templateObject9$m || (_templateObject9$m = _taggedT
   return props.backgroundColor;
 });
 
-var _templateObject$Y;
+var _templateObject$Z;
 var MonthHeader = function MonthHeader(_ref) {
   var currentCreatedAt = _ref.currentCreatedAt,
     previousCreatedAt = _ref.previousCreatedAt,
@@ -46741,7 +47162,7 @@ var MonthHeader = function MonthHeader(_ref) {
   }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
   return monthComponent;
 };
-var MonthHeaderContainer = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+var MonthHeaderContainer = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
   return props.padding || '9px 12px';
 }, function (props) {
   return props.fullWidth ? '100%' : 'auto';
@@ -46749,7 +47170,7 @@ var MonthHeaderContainer = styled.div(_templateObject$Y || (_templateObject$Y =
   return props.color;
 });
 
-var _templateObject$Z, _templateObject2$T;
+var _templateObject$_, _templateObject2$U;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -46801,21 +47222,21 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$p = styled.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var MediaItem = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var Container$p = styled.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var MediaItem = styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
-var _rect$3, _path$1x;
-function _extends$1B() {
-  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$3, _path$1y;
+function _extends$1C() {
+  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1B.apply(null, arguments);
+  }, _extends$1C.apply(null, arguments);
 }
 function SvgDocumentIcon(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1B({
+  return /*#__PURE__*/createElement$1("svg", _extends$1C({
     width: 40,
     height: 40,
     fill: "none",
@@ -46826,7 +47247,7 @@ function SvgDocumentIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1x || (_path$1x = /*#__PURE__*/createElement$1("path", {
+  })), _path$1y || (_path$1y = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
@@ -46834,30 +47255,30 @@ function SvgDocumentIcon(props) {
   })));
 }
 
-var _path$1y;
-function _extends$1C() {
-  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1z;
+function _extends$1D() {
+  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1C.apply(null, arguments);
+  }, _extends$1D.apply(null, arguments);
 }
 function SvgDownloadFile(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1C({
+  return /*#__PURE__*/createElement$1("svg", _extends$1D({
     width: 24,
     height: 24,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor"
-  }, props), _path$1y || (_path$1y = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1z || (_path$1z = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12 2a.91.91 0 01.91.91v11.44l2.993-2.993a.91.91 0 011.285 1.286l-4.545 4.545a.91.91 0 01-1.286 0l-4.545-4.545a.909.909 0 111.285-1.286l2.994 2.994V2.909A.91.91 0 0112 2zM2.91 15.636a.91.91 0 01.908.91v1.136a2.5 2.5 0 002.5 2.5h11.364a2.5 2.5 0 002.5-2.5v-1.136a.91.91 0 111.818 0v1.136A4.318 4.318 0 0117.682 22H6.318A4.318 4.318 0 012 17.682v-1.136a.91.91 0 01.91-.91z"
   })));
 }
 
-var _templateObject$_, _templateObject2$U, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$u, _templateObject8$r;
+var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$v, _templateObject8$s;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -46979,30 +47400,30 @@ var Files = function Files(_ref) {
     }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
   }));
 };
-var Container$q = styled.ul(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var DownloadWrapper = styled.a(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
+var Container$q = styled.ul(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var DownloadWrapper = styled.a(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
   return props.visible ? 'visible' : 'hidden';
 }, function (props) {
   return props.iconColor;
 }, function (props) {
   return props.iconColor;
 });
-var ProgressWrapper$2 = styled.span(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var FileIconCont = styled.span(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled.span(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var FileIconCont = styled.span(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var FileHoverIconCont = styled.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled.img(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
-var FileItem = styled.div(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
+var FileThumb = styled.img(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
+var FileItem = styled.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, DownloadWrapper, FileIconCont, FileHoverIconCont);
-var FileSizeAndDate = styled.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
+var FileSizeAndDate = styled.span(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
   return props.fontSize || '13px';
 }, function (props) {
   return props.lineHeight || '16px';
@@ -47010,18 +47431,18 @@ var FileSizeAndDate = styled.span(_templateObject8$r || (_templateObject8$r = _t
   return props.color;
 });
 
-var _rect$4, _path$1z;
-function _extends$1D() {
-  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$4, _path$1A;
+function _extends$1E() {
+  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1D.apply(null, arguments);
+  }, _extends$1E.apply(null, arguments);
 }
 function SvgLinkIcon(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1D({
+  return /*#__PURE__*/createElement$1("svg", _extends$1E({
     width: 40,
     height: 40,
     fill: "none",
@@ -47033,7 +47454,7 @@ function SvgLinkIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1z || (_path$1z = /*#__PURE__*/createElement$1("path", {
+  })), _path$1A || (_path$1A = /*#__PURE__*/createElement$1("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M21.547 11.524a4.9 4.9 0 016.928 6.929l-.01.011-4 4a4.9 4.9 0 01-6.93 0 .9.9 0 011.273-1.273 3.1 3.1 0 004.384 0l3.994-3.994a3.1 3.1 0 00-4.384-4.383l-1.094 1.094a.9.9 0 01-1.272-1.273l1.1-1.1.01-.01zm-6.011 6.011a4.9 4.9 0 016.928 0 .9.9 0 11-1.272 1.273 3.1 3.1 0 00-4.384 0l-4 4-.01.011a3.1 3.1 0 104.383 4.384l.01-.012 1.103-1.1a.9.9 0 111.272 1.272l-1.097 1.096a4.9 4.9 0 11-6.928-6.929l3.995-3.995z",
@@ -47041,7 +47462,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A;
+var _templateObject$10, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -47072,25 +47493,25 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkIconCont = styled.span(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled.span(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled.span(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled.li(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var LinkInfoCont = styled.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled.li(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, LinkIconCont, LinkHoverIconCont);
-var LinkUrl = styled.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
+var LinkUrl = styled.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$10;
+var _templateObject$11;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -47121,20 +47542,20 @@ var Links = function Links(_ref) {
     }));
   }));
 };
-var Container$r = styled.ul(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$r = styled.ul(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 
-var _rect$5, _path$1A;
-function _extends$1E() {
-  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$5, _path$1B;
+function _extends$1F() {
+  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1E.apply(null, arguments);
+  }, _extends$1F.apply(null, arguments);
 }
 function SvgVoicePreview(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1E({
+  return /*#__PURE__*/createElement$1("svg", _extends$1F({
     width: 40,
     height: 40,
     fill: "none",
@@ -47144,24 +47565,24 @@ function SvgVoicePreview(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1A || (_path$1A = /*#__PURE__*/createElement$1("path", {
+  })), _path$1B || (_path$1B = /*#__PURE__*/createElement$1("path", {
     d: "M27.536 18.696c.952.576.952 2.03 0 2.605l-9.918 5.997c-.944.57-2.118-.151-2.118-1.303V14.002c0-1.151 1.174-1.873 2.118-1.303l9.918 5.997z",
     fill: "#fff"
   })));
 }
 
-var _rect$6, _path$1B;
-function _extends$1F() {
-  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$6, _path$1C;
+function _extends$1G() {
+  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1F.apply(null, arguments);
+  }, _extends$1G.apply(null, arguments);
 }
 function SvgVoicePreviewPause(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1F({
+  return /*#__PURE__*/createElement$1("svg", _extends$1G({
     width: 40,
     height: 40,
     fill: "none",
@@ -47171,13 +47592,13 @@ function SvgVoicePreviewPause(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1B || (_path$1B = /*#__PURE__*/createElement$1("path", {
+  })), _path$1C || (_path$1C = /*#__PURE__*/createElement$1("path", {
     d: "M16.962 12.5c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424zm7.5 0c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424z",
     fill: "#fff"
   })));
 }
 
-var _templateObject$11, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B, _templateObject6$w, _templateObject7$v, _templateObject8$s;
+var _templateObject$12, _templateObject2$X, _templateObject3$P, _templateObject4$H, _templateObject5$C, _templateObject6$x, _templateObject7$w, _templateObject8$t;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -47302,32 +47723,32 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled.span(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont$1 = styled.span(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
   return props.fill || 'transparent';
 }, function (props) {
   return props.fill || 'transparent';
 });
-var FileHoverIconCont$1 = styled.span(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled.span(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
   return props.fill || 'transparent';
 }, function (props) {
   return props.fill || 'transparent';
 });
-var FileItem$2 = styled.li(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+var FileItem$2 = styled.li(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, FileIconCont$1, FileHoverIconCont$1);
-var AudioInfo = styled.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
+var AudioInfo = styled.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled.span(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioDate = styled.span(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled.span(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled.span(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
+var AudioSendTime = styled.span(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 });
-var Audio = styled.audio(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio = styled.audio(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$12;
+var _templateObject$13;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -47364,9 +47785,9 @@ var Voices = function Voices(_ref) {
     }));
   }));
 };
-var Container$s = styled.ul(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$s = styled.ul(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 
-var _templateObject$13, _templateObject2$X;
+var _templateObject$14, _templateObject2$Y;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -47517,8 +47938,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$t = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var Container$t = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled.div(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.backgroundColor || 'transparent';
@@ -47536,17 +47957,17 @@ var DetailsTabHeader = styled.div(_templateObject2$X || (_templateObject2$X = _t
   return props.activeTabColor;
 });
 
-var _templateObject$14, _templateObject2$Y, _templateObject3$P, _templateObject4$H;
-var Container$u = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$15, _templateObject2$Z, _templateObject3$Q, _templateObject4$I;
+var Container$u = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
   return props.active ? 'display: block' : 'display: none';
 }, function (props) {
   return "calc(100vh - " + (props.heightOffset ? props.heightOffset + 48 : 48) + "px)";
 }, function (props) {
   return props.backgroundColor;
 });
-var AvatarCont = styled.div(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin-bottom: 4px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .dropdown-body {\n    top: inherit;\n    right: inherit;\n    bottom: -90px;\n  }\n"])));
-var DropDownWrapper = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
-var EditChannelFooter = styled(ButtonBlock)(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
+var AvatarCont = styled.div(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin-bottom: 4px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n  .dropdown-body {\n    top: inherit;\n    right: inherit;\n    bottom: -90px;\n  }\n"])));
+var DropDownWrapper = styled.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled(ButtonBlock)(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -47801,7 +48222,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$15, _templateObject2$Z, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$x, _templateObject7$w, _templateObject8$t, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
+var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject6$y, _templateObject7$x, _templateObject8$u, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -47919,7 +48340,12 @@ var Details = function Details(_ref) {
     backgroundColor = _ref.backgroundColor,
     bordersColor = _ref.bordersColor,
     showPhoneNumber = _ref.showPhoneNumber,
-    QRCodeIcon = _ref.QRCodeIcon;
+    QRCodeIcon = _ref.QRCodeIcon,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -48090,7 +48516,7 @@ var Details = function Details(_ref) {
     size: channelAvatarSize || 72,
     textSize: channelAvatarTextSize || 26,
     setDefaultAvatar: isDirectChannel
-  }), /*#__PURE__*/React__default.createElement(ChannelInfo$4, {
+  }), /*#__PURE__*/React__default.createElement(ChannelInfo$5, {
     direction: avatarAndNameDirection
   }, /*#__PURE__*/React__default.createElement(ChannelNameWrapper, null, /*#__PURE__*/React__default.createElement(ChannelName$1, {
     isDirect: isDirectChannel,
@@ -48185,7 +48611,12 @@ var Details = function Details(_ref) {
     toggleable: false,
     timeOptionsToMuteNotifications: timeOptionsToMuteNotifications,
     actionItemsFontSize: actionItemsFontSize,
-    borderColor: bordersColor
+    borderColor: bordersColor,
+    commonGroupsOrder: commonGroupsOrder,
+    commonGroupsIcon: commonGroupsIcon,
+    commonGroupsIconColor: commonGroupsIconColor,
+    commonGroupsTextColor: commonGroupsTextColor,
+    showGroupsInCommon: showGroupsInCommon
   })), !(activeChannel && activeChannel.isMockChannel) && (/*#__PURE__*/React__default.createElement(DetailsTab, {
     theme: theme,
     channel: activeChannel,
@@ -48232,17 +48663,17 @@ var Details = function Details(_ref) {
     QRCodeIcon: QRCodeIcon
   }))));
 };
-var Container$v = styled.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
+var Container$v = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.mounted && " width: " + (props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px') + ";";
 }, function (props) {
   return props.backgroundColor;
 });
-var ChannelDetailsHeader = styled.div(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
+var ChannelDetailsHeader = styled.div(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  position: relative;\n  height: 64px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  & svg {\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.borderColor;
 });
-var ChatDetails = styled.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var ChatDetails = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose(["\n  //position: relative;\n  width: ", ";\n  //height: ", ";\n  height: ", ";\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
 }, function (props) {
   return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -48251,21 +48682,21 @@ var ChatDetails = styled.div(_templateObject3$Q || (_templateObject3$Q = _tagged
 }, function (props) {
   return props.thumbColor;
 });
-var AboutChannel = styled.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var AboutChannelTitle = styled.h4(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AboutChannel = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled.h4(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AboutChannelText = styled.h3(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var AboutChannelText = styled.h3(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ChannelInfo$4 = styled.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$5 = styled.div(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
   return (!props.direction || props.direction !== 'column') && '16px';
 }, function (props) {
   return props.direction && props.direction === 'column' && '16px';
 }, function (props) {
   return props.direction && props.direction === 'column' && 'center';
 });
-var DetailsHeader = styled.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
+var DetailsHeader = styled.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
   return props.borderColor;
 });
 var ChannelAvatarAndName = styled.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
@@ -48282,7 +48713,7 @@ var ChannelNameWrapper = styled.div(_templateObject1$h || (_templateObject1$h =
 var EditButton = styled.span(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 var PhoneNumberContainer = styled.span(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: text;\n"])));
 
-var _templateObject$16;
+var _templateObject$17;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -48395,7 +48826,12 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     tabItemsMinWidth = _ref.tabItemsMinWidth,
     bordersColor = _ref.bordersColor,
     showPhoneNumber = _ref.showPhoneNumber,
-    QRCodeIcon = _ref.QRCodeIcon;
+    QRCodeIcon = _ref.QRCodeIcon,
+    commonGroupsOrder = _ref.commonGroupsOrder,
+    commonGroupsIcon = _ref.commonGroupsIcon,
+    commonGroupsIconColor = _ref.commonGroupsIconColor,
+    commonGroupsTextColor = _ref.commonGroupsTextColor,
+    showGroupsInCommon = _ref.showGroupsInCommon;
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
   useEffect(function () {
     setShowChannelDetails(true);
@@ -48510,34 +48946,39 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     tabItemsLineHeight: tabItemsLineHeight,
     tabItemsMinWidth: tabItemsMinWidth,
     showPhoneNumber: showPhoneNumber,
-    QRCodeIcon: QRCodeIcon
+    QRCodeIcon: QRCodeIcon,
+    commonGroupsOrder: commonGroupsOrder,
+    commonGroupsIcon: commonGroupsIcon,
+    commonGroupsIconColor: commonGroupsIconColor,
+    commonGroupsTextColor: commonGroupsTextColor,
+    showGroupsInCommon: showGroupsInCommon
   })));
 };
-var DetailsWrapper = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
+var DetailsWrapper = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
 
-var _path$1C;
-function _extends$1G() {
-  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1D;
+function _extends$1H() {
+  return _extends$1H = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1G.apply(null, arguments);
+  }, _extends$1H.apply(null, arguments);
 }
 function SvgChevronDown(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1G({
+  return /*#__PURE__*/createElement$1("svg", _extends$1H({
     width: 32,
     height: 32,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1C || (_path$1C = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1D || (_path$1D = /*#__PURE__*/createElement$1("path", {
     d: "M9.298 12.937a1.056 1.056 0 10-1.374 1.603l7.39 6.333c.395.339.978.339 1.373 0l7.389-6.333a1.056 1.056 0 10-1.374-1.603L16 18.68l-6.702-5.744z",
     fill: "CurrentColor"
   })));
 }
 
-var _templateObject$17, _templateObject2$_;
+var _templateObject$18, _templateObject2$$;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -48620,7 +49061,7 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     isMuted: channel.muted
   }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null)));
 };
-var BottomButton = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", "px;\n\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
+var BottomButton = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", "px;\n\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
   return props.animateFrom === 'bottom' && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) - 130) + "px";
 }, function (props) {
   return props.animateFrom === 'right' && "right: " + (props.rightPosition === undefined ? 16 : props.rightPosition - 100) + "px";
@@ -48631,7 +49072,7 @@ var BottomButton = styled.div(_templateObject$17 || (_templateObject$17 = _tagge
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = styled.span(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n"])), function (props) {
+var UnreadCount$1 = styled.span(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';
@@ -48643,23 +49084,23 @@ var UnreadCount$1 = styled.span(_templateObject2$_ || (_templateObject2$_ = _tag
   return props.textColor || '#fff';
 });
 
-var _path$1D, _path2$d;
-function _extends$1H() {
-  return _extends$1H = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1E, _path2$d;
+function _extends$1I() {
+  return _extends$1I = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1H.apply(null, arguments);
+  }, _extends$1I.apply(null, arguments);
 }
 function SvgMention(props) {
-  return /*#__PURE__*/createElement$1("svg", _extends$1H({
+  return /*#__PURE__*/createElement$1("svg", _extends$1I({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1D || (_path$1D = /*#__PURE__*/createElement$1("path", {
+  }, props), _path$1E || (_path$1E = /*#__PURE__*/createElement$1("path", {
     d: "M12 15.6a3.6 3.6 0 100-7.2 3.6 3.6 0 000 7.2z",
     stroke: "currentColor",
     strokeWidth: 1.8,
@@ -48674,7 +49115,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$18, _templateObject2$$;
+var _templateObject$19, _templateObject2$10;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -48817,7 +49258,7 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     isMuted: channel.muted
   }, channel.newMentionCount ? channel.newMentionCount > 99 ? '99+' : channel.newMentionCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgMention, null)));
 };
-var BottomButton$1 = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", ";\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
+var BottomButton$1 = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  ", ";\n\n  ", ";\n\n  ", ";\n  right: ", ";\n  margin-right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50px;\n  width: 48px;\n  height: 48px;\n  cursor: pointer;\n  z-index: 14;\n\n  & > svg {\n    color: rgba(129, 140, 153, 1);\n  }\n\n  & > span {\n    bottom: 32px;\n    right: 0;\n  }\n"])), function (props) {
   return props.animateFrom === 'bottom' && "bottom: " + (props.bottomOffset + (props.bottomPosition === undefined ? 45 : props.bottomPosition) + (props.showsUnreadMentionsButton ? 60 : 0) - 180) + "px";
 }, function (props) {
   return props.animateFrom === 'right' && "right: " + (props.rightPosition === undefined ? 16 : props.rightPosition - 100) + "px";
@@ -48828,7 +49269,7 @@ var BottomButton$1 = styled.div(_templateObject$18 || (_templateObject$18 = _tag
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled.span(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n"])), function (props) {
+var UnreadCount$2 = styled.span(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';