sceyt-chat-react-uikit 1.6.6-beta.7 → 1.6.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.
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const RecordingAnimation: React.FC;
3
+ export default RecordingAnimation;
package/index.js CHANGED
@@ -11461,7 +11461,7 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
11461
11461
 
11462
11462
  var _marked = /*#__PURE__*/_regeneratorRuntime().mark(watchForEvents);
11463
11463
  function watchForEvents() {
11464
- var SceytChatClient, channelListener, connectionListener, usersTimeout, chan, _loop, _ret;
11464
+ var SceytChatClient, channelListener, connectionListener, usersTimeout, chan, _loop;
11465
11465
  return _regeneratorRuntime().wrap(function watchForEvents$(_context2) {
11466
11466
  while (1) switch (_context2.prev = _context2.next) {
11467
11467
  case 0:
@@ -12698,9 +12698,7 @@ function watchForEvents() {
12698
12698
  _context.next = 405;
12699
12699
  break;
12700
12700
  }
12701
- return _context.abrupt("return", {
12702
- v: void 0
12703
- });
12701
+ return _context.abrupt("break", 441);
12704
12702
  case 405:
12705
12703
  if (!(name === 'start_typing')) {
12706
12704
  _context.next = 413;
@@ -12789,16 +12787,9 @@ function watchForEvents() {
12789
12787
  case 6:
12790
12788
  return _context2.delegateYield(_loop(), "t0", 8);
12791
12789
  case 8:
12792
- _ret = _context2.t0;
12793
- if (!_ret) {
12794
- _context2.next = 11;
12795
- break;
12796
- }
12797
- return _context2.abrupt("return", _ret.v);
12798
- case 11:
12799
12790
  _context2.next = 6;
12800
12791
  break;
12801
- case 13:
12792
+ case 10:
12802
12793
  case "end":
12803
12794
  return _context2.stop();
12804
12795
  }
@@ -33433,7 +33424,29 @@ var Timer$2 = styled__default.div(_templateObject7$g || (_templateObject7$g = _t
33433
33424
  return props.color;
33434
33425
  });
33435
33426
 
33436
- var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
33427
+ var _templateObject$H, _templateObject2$C, _templateObject3$v;
33428
+ var barColor = '#7B818A';
33429
+ var wave = styled.keyframes(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n 0%, 100% {\n transform: scaleY(0.5);\n opacity: 0.6;\n }\n 50% {\n transform: scaleY(1.2);\n opacity: 1;\n }\n"])));
33430
+ var Wrapper = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n height: 8px;\n gap: 1.5px;\n"])));
33431
+ var Bar = styled__default.span(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n display: block;\n width: 3px;\n height: 8px;\n border-radius: 2px;\n background: ", ";\n animation: ", " 1s infinite;\n animation-delay: ", "s;\n"])), barColor, wave, function (_ref) {
33432
+ var delay = _ref.delay;
33433
+ return delay;
33434
+ });
33435
+ var RecordingAnimation = function RecordingAnimation() {
33436
+ return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(Bar, {
33437
+ delay: 0
33438
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33439
+ delay: 0.15
33440
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33441
+ delay: 0.3
33442
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33443
+ delay: 0.45
33444
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33445
+ delay: 0.6
33446
+ }));
33447
+ };
33448
+
33449
+ var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
33437
33450
  function AutoFocusPlugin(_ref) {
33438
33451
  var messageForReply = _ref.messageForReply;
33439
33452
  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -34672,27 +34685,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34672
34685
  if (users.length === 1) {
34673
34686
  var _user = users[0];
34674
34687
  var userName = makeUsername(getFromContacts && _user.from && contactsMap[_user.from.id], _user.from, getFromContacts);
34675
- return userName + " is " + (isTyping ? 'typing' : 'recording');
34688
+ return "" + userName + (isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
34676
34689
  }
34677
34690
  if (users.length <= maxShownUsers) {
34678
34691
  var userNames = users.map(function (user) {
34679
34692
  return makeUsername(getFromContacts && user.from && contactsMap[user.from.id], user.from, getFromContacts);
34680
34693
  });
34681
- var action = isTyping ? 'are typing' : 'are recording';
34682
- if (users.length === 2) {
34683
- return userNames[0] + " and " + userNames[1] + " " + action;
34684
- } else {
34685
- return userNames[0] + ", " + userNames[1] + " and " + userNames[2] + " " + action;
34686
- }
34694
+ return userNames.join(', ');
34687
34695
  } else {
34688
34696
  var firstNames = users.slice(0, maxShownUsers).map(function (user) {
34689
34697
  return makeUsername(getFromContacts && user.from && contactsMap[user.from.id], user.from, getFromContacts);
34690
34698
  });
34691
34699
  var othersCount = users.length - maxShownUsers;
34692
- var _action = isTyping ? 'are typing' : 'are recording';
34693
34700
  return firstNames.map(function (name, index) {
34694
34701
  return "" + name + (index < firstNames.length - 1 ? ', ' : '');
34695
- }).join('') + " and " + othersCount + " other" + (othersCount > 1 ? 's' : '') + " " + _action;
34702
+ }).join('') + " and " + othersCount + " other" + (othersCount > 1 ? 's' : '');
34696
34703
  }
34697
34704
  };
34698
34705
  return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
@@ -34756,7 +34763,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34756
34763
  })
34757
34764
  })) : (/*#__PURE__*/React__default.createElement(TypingIndicatorCont, null, /*#__PURE__*/React__default.createElement(TypingFrom, {
34758
34765
  color: textSecondary
34759
- }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), /*#__PURE__*/React__default.createElement(TypingAnimation, null, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null)))))), messageToEdit && (/*#__PURE__*/React__default.createElement(EditReplyMessageCont, {
34766
+ }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, null, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null))) : (/*#__PURE__*/React__default.createElement(RecordingAnimation, null)))))), messageToEdit && (/*#__PURE__*/React__default.createElement(EditReplyMessageCont, {
34760
34767
  width: replyEditMessageContainerWidth,
34761
34768
  borderRadius: replyEditMessageContainerBorderRadius,
34762
34769
  left: replyEditMessageContainerLeftPosition,
@@ -34961,10 +34968,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34961
34968
  showRecording: showRecording
34962
34969
  }))))))))));
34963
34970
  };
34964
- var SendMessageWrapper = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n"])), function (props) {
34971
+ var SendMessageWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n"])), function (props) {
34965
34972
  return props.backgroundColor;
34966
34973
  });
34967
- var Container$k = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n margin: ", ";\n border: ", ";\n border-radius: ", ";\n position: relative;\n padding: ", ";\n\n & span.rdw-suggestion-dropdown {\n position: absolute;\n bottom: 100%;\n height: 160px;\n min-width: 150px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 6px 12px;\n border: 1px solid #ccc;\n background: #fff;\n z-index: 99;\n }\n\n & .text_formatting_toolbar {\n display: ", ";\n position: fixed;\n top: ", ";\n left: ", ";\n }\n\n & .rdw-suggestion-option-active {\n background-color: rgb(243, 245, 248);\n }\n\n & .custom_editor {\n cursor: text;\n\n & .rdw-mention-link {\n color: ", ";\n }\n }\n"])), function (props) {
34974
+ var Container$k = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n margin: ", ";\n border: ", ";\n border-radius: ", ";\n position: relative;\n padding: ", ";\n\n & span.rdw-suggestion-dropdown {\n position: absolute;\n bottom: 100%;\n height: 160px;\n min-width: 150px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 6px 12px;\n border: 1px solid #ccc;\n background: #fff;\n z-index: 99;\n }\n\n & .text_formatting_toolbar {\n display: ", ";\n position: fixed;\n top: ", ";\n left: ", ";\n }\n\n & .rdw-suggestion-option-active {\n background-color: rgb(243, 245, 248);\n }\n\n & .custom_editor {\n cursor: text;\n\n & .rdw-mention-link {\n color: ", ";\n }\n }\n"])), function (props) {
34968
34975
  return props.margin || '30px 0 16px';
34969
34976
  }, function (props) {
34970
34977
  return props.border || '';
@@ -34981,7 +34988,7 @@ var Container$k = styled__default.div(_templateObject2$C || (_templateObject2$C
34981
34988
  }, function (props) {
34982
34989
  return props.mentionColor;
34983
34990
  });
34984
- var EditReplyMessageCont = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n left: ", ";\n bottom: ", ";\n width: ", ";\n border-radius: ", ";\n padding: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n color: ", ";\n background-color: ", ";\n z-index: 19;\n box-sizing: content-box;\n"])), function (props) {
34991
+ var EditReplyMessageCont = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n position: relative;\n left: ", ";\n bottom: ", ";\n width: ", ";\n border-radius: ", ";\n padding: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n color: ", ";\n background-color: ", ";\n z-index: 19;\n box-sizing: content-box;\n"])), function (props) {
34985
34992
  return props.left || '0';
34986
34993
  }, function (props) {
34987
34994
  return props.bottom || '0';
@@ -35072,7 +35079,7 @@ var SendMessageButton = styled__default.span(_templateObject14$2 || (_templateOb
35072
35079
  var AudioCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 100%;\n justify-content: flex-end;\n"])));
35073
35080
  var ChosenAttachments = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px 16px 14px;\n overflow-x: auto;\n\n & ", " {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n object-fit: cover;\n }\n\n & ", " {\n width: 240px;\n padding: 5px 12px;\n border-radius: 8px;\n height: 50px;\n }\n"])), AttachmentImg$1, AttachmentFile$1);
35074
35081
  var TypingIndicator$1 = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 100%;\n left: 16px;\n"])));
35075
- var TypingIndicatorCont = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n"])));
35082
+ var TypingIndicatorCont = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n gap: 4px;\n"])));
35076
35083
  var TypingFrom = styled__default.h5(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35077
35084
  return props.color;
35078
35085
  });
@@ -35305,7 +35312,7 @@ function SvgUnpin(props) {
35305
35312
  })));
35306
35313
  }
35307
35314
 
35308
- var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
35315
+ var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
35309
35316
  var Actions = function Actions(_ref) {
35310
35317
  var _channel$metadata;
35311
35318
  var channel = _ref.channel,
@@ -35764,11 +35771,11 @@ var Actions = function Actions(_ref) {
35764
35771
  title: popupTitle
35765
35772
  })));
35766
35773
  };
35767
- var Container$l = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n padding: 10px 16px;\n border-bottom: 6px solid ", ";\n]"])), function (props) {
35774
+ var Container$l = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n padding: 10px 16px;\n border-bottom: 6px solid ", ";\n]"])), function (props) {
35768
35775
  return props.borderColor;
35769
35776
  });
35770
- var ActionHeader = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 25px 0 22px;\n cursor: pointer;\n"])));
35771
- var MenuTriggerIcon = styled__default.span(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n transition: all 0.2s;\n ", "\n"])), function (props) {
35777
+ var ActionHeader = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 25px 0 22px;\n cursor: pointer;\n"])));
35778
+ var MenuTriggerIcon = styled__default.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n transition: all 0.2s;\n ", "\n"])), function (props) {
35772
35779
  return !props.isOpen && ' transform: rotate(-90deg);';
35773
35780
  });
35774
35781
  var ActionsMenu = styled__default.ul(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
@@ -35858,7 +35865,7 @@ function SvgMoreVert(props) {
35858
35865
  })));
35859
35866
  }
35860
35867
 
35861
- var _templateObject$J, _templateObject2$E, _templateObject3$x;
35868
+ var _templateObject$K, _templateObject2$F, _templateObject3$y;
35862
35869
  var ChangeMemberRole = function ChangeMemberRole(_ref) {
35863
35870
  var theme = _ref.theme,
35864
35871
  channelId = _ref.channelId,
@@ -35954,14 +35961,14 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
35954
35961
  onClick: handleSave
35955
35962
  }, "Save"))));
35956
35963
  };
35957
- var RolesSelect = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
35958
- var RoleLabel = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n margin: 20px 0 8px;\n color: ", ";\n"])), function (_ref2) {
35964
+ var RolesSelect = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
35965
+ var RoleLabel = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n margin: 20px 0 8px;\n color: ", ";\n"])), function (_ref2) {
35959
35966
  var color = _ref2.color;
35960
35967
  return color;
35961
35968
  });
35962
- var RoleSpan = styled__default.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n text-transform: capitalize;\n"])));
35969
+ var RoleSpan = styled__default.span(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n text-transform: capitalize;\n"])));
35963
35970
 
35964
- var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$f;
35971
+ var _templateObject$L, _templateObject2$G, _templateObject3$z, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$f;
35965
35972
  var Members = function Members(_ref) {
35966
35973
  var channel = _ref.channel,
35967
35974
  theme = _ref.theme,
@@ -36251,9 +36258,9 @@ var Members = function Members(_ref) {
36251
36258
  toggleCreatePopup: handleAddMemberPopup
36252
36259
  })));
36253
36260
  };
36254
- var Container$m = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose([""])));
36255
- var ActionsMenu$1 = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: all 0.2s;\n"])));
36256
- var MemberNamePresence = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 84px);\n\n & > ", " {\n display: block;\n }\n"])), SubTitle);
36261
+ var Container$m = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose([""])));
36262
+ var ActionsMenu$1 = styled__default.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: all 0.2s;\n"])));
36263
+ var MemberNamePresence = styled__default.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 84px);\n\n & > ", " {\n display: block;\n }\n"])), SubTitle);
36257
36264
  var MemberNameWrapper = styled__default.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
36258
36265
  var MemberName$3 = styled__default.h4(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
36259
36266
  var EditMemberIcon = styled__default.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 15px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
@@ -36273,7 +36280,7 @@ var RoleBadge = styled__default.span(_templateObject9$f || (_templateObject9$f =
36273
36280
  return props.color || colors.primary;
36274
36281
  });
36275
36282
 
36276
- var _templateObject$L, _templateObject2$G;
36283
+ var _templateObject$M, _templateObject2$H;
36277
36284
  var Media = function Media(_ref) {
36278
36285
  var channel = _ref.channel;
36279
36286
  var attachments = reactRedux.useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
@@ -36317,8 +36324,8 @@ var Media = function Media(_ref) {
36317
36324
  currentMediaFile: mediaFile
36318
36325
  })));
36319
36326
  };
36320
- var Container$n = styled__default.div(_templateObject$L || (_templateObject$L = _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"])));
36321
- var MediaItem = styled__default.div(_templateObject2$G || (_templateObject2$G = _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"])));
36327
+ 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"])));
36328
+ 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"])));
36322
36329
 
36323
36330
  var _rect$3, _path$1m;
36324
36331
  function _extends$1q() {
@@ -36374,7 +36381,7 @@ function SvgDownloadFile(props) {
36374
36381
  })));
36375
36382
  }
36376
36383
 
36377
- var _templateObject$M, _templateObject2$H, _templateObject3$z, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i;
36384
+ var _templateObject$N, _templateObject2$I, _templateObject3$A, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i;
36378
36385
  var Files = function Files(_ref) {
36379
36386
  var channelId = _ref.channelId,
36380
36387
  theme = _ref.theme,
@@ -36489,13 +36496,13 @@ var Files = function Files(_ref) {
36489
36496
  }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null)));
36490
36497
  }));
36491
36498
  };
36492
- var Container$o = styled__default.ul(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
36493
- var DownloadWrapper = styled__default.a(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n visibility: ", ";\n padding: 5px 6px;\n position: absolute;\n top: 25%;\n right: 16px;\n cursor: pointer;\n & > svg {\n color: ", ";\n }\n"])), function (props) {
36499
+ var Container$o = styled__default.ul(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
36500
+ var DownloadWrapper = styled__default.a(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n visibility: ", ";\n padding: 5px 6px;\n position: absolute;\n top: 25%;\n right: 16px;\n cursor: pointer;\n & > svg {\n color: ", ";\n }\n"])), function (props) {
36494
36501
  return props.visible ? 'visible' : 'hidden';
36495
36502
  }, function (props) {
36496
36503
  return props.iconColor;
36497
36504
  });
36498
- var ProgressWrapper$2 = styled__default.span(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 20px;\n height: 20px;\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])));
36505
+ var ProgressWrapper$2 = styled__default.span(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 20px;\n height: 20px;\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])));
36499
36506
  var FileIconCont = styled__default.span(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n\n & > svg {\n width: 40px;\n height: 40px;\n color: ", ";\n }\n"])), function (props) {
36500
36507
  return props.iconColor;
36501
36508
  });
@@ -36545,7 +36552,7 @@ function SvgLinkIcon(props) {
36545
36552
  })));
36546
36553
  }
36547
36554
 
36548
- var _templateObject$N, _templateObject2$I, _templateObject3$A, _templateObject4$v, _templateObject5$r;
36555
+ var _templateObject$O, _templateObject2$J, _templateObject3$B, _templateObject4$v, _templateObject5$r;
36549
36556
  var LinkItem = function LinkItem(_ref) {
36550
36557
  var link = _ref.link,
36551
36558
  linkPreviewIcon = _ref.linkPreviewIcon,
@@ -36572,13 +36579,13 @@ var LinkItem = function LinkItem(_ref) {
36572
36579
  color: linkPreviewColor || textPrimary
36573
36580
  }, link))));
36574
36581
  };
36575
- var LinkIconCont = styled__default.span(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36582
+ var LinkIconCont = styled__default.span(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36576
36583
  return props.color;
36577
36584
  });
36578
- var LinkHoverIconCont = styled__default.span(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n display: none;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36585
+ var LinkHoverIconCont = styled__default.span(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n display: none;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36579
36586
  return props.color;
36580
36587
  });
36581
- var LinkInfoCont = styled__default.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n width: calc(100% - 40px);\n"])));
36588
+ var LinkInfoCont = styled__default.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n width: calc(100% - 40px);\n"])));
36582
36589
  var FileItem$1 = styled__default.li(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n a {\n display: flex;\n align-items: center;\n text-decoration: none;\n }\n &:hover {\n background-color: ", ";\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36583
36590
  return props.hoverBackgroundColor || colors.gray0;
36584
36591
  }, LinkIconCont, LinkHoverIconCont);
@@ -36586,7 +36593,7 @@ var LinkUrl = styled__default.span(_templateObject5$r || (_templateObject5$r = _
36586
36593
  return props.color;
36587
36594
  });
36588
36595
 
36589
- var _templateObject$O;
36596
+ var _templateObject$P;
36590
36597
  var Links = function Links(_ref) {
36591
36598
  var channelId = _ref.channelId,
36592
36599
  linkPreviewIcon = _ref.linkPreviewIcon,
@@ -36611,7 +36618,7 @@ var Links = function Links(_ref) {
36611
36618
  });
36612
36619
  }));
36613
36620
  };
36614
- var Container$p = styled__default.ul(_templateObject$O || (_templateObject$O = _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"])));
36621
+ 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"])));
36615
36622
 
36616
36623
  var _rect$5, _circle$8, _path$1p;
36617
36624
  function _extends$1t() {
@@ -36741,7 +36748,7 @@ function SvgVoicePreviewPauseHover(props) {
36741
36748
  })));
36742
36749
  }
36743
36750
 
36744
- var _templateObject$P, _templateObject2$J, _templateObject3$B, _templateObject4$w, _templateObject5$s, _templateObject6$n, _templateObject7$l, _templateObject8$j;
36751
+ var _templateObject$Q, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$n, _templateObject7$l, _templateObject8$j;
36745
36752
  var VoiceItem = function VoiceItem(_ref) {
36746
36753
  var file = _ref.file,
36747
36754
  voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -36859,9 +36866,9 @@ var VoiceItem = function VoiceItem(_ref) {
36859
36866
  type: 'audio/mpeg'
36860
36867
  })));
36861
36868
  };
36862
- var FileIconCont$1 = styled__default.span(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36863
- var FileHoverIconCont$1 = styled__default.span(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36864
- var FileItem$2 = styled__default.li(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36869
+ var FileIconCont$1 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36870
+ var FileHoverIconCont$1 = styled__default.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36871
+ var FileItem$2 = styled__default.li(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36865
36872
  return props.hoverBackgroundColor || colors.gray0;
36866
36873
  }, FileIconCont$1, FileHoverIconCont$1);
36867
36874
  var AudioInfo = styled__default.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
@@ -36876,7 +36883,7 @@ var AudioSendTime = styled__default.span(_templateObject7$l || (_templateObject7
36876
36883
  });
36877
36884
  var Audio = styled__default.audio(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
36878
36885
 
36879
- var _templateObject$Q;
36886
+ var _templateObject$R;
36880
36887
  var Voices = function Voices(_ref) {
36881
36888
  var channelId = _ref.channelId,
36882
36889
  voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -36907,9 +36914,9 @@ var Voices = function Voices(_ref) {
36907
36914
  });
36908
36915
  }));
36909
36916
  };
36910
- var Container$q = styled__default.ul(_templateObject$Q || (_templateObject$Q = _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"])));
36917
+ var Container$q = styled__default.ul(_templateObject$R || (_templateObject$R = _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"])));
36911
36918
 
36912
- var _templateObject$R, _templateObject2$K;
36919
+ var _templateObject$S, _templateObject2$L;
36913
36920
  var DetailsTab = function DetailsTab(_ref) {
36914
36921
  var channel = _ref.channel,
36915
36922
  theme = _ref.theme,
@@ -37057,8 +37064,8 @@ var DetailsTab = function DetailsTab(_ref) {
37057
37064
  voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
37058
37065
  })));
37059
37066
  };
37060
- var Container$r = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n //border-top: 1px solid ", ";\n min-height: calc(100vh - 64px);\n"])), colors.gray1);
37061
- var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37067
+ var Container$r = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n //border-top: 1px solid ", ";\n min-height: calc(100vh - 64px);\n"])), colors.gray1);
37068
+ var DetailsTabHeader = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37062
37069
  return props.borderColor;
37063
37070
  }, function (props) {
37064
37071
  return props.backgroundColor || 'transparent';
@@ -37076,16 +37083,16 @@ var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObjec
37076
37083
  return props.activeTabColor || colors.primary;
37077
37084
  });
37078
37085
 
37079
- var _templateObject$S, _templateObject2$L, _templateObject3$C, _templateObject4$x;
37080
- var Container$s = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n ", ";\n height: ", ";\n position: absolute;\n padding: 24px 16px;\n background-color: ", ";\n z-index: 25;\n"])), function (props) {
37086
+ var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$x;
37087
+ var Container$s = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n ", ";\n height: ", ";\n position: absolute;\n padding: 24px 16px;\n background-color: ", ";\n z-index: 25;\n"])), function (props) {
37081
37088
  return props.active ? 'display: block' : 'display: none';
37082
37089
  }, function (props) {
37083
37090
  return "calc(100vh - " + (props.heightOffset ? props.heightOffset + 48 : 48) + "px)";
37084
37091
  }, function (props) {
37085
37092
  return props.backgroundColor || colors.white;
37086
37093
  });
37087
- var AvatarCont = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: 4px;\n\n &::after {\n content: '';\n position: absolute;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.4);\n }\n .dropdown-body {\n top: inherit;\n right: inherit;\n bottom: -90px;\n }\n"])));
37088
- var DropDownWrapper = styled__default.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 4;\n width: 40px;\n height: 40px;\n"])));
37094
+ var AvatarCont = styled__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: 4px;\n\n &::after {\n content: '';\n position: absolute;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.4);\n }\n .dropdown-body {\n top: inherit;\n right: inherit;\n bottom: -90px;\n }\n"])));
37095
+ var DropDownWrapper = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 4;\n width: 40px;\n height: 40px;\n"])));
37089
37096
  var EditChannelFooter = styled__default(ButtonBlock)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n margin-top: 24px;\n\n & > button {\n margin-left: 12px;\n }\n"])));
37090
37097
  var EditChannel = function EditChannel(_ref) {
37091
37098
  var channel = _ref.channel,
@@ -37335,7 +37342,7 @@ var EditChannel = function EditChannel(_ref) {
37335
37342
  })));
37336
37343
  };
37337
37344
 
37338
- var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
37345
+ var _templateObject$U, _templateObject2$N, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
37339
37346
  var Details = function Details(_ref) {
37340
37347
  var _activeChannel$metada;
37341
37348
  var detailsTitleText = _ref.detailsTitleText,
@@ -37702,17 +37709,17 @@ var Details = function Details(_ref) {
37702
37709
  onTabChange: handleTabChange
37703
37710
  }))));
37704
37711
  };
37705
- var Container$t = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n flex: 0 0 auto;\n width: 0;\n border-left: 1px solid ", ";\n //transition: all 0.1s;\n ", "\n background-color: ", ";\n}\n"])), function (props) {
37712
+ var Container$t = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n flex: 0 0 auto;\n width: 0;\n border-left: 1px solid ", ";\n //transition: all 0.1s;\n ", "\n background-color: ", ";\n}\n"])), function (props) {
37706
37713
  return props.borderColor;
37707
37714
  }, function (props) {
37708
37715
  return props.mounted && " width: " + (props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px') + ";";
37709
37716
  }, function (props) {
37710
37717
  return props.backgroundColor;
37711
37718
  });
37712
- var ChannelDetailsHeader = styled__default.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px;\n position: relative;\n height: 64px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n & svg {\n cursor: pointer;\n }\n"])), function (props) {
37719
+ var ChannelDetailsHeader = styled__default.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px;\n position: relative;\n height: 64px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n & svg {\n cursor: pointer;\n }\n"])), function (props) {
37713
37720
  return props.borderColor;
37714
37721
  });
37715
- var ChatDetails = styled__default.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n //position: relative;\n width: ", ";\n //height: ", ";\n height: ", ";\n overflow-y: auto;\n"])), function (props) {
37722
+ var ChatDetails = styled__default.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n //position: relative;\n width: ", ";\n //height: ", ";\n height: ", ";\n overflow-y: auto;\n"])), function (props) {
37716
37723
  return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
37717
37724
  }, function (props) {
37718
37725
  return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -37749,7 +37756,7 @@ var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$e || (_templ
37749
37756
  var ChannelNameWrapper = styled__default.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n"])));
37750
37757
  var EditButton = styled__default.span(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n margin-left: 6px;\n cursor: pointer;\n color: #b2b6be;\n"])));
37751
37758
 
37752
- var _templateObject$U;
37759
+ var _templateObject$V;
37753
37760
  var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
37754
37761
  var _ref$size = _ref.size,
37755
37762
  size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -37976,7 +37983,7 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
37976
37983
  tabItemsMinWidth: tabItemsMinWidth
37977
37984
  })));
37978
37985
  };
37979
- var DetailsWrapper = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose([""])));
37986
+ var DetailsWrapper = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
37980
37987
 
37981
37988
  var _path$1t;
37982
37989
  function _extends$1x() {
@@ -38000,7 +38007,7 @@ function SvgChevronDown(props) {
38000
38007
  })));
38001
38008
  }
38002
38009
 
38003
- var _templateObject$V, _templateObject2$N;
38010
+ var _templateObject$W, _templateObject2$O;
38004
38011
  var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
38005
38012
  var buttonIcon = _ref.buttonIcon,
38006
38013
  buttonWidth = _ref.buttonWidth,
@@ -38049,14 +38056,14 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
38049
38056
  isMuted: channel.muted
38050
38057
  }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null))));
38051
38058
  };
38052
- var BottomButton = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n margin-right: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 50px;\n width: 48px;\n height: 48px;\n cursor: pointer;\n z-index: 14;\n\n & > svg {\n color: rgba(129, 140, 153, 1);\n }\n\n & > span {\n bottom: 32px;\n right: 0;\n }\n"])), function (props) {
38059
+ var BottomButton = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n margin-right: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 50px;\n width: 48px;\n height: 48px;\n cursor: pointer;\n z-index: 14;\n\n & > svg {\n color: rgba(129, 140, 153, 1);\n }\n\n & > span {\n bottom: 32px;\n right: 0;\n }\n"])), function (props) {
38053
38060
  return props.bottomOffset + (props.bottomPosition == undefined ? 45 : props.bottomPosition) + "px";
38054
38061
  }, function (props) {
38055
38062
  return (props.rightPosition == undefined ? 16 : props.rightPosition) + "px";
38056
38063
  }, function (props) {
38057
38064
  return props.backgroundColor;
38058
38065
  });
38059
- var UnreadCount$1 = styled__default.span(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 11px;\n right: 16px;\n flex: 0 0 auto;\n margin-left: auto;\n background-color: ", ";\n padding: 0 4px;\n font-size: ", ";\n line-height: 20px;\n min-width: ", ";\n height: ", ";\n text-align: center;\n font-weight: 500;\n color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n\n /*", "*/\n"])), function (props) {
38066
+ var UnreadCount$1 = styled__default.span(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 11px;\n right: 16px;\n flex: 0 0 auto;\n margin-left: auto;\n background-color: ", ";\n padding: 0 4px;\n font-size: ", ";\n line-height: 20px;\n min-width: ", ";\n height: ", ";\n text-align: center;\n font-weight: 500;\n color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n\n /*", "*/\n"])), function (props) {
38060
38067
  return props.backgroundColor || colors.primary;
38061
38068
  }, function (props) {
38062
38069
  return props.fontSize || '13px';
package/index.modern.js CHANGED
@@ -11438,7 +11438,7 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
11438
11438
 
11439
11439
  var _marked = /*#__PURE__*/_regeneratorRuntime().mark(watchForEvents);
11440
11440
  function watchForEvents() {
11441
- var SceytChatClient, channelListener, connectionListener, usersTimeout, chan, _loop, _ret;
11441
+ var SceytChatClient, channelListener, connectionListener, usersTimeout, chan, _loop;
11442
11442
  return _regeneratorRuntime().wrap(function watchForEvents$(_context2) {
11443
11443
  while (1) switch (_context2.prev = _context2.next) {
11444
11444
  case 0:
@@ -12675,9 +12675,7 @@ function watchForEvents() {
12675
12675
  _context.next = 405;
12676
12676
  break;
12677
12677
  }
12678
- return _context.abrupt("return", {
12679
- v: void 0
12680
- });
12678
+ return _context.abrupt("break", 441);
12681
12679
  case 405:
12682
12680
  if (!(name === 'start_typing')) {
12683
12681
  _context.next = 413;
@@ -12766,16 +12764,9 @@ function watchForEvents() {
12766
12764
  case 6:
12767
12765
  return _context2.delegateYield(_loop(), "t0", 8);
12768
12766
  case 8:
12769
- _ret = _context2.t0;
12770
- if (!_ret) {
12771
- _context2.next = 11;
12772
- break;
12773
- }
12774
- return _context2.abrupt("return", _ret.v);
12775
- case 11:
12776
12767
  _context2.next = 6;
12777
12768
  break;
12778
- case 13:
12769
+ case 10:
12779
12770
  case "end":
12780
12771
  return _context2.stop();
12781
12772
  }
@@ -33410,7 +33401,29 @@ var Timer$2 = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemp
33410
33401
  return props.color;
33411
33402
  });
33412
33403
 
33413
- var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
33404
+ var _templateObject$H, _templateObject2$C, _templateObject3$v;
33405
+ var barColor = '#7B818A';
33406
+ var wave = keyframes(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n 0%, 100% {\n transform: scaleY(0.5);\n opacity: 0.6;\n }\n 50% {\n transform: scaleY(1.2);\n opacity: 1;\n }\n"])));
33407
+ var Wrapper = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n height: 8px;\n gap: 1.5px;\n"])));
33408
+ var Bar = styled.span(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n display: block;\n width: 3px;\n height: 8px;\n border-radius: 2px;\n background: ", ";\n animation: ", " 1s infinite;\n animation-delay: ", "s;\n"])), barColor, wave, function (_ref) {
33409
+ var delay = _ref.delay;
33410
+ return delay;
33411
+ });
33412
+ var RecordingAnimation = function RecordingAnimation() {
33413
+ return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(Bar, {
33414
+ delay: 0
33415
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33416
+ delay: 0.15
33417
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33418
+ delay: 0.3
33419
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33420
+ delay: 0.45
33421
+ }), /*#__PURE__*/React__default.createElement(Bar, {
33422
+ delay: 0.6
33423
+ }));
33424
+ };
33425
+
33426
+ var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
33414
33427
  function AutoFocusPlugin(_ref) {
33415
33428
  var messageForReply = _ref.messageForReply;
33416
33429
  var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -34649,27 +34662,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34649
34662
  if (users.length === 1) {
34650
34663
  var _user = users[0];
34651
34664
  var userName = makeUsername(getFromContacts && _user.from && contactsMap[_user.from.id], _user.from, getFromContacts);
34652
- return userName + " is " + (isTyping ? 'typing' : 'recording');
34665
+ return "" + userName + (isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
34653
34666
  }
34654
34667
  if (users.length <= maxShownUsers) {
34655
34668
  var userNames = users.map(function (user) {
34656
34669
  return makeUsername(getFromContacts && user.from && contactsMap[user.from.id], user.from, getFromContacts);
34657
34670
  });
34658
- var action = isTyping ? 'are typing' : 'are recording';
34659
- if (users.length === 2) {
34660
- return userNames[0] + " and " + userNames[1] + " " + action;
34661
- } else {
34662
- return userNames[0] + ", " + userNames[1] + " and " + userNames[2] + " " + action;
34663
- }
34671
+ return userNames.join(', ');
34664
34672
  } else {
34665
34673
  var firstNames = users.slice(0, maxShownUsers).map(function (user) {
34666
34674
  return makeUsername(getFromContacts && user.from && contactsMap[user.from.id], user.from, getFromContacts);
34667
34675
  });
34668
34676
  var othersCount = users.length - maxShownUsers;
34669
- var _action = isTyping ? 'are typing' : 'are recording';
34670
34677
  return firstNames.map(function (name, index) {
34671
34678
  return "" + name + (index < firstNames.length - 1 ? ', ' : '');
34672
- }).join('') + " and " + othersCount + " other" + (othersCount > 1 ? 's' : '') + " " + _action;
34679
+ }).join('') + " and " + othersCount + " other" + (othersCount > 1 ? 's' : '');
34673
34680
  }
34674
34681
  };
34675
34682
  return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
@@ -34733,7 +34740,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34733
34740
  })
34734
34741
  })) : (/*#__PURE__*/React__default.createElement(TypingIndicatorCont, null, /*#__PURE__*/React__default.createElement(TypingFrom, {
34735
34742
  color: textSecondary
34736
- }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), /*#__PURE__*/React__default.createElement(TypingAnimation, null, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null)))))), messageToEdit && (/*#__PURE__*/React__default.createElement(EditReplyMessageCont, {
34743
+ }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, null, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null))) : (/*#__PURE__*/React__default.createElement(RecordingAnimation, null)))))), messageToEdit && (/*#__PURE__*/React__default.createElement(EditReplyMessageCont, {
34737
34744
  width: replyEditMessageContainerWidth,
34738
34745
  borderRadius: replyEditMessageContainerBorderRadius,
34739
34746
  left: replyEditMessageContainerLeftPosition,
@@ -34938,10 +34945,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34938
34945
  showRecording: showRecording
34939
34946
  }))))))))));
34940
34947
  };
34941
- var SendMessageWrapper = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n"])), function (props) {
34948
+ var SendMessageWrapper = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n"])), function (props) {
34942
34949
  return props.backgroundColor;
34943
34950
  });
34944
- var Container$k = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n margin: ", ";\n border: ", ";\n border-radius: ", ";\n position: relative;\n padding: ", ";\n\n & span.rdw-suggestion-dropdown {\n position: absolute;\n bottom: 100%;\n height: 160px;\n min-width: 150px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 6px 12px;\n border: 1px solid #ccc;\n background: #fff;\n z-index: 99;\n }\n\n & .text_formatting_toolbar {\n display: ", ";\n position: fixed;\n top: ", ";\n left: ", ";\n }\n\n & .rdw-suggestion-option-active {\n background-color: rgb(243, 245, 248);\n }\n\n & .custom_editor {\n cursor: text;\n\n & .rdw-mention-link {\n color: ", ";\n }\n }\n"])), function (props) {
34951
+ var Container$k = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n margin: ", ";\n border: ", ";\n border-radius: ", ";\n position: relative;\n padding: ", ";\n\n & span.rdw-suggestion-dropdown {\n position: absolute;\n bottom: 100%;\n height: 160px;\n min-width: 150px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 6px 12px;\n border: 1px solid #ccc;\n background: #fff;\n z-index: 99;\n }\n\n & .text_formatting_toolbar {\n display: ", ";\n position: fixed;\n top: ", ";\n left: ", ";\n }\n\n & .rdw-suggestion-option-active {\n background-color: rgb(243, 245, 248);\n }\n\n & .custom_editor {\n cursor: text;\n\n & .rdw-mention-link {\n color: ", ";\n }\n }\n"])), function (props) {
34945
34952
  return props.margin || '30px 0 16px';
34946
34953
  }, function (props) {
34947
34954
  return props.border || '';
@@ -34958,7 +34965,7 @@ var Container$k = styled.div(_templateObject2$C || (_templateObject2$C = _tagged
34958
34965
  }, function (props) {
34959
34966
  return props.mentionColor;
34960
34967
  });
34961
- var EditReplyMessageCont = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n left: ", ";\n bottom: ", ";\n width: ", ";\n border-radius: ", ";\n padding: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n color: ", ";\n background-color: ", ";\n z-index: 19;\n box-sizing: content-box;\n"])), function (props) {
34968
+ var EditReplyMessageCont = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n position: relative;\n left: ", ";\n bottom: ", ";\n width: ", ";\n border-radius: ", ";\n padding: ", ";\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n color: ", ";\n background-color: ", ";\n z-index: 19;\n box-sizing: content-box;\n"])), function (props) {
34962
34969
  return props.left || '0';
34963
34970
  }, function (props) {
34964
34971
  return props.bottom || '0';
@@ -35049,7 +35056,7 @@ var SendMessageButton = styled.span(_templateObject14$2 || (_templateObject14$2
35049
35056
  var AudioCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n width: 100%;\n justify-content: flex-end;\n"])));
35050
35057
  var ChosenAttachments = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px 16px 14px;\n overflow-x: auto;\n\n & ", " {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n object-fit: cover;\n }\n\n & ", " {\n width: 240px;\n padding: 5px 12px;\n border-radius: 8px;\n height: 50px;\n }\n"])), AttachmentImg$1, AttachmentFile$1);
35051
35058
  var TypingIndicator$1 = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 100%;\n left: 16px;\n"])));
35052
- var TypingIndicatorCont = styled.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n"])));
35059
+ var TypingIndicatorCont = styled.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n gap: 4px;\n"])));
35053
35060
  var TypingFrom = styled.h5(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35054
35061
  return props.color;
35055
35062
  });
@@ -35282,7 +35289,7 @@ function SvgUnpin(props) {
35282
35289
  })));
35283
35290
  }
35284
35291
 
35285
- var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
35292
+ var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
35286
35293
  var Actions = function Actions(_ref) {
35287
35294
  var _channel$metadata;
35288
35295
  var channel = _ref.channel,
@@ -35741,11 +35748,11 @@ var Actions = function Actions(_ref) {
35741
35748
  title: popupTitle
35742
35749
  })));
35743
35750
  };
35744
- var Container$l = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n padding: 10px 16px;\n border-bottom: 6px solid ", ";\n]"])), function (props) {
35751
+ var Container$l = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n padding: 10px 16px;\n border-bottom: 6px solid ", ";\n]"])), function (props) {
35745
35752
  return props.borderColor;
35746
35753
  });
35747
- var ActionHeader = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 25px 0 22px;\n cursor: pointer;\n"])));
35748
- var MenuTriggerIcon = styled.span(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n transition: all 0.2s;\n ", "\n"])), function (props) {
35754
+ var ActionHeader = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 25px 0 22px;\n cursor: pointer;\n"])));
35755
+ var MenuTriggerIcon = styled.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n transition: all 0.2s;\n ", "\n"])), function (props) {
35749
35756
  return !props.isOpen && ' transform: rotate(-90deg);';
35750
35757
  });
35751
35758
  var ActionsMenu = styled.ul(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
@@ -35835,7 +35842,7 @@ function SvgMoreVert(props) {
35835
35842
  })));
35836
35843
  }
35837
35844
 
35838
- var _templateObject$J, _templateObject2$E, _templateObject3$x;
35845
+ var _templateObject$K, _templateObject2$F, _templateObject3$y;
35839
35846
  var ChangeMemberRole = function ChangeMemberRole(_ref) {
35840
35847
  var theme = _ref.theme,
35841
35848
  channelId = _ref.channelId,
@@ -35931,14 +35938,14 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
35931
35938
  onClick: handleSave
35932
35939
  }, "Save"))));
35933
35940
  };
35934
- var RolesSelect = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
35935
- var RoleLabel = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n margin: 20px 0 8px;\n color: ", ";\n"])), function (_ref2) {
35941
+ var RolesSelect = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
35942
+ var RoleLabel = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n margin: 20px 0 8px;\n color: ", ";\n"])), function (_ref2) {
35936
35943
  var color = _ref2.color;
35937
35944
  return color;
35938
35945
  });
35939
- var RoleSpan = styled.span(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n text-transform: capitalize;\n"])));
35946
+ var RoleSpan = styled.span(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n text-transform: capitalize;\n"])));
35940
35947
 
35941
- var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$f;
35948
+ var _templateObject$L, _templateObject2$G, _templateObject3$z, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$f;
35942
35949
  var Members = function Members(_ref) {
35943
35950
  var channel = _ref.channel,
35944
35951
  theme = _ref.theme,
@@ -36228,9 +36235,9 @@ var Members = function Members(_ref) {
36228
36235
  toggleCreatePopup: handleAddMemberPopup
36229
36236
  })));
36230
36237
  };
36231
- var Container$m = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose([""])));
36232
- var ActionsMenu$1 = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: all 0.2s;\n"])));
36233
- var MemberNamePresence = styled.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 84px);\n\n & > ", " {\n display: block;\n }\n"])), SubTitle);
36238
+ var Container$m = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose([""])));
36239
+ var ActionsMenu$1 = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: all 0.2s;\n"])));
36240
+ var MemberNamePresence = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 84px);\n\n & > ", " {\n display: block;\n }\n"])), SubTitle);
36234
36241
  var MemberNameWrapper = styled.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
36235
36242
  var MemberName$3 = styled.h4(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
36236
36243
  var EditMemberIcon = styled.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 15px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
@@ -36250,7 +36257,7 @@ var RoleBadge = styled.span(_templateObject9$f || (_templateObject9$f = _taggedT
36250
36257
  return props.color || colors.primary;
36251
36258
  });
36252
36259
 
36253
- var _templateObject$L, _templateObject2$G;
36260
+ var _templateObject$M, _templateObject2$H;
36254
36261
  var Media = function Media(_ref) {
36255
36262
  var channel = _ref.channel;
36256
36263
  var attachments = useSelector(activeTabAttachmentsSelector, shallowEqual) || [];
@@ -36294,8 +36301,8 @@ var Media = function Media(_ref) {
36294
36301
  currentMediaFile: mediaFile
36295
36302
  })));
36296
36303
  };
36297
- var Container$n = styled.div(_templateObject$L || (_templateObject$L = _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"])));
36298
- var MediaItem = styled.div(_templateObject2$G || (_templateObject2$G = _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"])));
36304
+ var Container$n = styled.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"])));
36305
+ var MediaItem = styled.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"])));
36299
36306
 
36300
36307
  var _rect$3, _path$1m;
36301
36308
  function _extends$1q() {
@@ -36351,7 +36358,7 @@ function SvgDownloadFile(props) {
36351
36358
  })));
36352
36359
  }
36353
36360
 
36354
- var _templateObject$M, _templateObject2$H, _templateObject3$z, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i;
36361
+ var _templateObject$N, _templateObject2$I, _templateObject3$A, _templateObject4$u, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i;
36355
36362
  var Files = function Files(_ref) {
36356
36363
  var channelId = _ref.channelId,
36357
36364
  theme = _ref.theme,
@@ -36466,13 +36473,13 @@ var Files = function Files(_ref) {
36466
36473
  }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null)));
36467
36474
  }));
36468
36475
  };
36469
- var Container$o = styled.ul(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
36470
- var DownloadWrapper = styled.a(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n visibility: ", ";\n padding: 5px 6px;\n position: absolute;\n top: 25%;\n right: 16px;\n cursor: pointer;\n & > svg {\n color: ", ";\n }\n"])), function (props) {
36476
+ var Container$o = styled.ul(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
36477
+ var DownloadWrapper = styled.a(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n text-decoration: none;\n visibility: ", ";\n padding: 5px 6px;\n position: absolute;\n top: 25%;\n right: 16px;\n cursor: pointer;\n & > svg {\n color: ", ";\n }\n"])), function (props) {
36471
36478
  return props.visible ? 'visible' : 'hidden';
36472
36479
  }, function (props) {
36473
36480
  return props.iconColor;
36474
36481
  });
36475
- var ProgressWrapper$2 = styled.span(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 20px;\n height: 20px;\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])));
36482
+ var ProgressWrapper$2 = styled.span(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: 20px;\n height: 20px;\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])));
36476
36483
  var FileIconCont = styled.span(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n\n & > svg {\n width: 40px;\n height: 40px;\n color: ", ";\n }\n"])), function (props) {
36477
36484
  return props.iconColor;
36478
36485
  });
@@ -36522,7 +36529,7 @@ function SvgLinkIcon(props) {
36522
36529
  })));
36523
36530
  }
36524
36531
 
36525
- var _templateObject$N, _templateObject2$I, _templateObject3$A, _templateObject4$v, _templateObject5$r;
36532
+ var _templateObject$O, _templateObject2$J, _templateObject3$B, _templateObject4$v, _templateObject5$r;
36526
36533
  var LinkItem = function LinkItem(_ref) {
36527
36534
  var link = _ref.link,
36528
36535
  linkPreviewIcon = _ref.linkPreviewIcon,
@@ -36549,13 +36556,13 @@ var LinkItem = function LinkItem(_ref) {
36549
36556
  color: linkPreviewColor || textPrimary
36550
36557
  }, link))));
36551
36558
  };
36552
- var LinkIconCont = styled.span(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36559
+ var LinkIconCont = styled.span(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36553
36560
  return props.color;
36554
36561
  });
36555
- var LinkHoverIconCont = styled.span(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n display: none;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36562
+ var LinkHoverIconCont = styled.span(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n display: none;\n > svg {\n color: ", ";\n }\n"])), function (props) {
36556
36563
  return props.color;
36557
36564
  });
36558
- var LinkInfoCont = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n width: calc(100% - 40px);\n"])));
36565
+ var LinkInfoCont = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n width: calc(100% - 40px);\n"])));
36559
36566
  var FileItem$1 = styled.li(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n a {\n display: flex;\n align-items: center;\n text-decoration: none;\n }\n &:hover {\n background-color: ", ";\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36560
36567
  return props.hoverBackgroundColor || colors.gray0;
36561
36568
  }, LinkIconCont, LinkHoverIconCont);
@@ -36563,7 +36570,7 @@ var LinkUrl = styled.span(_templateObject5$r || (_templateObject5$r = _taggedTem
36563
36570
  return props.color;
36564
36571
  });
36565
36572
 
36566
- var _templateObject$O;
36573
+ var _templateObject$P;
36567
36574
  var Links = function Links(_ref) {
36568
36575
  var channelId = _ref.channelId,
36569
36576
  linkPreviewIcon = _ref.linkPreviewIcon,
@@ -36588,7 +36595,7 @@ var Links = function Links(_ref) {
36588
36595
  });
36589
36596
  }));
36590
36597
  };
36591
- var Container$p = styled.ul(_templateObject$O || (_templateObject$O = _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"])));
36598
+ var Container$p = styled.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"])));
36592
36599
 
36593
36600
  var _rect$5, _circle$8, _path$1p;
36594
36601
  function _extends$1t() {
@@ -36718,7 +36725,7 @@ function SvgVoicePreviewPauseHover(props) {
36718
36725
  })));
36719
36726
  }
36720
36727
 
36721
- var _templateObject$P, _templateObject2$J, _templateObject3$B, _templateObject4$w, _templateObject5$s, _templateObject6$n, _templateObject7$l, _templateObject8$j;
36728
+ var _templateObject$Q, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$n, _templateObject7$l, _templateObject8$j;
36722
36729
  var VoiceItem = function VoiceItem(_ref) {
36723
36730
  var file = _ref.file,
36724
36731
  voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -36836,9 +36843,9 @@ var VoiceItem = function VoiceItem(_ref) {
36836
36843
  type: 'audio/mpeg'
36837
36844
  })));
36838
36845
  };
36839
- var FileIconCont$1 = styled.span(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36840
- var FileHoverIconCont$1 = styled.span(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36841
- var FileItem$2 = styled.li(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36846
+ var FileIconCont$1 = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n"])));
36847
+ var FileHoverIconCont$1 = styled.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n"])));
36848
+ var FileItem$2 = styled.li(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n padding: 9px 16px;\n display: flex;\n align-items: center;\n text-decoration: none;\n\n &:hover {\n background-color: ", ";\n }\n div {\n margin-left: 12px;\n width: 100%;\n }\n img {\n width: 42px;\n height: 42px;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n border-radius: 6px;\n }\n\n &.isHover {\n & ", " {\n display: none;\n }\n & ", " {\n display: inline-flex;\n }\n }\n"])), function (props) {
36842
36849
  return props.hoverBackgroundColor || colors.gray0;
36843
36850
  }, FileIconCont$1, FileHoverIconCont$1);
36844
36851
  var AudioInfo = styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
@@ -36853,7 +36860,7 @@ var AudioSendTime = styled.span(_templateObject7$l || (_templateObject7$l = _tag
36853
36860
  });
36854
36861
  var Audio = styled.audio(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
36855
36862
 
36856
- var _templateObject$Q;
36863
+ var _templateObject$R;
36857
36864
  var Voices = function Voices(_ref) {
36858
36865
  var channelId = _ref.channelId,
36859
36866
  voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -36884,9 +36891,9 @@ var Voices = function Voices(_ref) {
36884
36891
  });
36885
36892
  }));
36886
36893
  };
36887
- var Container$q = styled.ul(_templateObject$Q || (_templateObject$Q = _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"])));
36894
+ var Container$q = styled.ul(_templateObject$R || (_templateObject$R = _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"])));
36888
36895
 
36889
- var _templateObject$R, _templateObject2$K;
36896
+ var _templateObject$S, _templateObject2$L;
36890
36897
  var DetailsTab = function DetailsTab(_ref) {
36891
36898
  var channel = _ref.channel,
36892
36899
  theme = _ref.theme,
@@ -37034,8 +37041,8 @@ var DetailsTab = function DetailsTab(_ref) {
37034
37041
  voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor
37035
37042
  })));
37036
37043
  };
37037
- var Container$r = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n //border-top: 1px solid ", ";\n min-height: calc(100vh - 64px);\n"])), colors.gray1);
37038
- var DetailsTabHeader = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37044
+ var Container$r = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n //border-top: 1px solid ", ";\n min-height: calc(100vh - 64px);\n"])), colors.gray1);
37045
+ var DetailsTabHeader = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n padding: 0 20px;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37039
37046
  return props.borderColor;
37040
37047
  }, function (props) {
37041
37048
  return props.backgroundColor || 'transparent';
@@ -37053,16 +37060,16 @@ var DetailsTabHeader = styled.div(_templateObject2$K || (_templateObject2$K = _t
37053
37060
  return props.activeTabColor || colors.primary;
37054
37061
  });
37055
37062
 
37056
- var _templateObject$S, _templateObject2$L, _templateObject3$C, _templateObject4$x;
37057
- var Container$s = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n ", ";\n height: ", ";\n position: absolute;\n padding: 24px 16px;\n background-color: ", ";\n z-index: 25;\n"])), function (props) {
37063
+ var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$x;
37064
+ var Container$s = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n ", ";\n height: ", ";\n position: absolute;\n padding: 24px 16px;\n background-color: ", ";\n z-index: 25;\n"])), function (props) {
37058
37065
  return props.active ? 'display: block' : 'display: none';
37059
37066
  }, function (props) {
37060
37067
  return "calc(100vh - " + (props.heightOffset ? props.heightOffset + 48 : 48) + "px)";
37061
37068
  }, function (props) {
37062
37069
  return props.backgroundColor || colors.white;
37063
37070
  });
37064
- var AvatarCont = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: 4px;\n\n &::after {\n content: '';\n position: absolute;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.4);\n }\n .dropdown-body {\n top: inherit;\n right: inherit;\n bottom: -90px;\n }\n"])));
37065
- var DropDownWrapper = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 4;\n width: 40px;\n height: 40px;\n"])));
37071
+ var AvatarCont = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: 4px;\n\n &::after {\n content: '';\n position: absolute;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.4);\n }\n .dropdown-body {\n top: inherit;\n right: inherit;\n bottom: -90px;\n }\n"])));
37072
+ var DropDownWrapper = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 4;\n width: 40px;\n height: 40px;\n"])));
37066
37073
  var EditChannelFooter = styled(ButtonBlock)(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n margin-top: 24px;\n\n & > button {\n margin-left: 12px;\n }\n"])));
37067
37074
  var EditChannel = function EditChannel(_ref) {
37068
37075
  var channel = _ref.channel,
@@ -37312,7 +37319,7 @@ var EditChannel = function EditChannel(_ref) {
37312
37319
  })));
37313
37320
  };
37314
37321
 
37315
- var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
37322
+ var _templateObject$U, _templateObject2$N, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
37316
37323
  var Details = function Details(_ref) {
37317
37324
  var _activeChannel$metada;
37318
37325
  var detailsTitleText = _ref.detailsTitleText,
@@ -37679,17 +37686,17 @@ var Details = function Details(_ref) {
37679
37686
  onTabChange: handleTabChange
37680
37687
  }))));
37681
37688
  };
37682
- var Container$t = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n flex: 0 0 auto;\n width: 0;\n border-left: 1px solid ", ";\n //transition: all 0.1s;\n ", "\n background-color: ", ";\n}\n"])), function (props) {
37689
+ var Container$t = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n flex: 0 0 auto;\n width: 0;\n border-left: 1px solid ", ";\n //transition: all 0.1s;\n ", "\n background-color: ", ";\n}\n"])), function (props) {
37683
37690
  return props.borderColor;
37684
37691
  }, function (props) {
37685
37692
  return props.mounted && " width: " + (props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px') + ";";
37686
37693
  }, function (props) {
37687
37694
  return props.backgroundColor;
37688
37695
  });
37689
- var ChannelDetailsHeader = styled.div(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px;\n position: relative;\n height: 64px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n & svg {\n cursor: pointer;\n }\n"])), function (props) {
37696
+ var ChannelDetailsHeader = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px;\n position: relative;\n height: 64px;\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n & svg {\n cursor: pointer;\n }\n"])), function (props) {
37690
37697
  return props.borderColor;
37691
37698
  });
37692
- var ChatDetails = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose(["\n //position: relative;\n width: ", ";\n //height: ", ";\n height: ", ";\n overflow-y: auto;\n"])), function (props) {
37699
+ var ChatDetails = styled.div(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose(["\n //position: relative;\n width: ", ";\n //height: ", ";\n height: ", ";\n overflow-y: auto;\n"])), function (props) {
37693
37700
  return props.size === 'small' ? '300px' : props.size === 'medium' ? '350px' : '400px';
37694
37701
  }, function (props) {
37695
37702
  return props.height ? "calc(100vh - " + props.heightOffset + "px)" : '100vh';
@@ -37726,7 +37733,7 @@ var ChannelName$1 = styled(SectionHeader)(_templateObject0$e || (_templateObject
37726
37733
  var ChannelNameWrapper = styled.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n"])));
37727
37734
  var EditButton = styled.span(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n margin-left: 6px;\n cursor: pointer;\n color: #b2b6be;\n"])));
37728
37735
 
37729
- var _templateObject$U;
37736
+ var _templateObject$V;
37730
37737
  var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
37731
37738
  var _ref$size = _ref.size,
37732
37739
  size = _ref$size === void 0 ? 'large' : _ref$size,
@@ -37953,7 +37960,7 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
37953
37960
  tabItemsMinWidth: tabItemsMinWidth
37954
37961
  })));
37955
37962
  };
37956
- var DetailsWrapper = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose([""])));
37963
+ var DetailsWrapper = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
37957
37964
 
37958
37965
  var _path$1t;
37959
37966
  function _extends$1x() {
@@ -37977,7 +37984,7 @@ function SvgChevronDown(props) {
37977
37984
  })));
37978
37985
  }
37979
37986
 
37980
- var _templateObject$V, _templateObject2$N;
37987
+ var _templateObject$W, _templateObject2$O;
37981
37988
  var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
37982
37989
  var buttonIcon = _ref.buttonIcon,
37983
37990
  buttonWidth = _ref.buttonWidth,
@@ -38026,14 +38033,14 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
38026
38033
  isMuted: channel.muted
38027
38034
  }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')), buttonIcon || /*#__PURE__*/React__default.createElement(SvgChevronDown, null))));
38028
38035
  };
38029
- var BottomButton = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n margin-right: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 50px;\n width: 48px;\n height: 48px;\n cursor: pointer;\n z-index: 14;\n\n & > svg {\n color: rgba(129, 140, 153, 1);\n }\n\n & > span {\n bottom: 32px;\n right: 0;\n }\n"])), function (props) {
38036
+ var BottomButton = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n margin-right: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 50px;\n width: 48px;\n height: 48px;\n cursor: pointer;\n z-index: 14;\n\n & > svg {\n color: rgba(129, 140, 153, 1);\n }\n\n & > span {\n bottom: 32px;\n right: 0;\n }\n"])), function (props) {
38030
38037
  return props.bottomOffset + (props.bottomPosition == undefined ? 45 : props.bottomPosition) + "px";
38031
38038
  }, function (props) {
38032
38039
  return (props.rightPosition == undefined ? 16 : props.rightPosition) + "px";
38033
38040
  }, function (props) {
38034
38041
  return props.backgroundColor;
38035
38042
  });
38036
- var UnreadCount$1 = styled.span(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 11px;\n right: 16px;\n flex: 0 0 auto;\n margin-left: auto;\n background-color: ", ";\n padding: 0 4px;\n font-size: ", ";\n line-height: 20px;\n min-width: ", ";\n height: ", ";\n text-align: center;\n font-weight: 500;\n color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n\n /*", "*/\n"])), function (props) {
38043
+ var UnreadCount$1 = styled.span(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 11px;\n right: 16px;\n flex: 0 0 auto;\n margin-left: auto;\n background-color: ", ";\n padding: 0 4px;\n font-size: ", ";\n line-height: 20px;\n min-width: ", ";\n height: ", ";\n text-align: center;\n font-weight: 500;\n color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n\n /*", "*/\n"])), function (props) {
38037
38044
  return props.backgroundColor || colors.primary;
38038
38045
  }, function (props) {
38039
38046
  return props.fontSize || '13px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.6.6-beta.7",
3
+ "version": "1.6.7",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",