sceyt-chat-react-uikit 1.6.8-beta.5 → 1.6.8-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/assets/svg/arrowDown.svg +3 -0
  2. package/components/Avatar/index.d.ts +1 -0
  3. package/components/ChannelDetails/DetailsTab/Voices/voiceItem.d.ts +1 -1
  4. package/components/MessagesScrollToUnreadMentionsButton/index.d.ts +20 -0
  5. package/index.js +414 -325
  6. package/index.modern.js +414 -325
  7. package/package.json +1 -1
package/index.js CHANGED
@@ -9073,6 +9073,8 @@ var THEME_COLORS = {
9073
9073
  AVATAR_BRAND_2: 'avatarBrand2',
9074
9074
  AVATAR_BRAND_3: 'avatarBrand3',
9075
9075
  AVATAR_BRAND_4: 'avatarBrand4',
9076
+ AVATAR_BRAND_5: 'avatarBrand5',
9077
+ AVATAR_BRAND_6: 'avatarBrand6',
9076
9078
  TEXT_PRIMARY: 'textPrimary',
9077
9079
  TEXT_SECONDARY: 'textSecondary',
9078
9080
  TEXT_FOOTNOTE: 'textFootnote',
@@ -9098,7 +9100,8 @@ var THEME_COLORS = {
9098
9100
  INCOMING_MESSAGE_BACKGROUND: 'incomingMessageBackground',
9099
9101
  INCOMING_MESSAGE_BACKGROUND_X: 'incomingMessageBackgroundX',
9100
9102
  LINK_COLOR: 'linkColor',
9101
- HIGHLIGHTED_BACKGROUND: 'highlightedBackground'
9103
+ HIGHLIGHTED_BACKGROUND: 'highlightedBackground',
9104
+ TOOLTIP_BACKGROUND: 'tooltipBackground'
9102
9105
  };
9103
9106
  var defaultTheme = {
9104
9107
  colors: (_colors = {}, _colors[THEME_COLORS.ACCENT] = {
@@ -9116,6 +9119,12 @@ var defaultTheme = {
9116
9119
  }, _colors[THEME_COLORS.AVATAR_BRAND_4] = {
9117
9120
  light: '#67D292',
9118
9121
  dark: '#67D292'
9122
+ }, _colors[THEME_COLORS.AVATAR_BRAND_5] = {
9123
+ light: '#9F35E7',
9124
+ dark: '#9F35E7'
9125
+ }, _colors[THEME_COLORS.AVATAR_BRAND_6] = {
9126
+ light: '#63AFFF',
9127
+ dark: '#63AFFF'
9119
9128
  }, _colors[THEME_COLORS.BACKGROUND] = {
9120
9129
  light: '#FFFFFF',
9121
9130
  dark: '#19191B'
@@ -9194,6 +9203,9 @@ var defaultTheme = {
9194
9203
  }, _colors[THEME_COLORS.HIGHLIGHTED_BACKGROUND] = {
9195
9204
  light: '#C8D0FF',
9196
9205
  dark: '#3B3D68'
9206
+ }, _colors[THEME_COLORS.TOOLTIP_BACKGROUND] = {
9207
+ light: '#11153980',
9208
+ dark: '#00000080'
9197
9209
  }, _colors)
9198
9210
  };
9199
9211
  var defaultThemeMode = 'light';
@@ -10734,12 +10746,22 @@ function SvgPendingIcon(props) {
10734
10746
  })));
10735
10747
  }
10736
10748
 
10737
- var _avatarColors = ['#FF3E74', '#4F6AFF', '#FBB019', '#00CC99', '#9F35E7', '#63AFFF'];
10749
+ var avatarColors = {
10750
+ light: [defaultTheme.colors.avatarBrand1.light, defaultTheme.colors.avatarBrand2.light, defaultTheme.colors.avatarBrand3.light, defaultTheme.colors.avatarBrand4.light, defaultTheme.colors.avatarBrand5.light, defaultTheme.colors.avatarBrand6.light],
10751
+ dark: [defaultTheme.colors.avatarBrand1.dark, defaultTheme.colors.avatarBrand2.dark, defaultTheme.colors.avatarBrand3.dark, defaultTheme.colors.avatarBrand4.dark, defaultTheme.colors.avatarBrand5.dark, defaultTheme.colors.avatarBrand6.dark]
10752
+ };
10753
+ var _avatarColors = {
10754
+ light: avatarColors.light,
10755
+ dark: avatarColors.dark
10756
+ };
10738
10757
  var setAvatarColor = function setAvatarColor(colors) {
10739
- _avatarColors = colors;
10758
+ _avatarColors = {
10759
+ light: colors,
10760
+ dark: colors
10761
+ };
10740
10762
  };
10741
- var getAvatarColors = function getAvatarColors() {
10742
- return _avatarColors;
10763
+ var getAvatarColors = function getAvatarColors(theme) {
10764
+ return _avatarColors[theme];
10743
10765
  };
10744
10766
 
10745
10767
  var _path$4;
@@ -10921,8 +10943,8 @@ function md5(inputString) {
10921
10943
  return rh(a) + rh(b) + rh(c) + rh(d);
10922
10944
  }
10923
10945
  var GlobalStyles = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\n .mention_menu_item-active {\n background: #e6f7ff;\n }\n\n @keyframes makeVisible {\n 0% {\n opacity: 0;\n visibility: visible;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n }\n }\n"])));
10924
- function generateAvatarColor(itemName) {
10925
- var avatarColors = getAvatarColors();
10946
+ function generateAvatarColor(itemName, theme) {
10947
+ var avatarColors = getAvatarColors(theme);
10926
10948
  if (itemName && itemName !== '') {
10927
10949
  var hash = md5(itemName).toString().padStart(32, '0').slice(-6);
10928
10950
  var hashInt = parseInt(hash, 16);
@@ -11113,14 +11135,14 @@ var SectionHeader = styled__default.h4(_templateObject20 || (_templateObject20 =
11113
11135
  }, function (props) {
11114
11136
  return props.uppercase && 'uppercase';
11115
11137
  });
11116
- var ItemNote = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n display: none;\n position: absolute;\n z-index: 301;\n padding: 10px 12px;\n background-color: ", ";\n border-radius: 12px;\n font-size: 0.75rem;\n white-space: nowrap;\n font-weight: 600;\n color: white;\n pointer-events: none;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n z-index: -1;\n background-color: ", ";\n border-radius: 3px;\n width: 14px;\n height: 14px;\n\n ", " ", "\n }\n\n ", " ", " ", " ", "\n"])), function (props) {
11138
+ var ItemNote = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n display: none;\n position: absolute;\n z-index: 301;\n padding: 10px 12px;\n background-color: ", ";\n border-radius: 12px;\n font-size: 0.75rem;\n white-space: nowrap;\n font-weight: 600;\n color: white;\n pointer-events: none;\n user-select: none;\n\n & > svg {\n width: 20px;\n height: 20px;\n color: ", ";\n fill: ", ";\n position: absolute;\n top: 100%;\n left: calc(50% - 10px);\n path {\n fill: ", " !important;\n }\n }\n ", " ", " ", " ", "\n"])), function (props) {
11117
11139
  return props.bgColor;
11118
11140
  }, function (props) {
11119
11141
  return props.bgColor;
11120
11142
  }, function (props) {
11121
- return props.direction === 'right' && "\n left: -5px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n ";
11143
+ return props.bgColor;
11122
11144
  }, function (props) {
11123
- return props.direction === 'top' && "\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
11145
+ return props.bgColor;
11124
11146
  }, function (props) {
11125
11147
  return props.visible && "\n display: block;\n ";
11126
11148
  }, function (props) {
@@ -12274,6 +12296,17 @@ function watchForEvents() {
12274
12296
  }
12275
12297
  _context.next = 185;
12276
12298
  return effects.put(updateChannelDataAC(_channel5.id, {
12299
+ messageCount: channelForAdd.messageCount,
12300
+ unread: channelForAdd.unread,
12301
+ newMessageCount: channelForAdd.newMessageCount,
12302
+ newMentionCount: channelForAdd.newMentionCount,
12303
+ newReactedMessageCount: channelForAdd.newReactedMessageCount,
12304
+ lastReceivedMsgId: channelForAdd.lastReceivedMsgId,
12305
+ lastDisplayedMessageId: channelForAdd.lastDisplayedMessageId,
12306
+ messageRetentionPeriod: channelForAdd.messageRetentionPeriod,
12307
+ lastMessage: channelForAdd.lastMessage,
12308
+ messages: channelForAdd.messages,
12309
+ newReactions: channelForAdd.newReactions,
12277
12310
  userMessageReactions: [],
12278
12311
  lastReactedMessage: null
12279
12312
  }));
@@ -12281,6 +12314,17 @@ function watchForEvents() {
12281
12314
  _groupName4 = getChannelGroupName(_channel5);
12282
12315
  _context.next = 188;
12283
12316
  return effects.put(updateSearchedChannelDataAC(_channel5.id, {
12317
+ messageCount: channelForAdd.messageCount,
12318
+ unread: channelForAdd.unread,
12319
+ newMessageCount: channelForAdd.newMessageCount,
12320
+ newMentionCount: channelForAdd.newMentionCount,
12321
+ newReactedMessageCount: channelForAdd.newReactedMessageCount,
12322
+ lastReceivedMsgId: channelForAdd.lastReceivedMsgId,
12323
+ lastDisplayedMessageId: channelForAdd.lastDisplayedMessageId,
12324
+ messageRetentionPeriod: channelForAdd.messageRetentionPeriod,
12325
+ lastMessage: channelForAdd.lastMessage,
12326
+ messages: channelForAdd.messages,
12327
+ newReactions: channelForAdd.newReactions,
12284
12328
  userMessageReactions: [],
12285
12329
  lastReactedMessage: null
12286
12330
  }, _groupName4));
@@ -12340,8 +12384,19 @@ function watchForEvents() {
12340
12384
  return effects.put(markMessagesAsDeliveredAC(_channel5.id, [message.id]));
12341
12385
  case 213:
12342
12386
  updateChannelOnAllChannels(_channel5.id, {
12343
- userMessageReactions: [],
12344
- lastReactedMessage: null
12387
+ messageCount: channelForAdd.messageCount,
12388
+ unread: channelForAdd.unread,
12389
+ newMessageCount: channelForAdd.newMessageCount,
12390
+ newMentionCount: channelForAdd.newMentionCount,
12391
+ newReactedMessageCount: channelForAdd.newReactedMessageCount,
12392
+ lastReceivedMsgId: channelForAdd.lastReceivedMsgId,
12393
+ lastDisplayedMessageId: channelForAdd.lastDisplayedMessageId,
12394
+ messageRetentionPeriod: channelForAdd.messageRetentionPeriod,
12395
+ lastMessage: channelForAdd.lastMessage,
12396
+ messages: channelForAdd.messages,
12397
+ newReactions: channelForAdd.newReactions,
12398
+ lastReactedMessage: _channel5.lastReactedMessage,
12399
+ userMessageReactions: _channel5.userMessageReactions
12345
12400
  });
12346
12401
  updateChannelLastMessageOnAllChannels(_channel5.id, _channel5.lastMessage);
12347
12402
  case 215:
@@ -18971,7 +19026,8 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
18971
19026
  };
18972
19027
 
18973
19028
  var themeSelector = function themeSelector(store) {
18974
- return store.ThemeReducer.theme;
19029
+ var _store$ThemeReducer;
19030
+ return store === null || store === void 0 ? void 0 : (_store$ThemeReducer = store.ThemeReducer) === null || _store$ThemeReducer === void 0 ? void 0 : _store$ThemeReducer.theme;
18975
19031
  };
18976
19032
 
18977
19033
  var updateInterval;
@@ -19275,6 +19331,7 @@ var Avatar = function Avatar(_ref) {
19275
19331
  border = _ref.border,
19276
19332
  borderRadius = _ref.borderRadius,
19277
19333
  handleAvatarClick = _ref.handleAvatarClick;
19334
+ var theme = reactRedux.useSelector(themeSelector);
19278
19335
  var _useColor = useColors(),
19279
19336
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
19280
19337
  var isDeletedUserAvatar = !image && !name;
@@ -19302,7 +19359,8 @@ var Avatar = function Avatar(_ref) {
19302
19359
  textSize: textSize,
19303
19360
  onClick: handleAvatarClick,
19304
19361
  cursorPointer: !!handleAvatarClick,
19305
- borderRadius: borderRadius
19362
+ borderRadius: borderRadius,
19363
+ theme: theme
19306
19364
  }, isDeletedUserAvatar ? DeletedIcon || /*#__PURE__*/React__default.createElement(DeletedAvatarWrapper, {
19307
19365
  color: iconInactive
19308
19366
  }) : !image ? setDefaultAvatar ? DefaultAvatar || /*#__PURE__*/React__default.createElement(DefaultAvatarWrapper, {
@@ -19326,7 +19384,7 @@ var Container$1 = styled__default.div(_templateObject$3 || (_templateObject$3 =
19326
19384
  }, function (props) {
19327
19385
  return props.marginAuto ? 'auto' : '';
19328
19386
  }, function (props) {
19329
- return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName) + ";" : '';
19387
+ return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName, props.theme) + ";" : '';
19330
19388
  }, function (props) {
19331
19389
  return props.cursorPointer && 'pointer';
19332
19390
  }, function (props) {
@@ -19617,22 +19675,7 @@ var Channel = function Channel(_ref2) {
19617
19675
  color: iconInactive
19618
19676
  }, pinedIcon || /*#__PURE__*/React__default.createElement(SvgPin, null)))));
19619
19677
  };
19620
- var Container$2 = styled__default.div(_templateObject$4 || (_templateObject$4 = _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"])), function (props) {
19621
- return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19622
- }, function (props) {
19623
- return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19624
- }, function (props) {
19625
- return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19626
- }, function (props) {
19627
- return props.channelsMargin || '0 8px';
19628
- }, function (props) {
19629
- return props.selectedChannelBorderRadius || '12px';
19630
- }, function (_ref3) {
19631
- var selectedChannel = _ref3.selectedChannel,
19632
- hoverBackground = _ref3.hoverBackground;
19633
- return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19634
- });
19635
- var ChannelInfo = styled__default.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: ", ";\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: ", ";\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n text-transform: ", ";\n }\n"])), function (props) {
19678
+ var ChannelInfo = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: ", ";\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: ", ";\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n text-transform: ", ";\n }\n"])), function (props) {
19636
19679
  return props.avatar && '12px';
19637
19680
  }, function (props) {
19638
19681
  return props.avatarSize ? "calc(100% - " + (props.avatarSize + 52) + "px)" : "calc(100% - " + (props.isPinned ? 92 : 72) + "px)";
@@ -19647,10 +19690,10 @@ var ChannelInfo = styled__default.div(_templateObject2$4 || (_templateObject2$4
19647
19690
  }, function (props) {
19648
19691
  return props.uppercase && 'uppercase';
19649
19692
  });
19650
- var MutedIcon = styled__default.span(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n & > svg {\n height: 16px;\n width: 16px;\n margin-left: 5px;\n color: ", ";\n }\n"])), function (props) {
19693
+ var MutedIcon = styled__default.span(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n & > svg {\n height: 16px;\n width: 16px;\n margin-left: 5px;\n color: ", ";\n }\n"])), function (props) {
19651
19694
  return props.color;
19652
19695
  });
19653
- var LastMessage = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n color: ", ";\n max-width: ", ";\n\n height: ", ";\n"])), function (props) {
19696
+ var LastMessage = styled__default.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n color: ", ";\n max-width: ", ";\n\n height: ", ";\n"])), function (props) {
19654
19697
  return props.fontSize || '14px';
19655
19698
  }, function (props) {
19656
19699
  return props.color;
@@ -19659,12 +19702,31 @@ var LastMessage = styled__default.div(_templateObject4$3 || (_templateObject4$3
19659
19702
  }, function (props) {
19660
19703
  return props.height || '20px';
19661
19704
  });
19662
- var AvatarWrapper = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19663
- var UserStatus = styled__default.span(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 14px;\n height: 14px;\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) {
19705
+ var AvatarWrapper = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19706
+ var UserStatus = styled__default.span(_templateObject5$2 || (_templateObject5$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) {
19664
19707
  return props.backgroundColor || '#56E464';
19665
19708
  }, function (props) {
19666
19709
  return props.borderColor || '#ffffff';
19667
19710
  });
19711
+ var Container$2 = styled__default.div(_templateObject6$1 || (_templateObject6$1 = _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) {
19712
+ return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19713
+ }, function (props) {
19714
+ return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19715
+ }, function (props) {
19716
+ return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19717
+ }, function (props) {
19718
+ return props.channelsMargin || '0 8px';
19719
+ }, function (props) {
19720
+ return props.selectedChannelBorderRadius || '12px';
19721
+ }, function (_ref3) {
19722
+ var selectedChannel = _ref3.selectedChannel,
19723
+ hoverBackground = _ref3.hoverBackground;
19724
+ return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19725
+ }, UserStatus, function (props) {
19726
+ return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
19727
+ }, UserStatus, function (props) {
19728
+ return props.selectedChannel && "\n border-color: " + props.selectedBackgroundColor + ";\n ";
19729
+ });
19668
19730
  var DraftMessageTitle = styled__default.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (props) {
19669
19731
  return props.color;
19670
19732
  });
@@ -19835,14 +19897,7 @@ var ContactItem = function ContactItem(_ref) {
19835
19897
  textColor: textPrimary
19836
19898
  }, /*#__PURE__*/React__default.createElement("h3", null, contactUserName)));
19837
19899
  };
19838
- var Container$3 = styled__default.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
19839
- return props.channelsPaddings || '8px';
19840
- }, function (props) {
19841
- return props.channelsMargin || '0 8px';
19842
- }, function (props) {
19843
- return props.hoverBackground;
19844
- });
19845
- var ChannelInfo$1 = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: calc(100% - 62px);\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: calc(100% - 2px);\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n }\n"])), function (props) {
19900
+ var ChannelInfo$1 = styled__default.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: calc(100% - 62px);\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: calc(100% - 2px);\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n }\n"])), function (props) {
19846
19901
  return props.avatar && '12px';
19847
19902
  }, function (props) {
19848
19903
  return props.subjectFontSize || '15px';
@@ -19851,12 +19906,21 @@ var ChannelInfo$1 = styled__default.div(_templateObject2$6 || (_templateObject2$
19851
19906
  }, function (props) {
19852
19907
  return props.subjectColor || props.textColor;
19853
19908
  });
19854
- var AvatarWrapper$1 = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19855
- var UserStatus$1 = styled__default.span(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 14px;\n height: 14px;\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) {
19909
+ var AvatarWrapper$1 = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19910
+ var UserStatus$1 = styled__default.span(_templateObject3$4 || (_templateObject3$4 = _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) {
19856
19911
  return props.backgroundColor || '#56E464';
19857
19912
  }, function (props) {
19858
19913
  return props.borderColor || '#ffffff';
19859
19914
  });
19915
+ var Container$3 = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin: ", ";\n &:hover {\n background-color: ", ";\n ", " {\n border-color: ", ";\n }\n }\n"])), function (props) {
19916
+ return props.channelsPaddings || '8px';
19917
+ }, function (props) {
19918
+ return props.channelsMargin || '0 8px';
19919
+ }, function (props) {
19920
+ return props.hoverBackground;
19921
+ }, UserStatus$1, function (props) {
19922
+ return props.hoverBackground;
19923
+ });
19860
19924
 
19861
19925
  var _path$f;
19862
19926
  function _extends$g() {
@@ -24868,6 +24932,31 @@ function SvgReplyInThreadIcon(props) {
24868
24932
  })));
24869
24933
  }
24870
24934
 
24935
+ var _path$R;
24936
+ function _extends$S() {
24937
+ return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
24938
+ for (var e = 1; e < arguments.length; e++) {
24939
+ var t = arguments[e];
24940
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
24941
+ }
24942
+ return n;
24943
+ }, _extends$S.apply(null, arguments);
24944
+ }
24945
+ function SvgArrowDown(props) {
24946
+ return /*#__PURE__*/React.createElement("svg", _extends$S({
24947
+ width: 20,
24948
+ height: 8,
24949
+ viewBox: "0 0 20 20",
24950
+ fill: "none",
24951
+ xmlns: "http://www.w3.org/2000/svg"
24952
+ }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
24953
+ fillRule: "evenodd",
24954
+ clipRule: "evenodd",
24955
+ d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
24956
+ fill: "currentColor"
24957
+ })));
24958
+ }
24959
+
24871
24960
  var _templateObject$r, _templateObject2$n, _templateObject3$h;
24872
24961
  function MessageActions(_ref) {
24873
24962
  var editModeToggle = _ref.editModeToggle,
@@ -24927,10 +25016,10 @@ function MessageActions(_ref) {
24927
25016
  accentColor = _useColor[THEME_COLORS.ACCENT],
24928
25017
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
24929
25018
  backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
24930
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
24931
25019
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24932
25020
  warningColor = _useColor[THEME_COLORS.WARNING],
24933
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
25021
+ iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
25022
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
24934
25023
  var ChatClient = getClient();
24935
25024
  var user = ChatClient.user;
24936
25025
  var _usePermissions = usePermissions(myRole),
@@ -24961,9 +25050,9 @@ function MessageActions(_ref) {
24961
25050
  onClick: handleOpenReaction
24962
25051
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24963
25052
  disabledColor: textSecondary,
24964
- bgColor: surface2,
25053
+ bgColor: tooltipBackground,
24965
25054
  direction: 'top'
24966
- }, reactionIconTooltipText || 'React'), reactionIcon || /*#__PURE__*/React__default.createElement(SvgEmojiSmileIcon, null))), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
25055
+ }, reactionIconTooltipText || 'React', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), reactionIcon || /*#__PURE__*/React__default.createElement(SvgEmojiSmileIcon, null))), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
24967
25056
  order: editIconOrder || 1,
24968
25057
  iconColor: messageActionIconsColor || iconInactive,
24969
25058
  hoverBackgroundColor: backgroundHovered,
@@ -24973,9 +25062,9 @@ function MessageActions(_ref) {
24973
25062
  }
24974
25063
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24975
25064
  disabledColor: textSecondary,
24976
- bgColor: surface2,
25065
+ bgColor: tooltipBackground,
24977
25066
  direction: 'top'
24978
- }, editIconTooltipText || 'Edit Message'), editIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null))), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25067
+ }, editIconTooltipText || 'Edit Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), editIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null))), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
24979
25068
  iconColor: messageActionIconsColor || iconInactive,
24980
25069
  hoverBackgroundColor: backgroundHovered,
24981
25070
  hoverIconColor: accentColor,
@@ -24984,9 +25073,9 @@ function MessageActions(_ref) {
24984
25073
  }
24985
25074
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24986
25075
  disabledColor: textSecondary,
24987
- bgColor: surface2,
25076
+ bgColor: tooltipBackground,
24988
25077
  direction: 'top'
24989
- }, ' ', "Resend Message", ' '), /*#__PURE__*/React__default.createElement(SvgResend, null))), !isThreadMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, showReplyMessage && replyMessagePermitted && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
25078
+ }, ' ', "Resend Message ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgResend, null))), !isThreadMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, showReplyMessage && replyMessagePermitted && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
24990
25079
  order: replyIconOrder || 2,
24991
25080
  iconColor: messageActionIconsColor || iconInactive,
24992
25081
  hoverBackgroundColor: backgroundHovered,
@@ -24996,9 +25085,9 @@ function MessageActions(_ref) {
24996
25085
  }
24997
25086
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24998
25087
  disabledColor: textSecondary,
24999
- bgColor: surface2,
25088
+ bgColor: tooltipBackground,
25000
25089
  direction: 'top'
25001
- }, replyIconTooltipText || 'Reply'), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
25090
+ }, replyIconTooltipText || 'Reply', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
25002
25091
  order: replyInThreadIconOrder || 3,
25003
25092
  iconColor: messageActionIconsColor || iconInactive,
25004
25093
  hoverBackgroundColor: backgroundHovered,
@@ -25008,9 +25097,9 @@ function MessageActions(_ref) {
25008
25097
  }
25009
25098
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25010
25099
  disabledColor: textSecondary,
25011
- bgColor: surface2,
25100
+ bgColor: tooltipBackground,
25012
25101
  direction: 'top'
25013
- }, replyInThreadIconTooltipText || 'Reply in thread'), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
25102
+ }, replyInThreadIconTooltipText || 'Reply in thread', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
25014
25103
  order: copyIconOrder || 4,
25015
25104
  iconColor: messageActionIconsColor || iconInactive,
25016
25105
  hoverBackgroundColor: backgroundHovered,
@@ -25020,9 +25109,9 @@ function MessageActions(_ref) {
25020
25109
  }
25021
25110
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25022
25111
  disabledColor: textSecondary,
25023
- bgColor: surface2,
25112
+ bgColor: tooltipBackground,
25024
25113
  direction: 'top'
25025
- }, copyIconTooltipText || 'Copy'), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25114
+ }, copyIconTooltipText || 'Copy', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25026
25115
  order: forwardIconOrder || 5,
25027
25116
  iconColor: messageActionIconsColor || iconInactive,
25028
25117
  hoverBackgroundColor: backgroundHovered,
@@ -25032,9 +25121,9 @@ function MessageActions(_ref) {
25032
25121
  }
25033
25122
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25034
25123
  disabledColor: textSecondary,
25035
- bgColor: surface2,
25124
+ bgColor: tooltipBackground,
25036
25125
  direction: 'top'
25037
- }, forwardIconTooltipText || 'Forward Message'), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25126
+ }, forwardIconTooltipText || 'Forward Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25038
25127
  order: selectIconOrder || 6,
25039
25128
  iconColor: messageActionIconsColor || iconInactive,
25040
25129
  hoverBackgroundColor: backgroundHovered,
@@ -25044,9 +25133,9 @@ function MessageActions(_ref) {
25044
25133
  }
25045
25134
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25046
25135
  disabledColor: textSecondary,
25047
- bgColor: surface2,
25136
+ bgColor: tooltipBackground,
25048
25137
  direction: 'top'
25049
- }, selectIconTooltipText || 'Select'), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
25138
+ }, selectIconTooltipText || 'Select', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
25050
25139
  order: deleteIconOrder || 7,
25051
25140
  iconColor: messageActionIconsColor || warningColor,
25052
25141
  hoverBackgroundColor: backgroundHovered,
@@ -25056,9 +25145,9 @@ function MessageActions(_ref) {
25056
25145
  }
25057
25146
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25058
25147
  disabledColor: textSecondary,
25059
- bgColor: surface2,
25148
+ bgColor: tooltipBackground,
25060
25149
  direction: 'top'
25061
- }, deleteIconTooltipText || 'Delete Message'), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25150
+ }, deleteIconTooltipText || 'Delete Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25062
25151
  order: reportIconOrder || 8,
25063
25152
  iconColor: messageActionIconsColor || iconInactive,
25064
25153
  hoverBackgroundColor: backgroundHovered,
@@ -25068,9 +25157,9 @@ function MessageActions(_ref) {
25068
25157
  }
25069
25158
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25070
25159
  disabledColor: textSecondary,
25071
- bgColor: surface2,
25160
+ bgColor: tooltipBackground,
25072
25161
  direction: 'top'
25073
- }, reportIconTooltipText || 'Report'), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25162
+ }, reportIconTooltipText || 'Report', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25074
25163
  }
25075
25164
  var MessageActionsWrapper = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n direction: ", ";\n top: -46px;\n padding: 0 0 8px;\n z-index: 90;\n"])), function (_ref2) {
25076
25165
  var isThreadMessage = _ref2.isThreadMessage,
@@ -25097,18 +25186,18 @@ var Action = styled__default.div(_templateObject3$h || (_templateObject3$h = _ta
25097
25186
  return props.hoverBackgroundColor;
25098
25187
  }, ItemNote);
25099
25188
 
25100
- var _rect$1, _path$R;
25101
- function _extends$S() {
25102
- return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
25189
+ var _rect$1, _path$S;
25190
+ function _extends$T() {
25191
+ return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25103
25192
  for (var e = 1; e < arguments.length; e++) {
25104
25193
  var t = arguments[e];
25105
25194
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25106
25195
  }
25107
25196
  return n;
25108
- }, _extends$S.apply(null, arguments);
25197
+ }, _extends$T.apply(null, arguments);
25109
25198
  }
25110
25199
  function SvgFileIcon(props) {
25111
- return /*#__PURE__*/React.createElement("svg", _extends$S({
25200
+ return /*#__PURE__*/React.createElement("svg", _extends$T({
25112
25201
  width: 40,
25113
25202
  height: 40,
25114
25203
  viewBox: "0 0 40.01 40.01",
@@ -25119,24 +25208,24 @@ function SvgFileIcon(props) {
25119
25208
  height: 40,
25120
25209
  rx: 20,
25121
25210
  fill: "Transparent"
25122
- })), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
25211
+ })), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
25123
25212
  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",
25124
25213
  fill: "#fff"
25125
25214
  })));
25126
25215
  }
25127
25216
 
25128
- var _circle$2, _path$S;
25129
- function _extends$T() {
25130
- return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25217
+ var _circle$2, _path$T;
25218
+ function _extends$U() {
25219
+ return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25131
25220
  for (var e = 1; e < arguments.length; e++) {
25132
25221
  var t = arguments[e];
25133
25222
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25134
25223
  }
25135
25224
  return n;
25136
- }, _extends$T.apply(null, arguments);
25225
+ }, _extends$U.apply(null, arguments);
25137
25226
  }
25138
25227
  function SvgDeleteUpload(props) {
25139
- return /*#__PURE__*/React.createElement("svg", _extends$T({
25228
+ return /*#__PURE__*/React.createElement("svg", _extends$U({
25140
25229
  width: 20,
25141
25230
  height: 20,
25142
25231
  viewBox: "0 0 20.01 20.01",
@@ -25149,7 +25238,7 @@ function SvgDeleteUpload(props) {
25149
25238
  fill: "CurrentColor",
25150
25239
  stroke: "#fff",
25151
25240
  strokeWidth: 1.4
25152
- })), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
25241
+ })), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
25153
25242
  d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
25154
25243
  stroke: "#fff",
25155
25244
  strokeWidth: 1.4,
@@ -25158,24 +25247,24 @@ function SvgDeleteUpload(props) {
25158
25247
  })));
25159
25248
  }
25160
25249
 
25161
- var _path$T;
25162
- function _extends$U() {
25163
- return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25250
+ var _path$U;
25251
+ function _extends$V() {
25252
+ return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25164
25253
  for (var e = 1; e < arguments.length; e++) {
25165
25254
  var t = arguments[e];
25166
25255
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25167
25256
  }
25168
25257
  return n;
25169
- }, _extends$U.apply(null, arguments);
25258
+ }, _extends$V.apply(null, arguments);
25170
25259
  }
25171
25260
  function SvgUpload(props) {
25172
- return /*#__PURE__*/React.createElement("svg", _extends$U({
25261
+ return /*#__PURE__*/React.createElement("svg", _extends$V({
25173
25262
  width: 32,
25174
25263
  height: 32,
25175
25264
  viewBox: "0 0 32.01 32.01",
25176
25265
  fill: "none",
25177
25266
  xmlns: "http://www.w3.org/2000/svg"
25178
- }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
25267
+ }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
25179
25268
  fillRule: "evenodd",
25180
25269
  clipRule: "evenodd",
25181
25270
  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",
@@ -25183,18 +25272,18 @@ function SvgUpload(props) {
25183
25272
  })));
25184
25273
  }
25185
25274
 
25186
- var _circle$3, _path$U;
25187
- function _extends$V() {
25188
- return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25275
+ var _circle$3, _path$V;
25276
+ function _extends$W() {
25277
+ return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25189
25278
  for (var e = 1; e < arguments.length; e++) {
25190
25279
  var t = arguments[e];
25191
25280
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25192
25281
  }
25193
25282
  return n;
25194
- }, _extends$V.apply(null, arguments);
25283
+ }, _extends$W.apply(null, arguments);
25195
25284
  }
25196
25285
  function SvgPlayVideo(props) {
25197
- return /*#__PURE__*/React.createElement("svg", _extends$V({
25286
+ return /*#__PURE__*/React.createElement("svg", _extends$W({
25198
25287
  width: 56,
25199
25288
  height: 56,
25200
25289
  fill: "none",
@@ -25205,7 +25294,7 @@ function SvgPlayVideo(props) {
25205
25294
  r: 28,
25206
25295
  fill: "#17191C",
25207
25296
  fillOpacity: 0.4
25208
- })), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
25297
+ })), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
25209
25298
  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",
25210
25299
  fill: "#fff"
25211
25300
  })));
@@ -25400,18 +25489,18 @@ var AttachmentImg = styled__default.img(_templateObject7$a || (_templateObject7$
25400
25489
  return props.borderRadius || '6px';
25401
25490
  });
25402
25491
 
25403
- var _circle$4, _path$V;
25404
- function _extends$W() {
25405
- return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25492
+ var _circle$4, _path$W;
25493
+ function _extends$X() {
25494
+ return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25406
25495
  for (var e = 1; e < arguments.length; e++) {
25407
25496
  var t = arguments[e];
25408
25497
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25409
25498
  }
25410
25499
  return n;
25411
- }, _extends$W.apply(null, arguments);
25500
+ }, _extends$X.apply(null, arguments);
25412
25501
  }
25413
25502
  function SvgPlay(props) {
25414
- return /*#__PURE__*/React.createElement("svg", _extends$W({
25503
+ return /*#__PURE__*/React.createElement("svg", _extends$X({
25415
25504
  width: 32,
25416
25505
  height: 32,
25417
25506
  viewBox: "0 0 33 33",
@@ -25422,24 +25511,24 @@ function SvgPlay(props) {
25422
25511
  cy: 16,
25423
25512
  r: 16,
25424
25513
  fill: "CurrentColor"
25425
- })), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
25514
+ })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
25426
25515
  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",
25427
25516
  fill: "#fff"
25428
25517
  })));
25429
25518
  }
25430
25519
 
25431
- var _circle$5, _path$W;
25432
- function _extends$X() {
25433
- return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25520
+ var _circle$5, _path$X;
25521
+ function _extends$Y() {
25522
+ return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
25434
25523
  for (var e = 1; e < arguments.length; e++) {
25435
25524
  var t = arguments[e];
25436
25525
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25437
25526
  }
25438
25527
  return n;
25439
- }, _extends$X.apply(null, arguments);
25528
+ }, _extends$Y.apply(null, arguments);
25440
25529
  }
25441
25530
  function SvgPause(props) {
25442
- return /*#__PURE__*/React.createElement("svg", _extends$X({
25531
+ return /*#__PURE__*/React.createElement("svg", _extends$Y({
25443
25532
  width: 32,
25444
25533
  height: 32,
25445
25534
  viewBox: "0 0 33 33",
@@ -25450,7 +25539,7 @@ function SvgPause(props) {
25450
25539
  cy: 16,
25451
25540
  r: 16,
25452
25541
  fill: "CurrentColor"
25453
- })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
25542
+ })), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
25454
25543
  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",
25455
25544
  fill: "#fff"
25456
25545
  })));
@@ -28337,24 +28426,24 @@ var MessageHeaderCont = styled__default.div(_templateObject$w || (_templateObjec
28337
28426
  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');
28338
28427
  });
28339
28428
 
28340
- var _path$X;
28341
- function _extends$Y() {
28342
- return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
28429
+ var _path$Y;
28430
+ function _extends$Z() {
28431
+ return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28343
28432
  for (var e = 1; e < arguments.length; e++) {
28344
28433
  var t = arguments[e];
28345
28434
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28346
28435
  }
28347
28436
  return n;
28348
- }, _extends$Y.apply(null, arguments);
28437
+ }, _extends$Z.apply(null, arguments);
28349
28438
  }
28350
28439
  function SvgEmojiAnimalIcon(props) {
28351
- return /*#__PURE__*/React.createElement("svg", _extends$Y({
28440
+ return /*#__PURE__*/React.createElement("svg", _extends$Z({
28352
28441
  width: 20,
28353
28442
  height: 20,
28354
28443
  viewBox: "0 0 20.01 20.01",
28355
28444
  fill: "none",
28356
28445
  xmlns: "http://www.w3.org/2000/svg"
28357
- }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
28446
+ }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
28358
28447
  fillRule: "evenodd",
28359
28448
  clipRule: "evenodd",
28360
28449
  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",
@@ -28362,24 +28451,24 @@ function SvgEmojiAnimalIcon(props) {
28362
28451
  })));
28363
28452
  }
28364
28453
 
28365
- var _path$Y, _path2$5, _path3$2;
28366
- function _extends$Z() {
28367
- return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28454
+ var _path$Z, _path2$5, _path3$2;
28455
+ function _extends$_() {
28456
+ return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28368
28457
  for (var e = 1; e < arguments.length; e++) {
28369
28458
  var t = arguments[e];
28370
28459
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28371
28460
  }
28372
28461
  return n;
28373
- }, _extends$Z.apply(null, arguments);
28462
+ }, _extends$_.apply(null, arguments);
28374
28463
  }
28375
28464
  function SvgEmojiFoodIcon(props) {
28376
- return /*#__PURE__*/React.createElement("svg", _extends$Z({
28465
+ return /*#__PURE__*/React.createElement("svg", _extends$_({
28377
28466
  width: 20,
28378
28467
  height: 20,
28379
28468
  viewBox: "0 0 20.01 20.01",
28380
28469
  fill: "none",
28381
28470
  xmlns: "http://www.w3.org/2000/svg"
28382
- }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
28471
+ }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
28383
28472
  fillRule: "evenodd",
28384
28473
  clipRule: "evenodd",
28385
28474
  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",
@@ -28397,24 +28486,24 @@ function SvgEmojiFoodIcon(props) {
28397
28486
  })));
28398
28487
  }
28399
28488
 
28400
- var _path$Z;
28401
- function _extends$_() {
28402
- return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28489
+ var _path$_;
28490
+ function _extends$$() {
28491
+ return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28403
28492
  for (var e = 1; e < arguments.length; e++) {
28404
28493
  var t = arguments[e];
28405
28494
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28406
28495
  }
28407
28496
  return n;
28408
- }, _extends$_.apply(null, arguments);
28497
+ }, _extends$$.apply(null, arguments);
28409
28498
  }
28410
28499
  function SvgEmojiTravelIcon(props) {
28411
- return /*#__PURE__*/React.createElement("svg", _extends$_({
28500
+ return /*#__PURE__*/React.createElement("svg", _extends$$({
28412
28501
  width: 20,
28413
28502
  height: 20,
28414
28503
  viewBox: "0 0 20.01 20.01",
28415
28504
  fill: "none",
28416
28505
  xmlns: "http://www.w3.org/2000/svg"
28417
- }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
28506
+ }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
28418
28507
  fillRule: "evenodd",
28419
28508
  clipRule: "evenodd",
28420
28509
  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",
@@ -28423,17 +28512,17 @@ function SvgEmojiTravelIcon(props) {
28423
28512
  }
28424
28513
 
28425
28514
  var _g, _defs$1;
28426
- function _extends$$() {
28427
- return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28515
+ function _extends$10() {
28516
+ return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28428
28517
  for (var e = 1; e < arguments.length; e++) {
28429
28518
  var t = arguments[e];
28430
28519
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28431
28520
  }
28432
28521
  return n;
28433
- }, _extends$$.apply(null, arguments);
28522
+ }, _extends$10.apply(null, arguments);
28434
28523
  }
28435
28524
  function SvgEmojiObjectIcon(props) {
28436
- return /*#__PURE__*/React.createElement("svg", _extends$$({
28525
+ return /*#__PURE__*/React.createElement("svg", _extends$10({
28437
28526
  width: 20,
28438
28527
  height: 20,
28439
28528
  viewBox: "0 0 20.01 20.01",
@@ -28454,24 +28543,24 @@ function SvgEmojiObjectIcon(props) {
28454
28543
  })))));
28455
28544
  }
28456
28545
 
28457
- var _path$_;
28458
- function _extends$10() {
28459
- return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28546
+ var _path$$;
28547
+ function _extends$11() {
28548
+ return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28460
28549
  for (var e = 1; e < arguments.length; e++) {
28461
28550
  var t = arguments[e];
28462
28551
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28463
28552
  }
28464
28553
  return n;
28465
- }, _extends$10.apply(null, arguments);
28554
+ }, _extends$11.apply(null, arguments);
28466
28555
  }
28467
28556
  function SvgEmojiSymbolsIcon(props) {
28468
- return /*#__PURE__*/React.createElement("svg", _extends$10({
28557
+ return /*#__PURE__*/React.createElement("svg", _extends$11({
28469
28558
  width: 20,
28470
28559
  height: 20,
28471
28560
  viewBox: "0 0 20.01 20.01",
28472
28561
  fill: "none",
28473
28562
  xmlns: "http://www.w3.org/2000/svg"
28474
- }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
28563
+ }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
28475
28564
  fillRule: "evenodd",
28476
28565
  clipRule: "evenodd",
28477
28566
  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",
@@ -28479,24 +28568,24 @@ function SvgEmojiSymbolsIcon(props) {
28479
28568
  })));
28480
28569
  }
28481
28570
 
28482
- var _path$$;
28483
- function _extends$11() {
28484
- return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28571
+ var _path$10;
28572
+ function _extends$12() {
28573
+ return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
28485
28574
  for (var e = 1; e < arguments.length; e++) {
28486
28575
  var t = arguments[e];
28487
28576
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28488
28577
  }
28489
28578
  return n;
28490
- }, _extends$11.apply(null, arguments);
28579
+ }, _extends$12.apply(null, arguments);
28491
28580
  }
28492
28581
  function SvgEmojiFlagicon(props) {
28493
- return /*#__PURE__*/React.createElement("svg", _extends$11({
28582
+ return /*#__PURE__*/React.createElement("svg", _extends$12({
28494
28583
  width: 20,
28495
28584
  height: 20,
28496
28585
  viewBox: "0 0 20.01 20.01",
28497
28586
  fill: "none",
28498
28587
  xmlns: "http://www.w3.org/2000/svg"
28499
- }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
28588
+ }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
28500
28589
  fillRule: "evenodd",
28501
28590
  clipRule: "evenodd",
28502
28591
  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",
@@ -28992,24 +29081,24 @@ var Emoji = styled__default.li(_templateObject8$b || (_templateObject8$b = _tagg
28992
29081
  return props.hoverBackgroundColor;
28993
29082
  });
28994
29083
 
28995
- var _path$10;
28996
- function _extends$12() {
28997
- return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
29084
+ var _path$11;
29085
+ function _extends$13() {
29086
+ return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
28998
29087
  for (var e = 1; e < arguments.length; e++) {
28999
29088
  var t = arguments[e];
29000
29089
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
29001
29090
  }
29002
29091
  return n;
29003
- }, _extends$12.apply(null, arguments);
29092
+ }, _extends$13.apply(null, arguments);
29004
29093
  }
29005
29094
  function SvgPlus(props) {
29006
- return /*#__PURE__*/React.createElement("svg", _extends$12({
29095
+ return /*#__PURE__*/React.createElement("svg", _extends$13({
29007
29096
  width: 20,
29008
29097
  height: 20,
29009
29098
  viewBox: "0 0 20.01 20.01",
29010
29099
  fill: "none",
29011
29100
  xmlns: "http://www.w3.org/2000/svg"
29012
- }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
29101
+ }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
29013
29102
  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",
29014
29103
  fill: "currentColor"
29015
29104
  })));
@@ -32197,24 +32286,24 @@ var MemberName$2 = styled__default.h3(_templateObject5$k || (_templateObject5$k
32197
32286
  return props.color;
32198
32287
  });
32199
32288
 
32200
- var _path$11;
32201
- function _extends$13() {
32202
- return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
32289
+ var _path$12;
32290
+ function _extends$14() {
32291
+ return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32203
32292
  for (var e = 1; e < arguments.length; e++) {
32204
32293
  var t = arguments[e];
32205
32294
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32206
32295
  }
32207
32296
  return n;
32208
- }, _extends$13.apply(null, arguments);
32297
+ }, _extends$14.apply(null, arguments);
32209
32298
  }
32210
32299
  function SvgBold(props) {
32211
- return /*#__PURE__*/React.createElement("svg", _extends$13({
32300
+ return /*#__PURE__*/React.createElement("svg", _extends$14({
32212
32301
  width: 18,
32213
32302
  height: 18,
32214
32303
  viewBox: "0 0 18.01 18.01",
32215
32304
  fill: "none",
32216
32305
  xmlns: "http://www.w3.org/2000/svg"
32217
- }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
32306
+ }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
32218
32307
  fillRule: "evenodd",
32219
32308
  clipRule: "evenodd",
32220
32309
  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",
@@ -32222,24 +32311,24 @@ function SvgBold(props) {
32222
32311
  })));
32223
32312
  }
32224
32313
 
32225
- var _path$12;
32226
- function _extends$14() {
32227
- return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32314
+ var _path$13;
32315
+ function _extends$15() {
32316
+ return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32228
32317
  for (var e = 1; e < arguments.length; e++) {
32229
32318
  var t = arguments[e];
32230
32319
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32231
32320
  }
32232
32321
  return n;
32233
- }, _extends$14.apply(null, arguments);
32322
+ }, _extends$15.apply(null, arguments);
32234
32323
  }
32235
32324
  function SvgItalic(props) {
32236
- return /*#__PURE__*/React.createElement("svg", _extends$14({
32325
+ return /*#__PURE__*/React.createElement("svg", _extends$15({
32237
32326
  width: 18,
32238
32327
  height: 18,
32239
32328
  viewBox: "0 0 18.01 18.01",
32240
32329
  fill: "none",
32241
32330
  xmlns: "http://www.w3.org/2000/svg"
32242
- }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
32331
+ }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
32243
32332
  fillRule: "evenodd",
32244
32333
  clipRule: "evenodd",
32245
32334
  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",
@@ -32248,17 +32337,17 @@ function SvgItalic(props) {
32248
32337
  }
32249
32338
 
32250
32339
  var _g$1;
32251
- function _extends$15() {
32252
- return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32340
+ function _extends$16() {
32341
+ return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32253
32342
  for (var e = 1; e < arguments.length; e++) {
32254
32343
  var t = arguments[e];
32255
32344
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32256
32345
  }
32257
32346
  return n;
32258
- }, _extends$15.apply(null, arguments);
32347
+ }, _extends$16.apply(null, arguments);
32259
32348
  }
32260
32349
  function SvgStrikethrough(props) {
32261
- return /*#__PURE__*/React.createElement("svg", _extends$15({
32350
+ return /*#__PURE__*/React.createElement("svg", _extends$16({
32262
32351
  width: 18,
32263
32352
  height: 18,
32264
32353
  viewBox: "0 0 18.01 18.01",
@@ -32275,41 +32364,41 @@ function SvgStrikethrough(props) {
32275
32364
  }))));
32276
32365
  }
32277
32366
 
32278
- var _path$13;
32279
- function _extends$16() {
32280
- return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32367
+ var _path$14;
32368
+ function _extends$17() {
32369
+ return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
32281
32370
  for (var e = 1; e < arguments.length; e++) {
32282
32371
  var t = arguments[e];
32283
32372
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32284
32373
  }
32285
32374
  return n;
32286
- }, _extends$16.apply(null, arguments);
32375
+ }, _extends$17.apply(null, arguments);
32287
32376
  }
32288
32377
  function SvgMono(props) {
32289
- return /*#__PURE__*/React.createElement("svg", _extends$16({
32378
+ return /*#__PURE__*/React.createElement("svg", _extends$17({
32290
32379
  width: 18,
32291
32380
  height: 18,
32292
32381
  viewBox: "0 0 18.01 18.01",
32293
32382
  fill: "none",
32294
32383
  xmlns: "http://www.w3.org/2000/svg"
32295
- }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
32384
+ }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
32296
32385
  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",
32297
32386
  fill: "CurrentColor"
32298
32387
  })));
32299
32388
  }
32300
32389
 
32301
32390
  var _g$2;
32302
- function _extends$17() {
32303
- return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
32391
+ function _extends$18() {
32392
+ return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
32304
32393
  for (var e = 1; e < arguments.length; e++) {
32305
32394
  var t = arguments[e];
32306
32395
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32307
32396
  }
32308
32397
  return n;
32309
- }, _extends$17.apply(null, arguments);
32398
+ }, _extends$18.apply(null, arguments);
32310
32399
  }
32311
32400
  function SvgUnderline(props) {
32312
- return /*#__PURE__*/React.createElement("svg", _extends$17({
32401
+ return /*#__PURE__*/React.createElement("svg", _extends$18({
32313
32402
  width: 18,
32314
32403
  height: 18,
32315
32404
  viewBox: "0 0 18.01 18.01",
@@ -32403,9 +32492,9 @@ function TextFormatFloatingToolbar(_ref) {
32403
32492
  var _useColor = useColors(),
32404
32493
  accentColor = _useColor[THEME_COLORS.ACCENT],
32405
32494
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
32406
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
32407
32495
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
32408
- surface1 = _useColor[THEME_COLORS.SURFACE_1];
32496
+ surface1 = _useColor[THEME_COLORS.SURFACE_1],
32497
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
32409
32498
  var popupCharStylesEditorRef = React.useRef(null);
32410
32499
  function mouseMoveListener(e) {
32411
32500
  if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current && (e.buttons === 1 || e.buttons === 3)) {
@@ -32500,9 +32589,9 @@ function TextFormatFloatingToolbar(_ref) {
32500
32589
  isActive: isBold
32501
32590
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32502
32591
  disabledColor: textSecondary,
32503
- bgColor: surface2,
32592
+ bgColor: tooltipBackground,
32504
32593
  direction: 'top'
32505
- }, "Bold"), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32594
+ }, "Bold", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32506
32595
  iconColor: textSecondary,
32507
32596
  hoverBackgroundColor: surface1,
32508
32597
  hoverIconColor: accentColor,
@@ -32514,9 +32603,9 @@ function TextFormatFloatingToolbar(_ref) {
32514
32603
  "aria-label": 'Format text as italics'
32515
32604
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32516
32605
  disabledColor: textSecondary,
32517
- bgColor: surface2,
32606
+ bgColor: tooltipBackground,
32518
32607
  direction: 'top'
32519
- }, "Italic"), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32608
+ }, "Italic", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32520
32609
  iconColor: textSecondary,
32521
32610
  hoverBackgroundColor: surface1,
32522
32611
  hoverIconColor: accentColor,
@@ -32528,9 +32617,9 @@ function TextFormatFloatingToolbar(_ref) {
32528
32617
  "aria-label": 'Format text with a strikethrough'
32529
32618
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32530
32619
  disabledColor: textSecondary,
32531
- bgColor: surface2,
32620
+ bgColor: tooltipBackground,
32532
32621
  direction: 'top'
32533
- }, ' ', "Strikethrough", ' '), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32622
+ }, "Strikethrough ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32534
32623
  type: 'button',
32535
32624
  iconColor: textSecondary,
32536
32625
  hoverBackgroundColor: surface1,
@@ -32542,9 +32631,9 @@ function TextFormatFloatingToolbar(_ref) {
32542
32631
  "aria-label": 'Insert code block'
32543
32632
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32544
32633
  disabledColor: textSecondary,
32545
- bgColor: surface2,
32634
+ bgColor: tooltipBackground,
32546
32635
  direction: 'top'
32547
- }, "Monospace"), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32636
+ }, "Monospace ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32548
32637
  type: 'button',
32549
32638
  iconColor: textSecondary,
32550
32639
  hoverBackgroundColor: surface1,
@@ -32556,9 +32645,9 @@ function TextFormatFloatingToolbar(_ref) {
32556
32645
  "aria-label": 'Insert code block'
32557
32646
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32558
32647
  disabledColor: textSecondary,
32559
- bgColor: surface2,
32648
+ bgColor: tooltipBackground,
32560
32649
  direction: 'top'
32561
- }, "Underline"), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32650
+ }, "Underline ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32562
32651
  }
32563
32652
  function useFloatingTextFormatToolbar(editor, anchorElem) {
32564
32653
  var _useState = React.useState(false),
@@ -33271,18 +33360,18 @@ var Emoji$1 = styled__default.li(_templateObject8$e || (_templateObject8$e = _ta
33271
33360
 
33272
33361
  var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
33273
33362
 
33274
- var _circle$6, _path$14;
33275
- function _extends$18() {
33276
- return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
33363
+ var _circle$6, _path$15;
33364
+ function _extends$19() {
33365
+ return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33277
33366
  for (var e = 1; e < arguments.length; e++) {
33278
33367
  var t = arguments[e];
33279
33368
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33280
33369
  }
33281
33370
  return n;
33282
- }, _extends$18.apply(null, arguments);
33371
+ }, _extends$19.apply(null, arguments);
33283
33372
  }
33284
33373
  function SvgSend(props) {
33285
- return /*#__PURE__*/React.createElement("svg", _extends$18({
33374
+ return /*#__PURE__*/React.createElement("svg", _extends$19({
33286
33375
  width: 32,
33287
33376
  height: 32,
33288
33377
  fill: "none",
@@ -33292,142 +33381,142 @@ function SvgSend(props) {
33292
33381
  cy: 16,
33293
33382
  r: 16,
33294
33383
  fill: "currentColor"
33295
- })), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
33384
+ })), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
33296
33385
  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",
33297
33386
  fill: "#fff"
33298
33387
  })));
33299
33388
  }
33300
33389
 
33301
- var _path$15;
33302
- function _extends$19() {
33303
- return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33390
+ var _path$16;
33391
+ function _extends$1a() {
33392
+ return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33304
33393
  for (var e = 1; e < arguments.length; e++) {
33305
33394
  var t = arguments[e];
33306
33395
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33307
33396
  }
33308
33397
  return n;
33309
- }, _extends$19.apply(null, arguments);
33398
+ }, _extends$1a.apply(null, arguments);
33310
33399
  }
33311
33400
  function SvgEye(props) {
33312
- return /*#__PURE__*/React.createElement("svg", _extends$19({
33401
+ return /*#__PURE__*/React.createElement("svg", _extends$1a({
33313
33402
  width: 25,
33314
33403
  height: 24,
33315
33404
  fill: "none",
33316
33405
  xmlns: "http://www.w3.org/2000/svg"
33317
- }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
33406
+ }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
33318
33407
  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",
33319
33408
  fill: "CurrentColor"
33320
33409
  })));
33321
33410
  }
33322
33411
 
33323
- var _path$16;
33324
- function _extends$1a() {
33325
- return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33412
+ var _path$17;
33413
+ function _extends$1b() {
33414
+ return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
33326
33415
  for (var e = 1; e < arguments.length; e++) {
33327
33416
  var t = arguments[e];
33328
33417
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33329
33418
  }
33330
33419
  return n;
33331
- }, _extends$1a.apply(null, arguments);
33420
+ }, _extends$1b.apply(null, arguments);
33332
33421
  }
33333
33422
  function SvgAddAttachment(props) {
33334
- return /*#__PURE__*/React.createElement("svg", _extends$1a({
33423
+ return /*#__PURE__*/React.createElement("svg", _extends$1b({
33335
33424
  width: 24,
33336
33425
  height: 24,
33337
33426
  viewBox: "0 0 24.01 24.01",
33338
33427
  fill: "none",
33339
33428
  xmlns: "http://www.w3.org/2000/svg"
33340
- }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
33429
+ }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
33341
33430
  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",
33342
33431
  fill: "CurrentColor"
33343
33432
  })));
33344
33433
  }
33345
33434
 
33346
- var _path$17;
33347
- function _extends$1b() {
33348
- return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
33435
+ var _path$18;
33436
+ function _extends$1c() {
33437
+ return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33349
33438
  for (var e = 1; e < arguments.length; e++) {
33350
33439
  var t = arguments[e];
33351
33440
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33352
33441
  }
33353
33442
  return n;
33354
- }, _extends$1b.apply(null, arguments);
33443
+ }, _extends$1c.apply(null, arguments);
33355
33444
  }
33356
33445
  function SvgErrorCircle(props) {
33357
- return /*#__PURE__*/React.createElement("svg", _extends$1b({
33446
+ return /*#__PURE__*/React.createElement("svg", _extends$1c({
33358
33447
  width: 25,
33359
33448
  height: 24,
33360
33449
  fill: "none",
33361
33450
  xmlns: "http://www.w3.org/2000/svg"
33362
- }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
33451
+ }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
33363
33452
  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",
33364
33453
  fill: "#FFB73D"
33365
33454
  })));
33366
33455
  }
33367
33456
 
33368
- var _path$18;
33369
- function _extends$1c() {
33370
- return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33457
+ var _path$19;
33458
+ function _extends$1d() {
33459
+ return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
33371
33460
  for (var e = 1; e < arguments.length; e++) {
33372
33461
  var t = arguments[e];
33373
33462
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33374
33463
  }
33375
33464
  return n;
33376
- }, _extends$1c.apply(null, arguments);
33465
+ }, _extends$1d.apply(null, arguments);
33377
33466
  }
33378
33467
  function SvgPlayRecord(props) {
33379
- return /*#__PURE__*/React.createElement("svg", _extends$1c({
33468
+ return /*#__PURE__*/React.createElement("svg", _extends$1d({
33380
33469
  width: 20,
33381
33470
  height: 20,
33382
33471
  viewBox: "0 0 20.01 20.01",
33383
33472
  fill: "none",
33384
33473
  xmlns: "http://www.w3.org/2000/svg"
33385
- }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
33474
+ }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
33386
33475
  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",
33387
33476
  fill: "CurrentColor"
33388
33477
  })));
33389
33478
  }
33390
33479
 
33391
- var _path$19;
33392
- function _extends$1d() {
33393
- return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
33480
+ var _path$1a;
33481
+ function _extends$1e() {
33482
+ return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
33394
33483
  for (var e = 1; e < arguments.length; e++) {
33395
33484
  var t = arguments[e];
33396
33485
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33397
33486
  }
33398
33487
  return n;
33399
- }, _extends$1d.apply(null, arguments);
33488
+ }, _extends$1e.apply(null, arguments);
33400
33489
  }
33401
33490
  function SvgPauseRecord(props) {
33402
- return /*#__PURE__*/React.createElement("svg", _extends$1d({
33491
+ return /*#__PURE__*/React.createElement("svg", _extends$1e({
33403
33492
  width: 20,
33404
33493
  height: 20,
33405
33494
  viewBox: "0 0 20.01 20.01",
33406
33495
  fill: "none",
33407
33496
  xmlns: "http://www.w3.org/2000/svg"
33408
- }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
33497
+ }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
33409
33498
  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",
33410
33499
  fill: "CurrentColor"
33411
33500
  })));
33412
33501
  }
33413
33502
 
33414
- var _path$1a;
33415
- function _extends$1e() {
33416
- return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
33503
+ var _path$1b;
33504
+ function _extends$1f() {
33505
+ return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33417
33506
  for (var e = 1; e < arguments.length; e++) {
33418
33507
  var t = arguments[e];
33419
33508
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33420
33509
  }
33421
33510
  return n;
33422
- }, _extends$1e.apply(null, arguments);
33511
+ }, _extends$1f.apply(null, arguments);
33423
33512
  }
33424
33513
  function SvgStopRecord(props) {
33425
- return /*#__PURE__*/React.createElement("svg", _extends$1e({
33514
+ return /*#__PURE__*/React.createElement("svg", _extends$1f({
33426
33515
  width: 20,
33427
33516
  height: 20,
33428
33517
  fill: "none",
33429
33518
  xmlns: "http://www.w3.org/2000/svg"
33430
- }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
33519
+ }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
33431
33520
  fillRule: "evenodd",
33432
33521
  clipRule: "evenodd",
33433
33522
  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",
@@ -33435,18 +33524,18 @@ function SvgStopRecord(props) {
33435
33524
  })));
33436
33525
  }
33437
33526
 
33438
- var _circle$7, _path$1b, _path2$6;
33439
- function _extends$1f() {
33440
- return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33527
+ var _circle$7, _path$1c, _path2$6;
33528
+ function _extends$1g() {
33529
+ return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
33441
33530
  for (var e = 1; e < arguments.length; e++) {
33442
33531
  var t = arguments[e];
33443
33532
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33444
33533
  }
33445
33534
  return n;
33446
- }, _extends$1f.apply(null, arguments);
33535
+ }, _extends$1g.apply(null, arguments);
33447
33536
  }
33448
33537
  function SvgRecordButton(props) {
33449
- return /*#__PURE__*/React.createElement("svg", _extends$1f({
33538
+ return /*#__PURE__*/React.createElement("svg", _extends$1g({
33450
33539
  width: 32,
33451
33540
  height: 32,
33452
33541
  viewBox: "0 0 32.01 32.01",
@@ -33457,7 +33546,7 @@ function SvgRecordButton(props) {
33457
33546
  cy: 16,
33458
33547
  r: 16,
33459
33548
  fill: "CurrentColor"
33460
- })), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
33549
+ })), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
33461
33550
  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",
33462
33551
  fill: "#fff"
33463
33552
  })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
@@ -35641,23 +35730,23 @@ var CloseIconWrapper = styled__default.span(_templateObject34$1 || (_templateObj
35641
35730
  return props.color;
35642
35731
  });
35643
35732
 
35644
- var _path$1c;
35645
- function _extends$1g() {
35646
- return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
35733
+ var _path$1d;
35734
+ function _extends$1h() {
35735
+ return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35647
35736
  for (var e = 1; e < arguments.length; e++) {
35648
35737
  var t = arguments[e];
35649
35738
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35650
35739
  }
35651
35740
  return n;
35652
- }, _extends$1g.apply(null, arguments);
35741
+ }, _extends$1h.apply(null, arguments);
35653
35742
  }
35654
35743
  function SvgBottom(props) {
35655
- return /*#__PURE__*/React.createElement("svg", _extends$1g({
35744
+ return /*#__PURE__*/React.createElement("svg", _extends$1h({
35656
35745
  width: 12,
35657
35746
  height: 7,
35658
35747
  fill: "none",
35659
35748
  xmlns: "http://www.w3.org/2000/svg"
35660
- }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
35749
+ }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
35661
35750
  d: "M1.5 1.5l4.5 4 4.5-4",
35662
35751
  stroke: "#676A7C",
35663
35752
  strokeWidth: 1.4,
@@ -35666,24 +35755,24 @@ function SvgBottom(props) {
35666
35755
  })));
35667
35756
  }
35668
35757
 
35669
- var _path$1d, _path2$7;
35670
- function _extends$1h() {
35671
- return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35758
+ var _path$1e, _path2$7;
35759
+ function _extends$1i() {
35760
+ return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35672
35761
  for (var e = 1; e < arguments.length; e++) {
35673
35762
  var t = arguments[e];
35674
35763
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35675
35764
  }
35676
35765
  return n;
35677
- }, _extends$1h.apply(null, arguments);
35766
+ }, _extends$1i.apply(null, arguments);
35678
35767
  }
35679
35768
  function SvgMarkAsUnRead(props) {
35680
- return /*#__PURE__*/React.createElement("svg", _extends$1h({
35769
+ return /*#__PURE__*/React.createElement("svg", _extends$1i({
35681
35770
  width: 20,
35682
35771
  height: 20,
35683
35772
  viewBox: "0 0 20.01 20.01",
35684
35773
  fill: "none",
35685
35774
  xmlns: "http://www.w3.org/2000/svg"
35686
- }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
35775
+ }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
35687
35776
  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",
35688
35777
  fill: "currentColor"
35689
35778
  })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
@@ -35692,24 +35781,24 @@ function SvgMarkAsUnRead(props) {
35692
35781
  })));
35693
35782
  }
35694
35783
 
35695
- var _path$1e;
35696
- function _extends$1i() {
35697
- return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35784
+ var _path$1f;
35785
+ function _extends$1j() {
35786
+ return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35698
35787
  for (var e = 1; e < arguments.length; e++) {
35699
35788
  var t = arguments[e];
35700
35789
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35701
35790
  }
35702
35791
  return n;
35703
- }, _extends$1i.apply(null, arguments);
35792
+ }, _extends$1j.apply(null, arguments);
35704
35793
  }
35705
35794
  function SvgMarkAsRead(props) {
35706
- return /*#__PURE__*/React.createElement("svg", _extends$1i({
35795
+ return /*#__PURE__*/React.createElement("svg", _extends$1j({
35707
35796
  width: 20,
35708
35797
  height: 20,
35709
35798
  viewBox: "0 0 20.01 20.01",
35710
35799
  fill: "none",
35711
35800
  xmlns: "http://www.w3.org/2000/svg"
35712
- }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
35801
+ }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
35713
35802
  fillRule: "evenodd",
35714
35803
  clipRule: "evenodd",
35715
35804
  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",
@@ -35717,23 +35806,23 @@ function SvgMarkAsRead(props) {
35717
35806
  })));
35718
35807
  }
35719
35808
 
35720
- var _path$1f;
35721
- function _extends$1j() {
35722
- return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35809
+ var _path$1g;
35810
+ function _extends$1k() {
35811
+ return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35723
35812
  for (var e = 1; e < arguments.length; e++) {
35724
35813
  var t = arguments[e];
35725
35814
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35726
35815
  }
35727
35816
  return n;
35728
- }, _extends$1j.apply(null, arguments);
35817
+ }, _extends$1k.apply(null, arguments);
35729
35818
  }
35730
35819
  function SvgClear(props) {
35731
- return /*#__PURE__*/React.createElement("svg", _extends$1j({
35820
+ return /*#__PURE__*/React.createElement("svg", _extends$1k({
35732
35821
  width: 20,
35733
35822
  height: 21,
35734
35823
  fill: "none",
35735
35824
  xmlns: "http://www.w3.org/2000/svg"
35736
- }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
35825
+ }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
35737
35826
  fillRule: "evenodd",
35738
35827
  clipRule: "evenodd",
35739
35828
  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",
@@ -35741,46 +35830,46 @@ function SvgClear(props) {
35741
35830
  })));
35742
35831
  }
35743
35832
 
35744
- var _path$1g;
35745
- function _extends$1k() {
35746
- return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35833
+ var _path$1h;
35834
+ function _extends$1l() {
35835
+ return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
35747
35836
  for (var e = 1; e < arguments.length; e++) {
35748
35837
  var t = arguments[e];
35749
35838
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35750
35839
  }
35751
35840
  return n;
35752
- }, _extends$1k.apply(null, arguments);
35841
+ }, _extends$1l.apply(null, arguments);
35753
35842
  }
35754
35843
  function SvgBlockChannel(props) {
35755
- return /*#__PURE__*/React.createElement("svg", _extends$1k({
35844
+ return /*#__PURE__*/React.createElement("svg", _extends$1l({
35756
35845
  width: 20,
35757
35846
  height: 21,
35758
35847
  viewBox: "0 0 20.01 21.01",
35759
35848
  fill: "none",
35760
35849
  xmlns: "http://www.w3.org/2000/svg"
35761
- }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
35850
+ }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
35762
35851
  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",
35763
35852
  fill: "CurrentColor"
35764
35853
  })));
35765
35854
  }
35766
35855
 
35767
- var _path$1h, _path2$8;
35768
- function _extends$1l() {
35769
- return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
35856
+ var _path$1i, _path2$8;
35857
+ function _extends$1m() {
35858
+ return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35770
35859
  for (var e = 1; e < arguments.length; e++) {
35771
35860
  var t = arguments[e];
35772
35861
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35773
35862
  }
35774
35863
  return n;
35775
- }, _extends$1l.apply(null, arguments);
35864
+ }, _extends$1m.apply(null, arguments);
35776
35865
  }
35777
35866
  function SvgReport(props) {
35778
- return /*#__PURE__*/React.createElement("svg", _extends$1l({
35867
+ return /*#__PURE__*/React.createElement("svg", _extends$1m({
35779
35868
  width: 20,
35780
35869
  height: 21,
35781
35870
  fill: "none",
35782
35871
  xmlns: "http://www.w3.org/2000/svg"
35783
- }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
35872
+ }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
35784
35873
  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",
35785
35874
  fill: "CurrentColor"
35786
35875
  })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
@@ -35791,46 +35880,46 @@ function SvgReport(props) {
35791
35880
  })));
35792
35881
  }
35793
35882
 
35794
- var _path$1i;
35795
- function _extends$1m() {
35796
- return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35883
+ var _path$1j;
35884
+ function _extends$1n() {
35885
+ return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35797
35886
  for (var e = 1; e < arguments.length; e++) {
35798
35887
  var t = arguments[e];
35799
35888
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35800
35889
  }
35801
35890
  return n;
35802
- }, _extends$1m.apply(null, arguments);
35891
+ }, _extends$1n.apply(null, arguments);
35803
35892
  }
35804
35893
  function SvgStar(props) {
35805
- return /*#__PURE__*/React.createElement("svg", _extends$1m({
35894
+ return /*#__PURE__*/React.createElement("svg", _extends$1n({
35806
35895
  width: 20,
35807
35896
  height: 20,
35808
35897
  fill: "none",
35809
35898
  xmlns: "http://www.w3.org/2000/svg"
35810
- }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
35899
+ }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
35811
35900
  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",
35812
35901
  fill: "#B2B6BE"
35813
35902
  })));
35814
35903
  }
35815
35904
 
35816
- var _path$1j;
35817
- function _extends$1n() {
35818
- return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35905
+ var _path$1k;
35906
+ function _extends$1o() {
35907
+ return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
35819
35908
  for (var e = 1; e < arguments.length; e++) {
35820
35909
  var t = arguments[e];
35821
35910
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35822
35911
  }
35823
35912
  return n;
35824
- }, _extends$1n.apply(null, arguments);
35913
+ }, _extends$1o.apply(null, arguments);
35825
35914
  }
35826
35915
  function SvgUnpin(props) {
35827
- return /*#__PURE__*/React.createElement("svg", _extends$1n({
35916
+ return /*#__PURE__*/React.createElement("svg", _extends$1o({
35828
35917
  width: 20,
35829
35918
  height: 21,
35830
35919
  viewBox: "0 0 20.01 21.01",
35831
35920
  fill: "none",
35832
35921
  xmlns: "http://www.w3.org/2000/svg"
35833
- }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
35922
+ }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
35834
35923
  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",
35835
35924
  fill: "CurrentColor"
35836
35925
  })));
@@ -36336,18 +36425,18 @@ var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3
36336
36425
  return props.hoverColor;
36337
36426
  });
36338
36427
 
36339
- var _rect$2, _rect2, _path$1k;
36340
- function _extends$1o() {
36341
- return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
36428
+ var _rect$2, _rect2, _path$1l;
36429
+ function _extends$1p() {
36430
+ return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36342
36431
  for (var e = 1; e < arguments.length; e++) {
36343
36432
  var t = arguments[e];
36344
36433
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36345
36434
  }
36346
36435
  return n;
36347
- }, _extends$1o.apply(null, arguments);
36436
+ }, _extends$1p.apply(null, arguments);
36348
36437
  }
36349
36438
  function SvgAddMember(props) {
36350
- return /*#__PURE__*/React.createElement("svg", _extends$1o({
36439
+ return /*#__PURE__*/React.createElement("svg", _extends$1p({
36351
36440
  width: 40,
36352
36441
  height: 40,
36353
36442
  viewBox: "0 0 40.01 40.01",
@@ -36367,29 +36456,29 @@ function SvgAddMember(props) {
36367
36456
  stroke: "#000",
36368
36457
  strokeOpacity: 0.08,
36369
36458
  strokeWidth: 0.5
36370
- })), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
36459
+ })), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
36371
36460
  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",
36372
36461
  fill: "CurrentColor"
36373
36462
  })));
36374
36463
  }
36375
36464
 
36376
- var _path$1l;
36377
- function _extends$1p() {
36378
- return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36465
+ var _path$1m;
36466
+ function _extends$1q() {
36467
+ return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36379
36468
  for (var e = 1; e < arguments.length; e++) {
36380
36469
  var t = arguments[e];
36381
36470
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36382
36471
  }
36383
36472
  return n;
36384
- }, _extends$1p.apply(null, arguments);
36473
+ }, _extends$1q.apply(null, arguments);
36385
36474
  }
36386
36475
  function SvgMoreVert(props) {
36387
- return /*#__PURE__*/React.createElement("svg", _extends$1p({
36476
+ return /*#__PURE__*/React.createElement("svg", _extends$1q({
36388
36477
  width: 4,
36389
36478
  height: 14,
36390
36479
  fill: "none",
36391
36480
  xmlns: "http://www.w3.org/2000/svg"
36392
- }, props), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
36481
+ }, props), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
36393
36482
  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",
36394
36483
  fill: "#9B9DA8"
36395
36484
  })));
@@ -36882,18 +36971,18 @@ var Media = function Media(_ref) {
36882
36971
  var Container$n = styled__default.div(_templateObject$M || (_templateObject$M = _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"])));
36883
36972
  var MediaItem = styled__default.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n width: calc(33.3333% - 4px);\n height: 110px;\n box-sizing: border-box;\n //border: 1px solid #ccc;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: hidden;\n margin: 2px;\n"])));
36884
36973
 
36885
- var _rect$3, _path$1m;
36886
- function _extends$1q() {
36887
- return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36974
+ var _rect$3, _path$1n;
36975
+ function _extends$1r() {
36976
+ return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
36888
36977
  for (var e = 1; e < arguments.length; e++) {
36889
36978
  var t = arguments[e];
36890
36979
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36891
36980
  }
36892
36981
  return n;
36893
- }, _extends$1q.apply(null, arguments);
36982
+ }, _extends$1r.apply(null, arguments);
36894
36983
  }
36895
36984
  function SvgFileIcon$1(props) {
36896
- return /*#__PURE__*/React.createElement("svg", _extends$1q({
36985
+ return /*#__PURE__*/React.createElement("svg", _extends$1r({
36897
36986
  width: 40,
36898
36987
  height: 40,
36899
36988
  fill: "none",
@@ -36905,7 +36994,7 @@ function SvgFileIcon$1(props) {
36905
36994
  rx: 8,
36906
36995
  fill: "currentColor",
36907
36996
  fillOpacity: 0.2
36908
- })), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
36997
+ })), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
36909
36998
  fillRule: "evenodd",
36910
36999
  clipRule: "evenodd",
36911
37000
  d: "M18.022 9.714c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.94-.687 1.864-.687 3.962v7.386c0 2.098.184 3.023.687 3.962a4.686 4.686 0 001.944 1.944c.938.502 1.864.687 3.962.687h3.957c2.098 0 3.023-.185 3.962-.687a4.686 4.686 0 001.944-1.944c.502-.939.687-1.864.687-3.962v-5.1c0-.683-.024-.99-.105-1.34a3.097 3.097 0 00-.399-.964c-.19-.305-.391-.539-.874-1.022l-4.175-4.175c-.483-.483-.717-.683-1.022-.874a3.095 3.095 0 00-.964-.399c-.293-.068-.556-.095-1.033-.103v-.002h-1.978zm0 1.715c-2.002 0-2.587.181-3.154.484a2.971 2.971 0 00-1.24 1.24c-.304.567-.485 1.153-.485 3.154v7.386c0 2.001.181 2.587.484 3.153.288.538.704.954 1.241 1.241.566.303 1.152.485 3.154.485h3.957c2.001 0 2.587-.182 3.153-.485a2.971 2.971 0 001.241-1.24c.303-.567.484-1.153.484-3.154v-5.1c0-.117 0-.219-.002-.308h-4.712A2.143 2.143 0 0120 16.144l.001-4.712-.15-.002h-1.83zm3.784.875l-.092-.091v3.93c0 .21.152.385.352.422l.077.006 3.932.002-.093-.093-4.176-4.176zm-6.092 12.839c0-.474.384-.857.858-.857H20A.857.857 0 1120 26h-3.428a.857.857 0 01-.858-.857zm.858-4.286a.857.857 0 000 1.715h6a.857.857 0 000-1.715h-6z",
@@ -36913,23 +37002,23 @@ function SvgFileIcon$1(props) {
36913
37002
  })));
36914
37003
  }
36915
37004
 
36916
- var _path$1n;
36917
- function _extends$1r() {
36918
- return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
37005
+ var _path$1o;
37006
+ function _extends$1s() {
37007
+ return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
36919
37008
  for (var e = 1; e < arguments.length; e++) {
36920
37009
  var t = arguments[e];
36921
37010
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36922
37011
  }
36923
37012
  return n;
36924
- }, _extends$1r.apply(null, arguments);
37013
+ }, _extends$1s.apply(null, arguments);
36925
37014
  }
36926
37015
  function SvgDownloadFile(props) {
36927
- return /*#__PURE__*/React.createElement("svg", _extends$1r({
37016
+ return /*#__PURE__*/React.createElement("svg", _extends$1s({
36928
37017
  width: 24,
36929
37018
  height: 24,
36930
37019
  xmlns: "http://www.w3.org/2000/svg",
36931
37020
  fill: "currentColor"
36932
- }, props), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
37021
+ }, props), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
36933
37022
  fillRule: "evenodd",
36934
37023
  clipRule: "evenodd",
36935
37024
  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"
@@ -37084,18 +37173,18 @@ var FileSizeAndDate = styled__default.span(_templateObject8$i || (_templateObjec
37084
37173
  return props.color;
37085
37174
  });
37086
37175
 
37087
- var _rect$4, _path$1o;
37088
- function _extends$1s() {
37089
- return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
37176
+ var _rect$4, _path$1p;
37177
+ function _extends$1t() {
37178
+ return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37090
37179
  for (var e = 1; e < arguments.length; e++) {
37091
37180
  var t = arguments[e];
37092
37181
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37093
37182
  }
37094
37183
  return n;
37095
- }, _extends$1s.apply(null, arguments);
37184
+ }, _extends$1t.apply(null, arguments);
37096
37185
  }
37097
37186
  function SvgLinkIcon(props) {
37098
- return /*#__PURE__*/React.createElement("svg", _extends$1s({
37187
+ return /*#__PURE__*/React.createElement("svg", _extends$1t({
37099
37188
  width: 40,
37100
37189
  height: 40,
37101
37190
  fill: "none",
@@ -37107,7 +37196,7 @@ function SvgLinkIcon(props) {
37107
37196
  rx: 8,
37108
37197
  fill: "currentColor",
37109
37198
  fillOpacity: 0.2
37110
- })), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
37199
+ })), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
37111
37200
  fillRule: "evenodd",
37112
37201
  clipRule: "evenodd",
37113
37202
  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",
@@ -37191,18 +37280,18 @@ var Links = function Links(_ref) {
37191
37280
  };
37192
37281
  var Container$p = styled__default.ul(_templateObject$P || (_templateObject$P = _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"])));
37193
37282
 
37194
- var _rect$5, _path$1p;
37195
- function _extends$1t() {
37196
- return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37283
+ var _rect$5, _path$1q;
37284
+ function _extends$1u() {
37285
+ return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37197
37286
  for (var e = 1; e < arguments.length; e++) {
37198
37287
  var t = arguments[e];
37199
37288
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37200
37289
  }
37201
37290
  return n;
37202
- }, _extends$1t.apply(null, arguments);
37291
+ }, _extends$1u.apply(null, arguments);
37203
37292
  }
37204
37293
  function SvgVoicePreview(props) {
37205
- return /*#__PURE__*/React.createElement("svg", _extends$1t({
37294
+ return /*#__PURE__*/React.createElement("svg", _extends$1u({
37206
37295
  width: 40,
37207
37296
  height: 40,
37208
37297
  fill: "none",
@@ -37212,24 +37301,24 @@ function SvgVoicePreview(props) {
37212
37301
  height: 40,
37213
37302
  rx: 20,
37214
37303
  fill: "#5159F6"
37215
- })), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
37304
+ })), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
37216
37305
  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",
37217
37306
  fill: "#fff"
37218
37307
  })));
37219
37308
  }
37220
37309
 
37221
- var _rect$6, _path$1q;
37222
- function _extends$1u() {
37223
- return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37310
+ var _rect$6, _path$1r;
37311
+ function _extends$1v() {
37312
+ return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
37224
37313
  for (var e = 1; e < arguments.length; e++) {
37225
37314
  var t = arguments[e];
37226
37315
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37227
37316
  }
37228
37317
  return n;
37229
- }, _extends$1u.apply(null, arguments);
37318
+ }, _extends$1v.apply(null, arguments);
37230
37319
  }
37231
37320
  function SvgVoicePreviewPause(props) {
37232
- return /*#__PURE__*/React.createElement("svg", _extends$1u({
37321
+ return /*#__PURE__*/React.createElement("svg", _extends$1v({
37233
37322
  width: 40,
37234
37323
  height: 40,
37235
37324
  fill: "none",
@@ -37239,7 +37328,7 @@ function SvgVoicePreviewPause(props) {
37239
37328
  height: 40,
37240
37329
  rx: 20,
37241
37330
  fill: "#5159F6"
37242
- })), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
37331
+ })), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
37243
37332
  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",
37244
37333
  fill: "#fff"
37245
37334
  })));
@@ -38525,23 +38614,23 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
38525
38614
  };
38526
38615
  var DetailsWrapper = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
38527
38616
 
38528
- var _path$1r;
38529
- function _extends$1v() {
38530
- return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
38617
+ var _path$1s;
38618
+ function _extends$1w() {
38619
+ return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
38531
38620
  for (var e = 1; e < arguments.length; e++) {
38532
38621
  var t = arguments[e];
38533
38622
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
38534
38623
  }
38535
38624
  return n;
38536
- }, _extends$1v.apply(null, arguments);
38625
+ }, _extends$1w.apply(null, arguments);
38537
38626
  }
38538
38627
  function SvgChevronDown(props) {
38539
- return /*#__PURE__*/React.createElement("svg", _extends$1v({
38628
+ return /*#__PURE__*/React.createElement("svg", _extends$1w({
38540
38629
  width: 32,
38541
38630
  height: 32,
38542
38631
  fill: "none",
38543
38632
  xmlns: "http://www.w3.org/2000/svg"
38544
- }, props), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
38633
+ }, props), _path$1s || (_path$1s = /*#__PURE__*/React.createElement("path", {
38545
38634
  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",
38546
38635
  fill: "CurrentColor"
38547
38636
  })));