sceyt-chat-react-uikit 1.8.0-beta.3 → 1.8.0-beta.5

package/index.js

@@ -12579,12 +12579,14 @@ var ThemeReducer = (function (state, _ref) {
   switch (type) {
     case SET_THEME:
       {
+        console.log('SET_THEME', payload);
         var theme = payload.theme;
         newState.theme = theme;
         return newState;
       }
     case SET_THEME_NEW:
       {
+        console.log('SET_THEME_NEW', payload);
         var _theme = payload.theme;
         newState.newTheme = _theme;
         return newState;
@@ -24400,12 +24402,20 @@ function useOnScreen(ref, rootElement) {
   return isIntersecting;
 }
 
+var newThemeSelector = function newThemeSelector(store) {
+  var _store$ThemeReducer;
+  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer = store.ThemeReducer) === null || _store$ThemeReducer === void 0 ? void 0 : _store$ThemeReducer.newTheme;
+};
+var themeSelector = function themeSelector(store) {
+  var _store$ThemeReducer2;
+  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer2 = store.ThemeReducer) === null || _store$ThemeReducer2 === void 0 ? void 0 : _store$ThemeReducer2.theme;
+};
+
 var useColors = function useColors() {
-  var themeReducer = useSelector(function (state) {
-    return state.ThemeReducer;
-  });
-  var currentThemeMode = (themeReducer === null || themeReducer === void 0 ? void 0 : themeReducer.theme) || defaultThemeMode;
-  var theme = (themeReducer === null || themeReducer === void 0 ? void 0 : themeReducer.newTheme) || defaultTheme;
+  var newTheme = useSelector(newThemeSelector);
+  var themeMode = useSelector(themeSelector);
+  var currentThemeMode = themeMode || defaultThemeMode;
+  var theme = newTheme || defaultTheme;
   return React.useMemo(function () {
     var colorsWithMode = {};
     Object.keys(theme.colors).forEach(function (colorKey) {
@@ -24545,11 +24555,6 @@ function SvgAvatar(props) {
   })));
 }
 
-var themeSelector = function themeSelector(store) {
-  var _store$ThemeReducer;
-  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer = store.ThemeReducer) === null || _store$ThemeReducer === void 0 ? void 0 : _store$ThemeReducer.theme;
-};
-
 var ATTACHMENTS_CACHE = 'attachments-cache';
 var isBrowser = typeof window !== 'undefined';
 var cacheAvailable;
@@ -25802,7 +25807,6 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
 var Channel = function Channel(_ref3) {
   var _channel$members, _channel$members$, _channel$members$2;
   var channel = _ref3.channel,
-    theme = _ref3.theme,
     _ref3$showAvatar = _ref3.showAvatar,
     showAvatar = _ref3$showAvatar === void 0 ? true : _ref3$showAvatar,
     avatarBorderRadius = _ref3.avatarBorderRadius,
@@ -26000,7 +26004,6 @@ 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,
@@ -26028,7 +26031,6 @@ var Channel = function Channel(_ref3) {
     backgroundColor: onlineStatus,
     borderColor: background
   })))), /*#__PURE__*/React__default.createElement(ChannelInfo, {
-    theme: theme,
     avatar: showAvatar,
     isMuted: channel.muted,
     isPinned: !!channel.pinnedAt,
@@ -26309,7 +26311,6 @@ var _templateObject$8, _templateObject2$7, _templateObject3$6, _templateObject4$
 var ContactItem = function ContactItem(_ref) {
   var contact = _ref.contact,
     createChatWithContact = _ref.createChatWithContact,
-    theme = _ref.theme,
     _ref$showAvatar = _ref.showAvatar,
     showAvatar = _ref$showAvatar === void 0 ? true : _ref$showAvatar,
     avatarBorderRadius = _ref.avatarBorderRadius,
@@ -26329,7 +26330,6 @@ var ContactItem = function ContactItem(_ref) {
   var getFromContacts = getShowOnlyContactUsers();
   var contactUserName = makeUsername(contact, undefined, getFromContacts);
   return /*#__PURE__*/React__default.createElement(Container$4, {
-    theme: theme,
     channelsPaddings: channelsPaddings,
     channelsMargin: channelsMargin,
     onClick: function onClick() {
@@ -26347,7 +26347,6 @@ var ContactItem = function ContactItem(_ref) {
     backgroundColor: online,
     borderColor: background
   })))), /*#__PURE__*/React__default.createElement(ChannelInfo$1, {
-    theme: theme,
     avatar: showAvatar,
     subjectFontSize: channelSubjectFontSize,
     subjectLineHeight: channelSubjectLineHeight,
@@ -27138,8 +27137,7 @@ function getRadianAngle(degreeValue) {
 
 var _templateObject$c, _templateObject2$b;
 var ImageCrop = function ImageCrop(_ref) {
-  var theme = _ref.theme,
-    image = _ref.image,
+  var image = _ref.image,
     onAccept = _ref.onAccept,
     handleClosePopup = _ref.handleClosePopup;
   var _useState = React.useState(null),
@@ -27193,7 +27191,6 @@ var ImageCrop = function ImageCrop(_ref) {
     }
   }, [area]);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     minWidth: '500px',
     maxWidth: '600px',
@@ -27293,7 +27290,6 @@ function CreateChannel(_ref) {
   var uriRegexp = /^[A-Za-z0-9]*$/;
   var fileUploader = React.useRef(null);
   var uriPrefixRef = React.useRef(null);
-  var theme = useSelector(themeSelector);
   var _useState = React.useState(false),
     usersPopupVisible = _useState[0],
     setUsersPopupVisible = _useState[1];
@@ -27544,7 +27540,6 @@ function CreateChannel(_ref) {
     value: subjectValue,
     onChange: handleTypeSubject,
     placeholder: "Enter " + (createGroupChannel ? 'group' : 'channel') + " name",
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27558,7 +27553,6 @@ function CreateChannel(_ref) {
     value: metadataValue,
     onChange: handleTypeMetadata,
     placeholder: "Enter " + (createGroupChannel ? 'group' : 'channel') + " description",
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27579,7 +27573,6 @@ function CreateChannel(_ref) {
     onBlur: checkURIRegexp,
     placeholder: 'chan12',
     error: !!wrongUri,
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27683,7 +27676,6 @@ var DropDown = function DropDown(_ref) {
     watchToggleState = _ref.watchToggleState,
     height = _ref.height,
     children = _ref.children,
-    theme = _ref.theme,
     order = _ref.order,
     zIndex = _ref.zIndex;
   var _useColor = useColors(),
@@ -27736,7 +27728,6 @@ var DropDown = function DropDown(_ref) {
     }
   }, [dropDownState]);
   return /*#__PURE__*/React__default.createElement(DropDownContainer, {
-    theme: theme,
     order: order,
     margin: margin,
     className: 'dropdown-wrapper',
@@ -27766,7 +27757,6 @@ var DropDown = function DropDown(_ref) {
 var _templateObject$f;
 var CreateChannelButton = function CreateChannelButton(_ref) {
   var showSearch = _ref.showSearch,
-    theme = _ref.theme,
     uriPrefixOnCreateChannel = _ref.uriPrefixOnCreateChannel,
     createChannelIcon = _ref.createChannelIcon,
     newChannelIcon = _ref.newChannelIcon,
@@ -27798,7 +27788,6 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropDown, {
     forceClose: showAddMemberPopup || !!showCreateChannel,
     position: 'center',
-    theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
       hoverBackground: backgroundHovered,
@@ -28204,7 +28193,6 @@ var ChannelList = function ChannelList(_ref) {
     surface2 = _useColor[THEME_COLORS.SURFACE_2];
   var dispatch = useDispatch();
   var getFromContacts = getShowOnlyContactUsers();
-  var theme = useSelector(themeSelector);
   var channelListRef = React.useRef(null);
   var channelsScrollRef = React.useRef(null);
   var _useState = React.useState(''),
@@ -28448,7 +28436,6 @@ var ChannelList = function ChannelList(_ref) {
   })) : ChannelsTitle || /*#__PURE__*/React__default.createElement(ChatsTitle, {
     color: textPrimary
   }, "Chats"), showCreateChannelIcon && (CreateChannel || (/*#__PURE__*/React__default.createElement(CreateChannelButton, {
-    theme: theme,
     newChannelIcon: newChannelIcon,
     newGroupIcon: newGroupIcon,
     newChatIcon: newChatIcon,
@@ -28458,7 +28445,6 @@ var ChannelList = function ChannelList(_ref) {
     uriPrefixOnCreateChannel: uriPrefixOnCreateChannel
   })))), showSearch && searchChannelsPosition === 'bottom' && (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     searchValue: searchValue,
-    theme: theme,
     width: channelSearchWidth,
     borderRadius: searchInputBorderRadius,
     handleSearchValueChange: handleSearchValueChange,
@@ -28479,7 +28465,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28517,7 +28502,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28556,7 +28540,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: contact.id
     })) : (/*#__PURE__*/React__default.createElement(ContactItem, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28587,7 +28570,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28638,7 +28620,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28679,7 +28660,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28717,7 +28697,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28983,7 +28962,6 @@ function ChatHeader(_ref) {
   var user = ChatClient.user;
   var getFromContacts = getShowOnlyContactUsers();
   var activeChannel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var showChannelDetails = getShowChannelDetails();
   var channelListHidden = useSelector(channelListHiddenSelector);
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, reactRedux.shallowEqual);
@@ -29041,7 +29019,6 @@ function ChatHeader(_ref) {
     setDefaultAvatar: isDirectChannel
   }))), /*#__PURE__*/React__default.createElement(ChannelName, null, /*#__PURE__*/React__default.createElement(SectionHeader, {
     color: titleColor || textPrimary,
-    theme: theme,
     fontSize: titleFontSize,
     uppercase: directChannelUser && hideUserPresence && hideUserPresence(directChannelUser),
     lineHeight: titleLineHeight
@@ -29309,7 +29286,6 @@ function MessageDivider(_ref) {
     newMessagesSeparatorSpaceColor = _ref.newMessagesSeparatorSpaceColor,
     noMargin = _ref.noMargin,
     marginTop = _ref.marginTop,
-    theme = _ref.theme,
     marginBottom = _ref.marginBottom,
     chatBackgroundColor = _ref.chatBackgroundColor;
   var _useColor = useColors(),
@@ -29327,7 +29303,6 @@ function MessageDivider(_ref) {
   }, [textRef]);
   return /*#__PURE__*/React__default.createElement(Container$a, {
     className: unread ? 'unread' : 'divider',
-    theme: theme,
     marginTop: marginTop,
     dividerVisibility: !visibility || unread,
     dateDividerFontSize: dateDividerFontSize || newMessagesSeparatorFontSize,
@@ -30298,7 +30273,6 @@ var _templateObject$p, _templateObject2$m;
 function ConfirmPopup(_ref) {
   var title = _ref.title,
     description = _ref.description,
-    theme = _ref.theme,
     buttonText = _ref.buttonText,
     buttonTextColor = _ref.buttonTextColor,
     buttonBackground = _ref.buttonBackground,
@@ -30343,7 +30317,6 @@ function ConfirmPopup(_ref) {
     setInitialRender(false);
   }, []);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '520px',
     minWidth: '520px',
@@ -35252,7 +35225,6 @@ var Attachment = function Attachment(_ref) {
   })), sizeProgress && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
   }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1)))))))) : null, /*#__PURE__*/React__default.createElement(VideoPreview, {
-    theme: theme,
     width: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderWidth || videoAttachmentMaxWidth || 420) + "px",
     height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
     file: attachment,
@@ -35288,7 +35260,7 @@ var Attachment = function Attachment(_ref) {
     channelId: channelId,
     incoming: incoming,
     viewOnce: viewOnce,
-    setViewOnceVoiceModalOpen: setViewOnceVoiceModalOpen
+    setViewOnceVoiceModalOpen: viewOnce ? setViewOnceVoiceModalOpen : undefined
   })) : attachment.type === attachmentTypes.link ? null : (
   /*#__PURE__*/
   React__default.createElement(AttachmentFile$1, {
@@ -35573,7 +35545,7 @@ var RepliedMessage = function RepliedMessage(_ref) {
   }) : parentNotLinkAttachment && (message.parentMessage.attachments[0].type === attachmentTypes.image ? 'Photo' : message.parentMessage.attachments[0].type === attachmentTypes.video ? 'Video' : message.parentMessage.attachments[0].type === attachmentTypes.voice ? ' Voice' : 'File'))));
 };
 var RepliedMessage$1 = /*#__PURE__*/React__default.memo(RepliedMessage, function (prevProps, nextProps) {
-  return prevProps.theme === nextProps.theme && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.selectionIsActive === nextProps.selectionIsActive && prevProps.contactsMap === nextProps.contactsMap;
+  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.selectionIsActive === nextProps.selectionIsActive && prevProps.contactsMap === nextProps.contactsMap;
 });
 var ReplyMessageContainer = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-left: 2px solid ", ";\n  padding: 4px 6px;\n  position: relative;\n  //margin: ", ";\n  margin: ", ";\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  margin-top: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.leftBorderColor || '#b8b9c2';
@@ -36925,7 +36897,9 @@ function SvgFilledCheckbox(props) {
 var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
 var PollMessage = function PollMessage(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
-  var message = _ref.message;
+  var message = _ref.message,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth;
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -36977,7 +36951,12 @@ var PollMessage = function PollMessage(_ref) {
       handleViewResults();
     }
   };
-  return /*#__PURE__*/React__default.createElement(Container$i, null, /*#__PURE__*/React__default.createElement(Question$1, {
+  return /*#__PURE__*/React__default.createElement(Container$i, {
+    style: {
+      minWidth: minWidth,
+      maxWidth: maxWidth
+    }
+  }, /*#__PURE__*/React__default.createElement(Question$1, {
     color: textPrimary
   }, poll.name), /*#__PURE__*/React__default.createElement(SubTitle$1, {
     color: textSecondary
@@ -37063,7 +37042,11 @@ var PollMessage = function PollMessage(_ref) {
     messageId: message.id
   })));
 };
-var Container$i = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 250px;\n  width: 100%;\n"])));
+var Container$i = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: ", ";\n  max-width: ", ";\n  width: 100%;\n"])), function (p) {
+  return p.minWidth || '250px';
+}, function (p) {
+  return p.maxWidth || '100%';
+});
 var Question$1 = styled__default.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.4px;\n  word-break: break-word;\n"])), function (p) {
   return p.color;
 });
@@ -37686,7 +37669,6 @@ var MessageBody = function MessageBody(_ref) {
     fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
     selectedMessagesMap = _ref.selectedMessagesMap,
     contactsMap = _ref.contactsMap,
-    theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     handleToggleForwardMessagePopup = _ref.handleToggleForwardMessagePopup,
@@ -38051,7 +38033,6 @@ var MessageBody = function MessageBody(_ref) {
     infoIconOrder: infoIconOrder
   }))), message.parentMessage && message.parentMessage.id && !isThreadMessage && (/*#__PURE__*/React__default.createElement(RepliedMessage$1, {
     message: message,
-    theme: theme,
     isPendingMessage: isPendingMessage,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -38081,7 +38062,6 @@ var MessageBody = function MessageBody(_ref) {
     leftPadding: message.incoming ? (incomingMessageStyles === null || incomingMessageStyles === void 0 ? void 0 : incomingMessageStyles.background) !== 'inherit' : (outgoingMessageStyles === null || outgoingMessageStyles === void 0 ? void 0 : outgoingMessageStyles.background) !== 'inherit',
     color: accentColor
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forwarded message")), /*#__PURE__*/React__default.createElement(MessageText, {
-    theme: theme,
     draggable: false,
     color: textPrimary,
     fontSize: messageTextFontSize,
@@ -38259,7 +38239,7 @@ var MessageBody = function MessageBody(_ref) {
 };
 var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prevProps, nextProps) {
   var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
-  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order) && prevProps.collapsedCharacterLimit === nextProps.collapsedCharacterLimit);
+  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order) && prevProps.collapsedCharacterLimit === nextProps.collapsedCharacterLimit);
 });
 var ForwardedTitle = styled__default.h3(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
@@ -39027,7 +39007,6 @@ var Message$1 = function Message(_ref) {
     openedMessageMenuId = _ref.openedMessageMenuId,
     tabIsActive = _ref.tabIsActive,
     connectionStatus = _ref.connectionStatus,
-    theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
@@ -39548,7 +39527,6 @@ var Message$1 = function Message(_ref) {
     contactsMap: contactsMap,
     openedMessageMenuId: openedMessageMenuId,
     connectionStatus: connectionStatus,
-    theme: theme,
     messageTextFontSize: messageTextFontSize,
     messageTextLineHeight: messageTextLineHeight,
     messageActionsShow: messageActionsShow,
@@ -39685,7 +39663,7 @@ var Message$1 = function Message(_ref) {
   })));
 };
 var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prevProps, nextProps) {
-  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.theme === nextProps.theme;
+  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId;
 });
 var MessageReactionKey = styled__default.span(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n"])));
 var ReactionItemCount = styled__default.span(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
@@ -39802,7 +39780,6 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
     dateDividerBackgroundColor = _ref.dateDividerBackgroundColor,
     dateDividerBorderRadius = _ref.dateDividerBorderRadius,
     noMargin = _ref.noMargin,
-    theme = _ref.theme,
     marginBottom = _ref.marginBottom,
     marginTop = _ref.marginTop,
     chatBackgroundColor = _ref.chatBackgroundColor;
@@ -39816,7 +39793,6 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
     dividerText = moment().year() === moment(current).year() ? current.format('MMMM D') : current.format('MMMM D YYYY');
   }
   return !differentDays ? null : (/*#__PURE__*/React__default.createElement(MessageDivider, {
-    theme: theme,
     dividerText: dividerText,
     visibility: messagesHasNext && lastIndex,
     dateDividerFontSize: dateDividerFontSize,
@@ -39998,7 +39974,6 @@ var MessageList = function MessageList(_ref2) {
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = useDispatch();
-  var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
   var _useState = React.useState(false),
     scrollIntoView = _useState[0],
@@ -40673,7 +40648,6 @@ var MessageList = function MessageList(_ref2) {
       key: message.id || message.tid
     }, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
       noMargin: !isUnreadMessage && prevMessage && prevMessage.type === exports.MESSAGE_TYPE.SYSTEM && message.type !== exports.MESSAGE_TYPE.SYSTEM,
-      theme: theme,
       lastIndex: false,
       currentMessageDate: message.createdAt,
       nextMessageDate: prevMessage && prevMessage.createdAt,
@@ -40708,7 +40682,6 @@ var MessageList = function MessageList(_ref2) {
       highlightBg: incomingMessageBackgroundX
     }, /*#__PURE__*/React__default.createElement(Message$2, {
       message: message,
-      theme: theme,
       channel: channel,
       stopScrolling: setStopScrolling,
       handleMediaItemClick: function handleMediaItemClick(attachment) {
@@ -40845,7 +40818,6 @@ var MessageList = function MessageList(_ref2) {
       ogMetadataProps: ogMetadataProps,
       collapsedCharacterLimit: collapsedCharacterLimit
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
-      theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
       newMessagesSeparatorFontSize: newMessagesSeparatorFontSize,
       newMessagesSeparatorWidth: newMessagesSeparatorWidth,
@@ -44444,7 +44416,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var ChatClient = getClient();
   var user = ChatClient.user;
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, reactRedux.shallowEqual);
-  var theme = useSelector(themeSelector);
   var getFromContacts = getShowOnlyContactUsers();
   var activeChannel = useSelector(activeChannelSelector);
   var messageToEdit = useSelector(messageToEditSelector);
@@ -45886,7 +45857,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: viewOnce ? accentColor : iconInactive,
     textColor: viewOnce ? textOnPrimary : iconInactive
   }, viewOnce ? ViewOnceSelectedSVGIcon || /*#__PURE__*/React__default.createElement(SvgViewOnceSelected, null) : ViewOnceNotSelectedSVGIcon || /*#__PURE__*/React__default.createElement(SvgViewOnceNotSelected, null))), showAddAttachments && addAttachmentByMenu && !messageToEdit ? (/*#__PURE__*/React__default.createElement(DropDown, {
-    theme: theme,
     forceClose: showChooseAttachmentType,
     position: addAttachmentsInRightSide ? 'top' : 'topRight',
     margin: 'auto 0 0',
@@ -46506,8 +46476,7 @@ function SvgUsers(props) {
 
 var _templateObject$T, _templateObject2$O, _templateObject3$H;
 function NetworkErrorPopup(_ref) {
-  var theme = _ref.theme,
-    togglePopup = _ref.togglePopup;
+  var togglePopup = _ref.togglePopup;
   var colors = useColors();
   var accentColor = colors[THEME_COLORS.ACCENT],
     background = colors[THEME_COLORS.BACKGROUND],
@@ -46516,7 +46485,6 @@ function NetworkErrorPopup(_ref) {
     iconPrimary = colors[THEME_COLORS.ICON_PRIMARY],
     textOnPrimary = colors[THEME_COLORS.TEXT_ON_PRIMARY];
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '522px',
     minWidth: '522px',
@@ -46566,8 +46534,7 @@ var TIMER_OPTIONS = [{
   label: '1 month'
 }];
 function DisappearingMessagesPopup(_ref) {
-  var theme = _ref.theme,
-    togglePopup = _ref.togglePopup,
+  var togglePopup = _ref.togglePopup,
     handleSetTimer = _ref.handleSetTimer,
     currentTimer = _ref.currentTimer;
   var colors = useColors();
@@ -46677,11 +46644,9 @@ function DisappearingMessagesPopup(_ref) {
     })) === null || _CUSTOM_OPTIONS$find === void 0 ? void 0 : _CUSTOM_OPTIONS$find.label) || '2 days';
   }, [customValue, CUSTOM_OPTIONS]);
   if (showNetworkError) return /*#__PURE__*/React__default.createElement(NetworkErrorPopup, {
-    theme: theme,
     togglePopup: handleCloseNetworkError
   });
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '522px',
     minWidth: '522px',
@@ -46757,7 +46722,6 @@ function DisappearingMessagesPopup(_ref) {
     maxWidth: '474px'
   }, /*#__PURE__*/React__default.createElement(DropDown, {
     withIcon: true,
-    theme: theme,
     isSelect: true,
     position: 'top',
     trigger: /*#__PURE__*/React__default.createElement(CustomSelectTriggerStyled, {
@@ -46765,7 +46729,6 @@ function DisappearingMessagesPopup(_ref) {
     }, selectedCustomLabel),
     watchToggleState: setDropdownOpen
   }, /*#__PURE__*/React__default.createElement(CustomDropdownOptionsUl, {
-    theme: theme,
     accentColor: accentColor
   }, CUSTOM_OPTIONS.map(function (o) {
     return /*#__PURE__*/React__default.createElement(CustomDropdownOptionLi, {
@@ -46867,8 +46830,7 @@ var MutualChannelItem = function MutualChannelItem(_ref) {
   })));
 };
 var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
-  var theme = _ref2.theme,
-    togglePopup = _ref2.togglePopup,
+  var togglePopup = _ref2.togglePopup,
     user = _ref2.user;
   var ChatClient = getClient();
   var currentUser = ChatClient.user;
@@ -46919,7 +46881,6 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
     };
   }, [dispatch]);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '520px',
     minWidth: '520px',
@@ -46993,7 +46954,6 @@ var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
     actionMenuOpen = _ref.actionMenuOpen,
-    theme = _ref.theme,
     menuIsOpen = _ref.menuIsOpen,
     toggleable = _ref.toggleable,
     _ref$showMuteUnmuteNo = _ref.showMuteUnmuteNotifications,
@@ -47225,7 +47185,6 @@ var Actions = function Actions(_ref) {
   }, [containerRef.current, showMuteUnmuteNotifications, showStarredMessages, showPinChannel, showMarkAsReadUnread, showLeaveChannel, showBlockAndLeaveChannel, showBlockUser, showReportChannel, showDeleteChannel, showClearHistory]);
   return /*#__PURE__*/React__default.createElement(Container$n, {
     isDirect: isDirectChannel,
-    theme: theme,
     borderColor: borderColor || surface1,
     ref: containerRef
   }, toggleable && (/*#__PURE__*/React__default.createElement(ActionHeader, {
@@ -47250,7 +47209,6 @@ var Actions = function Actions(_ref) {
     fontSize: actionItemsFontSize
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, muteNotificationIcon || /*#__PURE__*/React__default.createElement(DefaultMutedIcon, null), " Unmute notifications"))) : (/*#__PURE__*/React__default.createElement(DropDown, {
     isSelect: true,
-    theme: theme,
     height: 'auto',
     position: 'left',
     order: muteUnmuteNotificationsOrder,
@@ -47500,12 +47458,10 @@ var Actions = function Actions(_ref) {
     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
   })), groupsInCommonPopupOpen && (/*#__PURE__*/React__default.createElement(GroupsInCommonPopup, {
-    theme: theme,
     togglePopup: handleToggleGroupsInCommonPopup,
     user: channel.members.find(function (member) {
       return member.id !== user.id;
@@ -48268,8 +48224,7 @@ function SvgMoreVert(props) {
 
 var _templateObject$12, _templateObject2$W, _templateObject3$O;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
-  var theme = _ref.theme,
-    channelId = _ref.channelId,
+  var channelId = _ref.channelId,
     member = _ref.member,
     handleClosePopup = _ref.handleClosePopup;
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -48336,14 +48291,11 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     disabledColor: surface1
   }, /*#__PURE__*/React__default.createElement(DropDown, {
     withIcon: true,
-    theme: theme,
     isSelect: true,
     trigger: /*#__PURE__*/React__default.createElement(CustomSelectTrigger, {
       color: textPrimary
     }, selectedRole || member.role || 'Select')
-  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, {
-    theme: theme
-  }, !!roles.length && roles.map(function (role) {
+  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       hoverBackground: backgroundHovered,
       key: role.name,
@@ -48428,7 +48380,6 @@ function InviteLinkModal(_ref) {
     border = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
-  var theme = useSelector(themeSelector) || 'light';
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
   var channelsInviteKeys = useSelector(channelInviteKeysSelector, reactRedux.shallowEqual);
   var dispatch = useDispatch();
@@ -48761,7 +48712,6 @@ function InviteLinkModal(_ref) {
       },
       inviteUrl: inviteUrl,
       channelId: channelId,
-      theme: theme,
       colors: {
         accentColor: accentColor,
         textPrimary: textPrimary,
@@ -48946,7 +48896,6 @@ var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
     members = _ref.members,
-    theme = _ref.theme,
     checkActionPermission = _ref.checkActionPermission,
     _ref$showChangeMember = _ref.showChangeMemberRole,
     showChangeMemberRole = _ref$showChangeMember === void 0 ? true : _ref$showChangeMember,
@@ -49113,9 +49062,7 @@ var Members = function Members(_ref) {
   var currentUserRole = (_members$find = members.find(function (member) {
     return member.id === user.id;
   })) === null || _members$find === void 0 ? void 0 : _members$find.role;
-  return /*#__PURE__*/React__default.createElement(Container$s, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (currentUserRole === 'owner' || currentUserRole === 'admin') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
+  return /*#__PURE__*/React__default.createElement(Container$s, null, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (currentUserRole === 'owner' || currentUserRole === 'admin') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
@@ -49153,7 +49100,6 @@ var Members = function Members(_ref) {
       margin: '1px 0 0',
       fontSize: memberPresenceFontSize
     }, member.presence && member.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : member.presence && member.presence.lastActiveAt && userLastActiveDateFormat(member.presence.lastActiveAt))), !noMemberEditPermissions && member.role !== 'owner' && currentUserRole && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$member$role = rolesMap[member.role]) === null || _rolesMap$member$role === void 0 ? void 0 : _rolesMap$member$role.priority) && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$currentUser = rolesMap[currentUserRole]) === null || _rolesMap$currentUser === void 0 ? void 0 : _rolesMap$currentUser.priority) && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$member$role2 = rolesMap[member.role]) === null || _rolesMap$member$role2 === void 0 ? void 0 : _rolesMap$member$role2.priority) < (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$currentUser2 = rolesMap[currentUserRole]) === null || _rolesMap$currentUser2 === void 0 ? void 0 : _rolesMap$currentUser2.priority) && member.id !== user.id && (/*#__PURE__*/React__default.createElement(DropDown, {
-      theme: theme,
       isSelect: true,
       forceClose: !!(closeMenu && closeMenu !== member.id),
       watchToggleState: function watchToggleState(state) {
@@ -49202,21 +49148,18 @@ var Members = function Members(_ref) {
       }
     }, "Remove and Block member"))))));
   }))), kickMemberPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleKickMember,
     togglePopup: toggleKickMemberPopup,
     buttonText: 'Remove',
     title: channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Remove member' : 'Remove subscriber',
     description: /*#__PURE__*/React__default.createElement("span", null, "Are you sure to remove", !!selectedMember && (/*#__PURE__*/React__default.createElement(BoltText, null, " ", makeUsername(contactsMap[selectedMember.id], selectedMember, getFromContacts), " ")), "from this", ' ', channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'channel' : 'group', "?")
   })), blockMemberPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleBlockMember,
     togglePopup: toggleBlockMemberPopup,
     buttonText: 'Block',
     description: "Block and remove member - " + (selectedMember && (selectedMember.firstName || selectedMember.lastName || selectedMember.id)),
     title: 'Block and remove user'
   })), makeAdminPopup && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleMakeAdmin,
     togglePopup: function togglePopup() {
       return toggleMakeAdminPopup(undefined, false);
@@ -49232,10 +49175,8 @@ var Members = function Members(_ref) {
     },
     buttonText: 'Revoke',
     title: 'Revoke admin',
-    theme: theme,
     description: /*#__PURE__*/React__default.createElement("span", null, "Are you sure you want to revoke", /*#__PURE__*/React__default.createElement(BoltText, null, " \u201CAdmin\u201D "), "rights from user:", selectedMember && (/*#__PURE__*/React__default.createElement(BoltText, null, " ", makeUsername(contactsMap[selectedMember.id], selectedMember, getFromContacts), " ")), "?")
   })), changeMemberRolePopup && (/*#__PURE__*/React__default.createElement(ChangeMemberRole, {
-    theme: theme,
     channelId: channel.id,
     member: selectedMember,
     handleClosePopup: toggleChangeRolePopup
@@ -49289,7 +49230,6 @@ var RoleBadge = styled__default.span(_templateObject9$n || (_templateObject9$n =
 var _templateObject$15, _templateObject2$Z;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
-    theme = _ref.theme,
     activeTab = _ref.activeTab,
     checkActionPermission = _ref.checkActionPermission,
     setActiveTab = _ref.setActiveTab,
@@ -49359,9 +49299,7 @@ var DetailsTab = function DetailsTab(_ref) {
       setActiveTab(channelDetailsTabs.member);
     }
   }, [showMembers]);
-  return /*#__PURE__*/React__default.createElement(Container$t, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(DetailsTabHeader, {
+  return /*#__PURE__*/React__default.createElement(Container$t, null, /*#__PURE__*/React__default.createElement(DetailsTabHeader, {
     color: textSecondary,
     activeTabColor: accentColor,
     borderColor: borderColor || border,
@@ -49394,7 +49332,6 @@ var DetailsTab = function DetailsTab(_ref) {
       key: key
     }, /*#__PURE__*/React__default.createElement("span", null, channelDetailsTabs[tabKey]));
   })), showMembers && activeTab === channelDetailsTabs.member && (/*#__PURE__*/React__default.createElement(Members, {
-    theme: theme,
     members: members,
     channel: channel,
     checkActionPermission: checkActionPermission,
@@ -49413,7 +49350,6 @@ var DetailsTab = function DetailsTab(_ref) {
     channel: channel
   }), activeTab === channelDetailsTabs.file && (/*#__PURE__*/React__default.createElement(Files, {
     channelId: channel.id,
-    theme: theme,
     filePreviewIcon: filePreviewIcon,
     filePreviewHoverIcon: filePreviewHoverIcon,
     filePreviewTitleColor: filePreviewTitleColor,
@@ -49474,7 +49410,6 @@ var DropDownWrapper = styled__default.div(_templateObject3$R || (_templateObject
 var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$J || (_templateObject4$J = _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,
     handleToggleEditMode = _ref.handleToggleEditMode,
     editChannelSaveButtonBackgroundColor = _ref.editChannelSaveButtonBackgroundColor,
     editChannelSaveButtonTextColor = _ref.editChannelSaveButtonTextColor,
@@ -49629,7 +49564,6 @@ var EditChannel = function EditChannel(_ref) {
     active: isEditMode,
     backgroundColor: background
   }, /*#__PURE__*/React__default.createElement(AvatarCont, null, /*#__PURE__*/React__default.createElement(DropDownWrapper, null, !isDirectChannel && channel.userRole && (/*#__PURE__*/React__default.createElement(DropDown, {
-    theme: theme,
     position: 'center',
     iconColor: iconPrimary,
     trigger: getUploadImageIcon() || /*#__PURE__*/React__default.createElement(SvgCameraIcon, null)
@@ -49661,7 +49595,6 @@ var EditChannel = function EditChannel(_ref) {
     color: textPrimary
   }, " Name "), /*#__PURE__*/React__default.createElement(CustomInput, {
     error: subjectIsWrong,
-    theme: theme,
     color: textPrimary,
     borderColor: borderColor,
     errorColor: warningColor,
@@ -49679,7 +49612,6 @@ var EditChannel = function EditChannel(_ref) {
     color: textPrimary
   }, " Description "), /*#__PURE__*/React__default.createElement(CustomInput, {
     error: descriptionIsWrong,
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     borderColor: borderColor,
@@ -49708,7 +49640,6 @@ var EditChannel = function EditChannel(_ref) {
     backgroundColor: editChannelSaveButtonBackgroundColor || accentColor,
     onClick: handleSave
   }, "Save"))), cropPopup && (/*#__PURE__*/React__default.createElement(ImageCrop, {
-    theme: theme,
     image: {
       name: newAvatar.name,
       url: selectedImageUrl
@@ -49862,7 +49793,6 @@ var Details = function Details(_ref) {
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
-  var theme = useSelector(themeSelector);
   var getFromContacts = getShowOnlyContactUsers();
   var _useState = React.useState(false),
     mounted = _useState[0],
@@ -49980,7 +49910,6 @@ var Details = function Details(_ref) {
     backgroundColor: backgroundColor,
     mounted: mounted,
     size: size,
-    theme: theme,
     borderColor: bordersColor || borderThemeColor
   }, /*#__PURE__*/React__default.createElement(ChannelDetailsHeader, {
     borderColor: bordersColor || borderThemeColor
@@ -50000,7 +49929,6 @@ var Details = function Details(_ref) {
     color: accentColor,
     onClick: handleDetailsClose
   })))), editMode && (/*#__PURE__*/React__default.createElement(EditChannel, {
-    theme: theme,
     channel: activeChannel,
     handleToggleEditMode: setEditMode,
     editChannelSaveButtonBackgroundColor: editChannelSaveButtonBackgroundColor,
@@ -50067,7 +49995,6 @@ var Details = function Details(_ref) {
     color: textPrimary
   }, channelMetadata !== null && channelMetadata !== void 0 && channelMetadata.d ? channelMetadata === null || channelMetadata === void 0 ? void 0 : channelMetadata.d : '')))), activeChannel && activeChannel.userRole && (/*#__PURE__*/React__default.createElement(Actions, {
     setActionsHeight: setActionsHeight,
-    theme: theme,
     showMuteUnmuteNotifications: showMuteUnmuteNotifications,
     muteUnmuteNotificationsOrder: muteUnmuteNotificationsOrder,
     unmuteNotificationIcon: unmuteNotificationIcon,
@@ -50134,7 +50061,6 @@ var Details = function Details(_ref) {
     commonGroupsTextColor: commonGroupsTextColor,
     showGroupsInCommon: showGroupsInCommon
   })), !(activeChannel && activeChannel.isMockChannel) && (/*#__PURE__*/React__default.createElement(DetailsTab, {
-    theme: theme,
     channel: activeChannel,
     activeTab: activeTab,
     setActiveTab: setActiveTab,
@@ -50517,7 +50443,6 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
   var dispatch = useDispatch();
   var channel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var sendMessageInputHeight = useSelector(sendMessageInputHeightSelector);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = useSelector(activeChannelMessagesSelector) || [];
@@ -50556,7 +50481,6 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton, {
     show: !!showScrollToNewMessageButton,
     animateFrom: animateFrom,
-    theme: theme,
     width: buttonWidth,
     height: buttonHeight,
     border: buttonBorder,
@@ -50654,7 +50578,6 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
   var dispatch = useDispatch();
   var channel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var sendMessageInputHeight = useSelector(sendMessageInputHeightSelector);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = useSelector(activeChannelMessagesSelector) || [];
@@ -50748,7 +50671,6 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     }
   }, [channel.newMentionCount]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton$1, {
-    theme: theme,
     animateFrom: animateFrom,
     show: !!channel.newMentionCount,
     width: buttonWidth,