sceyt-chat-react-uikit 1.7.7-beta.14 → 1.7.7-beta.16

package/index.js

@@ -2671,6 +2671,13 @@ var CHANNEL_GROUP_TYPES = {
   DIRECT_PRIVATE: 'chats_groups',
   PUBLIC: 'channels'
 };
+var FIXED_TIMER_OPTIONS = {
+  off: 0,
+  '1day': 60 * 60 * 24,
+  '1week': 60 * 60 * 24 * 7,
+  '1month': 60 * 60 * 24 * 30,
+  custom: 60 * 60 * 24 * 2
+};
 
 // A type of promise-like that resolves synchronously and supports only one observer
 const _Pact = /*#__PURE__*/(function() {
@@ -9036,6 +9043,7 @@ var memberCount = 10;
 var disableFrowardMentionsCount = false;
 var onUpdateChannel = function onUpdateChannel() {};
 var useInviteLink = false;
+var disappearingSettings;
 var inviteLinkOptions = null;
 function setBaseUrlForInviteMembers(url) {
   baseUrlForInviteMembers = url;
@@ -9254,6 +9262,12 @@ var setShowChannelDetails = function setShowChannelDetails(state) {
 var getShowChannelDetails = function getShowChannelDetails() {
   return showChannelDetails;
 };
+var setDisappearingSettings = function setDisappearingSettings(settings) {
+  disappearingSettings = settings;
+};
+var getDisappearingSettings = function getDisappearingSettings() {
+  return disappearingSettings;
+};
 var sortChannelByLastMessage = function sortChannelByLastMessage(channels) {
   return channels.sort(function (a, b) {
     var aPinnedAt = a.pinnedAt ? new Date(a.pinnedAt) : null;
@@ -9702,6 +9716,7 @@ var UPDATE_CHANNEL_INVITE_KEY = 'UPDATE_CHANNEL_INVITE_KEY';
 var DESTROY_SESSION = 'DESTROY_SESSION';
 var GET_CHANNEL_BY_INVITE_KEY = 'GET_CHANNEL_BY_INVITE_KEY';
 var JOIN_TO_CHANNEL_WITH_INVITE_KEY = 'JOIN_TO_CHANNEL_WITH_INVITE_KEY';
+var SET_MESSAGE_RETENTION_PERIOD = 'SET_MESSAGE_RETENTION_PERIOD';
 var CHANNEL_EVENT_TYPES = {
   POLL_ADDED: 'POLL_ADDED',
   POLL_DELETED: 'POLL_DELETED',
@@ -10042,6 +10057,48 @@ var hashString = function hashString(str) {
     return Promise.reject(e);
   }
 };
+var formatDisappearingMessageTime = function formatDisappearingMessageTime(periodInMilliseconds) {
+  var _getDisappearingSetti;
+  if (!periodInMilliseconds) return 'Off';
+  var periodInSeconds = periodInMilliseconds / 1000;
+  switch (periodInSeconds) {
+    case FIXED_TIMER_OPTIONS['1day']:
+      return '1 day';
+    case FIXED_TIMER_OPTIONS['1week']:
+      return '1 week';
+    case FIXED_TIMER_OPTIONS['1month']:
+      return '1 month';
+  }
+  var customOptions = ((_getDisappearingSetti = getDisappearingSettings()) === null || _getDisappearingSetti === void 0 ? void 0 : _getDisappearingSetti.customOptions) || [];
+  var customMatch = customOptions.find(function (option) {
+    return option.seconds === periodInSeconds;
+  });
+  if (customMatch) return customMatch.label;
+  var SECONDS_PER_MINUTE = 60;
+  var SECONDS_PER_HOUR = SECONDS_PER_MINUTE * 60;
+  var SECONDS_PER_DAY = SECONDS_PER_HOUR * 24;
+  var DAYS_PER_WEEK = 7;
+  var DAYS_PER_MONTH = 30;
+  var days = Math.floor(periodInSeconds / SECONDS_PER_DAY);
+  var weeks = Math.floor(days / DAYS_PER_WEEK);
+  var months = Math.floor(days / DAYS_PER_MONTH);
+  var hours = Math.floor(periodInSeconds / SECONDS_PER_HOUR);
+  var minutes = Math.floor(periodInSeconds / SECONDS_PER_MINUTE);
+  switch (true) {
+    case months > 0:
+      return months + " " + (months === 1 ? 'month' : 'months');
+    case weeks > 0:
+      return weeks + " " + (weeks === 1 ? 'week' : 'weeks');
+    case days > 0:
+      return days + " " + (days === 1 ? 'day' : 'days');
+    case hours > 0:
+      return hours + " " + (hours === 1 ? 'hour' : 'hours');
+    case minutes > 0:
+      return minutes + " " + (minutes === 1 ? 'minute' : 'minutes');
+    default:
+      return periodInSeconds + " " + (periodInSeconds === 1 ? 'second' : 'seconds');
+  }
+};
 
 var GET_MESSAGES = 'GET_MESSAGES';
 var GET_MESSAGE = 'GET_MESSAGE';
@@ -10161,10 +10218,13 @@ function setMessageToEditAC(message) {
     message: message
   });
 }
-function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior) {
+function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, scrollToMessage) {
   if (highlight === void 0) {
     highlight = true;
   }
+  if (scrollToMessage === void 0) {
+    scrollToMessage = true;
+  }
   return {
     type: GET_MESSAGES,
     payload: {
@@ -10174,7 +10234,8 @@ function getMessagesAC(channel, loadWithLastMessage, messageId, limit, withDeliv
       limit: limit,
       withDeliveredMessages: withDeliveredMessages,
       highlight: highlight,
-      behavior: behavior
+      behavior: behavior,
+      scrollToMessage: scrollToMessage
     }
   };
 }
@@ -12735,6 +12796,15 @@ var joinChannelWithInviteKeyAC = function joinChannelWithInviteKeyAC(key) {
     }
   };
 };
+var setMessageRetentionPeriodAC = function setMessageRetentionPeriodAC(channelId, periodInMilliseconds) {
+  return {
+    type: SET_MESSAGE_RETENTION_PERIOD,
+    payload: {
+      channelId: channelId,
+      periodInMilliseconds: periodInMilliseconds
+    }
+  };
+};
 
 var getUsersAC = function getUsersAC(params) {
   return {
@@ -13586,7 +13656,9 @@ var Button = styled__default.button(_templateObject12 || (_templateObject12 = _t
 }, function (props) {
   return props.disabled ? props.disabledOpacity || 0.5 : 0.8;
 });
-var PopupName = styled__default.h3(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 23px;\n  color: ", ";\n  margin: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  word-break: break-word;\n\n  ", "\n"])), function (props) {
+var PopupName = styled__default.h3(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  word-break: break-word;\n\n  ", "\n"])), function (props) {
+  return props.lineHeight || '23px';
+}, function (props) {
   return props.color;
 }, function (props) {
   return props.marginTop;
@@ -13632,8 +13704,10 @@ var Popup = styled__default.div(_templateObject15 || (_templateObject15 = _tagge
 }, function (props) {
   return props.isLoading && "\n        user-select: none;\n\n        & > * {\n           pointer-events: none;\n           user-select: none;\n        }\n\n         " + ButtonBlock + " {\n          a, button {\n            pointer-events: none;\n            user-select: none;\n            opacity: 0.7;\n          }\n        }\n    ";
 });
-var PopupBody = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  margin-bottom: 8px;\n  height: ", ";\n"])), function (props) {
+var PopupBody = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  margin-bottom: ", ";\n  height: ", ";\n"])), function (props) {
   return (props.paddingV || 0) + " " + (props.paddingH || 0);
+}, function (props) {
+  return props.marginBottom || '8px';
 }, function (props) {
   return props.withFooter ? "calc(100% - (54px + " + props.paddingV + "))" : 'calc(100% - 54px)';
 });
@@ -15920,7 +15994,8 @@ var _marked$2 = /*#__PURE__*/_regenerator().m(createChannel),
   _marked32 = /*#__PURE__*/_regenerator().m(updateChannelInviteKey),
   _marked33 = /*#__PURE__*/_regenerator().m(getChannelByInviteKey),
   _marked34 = /*#__PURE__*/_regenerator().m(joinChannelWithInviteKey),
-  _marked35 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
+  _marked35 = /*#__PURE__*/_regenerator().m(setMessageRetentionPeriod),
+  _marked36 = /*#__PURE__*/_regenerator().m(ChannelsSaga);
 function createChannel(action) {
   var payload, channelData, dontCreateIfNotExists, callback, SceytChatClient, createChannelData, fileToUpload, isSelfChannel, channelIsExistOnAllChannels, createdChannel, allChannels, memberId, checkChannelExist, messageToSend, _allChannels, _memberId, _t;
   return _regenerator().w(function (_context) {
@@ -18205,121 +18280,177 @@ function joinChannelWithInviteKey(action) {
     }
   }, _marked34, null, [[0, 6]]);
 }
-function ChannelsSaga() {
+function setMessageRetentionPeriod(action) {
+  var payload, channelId, periodInMilliseconds, channel, messageToSend, _t35;
   return _regenerator().w(function (_context35) {
-    while (1) switch (_context35.n) {
+    while (1) switch (_context35.p = _context35.n) {
       case 0:
+        _context35.p = 0;
+        payload = action.payload;
+        channelId = payload.channelId, periodInMilliseconds = payload.periodInMilliseconds;
         _context35.n = 1;
-        return effects.takeLatest(CREATE_CHANNEL, createChannel);
+        return effects.call(getChannelFromMap, channelId);
       case 1:
+        channel = _context35.v;
+        if (!channel) {
+          channel = getChannelFromAllChannels(channelId);
+        }
+        if (!channel) {
+          _context35.n = 4;
+          break;
+        }
         _context35.n = 2;
-        return effects.takeLatest(GET_CHANNELS, getChannels);
+        return effects.call(channel.setMessageRetentionPeriod, periodInMilliseconds);
       case 2:
         _context35.n = 3;
-        return effects.takeLatest(SEARCH_CHANNELS, searchChannels);
+        return effects.put(updateChannelDataAC(channelId, {
+          messageRetentionPeriod: periodInMilliseconds
+        }));
       case 3:
+        updateChannelOnAllChannels(channelId, {
+          messageRetentionPeriod: periodInMilliseconds
+        });
+        messageToSend = {
+          metadata: {
+            autoDeletePeriod: periodInMilliseconds.toString()
+          },
+          body: 'ADM',
+          mentionedUsers: [],
+          attachments: [],
+          type: 'system'
+        };
         _context35.n = 4;
+        return effects.put(sendTextMessageAC(messageToSend, channelId, CONNECTION_STATUS.CONNECTED));
+      case 4:
+        _context35.n = 6;
+        break;
+      case 5:
+        _context35.p = 5;
+        _t35 = _context35.v;
+        log.error('ERROR in set message retention period', _t35);
+      case 6:
+        return _context35.a(2);
+    }
+  }, _marked35, null, [[0, 5]]);
+}
+function ChannelsSaga() {
+  return _regenerator().w(function (_context36) {
+    while (1) switch (_context36.n) {
+      case 0:
+        _context36.n = 1;
+        return effects.takeLatest(CREATE_CHANNEL, createChannel);
+      case 1:
+        _context36.n = 2;
+        return effects.takeLatest(GET_CHANNELS, getChannels);
+      case 2:
+        _context36.n = 3;
+        return effects.takeLatest(SEARCH_CHANNELS, searchChannels);
+      case 3:
+        _context36.n = 4;
         return effects.takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
       case 4:
-        _context35.n = 5;
+        _context36.n = 5;
         return effects.takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
       case 5:
-        _context35.n = 6;
+        _context36.n = 6;
         return effects.takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
       case 6:
-        _context35.n = 7;
+        _context36.n = 7;
         return effects.takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
       case 7:
-        _context35.n = 8;
+        _context36.n = 8;
         return effects.takeEvery(SWITCH_CHANNEL, switchChannel);
       case 8:
-        _context35.n = 9;
+        _context36.n = 9;
         return effects.takeLatest(LEAVE_CHANNEL, leaveChannel);
       case 9:
-        _context35.n = 10;
+        _context36.n = 10;
         return effects.takeLatest(DELETE_CHANNEL, deleteChannel);
       case 10:
-        _context35.n = 11;
+        _context36.n = 11;
         return effects.takeLatest(BLOCK_CHANNEL, blockChannel);
       case 11:
-        _context35.n = 12;
+        _context36.n = 12;
         return effects.takeLatest(UPDATE_CHANNEL, updateChannel);
       case 12:
-        _context35.n = 13;
+        _context36.n = 13;
         return effects.takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
       case 13:
-        _context35.n = 14;
+        _context36.n = 14;
         return effects.takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
       case 14:
-        _context35.n = 15;
+        _context36.n = 15;
         return effects.takeLatest(MARK_VOICE_MESSAGE_AS_PLAYED, markVoiceMessageAsPlayed);
       case 15:
-        _context35.n = 16;
+        _context36.n = 16;
         return effects.takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
       case 16:
-        _context35.n = 17;
+        _context36.n = 17;
         return effects.takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
       case 17:
-        _context35.n = 18;
+        _context36.n = 18;
         return effects.takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
       case 18:
-        _context35.n = 19;
+        _context36.n = 19;
         return effects.takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
       case 19:
-        _context35.n = 20;
+        _context36.n = 20;
         return effects.takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 20:
-        _context35.n = 21;
+        _context36.n = 21;
         return effects.takeLatest(CHECK_USER_STATUS, checkUsersStatus);
       case 21:
-        _context35.n = 22;
+        _context36.n = 22;
         return effects.takeLatest(SEND_TYPING, sendTyping);
       case 22:
-        _context35.n = 23;
+        _context36.n = 23;
         return effects.takeLatest(SEND_RECORDING, sendRecording);
       case 23:
-        _context35.n = 24;
+        _context36.n = 24;
         return effects.takeLatest(PIN_CHANNEL, pinChannel);
       case 24:
-        _context35.n = 25;
+        _context36.n = 25;
         return effects.takeLatest(UNPIN_CHANNEL, unpinChannel);
       case 25:
-        _context35.n = 26;
+        _context36.n = 26;
         return effects.takeLatest(CLEAR_HISTORY, clearHistory);
       case 26:
-        _context35.n = 27;
+        _context36.n = 27;
         return effects.takeLatest(JOIN_TO_CHANNEL, joinChannel);
       case 27:
-        _context35.n = 28;
+        _context36.n = 28;
         return effects.takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
       case 28:
-        _context35.n = 29;
+        _context36.n = 29;
         return effects.takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
       case 29:
-        _context35.n = 30;
+        _context36.n = 30;
         return effects.takeLatest(GET_CHANNEL_MENTIONS, getChannelMentions);
       case 30:
-        _context35.n = 31;
+        _context36.n = 31;
         return effects.takeLatest(CREATE_CHANNEL_INVITE_KEY, createChannelInviteKey);
       case 31:
-        _context35.n = 32;
+        _context36.n = 32;
         return effects.takeLatest(UPDATE_CHANNEL_INVITE_KEY, updateChannelInviteKey);
       case 32:
-        _context35.n = 33;
+        _context36.n = 33;
         return effects.takeLatest(REGENERATE_CHANNEL_INVITE_KEY, regenerateChannelInviteKey);
       case 33:
-        _context35.n = 34;
+        _context36.n = 34;
         return effects.takeLatest(GET_CHANNEL_INVITE_KEYS, getChannelInviteKeys);
       case 34:
-        _context35.n = 35;
+        _context36.n = 35;
         return effects.takeLatest(GET_CHANNEL_BY_INVITE_KEY, getChannelByInviteKey);
       case 35:
-        _context35.n = 36;
+        _context36.n = 36;
         return effects.takeLatest(JOIN_TO_CHANNEL_WITH_INVITE_KEY, joinChannelWithInviteKey);
       case 36:
-        return _context35.a(2);
+        _context36.n = 37;
+        return effects.takeLatest(SET_MESSAGE_RETENTION_PERIOD, setMessageRetentionPeriod);
+      case 37:
+        return _context36.a(2);
     }
-  }, _marked35);
+  }, _marked36);
 }
 
 function rgbaToThumbHash(w, h, rgba) {
@@ -19061,7 +19192,7 @@ function sendMessage(action) {
         }
       case 11:
         _loop2 = /*#__PURE__*/_regenerator().m(function _callee2() {
-          var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, messageToUpdate, channelUpdateParam, pendingMessage, _t;
+          var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, messageToUpdate, channelUpdateParam, pendingMessage, connectionIsDisconnected, _t;
           return _regenerator().w(function (_context2) {
             while (1) switch (_context2.p = _context2.n) {
               case 0:
@@ -19196,7 +19327,7 @@ function sendMessage(action) {
               case 12:
                 throw new Error('Connection required to send message');
               case 13:
-                _context2.n = 17;
+                _context2.n = 19;
                 break;
               case 14:
                 _context2.p = 14;
@@ -19205,24 +19336,31 @@ function sendMessage(action) {
                   return pendingMessage.tid === messageToSend.tid;
                 });
                 if (!(channel && pendingMessage && action.type !== RESEND_MESSAGE)) {
-                  _context2.n = 15;
+                  _context2.n = 17;
                   break;
                 }
-                if (!isAddToPendingMessagesMap) {
-                  _context2.n = 15;
+                connectionIsDisconnected = store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED;
+                if (!(isAddToPendingMessagesMap && connectionIsDisconnected)) {
+                  _context2.n = 16;
                   break;
                 }
                 _context2.n = 15;
                 return effects.call(addPendingMessage, message, pendingMessage, channel);
               case 15:
+                _context2.n = 17;
+                break;
+              case 16:
+                _context2.n = 17;
+                return effects.put(removePendingMessageAC(channel.id, pendingMessage.tid));
+              case 17:
                 log.error('Error on uploading attachment', messageToSend.tid, _t);
                 if (!(messageToSend.attachments && messageToSend.attachments.length)) {
-                  _context2.n = 16;
+                  _context2.n = 18;
                   break;
                 }
-                _context2.n = 16;
+                _context2.n = 18;
                 return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, messageToSend.attachments[0].tid));
-              case 16:
+              case 18:
                 updateMessageOnMap(channel.id, {
                   messageId: messageToSend.tid,
                   params: {
@@ -19232,11 +19370,11 @@ function sendMessage(action) {
                 updateMessageOnAllMessages(messageToSend.tid, {
                   state: MESSAGE_STATUS.FAILED
                 });
-                _context2.n = 17;
+                _context2.n = 19;
                 return effects.put(updateMessageAC(messageToSend.tid, {
                   state: MESSAGE_STATUS.FAILED
                 }));
-              case 17:
+              case 19:
                 return _context2.a(2);
             }
           }, _callee2, null, [[1, 14]]);
@@ -19260,12 +19398,18 @@ function sendMessage(action) {
         _t2 = _context3.v;
         log.error('error on send message ... ', _t2);
       case 16:
+        _context3.p = 16;
+        _context3.n = 17;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 17:
+        return _context3.f(16);
+      case 18:
         return _context3.a(2);
     }
-  }, _marked$3, null, [[1, 15]]);
+  }, _marked$3, null, [[1, 15, 16, 18]]);
 }
 function sendTextMessage(action) {
-  var payload, message, connectionState, channelId, isAddToPendingMessagesMap, channel, sendMessageTid, pendingMessage, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, createdMessage, messageToSend, _messageResponse, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t3;
+  var payload, message, connectionState, channelId, isAddToPendingMessagesMap, channel, sendMessageTid, pendingMessage, activeChannelId, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, createdMessage, messageToSend, _messageResponse, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, connectionIsDisconnected, _t3;
   return _regenerator().w(function (_context4) {
     while (1) switch (_context4.p = _context4.n) {
       case 0:
@@ -19421,25 +19565,29 @@ function sendTextMessage(action) {
       case 15:
         throw new Error('Connection required to send message');
       case 16:
-        _context4.n = 17;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 17:
         _context4.n = 21;
         break;
-      case 18:
-        _context4.p = 18;
+      case 17:
+        _context4.p = 17;
         _t3 = _context4.v;
         if (!(activeChannelId === channel.id && pendingMessage && action.type !== RESEND_MESSAGE)) {
-          _context4.n = 19;
+          _context4.n = 20;
           break;
         }
-        if (!isAddToPendingMessagesMap) {
+        connectionIsDisconnected = store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED;
+        if (!(isAddToPendingMessagesMap && connectionIsDisconnected)) {
           _context4.n = 19;
           break;
         }
-        _context4.n = 19;
+        _context4.n = 18;
         return effects.call(addPendingMessage, message, pendingMessage, channel);
+      case 18:
+        _context4.n = 20;
+        break;
       case 19:
+        _context4.n = 20;
+        return effects.put(removePendingMessageAC(channel.id, pendingMessage.tid));
+      case 20:
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
           messageId: sendMessageTid,
@@ -19448,26 +19596,29 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 20;
+          _context4.n = 21;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 20;
+        _context4.n = 21;
         return effects.put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 20:
-        _context4.n = 21;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 21:
+        _context4.p = 21;
+        _context4.n = 22;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 22:
+        return _context4.f(21);
+      case 23:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 18]]);
+  }, _marked2$2, null, [[3, 17, 21, 23]]);
 }
 function forwardMessage(action) {
-  var payload, message, channelId, connectionState, isForward, isAddToPendingMessagesMap, pendingMessage, channel, activeChannelId, messageTid, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
+  var payload, message, channelId, connectionState, isForward, isAddToPendingMessagesMap, pendingMessage, channel, activeChannelId, messageTid, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, connectionIsDisconnected, _t4;
   return _regenerator().w(function (_context5) {
     while (1) switch (_context5.p = _context5.n) {
       case 0:
@@ -19637,24 +19788,31 @@ function forwardMessage(action) {
       case 14:
         throw new Error('Connection required to forward message');
       case 15:
-        _context5.n = 20;
+        _context5.n = 21;
         break;
       case 16:
         _context5.p = 16;
         _t4 = _context5.v;
         if (!(pendingMessage && channel && action.type !== RESEND_MESSAGE)) {
-          _context5.n = 17;
+          _context5.n = 19;
           break;
         }
-        if (!isAddToPendingMessagesMap) {
-          _context5.n = 17;
+        connectionIsDisconnected = store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED;
+        if (!(isAddToPendingMessagesMap && connectionIsDisconnected)) {
+          _context5.n = 18;
           break;
         }
         _context5.n = 17;
         return effects.call(addPendingMessage, message, pendingMessage, channel);
       case 17:
+        _context5.n = 19;
+        break;
+      case 18:
+        _context5.n = 19;
+        return effects.put(removePendingMessageAC(channel.id, pendingMessage.tid));
+      case 19:
         if (!(channel && messageTid)) {
-          _context5.n = 18;
+          _context5.n = 20;
           break;
         }
         updateMessageOnMap(channel.id, {
@@ -19664,28 +19822,28 @@ function forwardMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context5.n = 18;
+          _context5.n = 20;
           break;
         }
         updateMessageOnAllMessages(messageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context5.n = 18;
+        _context5.n = 20;
         return effects.put(updateMessageAC(messageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 18:
-        _context5.n = 19;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        log.error('error on forward message ... ', _t4);
       case 20:
-        _context5.n = 21;
-        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        log.error('error on forward message ... ', _t4);
       case 21:
+        _context5.p = 21;
+        _context5.n = 22;
+        return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 22:
+        return _context5.f(21);
+      case 23:
         return _context5.a(2);
     }
-  }, _marked3$1, null, [[1, 16]]);
+  }, _marked3$1, null, [[1, 16, 21, 23]]);
 }
 function resendMessage(action) {
   var payload, message, connectionState, channelId, sendAttachmentsAsSeparateMessage, isVoiceMessage;
@@ -19930,7 +20088,7 @@ var sendPendingMessages = /*#__PURE__*/_regenerator().m(function _callee3(connec
   }, _callee3, null, [[3, 9]]);
 });
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, connectionState, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _updatedMessages, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, waitToSendPendingMessages, _t0, _t1, _t10, _t11, _t12, _t13, _t14, _t15, _t16, _t17, _t18, _t19, _t20, _t21;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, scrollToMessage, connectionState, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _updatedMessages, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, waitToSendPendingMessages, _t0, _t1, _t10, _t11, _t12, _t13, _t14, _t15, _t16, _t17, _t18, _t19, _t20, _t21;
   return _regenerator().w(function (_context0) {
     while (1) switch (_context0.p = _context0.n) {
       case 0:
@@ -19938,7 +20096,7 @@ function getMessagesQuery(action) {
         _context0.n = 1;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 1:
-        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior;
+        _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight, behavior = _action$payload.behavior, scrollToMessage = _action$payload.scrollToMessage;
         connectionState = store.getState().UserReducer.connectionStatus;
         if (!(channel.id && !channel.isMockChannel)) {
           _context0.n = 76;
@@ -20059,7 +20217,7 @@ function getMessagesQuery(action) {
         return effects.put(setMessagesHasNextAC(false));
       case 17:
         setHasNextCached(false);
-        if (!messageId) {
+        if (!(messageId && scrollToMessage)) {
           _context0.n = 18;
           break;
         }
@@ -20170,6 +20328,10 @@ function getMessagesQuery(action) {
         _context0.n = 35;
         return effects.put(setMessagesHasNextAC(true));
       case 35:
+        if (!scrollToMessage) {
+          _context0.n = 36;
+          break;
+        }
         _context0.n = 36;
         return effects.put(setScrollToMessagesAC(messageId, true, behavior));
       case 36:
@@ -23801,19 +23963,32 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     } : _ref$inviteLinkOption,
     _ref$embeddedJoinGrou = _ref.embeddedJoinGroupPopup,
     embeddedJoinGroupPopup = _ref$embeddedJoinGrou === void 0 ? false : _ref$embeddedJoinGrou,
-    onUpdateChannel = _ref.onUpdateChannel;
+    onUpdateChannel = _ref.onUpdateChannel,
+    _ref$disappearingSett = _ref.disappearingSettings,
+    disappearingSettings = _ref$disappearingSett === void 0 ? null : _ref$disappearingSett;
   React.useEffect(function () {
     log.setLevel(logLevel);
+  }, [logLevel]);
+  React.useEffect(function () {
     if (baseUrlForInviteMembers) {
       setBaseUrlForInviteMembers(baseUrlForInviteMembers);
     }
+  }, [baseUrlForInviteMembers]);
+  React.useEffect(function () {
     if (useInviteLink) {
       setUseInviteLink(useInviteLink);
     }
+  }, [useInviteLink]);
+  React.useEffect(function () {
     if (inviteLinkOptions) {
       setInviteLinkOptions(inviteLinkOptions);
     }
-  }, []);
+  }, [inviteLinkOptions]);
+  React.useEffect(function () {
+    if (disappearingSettings) {
+      setDisappearingSettings(disappearingSettings);
+    }
+  }, [disappearingSettings]);
   return /*#__PURE__*/React__default.createElement(reactRedux.Provider, {
     store: store,
     context: SceytReduxContext
@@ -24091,7 +24266,57 @@ function SvgPoll(props) {
   })));
 }
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
+var _path$g, _g, _defs;
+function _extends$h() {
+  return _extends$h = 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$h.apply(null, arguments);
+}
+function SvgBadge(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    width: 24,
+    height: 24,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+    d: "M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1z",
+    fill: "url(#badge_svg__paint0_linear_5007_111116)",
+    stroke: "transparent",
+    strokeWidth: 2
+  })), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#badge_svg__clip0_5007_111116)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 8v4l2.667 1.333m-2.667-8A6.666 6.666 0 0116.92 16.5M5.667 9.917a6.667 6.667 0 00-.333 2m.553 2.75a6.668 6.668 0 001.62 2.266M7.09 7.49c.186-.203.384-.393.594-.571m2.078 11.36a6.666 6.666 0 005.087-.252",
+    stroke: "transparent",
+    strokeWidth: 1.6,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "badge_svg__paint0_linear_5007_111116",
+    x1: -3.5,
+    y1: -4,
+    x2: 13,
+    y2: 22,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#EDEDED"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#818C99"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "badge_svg__clip0_5007_111116"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "translate(4 4)",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1;
 var LastMessageAttachments = function LastMessageAttachments(_ref) {
   var lastMessage = _ref.lastMessage;
   return !!(lastMessage.attachments && lastMessage.attachments.length || lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === exports.MESSAGE_TYPE.POLL) && (lastMessage !== null && lastMessage !== void 0 && lastMessage.pollDetails && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === exports.MESSAGE_TYPE.POLL ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPoll, null), lastMessage.body ? '' : 'Poll')) : lastMessage.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo')) : lastMessage.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video')) : lastMessage.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File')) : lastMessage.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice')) : null);
@@ -24131,7 +24356,7 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
-  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'joined via invite link' : lastMessage.body === 'ADM' ? !Number(lastMessageMetas === null || lastMessageMetas === void 0 ? void 0 : lastMessageMetas.autoDeletePeriod) ? 'disabled disappearing messages' : "set the disappearing messages timer to " + formatDisappearingMessageTime(lastMessageMetas !== null && lastMessageMetas !== void 0 && lastMessageMetas.autoDeletePeriod ? Number(lastMessageMetas.autoDeletePeriod) : null) : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
     poll: (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.pollDetails) && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === exports.MESSAGE_TYPE.POLL
   }, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), LastMessageAttachments({
     lastMessage: lastMessage
@@ -24348,6 +24573,7 @@ var Channel = function Channel(_ref3) {
   }, [channel, activeChannel.id, setSelectedChannel]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
     theme: theme,
+    backgroundColor: background,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
     selectedBackgroundColor: selectedChannelBackground || backgroundFocused,
@@ -24367,7 +24593,10 @@ var Channel = function Channel(_ref3) {
     size: channelAvatarSize || 50,
     textSize: channelAvatarTextSize || 16,
     setDefaultAvatar: isDirectChannel
-  }), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
+  }), !!(channel !== null && channel !== void 0 && channel.messageRetentionPeriod) && (/*#__PURE__*/React__default.createElement(DisappearingMessagesBadge, {
+    color: accentColor,
+    className: 'disappearing-messages-badge'
+  })), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
     backgroundColor: onlineStatus,
     borderColor: background
   })))), /*#__PURE__*/React__default.createElement(ChannelInfo, {
@@ -24426,7 +24655,7 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id && lastMessage.type !== exports.MESSAGE_TYPE.SYSTEM)) : draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== exports.MESSAGE_TYPE.SYSTEM) && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
@@ -24488,12 +24717,15 @@ var LastMessage = styled__default.div(_templateObject3$5 || (_templateObject3$5
   return props.height || '20px';
 });
 var AvatarWrapper = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
-var UserStatus = styled__default.span(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  background-color: ", ";\n  border: 2.5px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
+var DisappearingMessagesBadge = styled__default(SvgBadge)(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -7px;\n  right: -7px;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var UserStatus = styled__default.span(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  background-color: ", ";\n  border: 2.5px solid ", ";\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor || '#56E464';
 }, function (props) {
   return props.borderColor || '#ffffff';
 });
-var Container$3 = styled__default.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  background-color: ", ";\n  border-left: ", ";\n  // padding: selectedChannel ? '8px 16px 8px 13px' : '8px 16px'\n  padding: ", ";\n  margin: ", ";\n  border-radius: ", ";\n\n  transition: all 0.2s;\n  &:hover {\n    ", "\n    ", " {\n      border-color: ", ";\n    }\n  }\n  ", " {\n    ", "\n  }\n"])), function (props) {
+var Container$3 = styled__default.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  background-color: ", ";\n  border-left: ", ";\n  // padding: selectedChannel ? '8px 16px 8px 13px' : '8px 16px'\n  padding: ", ";\n  margin: ", ";\n  border-radius: ", ";\n\n  transition: all 0.2s;\n  .disappearing-messages-badge {\n    & > path:nth-child(1) {\n      stroke: ", ";\n    }\n    g {\n      path {\n        stroke: ", ";\n      }\n    }\n  }\n  &:hover {\n    ", "\n    ", " {\n      border-color: ", ";\n    }\n    .disappearing-messages-badge {\n      & > path:nth-child(1) {\n        stroke: ", ";\n      }\n      g {\n        path {\n          stroke: ", ";\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n"])), function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
 }, function (props) {
   return props.selectedChannel ? props.selectedChannelLeftBorder : null;
@@ -24503,32 +24735,40 @@ var Container$3 = styled__default.div(_templateObject6$2 || (_templateObject6$2
   return props.channelsMargin || '0 8px';
 }, function (props) {
   return props.selectedChannelBorderRadius || '12px';
+}, function (props) {
+  return props.selectedChannel ? props.selectedBackgroundColor : props.backgroundColor;
+}, function (props) {
+  return props.selectedChannel ? props.selectedBackgroundColor : props.backgroundColor;
 }, function (_ref5) {
   var selectedChannel = _ref5.selectedChannel,
     hoverBackground = _ref5.hoverBackground;
   return !selectedChannel && "\n      background-color: " + hoverBackground + ";\n    ";
 }, UserStatus, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
+}, function (props) {
+  return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
+}, function (props) {
+  return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
 }, UserStatus, function (props) {
   return props.selectedChannel && "\n      border-color: " + props.selectedBackgroundColor + ";\n    ";
 });
-var DraftMessageTitle = styled__default.span(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin-right: 4px;\n"])), function (props) {
+var DraftMessageTitle = styled__default.span(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin-right: 4px;\n"])), function (props) {
   return props.color;
 });
-var DraftMessageText = styled__default.span(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])), function (props) {
+var DraftMessageText = styled__default.span(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])), function (props) {
   return props.color;
 });
-var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
+var LastMessageAuthor = styled__default.div(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
 }, function (_ref6) {
   var typing = _ref6.typing,
     recording = _ref6.recording;
   return (typing || recording) && "\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - " + (typing ? 62 : 76) + "px);\n  ";
 });
-var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
+var Points = styled__default.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
   return props.color;
 });
-var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    min-height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    transform: translate(0px, 3px);\n  }\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n  & > div {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n    & > svg {\n      width: 18px;\n      height: 18px;\n      min-width: 18px;\n      min-height: 18px;\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var LastMessageText = styled__default.span(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    min-height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    transform: translate(0px, 3px);\n  }\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n  & > div {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n    & > svg {\n      width: 18px;\n      height: 18px;\n      min-width: 18px;\n      min-height: 18px;\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.deletedMessage && 'italic';
@@ -24539,29 +24779,29 @@ var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObjec
 }, function (props) {
   return props.color;
 });
-var LastMessageDescription = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  & > svg {\n    width: 18px;\n    height: 18px;\n    margin: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
+var LastMessageDescription = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  & > svg {\n    width: 18px;\n    height: 18px;\n    margin: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
   return props.poll ? '0 0 -3px 0' : '3px 0 -3px 0';
 });
-var ChannelStatus = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var ChannelStatus = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var LastMessageDate = styled__default.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
+var LastMessageDate = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize || '12px';
 });
-var DeliveryIconCont = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
-var UnreadMentionIconWrapper = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var DeliveryIconCont = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
+var UnreadMentionIconWrapper = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.rightMargin && '8px';
 }, function (props) {
   return props.iconColor;
 });
-var TypingIndicator = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
-var ReactionItem = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\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  padding: 0 3px;\n"])));
-var UnreadInfo = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
+var TypingIndicator = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
+var ReactionItem = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\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  padding: 0 3px;\n"])));
+var UnreadInfo = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
   return props.bottom || '11px';
 });
-var UnreadCount = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\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\n  ", "\n"])), function (props) {
+var UnreadCount = styled__default.span(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\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\n  ", "\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';
@@ -24574,10 +24814,10 @@ var UnreadCount = styled__default.span(_templateObject18$1 || (_templateObject18
 }, function (props) {
   return props.isMuted && "background-color: " + props.mutedBackgroundColor + ";";
 });
-var PinnedIconWrapper = styled__default.span(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var PinnedIconWrapper = styled__default.span(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MessageTextContainer = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])));
+var MessageTextContainer = styled__default.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])));
 
 var _templateObject$7, _templateObject2$6;
 var SearchInputContainer = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  max-width: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n\n  & ", " {\n    ", ";\n  }\n"])), function (props) {
@@ -24712,23 +24952,23 @@ var Container$4 = styled__default.div(_templateObject4$5 || (_templateObject4$5
   return props.hoverBackground;
 });
 
-var _path$g;
-function _extends$h() {
-  return _extends$h = Object.assign ? Object.assign.bind() : function (n) {
+var _path$h;
+function _extends$i() {
+  return _extends$i = 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$h.apply(null, arguments);
+  }, _extends$i.apply(null, arguments);
 }
 function SvgCreateChannel(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M15.582 1.3c.31.117.517.414.517.745v2.833a3.448 3.448 0 010 6.71v2.831a.795.795 0 01-1.395.524c-.556-.636-1.531-1.238-2.857-1.68a13.047 13.047 0 00-1.935-.477v3.613a2.35 2.35 0 01-4.565.79l-.002-.005-1.788-5.122a4.33 4.33 0 012.024-8.16H7.2a16.675 16.675 0 001.837-.1 13.724 13.724 0 002.81-.6c1.325-.442 2.3-1.044 2.856-1.68a.795.795 0 01.878-.221zM8.322 5.46c-.368.022-.742.033-1.12.033H5.58a2.74 2.74 0 00-1.071 5.263M8.32 5.46v5.547a18.531 18.531 0 00-1.12-.034H5.58a2.73 2.73 0 01-1.07-.217m5.402.42V5.29c.87-.133 1.69-.329 2.439-.579a10.253 10.253 0 002.156-.988v9.019a10.257 10.257 0 00-2.156-.988c-.75-.25-1.57-.447-2.44-.58zm6.187-4.62V9.91a1.856 1.856 0 000-3.355zM8.32 12.6a16.92 16.92 0 00-1.12-.037H5.58c-.055 0-.11 0-.165-.003l1.43 4.095v.002a.76.76 0 001.475-.258V12.6z",
@@ -24736,23 +24976,23 @@ function SvgCreateChannel(props) {
   })));
 }
 
-var _path$h;
-function _extends$i() {
-  return _extends$i = Object.assign ? Object.assign.bind() : function (n) {
+var _path$i;
+function _extends$j() {
+  return _extends$j = 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$i.apply(null, arguments);
+  }, _extends$j.apply(null, arguments);
 }
 function SvgCreateGroup(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.716 15.9h2.996a3.587 3.587 0 00-3.689-3.02c.01.085.031.175.065.259.35.862.567 1.792.628 2.76zM6.02 7.957a1.512 1.512 0 100-3.023 1.512 1.512 0 000 3.023zm8.15 0a1.511 1.511 0 100-3.023 1.511 1.511 0 000 3.023zM9.562 15.9a3.587 3.587 0 00-7.084 0h7.084zM6.02 9.557a3.112 3.112 0 100-6.224 3.112 3.112 0 000 6.224zm7.113 6.906c0 .55.418 1.037.967 1.037h4.22c.572 0 1.037-.464 1.037-1.037a5.187 5.187 0 00-5.848-5.145c-1.074.137-1.31 1.417-.904 2.421.34.841.528 1.76.528 2.724zm4.15-10.018a3.112 3.112 0 11-6.225 0 3.112 3.112 0 016.224 0zm-6.076 10.018a5.187 5.187 0 00-10.374 0c0 .573.465 1.037 1.038 1.037h8.298c.573 0 1.038-.464 1.038-1.037z",
@@ -24760,23 +25000,23 @@ function SvgCreateGroup(props) {
   })));
 }
 
-var _path$i;
-function _extends$j() {
-  return _extends$j = Object.assign ? Object.assign.bind() : function (n) {
+var _path$j;
+function _extends$k() {
+  return _extends$k = 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$j.apply(null, arguments);
+  }, _extends$k.apply(null, arguments);
 }
 function SvgCreateChat(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 3.25a6.75 6.75 0 00-5.525 10.628 12.365 12.365 0 015.526-1.295c1.983 0 3.86.466 5.524 1.295a6.748 6.748 0 00-.752-8.651A6.75 6.75 0 0010 3.25zm6.323 12.05A8.249 8.249 0 004.166 4.166 8.25 8.25 0 1016.323 15.3zm-1.838-.256a10.872 10.872 0 00-4.485-.96h-.001a10.865 10.865 0 00-4.484.96 6.75 6.75 0 008.97 0zm-4.484-2.46l-.001.75v-.75zm-.001-6a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zm-2.298-.549a3.25 3.25 0 114.596 4.596 3.25 3.25 0 01-4.596-4.596z",
@@ -24784,24 +25024,24 @@ function SvgCreateChat(props) {
   })));
 }
 
-var _path$j, _path2$2, _path3$1;
-function _extends$k() {
-  return _extends$k = Object.assign ? Object.assign.bind() : function (n) {
+var _path$k, _path2$2, _path3$1;
+function _extends$l() {
+  return _extends$l = 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$k.apply(null, arguments);
+  }, _extends$l.apply(null, arguments);
 }
 function SvgAddChat(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     width: 24,
     height: 24,
     viewBox: "0 0 24.01 24.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M4.128 2.179c.989-.529 1.962-.713 4.109-.713h7.66a1 1 0 110 2h-7.66c-2.041 0-2.615.182-3.165.476a2.86 2.86 0 00-1.196 1.196c-.294.55-.476 1.124-.476 3.165v7.66c0 2.041.182 2.615.476 3.165a2.86 2.86 0 001.196 1.196c.55.294 1.124.476 3.165.476h7.66c2.04 0 2.614-.182 3.165-.476a2.86 2.86 0 001.195-1.196c.295-.55.476-1.124.476-3.165v-7.66a1 1 0 012 0v7.66c0 2.147-.184 3.12-.712 4.108a4.86 4.86 0 01-2.016 2.016c-.989.53-1.962.713-4.109.713h-7.66c-2.146 0-3.12-.184-4.108-.713a4.86 4.86 0 01-2.016-2.016c-.528-.988-.712-1.961-.712-4.108v-7.66c0-2.147.184-3.12.712-4.108a4.86 4.86 0 012.016-2.016z",
@@ -24817,46 +25057,46 @@ function SvgAddChat(props) {
   })));
 }
 
-var _path$k;
-function _extends$l() {
-  return _extends$l = Object.assign ? Object.assign.bind() : function (n) {
+var _path$l;
+function _extends$m() {
+  return _extends$m = 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$l.apply(null, arguments);
+  }, _extends$m.apply(null, arguments);
 }
 function SvgCross(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     width: 16,
     height: 16,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     d: "M7.114 8L4.85 5.736a.626.626 0 11.886-.886L8 7.114l2.264-2.264a.626.626 0 11.886.886L8.886 8l2.264 2.264a.626.626 0 01-.886.886L8 8.886 5.736 11.15a.626.626 0 01-.886-.886L7.114 8z",
     fill: "#818C99"
   })));
 }
 
-var _path$l;
-function _extends$m() {
-  return _extends$m = Object.assign ? Object.assign.bind() : function (n) {
+var _path$m;
+function _extends$n() {
+  return _extends$n = 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$m.apply(null, arguments);
+  }, _extends$n.apply(null, arguments);
 }
 function SvgTick(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     width: 11,
     height: 9,
     viewBox: "0 0 10 10",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     d: "M1.28 4.775a.75.75 0 00-1.06 1.06l2.722 2.723a.75.75 0 001.06 0l6.445-6.445a.75.75 0 10-1.06-1.06L3.471 6.967 1.28 4.775z",
     fill: "#fff"
   })));
@@ -24921,23 +25161,23 @@ var CustomLabel = styled__default.label(_templateObject$9 || (_templateObject$9
 });
 var Checkbox = styled__default.input(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _path$m;
-function _extends$n() {
-  return _extends$n = Object.assign ? Object.assign.bind() : function (n) {
+var _path$n;
+function _extends$o() {
+  return _extends$o = 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$n.apply(null, arguments);
+  }, _extends$o.apply(null, arguments);
 }
 function SvgLinkIconWb(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     width: 19,
     height: 19,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     d: "M7.832 10.652c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 010-7.07l3.54-3.54a5.003 5.003 0 017.07 0 5.003 5.003 0 010 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 000-4.24 2.982 2.982 0 00-4.24 0l-3.53 3.53a2.982 2.982 0 000 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 010 7.07l-3.54 3.54a5.003 5.003 0 01-7.07 0 5.003 5.003 0 010-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 000 4.24 2.982 2.982 0 004.24 0l3.53-3.53a2.982 2.982 0 000-4.24.973.973 0 010-1.42z",
     fill: "#0DBD8B"
   })));
@@ -25373,23 +25613,23 @@ var SelectedMemberName = styled__default.span(_templateObject0$2 || (_templateOb
 });
 var StyledSubtractSvg = styled__default(SvgCross)(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
 
-var _path$n;
-function _extends$o() {
-  return _extends$o = Object.assign ? Object.assign.bind() : function (n) {
+var _path$o;
+function _extends$p() {
+  return _extends$p = 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$o.apply(null, arguments);
+  }, _extends$p.apply(null, arguments);
 }
 function SvgCameraIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     width: 42,
     height: 42,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.55 11.55c1.206 0 2.119-.428 2.813-1.095.511-.49.899-1.124 1.164-1.559l.115-.186c.315-.505.542-.802.82-1.005.238-.172.624-.355 1.388-.355h6.3c.763 0 1.15.183 1.387.355.278.203.505.5.82 1.005l.116.186c.265.435.652 1.068 1.163 1.56.695.666 1.607 1.094 2.814 1.094 1.539 0 2.078.008 2.496.091a4.725 4.725 0 013.713 3.712c.083.418.09.958.09 2.497v7.245c0 1.79 0 3.038-.08 4.01-.078.953-.223 1.5-.434 1.915a4.725 4.725 0 01-2.065 2.065c-.415.212-.963.357-1.916.435-.971.079-2.22.08-4.01.08H13.753c-1.79 0-3.038-.001-4.01-.08-.953-.078-1.5-.224-1.915-.435a4.725 4.725 0 01-2.065-2.065c-.212-.415-.357-.962-.435-1.915-.079-.972-.08-2.22-.08-4.01v-7.242c0-1.542.007-2.083.09-2.501a4.725 4.725 0 013.711-3.71c.42-.084.96-.092 2.502-.092zm6.3-7.35c-1.337 0-2.394.342-3.24.958-.804.585-1.299 1.337-1.64 1.882l-.158.255c-.285.459-.434.7-.63.888-.126.12-.264.217-.632.217h-.183c-1.29 0-2.17 0-2.934.152a7.875 7.875 0 00-6.184 6.184c-.153.765-.153 1.644-.152 2.934V25.163c0 1.707 0 3.083.09 4.198.095 1.148.293 2.156.768 3.09a7.875 7.875 0 003.442 3.44c.932.476 1.94.674 3.089.768 1.115.091 2.491.091 4.198.091h14.628c1.707 0 3.084 0 4.199-.09 1.148-.095 2.156-.293 3.089-.768a7.875 7.875 0 003.441-3.442c.476-.933.674-1.94.768-3.089.09-1.115.09-2.491.09-4.198v-7.495c.001-1.288.001-2.166-.15-2.93a7.875 7.875 0 00-6.188-6.186c-.764-.152-1.641-.152-2.93-.152h-.181c-.369 0-.506-.096-.632-.217-.197-.189-.346-.43-.63-.888-.05-.078-.102-.163-.159-.255-.34-.545-.835-1.297-1.64-1.882-.846-.616-1.903-.958-3.24-.958h-6.3zm7.875 17.325a4.725 4.725 0 11-9.45 0 4.725 4.725 0 019.45 0zm3.15 0a7.875 7.875 0 11-15.75 0 7.875 7.875 0 0115.75 0z",
@@ -26166,24 +26406,24 @@ var CreateDropdownButton = styled__default.div(_templateObject$f || (_templateOb
   return props.iconColor;
 });
 
-var _path$o;
-function _extends$p() {
-  return _extends$p = Object.assign ? Object.assign.bind() : function (n) {
+var _path$p;
+function _extends$q() {
+  return _extends$q = 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$p.apply(null, arguments);
+  }, _extends$q.apply(null, arguments);
 }
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M15.489 9.276a.941.941 0 010 1.33l-4.276 4.276H23.06a.941.941 0 110 1.883H11.213l4.276 4.275a.941.941 0 11-1.331 1.331L8.276 16.49a.941.941 0 010-1.331l5.882-5.882a.941.941 0 011.331 0z",
@@ -26191,70 +26431,70 @@ function SvgArrowLeft(props) {
   })));
 }
 
-var _path$p;
-function _extends$q() {
-  return _extends$q = Object.assign ? Object.assign.bind() : function (n) {
+var _path$q;
+function _extends$r() {
+  return _extends$r = 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$q.apply(null, arguments);
+  }, _extends$r.apply(null, arguments);
 }
 function SvgNotifications(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     d: "M10.246 1.75c3.449 0 5.924 2.816 5.924 6.47v1.375c0 .196.166.457.619.924l.232.236c.929.942 1.296 1.485 1.296 2.358 0 .382-.044.68-.23 1.037-.391.754-1.222 1.174-2.464 1.174H13.98c-.54 2.004-1.83 3.093-3.738 3.093-1.928 0-3.225-1.112-3.755-3.157l.016.064H4.861c-1.278 0-2.118-.432-2.493-1.212-.164-.341-.201-.618-.201-.998 0-.874.367-1.417 1.296-2.359.12-.12.174-.176.232-.236.453-.467.62-.728.62-.924V8.22c0-3.652 2.48-6.47 5.93-6.47zm2.114 13.575H8.125c.391 1.071 1.066 1.545 2.118 1.545 1.052 0 1.727-.474 2.118-1.545zM10.247 3.296c-2.55 0-4.385 2.085-4.385 4.924v1.375c0 .732-.335 1.257-1.055 2l-.242.246c-.642.65-.851.96-.851 1.273 0 .164.012.25.049.328.092.192.372.335 1.1.335h10.76c.705 0 .991-.144 1.093-.34.043-.082.056-.17.056-.323 0-.313-.21-.622-.851-1.273-.12-.12-.179-.181-.242-.246-.72-.743-1.055-1.268-1.055-2V8.22c0-2.84-1.83-4.924-4.377-4.924z",
     fill: "currentColor"
   })));
 }
 
-var _path$q;
-function _extends$r() {
-  return _extends$r = Object.assign ? Object.assign.bind() : function (n) {
+var _path$r;
+function _extends$s() {
+  return _extends$s = 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$r.apply(null, arguments);
+  }, _extends$s.apply(null, arguments);
 }
 function SvgLock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     width: 20,
     height: 20,
     viewBox: "0 0 21 21",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     d: "M10 2.5a4.167 4.167 0 014.166 4.167v1.666h.364c.743 0 1.012.078 1.284.223.271.145.485.358.63.63.145.272.222.541.222 1.284v4.893c0 .743-.077 1.013-.222 1.284a1.514 1.514 0 01-.63.63c-.272.146-.541.223-1.284.223H5.47c-.743 0-1.013-.077-1.284-.223a1.515 1.515 0 01-.63-.63c-.146-.271-.223-.54-.223-1.284V10.47c0-.743.077-1.012.223-1.284.145-.272.358-.485.63-.63.271-.145.54-.223 1.284-.223h.362l.001-1.666A4.167 4.167 0 0110 2.5zm0 1.667a2.5 2.5 0 00-2.5 2.5l-.001 1.666h5V6.667a2.5 2.5 0 00-2.5-2.5z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$r;
-function _extends$s() {
-  return _extends$s = Object.assign ? Object.assign.bind() : function (n) {
+var _path$s;
+function _extends$t() {
+  return _extends$t = 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$s.apply(null, arguments);
+  }, _extends$t.apply(null, arguments);
 }
 function SvgLeave(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     d: "M9.457 9.68h-7.03c-.47 0-.86.362-.86.82 0 .458.39.82.86.82h7.03l-1.56 1.477a.793.793 0 000 1.163.89.89 0 001.213 0l3.038-2.878h0l.006-.006h0a.799.799 0 00.248-.573v-.005a.784.784 0 00-.066-.313M9.457 9.68l2.88.505m-2.88-.505l-1.56-1.477a.793.793 0 010-1.163.89.89 0 011.213 0l3.038 2.878m-2.69-.238l2.69.238m.188.267s0 0 0 0l-.091.04.091-.04zm-.188-.267l-.069.073.069-.073h0zm-1.365 8.599h2.011c.82 0 1.488 0 2.03-.042.559-.043 1.06-.135 1.525-.36a3.805 3.805 0 001.705-1.616c.238-.443.336-.919.381-1.45.045-.514.045-1.146.045-1.923V7.874c0-.776 0-1.409-.045-1.923-.045-.53-.143-1.007-.381-1.45a3.805 3.805 0 00-1.705-1.615c-.466-.225-.966-.317-1.526-.36-.541-.043-1.208-.043-2.029-.042h-.003 0-2.008c-.47 0-.86.361-.86.82 0 .457.39.819.86.819h1.975c.865 0 1.462 0 1.926.036.454.036.704.1.888.19.41.197.744.513.952.9.093.173.16.408.198.837.038.438.038 1.003.038 1.823v5.182c0 .82 0 1.385-.038 1.824-.037.429-.105.664-.198.836-.208.387-.541.703-.952.901-.184.089-.434.154-.888.189-.464.036-1.061.036-1.926.036h-1.975c-.47 0-.86.362-.86.82 0 .458.39.82.86.82z",
     fill: "CurrentColor",
     stroke: "CurrentColor",
@@ -27102,24 +27342,24 @@ var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObje
   return props.withCustomList && "1px solid " + props.borderColor;
 });
 
-var _path$s;
-function _extends$t() {
-  return _extends$t = Object.assign ? Object.assign.bind() : function (n) {
+var _path$t;
+function _extends$u() {
+  return _extends$u = 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$t.apply(null, arguments);
+  }, _extends$u.apply(null, arguments);
 }
 function SvgMessage(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     width: 48,
     height: 48,
     viewBox: "0 0 48.01 48.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M15.524 4.2h16.951c1.616 0 2.938 0 4.012.088 1.112.09 2.116.285 3.054.762a7.8 7.8 0 013.409 3.41c.477.937.671 1.941.762 3.053.088 1.074.088 2.396.088 4.012v10.95c0 1.617 0 2.938-.088 4.013-.09 1.111-.285 2.115-.762 3.053a7.8 7.8 0 01-3.409 3.409c-.938.478-1.942.672-3.054.762-1.074.088-2.396.088-4.012.088h-5.108c-1.32 0-1.73.009-2.107.086a4.2 4.2 0 00-1.066.374c-.342.175-.668.425-1.7 1.25l-4.822 3.858c-.37.296-.739.59-1.06.803-.308.204-.877.548-1.61.549a2.8 2.8 0 01-2.19-1.054c-.457-.572-.544-1.23-.577-1.599-.035-.383-.035-.855-.035-1.33V37.79c-.86-.02-1.573-.081-2.219-.255a7.8 7.8 0 01-5.515-5.515c-.267-.997-.267-2.152-.266-3.76V15.525c0-1.616 0-2.938.088-4.012.09-1.112.284-2.116.762-3.054A7.8 7.8 0 018.459 5.05c.938-.477 1.942-.671 3.053-.762 1.075-.088 2.396-.088 4.012-.088zm-3.718 3.676c-.89.073-1.367.206-1.713.382a4.2 4.2 0 00-1.835 1.835c-.177.346-.31.824-.382 1.713-.075.91-.076 2.084-.076 3.794V28c0 1.976.015 2.61.143 3.087a4.2 4.2 0 002.97 2.97c.476.128 1.111.143 3.087.143a1.8 1.8 0 011.8 1.8v4.255l4.446-3.557.126-.101c.853-.682 1.476-1.18 2.184-1.543a7.795 7.795 0 011.98-.695c.78-.16 1.577-.16 2.67-.159H32.4c1.71 0 2.884-.001 3.794-.076.89-.072 1.367-.205 1.713-.382a4.2 4.2 0 001.835-1.835c.176-.346.31-.823.382-1.713.075-.91.076-2.084.076-3.794V15.6c0-1.71-.002-2.884-.076-3.794-.073-.89-.206-1.367-.382-1.713a4.2 4.2 0 00-1.835-1.835c-.346-.176-.824-.31-1.713-.382-.91-.074-2.084-.076-3.794-.076H15.6c-1.71 0-2.884.002-3.794.076zM12.2 17a1.8 1.8 0 011.8-1.8h10a1.8 1.8 0 010 3.6H14a1.8 1.8 0 01-1.8-1.8zm0 7a1.8 1.8 0 011.8-1.8h16a1.8 1.8 0 010 3.6H14a1.8 1.8 0 01-1.8-1.8z",
@@ -27231,23 +27471,23 @@ var SelectChatDescription = styled__default.p(_templateObject5$8 || (_templateOb
   return props.color;
 });
 
-var _path$t;
-function _extends$u() {
-  return _extends$u = Object.assign ? Object.assign.bind() : function (n) {
+var _path$u;
+function _extends$v() {
+  return _extends$v = 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$u.apply(null, arguments);
+  }, _extends$v.apply(null, arguments);
 }
 function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     width: 22,
     height: 22,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     d: "M11 20.167a9.167 9.167 0 100-18.333 9.167 9.167 0 000 18.333zM11 14.667V11M11 7.334h.01",
     stroke: "CurrentColor",
     strokeWidth: 2,
@@ -27501,24 +27741,24 @@ var unreadScrollToSelector = function unreadScrollToSelector(store) {
   return store.MessageReducer.unreadScrollTo;
 };
 
-var _path$u;
-function _extends$v() {
-  return _extends$v = Object.assign ? Object.assign.bind() : function (n) {
+var _path$v;
+function _extends$w() {
+  return _extends$w = 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$v.apply(null, arguments);
+  }, _extends$w.apply(null, arguments);
 }
 function SvgChoseMedia(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     width: 18,
     height: 18,
     viewBox: "0 0 19 19",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M3.614 2.052C4.366 1.65 5.107 1.5 6.798 1.5h4.404c1.691 0 2.432.15 3.184.552.672.36 1.203.89 1.562 1.562.402.752.552 1.493.552 3.184v4.404c0 1.691-.15 2.432-.552 3.184a3.763 3.763 0 01-1.562 1.562c-.752.402-1.493.552-3.184.552H6.798c-1.691 0-2.432-.15-3.184-.552a3.764 3.764 0 01-1.562-1.562c-.402-.752-.552-1.493-.552-3.184V6.798c0-1.691.15-2.432.552-3.184.36-.672.89-1.203 1.562-1.562zm7.16 7.07a.297.297 0 01.482.004l3.04 4.193c.101.139.074.335-.06.44a.297.297 0 01-.183.062h-9.57a.309.309 0 01-.304-.314c0-.07.022-.137.064-.192l2.22-2.954a.297.297 0 01.473-.008l1.528 1.861 2.31-3.092zM5.785 6.857a1.071 1.071 0 100-2.143 1.071 1.071 0 000 2.143z",
@@ -27526,27 +27766,27 @@ function SvgChoseMedia(props) {
   })));
 }
 
-var _path$v, _defs;
-function _extends$w() {
-  return _extends$w = Object.assign ? Object.assign.bind() : function (n) {
+var _path$w, _defs$1;
+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$w.apply(null, arguments);
+  }, _extends$x.apply(null, arguments);
 }
 function SvgNoMessagesIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     width: 49,
     height: 49,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     d: "M.5 48.36h48v-48H.5v48z",
     fill: "url(#noMessagesIcon_svg__pattern0)"
-  })), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+  })), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
     id: "noMessagesIcon_svg__pattern0",
     patternContentUnits: "objectBoundingBox",
     width: 1,
@@ -27653,70 +27893,70 @@ function MessageDivider(_ref) {
   }, dividerText)));
 }
 
-var _path$w;
-function _extends$x() {
-  return _extends$x = Object.assign ? Object.assign.bind() : function (n) {
+var _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 SvgDownload(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     d: "M17.5 3.5a1.5 1.5 0 00-3 0v13.379l-4.44-4.44a1.5 1.5 0 00-2.12 2.122l7 7a1.5 1.5 0 002.12 0l7-7a1.5 1.5 0 00-2.12-2.122l-4.44 4.44V3.5zM5.5 25a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3h-21z",
     fill: "#fff"
   })));
 }
 
-var _path$x;
-function _extends$y() {
-  return _extends$y = Object.assign ? Object.assign.bind() : function (n) {
+var _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 SvgCancel(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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z",
     fill: "#fff"
   })));
 }
 
-var _path$y;
-function _extends$z() {
-  return _extends$z = Object.assign ? Object.assign.bind() : function (n) {
+var _path$z;
+function _extends$A() {
+  return _extends$A = 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$A.apply(null, arguments);
 }
 function SvgSliderButtonRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     width: 28,
     height: 28,
     viewBox: "0 0 28.01 28.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: "M9.846 5.763a1.75 1.75 0 012.475 0l7 7a1.75 1.75 0 010 2.474l-7 7a1.75 1.75 0 11-2.475-2.474L15.61 14 9.846 8.237a1.75 1.75 0 010-2.474z",
@@ -27724,24 +27964,24 @@ function SvgSliderButtonRight(props) {
   })));
 }
 
-var _path$z;
-function _extends$A() {
-  return _extends$A = Object.assign ? Object.assign.bind() : function (n) {
+var _path$A;
+function _extends$B() {
+  return _extends$B = 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$A.apply(null, arguments);
+  }, _extends$B.apply(null, arguments);
 }
 function SvgSliderButtonLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     width: 28,
     height: 28,
     viewBox: "0 0 28.01 28.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.154 5.763a1.75 1.75 0 00-2.475 0l-7 7a1.75 1.75 0 000 2.474l7 7a1.75 1.75 0 102.475-2.474L12.392 14l5.762-5.763a1.75 1.75 0 000-2.474z",
@@ -27749,24 +27989,24 @@ function SvgSliderButtonLeft(props) {
   })));
 }
 
-var _path$A, _path2$3;
-function _extends$B() {
-  return _extends$B = Object.assign ? Object.assign.bind() : function (n) {
+var _path$B, _path2$3;
+function _extends$C() {
+  return _extends$C = 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$B.apply(null, arguments);
+  }, _extends$C.apply(null, arguments);
 }
 function SvgForward(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.764 7.12a.86.86 0 00-.86-.86h-7.63C3.77 6.26 1.8 8.36 1.8 10.88c0 2.519 1.97 4.62 4.473 4.62H7.96a.86.86 0 000-1.72H6.273c-1.49 0-2.754-1.266-2.754-2.9 0-1.635 1.265-2.901 2.754-2.901h7.631a.86.86 0 00.86-.86z",
@@ -27779,29 +28019,6 @@ function SvgForward(props) {
   })));
 }
 
-var _path$B;
-function _extends$C() {
-  return _extends$C = 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$C.apply(null, arguments);
-}
-function SvgDeleteChannel(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
-    width: 20,
-    height: 21,
-    viewBox: "0 0 20.01 21.01",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
-    d: "M5 16.333C5 17.25 5.75 18 6.667 18h6.666C14.25 18 15 17.25 15 16.333V8c0-.917-.75-1.667-1.667-1.667H6.667C5.75 6.333 5 7.083 5 8v8.333zm10-12.5h-2.083l-.592-.591A.84.84 0 0011.742 3H8.258a.84.84 0 00-.583.242l-.592.591H5a.836.836 0 00-.833.834c0 .458.375.833.833.833h10a.836.836 0 00.833-.833.836.836 0 00-.833-.834z",
-    fill: "CurrentColor"
-  })));
-}
-
 var _path$C;
 function _extends$D() {
   return _extends$D = Object.assign ? Object.assign.bind() : function (n) {
@@ -27812,16 +28029,16 @@ function _extends$D() {
     return n;
   }, _extends$D.apply(null, arguments);
 }
-function SvgVideoPlayerPlay(props) {
+function SvgDeleteChannel(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$D({
     width: 20,
-    height: 20,
-    viewBox: "0 0 20.01 20.01",
+    height: 21,
+    viewBox: "0 0 20.01 21.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$C || (_path$C = /*#__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: "#fff"
+    d: "M5 16.333C5 17.25 5.75 18 6.667 18h6.666C14.25 18 15 17.25 15 16.333V8c0-.917-.75-1.667-1.667-1.667H6.667C5.75 6.333 5 7.083 5 8v8.333zm10-12.5h-2.083l-.592-.591A.84.84 0 0011.742 3H8.258a.84.84 0 00-.583.242l-.592.591H5a.836.836 0 00-.833.834c0 .458.375.833.833.833h10a.836.836 0 00.833-.833.836.836 0 00-.833-.834z",
+    fill: "CurrentColor"
   })));
 }
 
@@ -27835,7 +28052,7 @@ function _extends$E() {
     return n;
   }, _extends$E.apply(null, arguments);
 }
-function SvgVideoPlayerPause(props) {
+function SvgVideoPlayerPlay(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     width: 20,
     height: 20,
@@ -27843,7 +28060,7 @@ function SvgVideoPlayerPause(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$D || (_path$D = /*#__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",
+    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: "#fff"
   })));
 }
@@ -27858,7 +28075,7 @@ function _extends$F() {
     return n;
   }, _extends$F.apply(null, arguments);
 }
-function SvgVolume(props) {
+function SvgVideoPlayerPause(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$F({
     width: 20,
     height: 20,
@@ -27866,7 +28083,7 @@ function SvgVolume(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
-    d: "M11.667 2.5c.46 0 .833.373.833.833v13.334c0 .46-.373.833-.833.833a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l4.595-4.422c.385-.37.9-.578 1.434-.578zm4.487 2.786a.75.75 0 011.06 0 6.667 6.667 0 010 9.428.75.75 0 01-1.06-1.06 5.167 5.167 0 000-7.307.75.75 0 010-1.061zm-2.122 2.121a.75.75 0 011.061 0 3.667 3.667 0 010 5.186.75.75 0 01-1.06-1.06 2.167 2.167 0 000-3.065.75.75 0 010-1.06z",
+    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: "#fff"
   })));
 }
@@ -27881,7 +28098,7 @@ function _extends$G() {
     return n;
   }, _extends$G.apply(null, arguments);
 }
-function SvgVolumeMute(props) {
+function SvgVolume(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     width: 20,
     height: 20,
@@ -27889,7 +28106,7 @@ function SvgVolumeMute(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
-    d: "M4.763 2.746l11.655 11.658a.833.833 0 01-1.1 1.248l-.078-.07-2.74-2.74v3.825c0 .427-.321.78-.736.827l-.097.006a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l.775-.747-2.829-2.828a.833.833 0 011.179-1.179zm6.904-.246c.46 0 .833.373.833.833v4.8L8.812 4.445l1.421-1.367a2.068 2.068 0 011.274-.572l.16-.006z",
+    d: "M11.667 2.5c.46 0 .833.373.833.833v13.334c0 .46-.373.833-.833.833a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l4.595-4.422c.385-.37.9-.578 1.434-.578zm4.487 2.786a.75.75 0 011.06 0 6.667 6.667 0 010 9.428.75.75 0 01-1.06-1.06 5.167 5.167 0 000-7.307.75.75 0 010-1.061zm-2.122 2.121a.75.75 0 011.061 0 3.667 3.667 0 010 5.186.75.75 0 01-1.06-1.06 2.167 2.167 0 000-3.065.75.75 0 010-1.06z",
     fill: "#fff"
   })));
 }
@@ -27904,7 +28121,7 @@ function _extends$H() {
     return n;
   }, _extends$H.apply(null, arguments);
 }
-function SvgFullscreen(props) {
+function SvgVolumeMute(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     width: 20,
     height: 20,
@@ -27912,9 +28129,7 @@ function SvgFullscreen(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11.875 3.344c0-.466.378-.844.844-.844h3.937c.466 0 .844.378.844.844V7.28a.844.844 0 01-1.688 0v-1.9l-3.434 3.434a.844.844 0 01-1.193-1.193l3.434-3.434h-1.9a.844.844 0 01-.844-.844zM8.815 11.185c.33.33.33.863 0 1.193l-3.434 3.434H7.28a.844.844 0 010 1.688H3.344a.844.844 0 01-.844-.844V12.72a.844.844 0 111.688 0v1.9l3.434-3.434a.844.844 0 011.193 0z",
+    d: "M4.763 2.746l11.655 11.658a.833.833 0 01-1.1 1.248l-.078-.07-2.74-2.74v3.825c0 .427-.321.78-.736.827l-.097.006a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l.775-.747-2.829-2.828a.833.833 0 011.179-1.179zm6.904-.246c.46 0 .833.373.833.833v4.8L8.812 4.445l1.421-1.367a2.068 2.068 0 011.274-.572l.16-.006z",
     fill: "#fff"
   })));
 }
@@ -27929,7 +28144,7 @@ function _extends$I() {
     return n;
   }, _extends$I.apply(null, arguments);
 }
-function SvgFullscreenExit(props) {
+function SvgFullscreen(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$I({
     width: 20,
     height: 20,
@@ -27937,6 +28152,31 @@ function SvgFullscreenExit(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.875 3.344c0-.466.378-.844.844-.844h3.937c.466 0 .844.378.844.844V7.28a.844.844 0 01-1.688 0v-1.9l-3.434 3.434a.844.844 0 01-1.193-1.193l3.434-3.434h-1.9a.844.844 0 01-.844-.844zM8.815 11.185c.33.33.33.863 0 1.193l-3.434 3.434H7.28a.844.844 0 010 1.688H3.344a.844.844 0 01-.844-.844V12.72a.844.844 0 111.688 0v1.9l3.434-3.434a.844.844 0 011.193 0z",
+    fill: "#fff"
+  })));
+}
+
+var _path$I;
+function _extends$J() {
+  return _extends$J = 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$J.apply(null, arguments);
+}
+function SvgFullscreenExit(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$J({
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20.01 20.01",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M3.438 11.781c0-.466.377-.844.843-.844H8.22c.466 0 .844.378.844.844v3.938a.844.844 0 01-1.688 0v-1.9L3.94 17.252a.844.844 0 11-1.193-1.193l3.435-3.435h-1.9a.844.844 0 01-.844-.844zM17.253 2.747c.33.33.33.864 0 1.193l-3.435 3.435h1.899a.844.844 0 110 1.688h-3.936a.844.844 0 01-.844-.844V4.28a.844.844 0 011.688 0v1.9l3.435-3.434a.844.844 0 011.193 0z",
@@ -28530,7 +28770,10 @@ var CustomRadio = function CustomRadio(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     size = _ref.size,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'radio' : _ref$variant;
+  var isCheckboxStyle = variant === 'checkbox';
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CustomLabel$1, {
     isChecked: state,
     size: size,
@@ -28538,8 +28781,9 @@ var CustomRadio = function CustomRadio(_ref) {
     borderColor: borderColor,
     border: border,
     borderRadius: borderRadius,
+    isCheckboxStyle: isCheckboxStyle,
     htmlFor: "radio-" + index
-  }), /*#__PURE__*/React__default.createElement(Radio, {
+  }, state && isCheckboxStyle && /*#__PURE__*/React__default.createElement(SvgTick, null)), /*#__PURE__*/React__default.createElement(Radio, {
     disabled: disabled,
     type: 'radio',
     id: "radio-" + index,
@@ -28549,7 +28793,7 @@ var CustomRadio = function CustomRadio(_ref) {
     }
   }));
 };
-var CustomLabel$1 = styled__default.label(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  border: ", ";\n  border-radius: ", ";\n\n  ", "\n"])), function (props) {
+var CustomLabel$1 = styled__default.label(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  border: ", ";\n  border-radius: ", ";\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.size || '12px';
 }, function (props) {
   return props.size || '12px';
@@ -28558,7 +28802,9 @@ var CustomLabel$1 = styled__default.label(_templateObject$o || (_templateObject$
 }, function (props) {
   return props.borderRadius || '50%';
 }, function (props) {
-  return props.isChecked && "\n    &::after {\n    content: '';\n    position: absolute;\n    width: calc(100% - 3px);\n    height: calc(100% - 3px);\n    border-radius: 50%;\n    background-color: " + props.checkedBorderColor + ";\n  }\n  ";
+  return props.isChecked && !props.isCheckboxStyle && "\n    &::after {\n    content: '';\n    position: absolute;\n    width: calc(100% - 3px);\n    height: calc(100% - 3px);\n    border-radius: 50%;\n    background-color: " + props.checkedBorderColor + ";\n    }\n  ";
+}, function (props) {
+  return props.isCheckboxStyle && "\n    background-color: " + (props.isChecked ? props.checkedBorderColor : 'transparent') + ";\n    border: " + (props.isChecked ? 'none' : props.border || "1px solid " + props.borderColor) + ";\n    &::after {\n      display: none;\n    }\n    & > svg {\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n    }\n  ";
 });
 var Radio = styled__default.input(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
@@ -29339,7 +29585,7 @@ var Message = function Message(_ref) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
   })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'RM' ? " removed " + (messageMetas && messageMetas.m && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
-  })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'LG' ? ' left the group' : message.body === 'JL' ? " joined via invite link" : ''));
+  })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'LG' ? ' left the group' : message.body === 'JL' ? " joined via invite link" : message.body === 'ADM' ? !Number(messageMetas === null || messageMetas === void 0 ? void 0 : messageMetas.autoDeletePeriod) ? ' disabled disappearing messages' : " set the disappearing messages timer to " + formatDisappearingMessageTime(messageMetas !== null && messageMetas !== void 0 && messageMetas.autoDeletePeriod ? Number(messageMetas.autoDeletePeriod) : null) : ''));
 };
 var SystemMessage = /*#__PURE__*/React__default.memo(Message, function (prevProps, nextProps) {
   return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.nextMessage === nextProps.nextMessage && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.tabIsActive === nextProps.tabIsActive;
@@ -29360,18 +29606,18 @@ var Container$c = styled__default.div(_templateObject$r || (_templateObject$r =
   return props.borderRadius || '14px';
 });
 
-var _circle$1, _path$I;
-function _extends$J() {
-  return _extends$J = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$1, _path$J;
+function _extends$K() {
+  return _extends$K = 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$J.apply(null, arguments);
+  }, _extends$K.apply(null, arguments);
 }
 function SvgErrorIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
@@ -29383,7 +29629,7 @@ function SvgErrorIcon(props) {
     r: 12,
     stroke: "#FA4C56",
     strokeWidth: 2
-  })), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
+  })), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M16 9c.552 0 1 .537 1 1.2v6c0 .663-.448 1.2-1 1.2s-1-.537-1-1.2v-6c0-.663.448-1.2 1-1.2zM15 20.994c0-.55.445-.994.994-.994h.012a.994.994 0 110 1.988h-.012a.994.994 0 01-.994-.994z",
@@ -29391,24 +29637,24 @@ function SvgErrorIcon(props) {
   })));
 }
 
-var _path$J;
-function _extends$K() {
-  return _extends$K = Object.assign ? Object.assign.bind() : function (n) {
+var _path$K;
+function _extends$L() {
+  return _extends$L = 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$K.apply(null, arguments);
+  }, _extends$L.apply(null, arguments);
 }
 function SvgSelectionIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
     width: 24,
     height: 24,
     viewBox: "0 0 24.01 24.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm5.749-13.501a1 1 0 00-1.414-1.414l-6.168 6.167-2.502-2.5a1 1 0 00-1.414 1.413l3.209 3.209a1 1 0 001.414 0l6.875-6.875z",
@@ -29679,46 +29925,46 @@ var ReactionItem$1 = styled__default.li(_templateObject0$8 || (_templateObject0$
   return props.hoverBackgroundColor;
 }, UserStatus);
 
-var _path$K;
-function _extends$L() {
-  return _extends$L = Object.assign ? Object.assign.bind() : function (n) {
+var _path$L;
+function _extends$M() {
+  return _extends$M = 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$L.apply(null, arguments);
+  }, _extends$M.apply(null, arguments);
 }
 function SvgDeleteIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$L({
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
     d: "M15.714 7.143v7.5a3.214 3.214 0 01-3.214 3.214h-5a3.214 3.214 0 01-3.214-3.214v-7.5h-.507a.922.922 0 01-.922-.922V5.178c0-1.085.88-1.964 1.964-1.964h1.18a2.144 2.144 0 011.856-1.071h4.286c.783 0 1.482.423 1.856 1.071h1.18c1.085 0 1.964.88 1.964 1.964v1.043a.922.922 0 01-.922.922h-.507zM15 5.714h.714v-.536a.536.536 0 00-.535-.535h-1.652a.714.714 0 01-.692-.537.715.715 0 00-.692-.535H7.857a.715.715 0 00-.692.535.714.714 0 01-.691.537H4.82a.536.536 0 00-.535.535v.536H15zM5.714 7.143v7.5c0 .986.8 1.785 1.786 1.785h5c.986 0 1.786-.8 1.786-1.785v-7.5H5.714z",
     fill: "CurrentColor"
   })));
 }
 
-var _path$L;
-function _extends$M() {
-  return _extends$M = Object.assign ? Object.assign.bind() : function (n) {
+var _path$M;
+function _extends$N() {
+  return _extends$N = 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$M.apply(null, arguments);
+  }, _extends$N.apply(null, arguments);
 }
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9 2.6a6.4 6.4 0 100 12.8A6.4 6.4 0 009 2.6zm-5.657.743a8 8 0 1111.314 11.314A8 8 0 013.343 3.343zm8.623 3.491a.8.8 0 010 1.132l-3.2 3.2a.8.8 0 01-1.132 0l-1.6-1.6a.8.8 0 011.132-1.132L8.2 9.47l2.634-2.635a.8.8 0 011.132 0z",
@@ -29726,23 +29972,23 @@ function SvgCheckCircle(props) {
   })));
 }
 
-var _path$M;
-function _extends$N() {
-  return _extends$N = Object.assign ? Object.assign.bind() : function (n) {
+var _path$N;
+function _extends$O() {
+  return _extends$O = 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$N.apply(null, arguments);
+  }, _extends$O.apply(null, arguments);
 }
 function SvgReportIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
+  return /*#__PURE__*/React.createElement("svg", _extends$O({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.623 1.5h4.754c.51-.001.908.16 1.274.528l3.321 3.32c.362.361.53.756.528 1.275v4.754c.001.519-.166.914-.528 1.274l-3.32 3.321c-.36.362-.756.53-1.275.528H6.623a1.675 1.675 0 01-1.274-.528l-3.321-3.32a1.675 1.675 0 01-.528-1.275V6.623a1.675 1.675 0 01.528-1.274l3.32-3.321A1.675 1.675 0 016.624 1.5zm-.337 1.52L3.02 6.285c-.136.136-.155.183-.155.375v4.678c0 .19.019.239.155.375l3.267 3.267c.136.136.183.155.375.155h4.678c.192 0 .239-.019.375-.155l3.267-3.267c.136-.136.155-.186.155-.375V6.66c0-.192-.02-.24-.155-.375L11.714 3.02c-.137-.136-.184-.155-.375-.155H6.66c-.192 0-.241.021-.375.155zm3.472 9.01a.758.758 0 11-1.516 0 .758.758 0 011.516 0zm-.076-6.136a.682.682 0 00-1.364 0v3.94a.682.682 0 001.364 0v-3.94z",
@@ -29750,24 +29996,24 @@ function SvgReportIcon(props) {
   })));
 }
 
-var _path$N;
-function _extends$O() {
-  return _extends$O = Object.assign ? Object.assign.bind() : function (n) {
+var _path$O;
+function _extends$P() {
+  return _extends$P = 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$O.apply(null, arguments);
+  }, _extends$P.apply(null, arguments);
 }
 function SvgEditIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$O({
+  return /*#__PURE__*/React.createElement("svg", _extends$P({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.883 6.232l-7.531 7.53a.917.917 0 00-.269.65v1.422c0 .046.038.083.084.083h1.422a.917.917 0 00.648-.268l7.531-7.531-1.885-1.886zm1.06-1.06l1.886 1.885.943-.943a.5.5 0 000-.707l-1.179-1.179a.5.5 0 00-.707 0l-.943.943zm-9.652 7.53l9.534-9.534a2 2 0 012.829 0l1.178 1.178a2 2 0 010 2.829l-9.534 9.534a2.417 2.417 0 01-1.709.708H4.167a1.583 1.583 0 01-1.584-1.583V14.41c0-.64.255-1.256.708-1.709z",
@@ -29775,47 +30021,47 @@ function SvgEditIcon(props) {
   })));
 }
 
-var _path$O;
-function _extends$P() {
-  return _extends$P = Object.assign ? Object.assign.bind() : function (n) {
+var _path$P;
+function _extends$Q() {
+  return _extends$Q = 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$P.apply(null, arguments);
+  }, _extends$Q.apply(null, arguments);
 }
 function SvgResend(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$P({
+  return /*#__PURE__*/React.createElement("svg", _extends$Q({
     width: 17,
     height: 15,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
     d: "M15.913 7.425l-7.23-6.281a.1.1 0 00-.165.075v3.585a.101.101 0 01-.095.101c-.616.037-4.069.305-5.627 1.728C.894 8.371.966 12.608 1.02 13.726c.005.093.123.126.179.05.49-.66 2.003-2.597 3.359-3.243 1.268-.604 3.411-.476 3.872-.44a.097.097 0 01.089.098v3.59a.1.1 0 00.166.075l7.23-6.28a.1.1 0 000-.151z",
     stroke: "currentColor",
     strokeWidth: 1.4
   })));
 }
 
-var _path$P, _path2$4;
-function _extends$Q() {
-  return _extends$Q = Object.assign ? Object.assign.bind() : function (n) {
+var _path$Q, _path2$4;
+function _extends$R() {
+  return _extends$R = 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$Q.apply(null, arguments);
+  }, _extends$R.apply(null, arguments);
 }
 function SvgEmojiSmileIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React.createElement("svg", _extends$R({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 3.043a6.957 6.957 0 100 13.914 6.957 6.957 0 000-13.914zM1.667 10a8.333 8.333 0 1116.666 0 8.333 8.333 0 01-16.666 0zm4.97-2.293a1.07 1.07 0 112.14 0 1.07 1.07 0 01-2.14 0zm4.586 0a1.07 1.07 0 112.141 0 1.07 1.07 0 01-2.14 0z",
@@ -29828,24 +30074,24 @@ function SvgEmojiSmileIcon(props) {
   })));
 }
 
-var _path$Q;
-function _extends$R() {
-  return _extends$R = Object.assign ? Object.assign.bind() : function (n) {
+var _path$R;
+function _extends$S() {
+  return _extends$S = 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$R.apply(null, arguments);
+  }, _extends$S.apply(null, arguments);
 }
 function SvgReplyIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$R({
+  return /*#__PURE__*/React.createElement("svg", _extends$S({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.364 3.637a.75.75 0 010 1.06L4.31 6.75h9.439a4.5 4.5 0 110 9H10a.75.75 0 010-1.5h3.75a3 3 0 100-6H4.31l2.054 2.053a.75.75 0 01-1.061 1.061L1.97 8.031a.75.75 0 010-1.061l3.333-3.333a.75.75 0 011.06 0z",
@@ -29853,23 +30099,23 @@ function SvgReplyIcon(props) {
   })));
 }
 
-var _path$R, _path2$5;
-function _extends$S() {
-  return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
+var _path$S, _path2$5;
+function _extends$T() {
+  return _extends$T = 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$S.apply(null, arguments);
+  }, _extends$T.apply(null, arguments);
 }
 function SvgRetractVote(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$S({
+  return /*#__PURE__*/React.createElement("svg", _extends$T({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
     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", {
@@ -29878,23 +30124,23 @@ function SvgRetractVote(props) {
   })));
 }
 
-var _path$S, _path2$6;
-function _extends$T() {
-  return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
+var _path$T, _path2$6;
+function _extends$U() {
+  return _extends$U = 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$T.apply(null, arguments);
+  }, _extends$U.apply(null, arguments);
 }
 function SvgEndVote(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$T({
+  return /*#__PURE__*/React.createElement("svg", _extends$U({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$T || (_path$T = /*#__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", {
@@ -29905,24 +30151,24 @@ function SvgEndVote(props) {
   })));
 }
 
-var _path$T;
-function _extends$U() {
-  return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
+var _path$U;
+function _extends$V() {
+  return _extends$V = 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$U.apply(null, arguments);
+  }, _extends$V.apply(null, arguments);
 }
 function SvgCopyIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$U({
+  return /*#__PURE__*/React.createElement("svg", _extends$V({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$U || (_path$U = /*#__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",
@@ -29930,24 +30176,24 @@ function SvgCopyIcon(props) {
   })));
 }
 
-var _path$U;
-function _extends$V() {
-  return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
+var _path$V;
+function _extends$W() {
+  return _extends$W = 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$V.apply(null, arguments);
+  }, _extends$W.apply(null, arguments);
 }
 function SvgReplyInThreadIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$V({
+  return /*#__PURE__*/React.createElement("svg", _extends$W({
     width: 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", {
+  }, props), _path$V || (_path$V = /*#__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",
@@ -29955,24 +30201,24 @@ function SvgReplyInThreadIcon(props) {
   })));
 }
 
-var _path$V;
-function _extends$W() {
-  return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
+var _path$W;
+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$W.apply(null, arguments);
+  }, _extends$X.apply(null, arguments);
 }
 function SvgArrowDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$W({
+  return /*#__PURE__*/React.createElement("svg", _extends$X({
     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", {
+  }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
@@ -29980,23 +30226,23 @@ function SvgArrowDown(props) {
   })));
 }
 
-var _path$W, _path2$7, _path3$2;
-function _extends$X() {
-  return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
+var _path$X, _path2$7, _path3$2;
+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 SvgInfoAction(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$X({
+  return /*#__PURE__*/React.createElement("svg", _extends$Y({
     width: 18,
     height: 18,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$X || (_path$X = /*#__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",
@@ -30282,18 +30528,18 @@ var Action = styled__default.div(_templateObject3$k || (_templateObject3$k = _ta
   return props.hoverBackgroundColor;
 }, ItemNote);
 
-var _rect$1, _path$X;
-function _extends$Y() {
-  return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$1, _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 SvgFileIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React.createElement("svg", _extends$Z({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -30304,24 +30550,24 @@ function SvgFileIcon(props) {
     height: 40,
     rx: 20,
     fill: "Transparent"
-  })), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+  })), _path$Y || (_path$Y = /*#__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$Y;
-function _extends$Z() {
-  return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$2, _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 SvgDeleteUpload(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Z({
+  return /*#__PURE__*/React.createElement("svg", _extends$_({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
@@ -30334,7 +30580,7 @@ function SvgDeleteUpload(props) {
     fill: "CurrentColor",
     stroke: "#fff",
     strokeWidth: 1.4
-  })), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
+  })), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
     d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
     stroke: "#fff",
     strokeWidth: 1.4,
@@ -30343,24 +30589,24 @@ function SvgDeleteUpload(props) {
   })));
 }
 
-var _path$Z;
-function _extends$_() {
-  return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
+var _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 SvgUpload(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$_({
+  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$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$_ || (_path$_ = /*#__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",
@@ -30368,18 +30614,18 @@ function SvgUpload(props) {
   })));
 }
 
-var _circle$3, _path$_;
-function _extends$$() {
-  return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$3, _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 SvgPlayVideo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$$({
+  return /*#__PURE__*/React.createElement("svg", _extends$10({
     width: 56,
     height: 56,
     fill: "none",
@@ -30390,7 +30636,7 @@ function SvgPlayVideo(props) {
     r: 28,
     fill: "#17191C",
     fillOpacity: 0.4
-  })), _path$_ || (_path$_ = /*#__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"
   })));
@@ -30574,18 +30820,18 @@ var AttachmentImg = styled__default.img(_templateObject7$b || (_templateObject7$
   return props.borderRadius || '6px';
 });
 
-var _circle$4, _path$$;
-function _extends$10() {
-  return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$4, _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 SvgPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$10({
+  return /*#__PURE__*/React.createElement("svg", _extends$11({
     width: 32,
     height: 32,
     viewBox: "0 0 33 33",
@@ -30596,24 +30842,24 @@ function SvgPlay(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+  })), _path$10 || (_path$10 = /*#__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$10;
-function _extends$11() {
-  return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$5, _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 SvgPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$11({
+  return /*#__PURE__*/React.createElement("svg", _extends$12({
     width: 32,
     height: 32,
     viewBox: "0 0 33 33",
@@ -30624,7 +30870,7 @@ function SvgPause(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  })), _path$11 || (_path$11 = /*#__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"
   })));
@@ -33731,24 +33977,24 @@ var MessageHeaderCont = styled__default.div(_templateObject$z || (_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$11;
-function _extends$12() {
-  return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$12;
+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 SvgEmojiAnimalIcon(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: "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",
@@ -33756,24 +34002,24 @@ function SvgEmojiAnimalIcon(props) {
   })));
 }
 
-var _path$12, _path2$8, _path3$3;
-function _extends$13() {
-  return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$13, _path2$8, _path3$3;
+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 SvgEmojiFoodIcon(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: "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",
@@ -33791,24 +34037,24 @@ function SvgEmojiFoodIcon(props) {
   })));
 }
 
-var _path$13;
-function _extends$14() {
-  return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
+var _path$14;
+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 SvgEmojiTravelIcon(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",
     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: "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",
@@ -33816,31 +34062,31 @@ function SvgEmojiTravelIcon(props) {
   })));
 }
 
-var _g, _defs$1;
-function _extends$15() {
-  return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
+var _g$1, _defs$2;
+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 SvgEmojiObjectIcon(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), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#emojiObjectIcon_svg__clip0_1048_8610)"
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M10 .917a.75.75 0 01.75.75V2.5a.75.75 0 01-1.5 0v-.833a.75.75 0 01.75-.75zM3.553 3.553a.75.75 0 011.06 0l.5.5a.75.75 0 11-1.06 1.061l-.5-.5a.75.75 0 010-1.06zm12.894 0a.75.75 0 010 1.061l-.5.5a.75.75 0 11-1.06-1.06l.5-.5a.75.75 0 011.06 0zM10 5.75a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4.25 10a5.75 5.75 0 118.167 5.22v1.447a2.417 2.417 0 01-4.834 0v-1.448A5.75 5.75 0 014.25 10zm4.833 5.678v.989a.917.917 0 101.834 0v-.99a5.795 5.795 0 01-1.834 0zM.917 10a.75.75 0 01.75-.75H2.5a.75.75 0 110 1.5h-.833a.75.75 0 01-.75-.75zm15.833 0a.75.75 0 01.75-.75h.833a.75.75 0 110 1.5H17.5a.75.75 0 01-.75-.75z",
     fill: "CurrentColor"
-  }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$2 || (_defs$2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "emojiObjectIcon_svg__clip0_1048_8610"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "CurrentColor",
@@ -33848,24 +34094,24 @@ function SvgEmojiObjectIcon(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 SvgEmojiSymbolsIcon(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: "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",
@@ -33873,24 +34119,24 @@ function SvgEmojiSymbolsIcon(props) {
   })));
 }
 
-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 SvgEmojiFlagicon(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", {
     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",
@@ -34386,24 +34632,24 @@ var Emoji = styled__default.li(_templateObject8$c || (_templateObject8$c = _tagg
   return props.hoverBackgroundColor;
 });
 
-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 SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$18({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     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: "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"
   })));
@@ -34961,23 +35207,23 @@ var Question = styled__default.div(_templateObject10$5 || (_templateObject10$5 =
   return p.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 SvgFilledCheckbox(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$19({
+  return /*#__PURE__*/React.createElement("svg", _extends$1a({
     width: 19,
     height: 19,
     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", {
     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"
   })));
@@ -38499,7 +38745,7 @@ var MessageList = function MessageList(_ref2) {
       nextDisableRef.current = false;
       clearMessagesMap();
       removeAllMessages();
-      dispatch(getMessagesAC(channel));
+      dispatch(getMessagesAC(channel, false, lastVisibleMessageId, 0, false, false, 'instant', false));
     }
   }, [connectionStatus]);
   React.useEffect(function () {
@@ -39578,24 +39824,24 @@ var MemberName$2 = styled__default.h3(_templateObject5$q || (_templateObject5$q
   return props.color;
 });
 
-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 SvgBold(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: "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",
@@ -39603,24 +39849,24 @@ function SvgBold(props) {
   })));
 }
 
-var _path$19;
-function _extends$1b() {
-  return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1a;
+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 SvgItalic(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",
     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", {
     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",
@@ -39628,24 +39874,24 @@ function SvgItalic(props) {
   })));
 }
 
-var _g$1;
-function _extends$1c() {
-  return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
+var _g$2;
+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 SvgStrikethrough(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), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     fill: "CurrentColor"
@@ -39656,47 +39902,47 @@ function SvgStrikethrough(props) {
   }))));
 }
 
-var _path$1a;
-function _extends$1d() {
-  return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1b;
+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 SvgMono(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",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1b || (_path$1b = /*#__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$1e() {
-  return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
+var _g$3;
+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 SvgUnderline(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1e({
+  return /*#__PURE__*/React.createElement("svg", _extends$1f({
     width: 18,
     height: 18,
     viewBox: "0 0 18.01 18.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
     fill: "CurrentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M13 9c0 2.79-1.368 4.184-4.105 4.184S4.789 11.79 4.789 9V2.384c0-.242.085-.447.253-.616a.864.864 0 01.632-.268c.242 0 .447.09.615.268a.814.814 0 01.269.616V9.08c0 .926.19 1.6.568 2.021.39.421.99.632 1.8.632s1.406-.21 1.784-.632c.39-.421.585-1.095.585-2.021V2.353a.82.82 0 01.252-.6.82.82 0 01.6-.253.82.82 0 01.6.253.82.82 0 01.253.6V9z"
@@ -40652,18 +40898,18 @@ var Emoji$1 = styled__default.li(_templateObject8$k || (_templateObject8$k = _ta
 
 var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
-var _circle$6, _path$1b;
-function _extends$1f() {
-  return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$6, _path$1c;
+function _extends$1g() {
+  return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1f.apply(null, arguments);
+  }, _extends$1g.apply(null, arguments);
 }
 function SvgSend(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1f({
+  return /*#__PURE__*/React.createElement("svg", _extends$1g({
     width: 32,
     height: 32,
     fill: "none",
@@ -40673,142 +40919,142 @@ function SvgSend(props) {
     cy: 16,
     r: 16,
     fill: "currentColor"
-  })), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
+  })), _path$1c || (_path$1c = /*#__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$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 SvgEye(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1g({
+  return /*#__PURE__*/React.createElement("svg", _extends$1h({
     width: 25,
     height: 24,
     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.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$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 SvgAddAttachment(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1h({
+  return /*#__PURE__*/React.createElement("svg", _extends$1i({
     width: 24,
     height: 24,
     viewBox: "0 0 24.01 24.01",
     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 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$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 SvgErrorCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1i({
+  return /*#__PURE__*/React.createElement("svg", _extends$1j({
     width: 25,
     height: 24,
     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: "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$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 SvgPlayRecord(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: "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$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 SvgPauseRecord(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1k({
+  return /*#__PURE__*/React.createElement("svg", _extends$1l({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     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", {
     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$1h;
-function _extends$1l() {
-  return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1i;
+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 SvgStopRecord(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1l({
+  return /*#__PURE__*/React.createElement("svg", _extends$1m({
     width: 20,
     height: 20,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1i || (_path$1i = /*#__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",
@@ -40816,18 +41062,18 @@ function SvgStopRecord(props) {
   })));
 }
 
-var _circle$7, _path$1i, _path2$9;
-function _extends$1m() {
-  return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
+var _circle$7, _path$1j, _path2$9;
+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 SvgRecordButton(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1m({
+  return /*#__PURE__*/React.createElement("svg", _extends$1n({
     width: 32,
     height: 32,
     viewBox: "0 0 32.01 32.01",
@@ -40838,7 +41084,7 @@ function SvgRecordButton(props) {
     cy: 16,
     r: 16,
     fill: "CurrentColor"
-  })), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
+  })), _path$1j || (_path$1j = /*#__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$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
@@ -41498,23 +41744,23 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-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 SvgDotsVertica(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1n({
+  return /*#__PURE__*/React.createElement("svg", _extends$1o({
     width: 16,
     height: 16,
     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: "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"
   })));
@@ -41940,7 +42186,7 @@ var SettingItem = styled__default.div(_templateObject9$i || (_templateObject9$i
   return props.color;
 });
 
-var _templateObject$R, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _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$R, _templateObject2$M, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _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(),
@@ -43689,7 +43935,7 @@ var TypingFrom = styled__default.h5(_templateObject19$2 || (_templateObject19$2
   return props.color;
 });
 var sizeAnimation = styled.keyframes(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  50% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  100% {\n    width: 6px;\n    height: 6px;\n    opacity: 1;\n  }\n"])));
-var DotOne = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose([""])));
+var DotOne = styled__default.span(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose([""])));
 var DotTwo = styled__default.span(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose([""])));
 var DotThree = styled__default.span(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose([""])));
 var TypingAnimation = styled__default.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  & > span {\n    position: relative;\n    width: 6px;\n    height: 6px;\n    margin-right: 3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation-timing-function: linear;\n\n    &:after {\n      content: '';\n      position: absolute;\n\n      width: 3.5px;\n      height: 3.5px;\n      border-radius: 50%;\n      background-color: ", ";\n      animation-name: ", ";\n      animation-duration: 0.6s;\n      animation-iteration-count: infinite;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.2s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.3s;\n    }\n  }\n"])), function (props) {
@@ -43765,23 +44011,23 @@ var copyToClipboard = function copyToClipboard(text) {
   }
 };
 
-var _path$1k;
-function _extends$1o() {
-  return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1l;
+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 SvgBottom(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1o({
+  return /*#__PURE__*/React.createElement("svg", _extends$1p({
     width: 12,
     height: 7,
     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: "M1.5 1.5l4.5 4 4.5-4",
     stroke: "#676A7C",
     strokeWidth: 1.4,
@@ -43790,24 +44036,24 @@ function SvgBottom(props) {
   })));
 }
 
-var _path$1l, _path2$a;
-function _extends$1p() {
-  return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1m, _path2$a;
+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 SvgMarkAsUnRead(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", {
     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$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
@@ -43816,24 +44062,24 @@ function SvgMarkAsUnRead(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 SvgMarkAsRead(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1q({
+  return /*#__PURE__*/React.createElement("svg", _extends$1r({
     width: 20,
     height: 20,
     viewBox: "0 0 20.01 20.01",
     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: "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",
@@ -43841,23 +44087,23 @@ function SvgMarkAsRead(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 SvgClear(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1r({
+  return /*#__PURE__*/React.createElement("svg", _extends$1s({
     width: 20,
     height: 21,
     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", {
     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",
@@ -43865,46 +44111,46 @@ function SvgClear(props) {
   })));
 }
 
-var _path$1o;
-function _extends$1s() {
-  return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1p;
+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 SvgBlockChannel(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1s({
+  return /*#__PURE__*/React.createElement("svg", _extends$1t({
     width: 20,
     height: 21,
     viewBox: "0 0 20.01 21.01",
     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: "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$1p, _path2$b;
-function _extends$1t() {
-  return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1q, _path2$b;
+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 SvgReport(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1t({
+  return /*#__PURE__*/React.createElement("svg", _extends$1u({
     width: 20,
     height: 21,
     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: "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$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
@@ -43915,53 +44161,353 @@ function SvgReport(props) {
   })));
 }
 
-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 SvgStar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1u({
+  return /*#__PURE__*/React.createElement("svg", _extends$1v({
     width: 20,
     height: 20,
     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: "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$1r;
-function _extends$1v() {
-  return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
+var _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 SvgUnpin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1v({
+  return /*#__PURE__*/React.createElement("svg", _extends$1w({
     width: 20,
     height: 21,
     viewBox: "0 0 20.01 21.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1s || (_path$1s = /*#__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$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$n, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _path$1t, _path2$c;
+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$1x.apply(null, arguments);
+}
+function SvgWatch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1x({
+    width: 20,
+    height: 20,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1t || (_path$1t = /*#__PURE__*/React.createElement("path", {
+    d: "M11.724 1.329a.814.814 0 110 1.628h-.91V4.23a7.206 7.206 0 013.556 1.42l.204.161.008.006h0l1.01 1.009.009.006-.001.001a7.243 7.243 0 11-6.414-2.603V2.958h-.909a.815.815 0 010-1.628h3.447z",
+    fill: "currentColor",
+    stroke: "currentColor",
+    strokeWidth: 0.2
+  })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
+    className: "watch_svg__watch-ticks",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.015 7.788c.47 0 .849.38.849.848v2.821l2.48.93a.848.848 0 11-.596 1.59l-3.03-1.137a.849.849 0 01-.551-.795V8.636c0-.468.38-.848.848-.848z",
+    fill: "currentColor"
+  })));
+}
+
+var _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$1y.apply(null, arguments);
+}
+function SvgChevronBottom(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1y({
+    width: 16,
+    height: 16,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.293 5.626a1 1 0 000 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L8 8.919 4.707 5.626a1 1 0 00-1.414 0z",
+    fill: "#818C99"
+  })));
+}
+
+var _templateObject$S, _templateObject2$N, _templateObject3$G, _templateObject4$A, _templateObject5$v, _templateObject6$r, _templateObject7$q, _templateObject8$n;
+var TIMER_OPTIONS = [{
+  key: 'off',
+  label: 'Off'
+}, {
+  key: '1day',
+  label: '1 day'
+}, {
+  key: '1week',
+  label: '1 week'
+}, {
+  key: '1month',
+  label: '1 month'
+}];
+function DisappearingMessagesPopup(_ref) {
+  var theme = _ref.theme,
+    togglePopup = _ref.togglePopup,
+    handleSetTimer = _ref.handleSetTimer,
+    currentTimer = _ref.currentTimer;
+  var colors = useColors();
+  var accentColor = colors[THEME_COLORS.ACCENT],
+    background = colors[THEME_COLORS.BACKGROUND],
+    textPrimary = colors[THEME_COLORS.TEXT_PRIMARY],
+    surface1 = colors[THEME_COLORS.SURFACE_1],
+    warningColor = colors[THEME_COLORS.WARNING],
+    iconInactive = colors[THEME_COLORS.ICON_INACTIVE],
+    textOnPrimary = colors[THEME_COLORS.TEXT_ON_PRIMARY],
+    iconPrimary = colors[THEME_COLORS.ICON_PRIMARY],
+    textSecondary = colors[THEME_COLORS.TEXT_SECONDARY],
+    backgroundHovered = colors[THEME_COLORS.BACKGROUND_HOVERED],
+    borderColor = colors[THEME_COLORS.BORDER];
+  var _useState = React.useState('off'),
+    selectedOption = _useState[0],
+    setSelectedOption = _useState[1];
+  var _useState2 = React.useState(''),
+    customValue = _useState2[0],
+    setCustomValue = _useState2[1];
+  var _useState3 = React.useState(true),
+    initialRender = _useState3[0],
+    setInitialRender = _useState3[1];
+  var _useState4 = React.useState(false),
+    isDropdownOpen = _useState4[0],
+    setDropdownOpen = _useState4[1];
+  var previousTimerRef = React.useRef(currentTimer);
+  var hasInitializedRef = React.useRef(false);
+  var CUSTOM_OPTIONS = React.useMemo(function () {
+    var _getDisappearingSetti;
+    return ((_getDisappearingSetti = getDisappearingSettings()) === null || _getDisappearingSetti === void 0 ? void 0 : _getDisappearingSetti.customOptions) || [];
+  }, []);
+  React.useEffect(function () {
+    var _CUSTOM_OPTIONS$;
+    if (CUSTOM_OPTIONS.length > 0 && (_CUSTOM_OPTIONS$ = CUSTOM_OPTIONS[0]) !== null && _CUSTOM_OPTIONS$ !== void 0 && _CUSTOM_OPTIONS$.label) {
+      var _CUSTOM_OPTIONS$2;
+      setCustomValue(((_CUSTOM_OPTIONS$2 = CUSTOM_OPTIONS[0]) === null || _CUSTOM_OPTIONS$2 === void 0 ? void 0 : _CUSTOM_OPTIONS$2.label) || '');
+    }
+  }, [CUSTOM_OPTIONS]);
+  var CUSTOM_SECONDS_MAP = React.useMemo(function () {
+    return Object.fromEntries(CUSTOM_OPTIONS.map(function (o) {
+      return [o.label, o.seconds];
+    }));
+  }, [CUSTOM_OPTIONS]);
+  React.useEffect(function () {
+    if (previousTimerRef.current !== currentTimer) {
+      setInitialRender(true);
+      hasInitializedRef.current = false;
+      previousTimerRef.current = currentTimer;
+    }
+    if (!currentTimer) {
+      setSelectedOption('off');
+    } else {
+      var fixedMatch = Object.keys(FIXED_TIMER_OPTIONS).find(function (key) {
+        return (FIXED_TIMER_OPTIONS[key] || 0) * 1000 === currentTimer;
+      });
+      if (fixedMatch) {
+        setSelectedOption(fixedMatch);
+      } else {
+        var customMatch = CUSTOM_OPTIONS.find(function (o) {
+          return o.seconds * 1000 === currentTimer;
+        });
+        setSelectedOption('custom');
+        setCustomValue((customMatch === null || customMatch === void 0 ? void 0 : customMatch.label) || '2days');
+      }
+    }
+  }, [currentTimer]);
+  React.useEffect(function () {
+    if (!hasInitializedRef.current && initialRender) {
+      hasInitializedRef.current = true;
+      setInitialRender(false);
+    }
+  }, [initialRender]);
+  var selectedTimerValue = React.useMemo(function () {
+    return selectedOption === 'custom' ? CUSTOM_SECONDS_MAP[customValue] : FIXED_TIMER_OPTIONS[selectedOption];
+  }, [selectedOption, customValue]);
+  var isValueUnchanged = React.useMemo(function () {
+    if (initialRender) return true;
+    if (!selectedTimerValue && !selectedTimerValue) {
+      return true;
+    } else if (selectedTimerValue * 1000 === currentTimer) {
+      return true;
+    }
+    return false;
+  }, [currentTimer, selectedTimerValue, initialRender]);
+  var handleSet = React.useCallback(function () {
+    if (selectedOption === 'custom') {
+      handleSetTimer(CUSTOM_SECONDS_MAP[customValue]);
+    } else {
+      handleSetTimer(FIXED_TIMER_OPTIONS[selectedOption]);
+    }
+    togglePopup();
+  }, [selectedOption, customValue, handleSetTimer, togglePopup]);
+  var selectedCustomLabel = React.useMemo(function () {
+    var _CUSTOM_OPTIONS$find;
+    return ((_CUSTOM_OPTIONS$find = CUSTOM_OPTIONS.find(function (o) {
+      return o.label === customValue;
+    })) === null || _CUSTOM_OPTIONS$find === void 0 ? void 0 : _CUSTOM_OPTIONS$find.label) || '2 days';
+  }, [customValue, CUSTOM_OPTIONS]);
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    theme: theme,
+    backgroundColor: background,
+    maxWidth: '522px',
+    minWidth: '522px',
+    width: '100%',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px',
+    marginBottom: '0'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: togglePopup
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px',
+    lineHeight: '24px'
+  }, "Set a default message timer"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: accentColor
+  }, "Make messages in this chat disappear."), /*#__PURE__*/React__default.createElement(TimerOptionsSection, {
+    marginTop: '20px'
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    color: textPrimary,
+    marginTop: '0'
+  }, "Auto-delete after"), TIMER_OPTIONS.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(TimerOptionItem, {
+      key: option.key,
+      color: textPrimary,
+      onClick: function onClick() {
+        return setSelectedOption(option.key);
+      }
+    }, /*#__PURE__*/React__default.createElement(CustomRadio, {
+      index: option.key,
+      size: '18px',
+      state: selectedOption === option.key,
+      onChange: function onChange() {
+        return setSelectedOption(option.key);
+      },
+      checkedBorderColor: accentColor,
+      borderColor: iconInactive,
+      borderRadius: '4px',
+      variant: 'checkbox'
+    }), option.label);
+  }), CUSTOM_OPTIONS.length > 0 && (/*#__PURE__*/React__default.createElement(TimerOptionItem, {
+    color: textPrimary,
+    onClick: function onClick() {
+      return setSelectedOption('custom');
+    }
+  }, /*#__PURE__*/React__default.createElement(CustomRadio, {
+    index: 'custom',
+    size: '18px',
+    state: selectedOption === 'custom',
+    onChange: function onChange() {
+      return setSelectedOption('custom');
+    },
+    checkedBorderColor: accentColor,
+    borderColor: iconInactive,
+    borderRadius: '4px',
+    variant: 'checkbox'
+  }), "Custom")), selectedOption === 'custom' && (/*#__PURE__*/React__default.createElement(CustomTimerSection, null, /*#__PURE__*/React__default.createElement(Label, {
+    color: textPrimary,
+    marginTop: '0'
+  }, "Auto-delete after"), /*#__PURE__*/React__default.createElement(CustomSelectWrapper, {
+    accentColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(CustomSelect, {
+    backgroundColor: background,
+    color: textPrimary,
+    errorColor: warningColor,
+    placeholderColor: textSecondary,
+    borderColor: isDropdownOpen ? accentColor : borderColor,
+    disabledColor: surface1,
+    minWidth: '474px',
+    maxWidth: '474px'
+  }, /*#__PURE__*/React__default.createElement(DropDown, {
+    withIcon: true,
+    theme: theme,
+    isSelect: true,
+    position: 'top',
+    trigger: /*#__PURE__*/React__default.createElement(CustomSelectTriggerStyled, {
+      color: textPrimary
+    }, selectedCustomLabel),
+    watchToggleState: setDropdownOpen
+  }, /*#__PURE__*/React__default.createElement(CustomDropdownOptionsUl, {
+    theme: theme,
+    accentColor: accentColor
+  }, CUSTOM_OPTIONS.map(function (o) {
+    return /*#__PURE__*/React__default.createElement(CustomDropdownOptionLi, {
+      hoverBackground: backgroundHovered,
+      key: o.label,
+      onClick: function onClick() {
+        return setCustomValue(o.label);
+      },
+      textColor: textPrimary
+    }, o.label);
+  }))))))))), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    color: textPrimary,
+    backgroundColor: 'transparent',
+    onClick: togglePopup
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(SetButton, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: handleSet,
+    disabled: isValueUnchanged
+  }, "Set"))));
+}
+var TimerOptionsSection = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  margin-top: ", ";\n"])), function (props) {
+  return props.marginTop || '14px';
+});
+var TimerOptionItem = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: ", ";\n  padding: 10px 0;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n\n  & > label {\n    margin-right: 10px;\n  }\n"])), function (props) {
+  return props.color;
+});
+var CustomTimerSection = styled__default.div(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  margin: 16px auto 0 auto;\n"])));
+var CustomSelectWrapper = styled__default.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 474px;\n\n  .dropdown-wrapper {\n    width: 100%;\n\n    .dropdown-body {\n      width: 474px;\n      // height: 268px;\n      max-height: 268px;\n      border-color: ", "\n      border-radius: 8px;\n    }\n  }\n"])), function (props) {
+  return props.accentColor;
+});
+var CustomSelectTriggerStyled = styled__default(CustomSelectTrigger)(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  text-transform: none;\n"])));
+var CustomDropdownOptionLi = styled__default(DropdownOptionLi)(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n"])));
+var CustomDropdownOptionsUl = styled__default(DropdownOptionsUl)(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n  border-color: ", ";\n  height: 268px;\n  max-height: 268px;\n  border-radius: 0;\n\n  ", " {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), function (props) {
+  return props.accentColor;
+}, CustomDropdownOptionLi);
+var SetButton = styled__default(Button)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  width: 57px;\n  height: 36px;\n  min-width: 57px;\n  max-width: 57px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+
+var _templateObject$T, _templateObject2$O, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o, _templateObject9$k, _templateObject0$i, _templateObject1$f, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
 var Actions = function Actions(_ref) {
+  var _getDisappearingSetti;
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
     actionMenuOpen = _ref.actionMenuOpen,
@@ -44037,9 +44583,11 @@ var Actions = function Actions(_ref) {
     borderColor = _ref.borderColor;
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    warningColor = _useColor[THEME_COLORS.WARNING];
+    warningColor = _useColor[THEME_COLORS.WARNING],
+    backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var _useState = React.useState(false),
@@ -44066,14 +44614,17 @@ var Actions = function Actions(_ref) {
   var _useState8 = React.useState(false),
     reportUserPopupOpen = _useState8[0],
     setReportUserPopupOpen = _useState8[1];
+  var _useState9 = React.useState(false),
+    disappearingMessagesPopupOpen = _useState9[0],
+    setDisappearingMessagesPopupOpen = _useState9[1];
   var _usePermissions = usePermissions(channel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState9 = React.useState(''),
-    popupButtonText = _useState9[0],
-    setPopupButtonText = _useState9[1];
   var _useState0 = React.useState(''),
-    popupTitle = _useState0[0],
-    setPopupTitle = _useState0[1];
+    popupButtonText = _useState0[0],
+    setPopupButtonText = _useState0[1];
+  var _useState1 = React.useState(''),
+    popupTitle = _useState1[0],
+    setPopupTitle = _useState1[1];
   var dispatch = useDispatch();
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
@@ -44087,6 +44638,8 @@ var Actions = function Actions(_ref) {
   var otherMembers = isDirectChannel && channel.members.filter(function (member) {
     return member.id && member.id !== user.id;
   }) || [];
+  var hasPermissiontoSetDM = channel.userRole === 'admin' || channel.userRole === 'owner';
+  var canToggleDisappearingMessages = isDirectChannel || hasPermissiontoSetDM;
   var handleToggleClearHistoryPopup = function handleToggleClearHistoryPopup() {
     setClearHistoryPopupOpen(!clearHistoryPopupOpen);
   };
@@ -44164,6 +44717,13 @@ var Actions = function Actions(_ref) {
       dispatch(pinChannelAC(channel.id));
     }
   };
+  var handleToggleDisappearingMessagesPopup = function handleToggleDisappearingMessagesPopup() {
+    setDisappearingMessagesPopupOpen(!disappearingMessagesPopupOpen);
+  };
+  var handleSetDisappearingMessagesTimer = function handleSetDisappearingMessagesTimer(timerInSeconds) {
+    var periodInMilliseconds = timerInSeconds ? timerInSeconds * 1000 : 0;
+    dispatch(setMessageRetentionPeriodAC(channel.id, periodInMilliseconds));
+  };
   var containerRef = React.useRef(null);
   React.useEffect(function () {
     if (containerRef.current) {
@@ -44256,7 +44816,20 @@ var Actions = function Actions(_ref) {
     color: staredMessagesTextColor || textPrimary,
     hoverColor: staredMessagesTextColor || textPrimary,
     fontSize: actionItemsFontSize
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, staredMessagesIcon || /*#__PURE__*/React__default.createElement(DefaultStarIcon, null), " Starred messages "))), showPinChannel && !channel.isMockChannel && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(ActionItem, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, staredMessagesIcon || /*#__PURE__*/React__default.createElement(DefaultStarIcon, null), " Starred messages "))), ((_getDisappearingSetti = getDisappearingSettings()) === null || _getDisappearingSetti === void 0 ? void 0 : _getDisappearingSetti.show) && !channel.isMockChannel && canToggleDisappearingMessages && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(ActionItem, {
+    key: 1.5,
+    onClick: handleToggleDisappearingMessagesPopup,
+    iconColor: iconPrimary,
+    color: textPrimary,
+    hoverColor: textPrimary,
+    fontSize: actionItemsFontSize
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DefaultWatchIcon, {
+    "$isLightMode": backgroundColor === '#FFFFFF'
+  }), "Disappearing messages", /*#__PURE__*/React__default.createElement(DisappearingMessagesStatusWrapper, null, /*#__PURE__*/React__default.createElement(DisappearingMessagesStatus, {
+    color: textSecondary
+  }, channel.messageRetentionPeriod ? 'On' : 'Off'), /*#__PURE__*/React__default.createElement(ChevronRightIconWrapper, null, /*#__PURE__*/React__default.createElement(SvgChevronBottom, {
+    color: iconPrimary
+  })))))), showPinChannel && !channel.isMockChannel && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(ActionItem, {
     key: 2,
     onClick: handlePinUnpinChannel,
     order: pinChannelOrder,
@@ -44422,20 +44995,25 @@ var Actions = function Actions(_ref) {
     buttonText: popupButtonText,
     description: channel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? 'Once you clear the history, the messages in this chat will be permanently removed for you.' : channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Once you clear the history it will be permanently removed for you.' : channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'Once you clear the history, the messages in this channel will be permanently removed for all the subscribers.' : 'Are you sure you want to delete all messages? This action cannot be undone.',
     title: popupTitle
+  })), disappearingMessagesPopupOpen && (/*#__PURE__*/React__default.createElement(DisappearingMessagesPopup, {
+    theme: theme,
+    togglePopup: handleToggleDisappearingMessagesPopup,
+    handleSetTimer: handleSetDisappearingMessagesTimer,
+    currentTimer: channel.messageRetentionPeriod
   })));
 };
-var Container$n = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
+var Container$n = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  padding: 10px 16px;\n  border-bottom: 6px solid ", ";\n]"])), function (props) {
   return props.borderColor;
 });
-var ActionHeader = styled__default.div(_templateObject2$N || (_templateObject2$N = _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$G || (_templateObject3$G = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
+var ActionHeader = styled__default.div(_templateObject2$O || (_templateObject2$O = _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$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  transition: all 0.2s;\n  ", "\n"])), function (props) {
   return !props.isOpen && ' transform: rotate(-90deg);';
 });
-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$q || (_templateObject7$q = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu = styled__default.ul(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var DefaultMutedIcon = styled__default(SvgUnmuteNotifications)(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose([""])));
+var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$s || (_templateObject6$s = _taggedTemplateLiteralLoose([""])));
+var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$f || (_templateObject1$f = _taggedTemplateLiteralLoose([""])));
@@ -44445,7 +45023,10 @@ var DefaultClearIcon = styled__default(SvgClear)(_templateObject12$6 || (_templa
 var DefaultDeleteChannelIcon = styled__default(SvgDeleteChannel)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose([""])));
 var DefaultBottomIcon = styled__default(SvgBottom)(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsReadIcon = styled__default(SvgLeave)(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose([""])));
-var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n  order: ", ";\n  pointer-events: ", ";\n\n  & > div {\n    margin-left: auto;\n  }\n\n  & > svg {\n    margin-right: 16px;\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:last-child {\n    //margin-bottom: 0;\n  }\n"])), function (props) {
+var DefaultWatchIcon = styled__default(SvgWatch)(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  path.watch-ticks,\n  path:nth-child(2) {\n    fill: ", " !important;\n  }\n"])), function (props) {
+  return props.$isLightMode ? '#FFFFFF' : '#000000';
+});
+var ActionItem = styled__default.li(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n  order: ", ";\n  pointer-events: ", ";\n\n  & > div {\n    margin-left: auto;\n  }\n\n  & > svg {\n    margin-right: 16px;\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:last-child {\n    //margin-bottom: 0;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -44458,19 +45039,24 @@ var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3
 }, function (props) {
   return props.hoverColor;
 });
+var DisappearingMessagesStatusWrapper = styled__default.div(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
+var DisappearingMessagesStatus = styled__default.span(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 14px;\n"])), function (props) {
+  return props.color;
+});
+var ChevronRightIconWrapper = styled__default.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _rect$2, _rect2, _path$1s;
-function _extends$1w() {
-  return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$2, _rect2, _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$1w.apply(null, arguments);
+  }, _extends$1z.apply(null, arguments);
 }
 function SvgAddMember(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1w({
+  return /*#__PURE__*/React.createElement("svg", _extends$1z({
     width: 40,
     height: 40,
     viewBox: "0 0 40.01 40.01",
@@ -44490,35 +45076,35 @@ function SvgAddMember(props) {
     stroke: "#000",
     strokeOpacity: 0.08,
     strokeWidth: 0.5
-  })), _path$1s || (_path$1s = /*#__PURE__*/React.createElement("path", {
+  })), _path$1v || (_path$1v = /*#__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$1t;
-function _extends$1x() {
-  return _extends$1x = Object.assign ? Object.assign.bind() : function (n) {
+var _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$1x.apply(null, arguments);
+  }, _extends$1A.apply(null, arguments);
 }
 function SvgMoreVert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1x({
+  return /*#__PURE__*/React.createElement("svg", _extends$1A({
     width: 4,
     height: 14,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1t || (_path$1t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1w || (_path$1w = /*#__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$T, _templateObject2$O, _templateObject3$H;
+var _templateObject$U, _templateObject2$P, _templateObject3$I;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
   var theme = _ref.theme,
     channelId = _ref.channelId,
@@ -44621,12 +45207,12 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     onClick: handleSave
   }, "Save"))));
 };
-var RolesSelect = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled__default.div(_templateObject2$O || (_templateObject2$O = _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$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled__default.div(_templateObject2$P || (_templateObject2$P = _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$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+var RoleSpan = styled__default.span(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
 function ResetLinkConfirmModal(_ref) {
   var _getInviteLinkOptions;
@@ -44663,7 +45249,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$U, _templateObject2$P, _templateObject3$I, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$r, _templateObject8$o, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -45147,34 +45733,34 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled__default.div(_templateObject$U || (_templateObject$U = _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$P || (_templateObject2$P = _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$V || (_templateObject$V = _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$Q || (_templateObject2$Q = _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$I || (_templateObject3$I = _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$J || (_templateObject3$J = _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$B || (_templateObject4$B = _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$C || (_templateObject4$C = _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$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled__default.span(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-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) {
+var LinkField = styled__default.div(_templateObject6$t || (_templateObject6$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
   return p.borderColor;
 }, function (p) {
   return p.backgroundColor;
 });
-var LinkInput = styled__default.input(_templateObject7$r || (_templateObject7$r = _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$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-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 CopyButton = styled__default.button(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
 var CopyButtonWrapper = styled__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var SectionTitle = styled__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;
@@ -45195,7 +45781,7 @@ var QrHint = styled__default.p(_templateObject13$5 || (_templateObject13$5 = _ta
   return p.color;
 });
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$J, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$s, _templateObject8$p, _templateObject9$m;
+var _templateObject$W, _templateObject2$R, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -45517,18 +46103,18 @@ var Members = function Members(_ref) {
     channelId: channel.id
   })));
 };
-var Container$o = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled__default.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled__default.div(_templateObject3$J || (_templateObject3$J = _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) {
+var Container$o = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled__default.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled__default.div(_templateObject3$K || (_templateObject3$K = _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$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled__default.h4(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-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) {
+var EditMemberIcon = styled__default.span(_templateObject6$u || (_templateObject6$u = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MembersList = styled__default.ul(_templateObject7$s || (_templateObject7$s = _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) {
+var MembersList = styled__default.ul(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled__default.li(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -45545,7 +46131,7 @@ var RoleBadge = styled__default.span(_templateObject9$m || (_templateObject9$m =
   return props.backgroundColor;
 });
 
-var _templateObject$W;
+var _templateObject$X;
 var MonthHeader = function MonthHeader(_ref) {
   var currentCreatedAt = _ref.currentCreatedAt,
     previousCreatedAt = _ref.previousCreatedAt,
@@ -45570,7 +46156,7 @@ var MonthHeader = function MonthHeader(_ref) {
   }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
   return monthComponent;
 };
-var MonthHeaderContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+var MonthHeaderContainer = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
   return props.padding || '9px 12px';
 }, function (props) {
   return props.fullWidth ? '100%' : 'auto';
@@ -45578,7 +46164,7 @@ var MonthHeaderContainer = styled__default.div(_templateObject$W || (_templateOb
   return props.color;
 });
 
-var _templateObject$X, _templateObject2$R;
+var _templateObject$Y, _templateObject2$S;
 var Media = function Media(_ref) {
   var channel = _ref.channel;
   var _useColor = useColors(),
@@ -45630,21 +46216,21 @@ var Media = function Media(_ref) {
     currentMediaFile: mediaFile
   })));
 };
-var Container$p = styled__default.div(_templateObject$X || (_templateObject$X = _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$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var Container$p = styled__default.div(_templateObject$Y || (_templateObject$Y = _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$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
-var _rect$3, _path$1u;
-function _extends$1y() {
-  return _extends$1y = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$3, _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$1y.apply(null, arguments);
+  }, _extends$1B.apply(null, arguments);
 }
 function SvgDocumentIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1y({
+  return /*#__PURE__*/React.createElement("svg", _extends$1B({
     width: 40,
     height: 40,
     fill: "none",
@@ -45655,7 +46241,7 @@ function SvgDocumentIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
+  })), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
@@ -45663,30 +46249,30 @@ function SvgDocumentIcon(props) {
   })));
 }
 
-var _path$1v;
-function _extends$1z() {
-  return _extends$1z = Object.assign ? Object.assign.bind() : function (n) {
+var _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$1z.apply(null, arguments);
+  }, _extends$1C.apply(null, arguments);
 }
 function SvgDownloadFile(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1z({
+  return /*#__PURE__*/React.createElement("svg", _extends$1C({
     width: 24,
     height: 24,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor"
-  }, props), _path$1v || (_path$1v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1y || (_path$1y = /*#__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$Y, _templateObject2$S, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$t, _templateObject8$q;
+var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$u, _templateObject8$r;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -45808,30 +46394,30 @@ var Files = function Files(_ref) {
     }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
   }));
 };
-var Container$q = styled__default.ul(_templateObject$Y || (_templateObject$Y = _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$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
+var Container$q = styled__default.ul(_templateObject$Z || (_templateObject$Z = _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$T || (_templateObject2$T = _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$K || (_templateObject3$K = _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  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var ProgressWrapper$2 = styled__default.span(_templateObject3$L || (_templateObject3$L = _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$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var FileHoverIconCont = styled__default.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var FileHoverIconCont = styled__default.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-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$t || (_templateObject7$t = _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$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
+var FileItem = styled__default.div(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, DownloadWrapper, FileIconCont, FileHoverIconCont);
-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) {
+var FileSizeAndDate = styled__default.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
   return props.fontSize || '13px';
 }, function (props) {
   return props.lineHeight || '16px';
@@ -45839,18 +46425,18 @@ var FileSizeAndDate = styled__default.span(_templateObject8$q || (_templateObjec
   return props.color;
 });
 
-var _rect$4, _path$1w;
-function _extends$1A() {
-  return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$4, _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$1A.apply(null, arguments);
+  }, _extends$1D.apply(null, arguments);
 }
 function SvgLinkIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1A({
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
     width: 40,
     height: 40,
     fill: "none",
@@ -45862,7 +46448,7 @@ function SvgLinkIcon(props) {
     rx: 8,
     fill: "currentColor",
     fillOpacity: 0.2
-  })), _path$1w || (_path$1w = /*#__PURE__*/React.createElement("path", {
+  })), _path$1z || (_path$1z = /*#__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",
@@ -45870,7 +46456,7 @@ function SvgLinkIcon(props) {
   })));
 }
 
-var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z;
+var _templateObject$_, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A;
 var LinkItem = function LinkItem(_ref) {
   var link = _ref.link,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -45901,25 +46487,25 @@ var LinkItem = function LinkItem(_ref) {
     color: linkPreviewColor || textPrimary
   }, link))));
 };
-var LinkIconCont = styled__default.span(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkIconCont = styled__default.span(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkHoverIconCont = styled__default.span(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+var LinkHoverIconCont = styled__default.span(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
   return props.iconColor;
 }, function (props) {
   return props.fillColor;
 });
-var LinkInfoCont = styled__default.div(_templateObject3$L || (_templateObject3$L = _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) {
+var LinkInfoCont = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled__default.li(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, LinkIconCont, LinkHoverIconCont);
-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) {
+var LinkUrl = styled__default.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$_;
+var _templateObject$$;
 var Links = function Links(_ref) {
   var channelId = _ref.channelId,
     linkPreviewIcon = _ref.linkPreviewIcon,
@@ -45950,20 +46536,20 @@ var Links = function Links(_ref) {
     }));
   }));
 };
-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 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 _rect$5, _path$1x;
-function _extends$1B() {
-  return _extends$1B = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$5, _path$1A;
+function _extends$1E() {
+  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends$1B.apply(null, arguments);
+  }, _extends$1E.apply(null, arguments);
 }
 function SvgVoicePreview(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1B({
+  return /*#__PURE__*/React.createElement("svg", _extends$1E({
     width: 40,
     height: 40,
     fill: "none",
@@ -45973,24 +46559,24 @@ function SvgVoicePreview(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
+  })), _path$1A || (_path$1A = /*#__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$1y;
-function _extends$1C() {
-  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
+var _rect$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$1C.apply(null, arguments);
+  }, _extends$1F.apply(null, arguments);
 }
 function SvgVoicePreviewPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1C({
+  return /*#__PURE__*/React.createElement("svg", _extends$1F({
     width: 40,
     height: 40,
     fill: "none",
@@ -46000,13 +46586,13 @@ function SvgVoicePreviewPause(props) {
     height: 40,
     rx: 20,
     fill: "#5159F6"
-  })), _path$1y || (_path$1y = /*#__PURE__*/React.createElement("path", {
+  })), _path$1B || (_path$1B = /*#__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$$, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$v, _templateObject7$u, _templateObject8$r;
+var _templateObject$10, _templateObject2$V, _templateObject3$N, _templateObject4$G, _templateObject5$B, _templateObject6$w, _templateObject7$v, _templateObject8$s;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -46131,32 +46717,32 @@ var VoiceItem = function VoiceItem(_ref) {
     type: 'audio/mpeg'
   })));
 };
-var FileIconCont$1 = styled__default.span(_templateObject$$ || (_templateObject$$ = _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$10 || (_templateObject$10 = _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$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+var FileHoverIconCont$1 = styled__default.span(_templateObject2$V || (_templateObject2$V = _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$M || (_templateObject3$M = _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$N || (_templateObject3$N = _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$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) {
+var AudioInfo = styled__default.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled__default.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-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: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled__default.span(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioSendTime = styled__default.span(_templateObject7$u || (_templateObject7$u = _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$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 });
-var Audio = styled__default.audio(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio = styled__default.audio(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$10;
+var _templateObject$11;
 var Voices = function Voices(_ref) {
   var channelId = _ref.channelId,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -46193,9 +46779,9 @@ var Voices = function Voices(_ref) {
     }));
   }));
 };
-var Container$s = styled__default.ul(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var Container$s = styled__default.ul(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 11px 0 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
 
-var _templateObject$11, _templateObject2$V;
+var _templateObject$12, _templateObject2$W;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
     theme = _ref.theme,
@@ -46346,8 +46932,8 @@ var DetailsTab = function DetailsTab(_ref) {
     voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
   })));
 };
-var Container$t = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
-var DetailsTabHeader = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var Container$t = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  min-height: calc(100vh - 64px);\n"])));
+var DetailsTabHeader = styled__default.div(_templateObject2$W || (_templateObject2$W = _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';
@@ -46365,17 +46951,17 @@ var DetailsTabHeader = styled__default.div(_templateObject2$V || (_templateObjec
   return props.activeTabColor;
 });
 
-var _templateObject$12, _templateObject2$W, _templateObject3$N, _templateObject4$G;
-var Container$u = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  ", ";\n  height: ", ";\n  position: absolute;\n  padding: 24px 16px;\n  background-color: ", ";\n  z-index: 25;\n"])), function (props) {
+var _templateObject$13, _templateObject2$X, _templateObject3$O, _templateObject4$H;
+var Container$u = styled__default.div(_templateObject$13 || (_templateObject$13 = _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$W || (_templateObject2$W = _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$N || (_templateObject3$N = _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 AvatarCont = styled__default.div(_templateObject2$X || (_templateObject2$X = _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$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 4;\n  width: 40px;\n  height: 40px;\n"])));
+var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$H || (_templateObject4$H = _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,
@@ -46630,7 +47216,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$13, _templateObject2$X, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$w, _templateObject7$v, _templateObject8$s, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
+var _templateObject$14, _templateObject2$Y, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject6$x, _templateObject7$w, _templateObject8$t, _templateObject9$n, _templateObject0$k, _templateObject1$h, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -47060,17 +47646,17 @@ var Details = function Details(_ref) {
     QRCodeIcon: QRCodeIcon
   }))));
 };
-var Container$v = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  width: 0;\n  border-left: 1px solid ", ";\n  //transition: all 0.1s;\n  ", "\n  background-color: ", ";\n}\n"])), function (props) {
+var Container$v = styled__default.div(_templateObject$14 || (_templateObject$14 = _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$X || (_templateObject2$X = _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$Y || (_templateObject2$Y = _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$O || (_templateObject3$O = _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$P || (_templateObject3$P = _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';
@@ -47079,21 +47665,21 @@ var ChatDetails = styled__default.div(_templateObject3$O || (_templateObject3$O
 }, function (props) {
   return props.thumbColor;
 });
-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) {
+var AboutChannel = styled__default.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var AboutChannelTitle = styled__default.h4(_templateObject5$C || (_templateObject5$C = _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$w || (_templateObject6$w = _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$x || (_templateObject6$x = _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$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (props) {
+var ChannelInfo$4 = styled__default.div(_templateObject7$w || (_templateObject7$w = _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$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) {
+var DetailsHeader = styled__default.div(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
   return props.borderColor;
 });
 var ChannelAvatarAndName = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
@@ -47110,7 +47696,7 @@ var ChannelNameWrapper = styled__default.div(_templateObject1$h || (_templateObj
 var EditButton = styled__default.span(_templateObject10$b || (_templateObject10$b = _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$14;
+var _templateObject$15;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -47341,31 +47927,31 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     QRCodeIcon: QRCodeIcon
   })));
 };
-var DetailsWrapper = styled__default.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
+var DetailsWrapper = styled__default.div(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose(["\n  user-select: text;\n"])));
 
-var _path$1z;
-function _extends$1D() {
-  return _extends$1D = 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$1D.apply(null, arguments);
+  }, _extends$1G.apply(null, arguments);
 }
 function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1D({
+  return /*#__PURE__*/React.createElement("svg", _extends$1G({
     width: 32,
     height: 32,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1C || (_path$1C = /*#__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$15, _templateObject2$Y;
+var _templateObject$16, _templateObject2$Z;
 var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -47448,7 +48034,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$15 || (_templateObject$15 = _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$16 || (_templateObject$16 = _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";
@@ -47459,7 +48045,7 @@ var BottomButton = styled__default.div(_templateObject$15 || (_templateObject$15
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$1 = 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) {
+var UnreadCount$1 = styled__default.span(_templateObject2$Z || (_templateObject2$Z = _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';
@@ -47471,29 +48057,29 @@ var UnreadCount$1 = styled__default.span(_templateObject2$Y || (_templateObject2
   return props.textColor || '#fff';
 });
 
-var _path$1A, _path2$c;
-function _extends$1E() {
-  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
+var _path$1D, _path2$d;
+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$1E.apply(null, arguments);
+  }, _extends$1H.apply(null, arguments);
 }
 function SvgMention(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1E({
+  return /*#__PURE__*/React.createElement("svg", _extends$1H({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1D || (_path$1D = /*#__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$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
+  })), _path2$d || (_path2$d = /*#__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,
@@ -47502,7 +48088,7 @@ function SvgMention(props) {
   })));
 }
 
-var _templateObject$16, _templateObject2$Z;
+var _templateObject$17, _templateObject2$_;
 var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentionsButton(_ref) {
   var buttonIcon = _ref.buttonIcon,
     buttonWidth = _ref.buttonWidth,
@@ -47645,7 +48231,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$16 || (_templateObject$16 = _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$17 || (_templateObject$17 = _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";
@@ -47656,7 +48242,7 @@ var BottomButton$1 = styled__default.div(_templateObject$16 || (_templateObject$
 }, function (props) {
   return props.backgroundColor;
 });
-var UnreadCount$2 = styled__default.span(_templateObject2$Z || (_templateObject2$Z = _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$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 11px;\n  right: 16px;\n  flex: 0 0 auto;\n  margin-left: auto;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  line-height: 20px;\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.fontSize || '13px';