sceyt-chat-react-uikit 1.7.5-beta.10 → 1.7.5-beta.11

package/index.js

@@ -11086,11 +11086,6 @@ function setPollVotesLoadingStateAC(pollId, optionId, loadingState) {
     loadingState: loadingState
   });
 }
-function setPollVotesInitialCountAC(initialCount) {
-  return setPollVotesInitialCount({
-    initialCount: initialCount
-  });
-}
 
 var initialState$1 = {
   messagesLoadingState: null,
@@ -11680,8 +11675,7 @@ var _messageSlice$actions = messageSlice.actions,
   setPollVotesList = _messageSlice$actions.setPollVotesList,
   addPollVotesToList = _messageSlice$actions.addPollVotesToList,
   setPollVotesLoadingState = _messageSlice$actions.setPollVotesLoadingState,
-  deletePollVotesFromList = _messageSlice$actions.deletePollVotesFromList,
-  setPollVotesInitialCount = _messageSlice$actions.setPollVotesInitialCount;
+  deletePollVotesFromList = _messageSlice$actions.deletePollVotesFromList;
 var MessageReducer = messageSlice.reducer;
 
 var initialState$2 = {
@@ -14340,7 +14334,7 @@ function watchForEvents() {
           };
         });
         _loop = /*#__PURE__*/_regenerator().m(function _callee() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _channel1, pollDetails, messageId, _activeChannelId0, addedVotes, obj, _store$getState$Messa, hasNext, _iterator, _step, vote, _channel10, _pollDetails, _messageId, _activeChannelId1, deletedVotes, _iterator2, _step2, _vote, _channel11, _pollDetails2, _messageId2, _activeChannelId10, retractedVotes, _channel12, _messageId3, _activeChannelId11, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t;
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _channel1, pollDetails, messageId, _activeChannelId0, addedVotes, obj, _store$getState$Messa, key, hasNext, _iterator, _step, vote, _channel10, _pollDetails, _messageId, _activeChannelId1, deletedVotes, _iterator2, _step2, _vote, _channel11, _pollDetails2, _messageId2, _activeChannelId10, retractedVotes, _iterator3, _step3, _vote2, _channel12, _messageId3, _activeChannelId11, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId13, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId14, i, _channel25, _channel26, _channelId2, from, name, status, _t;
           return _regenerator().w(function (_context) {
             while (1) switch (_context.n) {
               case 0:
@@ -14351,7 +14345,7 @@ function watchForEvents() {
                 type = _yield$take.type;
                 args = _yield$take.args;
                 _t = type;
-                _context.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 19 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 21 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 22 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 33 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 43 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 48 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 65 : _t === CHANNEL_EVENT_TYPES.DELETE ? 72 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 74 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 78 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 82 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 89 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 94 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 100 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 103 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 106 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 110 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 113 : _t === CHANNEL_EVENT_TYPES.MUTE ? 119 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 121 : _t === CHANNEL_EVENT_TYPES.PINED ? 123 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 125 : _t === CHANNEL_EVENT_TYPES.HIDE ? 127 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 129 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 131 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 134 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 137 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 144 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 145 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 146 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 155 : 158;
+                _context.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 19 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 21 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 22 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 33 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 43 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 48 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 65 : _t === CHANNEL_EVENT_TYPES.DELETE ? 72 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 74 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 78 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 82 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 89 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 94 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 99 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 104 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 107 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 111 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 114 : _t === CHANNEL_EVENT_TYPES.MUTE ? 120 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 122 : _t === CHANNEL_EVENT_TYPES.PINED ? 124 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 126 : _t === CHANNEL_EVENT_TYPES.HIDE ? 128 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 130 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 132 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 135 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 138 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 145 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 146 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 147 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 156 : 159;
                 break;
               case 2:
                 createdChannel = args.createdChannel;
@@ -14385,7 +14379,7 @@ function watchForEvents() {
                   addChannelToAllChannels(createdChannel);
                 }
               case 6:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 7:
                 channel = args.channel;
                 log.info('channel JOIN ... . ', channel);
@@ -14396,7 +14390,7 @@ function watchForEvents() {
                 if (!_chan2) {
                   addChannelToAllChannels(channel);
                 }
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 9:
                 _channel = args.channel, member = args.member;
                 log.info('channel LEAVE ... ', _channel, member);
@@ -14455,7 +14449,7 @@ function watchForEvents() {
                   mutedTill: _channel.mutedTill
                 });
               case 18:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 19:
                 log.info('channel BLOCK ... ');
                 _channel2 = args.channel;
@@ -14467,10 +14461,10 @@ function watchForEvents() {
                 _context.n = 20;
                 return effects.put(removeChannelAC(_channel2.id));
               case 20:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 21:
                 log.info('channel UNBLOCK ... ');
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 22:
                 _channel3 = args.channel, removedMembers = args.removedMembers;
                 log.info('channel KICK_MEMBERS ... ', removedMembers);
@@ -14540,7 +14534,7 @@ function watchForEvents() {
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 });
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 33:
                 _channel4 = args.channel, addedMembers = args.addedMembers;
                 log.info('channel ADD_MEMBERS ... ', addedMembers);
@@ -14595,7 +14589,7 @@ function watchForEvents() {
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 });
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 43:
                 log.info('channel UPDATE_CHANNEL ... ');
                 updatedChannel = args.updatedChannel;
@@ -14642,7 +14636,7 @@ function watchForEvents() {
                   mutedTill: mutedTill,
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 });
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 48:
                 _channel5 = args.channel, message = args.message;
                 log.info('channel MESSAGE ... id : ', message.id, ', channel.id: ', _channel5.id);
@@ -14807,7 +14801,7 @@ function watchForEvents() {
                 });
                 updateChannelLastMessageOnAllChannels(_channel5.id, _channel5.lastMessage);
               case 64:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 65:
                 channelId = args.channelId, markerList = args.markerList;
                 _context.n = 66;
@@ -14877,7 +14871,7 @@ function watchForEvents() {
                 _context.n = 71;
                 return effects.put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
               case 71:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 72:
                 _channelId = args.channelId;
                 log.info('channel DELETE ... ');
@@ -14886,7 +14880,7 @@ function watchForEvents() {
                 return effects.put(setChannelToRemoveAC(_channel7));
               case 73:
                 deleteChannelFromAllChannels(_channelId);
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 74:
                 _channel8 = args.channel, deletedMessage = args.deletedMessage;
                 _activeChannelId7 = getActiveChannelId();
@@ -14927,7 +14921,7 @@ function watchForEvents() {
                   muted: _channel8.muted,
                   mutedTill: _channel8.mutedTill
                 }, deletedMessage);
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 78:
                 _channel9 = args.channel, _message = args.message;
                 _activeChannelId8 = getActiveChannelId();
@@ -14973,7 +14967,7 @@ function watchForEvents() {
                   });
                 }
                 updateChannelOnAllChannels(_channel9.id, {}, _message);
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 82:
                 _channel0 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
                 isSelf = user.id === SceytChatClient.user.id;
@@ -15047,7 +15041,7 @@ function watchForEvents() {
                 if (checkChannelExistsOnMessagesMap(_channel0.id)) {
                   addReactionToMessageOnMap(_channel0.id, _message2, reaction, true);
                 }
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 89:
                 _channel1 = args.channel, pollDetails = args.pollDetails, messageId = args.messageId;
                 _activeChannelId0 = getActiveChannelId();
@@ -15061,7 +15055,8 @@ function watchForEvents() {
                   _context.n = 92;
                   break;
                 }
-                hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[pollDetails.id]) || false;
+                key = pollDetails.id + "_" + addedVotes[0].optionId;
+                hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[key]) || false;
                 _iterator = _createForOfIteratorHelperLoose(addedVotes);
               case 90:
                 if ((_step = _iterator()).done) {
@@ -15080,14 +15075,14 @@ function watchForEvents() {
                   params: {}
                 }, obj);
                 if (!(_channel1.id === _activeChannelId0)) {
-                  _context.n = 94;
+                  _context.n = 93;
                   break;
                 }
                 updateMessageOnAllMessages(messageId, {}, obj);
                 _context.n = 93;
                 return effects.put(updateMessageAC(messageId, {}, undefined, obj));
               case 93:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 94:
                 _channel10 = args.channel, _pollDetails = args.pollDetails, _messageId = args.messageId;
                 _activeChannelId1 = getActiveChannelId();
@@ -15117,7 +15112,7 @@ function watchForEvents() {
                   votesPerOption: _pollDetails.votesPerOption
                 });
                 if (!(_channel10.id === _activeChannelId1)) {
-                  _context.n = 99;
+                  _context.n = 98;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId, {}, {
@@ -15130,10 +15125,8 @@ function watchForEvents() {
                   votesPerOption: _pollDetails.votesPerOption || {}
                 }));
               case 98:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 99:
-                return _context.a(3, 159);
-              case 100:
                 _channel11 = args.channel, _pollDetails2 = args.pollDetails, _messageId2 = args.messageId;
                 _activeChannelId10 = getActiveChannelId();
                 retractedVotes = (_pollDetails2 === null || _pollDetails2 === void 0 ? void 0 : _pollDetails2.votes) || [];
@@ -15144,24 +15137,39 @@ function watchForEvents() {
                   deletedVotes: retractedVotes,
                   votesPerOption: _pollDetails2.votesPerOption
                 });
-                if (!(_channel11.id === _activeChannelId10)) {
+                if (!(_pollDetails2 !== null && _pollDetails2 !== void 0 && _pollDetails2.id && retractedVotes.length > 0)) {
                   _context.n = 102;
                   break;
                 }
+                _iterator3 = _createForOfIteratorHelperLoose(retractedVotes);
+              case 100:
+                if ((_step3 = _iterator3()).done) {
+                  _context.n = 102;
+                  break;
+                }
+                _vote2 = _step3.value;
+                _context.n = 101;
+                return effects.put(deletePollVotesFromListAC(_pollDetails2.id, _vote2.optionId, [_vote2], _messageId2));
+              case 101:
+                _context.n = 100;
+                break;
+              case 102:
+                if (!(_channel11.id === _activeChannelId10)) {
+                  _context.n = 103;
+                  break;
+                }
                 updateMessageOnAllMessages(_messageId2, {}, {
                   deletedVotes: retractedVotes,
                   votesPerOption: _pollDetails2.votesPerOption || {}
                 });
-                _context.n = 101;
+                _context.n = 103;
                 return effects.put(updateMessageAC(_messageId2, {}, undefined, {
                   deletedVotes: retractedVotes,
                   votesPerOption: _pollDetails2.votesPerOption || {}
                 }));
-              case 101:
-                return _context.a(3, 159);
-              case 102:
-                return _context.a(3, 159);
               case 103:
+                return _context.a(3, 160);
+              case 104:
                 _channel12 = args.channel, _messageId3 = args.messageId;
                 _activeChannelId11 = getActiveChannelId();
                 updateMessageOnMap(_channel12.id, {
@@ -15171,55 +15179,55 @@ function watchForEvents() {
                   closed: true
                 });
                 if (!(_channel12.id === _activeChannelId11)) {
-                  _context.n = 105;
+                  _context.n = 106;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId3, {}, {
                   closed: true
                 });
-                _context.n = 104;
+                _context.n = 105;
                 return effects.put(updateMessageAC(_messageId3, {}, undefined, {
                   closed: true
                 }));
-              case 104:
-                return _context.a(3, 159);
               case 105:
-                return _context.a(3, 159);
+                return _context.a(3, 160);
               case 106:
+                return _context.a(3, 160);
+              case 107:
                 _channel13 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
                 log.info('channel REACTION_DELETED ... ', _channel13);
                 channelFromMap = getChannelFromMap(_channel13.id);
                 _isSelf = _user.id === SceytChatClient.user.id;
                 _activeChannelId12 = getActiveChannelId();
                 if (!(_channel13.id === _activeChannelId12)) {
-                  _context.n = 108;
+                  _context.n = 109;
                   break;
                 }
-                _context.n = 107;
+                _context.n = 108;
                 return effects.put(deleteReactionFromMessageAC(_message3, _reaction, _isSelf));
-              case 107:
-                removeReactionOnAllMessages(_message3, _reaction, true);
               case 108:
+                removeReactionOnAllMessages(_message3, _reaction, true);
+              case 109:
                 _channelUpdateParams = JSON.parse(JSON.stringify(_channel13));
                 if (channelFromMap && channelFromMap.lastReactedMessage && channelFromMap.lastReactedMessage.id === _message3.id) {
                   _channelUpdateParams.lastReactedMessage = null;
                 }
-                _context.n = 109;
+                _context.n = 110;
                 return effects.put(updateChannelDataAC(_channel13.id, _channelUpdateParams));
-              case 109:
+              case 110:
                 updateChannelOnAllChannels(_channel13.id, _channelUpdateParams);
                 if (checkChannelExistsOnMessagesMap(_channel13.id)) {
                   removeReactionToMessageOnMap(_channel13.id, _message3, _reaction, true);
                 }
-                return _context.a(3, 159);
-              case 110:
+                return _context.a(3, 160);
+              case 111:
                 _channel14 = args.channel;
                 if (!_channel14) {
-                  _context.n = 112;
+                  _context.n = 113;
                   break;
                 }
                 _updatedChannel = JSON.parse(JSON.stringify(_channel14));
-                _context.n = 111;
+                _context.n = 112;
                 return effects.put(updateChannelDataAC(_channel14.id, {
                   lastMessage: _channel14.lastMessage,
                   newMessageCount: _channel14.newMessageCount,
@@ -15232,36 +15240,36 @@ function watchForEvents() {
                   lastDisplayedMessageId: _channel14.lastDisplayedMessageId,
                   messageRetentionPeriod: _channel14.messageRetentionPeriod
                 }));
-              case 111:
-                updateChannelOnAllChannels(_channel14.id, _updatedChannel);
               case 112:
-                return _context.a(3, 159);
+                updateChannelOnAllChannels(_channel14.id, _updatedChannel);
               case 113:
+                return _context.a(3, 160);
+              case 114:
                 _channel15 = args.channel;
                 log.info('CLEAR_HISTORY: ', _channel15);
-                _context.n = 114;
+                _context.n = 115;
                 return effects.call(getActiveChannelId);
-              case 114:
+              case 115:
                 _activeChannelId13 = _context.v;
-                _context.n = 115;
+                _context.n = 116;
                 return effects.call(checkChannelExists, _channel15.id);
-              case 115:
+              case 116:
                 channelExist = _context.v;
                 if (!(_channel15.id === _activeChannelId13)) {
-                  _context.n = 117;
+                  _context.n = 118;
                   break;
                 }
-                _context.n = 116;
+                _context.n = 117;
                 return effects.put(clearMessagesAC());
-              case 116:
-                removeAllMessages();
               case 117:
+                removeAllMessages();
+              case 118:
                 removeMessagesFromMap(_channel15.id);
                 if (!channelExist) {
-                  _context.n = 118;
+                  _context.n = 119;
                   break;
                 }
-                _context.n = 118;
+                _context.n = 119;
                 return effects.put(updateChannelDataAC(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15269,7 +15277,7 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 }));
-              case 118:
+              case 119:
                 updateChannelOnAllChannels(_channel15.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -15277,173 +15285,173 @@ function watchForEvents() {
                   muted: _channel15.muted,
                   mutedTill: _channel15.mutedTill
                 });
-                return _context.a(3, 159);
-              case 119:
+                return _context.a(3, 160);
+              case 120:
                 _channel16 = args.channel;
                 log.info('channel MUTE ... ');
-                _context.n = 120;
+                _context.n = 121;
                 return effects.put(updateChannelDataAC(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 }));
-              case 120:
+              case 121:
                 updateChannelOnAllChannels(_channel16.id, {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 });
-                return _context.a(3, 159);
-              case 121:
+                return _context.a(3, 160);
+              case 122:
                 _channel17 = args.channel;
                 log.info('channel UNMUTE ... ');
-                _context.n = 122;
+                _context.n = 123;
                 return effects.put(updateChannelDataAC(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 }));
-              case 122:
+              case 123:
                 updateChannelOnAllChannels(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 });
-                return _context.a(3, 159);
-              case 123:
+                return _context.a(3, 160);
+              case 124:
                 _channel18 = args.channel;
                 log.info('channel PINED ... ');
-                _context.n = 124;
+                _context.n = 125;
                 return effects.put(updateChannelDataAC(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 }, true));
-              case 124:
+              case 125:
                 updateChannelOnAllChannels(_channel18.id, {
                   pinnedAt: _channel18.pinnedAt
                 });
-                return _context.a(3, 159);
-              case 125:
+                return _context.a(3, 160);
+              case 126:
                 _channel19 = args.channel;
                 log.info('channel UNPINED ... ');
-                _context.n = 126;
+                _context.n = 127;
                 return effects.put(updateChannelDataAC(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 }, false, true));
-              case 126:
+              case 127:
                 updateChannelOnAllChannels(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 });
-                return _context.a(3, 159);
-              case 127:
+                return _context.a(3, 160);
+              case 128:
                 _channel20 = args.channel;
                 log.info('channel HIDE ... ');
-                _context.n = 128;
+                _context.n = 129;
                 return effects.put(setChannelToHideAC(_channel20));
-              case 128:
-                return _context.a(3, 159);
               case 129:
+                return _context.a(3, 160);
+              case 130:
                 _channel21 = args.channel;
                 log.info('channel UNHIDE ... ');
-                _context.n = 130;
+                _context.n = 131;
                 return effects.put(setChannelToUnHideAC(_channel21));
-              case 130:
-                return _context.a(3, 159);
               case 131:
+                return _context.a(3, 160);
+              case 132:
                 _channel22 = args.channel;
-                _context.n = 132;
+                _context.n = 133;
                 return effects.put(updateChannelDataAC(_channel22.id, {
                   unread: _channel22.unread,
                   muted: _channel22.muted,
                   mutedTill: _channel22.mutedTill
                 }));
-              case 132:
+              case 133:
                 _groupName5 = getChannelGroupName(_channel22);
-                _context.n = 133;
+                _context.n = 134;
                 return effects.put(updateSearchedChannelDataAC(_channel22.id, {
                   unread: _channel22.unread
                 }, _groupName5));
-              case 133:
+              case 134:
                 updateChannelOnAllChannels(_channel22.id, {
                   unread: _channel22.unread
                 });
-                return _context.a(3, 159);
-              case 134:
+                return _context.a(3, 160);
+              case 135:
                 _channel23 = args.channel;
-                _context.n = 135;
+                _context.n = 136;
                 return effects.put(updateChannelDataAC(_channel23.id, {
                   unread: _channel23.unread,
                   muted: _channel23.muted,
                   mutedTill: _channel23.mutedTill
                 }));
-              case 135:
+              case 136:
                 _groupName6 = getChannelGroupName(_channel23);
-                _context.n = 136;
+                _context.n = 137;
                 return effects.put(updateSearchedChannelDataAC(_channel23.id, {
                   unread: _channel23.unread
                 }, _groupName6));
-              case 136:
+              case 137:
                 updateChannelOnAllChannels(_channel23.id, {
                   unread: _channel23.unread
                 });
-                return _context.a(3, 159);
-              case 137:
+                return _context.a(3, 160);
+              case 138:
                 _channel24 = args.channel, members = args.members;
                 log.info('channel CHANGE_ROLE  channel ... ', _channel24);
                 log.info('channel CHANGE_ROLE  member ... ', members);
-                _context.n = 138;
+                _context.n = 139;
                 return effects.call(getActiveChannelId);
-              case 138:
+              case 139:
                 _activeChannelId14 = _context.v;
                 if (!(_channel24.id === _activeChannelId14)) {
-                  _context.n = 139;
+                  _context.n = 140;
                   break;
                 }
-                _context.n = 139;
+                _context.n = 140;
                 return effects.put(updateMembersAC(members));
-              case 139:
-                i = 0;
               case 140:
+                i = 0;
+              case 141:
                 if (!(i < members.length)) {
-                  _context.n = 143;
+                  _context.n = 144;
                   break;
                 }
                 if (!(members[i].id === SceytChatClient.user.id)) {
-                  _context.n = 142;
+                  _context.n = 143;
                   break;
                 }
-                _context.n = 141;
+                _context.n = 142;
                 return effects.put(updateChannelDataAC(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 }));
-              case 141:
+              case 142:
                 updateChannelOnAllChannels(_channel24.id, {
                   userRole: members[i].role,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 });
-              case 142:
+              case 143:
                 i++;
-                _context.n = 140;
+                _context.n = 141;
                 break;
-              case 143:
-                return _context.a(3, 159);
               case 144:
+                return _context.a(3, 160);
+              case 145:
                 _channel25 = args.channel;
                 log.info('channel frozen  channel ... ', _channel25);
-                return _context.a(3, 159);
-              case 145:
+                return _context.a(3, 160);
+              case 146:
                 _channel26 = args.channel;
                 log.info('channel unfrozen  channel ... ', _channel26);
-                return _context.a(3, 159);
-              case 146:
+                return _context.a(3, 160);
+              case 147:
                 _channelId2 = args.channelId, from = args.from, name = args.name;
                 log.info('channel event received >>>... . . . . . ', args);
                 if (!(from.id === SceytChatClient.user.id)) {
-                  _context.n = 147;
+                  _context.n = 148;
                   break;
                 }
-                return _context.a(3, 159);
-              case 147:
+                return _context.a(3, 160);
+              case 148:
                 if (!(name === 'start_typing')) {
-                  _context.n = 149;
+                  _context.n = 150;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15455,27 +15463,27 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_typing');
                 }, 5000);
-                _context.n = 148;
+                _context.n = 149;
                 return effects.put(switchTypingIndicatorAC(true, _channelId2, from));
-              case 148:
-                _context.n = 154;
-                break;
               case 149:
+                _context.n = 155;
+                break;
+              case 150:
                 if (!(name === 'stop_typing')) {
-                  _context.n = 151;
+                  _context.n = 152;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context.n = 150;
+                _context.n = 151;
                 return effects.put(switchTypingIndicatorAC(false, _channelId2, from));
-              case 150:
-                _context.n = 154;
-                break;
               case 151:
+                _context.n = 155;
+                break;
+              case 152:
                 if (!(name === 'start_recording')) {
-                  _context.n = 153;
+                  _context.n = 154;
                   break;
                 }
                 if (!usersTimeout[_channelId2]) {
@@ -15487,40 +15495,40 @@ function watchForEvents() {
                 usersTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_recording');
                 }, 5000);
-                _context.n = 152;
+                _context.n = 153;
                 return effects.put(switchRecordingIndicatorAC(true, _channelId2, from));
-              case 152:
-                _context.n = 154;
-                break;
               case 153:
+                _context.n = 155;
+                break;
+              case 154:
                 if (!(name === 'stop_recording')) {
-                  _context.n = 154;
+                  _context.n = 155;
                   break;
                 }
                 if (usersTimeout[_channelId2] && usersTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout[_channelId2][from.id]);
                 }
-                _context.n = 154;
+                _context.n = 155;
                 return effects.put(switchRecordingIndicatorAC(false, _channelId2, from));
-              case 154:
-                return _context.a(3, 159);
               case 155:
+                return _context.a(3, 160);
+              case 156:
                 status = args.status;
                 log.info('connection status changed . . . . . ', status);
-                _context.n = 156;
+                _context.n = 157;
                 return effects.put(setConnectionStatusAC(status));
-              case 156:
+              case 157:
                 if (!(status === CONNECTION_STATUS.CONNECTED)) {
-                  _context.n = 157;
+                  _context.n = 158;
                   break;
                 }
-                _context.n = 157;
+                _context.n = 158;
                 return effects.put(getRolesAC());
-              case 157:
-                return _context.a(3, 159);
               case 158:
-                log.warn('UNHANDLED EVENT FROM REDUX-SAGA EVENT-CHANNEL');
+                return _context.a(3, 160);
               case 159:
+                log.warn('UNHANDLED EVENT FROM REDUX-SAGA EVENT-CHANNEL');
+              case 160:
                 return _context.a(2);
             }
           }, _callee);
@@ -29209,24 +29217,22 @@ function _extends$S() {
     return n;
   }, _extends$S.apply(null, arguments);
 }
-function SvgEndVote(props) {
+function SvgRetractVote(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$S({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
-    d: "M11.265 6.802a.783.783 0 111.107 1.108L8.771 11.51a.783.783 0 01-1.108 0L5.627 9.476a.783.783 0 011.108-1.108L8.217 9.85l3.048-3.048z",
+    d: "M10.998 1.875c.746 0 1.35 0 1.84.04.507.041.956.129 1.374.341.404.206.762.488 1.056.826a.748.748 0 01-1.13.98 2.008 2.008 0 00-.605-.472c-.171-.088-.402-.15-.816-.184-.421-.035-.965-.036-1.749-.036H7.032c-.784 0-1.327.001-1.75.036-.413.034-.644.096-.815.184-.378.192-.685.5-.877.877-.088.171-.15.402-.184.816-.035.422-.036.965-.036 1.749v3.936c0 .784.001 1.328.036 1.75.034.413.096.643.184.815.192.378.5.685.877.877.171.088.402.15.816.184.422.035.965.036 1.749.036h3.936c.784 0 1.328-.001 1.75-.036.413-.034.643-.096.815-.184.378-.192.685-.5.877-.877.083-.162.143-.377.178-.75a.749.749 0 011.49.14c-.044.471-.133.894-.334 1.29a3.505 3.505 0 01-1.532 1.53c-.418.213-.867.3-1.373.342-.49.04-1.095.04-1.84.04H7.001c-.746 0-1.35 0-1.84-.04-.507-.041-.956-.129-1.374-.341a3.505 3.505 0 01-1.532-1.532c-.212-.418-.3-.867-.341-1.373-.04-.49-.04-1.095-.04-1.84V7.001c0-.746 0-1.35.04-1.84.041-.507.129-.956.341-1.374a3.506 3.506 0 011.532-1.532c.418-.212.867-.3 1.373-.341.49-.04 1.095-.04 1.84-.04h3.997z",
     fill: "#818C99"
   })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10.987 1.875c.74 0 1.344 0 1.834.04.505.041.958.129 1.38.344a3.524 3.524 0 011.54 1.54c.215.422.303.875.344 1.38.04.49.04 1.093.04 1.834v3.974c0 .74 0 1.344-.04 1.834-.041.505-.129.958-.344 1.38a3.524 3.524 0 01-1.54 1.54c-.422.215-.875.303-1.38.344-.49.04-1.093.04-1.834.04H7.013c-.74 0-1.344 0-1.834-.04-.505-.041-.958-.129-1.38-.344a3.524 3.524 0 01-1.54-1.54c-.215-.422-.303-.875-.344-1.38-.04-.49-.04-1.093-.04-1.834V7.013c0-.74 0-1.344.04-1.834.041-.505.129-.958.344-1.38a3.524 3.524 0 011.54-1.54c.422-.215.875-.303 1.38-.344.49-.04 1.093-.04 1.834-.04h3.974zM7.043 3.441c-.78 0-1.32 0-1.737.034-.408.034-.633.096-.797.18a1.957 1.957 0 00-.855.854c-.083.164-.145.389-.179.797-.034.418-.034.956-.034 1.737v3.914c0 .78 0 1.32.034 1.737.034.408.096.632.18.797.187.368.486.667.854.855.164.083.389.145.797.179.418.034.956.034 1.737.034h3.914c.78 0 1.32 0 1.737-.034.408-.034.632-.096.797-.18.368-.187.667-.486.855-.854.083-.165.145-.389.179-.797.034-.418.034-.956.034-1.737V7.042c0-.78 0-1.318-.034-1.736-.034-.408-.096-.633-.18-.797a1.958 1.958 0 00-.854-.855c-.165-.083-.389-.145-.797-.179-.418-.034-.956-.034-1.737-.034H7.042z",
+    d: "M15.378 5.812c.413 0 .747.335.747.748v1.653a2.322 2.322 0 01-2.322 2.322H8.406L9.6 11.691a.747.747 0 11-1.04 1.074l-2.52-2.44a.748.748 0 010-1.075l2.52-2.44a.748.748 0 111.04 1.074L8.406 9.039h5.397c.456 0 .826-.37.827-.826V6.56c0-.413.335-.748.748-.748z",
     fill: "#818C99"
   })));
 }
 
-var _path$S;
+var _path$S, _path2$6;
 function _extends$T() {
   return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -29236,18 +29242,20 @@ function _extends$T() {
     return n;
   }, _extends$T.apply(null, arguments);
 }
-function SvgCopyIcon(props) {
+function SvgEndVote(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$T({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20.01 20.01",
+    width: 18,
+    height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+    d: "M11.265 6.802a.783.783 0 111.107 1.108L8.771 11.51a.783.783 0 01-1.108 0L5.627 9.476a.783.783 0 011.108-1.108L8.217 9.85l3.048-3.048z",
+    fill: "#818C99"
+  })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M14.121 3.564c-.497-.041-1.134-.042-2.042-.042H6.401a.72.72 0 010-1.439h5.71c.868 0 1.565 0 2.127.046.578.047 1.079.146 1.54.381a3.919 3.919 0 011.711 1.712c.235.46.334.961.382 1.54.046.562.046 1.258.046 2.127v5.71a.72.72 0 01-1.44 0V7.92c0-.908 0-1.545-.041-2.043-.04-.489-.115-.778-.229-1.002a2.48 2.48 0 00-1.083-1.083c-.224-.114-.514-.19-1.003-.23zM5.334 4.882h6.533c.424 0 .785 0 1.081.024.311.025.614.081.904.229.436.222.79.577 1.013 1.013.147.29.203.592.229.903.024.297.024.657.024 1.081v6.534c0 .424 0 .784-.024 1.08-.026.312-.082.615-.229.904a2.32 2.32 0 01-1.013 1.014c-.29.147-.593.203-.904.228-.296.024-.657.024-1.08.024H5.333c-.424 0-.785 0-1.081-.024-.311-.025-.614-.08-.904-.228a2.32 2.32 0 01-1.013-1.014c-.147-.29-.203-.592-.229-.903-.024-.296-.024-.657-.024-1.081V8.132c0-.424 0-.784.024-1.08.026-.312.082-.615.229-.904a2.319 2.319 0 011.013-1.013c.29-.148.593-.204.904-.229.296-.024.657-.024 1.08-.024zM4.37 6.34c-.222.018-.314.05-.367.076a.88.88 0 00-.384.385c-.027.052-.059.144-.077.367-.019.23-.02.532-.02.991v6.478c0 .46.001.761.02.992.018.222.05.314.077.367a.88.88 0 00.384.384c.053.027.145.058.367.076.23.02.532.02.992.02h6.477c.46 0 .761 0 .992-.02.222-.018.314-.05.367-.076a.88.88 0 00.384-.384c.027-.053.059-.145.077-.367.019-.231.02-.533.02-.992V8.16c0-.46-.001-.76-.02-.991-.018-.223-.05-.315-.077-.367a.88.88 0 00-.384-.385c-.053-.027-.145-.058-.367-.076-.23-.02-.532-.02-.992-.02H5.362c-.46 0-.761 0-.992.02z",
-    fill: "CurrentColor"
+    d: "M10.987 1.875c.74 0 1.344 0 1.834.04.505.041.958.129 1.38.344a3.524 3.524 0 011.54 1.54c.215.422.303.875.344 1.38.04.49.04 1.093.04 1.834v3.974c0 .74 0 1.344-.04 1.834-.041.505-.129.958-.344 1.38a3.524 3.524 0 01-1.54 1.54c-.422.215-.875.303-1.38.344-.49.04-1.093.04-1.834.04H7.013c-.74 0-1.344 0-1.834-.04-.505-.041-.958-.129-1.38-.344a3.524 3.524 0 01-1.54-1.54c-.215-.422-.303-.875-.344-1.38-.04-.49-.04-1.093-.04-1.834V7.013c0-.74 0-1.344.04-1.834.041-.505.129-.958.344-1.38a3.524 3.524 0 011.54-1.54c.422-.215.875-.303 1.38-.344.49-.04 1.093-.04 1.834-.04h3.974zM7.043 3.441c-.78 0-1.32 0-1.737.034-.408.034-.633.096-.797.18a1.957 1.957 0 00-.855.854c-.083.164-.145.389-.179.797-.034.418-.034.956-.034 1.737v3.914c0 .78 0 1.32.034 1.737.034.408.096.632.18.797.187.368.486.667.854.855.164.083.389.145.797.179.418.034.956.034 1.737.034h3.914c.78 0 1.32 0 1.737-.034.408-.034.632-.096.797-.18.368-.187.667-.486.855-.854.083-.165.145-.389.179-.797.034-.418.034-.956.034-1.737V7.042c0-.78 0-1.318-.034-1.736-.034-.408-.096-.633-.18-.797a1.958 1.958 0 00-.854-.855c-.165-.083-.389-.145-.797-.179-.418-.034-.956-.034-1.737-.034H7.042z",
+    fill: "#818C99"
   })));
 }
 
@@ -29261,7 +29269,7 @@ function _extends$U() {
     return n;
   }, _extends$U.apply(null, arguments);
 }
-function SvgReplyInThreadIcon(props) {
+function SvgCopyIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$U({
     width: 20,
     height: 20,
@@ -29271,7 +29279,7 @@ function SvgReplyInThreadIcon(props) {
   }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
+    d: "M14.121 3.564c-.497-.041-1.134-.042-2.042-.042H6.401a.72.72 0 010-1.439h5.71c.868 0 1.565 0 2.127.046.578.047 1.079.146 1.54.381a3.919 3.919 0 011.711 1.712c.235.46.334.961.382 1.54.046.562.046 1.258.046 2.127v5.71a.72.72 0 01-1.44 0V7.92c0-.908 0-1.545-.041-2.043-.04-.489-.115-.778-.229-1.002a2.48 2.48 0 00-1.083-1.083c-.224-.114-.514-.19-1.003-.23zM5.334 4.882h6.533c.424 0 .785 0 1.081.024.311.025.614.081.904.229.436.222.79.577 1.013 1.013.147.29.203.592.229.903.024.297.024.657.024 1.081v6.534c0 .424 0 .784-.024 1.08-.026.312-.082.615-.229.904a2.32 2.32 0 01-1.013 1.014c-.29.147-.593.203-.904.228-.296.024-.657.024-1.08.024H5.333c-.424 0-.785 0-1.081-.024-.311-.025-.614-.08-.904-.228a2.32 2.32 0 01-1.013-1.014c-.147-.29-.203-.592-.229-.903-.024-.296-.024-.657-.024-1.081V8.132c0-.424 0-.784.024-1.08.026-.312.082-.615.229-.904a2.319 2.319 0 011.013-1.013c.29-.148.593-.204.904-.229.296-.024.657-.024 1.08-.024zM4.37 6.34c-.222.018-.314.05-.367.076a.88.88 0 00-.384.385c-.027.052-.059.144-.077.367-.019.23-.02.532-.02.991v6.478c0 .46.001.761.02.992.018.222.05.314.077.367a.88.88 0 00.384.384c.053.027.145.058.367.076.23.02.532.02.992.02h6.477c.46 0 .761 0 .992-.02.222-.018.314-.05.367-.076a.88.88 0 00.384-.384c.027-.053.059-.145.077-.367.019-.231.02-.533.02-.992V8.16c0-.46-.001-.76-.02-.991-.018-.223-.05-.315-.077-.367a.88.88 0 00-.384-.385c-.053-.027-.145-.058-.367-.076-.23-.02-.532-.02-.992-.02H5.362c-.46 0-.761 0-.992.02z",
     fill: "CurrentColor"
   })));
 }
@@ -29286,22 +29294,22 @@ function _extends$V() {
     return n;
   }, _extends$V.apply(null, arguments);
 }
-function SvgArrowDown(props) {
+function SvgReplyInThreadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$V({
     width: 20,
-    height: 8,
-    viewBox: "0 0 20 20",
+    height: 20,
+    viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
-    fill: "currentColor"
+    d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
+    fill: "CurrentColor"
   })));
 }
 
-var _path$V, _path2$6, _path3$2;
+var _path$V;
 function _extends$W() {
   return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -29311,18 +29319,43 @@ function _extends$W() {
     return n;
   }, _extends$W.apply(null, arguments);
 }
-function SvgInfoAction(props) {
+function SvgArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$W({
+    width: 20,
+    height: 8,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
+    fill: "currentColor"
+  })));
+}
+
+var _path$W, _path2$7, _path3$2;
+function _extends$X() {
+  return _extends$X = 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$X.apply(null, arguments);
+}
+function SvgInfoAction(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$X({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8.333 1.376a6.957 6.957 0 100 13.914 6.957 6.957 0 000-13.914zM0 8.333a8.333 8.333 0 1116.667 0A8.333 8.333 0 010 8.333z",
     fill: "currentColor"
-  })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M7.008 7.696c0-.38.308-.688.688-.688h.637c.38 0 .688.308.688.688v3.774a.688.688 0 01-.05 1.374h-.638a.688.688 0 01-.688-.688V8.382a.688.688 0 01-.637-.686z",
@@ -29346,6 +29379,7 @@ function MessageActions(_ref) {
     handleReportMessage = _ref.handleReportMessage,
     messageStatus = _ref.messageStatus,
     handleSelectMessage = _ref.handleSelectMessage,
+    handleRetractVote = _ref.handleRetractVote,
     handleEndVote = _ref.handleEndVote,
     handleReplyMessage = _ref.handleReplyMessage,
     handleOpenInfoMessage = _ref.handleOpenInfoMessage,
@@ -29367,6 +29401,7 @@ function MessageActions(_ref) {
     copyIcon = _ref.copyIcon,
     replyIcon = _ref.replyIcon,
     replyInThreadIcon = _ref.replyInThreadIcon,
+    retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     deleteIcon = _ref.deleteIcon,
     selectIcon = _ref.selectIcon,
@@ -29496,7 +29531,16 @@ function MessageActions(_ref) {
     disabledColor: textSecondary,
     bgColor: tooltipBackground,
     direction: 'top'
-  }, copyIconTooltipText || 'Copy', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), !isPollMessage && (/*#__PURE__*/React__default.createElement(Action, {
+  }, copyIconTooltipText || 'Copy', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), isPollMessage && (/*#__PURE__*/React__default.createElement(Action, {
+    onClick: handleRetractVote,
+    iconColor: messageActionIconsColor || iconInactive,
+    hoverBackgroundColor: backgroundHovered,
+    hoverIconColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(ItemNote, {
+    disabledColor: textSecondary,
+    bgColor: tooltipBackground,
+    direction: 'top'
+  }, "Retract Vote", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), retractVoteIcon || /*#__PURE__*/React__default.createElement(SvgRetractVote, null))), !isPollMessage && (/*#__PURE__*/React__default.createElement(Action, {
     onClick: handleEndVote,
     iconColor: messageActionIconsColor || iconInactive,
     hoverBackgroundColor: backgroundHovered,
@@ -29592,18 +29636,18 @@ var Action = styled__default.div(_templateObject3$j || (_templateObject3$j = _ta
   return props.hoverBackgroundColor;
 }, ItemNote);
 
-var _rect$1, _path$W;
-function _extends$X() {
-  return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$1, _path$X;
+function _extends$Y() {
+  return _extends$Y = 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$X.apply(null, arguments);
+  }, _extends$Y.apply(null, arguments);
 }
 function SvgFileIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$X({
+  return /*#__PURE__*/React.createElement("svg", _extends$Y({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -29614,24 +29658,24 @@ function SvgFileIcon(props) {
     height: 40,
     rx: 20,
     fill: "Transparent"
-  })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
+  })), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
     d: "M22.48 10.097c.298.068.56.177.819.338.258.162.468.332 1.015.88l3.372 3.37c.547.548.717.758.879 1.016.161.258.27.521.338.818.069.297.097.565.097 1.34v7.295c0 1.337-.14 1.822-.4 2.311a2.726 2.726 0 01-1.135 1.134c-.489.262-.974.401-2.31.401h-9.31c-1.337 0-1.821-.14-2.31-.4a2.726 2.726 0 01-1.134-1.135c-.262-.489-.401-.974-.401-2.31v-11.31c0-1.337.14-1.821.4-2.31a2.726 2.726 0 011.135-1.134c.489-.262.973-.401 2.31-.401h5.296c.775 0 1.043.028 1.34.097zm-.68 1.827a.3.3 0 00-.3.3V16a.5.5 0 00.5.5h3.776a.3.3 0 00.212-.512l-3.976-3.976a.3.3 0 00-.212-.088z",
     fill: "#fff"
   })));
 }
 
-var _circle$2, _path$X;
-function _extends$Y() {
-  return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$2, _path$Y;
+function _extends$Z() {
+  return _extends$Z = 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$Y.apply(null, arguments);
+  }, _extends$Z.apply(null, arguments);
 }
 function SvgDeleteUpload(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React.createElement("svg", _extends$Z({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
@@ -29644,7 +29688,7 @@ function SvgDeleteUpload(props) {
     fill: "CurrentColor",
     stroke: "#fff",
     strokeWidth: 1.4
-  })), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+  })), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
     d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
     stroke: "#fff",
     strokeWidth: 1.4,
@@ -29653,24 +29697,24 @@ function SvgDeleteUpload(props) {
   })));
 }
 
-var _path$Y;
-function _extends$Z() {
-  return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
+var _path$Z;
+function _extends$_() {
+  return _extends$_ = 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$Z.apply(null, arguments);
+  }, _extends$_.apply(null, arguments);
 }
 function SvgUpload(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Z({
+  return /*#__PURE__*/React.createElement("svg", _extends$_({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.5 20.5a1.5 1.5 0 003 0V7.121l4.44 4.44a1.5 1.5 0 002.12-2.122l-7-7a1.5 1.5 0 00-2.12 0l-7 7a1.5 1.5 0 002.12 2.122l4.44-4.44V20.5zm-9 4.5a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3h-21z",
@@ -29678,18 +29722,18 @@ function SvgUpload(props) {
   })));
 }
 
-var _circle$3, _path$Z;
-function _extends$_() {
-  return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$3, _path$_;
+function _extends$$() {
+  return _extends$$ = 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$_.apply(null, arguments);
+  }, _extends$$.apply(null, arguments);
 }
 function SvgPlayVideo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$_({
+  return /*#__PURE__*/React.createElement("svg", _extends$$({
     width: 56,
     height: 56,
     fill: "none",
@@ -29700,7 +29744,7 @@ function SvgPlayVideo(props) {
     r: 28,
     fill: "#17191C",
     fillOpacity: 0.4
-  })), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+  })), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
     d: "M38.048 26.262c1.27.767 1.27 2.706 0 3.473l-13.224 7.996c-1.258.76-2.824-.202-2.824-1.737V20.003c0-1.535 1.566-2.498 2.824-1.737l13.224 7.996z",
     fill: "#fff"
   })));
@@ -29884,18 +29928,18 @@ var AttachmentImg = styled__default.img(_templateObject7$b || (_templateObject7$
   return props.borderRadius || '6px';
 });
 
-var _circle$4, _path$_;
-function _extends$$() {
-  return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$4, _path$$;
+function _extends$10() {
+  return _extends$10 = 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$$.apply(null, arguments);
+  }, _extends$10.apply(null, arguments);
 }
 function SvgPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$$({
+  return /*#__PURE__*/React.createElement("svg", _extends$10({
     width: 32,
     height: 32,
     viewBox: "0 0 33 33",
@@ -29906,24 +29950,24 @@ function SvgPlay(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
+  })), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
     d: "M21.652 15.022c.714.432.714 1.522 0 1.954l-7.438 4.498c-.708.428-1.589-.114-1.589-.977v-8.995c0-.864.88-1.405 1.589-.977l7.438 4.497z",
     fill: "#fff"
   })));
 }
 
-var _circle$5, _path$$;
-function _extends$10() {
-  return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$5, _path$10;
+function _extends$11() {
+  return _extends$11 = 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$10.apply(null, arguments);
+  }, _extends$11.apply(null, arguments);
 }
 function SvgPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$10({
+  return /*#__PURE__*/React.createElement("svg", _extends$11({
     width: 32,
     height: 32,
     viewBox: "0 0 33 33",
@@ -29934,7 +29978,7 @@ function SvgPause(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+  })), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
     d: "M13.721 10.375c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12h-1.067c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067zm5.625 0c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12H18.28c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067z",
     fill: "#fff"
   })));
@@ -32945,24 +32989,24 @@ var MessageHeaderCont = styled__default.div(_templateObject$y || (_templateObjec
   return props.withPadding && (props.isForwarded ? '8px 0 2px 12px' : !props.isReplied && !props.messageBody ? props.withMediaAttachment ? '8px 0 8px 12px' : '8px 0 0 12px' : '8px 0 0 12px');
 });
 
-var _path$10;
-function _extends$11() {
-  return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$11;
+function _extends$12() {
+  return _extends$12 = 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$11.apply(null, arguments);
+  }, _extends$12.apply(null, arguments);
 }
 function SvgEmojiAnimalIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$11({
+  return /*#__PURE__*/React.createElement("svg", _extends$12({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M7.188 3.875a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm7.938-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zM3.437 7.624a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.312.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm15.438-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm-6.393-.359a3.563 3.563 0 015.567 1.862c.193.672.643 1.24 1.252 1.582a3.25 3.25 0 01-1.548 6.102h-.002c-.435 0-.864-.086-1.265-.253a4.859 4.859 0 00-3.722 0h.001a3.28 3.28 0 01-1.265.253h-.003a3.25 3.25 0 01-1.548-6.101A2.657 2.657 0 006.576 9.94a3.563 3.563 0 011.28-1.862zM10 8.863a2.062 2.062 0 00-1.982 1.493 4.156 4.156 0 01-1.964 2.478l-.008.004a1.75 1.75 0 001.517 3.15l.001-.001a6.358 6.358 0 014.872 0h.001a1.75 1.75 0 001.516-3.15l-.007-.003a4.156 4.156 0 01-1.964-2.478A2.062 2.062 0 0010 8.863z",
@@ -32970,29 +33014,29 @@ function SvgEmojiAnimalIcon(props) {
   })));
 }
 
-var _path$11, _path2$7, _path3$3;
-function _extends$12() {
-  return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$12, _path2$8, _path3$3;
+function _extends$13() {
+  return _extends$13 = 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$12.apply(null, arguments);
+  }, _extends$13.apply(null, arguments);
 }
 function SvgEmojiFoodIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$12({
+  return /*#__PURE__*/React.createElement("svg", _extends$13({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12.143 7.855c0-.395.32-.714.714-.714.779 0 1.501.261 2.033.779.535.52.824 1.249.824 2.078a.714.714 0 11-1.428 0c0-.49-.165-.833-.392-1.054-.23-.224-.579-.375-1.037-.375a.714.714 0 01-.714-.714z",
     fill: "CurrentColor"
-  })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10.083 2.222c-.616.616-.81 1.522-.797 2.367a6.008 6.008 0 00-1.905-.306c-3.438 0-5.952 2.45-5.952 5.858 0 1.644.588 3.698 1.574 5.35.968 1.622 2.465 3.08 4.378 3.08a5.98 5.98 0 002.62-.596 5.98 5.98 0 002.618.597c1.914 0 3.41-1.46 4.378-3.081.986-1.652 1.574-3.706 1.574-5.35 0-3.208-2.229-5.568-5.36-5.833.223-.434.307-.893.34-1.244.049-.518-.016-1.016-.09-1.528-.513-.072-1.01-.14-1.528-.09-.524.048-1.288.213-1.85.776zM7.38 5.712c-2.674 0-4.524 1.835-4.524 4.43 0 1.356.503 3.16 1.372 4.616.887 1.486 2.01 2.385 3.152 2.385.758 0 1.454-.178 2.075-.492a1.206 1.206 0 011.088 0 4.55 4.55 0 002.075.492c1.142 0 2.265-.899 3.152-2.385.869-1.456 1.372-3.26 1.372-4.617 0-2.594-1.85-4.43-4.524-4.43a4.57 4.57 0 00-2.073.493 1.206 1.206 0 01-1.09 0 4.551 4.551 0 00-2.075-.492zm3.341-1.437c.362-.026.776-.105 1.043-.37.265-.267.344-.682.37-1.043-.361.026-.776.104-1.042.37-.266.267-.345.681-.37 1.043z",
@@ -33005,24 +33049,24 @@ function SvgEmojiFoodIcon(props) {
   })));
 }
 
-var _path$12;
-function _extends$13() {
-  return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$13;
+function _extends$14() {
+  return _extends$14 = 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$13.apply(null, arguments);
+  }, _extends$14.apply(null, arguments);
 }
 function SvgEmojiTravelIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$13({
+  return /*#__PURE__*/React.createElement("svg", _extends$14({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M13.763 2.458a2.6 2.6 0 013.748 3.604l-2.135 2.236a5.065 5.065 0 00-.188.204.076.076 0 00-.004.017l.004.03c.008.05.024.116.053.241l1.327 5.754.012.05c.044.189.096.412.079.639-.015.197-.07.39-.162.564-.106.202-.268.364-.406.5l-.036.037-.306.306c-.215.215-.409.408-.58.55-.175.147-.406.309-.705.362a1.46 1.46 0 01-1.124-.266c-.244-.18-.378-.429-.47-.638-.089-.204-.175-.464-.272-.752l-1.2-3.6-1.779 1.78a4.815 4.815 0 00-.172.178.076.076 0 00-.005.015l.001.027c.003.045.01.105.022.22l.141 1.27.005.045c.02.168.042.368.01.567a1.46 1.46 0 01-.172.49c-.1.176-.242.317-.362.437l-.032.032-.152.151-.018.019c-.166.166-.32.32-.46.438-.15.125-.338.258-.583.322a1.46 1.46 0 01-1.007-.1 1.49 1.49 0 01-.508-.43c-.114-.142-.236-.325-.366-.52l-1.22-1.83a4.929 4.929 0 00-.063-.09l-.009-.006a4.655 4.655 0 00-.077-.052l-1.829-1.22a7.783 7.783 0 01-.52-.365 1.492 1.492 0 01-.43-.509 1.46 1.46 0 01-.1-1.006c.065-.245.197-.434.323-.584.117-.14.272-.294.438-.46l.018-.018.152-.152.031-.032c.12-.12.262-.262.437-.362.152-.086.318-.145.49-.172a2.09 2.09 0 01.568.01l.044.005 1.27.141a4.747 4.747 0 00.247.023.075.075 0 00.015-.005 4.867 4.867 0 00.178-.172l1.78-1.78-3.6-1.199a9.48 9.48 0 01-.752-.272c-.209-.092-.457-.226-.638-.47a1.46 1.46 0 01-.265-1.124c.053-.298.215-.53.36-.705.143-.171.337-.365.552-.58l.02-.02.285-.285.037-.037c.136-.137.298-.3.5-.406a1.46 1.46 0 01.564-.161c.228-.018.45.034.64.078l.05.012 5.731 1.323a5.096 5.096 0 00.275.057.075.075 0 00.019-.005 5.146 5.146 0 00.199-.197l2.082-2.152zm2.728.948a1.216 1.216 0 00-1.734.014l-2.082 2.151-.036.037c-.132.137-.288.3-.483.407a1.46 1.46 0 01-.602.178c-.223.016-.442-.036-.627-.079l-.05-.011L5.146 4.78a5.06 5.06 0 00-.279-.059.077.077 0 00-.017.005 5.065 5.065 0 00-.205.197l-.285.285c-.243.243-.39.392-.487.508a.915.915 0 00-.063.083c0 .006.002.012.004.018.016.01.045.025.094.046.138.06.337.128.662.236l4.633 1.544a.692.692 0 01.27 1.146l-2.57 2.57-.032.032c-.12.12-.261.262-.436.362a1.459 1.459 0 01-.492.172 2.09 2.09 0 01-.567-.01l-.044-.005-1.27-.141a4.747 4.747 0 00-.247-.023.075.075 0 00-.015.005 4.867 4.867 0 00-.178.172l-.152.152c-.19.19-.301.302-.375.39a.735.735 0 00-.045.058c0 .008 0 .015.002.023.01.009.027.025.056.048.09.072.22.16.444.309l1.808 1.205.015.01a1.466 1.466 0 01.507.507l.01.016 1.206 1.807c.15.225.237.355.308.444.024.03.04.047.049.056a.076.076 0 00.022.002.723.723 0 00.059-.045c.087-.073.199-.184.39-.375l.151-.151a4.89 4.89 0 00.172-.178.077.077 0 00.005-.016v-.026a4.94 4.94 0 00-.023-.22l-.14-1.27-.006-.045a2.091 2.091 0 01-.01-.567 1.46 1.46 0 01.172-.491c.1-.175.242-.317.363-.437l.031-.031 2.57-2.57a.692.692 0 011.146.27L13.9 15.43c.109.325.175.523.236.662a.9.9 0 00.046.093.073.073 0 00.019.004.917.917 0 00.083-.063c.116-.096.264-.244.507-.486l.285-.285a5.078 5.078 0 00.197-.206.073.073 0 00.005-.017 5.042 5.042 0 00-.058-.279l-1.328-5.753-.011-.049c-.044-.184-.095-.401-.079-.624a1.46 1.46 0 01.152-.553c.1-.199.255-.36.386-.496l.034-.037 2.136-2.236a1.216 1.216 0 00-.02-1.7z",
@@ -33031,17 +33075,17 @@ function SvgEmojiTravelIcon(props) {
 }
 
 var _g, _defs$1;
-function _extends$14() {
-  return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$15() {
+  return _extends$15 = 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$14.apply(null, arguments);
+  }, _extends$15.apply(null, arguments);
 }
 function SvgEmojiObjectIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$14({
+  return /*#__PURE__*/React.createElement("svg", _extends$15({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
@@ -33062,24 +33106,24 @@ function SvgEmojiObjectIcon(props) {
   })))));
 }
 
-var _path$13;
-function _extends$15() {
-  return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$14;
+function _extends$16() {
+  return _extends$16 = 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$15.apply(null, arguments);
+  }, _extends$16.apply(null, arguments);
 }
 function SvgEmojiSymbolsIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$15({
+  return /*#__PURE__*/React.createElement("svg", _extends$16({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8.04 1.76a.75.75 0 01.616.863l-.548 3.294h5.146l.59-3.54a.75.75 0 111.48.246l-.55 3.294h2.31a.75.75 0 010 1.5h-2.56l-.86 5.167h2.586a.75.75 0 110 1.5h-2.837l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H6.745l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H2.083a.75.75 0 010-1.5h3.393l.86-5.167h-3.42a.75.75 0 110-1.5h3.67l.59-3.54a.75.75 0 01.864-.617zm-.182 5.657l-.862 5.167h5.146l.862-5.167H7.858z",
@@ -33087,24 +33131,24 @@ function SvgEmojiSymbolsIcon(props) {
   })));
 }
 
-var _path$14;
-function _extends$16() {
-  return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$15;
+function _extends$17() {
+  return _extends$17 = 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$16.apply(null, arguments);
+  }, _extends$17.apply(null, arguments);
 }
 function SvgEmojiFlagicon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$16({
+  return /*#__PURE__*/React.createElement("svg", _extends$17({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M4.167 3.25a.917.917 0 00-.917.917v7.764c.288-.118.6-.181.917-.181h5.416a.75.75 0 01.53.22l.614.613h5.56L14.329 8.67a.75.75 0 010-.671l1.957-3.915H10.75V7.5a.75.75 0 01-1.5 0V3.25H4.167zm6.56-.667l-.613-.613a.75.75 0 00-.53-.22H4.166A2.417 2.417 0 001.75 4.167V17.5a.75.75 0 001.5 0v-3.333a.917.917 0 01.917-.917h5.106l.613.614c.141.14.332.22.53.22H17.5a.75.75 0 00.67-1.086l-2.332-4.665 2.333-4.664a.75.75 0 00-.671-1.086h-6.773z",
@@ -33600,24 +33644,24 @@ var Emoji = styled__default.li(_templateObject8$c || (_templateObject8$c = _tagg
   return props.hoverBackgroundColor;
 });
 
-var _path$15;
-function _extends$17() {
-  return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$16;
+function _extends$18() {
+  return _extends$18 = 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$17.apply(null, arguments);
+  }, _extends$18.apply(null, arguments);
 }
 function SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$17({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
     d: "M10 3.778c.43 0 .778.348.778.778v4.666h4.666a.778.778 0 110 1.556h-4.666v4.666a.778.778 0 11-1.556 0v-4.666H4.556a.778.778 0 110-1.556h4.666V4.556c0-.43.348-.778.778-.778z",
     fill: "currentColor"
   })));
@@ -33875,61 +33919,174 @@ var MessageStatusUpdated = styled__default.span(_templateObject4$m || (_template
   return props.color;
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a;
-var VotesResultsPopup = function VotesResultsPopup(_ref) {
-  var _poll$options2;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4;
+var POLL_VOTES_LIMIT = 20;
+var AllVotesPopup = function AllVotesPopup(_ref) {
+  var _pollVotesHasMore$key, _poll$votesPerOption;
   var onClose = _ref.onClose,
     poll = _ref.poll,
     messageId = _ref.messageId,
-    initialCount = _ref.initialCount,
-    onViewMoreOption = _ref.onViewMoreOption;
-  var initialVotesCount = React.useMemo(function () {
-    var _poll$options;
-    return initialCount ? initialCount : (poll === null || poll === void 0 ? void 0 : (_poll$options = poll.options) === null || _poll$options === void 0 ? void 0 : _poll$options.length) >= 3 ? 2 : 4;
-  }, [initialCount, poll === null || poll === void 0 ? void 0 : (_poll$options2 = poll.options) === null || _poll$options2 === void 0 ? void 0 : _poll$options2.length]);
-  React.useEffect(function () {
-    if (initialVotesCount) {
-      dispatch(setPollVotesInitialCountAC(initialVotesCount));
-    }
-  }, [initialVotesCount]);
+    optionId = _ref.optionId,
+    optionName = _ref.optionName;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    border = _useColor[THEME_COLORS.BORDER],
-    accent = _useColor[THEME_COLORS.ACCENT];
+    surface1 = _useColor[THEME_COLORS.SURFACE_1];
   var dispatch = useDispatch();
+  var key = poll.id + "_" + optionId;
   var pollVotesList = useSelector(pollVotesListSelector);
   var pollVotesHasMore = useSelector(pollVotesHasMoreSelector);
   var pollVotesLoadingState = useSelector(pollVotesLoadingStateSelector);
+  var allVotes = pollVotesList[key] || [];
+  var hasMore = (_pollVotesHasMore$key = pollVotesHasMore[key]) != null ? _pollVotesHasMore$key : false;
+  var isLoading = pollVotesLoadingState[key] === LOADING_STATE.LOADING;
+  var totalVotes = ((_poll$votesPerOption = poll.votesPerOption) === null || _poll$votesPerOption === void 0 ? void 0 : _poll$votesPerOption[optionId]) || 0;
+  var isLoadingInitial = allVotes.length === 0 && (isLoading || totalVotes > 0);
   React.useEffect(function () {
-    poll.options.forEach(function (option) {
-      var key = poll.id + "_" + option.id;
-      var reduxVotes = pollVotesList[key] || [];
-      if (reduxVotes.length === 0) {
-        var _poll$votesPerOption;
-        var totalVotes = ((_poll$votesPerOption = poll.votesPerOption) === null || _poll$votesPerOption === void 0 ? void 0 : _poll$votesPerOption[option.id]) || 0;
-        if (totalVotes > 0) {
-          dispatch(getPollVotesAC(messageId, poll.id, option.id, initialVotesCount));
-        }
-      }
-    });
+    if (allVotes.length === 0 && totalVotes > 0 && !isLoading) {
+      dispatch(getPollVotesAC(messageId, poll.id, optionId, POLL_VOTES_LIMIT));
+    }
   }, []);
-  var handleViewMore = React.useCallback(function (optionId) {
-    if (onViewMoreOption) {
-      onViewMoreOption(optionId);
+  React.useEffect(function () {
+    if (allVotes.length > 0 && hasMore && !isLoading && allVotes.length < POLL_VOTES_LIMIT) {
+      dispatch(loadMorePollVotesAC(poll.id, optionId, POLL_VOTES_LIMIT));
+    }
+  }, [allVotes.length, hasMore, isLoading, poll.id, optionId, dispatch]);
+  var handleScroll = React.useCallback(function (event) {
+    var target = event.currentTarget;
+    var isNearBottom = target.scrollTop >= target.scrollHeight - target.offsetHeight - 100;
+    if (isNearBottom && hasMore && isLoading === false) {
+      dispatch(loadMorePollVotesAC(poll.id, optionId, POLL_VOTES_LIMIT));
+    }
+  }, [hasMore, isLoading, dispatch, poll.id, optionId]);
+  var formatDate = function formatDate(d) {
+    try {
+      var date = new Date(d);
+      var month = date.toLocaleString(undefined, {
+        month: 'short'
+      });
+      var day = date.getDate();
+      var year = date.getFullYear();
+      return month + " " + day + ", " + year;
+    } catch (_unused) {
+      return '';
     }
-    dispatch(loadMorePollVotesAC(poll.id, optionId, 20));
-  }, [dispatch, poll.id, onViewMoreOption]);
+  };
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '560px',
+    minWidth: '560px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '20px'
+  }, /*#__PURE__*/React__default.createElement(BackButton, {
+    onClick: onClose,
+    color: textSecondary
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement(TitleWrapper, null, /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginTop: '1'
+  }, optionName)), /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: textSecondary,
+    onClick: onClose
+  }), /*#__PURE__*/React__default.createElement(VotesContainer, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(VotesCount, {
+    color: textSecondary
+  }, totalVotes, " votes"), isLoadingInitial ? (/*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(Loader, {
+    color: textSecondary
+  }))) : (/*#__PURE__*/React__default.createElement(VotesList, {
+    onScroll: handleScroll
+  }, allVotes.map(function (vote) {
+    return /*#__PURE__*/React__default.createElement(VoterRow, {
+      key: vote.optionId + "_" + vote.user.id
+    }, /*#__PURE__*/React__default.createElement(Avatar, {
+      image: vote.user.profile.avatar,
+      name: vote.user.profile.firstName || vote.user.id,
+      size: 40,
+      textSize: 16,
+      setDefaultAvatar: true
+    }), /*#__PURE__*/React__default.createElement(VoterInfo, null, /*#__PURE__*/React__default.createElement(VoterName, {
+      color: textPrimary
+    }, vote.user.profile.firstName || vote.user.id, " ", vote.user.profile.lastName || ''), /*#__PURE__*/React__default.createElement(VotedAt, {
+      color: textSecondary
+    }, formatDate(new Date(vote.createdAt)))));
+  }), isLoading && allVotes.length > 0 && /*#__PURE__*/React__default.createElement(LoadingText, {
+    color: textSecondary
+  }, "Loading...")))))));
+};
+var VotesList = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 60vh;\n  padding: 8px 0;\n"])));
+var VoterRow = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
+var VoterInfo = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var VoterName = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+  return p.color;
+});
+var VotedAt = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+  return p.color;
+});
+var LoadingText = styled__default.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px;\n  font-size: 14px;\n"])), function (p) {
+  return p.color;
+});
+var TitleWrapper = styled__default.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 54px);\n  margin: 0 auto;\n"])));
+var BackButton = styled__default.button(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  padding: 9px;\n  cursor: pointer;\n  box-sizing: content-box;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  flex-shrink: 0;\n\n  & > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), function (p) {
+  return p.color;
+});
+var VotesContainer = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  padding: 0 16px 8px 16px;\n  border-radius: 10px;\n  background-color: ", ";\n  margin-top: 16px;\n"])), function (p) {
+  return p.backgroundColor;
+});
+var VotesCount = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n  padding: 12px 0;\n"])), function (p) {
+  return p.color;
+});
+var LoaderContainer = styled__default.div(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  min-height: 100px;\n"])));
+var Loader = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 3px solid ", "20;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (p) {
+  return p.color;
+}, function (p) {
+  return p.color;
+});
+
+var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b;
+var VotesResultsPopup = function VotesResultsPopup(_ref) {
+  var _poll$options$find;
+  var onClose = _ref.onClose,
+    poll = _ref.poll,
+    messageId = _ref.messageId,
+    onViewMoreOption = _ref.onViewMoreOption;
+  var _useState = React.useState(null),
+    selectedOptionId = _useState[0],
+    setSelectedOptionId = _useState[1];
+  var _useColor = useColors(),
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    border = _useColor[THEME_COLORS.BORDER],
+    accent = _useColor[THEME_COLORS.ACCENT];
   var optionIdToVotes = React.useMemo(function () {
     var votes = {};
     poll.options.forEach(function (opt) {
-      var key = poll.id + "_" + opt.id;
-      votes[opt.id] = pollVotesList[key] || [];
+      var allOptionVotes = (poll.votes || []).filter(function (vote) {
+        return vote.optionId === opt.id;
+      });
+      var ownVote = poll.ownVotes.find(function (vote) {
+        return vote.optionId === opt.id;
+      });
+      if (ownVote) {
+        allOptionVotes.push(ownVote);
+      }
+      votes[opt.id] = allOptionVotes;
     });
     return votes;
-  }, [pollVotesList, poll.id, poll.options]);
+  }, [poll.votes, poll.options, poll.ownVotes]);
+  var handleShowAll = React.useCallback(function (optionId) {
+    if (onViewMoreOption) {
+      onViewMoreOption(optionId);
+    }
+    setSelectedOptionId(optionId);
+  }, [onViewMoreOption]);
+  var handleCloseAllVotes = React.useCallback(function () {
+    setSelectedOptionId(null);
+  }, []);
   var formatDate = function formatDate(d) {
     try {
       var date = new Date(d);
@@ -33943,7 +34100,7 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
       return '';
     }
   };
-  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+  return /*#__PURE__*/React__default.createElement("div", null, !selectedOptionId && (/*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
     backgroundColor: background,
     maxWidth: '560px',
     minWidth: '560px',
@@ -33958,11 +34115,9 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
     color: textPrimary,
     marginBottom: '16px'
   }, "Vote results"), /*#__PURE__*/React__default.createElement(OptionsList, null, poll.options.map(function (opt) {
-    var _pollVotesHasMore$key;
-    var key = poll.id + "_" + opt.id;
+    var _poll$votesPerOption;
     var allVotes = optionIdToVotes[opt.id] || [];
-    var hasMore = (_pollVotesHasMore$key = pollVotesHasMore[key]) != null ? _pollVotesHasMore$key : false;
-    var isLoading = pollVotesLoadingState[key] === LOADING_STATE.LOADING;
+    var totalVotes = ((_poll$votesPerOption = poll.votesPerOption) === null || _poll$votesPerOption === void 0 ? void 0 : _poll$votesPerOption[opt.id]) || 0;
     return /*#__PURE__*/React__default.createElement(OptionBlock, {
       key: opt.id,
       background: surface1,
@@ -33971,8 +34126,8 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
       color: textPrimary
     }, opt.name), /*#__PURE__*/React__default.createElement(OptionCount, {
       color: textSecondary
-    }, poll.votesPerOption && poll.votesPerOption[opt.id] || allVotes.length, " votes")), /*#__PURE__*/React__default.createElement(Voters, null, allVotes.map(function (vote) {
-      return /*#__PURE__*/React__default.createElement(VoterRow, {
+    }, totalVotes, " votes")), /*#__PURE__*/React__default.createElement(Voters, null, allVotes.map(function (vote) {
+      return /*#__PURE__*/React__default.createElement(VoterRow$1, {
         key: opt.id + "_" + vote.user.id
       }, /*#__PURE__*/React__default.createElement(Avatar, {
         image: vote.user.profile.avatar,
@@ -33980,12 +34135,12 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
         size: 40,
         textSize: 16,
         setDefaultAvatar: true
-      }), /*#__PURE__*/React__default.createElement(VoterInfo, null, /*#__PURE__*/React__default.createElement(VoterName, {
+      }), /*#__PURE__*/React__default.createElement(VoterInfo$1, null, /*#__PURE__*/React__default.createElement(VoterName$1, {
         color: textPrimary
-      }, vote.user.profile.firstName || vote.user.id, " ", vote.user.profile.lastName || ''), /*#__PURE__*/React__default.createElement(VotedAt, {
+      }, vote.user.profile.firstName || vote.user.id, " ", vote.user.profile.lastName || ''), /*#__PURE__*/React__default.createElement(VotedAt$1, {
         color: textSecondary
       }, formatDate(new Date(vote.createdAt)))));
-    })), hasMore && (/*#__PURE__*/React__default.createElement(Row, {
+    })), allVotes.length < totalVotes && (/*#__PURE__*/React__default.createElement(Row, {
       justify: 'center',
       paddingBottom: '5px '
     }, /*#__PURE__*/React__default.createElement(Button, {
@@ -33993,58 +34148,65 @@ var VotesResultsPopup = function VotesResultsPopup(_ref) {
       backgroundColor: 'transparent',
       color: accent,
       onClick: function onClick() {
-        return handleViewMore(opt.id);
-      },
-      disabled: isLoading
-    }, isLoading ? 'Loading...' : 'View More'))));
-  })))));
+        return handleShowAll(opt.id);
+      }
+    }, "Show All"))));
+  })))))), selectedOptionId && (/*#__PURE__*/React__default.createElement(AllVotesPopup, {
+    onClose: handleCloseAllVotes,
+    poll: poll,
+    messageId: messageId,
+    optionId: selectedOptionId,
+    optionName: ((_poll$options$find = poll.options.find(function (opt) {
+      return opt.id === selectedOptionId;
+    })) === null || _poll$options$find === void 0 ? void 0 : _poll$options$find.name) || ''
+  })));
 };
-var OptionsList = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-y: auto;\n  max-height: 64vh;\n"])));
-var OptionBlock = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 12px;\n  border: 1px solid ", "0F; /* subtle */\n  padding: 14px 16px 0 16px;\n"])), function (p) {
+var OptionsList = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-y: auto;\n  max-height: 64vh;\n"])));
+var OptionBlock = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 12px;\n  border: 1px solid ", "0F; /* subtle */\n  padding: 14px 16px 0 16px;\n"])), function (p) {
   return p.background;
 }, function (p) {
   return p.border;
 });
-var OptionHeader = styled__default.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
-var OptionTitle = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n"])), function (p) {
+var OptionHeader = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
+var OptionTitle = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n"])), function (p) {
   return p.color;
 });
-var OptionCount = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 13px;\n"])), function (p) {
+var OptionCount = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 13px;\n"])), function (p) {
   return p.color;
 });
-var Voters = styled__default.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 5px;\n"])));
-var VoterRow = styled__default.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
-var VoterInfo = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
-var VoterName = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+var Voters = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 5px;\n"])));
+var VoterRow$1 = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
+var VoterInfo$1 = styled__default.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var VoterName$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
   return p.color;
 });
-var VotedAt = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+var VotedAt$1 = styled__default.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
   return p.color;
 });
 
-var _path$16;
-function _extends$18() {
-  return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$17;
+function _extends$19() {
+  return _extends$19 = 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$18.apply(null, arguments);
+  }, _extends$19.apply(null, arguments);
 }
 function SvgFilledCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$18({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     width: 19,
     height: 19,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
     d: "M9.167 0a9.167 9.167 0 11-.001 18.333A9.167 9.167 0 019.167 0zm4.79 5.904a.834.834 0 00-1.179 0l-5.14 5.139-2.084-2.084a.834.834 0 00-1.178 1.179l2.673 2.674a.834.834 0 001.179 0l5.729-5.73a.833.833 0 000-1.178z",
     fill: "currentColor"
   })));
 }
 
-var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$7, _templateObject10$4, _templateObject11$4, _templateObject12$3;
+var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$4, _templateObject12$3;
 var PollMessage = function PollMessage(_ref) {
   var message = _ref.message;
   var _useColor = useColors(),
@@ -34118,13 +34280,13 @@ var PollMessage = function PollMessage(_ref) {
       },
       role: 'button',
       disabled: poll === null || poll === void 0 ? void 0 : poll.closed
-    }, /*#__PURE__*/React__default.createElement(TopRow, null, !poll.closed && /*#__PURE__*/React__default.createElement(Indicator, {
+    }, /*#__PURE__*/React__default.createElement(TopRow, null, !poll.closed && (/*#__PURE__*/React__default.createElement(Indicator, {
       disabled: poll === null || poll === void 0 ? void 0 : poll.closed
     }, selected ? /*#__PURE__*/React__default.createElement(StyledCheck, {
       color: accent
     }) : /*#__PURE__*/React__default.createElement(EmptyCircle, {
       border: borderSecondary
-    })), /*#__PURE__*/React__default.createElement(Title$2, {
+    }))), /*#__PURE__*/React__default.createElement(Title$2, {
       color: textPrimary
     }, opt.name), poll.anonymous ? null : (/*#__PURE__*/React__default.createElement(UsersContainer, null, optionVotesUsers.map(function (vote) {
       var _vote$user, _vote$user2, _vote$user2$profile, _vote$user3, _vote$user3$profile;
@@ -34167,38 +34329,38 @@ var PollMessage = function PollMessage(_ref) {
     messageId: message.id
   })));
 };
-var Container$h = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n"])));
-var Question = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n"])), function (p) {
+var Container$h = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n"])));
+var Question = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n"])), function (p) {
   return p.color;
 });
-var SubTitle$1 = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: 4px 0 6px 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.08px;\n"])), function (p) {
+var SubTitle$1 = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: 4px 0 6px 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.08px;\n"])), function (p) {
   return p.color;
 });
-var Options = styled__default.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n"])));
-var Option = styled__default.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n  cursor: ", ";\n"])), function (p) {
+var Options = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n"])));
+var Option = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  padding: 10px 0;\n  color: ", ";\n  cursor: pointer;\n  user-select: none;\n  cursor: ", ";\n"])), function (p) {
   return p.color;
 }, function (p) {
   return p.disabled ? 'not-allowed' : 'pointer';
 });
-var TopRow = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 6px;\n  min-height: 22px;\n"])));
-var Indicator = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  margin-right: 8px;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (p) {
+var TopRow = styled__default.div(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 6px;\n  min-height: 22px;\n"])));
+var Indicator = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  min-width: 20px;\n  height: 20px;\n  margin-right: 8px;\n  opacity: ", ";\n  cursor: ", ";\n"])), function (p) {
   return p.disabled ? 0.5 : 1;
 }, function (p) {
   return p.disabled ? 'not-allowed' : 'pointer';
 });
-var EmptyCircle = styled__default.span(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 18.5px;\n  height: 18.5px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
+var EmptyCircle = styled__default.span(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 18.5px;\n  height: 18.5px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
   return p.border;
 });
-var StyledCheck = styled__default(SvgFilledCheckbox)(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  width: 18.5px;\n  height: 18.5px;\n"])), function (p) {
+var StyledCheck = styled__default(SvgFilledCheckbox)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  width: 18.5px;\n  height: 18.5px;\n"])), function (p) {
   return p.color;
 });
-var Title$2 = styled__default.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  color: ", ";\n  margin-right: auto;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
+var Title$2 = styled__default.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  color: ", ";\n  margin-right: auto;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (p) {
   return p.color;
 });
-var Votes = styled__default.span(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  margin-left: 4px;\n  margin-top: auto;\n  margin-bottom: 1px;\n"])), function (p) {
+var Votes = styled__default.span(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  margin-left: 4px;\n  margin-top: auto;\n  margin-bottom: 1px;\n"])), function (p) {
   return p.color;
 });
-var Bar = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 6px;\n  border-radius: 6px;\n  background: ", ";\n  overflow: hidden;\n  margin-left: auto;\n"])), function (p) {
+var Bar = styled__default.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 6px;\n  border-radius: 6px;\n  background: ", ";\n  overflow: hidden;\n  margin-left: auto;\n"])), function (p) {
   return p.closed ? '100%' : "calc(100% - 28px)";
 }, function (p) {
   return p.track;
@@ -34206,7 +34368,7 @@ var Bar = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _tag
 var Fill = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  border-radius: 6px;\n  transition: width 0.3s ease-in-out;\n"])));
 var UsersContainer = styled__default.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding-left: 16px;\n  height: max-content;\n  margin-top: auto;\n"])));
 
-var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8;
+var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9;
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -34535,14 +34697,14 @@ var OGMetadata = function OGMetadata(_ref) {
     padding: ogContainerPadding,
     className: ogContainerClassName,
     containerMargin: ogContainerMargin,
-    as: "a",
+    as: 'a',
     href: attachment === null || attachment === void 0 ? void 0 : attachment.url,
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
   }, content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
-var OGMetadataContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
+var OGMetadataContainer = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showBackground = _ref2.showBackground,
     customBg = _ref2.customBg,
     bgColor = _ref2.bgColor;
@@ -34560,7 +34722,7 @@ var OGMetadataContainer = styled__default.div(_templateObject$E || (_templateObj
   var padding = _ref6.padding;
   return padding != null ? padding : '0';
 });
-var ImageContainer = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref7) {
+var ImageContainer = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: ", ";\n  opacity: ", ";\n  margin: 0 auto;\n  overflow: hidden;\n  ", "\n"])), sharedKeyframes, function (_ref7) {
   var containerHeight = _ref7.containerHeight;
   return containerHeight ? containerHeight + "px" : '0px';
 }, function (_ref8) {
@@ -34573,14 +34735,14 @@ var ImageContainer = styled__default.div(_templateObject2$z || (_templateObject2
     containerHeight = _ref9.containerHeight;
   return shouldAnimate && showOGMetadata && containerHeight && "\n    animation: expandHeight 0.3s ease-out forwards;\n  ";
 });
-var OGText = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
+var OGText = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  ", "\n  ", ";\n"])), sharedKeyframes, function (_ref0) {
   var shouldAnimate = _ref0.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out forwards;\n  ";
 }, function (_ref1) {
   var margin = _ref1.margin;
   return margin ? '12px' : '0';
 });
-var Title$3 = styled__default.p(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 8px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref10) {
+var Title$3 = styled__default.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: bold;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 8px 0 0 0;\n  padding: ", ";\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref10) {
   var padding = _ref10.padding;
   return padding != null ? padding : '0';
 }, function (_ref11) {
@@ -34590,7 +34752,7 @@ var Title$3 = styled__default.p(_templateObject4$p || (_templateObject4$p = _tag
   var shouldAnimate = _ref12.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n  ";
 });
-var Desc = styled__default.p(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 8px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref13) {
+var Desc = styled__default.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 8px 0;\n  padding: ", ";\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref13) {
   var padding = _ref13.padding;
   return padding != null ? padding : '0';
 }, function (_ref14) {
@@ -34603,7 +34765,7 @@ var Desc = styled__default.p(_templateObject5$k || (_templateObject5$k = _tagged
   var shouldAnimate = _ref16.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n  ";
 });
-var Url = styled__default.p(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref17) {
+var Url = styled__default.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  ", "\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  margin: 0 0 12px 0;\n  padding: ", ";\n  color: gray;\n  box-sizing: border-box;\n  ", "\n  ", "\n"])), sharedKeyframes, function (_ref17) {
   var padding = _ref17.padding;
   return padding != null ? padding : '0';
 }, function (_ref18) {
@@ -34613,16 +34775,16 @@ var Url = styled__default.p(_templateObject6$i || (_templateObject6$i = _taggedT
   var shouldAnimate = _ref19.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n  ";
 });
-var Img = styled__default.img(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref20) {
+var Img = styled__default.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  border-radius: inherit;\n  ", "\n"])), sharedKeyframes, function (_ref20) {
   var shouldAnimate = _ref20.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
-var OGRow = styled__default.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
-var OGTextWrapper = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
-var FaviconContainer = styled__default.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
-var FaviconImg = styled__default.img(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
+var OGRow = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n"])));
+var OGTextWrapper = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
+var FaviconContainer = styled__default.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px;\n  flex: 0 0 52px;\n"])));
+var FaviconImg = styled__default.img(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
-var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l;
+var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
 var MessageBody = function MessageBody(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -35166,7 +35328,7 @@ var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prev
   var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
   return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order));
 });
-var ForwardedTitle = styled__default.h3(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var ForwardedTitle = styled__default.h3(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.withAttachments && props.withBody ? '0' : '0 0 4px';
@@ -35179,12 +35341,12 @@ var ForwardedTitle = styled__default.h3(_templateObject$F || (_templateObject$F
 }, function (props) {
   return props.color;
 });
-var MessageStatusDeleted$1 = styled__default.span(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
+var MessageStatusDeleted$1 = styled__default.span(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize;
 });
-var MessageBodyContainer = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: max-content;\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
+var MessageBodyContainer = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  //display: inline-block;\n  border-radius: ", ";\n  direction: ", ";\n  max-width: ", ";\n  width: max-content;\n  padding: ", ";\n  //direction: ", ";\n  //overflow: ", ";\n  transition: all 0.3s;\n  transform-origin: right;\n"])), function (props) {
   var _props$outgoingMessag, _props$incomingMessag;
   return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
 }, function (props) {
@@ -35201,7 +35363,7 @@ var MessageBodyContainer = styled__default.div(_templateObject3$u || (_templateO
 }, function (props) {
   return props.noBody && 'hidden';
 });
-var EmojiContainer = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  //top: ", ";\n  top: ", ";\n  bottom: ", ";\n  z-index: 99;\n"])), function (props) {
+var EmojiContainer = styled__default.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  //top: ", ";\n  top: ", ";\n  bottom: ", ";\n  z-index: 99;\n"])), function (props) {
   return props.rtlDirection ? '' : '0';
 }, function (props) {
   return props.rtlDirection && '0';
@@ -35212,13 +35374,13 @@ var EmojiContainer = styled__default.div(_templateObject4$q || (_templateObject4
 }, function (props) {
   return props.position === 'top' && 'calc(100% + 4px)';
 });
-var FrequentlyEmojisContainer = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -50px;\n  z-index: 99;\n"])), function (props) {
+var FrequentlyEmojisContainer = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -50px;\n  z-index: 99;\n"])), function (props) {
   return props.rtlDirection ? '' : '0';
 }, function (props) {
   return props.rtlDirection && '0';
 });
 
-var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9;
+var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$a;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -35590,31 +35752,31 @@ function sortByDateDesc(a, b) {
   var bTime = bDate ? new Date(bDate).getTime() : 0;
   return bTime - aTime;
 }
-var Tabs = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  justify-content: start;\n  margin-bottom: 8px;\n"])));
-var Tab = styled__default.button(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 6px 11px;\n  border-radius: 16px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    opacity: 0.9;\n  }\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0px;\n  text-align: center;\n"])), function (p) {
+var Tabs = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  justify-content: start;\n  margin-bottom: 8px;\n"])));
+var Tab = styled__default.button(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 6px 11px;\n  border-radius: 16px;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    opacity: 0.9;\n  }\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: 0px;\n  text-align: center;\n"])), function (p) {
   return p.active ? p.textOnPrimary : p.textSecondary;
 }, function (p) {
   return p.background;
 }, function (p) {
   return p.active ? p.background : p.borderColor;
 });
-var List$1 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (p) {
+var List$1 = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (p) {
   return p.maxHeight ? p.maxHeight + "px" : 'unset';
 });
-var Row$2 = styled__default.div(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px;\n  border-radius: 10px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (p) {
+var Row$2 = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px;\n  border-radius: 10px;\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (p) {
   return p.backgroundHover;
 });
-var RowInfo = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-right: auto;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
-var RowTitle = styled__default.div(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 22px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) {
+var RowInfo = styled__default.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-right: auto;\n  min-width: 0;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var RowTitle = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 22px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) {
   return p.color;
 });
-var RowDate = styled__default.div(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
+var RowDate = styled__default.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
   return p.color;
 });
-var Empty = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
+var Empty = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
   return p.color;
 });
-var DropdownRoot = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
+var DropdownRoot = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
   return p.flip ? 'auto' : 'calc(100% + 8px)';
 }, function (p) {
   return p.flip ? 'calc(100% + 8px)' : 'auto';
@@ -35626,7 +35788,7 @@ var DropdownRoot = styled__default.div(_templateObject9$e || (_templateObject9$e
 }, function (p) {
   return p.ready ? 'visible' : 'hidden';
 });
-var Panel = styled__default.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 16px;\n  overflow: hidden;\n  transition: height 0.25s ease;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
+var Panel = styled__default.div(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 16px;\n  overflow: hidden;\n  transition: height 0.25s ease;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (p) {
   return p.bg;
 }, function (p) {
   return p.open ? Math.min(p.heightPx || 0, parseInt(String(p.maxHeight || '300'), 10) || 300) + "px" : '0';
@@ -35635,7 +35797,7 @@ var Panel = styled__default.div(_templateObject0$d || (_templateObject0$d = _tag
 }, function (p) {
   return p.minWidth || '340px';
 });
-var Content = styled__default.div(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  padding: 16px 12px;\n  height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n"])));
+var Content = styled__default.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  padding: 16px 12px;\n  height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n"])));
 
 function ConfirmEndPollPopup(_ref) {
   var handleFunction = _ref.handleFunction,
@@ -35652,7 +35814,7 @@ function ConfirmEndPollPopup(_ref) {
   });
 }
 
-var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$h, _templateObject9$f, _templateObject0$e, _templateObject1$a, _templateObject10$5, _templateObject11$5, _templateObject12$4;
+var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$b, _templateObject10$6, _templateObject11$5, _templateObject12$4;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -36463,11 +36625,11 @@ var Message$1 = function Message(_ref) {
 var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prevProps, nextProps) {
   return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.theme === nextProps.theme;
 });
-var MessageReactionKey = styled__default.span(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n"])));
-var ReactionItemCount = styled__default.span(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var MessageReactionKey = styled__default.span(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n"])));
+var ReactionItemCount = styled__default.span(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var MessageReaction = styled__default.span(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  //min-width: 23px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: ", ";\n  margin-right: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  white-space: nowrap;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (props) {
+var MessageReaction = styled__default.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  //min-width: 23px;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: ", ";\n  margin-right: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  white-space: nowrap;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (props) {
   return props.margin || '0 8px 0 0';
 }, function (props) {
   return props.isLastReaction && '0';
@@ -36486,26 +36648,26 @@ var MessageReaction = styled__default.span(_templateObject3$w || (_templateObjec
 }, function (props) {
   return props.backgroundColor;
 });
-var ThreadMessageCountContainer = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 15px;\n  margin: 12px;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -25px;\n    top: -21px;\n    width: 16px;\n    height: 26px;\n    border-left: 2px solid #cdcdcf;\n    border-bottom: 2px solid #cdcdcf;\n    border-radius: 0 0 0 14px;\n  }\n"])), function (props) {
+var ThreadMessageCountContainer = styled__default.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 15px;\n  margin: 12px;\n  cursor: pointer;\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: -25px;\n    top: -21px;\n    width: 16px;\n    height: 26px;\n    border-left: 2px solid #cdcdcf;\n    border-bottom: 2px solid #cdcdcf;\n    border-radius: 0 0 0 14px;\n  }\n"])), function (props) {
   return props.color;
 });
-var FailedMessageIcon = styled__default.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -6px;\n  left: ", ";\n  right: ", ";\n  width: 20px;\n  height: 20px;\n"])), function (props) {
+var FailedMessageIcon = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -6px;\n  left: ", ";\n  right: ", ";\n  width: 20px;\n  height: 20px;\n"])), function (props) {
   return !props.rtl && '-24px';
 }, function (props) {
   return props.rtl && '-24px';
 });
-var ErrorIconWrapper = styled__default(SvgErrorIcon)(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
-var SelectMessageWrapper = styled__default.div(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  position: absolute;\n  left: 4%;\n  bottom: calc(50% - 22px);\n  cursor: ", ";\n  & > svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
+var ErrorIconWrapper = styled__default(SvgErrorIcon)(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n"])));
+var SelectMessageWrapper = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  position: absolute;\n  left: 4%;\n  bottom: calc(50% - 22px);\n  cursor: ", ";\n  & > svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
   return !props.disabled && 'pointer';
 }, function (props) {
   return props.activeColor;
 });
-var EmptySelection = styled__default.span(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 1.5px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  transform: scale(0.92);\n  opacity: ", ";\n"])), function (props) {
+var EmptySelection = styled__default.span(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border: 1.5px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  transform: scale(0.92);\n  opacity: ", ";\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.disabled && '0.5';
 });
-var ReactionsContainer = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\n"])), function (props) {
+var ReactionsContainer = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  margin-top: 4px;\n  justify-content: flex-end;\n  border: ", ";\n  box-shadow: ", ";\n  filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n  border-radius: ", ";\n  background-color: ", ";\n  padding: ", ";\n  z-index: 9;\n  ", ";\n  overflow: hidden;\n  height: ", ";\n  transition: all 0.3s;\n"])), function (props) {
   return props.rtlDirection && 'auto';
 }, function (props) {
   return !props.rtlDirection && 'auto';
@@ -36524,13 +36686,13 @@ var ReactionsContainer = styled__default.div(_templateObject9$f || (_templateObj
 }, function (props) {
   return props.isReacted ? '16px' : '0';
 });
-var MessageReactionsCont = styled__default.div(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
+var MessageReactionsCont = styled__default.div(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.rtlDirection && 'ltr';
 });
-var MessageStatus$1 = styled__default.span(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus$1 = styled__default.span(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
-var HiddenMessageTime$1 = styled__default.span(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+var HiddenMessageTime$1 = styled__default.span(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.hide && 'none';
 }, function (props) {
   return props.fontSize || '12px';
@@ -36566,7 +36728,7 @@ var MessageItem = styled__default.div(_templateObject12$4 || (_templateObject12$
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$b;
+var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$u, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$c;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -37636,14 +37798,14 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$i = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n  overflow-x: hidden;\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 Container$i = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n  overflow-x: hidden;\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.backgroundColor;
 }, function (props) {
   return props.thumbColor;
 });
-var EmptyDiv = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
-var MessagesBox = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  //height: auto;\n  display: flex;\n  //flex-direction: column-reverse;\n  flex-direction: column;\n  padding-bottom: 20px;\n  //overflow: auto;\n  //scroll-behavior: unset;\n"])));
-var MessageTopDate = styled__default.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: center;\n  width: 100%;\n  top: ", ";\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  z-index: 10;\n  background: transparent;\n  opacity: ", ";\n  transition: all 0.2s ease-in-out;\n  width: calc(100% - 8px);\n\n  span {\n    display: inline-block;\n    max-width: 380px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    border: ", ";\n    box-sizing: border-box;\n    border-radius: ", ";\n    padding: 5px 16px;\n    box-shadow:\n      0 0 2px rgba(0, 0, 0, 0.08),\n      0 2px 24px rgba(0, 0, 0, 0.08);\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), function (props) {
+var EmptyDiv = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  height: 300px;\n"])));
+var MessagesBox = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  //height: auto;\n  display: flex;\n  //flex-direction: column-reverse;\n  flex-direction: column;\n  padding-bottom: 20px;\n  //overflow: auto;\n  //scroll-behavior: unset;\n"])));
+var MessageTopDate = styled__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: center;\n  width: 100%;\n  top: ", ";\n  left: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  z-index: 10;\n  background: transparent;\n  opacity: ", ";\n  transition: all 0.2s ease-in-out;\n  width: calc(100% - 8px);\n\n  span {\n    display: inline-block;\n    max-width: 380px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    border: ", ";\n    box-sizing: border-box;\n    border-radius: ", ";\n    padding: 5px 16px;\n    box-shadow:\n      0 0 2px rgba(0, 0, 0, 0.08),\n      0 2px 24px rgba(0, 0, 0, 0.08);\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])), function (props) {
   return props.topOffset ? props.topOffset + 22 + "px" : '22px';
 }, function (props) {
   return props.marginTop;
@@ -37662,19 +37824,19 @@ var MessageTopDate = styled__default.div(_templateObject4$t || (_templateObject4
 }, function (props) {
   return props.dateDividerBorderRadius || '14px';
 });
-var DragAndDropContainer = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: -31px;\n  margin-top: -2px;\n\n  position: absolute;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  z-index: 999;\n"])), function (props) {
+var DragAndDropContainer = styled__default.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: -31px;\n  margin-top: -2px;\n\n  position: absolute;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  z-index: 999;\n"])), function (props) {
   return props.topOffset ? props.topOffset + 2 + "px" : 0;
 }, function (props) {
   return props.height ? props.height + 30 + "px" : '100%';
 }, function (props) {
   return props.backgroundColor;
 });
-var IconWrapper$1 = styled__default.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 64px;\n  width: 64px;\n  background-color: ", ";\n  border-radius: 50%;\n  text-align: center;\n  margin-bottom: 16px;\n  transition: all 0.3s;\n  pointer-events: none;\n\n  & > svg {\n    color: ", ";\n    width: 32px;\n    height: 32px;\n  }\n"])), function (props) {
+var IconWrapper$1 = styled__default.span(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 64px;\n  width: 64px;\n  background-color: ", ";\n  border-radius: 50%;\n  text-align: center;\n  margin-bottom: 16px;\n  transition: all 0.3s;\n  pointer-events: none;\n\n  & > svg {\n    color: ", ";\n    width: 32px;\n    height: 32px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.iconColor;
 });
-var DropAttachmentArea = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  border: 1px dashed ", ";\n  border-radius: 16px;\n  margin: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  transition: all 0.1s;\n\n  &.dragover {\n    background-color: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var DropAttachmentArea = styled__default.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  border: 1px dashed ", ";\n  border-radius: 16px;\n  margin: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  transition: all 0.1s;\n\n  &.dragover {\n    background-color: ", ";\n    border: 1px dashed ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.borderColor;
 }, function (props) {
   return props.margin || '12px 32px 32px';
@@ -37687,16 +37849,16 @@ var DropAttachmentArea = styled__default.div(_templateObject7$j || (_templateObj
 }, IconWrapper$1, function (props) {
   return props.iconBackgroundColor;
 });
-var MessageWrapper = styled__default.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
+var MessageWrapper = styled__default.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
   return props.highlightBg || '#d5d5d5';
 });
-var NoMessagesContainer = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesContainer = styled__default.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesTitle = styled__default.h4(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesTitle = styled__default.h4(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesText = styled__default.p(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesText = styled__default.p(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -38112,7 +38274,7 @@ function $isMentionNode(node) {
   return node instanceof MentionNode;
 }
 
-var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$u, _templateObject5$p;
+var _templateObject$K, _templateObject2$F, _templateObject3$z, _templateObject4$v, _templateObject5$q;
 var PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 var NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 var DocumentMentionsRegex = {
@@ -38392,8 +38554,8 @@ function MentionsPlugin(_ref3) {
     }
   });
 }
-var MentionsContainerWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  position: relative;\n  animation: fadeIn 0.2s ease-in-out;\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n"])));
-var MentionsList = styled__default.ul(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  width: 300px;\n  transition: all 0.2s;\n  overflow: auto;\n  max-height: 240px;\n  z-index: 200;\n  padding: 2px 0 0;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 6px;\n  visibility: ", ";\n"])), function (props) {
+var MentionsContainerWrapper = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  position: relative;\n  animation: fadeIn 0.2s ease-in-out;\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n"])));
+var MentionsList = styled__default.ul(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  width: 300px;\n  transition: all 0.2s;\n  overflow: auto;\n  max-height: 240px;\n  z-index: 200;\n  padding: 2px 0 0;\n  background: ", ";\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 6px;\n  visibility: ", ";\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.withBorder && "1px solid " + props.borderColor;
@@ -38402,32 +38564,32 @@ var MentionsList = styled__default.ul(_templateObject2$E || (_templateObject2$E
 }, function (props) {
   return props.hidden ? 'hidden' : 'visible';
 });
-var MemberItem = styled__default.li(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var MemberItem = styled__default.li(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n  background-color: ", ";\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.isActiveItem && props.activeBackgroundColor;
 }, UserStatus);
-var UserNamePresence$2 = styled__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 44px);\n  margin-left: 12px;\n"])));
-var MemberName$2 = styled__default.h3(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 1px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var UserNamePresence$2 = styled__default.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 44px);\n  margin-left: 12px;\n"])));
+var MemberName$2 = styled__default.h3(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  max-width: calc(100% - 1px);\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _path$17;
-function _extends$19() {
-  return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$18;
+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$19.apply(null, arguments);
+  }, _extends$1a.apply(null, arguments);
 }
 function SvgBold(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$19({
+  return /*#__PURE__*/React.createElement("svg", _extends$1a({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.35 3.029A1.1 1.1 0 005 4.1v10a1.1 1.1 0 001.35 1.072c.08.018.164.028.25.028h3.429c1.998 0 3.671-1.583 3.671-3.6a3.566 3.566 0 00-1.596-2.969c.38-.588.596-1.294.596-2.031 0-1.904-1.444-3.6-3.408-3.6H6.6c-.086 0-.17.01-.25.029zm3.41 7.138a3.318 3.318 0 01-.468.033H7.2V13h2.829c.842 0 1.471-.656 1.471-1.4 0-.744-.63-1.4-1.471-1.4a1.1 1.1 0 01-.268-.033zM7.2 8h2.092c.586 0 1.208-.542 1.208-1.4 0-.858-.622-1.4-1.208-1.4H7.2V8z",
@@ -38435,24 +38597,24 @@ function SvgBold(props) {
   })));
 }
 
-var _path$18;
-function _extends$1a() {
-  return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
+var _path$19;
+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 SvgItalic(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1a({
+  return /*#__PURE__*/React.createElement("svg", _extends$1b({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.984 3.2H8a.8.8 0 000 1.6h1.024l-1.68 8.4H6a.8.8 0 100 1.6h4a.8.8 0 000-1.6H8.976l1.68-8.4H12a.8.8 0 000-1.6H9.984z",
@@ -38461,17 +38623,17 @@ function SvgItalic(props) {
 }
 
 var _g$1;
-function _extends$1b() {
-  return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
+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 SvgStrikethrough(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1b({
+  return /*#__PURE__*/React.createElement("svg", _extends$1c({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
@@ -38488,41 +38650,41 @@ function SvgStrikethrough(props) {
   }))));
 }
 
-var _path$19;
-function _extends$1c() {
-  return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1a;
+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 SvgMono(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1c({
+  return /*#__PURE__*/React.createElement("svg", _extends$1d({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
     d: "M4.98 14.753A.826.826 0 014.37 15a.882.882 0 01-.624-.247.882.882 0 01-.247-.624V3.87c0-.24.082-.444.247-.608A.853.853 0 014.37 3c.581 0 1.003.258 1.266.773l3.238 6.28c0 .01.006.015.017.015.01 0 .016-.005.016-.016l3.222-6.247c.274-.537.712-.805 1.315-.805.252 0 .466.088.641.263a.873.873 0 01.263.641v10.192a.873.873 0 01-.263.641.872.872 0 01-.64.263.873.873 0 01-.642-.263.873.873 0 01-.263-.641V6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017l-2.433 4.833c-.252.493-.646.74-1.183.74s-.932-.247-1.184-.74L5.275 6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017v7.989c0 .24-.087.45-.263.624z",
     fill: "CurrentColor"
   })));
 }
 
 var _g$2;
-function _extends$1d() {
-  return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
+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 SvgUnderline(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1d({
+  return /*#__PURE__*/React.createElement("svg", _extends$1e({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
@@ -38539,7 +38701,7 @@ function SvgUnderline(props) {
   }))));
 }
 
-var _templateObject$K, _templateObject2$F;
+var _templateObject$L, _templateObject2$G;
 function mergeRegister() {
   for (var _len = arguments.length, func = new Array(_len), _key = 0; _key < _len; _key++) {
     func[_key] = arguments[_key];
@@ -38920,10 +39082,10 @@ function FloatingTextFormatToolbarPlugin(_ref3) {
     editor = _useLexicalComposerCo[0];
   return useFloatingTextFormatToolbar(editor, anchorElem);
 }
-var FloatingTextFormatPopup = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background: ", ";\n  vertical-align: middle;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 8px;\n  transition: opacity 0.5s;\n  padding: 12px;\n  will-change: transform;\n  z-index: 99;\n\n  & button.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    cursor: pointer;\n    vertical-align: middle;\n  }\n  & button.popup-item:disabled {\n    cursor: not-allowed;\n  }\n  & button.popup-item.spaced {\n    margin-right: 2px;\n  }\n  & button.popup-item i.format {\n    background-size: contain;\n    height: 18px;\n    width: 18px;\n    margin-top: 2px;\n    vertical-align: -0.25em;\n    display: flex;\n    opacity: 0.6;\n  }\n\n  & button.popup-item:disabled i.format {\n    opacity: 0.2;\n  }\n  & button.popup-item.active {\n    background-color: rgba(223, 232, 250, 0.3);\n  }\n  & button.popup-item.active i {\n    opacity: 1;\n  }\n  & .popup-item:hover:not([disabled]) {\n    background-color: #eee;\n  }\n  & select.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    vertical-align: middle;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    width: 70px;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n  }\n  & select.code-language {\n    text-transform: capitalize;\n    width: 130px;\n  }\n\n  & .popup-item .text {\n    display: flex;\n    line-height: 20px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n    width: 70px;\n    overflow: hidden;\n    height: 20px;\n    text-align: left;\n  }\n\n  & .popup-item .icon {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    user-select: none;\n    margin-right: 8px;\n    line-height: 16px;\n    background-size: contain;\n  }\n  & i.chevron-down {\n    margin-top: 3px;\n    width: 16px;\n    height: 16px;\n    display: flex;\n    user-select: none;\n  }\n  & i.chevron-down.inside {\n    width: 16px;\n    height: 16px;\n    display: flex;\n    margin-left: -25px;\n    margin-top: 11px;\n    margin-right: 10px;\n    pointer-events: none;\n  }\n  & .divider {\n    width: 1px;\n    background-color: #eee;\n    margin: 0 4px;\n  }\n  @media (max-width: 1024px) {\n    & button.insert-comment {\n      display: none;\n    }\n  }\n"])), function (props) {
+var FloatingTextFormatPopup = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background: ", ";\n  vertical-align: middle;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 8px;\n  transition: opacity 0.5s;\n  padding: 12px;\n  will-change: transform;\n  z-index: 99;\n\n  & button.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    cursor: pointer;\n    vertical-align: middle;\n  }\n  & button.popup-item:disabled {\n    cursor: not-allowed;\n  }\n  & button.popup-item.spaced {\n    margin-right: 2px;\n  }\n  & button.popup-item i.format {\n    background-size: contain;\n    height: 18px;\n    width: 18px;\n    margin-top: 2px;\n    vertical-align: -0.25em;\n    display: flex;\n    opacity: 0.6;\n  }\n\n  & button.popup-item:disabled i.format {\n    opacity: 0.2;\n  }\n  & button.popup-item.active {\n    background-color: rgba(223, 232, 250, 0.3);\n  }\n  & button.popup-item.active i {\n    opacity: 1;\n  }\n  & .popup-item:hover:not([disabled]) {\n    background-color: #eee;\n  }\n  & select.popup-item {\n    border: 0;\n    display: flex;\n    background: none;\n    border-radius: 10px;\n    padding: 8px;\n    vertical-align: middle;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    width: 70px;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n  }\n  & select.code-language {\n    text-transform: capitalize;\n    width: 130px;\n  }\n\n  & .popup-item .text {\n    display: flex;\n    line-height: 20px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #777;\n    text-overflow: ellipsis;\n    width: 70px;\n    overflow: hidden;\n    height: 20px;\n    text-align: left;\n  }\n\n  & .popup-item .icon {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    user-select: none;\n    margin-right: 8px;\n    line-height: 16px;\n    background-size: contain;\n  }\n  & i.chevron-down {\n    margin-top: 3px;\n    width: 16px;\n    height: 16px;\n    display: flex;\n    user-select: none;\n  }\n  & i.chevron-down.inside {\n    width: 16px;\n    height: 16px;\n    display: flex;\n    margin-left: -25px;\n    margin-top: 11px;\n    margin-right: 10px;\n    pointer-events: none;\n  }\n  & .divider {\n    width: 1px;\n    background-color: #eee;\n    margin: 0 4px;\n  }\n  @media (max-width: 1024px) {\n    & button.insert-comment {\n      display: none;\n    }\n  }\n"])), function (props) {
   return props.popupColor;
 });
-var Action$1 = styled__default.button(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  border: 0;\n  display: flex;\n  background-color: inherit;\n  vertical-align: middle;\n  position: relative;\n  padding: 3px;\n  margin-right: 10px;\n  //margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
+var Action$1 = styled__default.button(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  border: 0;\n  display: flex;\n  background-color: inherit;\n  vertical-align: middle;\n  position: relative;\n  padding: 3px;\n  margin-right: 10px;\n  //margin: 8px 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: ", ";\n  border-radius: 50%;\n  ", "\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.isActive && "\n    color: " + props.hoverIconColor + ";\n    background-color: " + props.hoverBackgroundColor + ";\n  ";
@@ -39246,7 +39408,7 @@ function FormatMessagePlugin(_ref) {
   return null;
 }
 
-var _templateObject$L, _templateObject2$G, _templateObject3$z, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$j;
+var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$k;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -39441,7 +39603,7 @@ function EmojisPopup$1(_ref2) {
     }));
   }))));
 }
-var Container$j = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
+var Container$j = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  left: ", ";\n  right: ", ";\n  direction: ", ";\n  bottom: ", ";\n  width: 306px;\n  border: ", ";\n  box-sizing: border-box;\n  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  background: ", ";\n  z-index: 35;\n  //transform: scaleY(0);\n  height: 0;\n  overflow: hidden;\n  transform-origin: ", ";\n  transition: all 0.2s ease-in-out;\n  ", ";\n"])), function (props) {
   return props.leftPosition ? 'fixed' : props.relativePosition ? 'relative' : 'absolute';
 }, function (props) {
   return props.rightSide ? "calc(" + props.leftPosition + " - 250px)" : props.leftPosition || (props.rtlDirection ? '' : props.rightSide ? '' : '5px');
@@ -39462,40 +39624,40 @@ var Container$j = styled__default.div(_templateObject$L || (_templateObject$L =
 }, function (props) {
   return props.rendered && "\n    height: 225px;\n  ";
 });
-var EmojiHeader$1 = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
+var EmojiHeader$1 = styled__default.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  align-items: flex-end;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 22px;\n  text-transform: uppercase;\n  color: ", ";\n  display: flex;\n  padding: ", ";\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.padding || '6px 18px';
 });
-var EmojiSection$1 = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
-var EmojiCollection$1 = styled__default.span(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
+var EmojiSection$1 = styled__default.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  height: 180px;\n  overflow-x: hidden;\n\n  & ::selection {\n    color: inherit;\n    background: inherit;\n  }\n"])));
+var EmojiCollection$1 = styled__default.span(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  & > * {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var CollectionPointer$1 = styled__default.span(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose([""])));
-var AllEmojis$1 = styled__default.ul(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
-var EmojiFooter$1 = styled__default.div(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
+var CollectionPointer$1 = styled__default.span(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose([""])));
+var AllEmojis$1 = styled__default.ul(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  padding: 0 8px 8px;\n  margin: 0;\n"])));
+var EmojiFooter$1 = styled__default.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  height: 42px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: ", ";\n  border-bottom: ", ";\n  padding: 0 10px;\n  & > span {\n    width: 100%;\n    text-align: center;\n  }\n"])), function (props) {
   return props.emojisCategoryIconsPosition !== 'top' && "1px solid " + props.borderColor;
 }, function (props) {
   return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
 });
-var Emoji$1 = styled__default.li(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var Emoji$1 = styled__default.li(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 });
 
 var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
-var _circle$6, _path$1a;
-function _extends$1e() {
-  return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$6, _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 SvgSend(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1e({
+  return /*#__PURE__*/React.createElement("svg", _extends$1f({
     width: 32,
     height: 32,
     fill: "none",
@@ -39505,142 +39667,142 @@ function SvgSend(props) {
     cy: 16,
     r: 16,
     fill: "currentColor"
-  })), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
+  })), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
     d: "M10.953 18.945c-.545 1.46-.888 2.485-1.028 3.076-.439 1.856-.758 2.274.879 1.392 1.637-.882 9.56-5.251 11.329-6.222 2.304-1.266 2.335-1.167-.124-2.511-1.873-1.024-9.704-5.279-11.205-6.115-1.501-.835-1.318-.464-.879 1.392.142.6.49 1.634 1.043 3.105a3.143 3.143 0 002.35 1.98l4.595.88a.079.079 0 010 .155l-4.606.88a3.143 3.143 0 00-2.354 1.988z",
     fill: "#fff"
   })));
 }
 
-var _path$1b;
-function _extends$1f() {
-  return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
+var _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 SvgEye(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1f({
+  return /*#__PURE__*/React.createElement("svg", _extends$1g({
     width: 25,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
     d: "M12.5 5c6 0 10 5.6 10 7 0 1.4-4 7-10 7s-10-5.6-10-7c0-1.4 4-7 10-7zm0 2a5 5 0 100 10 5 5 0 000-10zm.001 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z",
     fill: "CurrentColor"
   })));
 }
 
-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 SvgAddAttachment(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1g({
+  return /*#__PURE__*/React.createElement("svg", _extends$1h({
     width: 24,
     height: 24,
     viewBox: "0 0 24.01 24.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
     d: "M12 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.286-10.286 10.286C6.32 22.286 1.714 17.68 1.714 12 1.714 6.32 6.32 1.714 12 1.714zm0 1.715a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 3.428c.473 0 .857.384.857.857v3.429h3.429a.857.857 0 010 1.714h-3.429v3.429a.857.857 0 11-1.714 0v-3.429H7.714a.857.857 0 110-1.714h3.429V7.714c0-.473.384-.857.857-.857z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1d;
-function _extends$1h() {
-  return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1e;
+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 SvgErrorCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1h({
+  return /*#__PURE__*/React.createElement("svg", _extends$1i({
     width: 25,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
     d: "M12.5 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.285-10.286 10.285C6.82 22.285 2.214 17.68 2.214 12 2.214 6.319 6.82 1.714 12.5 1.714zm0 1.714a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 11.657a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zm.063-8.228c.204 0 .332.032.443.091.112.06.2.148.26.26.06.111.091.24.091.443v5.269c0 .204-.032.331-.091.443a.623.623 0 01-.26.26c-.111.059-.24.09-.443.09h-.126c-.204 0-.332-.031-.443-.09a.624.624 0 01-.26-.26c-.06-.112-.091-.24-.091-.443V7.65c0-.203.032-.33.091-.442.06-.112.148-.2.26-.26.111-.06.24-.091.443-.091h.126z",
     fill: "#FFB73D"
   })));
 }
 
-var _path$1e;
-function _extends$1i() {
-  return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1f;
+function _extends$1j() {
+  return _extends$1j = 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$1i.apply(null, arguments);
+  }, _extends$1j.apply(null, arguments);
 }
 function SvgPlayRecord(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1i({
+  return /*#__PURE__*/React.createElement("svg", _extends$1j({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
     d: "M16.28 8.913c.793.48.793 1.692 0 2.172l-8.265 4.997c-.787.475-1.765-.126-1.765-1.086V5.002c0-.96.979-1.561 1.765-1.086l8.265 4.997z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1f;
-function _extends$1j() {
-  return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1g;
+function _extends$1k() {
+  return _extends$1k = 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$1j.apply(null, arguments);
+  }, _extends$1k.apply(null, arguments);
 }
 function SvgPauseRecord(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1j({
+  return /*#__PURE__*/React.createElement("svg", _extends$1k({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
     d: "M7.468 3.75c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h1.186zm6.25 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.162.088-.324.134-.77.134h-1.186c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.162-.088.324-.134.77-.134h1.186z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1g;
-function _extends$1k() {
-  return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1h;
+function _extends$1l() {
+  return _extends$1l = 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$1k.apply(null, arguments);
+  }, _extends$1l.apply(null, arguments);
 }
 function SvgStopRecord(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1k({
+  return /*#__PURE__*/React.createElement("svg", _extends$1l({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M4.421 5.441c-.254.5-.254 1.153-.254 2.46v4.2c0 1.306 0 1.96.254 2.459.224.439.581.796 1.02 1.02.5.254 1.153.254 2.46.254h4.2c1.306 0 1.96 0 2.459-.255.439-.223.796-.58 1.02-1.02.254-.498.254-1.152.254-2.459V7.9c0-1.306 0-1.96-.255-2.459a2.333 2.333 0 00-1.02-1.02c-.498-.254-1.152-.254-2.459-.254H7.9c-1.306 0-1.96 0-2.459.254-.439.224-.796.581-1.02 1.02z",
@@ -39648,18 +39810,18 @@ function SvgStopRecord(props) {
   })));
 }
 
-var _circle$7, _path$1h, _path2$8;
-function _extends$1l() {
-  return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$7, _path$1i, _path2$9;
+function _extends$1m() {
+  return _extends$1m = 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$1l.apply(null, arguments);
+  }, _extends$1m.apply(null, arguments);
 }
 function SvgRecordButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1l({
+  return /*#__PURE__*/React.createElement("svg", _extends$1m({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
@@ -39670,16 +39832,16 @@ function SvgRecordButton(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
+  })), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
     d: "M12.875 10.375a3.125 3.125 0 116.25 0v5a3.125 3.125 0 11-6.25 0v-5zM15.219 22.406a.781.781 0 111.562 0v1.563a.781.781 0 11-1.562 0v-1.563zM23.5 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0zM10.063 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0z",
     fill: "#fff"
-  })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
     d: "M16 22.25a7.5 7.5 0 007.5-7.5h-1.563a5.937 5.937 0 11-11.875 0H8.5a7.5 7.5 0 007.5 7.5z",
     fill: "#fff"
   })));
 }
 
-var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l;
+var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m;
 var shouldDraw = false;
 var DEFAULT_MAX_RECORDING_DURATION = 600;
 var AudioRecord = function AudioRecord(_ref) {
@@ -40257,10 +40419,10 @@ var AudioRecord = function AudioRecord(_ref) {
     iconColor: accentColor
   }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
 };
-var Container$k = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 32px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", ";\n  transition: all 0.3s ease-in-out;\n"])), function (props) {
+var Container$k = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 32px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", ";\n  transition: all 0.3s ease-in-out;\n"])), function (props) {
   return props.recording && "width: 400px";
 });
-var AudioWrapper = styled__default.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  width: ", ";\n  overflow: hidden;\n  margin: ", ";\n  background-color: ", ";\n  padding: ", ";\n  border-radius: 20px;\n"])), function (props) {
+var AudioWrapper = styled__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 36px;\n  width: ", ";\n  overflow: hidden;\n  margin: ", ";\n  background-color: ", ";\n  padding: ", ";\n  border-radius: 20px;\n"])), function (props) {
   return props.recording ? 'calc(100% - 84px)' : '0';
 }, function (props) {
   return props.recording ? '0 8px' : '0';
@@ -40269,10 +40431,10 @@ var AudioWrapper = styled__default.div(_templateObject2$H || (_templateObject2$H
 }, function (props) {
   return props.recording ? '0 12px 0 0' : '0';
 });
-var RecordIconWrapper = styled__default.span(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var RecordIconWrapper = styled__default.span(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization$1 = styled__default.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
+var AudioVisualization$1 = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
   var show = _ref5.show;
   return show ? '1' : '0';
 }, function (_ref6) {
@@ -40284,10 +40446,10 @@ var AudioVisualization$1 = styled__default.div(_templateObject4$w || (_templateO
 }, function (props) {
   return props.color;
 });
-var PlayPause$1 = styled__default.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var PlayPause$1 = styled__default.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var Canvas = styled__default.canvas(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
+var Canvas = styled__default.canvas(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
   var recording = _ref8.recording;
   return recording ? '300px' : '0';
 }, function (_ref9) {
@@ -40297,14 +40459,14 @@ var Canvas = styled__default.canvas(_templateObject6$n || (_templateObject6$n =
   var hide = _ref0.hide;
   return hide && '-1';
 });
-var Timer$2 = styled__default.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
+var Timer$2 = styled__default.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$N, _templateObject2$I, _templateObject3$B;
-var wave = styled.keyframes(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    transform: scaleY(0.5);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scaleY(1.2);\n    opacity: 1;\n  }\n"])));
-var Wrapper = styled__default.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
-var Bar$1 = styled__default.span(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
+var _templateObject$O, _templateObject2$J, _templateObject3$C;
+var wave = styled.keyframes(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    transform: scaleY(0.5);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scaleY(1.2);\n    opacity: 1;\n  }\n"])));
+var Wrapper = styled__default.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  height: 8px;\n  gap: 1.5px;\n"])));
+var Bar$1 = styled__default.span(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 3px;\n  height: 8px;\n  border-radius: 2px;\n  background: ", ";\n  animation: ", " 1s infinite;\n  animation-delay: ", "s;\n"])), function (props) {
   return props.borderColor;
 }, wave, function (_ref) {
   var delay = _ref.delay;
@@ -40330,29 +40492,29 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _path$1i;
-function _extends$1m() {
-  return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1j;
+function _extends$1n() {
+  return _extends$1n = 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$1m.apply(null, arguments);
+  }, _extends$1n.apply(null, arguments);
 }
 function SvgDotsVertica(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1m({
+  return /*#__PURE__*/React.createElement("svg", _extends$1n({
     width: 16,
     height: 16,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
     d: "M6.5 3a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 13a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12.5 3a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12.5 13a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z",
     fill: "#757D8B"
   })));
 }
 
-var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k;
+var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l;
 var CreatePollPopup = function CreatePollPopup(_ref) {
   var togglePopup = _ref.togglePopup,
     onCreate = _ref.onCreate;
@@ -40698,17 +40860,17 @@ var CreatePollPopup = function CreatePollPopup(_ref) {
     buttonText: 'Discard'
   })));
 };
-var QuestionInputWrapper = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var TextCounter = styled__default.span(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 12px;\n  font-size: 12px;\n  color: ", ";\n"])), function (props) {
+var QuestionInputWrapper = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var TextCounter = styled__default.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 12px;\n  font-size: 12px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var OptionsList$1 = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n  max-height: 240px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n"])));
-var OptionRow = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  cursor: grab;\n  border: ", ";\n  border-radius: 6px;\n  padding: 4px;\n  opacity: ", ";\n"])), function (props) {
+var OptionsList$1 = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  max-height: 240px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n"])));
+var OptionRow = styled__default.div(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  cursor: grab;\n  border: ", ";\n  border-radius: 6px;\n  padding: 4px;\n  opacity: ", ";\n"])), function (props) {
   return props.isDragOver ? '1px dashed #A0A1B0' : '1px solid transparent';
 }, function (props) {
   return props.isDragging ? 0.6 : 1;
 });
-var RemoveOptionIcon = styled__default(SvgClose)(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  opacity: ", ";\n"])), function (props) {
+var RemoveOptionIcon = styled__default(SvgClose)(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  opacity: ", ";\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.width;
@@ -40717,15 +40879,15 @@ var RemoveOptionIcon = styled__default(SvgClose)(_templateObject5$s || (_templat
 }, function (props) {
   return props.disabled ? 0.5 : 1;
 });
-var AddOptionButton = styled__default.button(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n"])), function (props) {
+var AddOptionButton = styled__default.button(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 0 0;\n  background: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n  padding-left: 32px;\n"])), function (props) {
   return props.color;
 });
-var Settings = styled__default.div(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 8px;\n"])));
-var SettingItem = styled__default.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: ", ";\n"])), function (props) {
+var Settings = styled__default.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 8px;\n"])));
+var SettingItem = styled__default.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$h, _templateObject0$g, _templateObject1$c, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$i, _templateObject0$h, _templateObject1$d, _templateObject10$7, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -42347,10 +42509,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     maxRecordingDuration: audioRecordingMaxDuration
   }))))))))));
 };
-var SendMessageWrapper = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 100;\n"])), function (props) {
+var SendMessageWrapper = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 100;\n"])), function (props) {
   return props.backgroundColor;
 });
-var Container$l = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 100;\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var Container$l = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n  margin: ", ";\n  border: ", ";\n  border-radius: ", ";\n  position: relative;\n  padding: ", ";\n  z-index: 100;\n\n  & span.rdw-suggestion-dropdown {\n    position: absolute;\n    bottom: 100%;\n    height: 160px;\n    min-width: 150px;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    padding: 6px 12px;\n    border: 1px solid #ccc;\n    background: #fff;\n    z-index: 99;\n  }\n\n  & .text_formatting_toolbar {\n    display: ", ";\n    position: fixed;\n    top: ", ";\n    left: ", ";\n  }\n\n  & .rdw-suggestion-option-active {\n    background-color: rgb(243, 245, 248);\n  }\n\n  & .custom_editor {\n    cursor: text;\n\n    & .rdw-mention-link {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin || '30px 0 16px';
 }, function (props) {
   return props.border || '';
@@ -42367,7 +42529,7 @@ var Container$l = styled__default.div(_templateObject2$K || (_templateObject2$K
 }, function (props) {
   return props.mentionColor;
 });
-var EditReplyMessageCont = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
+var EditReplyMessageCont = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  position: relative;\n  left: ", ";\n  bottom: ", ";\n  width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  z-index: 19;\n  box-sizing: content-box;\n"])), function (props) {
   return props.left || '0';
 }, function (props) {
   return props.bottom || '0';
@@ -42382,19 +42544,19 @@ var EditReplyMessageCont = styled__default.div(_templateObject3$D || (_templateO
 }, function (props) {
   return props.backgroundColor;
 });
-var EditMessageText = styled__default.p(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"])));
-var UploadErrorMessage = styled__default.p(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  position: absolute;\n  top: -30px;\n  color: ", ";\n"])), function (props) {
+var EditMessageText = styled__default.p(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n"])));
+var UploadErrorMessage = styled__default.p(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  position: absolute;\n  top: -30px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var CloseEditMode = styled__default.span(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var CloseEditMode = styled__default.span(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var UserName$1 = styled__default.span(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
-var ReplyMessageBody$1 = styled__default.div(_templateObject8$l || (_templateObject8$l = _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 EditReplyMessageHeader = styled__default.h4(_templateObject9$h || (_templateObject9$h = _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) {
+var UserName$1 = styled__default.span(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
+var ReplyMessageBody$1 = styled__default.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 EditReplyMessageHeader = styled__default.h4(_templateObject9$i || (_templateObject9$i = _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;
 });
-var AddAttachmentIcon = styled__default.span(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var AddAttachmentIcon = styled__default.span(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.height ? props.height + "px" : '36px';
 }, function (props) {
   return props.order === 0 || props.order ? props.order : 1;
@@ -42403,14 +42565,14 @@ var AddAttachmentIcon = styled__default.span(_templateObject0$g || (_templateObj
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled__default.div(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
+var SendMessageInputContainer = styled__default.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
 }, AddAttachmentIcon, function (props) {
   return props.iconColor;
 });
-var MessageInputWrapper = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
+var MessageInputWrapper = styled__default.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
   return props.channelDetailsIsOpen ? "calc(100% - " + (props.channelDetailsIsOpen ? 362 : 0) + "px)" : '';
 }, function (props) {
   return props.backgroundColor;
@@ -42539,23 +42701,23 @@ var copyToClipboard = function copyToClipboard(text) {
   }
 };
 
-var _path$1j;
-function _extends$1n() {
-  return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1k;
+function _extends$1o() {
+  return _extends$1o = 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$1n.apply(null, arguments);
+  }, _extends$1o.apply(null, arguments);
 }
 function SvgBottom(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1n({
+  return /*#__PURE__*/React.createElement("svg", _extends$1o({
     width: 12,
     height: 7,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
     d: "M1.5 1.5l4.5 4 4.5-4",
     stroke: "#676A7C",
     strokeWidth: 1.4,
@@ -42564,50 +42726,50 @@ function SvgBottom(props) {
   })));
 }
 
-var _path$1k, _path2$9;
-function _extends$1o() {
-  return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1l, _path2$a;
+function _extends$1p() {
+  return _extends$1p = 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$1o.apply(null, arguments);
+  }, _extends$1p.apply(null, arguments);
 }
 function SvgMarkAsUnRead(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1o({
+  return /*#__PURE__*/React.createElement("svg", _extends$1p({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
     d: "M18.25 7.189v3.843c0 .673 0 1.224-.037 1.671-.037.464-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.2-.81.28-1.273.318-.447.036-.998.036-1.671.036h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608c-.154.124-.307.246-.441.335-.129.085-.366.228-.67.228-.356 0-.692-.16-.914-.438-.19-.239-.226-.513-.24-.667-.015-.16-.015-.356-.015-.554v-1.228c-.358-.01-.655-.034-.924-.107a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.881.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037h6.342c-.19.464-.3.97-.31 1.5h-6c-.713 0-1.203 0-1.582.032-.37.03-.57.086-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.088.059 1.286a1.75 1.75 0 001.237 1.238c.199.053.463.06 1.286.06a.75.75 0 01.75.75v1.772L8.49 15.25c.355-.284.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.031.37-.03.57-.086.713-.16a1.75 1.75 0 00.765-.764c.074-.144.13-.343.16-.714.03-.38.031-.868.031-1.58V7.498c.53-.01 1.036-.12 1.5-.31z",
     fill: "currentColor"
-  })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
     d: "M5.833 6.334a.75.75 0 100 1.5H10a.75.75 0 000-1.5H5.833zM5.833 9.25a.75.75 0 100 1.5H12.5a.75.75 0 100-1.5H5.833zM19.167 3.333a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z",
     fill: "currentColor"
   })));
 }
 
-var _path$1l;
-function _extends$1p() {
-  return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1m;
+function _extends$1q() {
+  return _extends$1q = 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$1p.apply(null, arguments);
+  }, _extends$1q.apply(null, arguments);
 }
 function SvgMarkAsRead(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1p({
+  return /*#__PURE__*/React.createElement("svg", _extends$1q({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
@@ -42615,23 +42777,23 @@ function SvgMarkAsRead(props) {
   })));
 }
 
-var _path$1m;
-function _extends$1q() {
-  return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1n;
+function _extends$1r() {
+  return _extends$1r = 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$1q.apply(null, arguments);
+  }, _extends$1r.apply(null, arguments);
 }
 function SvgClear(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1q({
+  return /*#__PURE__*/React.createElement("svg", _extends$1r({
     width: 20,
     height: 21,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 3.833a6.667 6.667 0 100 13.333 6.667 6.667 0 000-13.333zm-8.333 6.666a8.333 8.333 0 1116.667 0 8.333 8.333 0 01-16.667 0zM6.911 7.41a.833.833 0 011.179 0L10 9.32l1.911-1.91A.833.833 0 0113.09 8.59l-1.911 1.91 1.91 1.911a.833.833 0 01-1.178 1.179l-1.91-1.911-1.911 1.91A.833.833 0 016.91 12.41l1.91-1.91-1.91-1.911a.833.833 0 010-1.179z",
@@ -42639,49 +42801,49 @@ function SvgClear(props) {
   })));
 }
 
-var _path$1n;
-function _extends$1r() {
-  return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1o;
+function _extends$1s() {
+  return _extends$1s = 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$1r.apply(null, arguments);
+  }, _extends$1s.apply(null, arguments);
 }
 function SvgBlockChannel(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1r({
+  return /*#__PURE__*/React.createElement("svg", _extends$1s({
     width: 20,
     height: 21,
     viewBox: "0 0 20.01 21.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
     d: "M10 2.167A8.336 8.336 0 001.667 10.5c0 4.6 3.733 8.334 8.333 8.334s8.333-3.734 8.333-8.334S14.6 2.167 10 2.167zm0 15A6.665 6.665 0 013.333 10.5c0-1.541.525-2.958 1.409-4.083l9.341 9.342A6.586 6.586 0 0110 17.167zm5.258-2.583L5.917 5.242A6.585 6.585 0 0110 3.834a6.665 6.665 0 016.667 6.666 6.586 6.586 0 01-1.409 4.084z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$1o, _path2$a;
-function _extends$1s() {
-  return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1p, _path2$b;
+function _extends$1t() {
+  return _extends$1t = 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$1s.apply(null, arguments);
+  }, _extends$1t.apply(null, arguments);
 }
 function SvgReport(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1s({
+  return /*#__PURE__*/React.createElement("svg", _extends$1t({
     width: 20,
     height: 21,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
     d: "M9.096 10.402a.882.882 0 011.765 0v3.627a.882.882 0 11-1.765 0v-3.627zM9.979 6.088a.98.98 0 100 1.96.98.98 0 000-1.96z",
     fill: "CurrentColor"
-  })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
+  })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 17.27A6.77 6.77 0 1010 3.73a6.77 6.77 0 000 13.542zm0 1.563a8.333 8.333 0 100-16.667 8.333 8.333 0 000 16.667z",
@@ -42689,52 +42851,52 @@ function SvgReport(props) {
   })));
 }
 
-var _path$1p;
-function _extends$1t() {
-  return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1q;
+function _extends$1u() {
+  return _extends$1u = 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$1t.apply(null, arguments);
+  }, _extends$1u.apply(null, arguments);
 }
 function SvgStar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1t({
+  return /*#__PURE__*/React.createElement("svg", _extends$1u({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
     d: "M12.888 7.002l3.823.367c1.33.128 1.739 1.43.711 2.285l-2.993 2.49 1.111 4.06c.365 1.332-.767 2.14-1.901 1.337l-3.637-2.573-3.637 2.573c-1.13.799-2.267-.005-1.902-1.338l1.111-4.058-2.993-2.491c-1.032-.86-.625-2.156.711-2.285l3.823-.367 1.684-3.889c.528-1.217 1.878-1.217 2.405 0l1.684 3.889z",
     fill: "#B2B6BE"
   })));
 }
 
-var _path$1q;
-function _extends$1u() {
-  return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1r;
+function _extends$1v() {
+  return _extends$1v = 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$1u.apply(null, arguments);
+  }, _extends$1v.apply(null, arguments);
 }
 function SvgUnpin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1u({
+  return /*#__PURE__*/React.createElement("svg", _extends$1v({
     width: 20,
     height: 21,
     viewBox: "0 0 20.01 21.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
     d: "M8.74 6.616l1.09 1.089 2.995 2.996 1.09 1.088 3.557 3.559a.77.77 0 01-1.09 1.09l-3.365-3.366-.306 3.982a1.059 1.059 0 01-1.805.667l-3.504-3.504-4.356 4.356c-.726.726-1.816-.363-1.09-1.089l4.357-4.356L2.81 9.624a1.059 1.059 0 01.667-1.805l3.982-.306L4.06 4.115a.77.77 0 011.09-1.09l3.59 3.591zm1.634-1.634l.32-.32a.385.385 0 00.106-.197l.34-1.699a.77.77 0 011.3-.394l5.717 5.718a.77.77 0 01-.393 1.3l-1.7.34a.385.385 0 00-.196.105l-.32.32a.77.77 0 01-1.09-1.089l.32-.32c.27-.269.612-.452.985-.526l.288-.058-3.683-3.683-.058.288a1.926 1.926 0 01-.526.984l-.32.32a.77.77 0 11-1.09-1.089zM8.701 8.755a1.925 1.925 0 01-.849.272l-3.214.247 6.617 6.618.248-3.214c.023-.303.117-.593.272-.849L8.7 8.755z",
     fill: "CurrentColor"
   })));
 }
 
-var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$m, _templateObject9$i, _templateObject0$h, _templateObject1$d, _templateObject10$7, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$n, _templateObject9$j, _templateObject0$i, _templateObject1$e, _templateObject10$8, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
@@ -43198,22 +43360,22 @@ var Actions = function Actions(_ref) {
     title: popupTitle
   })));
 };
-var Container$m = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$m = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled__default.div(_templateObject2$L || (_templateObject2$L = _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__default.span(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var ActionHeader = styled__default.div(_templateObject2$M || (_templateObject2$M = _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__default.span(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
-var ActionsMenu = styled__default.ul(_templateObject4$z || (_templateObject4$z = _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__default(SvgUnmuteNotifications)(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose([""])));
-var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose([""])));
-var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$o || (_templateObject7$o = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose([""])));
-var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose([""])));
-var DefaultBlockIcon = styled__default(SvgBlockChannel)(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu = styled__default.ul(_templateObject4$A || (_templateObject4$A = _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__default(SvgUnmuteNotifications)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose([""])));
+var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose([""])));
+var DefaultBlockIcon = styled__default(SvgBlockChannel)(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled__default(SvgReport)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose([""])));
 var DefaultClearIcon = styled__default(SvgClear)(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultDeleteChannelIcon = styled__default(SvgDeleteChannel)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose([""])));
@@ -43233,18 +43395,18 @@ var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3
   return props.hoverColor;
 });
 
-var _rect$2, _rect2, _path$1r;
-function _extends$1v() {
-  return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$2, _rect2, _path$1s;
+function _extends$1w() {
+  return _extends$1w = 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$1v.apply(null, arguments);
+  }, _extends$1w.apply(null, arguments);
 }
 function SvgAddMember(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1v({
+  return /*#__PURE__*/React.createElement("svg", _extends$1w({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -43264,35 +43426,35 @@ function SvgAddMember(props) {
     stroke: "#000",
     strokeOpacity: 0.08,
     strokeWidth: 0.5
-  })), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
+  })), _path$1s || (_path$1s = /*#__PURE__*/React.createElement("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$1s;
-function _extends$1w() {
-  return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1t;
+function _extends$1x() {
+  return _extends$1x = 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$1w.apply(null, arguments);
+  }, _extends$1x.apply(null, arguments);
 }
 function SvgMoreVert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1w({
+  return /*#__PURE__*/React.createElement("svg", _extends$1x({
     width: 4,
     height: 14,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1s || (_path$1s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1t || (_path$1t = /*#__PURE__*/React.createElement("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$R, _templateObject2$M, _templateObject3$F;
+var _templateObject$S, _templateObject2$N, _templateObject3$G;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -43392,12 +43554,12 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled__default.div(_templateObject2$M || (_templateObject2$M = _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__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled__default.div(_templateObject2$N || (_templateObject2$N = _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__default.span(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled__default.span(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -43434,7 +43596,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$n, _templateObject9$j, _templateObject0$i, _templateObject1$e, _templateObject10$8, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$k, _templateObject0$j, _templateObject1$f, _templateObject10$9, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -43906,40 +44068,40 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled__default.div(_templateObject$S || (_templateObject$S = _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__default.div(_templateObject2$N || (_templateObject2$N = _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__default.div(_templateObject$T || (_templateObject$T = _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__default.div(_templateObject2$O || (_templateObject2$O = _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__default.button(_templateObject3$G || (_templateObject3$G = _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__default.button(_templateObject3$H || (_templateObject3$H = _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__default.p(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var Description = styled__default.p(_templateObject4$B || (_templateObject4$B = _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__default.span(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled__default.span(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var LinkField = styled__default.div(_templateObject6$r || (_templateObject6$r = _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__default.div(_templateObject6$s || (_templateObject6$s = _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__default.input(_templateObject7$p || (_templateObject7$p = _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__default.input(_templateObject7$q || (_templateObject7$q = _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__default.button(_templateObject8$n || (_templateObject8$n = _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__default.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var SectionTitle = styled__default.h4(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var CopyButton = styled__default.button(_templateObject8$o || (_templateObject8$o = _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__default.div(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var SectionTitle = styled__default.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;
 });
-var HistoryRow = styled__default.div(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n"])));
-var Switch = styled__default.div(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  width: 44px;\n  height: 26px;\n  border-radius: 13px;\n  background: ", ";\n  position: relative;\n  cursor: pointer;\n  transition: background 0.2s ease;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 3px;\n    left: ", ";\n    width: 20px;\n    height: 20px;\n    background: #fff;\n    border-radius: 50%;\n    transition: left 0.2s ease;\n  }\n"])), function (p) {
+var HistoryRow = styled__default.div(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n"])));
+var Switch = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  width: 44px;\n  height: 26px;\n  border-radius: 13px;\n  background: ", ";\n  position: relative;\n  cursor: pointer;\n  transition: background 0.2s ease;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 3px;\n    left: ", ";\n    width: 20px;\n    height: 20px;\n    background: #fff;\n    border-radius: 50%;\n    transition: left 0.2s ease;\n  }\n"])), function (p) {
   return p.active ? p.accent : 'rgba(226,226,226,1)';
 }, function (p) {
   return p.active ? '22px' : '3px';
@@ -43954,7 +44116,7 @@ var QrHint = styled__default.p(_templateObject13$5 || (_templateObject13$5 = _ta
   return p.color;
 });
 
-var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$k;
+var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$p, _templateObject9$l;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -44276,18 +44438,18 @@ var Members = function Members(_ref) {
     channelId: channel.id
   })));
 };
-var Container$n = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled__default.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled__default.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled__default.h4(_templateObject5$w || (_templateObject5$w = _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$n = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled__default.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled__default.div(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled__default.h4(_templateObject5$x || (_templateObject5$x = _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__default.span(_templateObject6$s || (_templateObject6$s = _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__default.span(_templateObject6$t || (_templateObject6$t = _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__default.ul(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled__default.li(_templateObject8$o || (_templateObject8$o = _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__default.ul(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled__default.li(_templateObject8$p || (_templateObject8$p = _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;
@@ -44298,13 +44460,13 @@ var MemberItem$1 = styled__default.li(_templateObject8$o || (_templateObject8$o
 }, function (props) {
   return props.hoverBackground;
 }, EditMemberIcon, UserStatus);
-var RoleBadge = styled__default.span(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
+var RoleBadge = styled__default.span(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 2px 8px;\n  border-radius: 12px;\n  margin-left: 4px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 12px;\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n    opacity: 0.1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.backgroundColor;
 });
 
-var _templateObject$U, _templateObject2$P;
+var _templateObject$V, _templateObject2$Q;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -44350,21 +44512,21 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$o = styled__default.div(_templateObject$U || (_templateObject$U = _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__default.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\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$o = styled__default.div(_templateObject$V || (_templateObject$V = _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__default.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\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$1t;
-function _extends$1x() {
-  return _extends$1x = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$3, _path$1u;
+function _extends$1y() {
+  return _extends$1y = 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$1x.apply(null, arguments);
+  }, _extends$1y.apply(null, arguments);
 }
 function SvgFileIcon$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1x({
+  return /*#__PURE__*/React.createElement("svg", _extends$1y({
     width: 40,
     height: 40,
     fill: "none",
@@ -44376,7 +44538,7 @@ function SvgFileIcon$1(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1t || (_path$1t = /*#__PURE__*/React.createElement("path", {
+  })), _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.022 9.714c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.94-.687 1.864-.687 3.962v7.386c0 2.098.184 3.023.687 3.962a4.686 4.686 0 001.944 1.944c.938.502 1.864.687 3.962.687h3.957c2.098 0 3.023-.185 3.962-.687a4.686 4.686 0 001.944-1.944c.502-.939.687-1.864.687-3.962v-5.1c0-.683-.024-.99-.105-1.34a3.097 3.097 0 00-.399-.964c-.19-.305-.391-.539-.874-1.022l-4.175-4.175c-.483-.483-.717-.683-1.022-.874a3.095 3.095 0 00-.964-.399c-.293-.068-.556-.095-1.033-.103v-.002h-1.978zm0 1.715c-2.002 0-2.587.181-3.154.484a2.971 2.971 0 00-1.24 1.24c-.304.567-.485 1.153-.485 3.154v7.386c0 2.001.181 2.587.484 3.153.288.538.704.954 1.241 1.241.566.303 1.152.485 3.154.485h3.957c2.001 0 2.587-.182 3.153-.485a2.971 2.971 0 001.241-1.24c.303-.567.484-1.153.484-3.154v-5.1c0-.117 0-.219-.002-.308h-4.712A2.143 2.143 0 0120 16.144l.001-4.712-.15-.002h-1.83zm3.784.875l-.092-.091v3.93c0 .21.152.385.352.422l.077.006 3.932.002-.093-.093-4.176-4.176zm-6.092 12.839c0-.474.384-.857.858-.857H20A.857.857 0 1120 26h-3.428a.857.857 0 01-.858-.857zm.858-4.286a.857.857 0 000 1.715h6a.857.857 0 000-1.715h-6z",
@@ -44384,30 +44546,30 @@ function SvgFileIcon$1(props) {
   })));
 }
 
-var _path$1u;
-function _extends$1y() {
-  return _extends$1y = Object.assign ? Object.assign.bind() : function (n) {
+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$1y.apply(null, arguments);
+  }, _extends$1z.apply(null, arguments);
 }
 function SvgDownloadFile(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1y({
+  return /*#__PURE__*/React.createElement("svg", _extends$1z({
     width: 24,
     height: 24,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor"
-  }, props), _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1v || (_path$1v = /*#__PURE__*/React.createElement("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$V, _templateObject2$Q, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$p;
+var _templateObject$W, _templateObject2$R, _templateObject3$J, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$q;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -44523,30 +44685,30 @@ var Files = function Files(_ref) {
     }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null)));
   }));
 };
-var Container$p = styled__default.ul(_templateObject$V || (_templateObject$V = _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__default.a(_templateObject2$Q || (_templateObject2$Q = _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$p = styled__default.ul(_templateObject$W || (_templateObject$W = _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__default.a(_templateObject2$R || (_templateObject2$R = _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__default.span(_templateObject3$I || (_templateObject3$I = _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__default.span(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled__default.span(_templateObject3$J || (_templateObject3$J = _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__default.span(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled__default.span(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    color: ", ";\n    width: 40px;\n    height: 40px;\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont = styled__default.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    color: ", ";\n    width: 40px;\n    height: 40px;\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileThumb = styled__default.img(_templateObject6$t || (_templateObject6$t = _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__default.div(_templateObject7$r || (_templateObject7$r = _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__default.img(_templateObject6$u || (_templateObject6$u = _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__default.div(_templateObject7$s || (_templateObject7$s = _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__default.span(_templateObject8$p || (_templateObject8$p = _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__default.span(_templateObject8$q || (_templateObject8$q = _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';
@@ -44554,18 +44716,18 @@ var FileSizeAndDate = styled__default.span(_templateObject8$p || (_templateObjec
   return props.color;
 });
 
-var _rect$4, _path$1v;
-function _extends$1z() {
-  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$4, _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 SvgLinkIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1z({
+  return /*#__PURE__*/React.createElement("svg", _extends$1A({
     width: 40,
     height: 40,
     fill: "none",
@@ -44577,7 +44739,7 @@ function SvgLinkIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1v || (_path$1v = /*#__PURE__*/React.createElement("path", {
+  })), _path$1w || (_path$1w = /*#__PURE__*/React.createElement("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",
@@ -44585,7 +44747,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$J, _templateObject4$D, _templateObject5$y;
+var _templateObject$X, _templateObject2$S, _templateObject3$K, _templateObject4$E, _templateObject5$z;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -44616,25 +44778,25 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled__default.span(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkIconCont = styled__default.span(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled__default.span(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled__default.span(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled__default.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled__default.li(_templateObject4$D || (_templateObject4$D = _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__default.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled__default.li(_templateObject4$E || (_templateObject4$E = _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__default.span(_templateObject5$y || (_templateObject5$y = _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__default.span(_templateObject5$z || (_templateObject5$z = _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$X;
+var _templateObject$Y;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -44659,20 +44821,20 @@ var Links = function Links(_ref) {
     });
   }));
 };
-var Container$q = styled__default.ul(_templateObject$X || (_templateObject$X = _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$q = styled__default.ul(_templateObject$Y || (_templateObject$Y = _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$1w;
-function _extends$1A() {
-  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$5, _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 SvgVoicePreview(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1A({
+  return /*#__PURE__*/React.createElement("svg", _extends$1B({
     width: 40,
     height: 40,
     fill: "none",
@@ -44682,24 +44844,24 @@ function SvgVoicePreview(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1w || (_path$1w = /*#__PURE__*/React.createElement("path", {
+  })), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("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$1x;
-function _extends$1B() {
-  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$6, _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 SvgVoicePreviewPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1B({
+  return /*#__PURE__*/React.createElement("svg", _extends$1C({
     width: 40,
     height: 40,
     fill: "none",
@@ -44709,13 +44871,13 @@ function SvgVoicePreviewPause(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
+  })), _path$1y || (_path$1y = /*#__PURE__*/React.createElement("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$Y, _templateObject2$S, _templateObject3$K, _templateObject4$E, _templateObject5$z, _templateObject6$u, _templateObject7$s, _templateObject8$q;
+var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$t, _templateObject8$r;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -44840,32 +45002,32 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled__default.span(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileIconCont$1 = styled__default.span(_templateObject$Z || (_templateObject$Z = _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__default.span(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled__default.span(_templateObject2$T || (_templateObject2$T = _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__default.li(_templateObject3$K || (_templateObject3$K = _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__default.li(_templateObject3$L || (_templateObject3$L = _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__default.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled__default.span(_templateObject5$z || (_templateObject5$z = _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__default.div(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled__default.span(_templateObject5$A || (_templateObject5$A = _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__default.span(_templateObject6$u || (_templateObject6$u = _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: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled__default.span(_templateObject6$v || (_templateObject6$v = _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: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled__default.span(_templateObject7$s || (_templateObject7$s = _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__default.span(_templateObject7$t || (_templateObject7$t = _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__default.audio(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio = styled__default.audio(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$Z;
+var _templateObject$_;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -44896,9 +45058,9 @@ var Voices = function Voices(_ref) {
     });
   }));
 };
-var Container$r = styled__default.ul(_templateObject$Z || (_templateObject$Z = _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__default.ul(_templateObject$_ || (_templateObject$_ = _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$_, _templateObject2$T;
+var _templateObject$$, _templateObject2$U;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -45049,8 +45211,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$s = styled__default.div(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled__default.div(_templateObject2$T || (_templateObject2$T = _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$s = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled__default.div(_templateObject2$U || (_templateObject2$U = _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';
@@ -45068,17 +45230,17 @@ var DetailsTabHeader = styled__default.div(_templateObject2$T || (_templateObjec
   return props.activeTabColor;
 });
 
-var _templateObject$$, _templateObject2$U, _templateObject3$L, _templateObject4$F;
-var Container$t = styled__default.div(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$10, _templateObject2$V, _templateObject3$M, _templateObject4$G;
+var Container$t = styled__default.div(_templateObject$10 || (_templateObject$10 = _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__default.div(_templateObject2$U || (_templateObject2$U = _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__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
-var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
+var AvatarCont = styled__default.div(_templateObject2$V || (_templateObject2$V = _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__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$G || (_templateObject4$G = _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,
@@ -45333,7 +45495,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$10, _templateObject2$V, _templateObject3$M, _templateObject4$G, _templateObject5$A, _templateObject6$v, _templateObject7$t, _templateObject8$r, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$9, _templateObject11$9;
+var _templateObject$11, _templateObject2$W, _templateObject3$N, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$u, _templateObject8$s, _templateObject9$m, _templateObject0$k, _templateObject1$g, _templateObject10$a, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -45763,17 +45925,17 @@ var Details = function Details(_ref) {
     QRCodeIcon: QRCodeIcon
   }))));
 };
-var Container$u = styled__default.div(_templateObject$10 || (_templateObject$10 = _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$u = styled__default.div(_templateObject$11 || (_templateObject$11 = _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__default.div(_templateObject2$V || (_templateObject2$V = _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__default.div(_templateObject2$W || (_templateObject2$W = _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__default.div(_templateObject3$M || (_templateObject3$M = _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__default.div(_templateObject3$N || (_templateObject3$N = _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';
@@ -45782,38 +45944,38 @@ var ChatDetails = styled__default.div(_templateObject3$M || (_templateObject3$M
 }, function (props) {
   return props.thumbColor;
 });
-var AboutChannel = styled__default.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var AboutChannelTitle = styled__default.h4(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AboutChannel = styled__default.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled__default.h4(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  margin: 0;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AboutChannelText = styled__default.h3(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  margin: 0;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var AboutChannelText = styled__default.h3(_templateObject6$w || (_templateObject6$w = _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__default.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$4 = styled__default.div(_templateObject7$u || (_templateObject7$u = _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__default.div(_templateObject8$r || (_templateObject8$r = _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__default.div(_templateObject8$s || (_templateObject8$s = _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__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
+var ChannelAvatarAndName = styled__default.div(_templateObject9$m || (_templateObject9$m = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
   return props.direction;
 });
-var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
+var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$k || (_templateObject0$k = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
   return props.isDirect ? '200px' : '168px';
 }, function (props) {
   return props.color;
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled__default.div(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
-var EditButton = styled__default.span(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
+var ChannelNameWrapper = styled__default.div(_templateObject1$g || (_templateObject1$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var EditButton = styled__default.span(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 var PhoneNumberContainer = styled__default.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$11;
+var _templateObject$12;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -46044,31 +46206,31 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     QRCodeIcon: QRCodeIcon
   })));
 };
-var DetailsWrapper = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
+var DetailsWrapper = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
 
-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 SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1C({
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
     width: 32,
     height: 32,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1y || (_path$1y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("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$12, _templateObject2$W;
+var _templateObject$13, _templateObject2$X;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -46151,7 +46313,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__default.div(_templateObject$12 || (_templateObject$12 = _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__default.div(_templateObject$13 || (_templateObject$13 = _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";
@@ -46162,7 +46324,7 @@ var BottomButton = styled__default.div(_templateObject$12 || (_templateObject$12
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = styled__default.span(_templateObject2$W || (_templateObject2$W = _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__default.span(_templateObject2$X || (_templateObject2$X = _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';
@@ -46174,29 +46336,29 @@ var UnreadCount$1 = styled__default.span(_templateObject2$W || (_templateObject2
   return props.textColor || '#fff';
 });
 
-var _path$1z, _path2$b;
-function _extends$1D() {
-  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1A, _path2$c;
+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 SvgMention(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1D({
+  return /*#__PURE__*/React.createElement("svg", _extends$1E({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("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,
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
+  })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
     d: "M15.6 8.4v4.5a2.7 2.7 0 005.4 0V12a9 9 0 10-3.528 7.145",
     stroke: "currentColor",
     strokeWidth: 1.8,
@@ -46205,7 +46367,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$13, _templateObject2$X;
+var _templateObject$14, _templateObject2$Y;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -46348,7 +46510,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__default.div(_templateObject$13 || (_templateObject$13 = _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__default.div(_templateObject$14 || (_templateObject$14 = _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";
@@ -46359,7 +46521,7 @@ var BottomButton$1 = styled__default.div(_templateObject$13 || (_templateObject$
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled__default.span(_templateObject2$X || (_templateObject2$X = _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__default.span(_templateObject2$Y || (_templateObject2$Y = _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';