sceyt-chat-react-uikit 1.6.5-beta.4 → 1.6.5-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.js +1955 -165
  2. package/index.modern.js +2194 -404
  3. package/package.json +1 -1
package/index.modern.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, useRef, useEffect, useLayoutEffect, useState, useMemo, useCallback, memo, createRef } from 'react';
1
+ import React__default, { createElement as createElement$1, useRef, useEffect, useLayoutEffect, useState, useMemo, useCallback, memo, createRef } from 'react';
2
2
  import { useSelector, useDispatch, shallowEqual, Provider } from 'react-redux';
3
3
  import log from 'loglevel';
4
4
  import createSagaMiddleware, { eventChannel } from 'redux-saga';
@@ -10602,13 +10602,13 @@ function _extends$1() {
10602
10602
  }, _extends$1.apply(null, arguments);
10603
10603
  }
10604
10604
  function SvgTicksRead(props) {
10605
- return /*#__PURE__*/createElement("svg", _extends$1({
10605
+ return /*#__PURE__*/createElement$1("svg", _extends$1({
10606
10606
  width: 16,
10607
10607
  height: 16,
10608
10608
  viewBox: "0 0 16.01 16.01",
10609
10609
  fill: "none",
10610
10610
  xmlns: "http://www.w3.org/2000/svg"
10611
- }, props), _path || (_path = /*#__PURE__*/createElement("path", {
10611
+ }, props), _path || (_path = /*#__PURE__*/createElement$1("path", {
10612
10612
  fillRule: "evenodd",
10613
10613
  clipRule: "evenodd",
10614
10614
  d: "M10.983 3.748a.842.842 0 010 1.19l-6.737 6.737a.842.842 0 01-1.19 0L.245 8.867a.842.842 0 111.192-1.191L3.65 9.889l6.141-6.141a.842.842 0 011.191 0zM15.753 3.748a.842.842 0 010 1.19l-6.736 6.737a.842.842 0 01-1.191-1.19l6.736-6.737a.842.842 0 011.191 0z",
@@ -10627,13 +10627,13 @@ function _extends$2() {
10627
10627
  }, _extends$2.apply(null, arguments);
10628
10628
  }
10629
10629
  function SvgTicksDelivered(props) {
10630
- return /*#__PURE__*/createElement("svg", _extends$2({
10630
+ return /*#__PURE__*/createElement$1("svg", _extends$2({
10631
10631
  width: 16,
10632
10632
  height: 16,
10633
10633
  viewBox: "0 0 16.01 16.01",
10634
10634
  fill: "none",
10635
10635
  xmlns: "http://www.w3.org/2000/svg"
10636
- }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
10636
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement$1("path", {
10637
10637
  fillRule: "evenodd",
10638
10638
  clipRule: "evenodd",
10639
10639
  d: "M10.983 3.748a.842.842 0 010 1.19l-6.737 6.737a.842.842 0 01-1.19 0L.245 8.867a.842.842 0 111.192-1.191L3.65 9.889l6.141-6.141a.842.842 0 011.191 0zM15.753 3.748a.842.842 0 010 1.19l-6.736 6.737a.842.842 0 01-1.191-1.19l6.736-6.737a.842.842 0 011.191 0z",
@@ -10652,13 +10652,13 @@ function _extends$3() {
10652
10652
  }, _extends$3.apply(null, arguments);
10653
10653
  }
10654
10654
  function SvgTicksSent(props) {
10655
- return /*#__PURE__*/createElement("svg", _extends$3({
10655
+ return /*#__PURE__*/createElement$1("svg", _extends$3({
10656
10656
  width: 16,
10657
10657
  height: 16,
10658
10658
  viewBox: "0 0 16.01 16.01",
10659
10659
  fill: "none",
10660
10660
  xmlns: "http://www.w3.org/2000/svg"
10661
- }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
10661
+ }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement$1("path", {
10662
10662
  fillRule: "evenodd",
10663
10663
  clipRule: "evenodd",
10664
10664
  d: "M13.65 4.234a.772.772 0 010 1.132l-6.737 6.4a.874.874 0 01-1.19 0l-2.81-2.669a.772.772 0 010-1.13.874.874 0 011.191 0l2.214 2.102 6.14-5.835a.874.874 0 011.192 0z",
@@ -10677,13 +10677,13 @@ function _extends$4() {
10677
10677
  }, _extends$4.apply(null, arguments);
10678
10678
  }
10679
10679
  function SvgPendingIcon(props) {
10680
- return /*#__PURE__*/createElement("svg", _extends$4({
10680
+ return /*#__PURE__*/createElement$1("svg", _extends$4({
10681
10681
  width: 16,
10682
10682
  height: 16,
10683
10683
  viewBox: "0 0 16.01 16.01",
10684
10684
  fill: "none",
10685
10685
  xmlns: "http://www.w3.org/2000/svg"
10686
- }, props), _path$3 || (_path$3 = /*#__PURE__*/createElement("path", {
10686
+ }, props), _path$3 || (_path$3 = /*#__PURE__*/createElement$1("path", {
10687
10687
  fillRule: "evenodd",
10688
10688
  clipRule: "evenodd",
10689
10689
  d: "M8 3.734a4.267 4.267 0 100 8.533 4.267 4.267 0 000-8.533zM2.667 8a5.333 5.333 0 1110.666 0A5.333 5.333 0 012.667 8zM8 4.667c.295 0 .533.239.533.533v2.267H10.8a.533.533 0 010 1.067H8A.533.533 0 017.467 8V5.2c0-.294.239-.533.533-.533z",
@@ -10710,13 +10710,13 @@ function _extends$5() {
10710
10710
  }, _extends$5.apply(null, arguments);
10711
10711
  }
10712
10712
  function SvgClose(props) {
10713
- return /*#__PURE__*/createElement("svg", _extends$5({
10713
+ return /*#__PURE__*/createElement$1("svg", _extends$5({
10714
10714
  width: 12,
10715
10715
  height: 12,
10716
10716
  viewBox: "0 0 12.01 12.01",
10717
10717
  fill: "none",
10718
10718
  xmlns: "http://www.w3.org/2000/svg"
10719
- }, props), _path$4 || (_path$4 = /*#__PURE__*/createElement("path", {
10719
+ }, props), _path$4 || (_path$4 = /*#__PURE__*/createElement$1("path", {
10720
10720
  d: "M11 1L1 11M1 1l10 10",
10721
10721
  stroke: "currentColor",
10722
10722
  strokeWidth: 1.6,
@@ -10736,12 +10736,12 @@ function _extends$6() {
10736
10736
  }, _extends$6.apply(null, arguments);
10737
10737
  }
10738
10738
  function SvgSearch(props) {
10739
- return /*#__PURE__*/createElement("svg", _extends$6({
10739
+ return /*#__PURE__*/createElement$1("svg", _extends$6({
10740
10740
  width: 14,
10741
10741
  height: 14,
10742
10742
  fill: "none",
10743
10743
  xmlns: "http://www.w3.org/2000/svg"
10744
- }, props), _path$5 || (_path$5 = /*#__PURE__*/createElement("path", {
10744
+ }, props), _path$5 || (_path$5 = /*#__PURE__*/createElement$1("path", {
10745
10745
  fillRule: "evenodd",
10746
10746
  clipRule: "evenodd",
10747
10747
  d: "M13.743 12.574L9.91 8.74a5.425 5.425 0 001.05-3.232A5.531 5.531 0 005.46 0 5.436 5.436 0 000 5.468a5.532 5.532 0 005.5 5.508 5.409 5.409 0 003.242-1.061l.004-.003 3.83 3.831a.827.827 0 101.167-1.169zM5.496 9.878a4.426 4.426 0 01-4.4-4.406 4.35 4.35 0 014.368-4.374 4.425 4.425 0 014.4 4.406 4.35 4.35 0 01-4.368 4.374z",
@@ -10937,7 +10937,7 @@ var CustomInput = styled.input(_templateObject10 || (_templateObject10 = _tagged
10937
10937
  }, function (props) {
10938
10938
  return props.color;
10939
10939
  }, function (props) {
10940
- return props.error ? "1px solid " + props.errorColor : colors.primary;
10940
+ return props.error ? "1px solid " + props.errorColor : 'transparent';
10941
10941
  }, function (props) {
10942
10942
  return props.error ? "1px solid " + colors.errorBlur : props.theme !== THEME.DARK ? "2px solid " + props.borderColor : 'none';
10943
10943
  }, colors.gray0, function (props) {
@@ -18796,13 +18796,13 @@ function _extends$7() {
18796
18796
  }, _extends$7.apply(null, arguments);
18797
18797
  }
18798
18798
  function SvgPicture(props) {
18799
- return /*#__PURE__*/createElement("svg", _extends$7({
18799
+ return /*#__PURE__*/createElement$1("svg", _extends$7({
18800
18800
  width: 18,
18801
18801
  height: 18,
18802
18802
  viewBox: "0 0 18.01 18.01",
18803
18803
  fill: "none",
18804
18804
  xmlns: "http://www.w3.org/2000/svg"
18805
- }, props), _path$6 || (_path$6 = /*#__PURE__*/createElement("path", {
18805
+ }, props), _path$6 || (_path$6 = /*#__PURE__*/createElement$1("path", {
18806
18806
  fillRule: "evenodd",
18807
18807
  clipRule: "evenodd",
18808
18808
  d: "M3.614 2.052C4.366 1.65 5.107 1.5 6.798 1.5h4.404c1.691 0 2.432.15 3.184.552.672.36 1.203.89 1.562 1.562.402.752.552 1.493.552 3.184v4.404c0 1.691-.15 2.432-.552 3.184a3.763 3.763 0 01-1.562 1.562c-.752.402-1.493.552-3.184.552H6.798c-1.691 0-2.432-.15-3.184-.552a3.764 3.764 0 01-1.562-1.562c-.402-.752-.552-1.493-.552-3.184V6.798c0-1.691.15-2.432.552-3.184.36-.672.89-1.203 1.562-1.562zm7.16 7.07a.297.297 0 01.482.004l3.04 4.193c.101.139.074.335-.06.44a.297.297 0 01-.183.062h-9.57a.309.309 0 01-.304-.314c0-.07.022-.137.064-.192l2.22-2.954a.297.297 0 01.473-.008l1.528 1.861 2.31-3.092zM5.785 6.857a1.071 1.071 0 100-2.143 1.071 1.071 0 000 2.143z",
@@ -18821,13 +18821,13 @@ function _extends$8() {
18821
18821
  }, _extends$8.apply(null, arguments);
18822
18822
  }
18823
18823
  function SvgVideoCall(props) {
18824
- return /*#__PURE__*/createElement("svg", _extends$8({
18824
+ return /*#__PURE__*/createElement$1("svg", _extends$8({
18825
18825
  width: 16,
18826
18826
  height: 16,
18827
18827
  viewBox: "0 0 16.01 16.01",
18828
18828
  fill: "none",
18829
18829
  xmlns: "http://www.w3.org/2000/svg"
18830
- }, props), _path$7 || (_path$7 = /*#__PURE__*/createElement("path", {
18830
+ }, props), _path$7 || (_path$7 = /*#__PURE__*/createElement$1("path", {
18831
18831
  d: "M.667 4.875C.667 3.839 1.507 3 2.542 3h6.875c1.036 0 1.875.84 1.875 1.875v6.25c0 1.036-.84 1.875-1.875 1.875H2.542a1.875 1.875 0 01-1.875-1.875v-6.25zM12.542 6.125l2.11-1.687a.625.625 0 011.015.488v6.149a.625.625 0 01-1.015.488l-2.11-1.688v-3.75z",
18832
18832
  fill: "CurrentColor"
18833
18833
  })));
@@ -18844,13 +18844,13 @@ function _extends$9() {
18844
18844
  }, _extends$9.apply(null, arguments);
18845
18845
  }
18846
18846
  function SvgChoseFile(props) {
18847
- return /*#__PURE__*/createElement("svg", _extends$9({
18847
+ return /*#__PURE__*/createElement$1("svg", _extends$9({
18848
18848
  width: 18,
18849
18849
  height: 18,
18850
18850
  viewBox: "0 0 18.01 18.01",
18851
18851
  fill: "none",
18852
18852
  xmlns: "http://www.w3.org/2000/svg"
18853
- }, props), _path$8 || (_path$8 = /*#__PURE__*/createElement("path", {
18853
+ }, props), _path$8 || (_path$8 = /*#__PURE__*/createElement$1("path", {
18854
18854
  fillRule: "evenodd",
18855
18855
  clipRule: "evenodd",
18856
18856
  d: "M3 3.75A2.25 2.25 0 015.25 1.5h7.5A2.25 2.25 0 0115 3.75v10.5a2.25 2.25 0 01-2.25 2.25h-7.5A2.25 2.25 0 013 14.25V3.75zm2.25 6.938c0-.311.252-.563.563-.563h6.375a.563.563 0 010 1.125H5.811a.563.563 0 01-.562-.563zm.563 2.062a.563.563 0 000 1.125h3.375a.563.563 0 000-1.125H5.812z",
@@ -18869,16 +18869,16 @@ function _extends$a() {
18869
18869
  }, _extends$a.apply(null, arguments);
18870
18870
  }
18871
18871
  function SvgVoiceIcon(props) {
18872
- return /*#__PURE__*/createElement("svg", _extends$a({
18872
+ return /*#__PURE__*/createElement$1("svg", _extends$a({
18873
18873
  width: 16,
18874
18874
  height: 16,
18875
18875
  viewBox: "0 0 17 17",
18876
18876
  fill: "none",
18877
18877
  xmlns: "http://www.w3.org/2000/svg"
18878
- }, props), _path$9 || (_path$9 = /*#__PURE__*/createElement("path", {
18878
+ }, props), _path$9 || (_path$9 = /*#__PURE__*/createElement$1("path", {
18879
18879
  d: "M5.5 3.5a2.5 2.5 0 015 0v4a2.5 2.5 0 01-5 0v-4zM7.375 13.125a.625.625 0 111.25 0v1.25a.625.625 0 11-1.25 0v-1.25zM14 7.125a.625.625 0 11-1.25 0 .625.625 0 011.25 0zM3.25 7.125a.625.625 0 11-1.25 0 .625.625 0 011.25 0z",
18880
18880
  fill: "CurrentColor"
18881
- })), _path2 || (_path2 = /*#__PURE__*/createElement("path", {
18881
+ })), _path2 || (_path2 = /*#__PURE__*/createElement$1("path", {
18882
18882
  d: "M8 13a6 6 0 006-6h-1.25a4.75 4.75 0 11-9.5 0H2a6 6 0 006 6z",
18883
18883
  fill: "CurrentColor"
18884
18884
  })));
@@ -18895,17 +18895,17 @@ function _extends$b() {
18895
18895
  }, _extends$b.apply(null, arguments);
18896
18896
  }
18897
18897
  function SvgUnreadMention(props) {
18898
- return /*#__PURE__*/createElement("svg", _extends$b({
18898
+ return /*#__PURE__*/createElement$1("svg", _extends$b({
18899
18899
  width: 20,
18900
18900
  height: 20,
18901
18901
  fill: "none",
18902
18902
  xmlns: "http://www.w3.org/2000/svg"
18903
- }, props), _rect || (_rect = /*#__PURE__*/createElement("rect", {
18903
+ }, props), _rect || (_rect = /*#__PURE__*/createElement$1("rect", {
18904
18904
  width: 20,
18905
18905
  height: 20,
18906
18906
  rx: 10,
18907
18907
  fill: "CurrentColor"
18908
- })), _path$a || (_path$a = /*#__PURE__*/createElement("path", {
18908
+ })), _path$a || (_path$a = /*#__PURE__*/createElement$1("path", {
18909
18909
  d: "M10.004 16.087c-1.13 0-2.117-.229-2.96-.686a4.778 4.778 0 01-1.954-1.947c-.46-.84-.69-1.82-.69-2.942v-.405c0-1.116.24-2.106.72-2.972A5.064 5.064 0 017.14 5.12c.867-.48 1.859-.72 2.975-.72h.059c1.042 0 1.975.216 2.798.646a4.839 4.839 0 011.932 1.784c.464.76.696 1.621.696 2.585v.368c0 .66-.108 1.242-.324 1.748-.216.506-.519.9-.907 1.183a2.221 2.221 0 01-1.342.424c-.457 0-.85-.096-1.18-.287-.329-.192-.526-.443-.59-.752h-.073a1.193 1.193 0 01-.325.527c-.162.16-.36.285-.593.376a2.002 2.002 0 01-.734.136c-.403 0-.754-.098-1.054-.295a1.9 1.9 0 01-.693-.84c-.162-.364-.244-.794-.244-1.29v-.738c0-.482.083-.902.247-1.26.165-.36.401-.635.708-.827a1.998 1.998 0 011.08-.287c.364 0 .684.09.959.269.275.18.457.414.546.704h.059v-.192c0-.196.054-.352.162-.468a.577.577 0 01.442-.173c.182 0 .327.058.435.173.108.116.162.272.162.468v2.95c0 .25.077.45.229.6.152.15.351.226.597.226.26 0 .49-.101.686-.303.197-.201.348-.488.453-.859.106-.37.159-.805.159-1.301V9.45c0-.772-.183-1.463-.55-2.072a3.826 3.826 0 00-1.526-1.43c-.651-.345-1.39-.517-2.215-.517h-.06c-.894 0-1.685.197-2.374.59a4.084 4.084 0 00-1.603 1.663c-.381.715-.572 1.537-.572 2.466v.317c0 .924.185 1.734.553 2.43.369.695.891 1.23 1.567 1.607.676.376 1.464.564 2.363.564h.06c.334 0 .749-.037 1.245-.11.26-.035.43-.052.51-.052.142 0 .26.043.353.129.094.086.14.195.14.328a.51.51 0 01-.118.34.646.646 0 01-.339.198c-.477.123-1.086.185-1.829.185h-.066zm-1.18-5.545c0 .496.095.874.284 1.132.19.258.468.387.837.387.364 0 .642-.124.833-.373.192-.248.288-.608.288-1.08v-.597c0-.433-.102-.774-.306-1.025-.204-.25-.48-.376-.83-.376-.349 0-.62.132-.814.395-.195.262-.292.63-.292 1.102v.435z",
18910
18910
  fill: "#fff"
18911
18911
  })));
@@ -18922,13 +18922,13 @@ function _extends$c() {
18922
18922
  }, _extends$c.apply(null, arguments);
18923
18923
  }
18924
18924
  function SvgUnmuteNotifications(props) {
18925
- return /*#__PURE__*/createElement("svg", _extends$c({
18925
+ return /*#__PURE__*/createElement$1("svg", _extends$c({
18926
18926
  width: 20,
18927
18927
  height: 20,
18928
18928
  viewBox: "0 0 20.01 20.01",
18929
18929
  fill: "none",
18930
18930
  xmlns: "http://www.w3.org/2000/svg"
18931
- }, props), _path$b || (_path$b = /*#__PURE__*/createElement("path", {
18931
+ }, props), _path$b || (_path$b = /*#__PURE__*/createElement$1("path", {
18932
18932
  fillRule: "evenodd",
18933
18933
  clipRule: "evenodd",
18934
18934
  d: "M10.246 1.75c3.575 0 5.924 2.96 5.924 6.47v1.375c0 .214.125.462.497.851.406.427.872.803 1.203 1.297.273.407.458.896.447 1.45a.773.773 0 01-1.546-.03c.014-.701-.8-1.205-1.224-1.65-.407-.427-.924-1.06-.924-1.918V8.22c0-2.845-1.833-4.924-4.377-4.924a4.15 4.15 0 00-2.254.632.773.773 0 01-.826-1.307 5.727 5.727 0 013.08-.871zM13.98 15.325c-.54 2.003-1.83 3.092-3.738 3.092s-3.198-1.089-3.738-3.093H4.86c-1.278 0-2.118-.432-2.493-1.212-.164-.341-.201-.618-.201-.998 0-1.111.809-1.853 1.528-2.595.453-.467.62-.728.62-.924 0-1.283-.033-2.55.39-3.784L2.737 3.843A.773.773 0 113.83 2.75l13.917 13.917a.773.773 0 11-1.093 1.093l-2.436-2.436h-.238zm-5.856 0h4.236c-.391 1.071-1.066 1.545-2.118 1.545-1.052 0-1.727-.474-2.118-1.545zM5.86 9.595c0-.84-.052-1.694.105-2.522l6.705 6.704H4.86c-.727 0-1.007-.143-1.1-.335-.287-.599.448-1.241.803-1.601.62-.628 1.297-1.304 1.297-2.246z",
@@ -18947,13 +18947,13 @@ function _extends$d() {
18947
18947
  }, _extends$d.apply(null, arguments);
18948
18948
  }
18949
18949
  function SvgPin(props) {
18950
- return /*#__PURE__*/createElement("svg", _extends$d({
18950
+ return /*#__PURE__*/createElement$1("svg", _extends$d({
18951
18951
  width: 20,
18952
18952
  height: 21,
18953
18953
  viewBox: "0 0 20.01 21.01",
18954
18954
  fill: "none",
18955
18955
  xmlns: "http://www.w3.org/2000/svg"
18956
- }, props), _path$c || (_path$c = /*#__PURE__*/createElement("path", {
18956
+ }, props), _path$c || (_path$c = /*#__PURE__*/createElement$1("path", {
18957
18957
  d: "M7.402 14.217l-4.356 4.356c-.726.726-1.816-.363-1.09-1.089l4.357-4.357L2.81 9.623a1.059 1.059 0 01.667-1.804l4.258-.328a.385.385 0 00.243-.111l2.718-2.718a.385.385 0 00.105-.197l.34-1.7a.77.77 0 011.3-.393l5.717 5.718a.77.77 0 01-.393 1.3l-1.7.34a.385.385 0 00-.196.105l-2.718 2.718a.385.385 0 00-.112.243l-.327 4.257a1.059 1.059 0 01-1.805.668l-3.504-3.504zm4.1-1.54c.036-.458.234-.888.559-1.213l2.718-2.718c.269-.269.611-.452.984-.527l.288-.057-3.683-3.683-.058.288a1.926 1.926 0 01-.526.984L9.066 8.469a1.925 1.925 0 01-1.214.558l-3.214.247 6.617 6.618.248-3.214z",
18958
18958
  fill: "CurrentColor"
18959
18959
  })));
@@ -18970,24 +18970,24 @@ function _extends$e() {
18970
18970
  }, _extends$e.apply(null, arguments);
18971
18971
  }
18972
18972
  function SvgDeletedUserAvatar(props) {
18973
- return /*#__PURE__*/createElement("svg", _extends$e({
18973
+ return /*#__PURE__*/createElement$1("svg", _extends$e({
18974
18974
  width: 51,
18975
18975
  height: 51,
18976
18976
  viewBox: "0 0 51.01 51.01",
18977
18977
  fill: "none",
18978
18978
  xmlns: "http://www.w3.org/2000/svg"
18979
- }, props), _path$d || (_path$d = /*#__PURE__*/createElement("path", {
18979
+ }, props), _path$d || (_path$d = /*#__PURE__*/createElement$1("path", {
18980
18980
  fillRule: "evenodd",
18981
18981
  clipRule: "evenodd",
18982
18982
  d: "M25 50c13.807 0 25-11.193 25-25S38.807 0 25 0 0 11.193 0 25s11.193 25 25 25z",
18983
18983
  fill: "CurrentColor"
18984
- })), _path2$1 || (_path2$1 = /*#__PURE__*/createElement("path", {
18984
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/createElement$1("path", {
18985
18985
  d: "M49.75 25c0 13.669-11.081 24.75-24.75 24.75S.25 38.669.25 25 11.331.25 25 .25 49.75 11.331 49.75 25z",
18986
18986
  stroke: "#000",
18987
18987
  strokeOpacity: 0.08,
18988
18988
  strokeWidth: 0.5,
18989
18989
  strokeLinejoin: "round"
18990
- })), _path3 || (_path3 = /*#__PURE__*/createElement("path", {
18990
+ })), _path3 || (_path3 = /*#__PURE__*/createElement$1("path", {
18991
18991
  d: "M25 11.934c3.294 0 5.896 1.135 8.298 3.331C35.664 17.43 37 20.382 37 23.468l-.02 10.08c-.134 1.801-1.374 3.135-3.176 3.135s-2.279-1.25-3.82-.995c-1.54.256-2.12 2.246-4.984 2.246-2.865 0-3.5-2-4.984-2.245-1.541-.256-2.018.994-3.82.994-1.735 0-3.086-1.253-3.177-3.134L13 23.469c0-3.087 1.336-6.04 3.702-8.204 2.302-2.105 5.003-3.331 8.298-3.331zm4.633 16.439c-.527-.545-1.43-.589-2.017-.099-1.477 1.235-2.95 1.235-4.45.482a4.437 4.437 0 01-.782-.482l-.14-.104c-.583-.376-1.39-.3-1.877.203a1.261 1.261 0 00.106 1.873c.277.232.73.54 1.335.845 2.468 1.237 5.228 1.237 7.72-.845.585-.49.633-1.329.105-1.873zM20 20.933a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4z",
18992
18992
  fill: "#fff"
18993
18993
  })));
@@ -19004,18 +19004,18 @@ function _extends$f() {
19004
19004
  }, _extends$f.apply(null, arguments);
19005
19005
  }
19006
19006
  function SvgAvatar(props) {
19007
- return /*#__PURE__*/createElement("svg", _extends$f({
19007
+ return /*#__PURE__*/createElement$1("svg", _extends$f({
19008
19008
  width: 56,
19009
19009
  height: 56,
19010
19010
  viewBox: "0 0 56.01 56.01",
19011
19011
  fill: "none",
19012
19012
  xmlns: "http://www.w3.org/2000/svg"
19013
- }, props), _circle || (_circle = /*#__PURE__*/createElement("circle", {
19013
+ }, props), _circle || (_circle = /*#__PURE__*/createElement$1("circle", {
19014
19014
  cx: 28,
19015
19015
  cy: 28,
19016
19016
  r: 28,
19017
19017
  fill: "currentColor"
19018
- })), _path$e || (_path$e = /*#__PURE__*/createElement("path", {
19018
+ })), _path$e || (_path$e = /*#__PURE__*/createElement$1("path", {
19019
19019
  d: "M7.18 46.722C9.214 41.145 17.763 36.96 28 36.96c10.238 0 18.787 4.185 20.821 9.762C43.696 52.418 36.266 56 28.001 56c-8.267 0-15.696-3.582-20.821-9.278zM38.08 23.8c0 5.567-4.512 10.08-10.08 10.08-5.567 0-10.08-4.513-10.08-10.08S22.434 13.72 28 13.72c5.568 0 10.08 4.513 10.08 10.08z",
19020
19020
  fill: "#F4F5F8"
19021
19021
  })));
@@ -19137,7 +19137,7 @@ var Channel = function Channel(_ref) {
19137
19137
  var _useColor = useColors(),
19138
19138
  accentColor = _useColor[THEME_COLORS.ACCENT],
19139
19139
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
19140
- focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
19140
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
19141
19141
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
19142
19142
  surface2 = _useColor[THEME_COLORS.SURFACE_2],
19143
19143
  errorColor = _useColor[THEME_COLORS.WARNING],
@@ -19214,7 +19214,7 @@ var Channel = function Channel(_ref) {
19214
19214
  theme: theme,
19215
19215
  selectedChannel: channel.id === activeChannel.id,
19216
19216
  selectedChannelLeftBorder: selectedChannelLeftBorder,
19217
- selectedBackgroundColor: selectedChannelBackground || focusBackground,
19217
+ selectedBackgroundColor: selectedChannelBackground || hoverBackground,
19218
19218
  selectedChannelPaddings: selectedChannelPaddings,
19219
19219
  channelsPaddings: channelsPaddings,
19220
19220
  selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -19545,12 +19545,12 @@ function _extends$g() {
19545
19545
  }, _extends$g.apply(null, arguments);
19546
19546
  }
19547
19547
  function SvgCreateChannel(props) {
19548
- return /*#__PURE__*/createElement("svg", _extends$g({
19548
+ return /*#__PURE__*/createElement$1("svg", _extends$g({
19549
19549
  width: 20,
19550
19550
  height: 20,
19551
19551
  fill: "none",
19552
19552
  xmlns: "http://www.w3.org/2000/svg"
19553
- }, props), _path$f || (_path$f = /*#__PURE__*/createElement("path", {
19553
+ }, props), _path$f || (_path$f = /*#__PURE__*/createElement$1("path", {
19554
19554
  fillRule: "evenodd",
19555
19555
  clipRule: "evenodd",
19556
19556
  d: "M15.582 1.3c.31.117.517.414.517.745v2.833a3.448 3.448 0 010 6.71v2.831a.795.795 0 01-1.395.524c-.556-.636-1.531-1.238-2.857-1.68a13.047 13.047 0 00-1.935-.477v3.613a2.35 2.35 0 01-4.565.79l-.002-.005-1.788-5.122a4.33 4.33 0 012.024-8.16H7.2a16.675 16.675 0 001.837-.1 13.724 13.724 0 002.81-.6c1.325-.442 2.3-1.044 2.856-1.68a.795.795 0 01.878-.221zM8.322 5.46c-.368.022-.742.033-1.12.033H5.58a2.74 2.74 0 00-1.071 5.263M8.32 5.46v5.547a18.531 18.531 0 00-1.12-.034H5.58a2.73 2.73 0 01-1.07-.217m5.402.42V5.29c.87-.133 1.69-.329 2.439-.579a10.253 10.253 0 002.156-.988v9.019a10.257 10.257 0 00-2.156-.988c-.75-.25-1.57-.447-2.44-.58zm6.187-4.62V9.91a1.856 1.856 0 000-3.355zM8.32 12.6a16.92 16.92 0 00-1.12-.037H5.58c-.055 0-.11 0-.165-.003l1.43 4.095v.002a.76.76 0 001.475-.258V12.6z",
@@ -19569,12 +19569,12 @@ function _extends$h() {
19569
19569
  }, _extends$h.apply(null, arguments);
19570
19570
  }
19571
19571
  function SvgCreateGroup(props) {
19572
- return /*#__PURE__*/createElement("svg", _extends$h({
19572
+ return /*#__PURE__*/createElement$1("svg", _extends$h({
19573
19573
  width: 20,
19574
19574
  height: 20,
19575
19575
  fill: "none",
19576
19576
  xmlns: "http://www.w3.org/2000/svg"
19577
- }, props), _path$g || (_path$g = /*#__PURE__*/createElement("path", {
19577
+ }, props), _path$g || (_path$g = /*#__PURE__*/createElement$1("path", {
19578
19578
  fillRule: "evenodd",
19579
19579
  clipRule: "evenodd",
19580
19580
  d: "M14.716 15.9h2.996a3.587 3.587 0 00-3.689-3.02c.01.085.031.175.065.259.35.862.567 1.792.628 2.76zM6.02 7.957a1.512 1.512 0 100-3.023 1.512 1.512 0 000 3.023zm8.15 0a1.511 1.511 0 100-3.023 1.511 1.511 0 000 3.023zM9.562 15.9a3.587 3.587 0 00-7.084 0h7.084zM6.02 9.557a3.112 3.112 0 100-6.224 3.112 3.112 0 000 6.224zm7.113 6.906c0 .55.418 1.037.967 1.037h4.22c.572 0 1.037-.464 1.037-1.037a5.187 5.187 0 00-5.848-5.145c-1.074.137-1.31 1.417-.904 2.421.34.841.528 1.76.528 2.724zm4.15-10.018a3.112 3.112 0 11-6.225 0 3.112 3.112 0 016.224 0zm-6.076 10.018a5.187 5.187 0 00-10.374 0c0 .573.465 1.037 1.038 1.037h8.298c.573 0 1.038-.464 1.038-1.037z",
@@ -19593,12 +19593,12 @@ function _extends$i() {
19593
19593
  }, _extends$i.apply(null, arguments);
19594
19594
  }
19595
19595
  function SvgCreateChat(props) {
19596
- return /*#__PURE__*/createElement("svg", _extends$i({
19596
+ return /*#__PURE__*/createElement$1("svg", _extends$i({
19597
19597
  width: 20,
19598
19598
  height: 20,
19599
19599
  fill: "none",
19600
19600
  xmlns: "http://www.w3.org/2000/svg"
19601
- }, props), _path$h || (_path$h = /*#__PURE__*/createElement("path", {
19601
+ }, props), _path$h || (_path$h = /*#__PURE__*/createElement$1("path", {
19602
19602
  fillRule: "evenodd",
19603
19603
  clipRule: "evenodd",
19604
19604
  d: "M10 3.25a6.75 6.75 0 00-5.525 10.628 12.365 12.365 0 015.526-1.295c1.983 0 3.86.466 5.524 1.295a6.748 6.748 0 00-.752-8.651A6.75 6.75 0 0010 3.25zm6.323 12.05A8.249 8.249 0 004.166 4.166 8.25 8.25 0 1016.323 15.3zm-1.838-.256a10.872 10.872 0 00-4.485-.96h-.001a10.865 10.865 0 00-4.484.96 6.75 6.75 0 008.97 0zm-4.484-2.46l-.001.75v-.75zm-.001-6a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zm-2.298-.549a3.25 3.25 0 114.596 4.596 3.25 3.25 0 01-4.596-4.596z",
@@ -19617,23 +19617,23 @@ function _extends$j() {
19617
19617
  }, _extends$j.apply(null, arguments);
19618
19618
  }
19619
19619
  function SvgAddChat(props) {
19620
- return /*#__PURE__*/createElement("svg", _extends$j({
19620
+ return /*#__PURE__*/createElement$1("svg", _extends$j({
19621
19621
  width: 24,
19622
19622
  height: 24,
19623
19623
  viewBox: "0 0 24.01 24.01",
19624
19624
  fill: "none",
19625
19625
  xmlns: "http://www.w3.org/2000/svg"
19626
- }, props), _path$i || (_path$i = /*#__PURE__*/createElement("path", {
19626
+ }, props), _path$i || (_path$i = /*#__PURE__*/createElement$1("path", {
19627
19627
  fillRule: "evenodd",
19628
19628
  clipRule: "evenodd",
19629
19629
  d: "M4.128 2.179c.989-.529 1.962-.713 4.109-.713h7.66a1 1 0 110 2h-7.66c-2.041 0-2.615.182-3.165.476a2.86 2.86 0 00-1.196 1.196c-.294.55-.476 1.124-.476 3.165v7.66c0 2.041.182 2.615.476 3.165a2.86 2.86 0 001.196 1.196c.55.294 1.124.476 3.165.476h7.66c2.04 0 2.614-.182 3.165-.476a2.86 2.86 0 001.195-1.196c.295-.55.476-1.124.476-3.165v-7.66a1 1 0 012 0v7.66c0 2.147-.184 3.12-.712 4.108a4.86 4.86 0 01-2.016 2.016c-.989.53-1.962.713-4.109.713h-7.66c-2.146 0-3.12-.184-4.108-.713a4.86 4.86 0 01-2.016-2.016c-.528-.988-.712-1.961-.712-4.108v-7.66c0-2.147.184-3.12.712-4.108a4.86 4.86 0 012.016-2.016z",
19630
19630
  fill: "CurrentColor"
19631
- })), _path2$2 || (_path2$2 = /*#__PURE__*/createElement("path", {
19631
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/createElement$1("path", {
19632
19632
  fillRule: "evenodd",
19633
19633
  clipRule: "evenodd",
19634
19634
  d: "M20.769 3.43c.397.398.397 1.042 0 1.439l-8.475 8.475c-.376.376-1.492.981-2.333 1.409a.38.38 0 01-.514-.514c.427-.84 1.033-1.957 1.409-2.333l8.475-8.475a1.017 1.017 0 011.438 0z",
19635
19635
  fill: "CurrentColor"
19636
- })), _path3$1 || (_path3$1 = /*#__PURE__*/createElement("path", {
19636
+ })), _path3$1 || (_path3$1 = /*#__PURE__*/createElement$1("path", {
19637
19637
  d: "M23.4 1.8a1 1 0 11-2 0 1 1 0 012 0z",
19638
19638
  fill: "CurrentColor"
19639
19639
  })));
@@ -19650,12 +19650,12 @@ function _extends$k() {
19650
19650
  }, _extends$k.apply(null, arguments);
19651
19651
  }
19652
19652
  function SvgCross(props) {
19653
- return /*#__PURE__*/createElement("svg", _extends$k({
19653
+ return /*#__PURE__*/createElement$1("svg", _extends$k({
19654
19654
  width: 16,
19655
19655
  height: 16,
19656
19656
  fill: "none",
19657
19657
  xmlns: "http://www.w3.org/2000/svg"
19658
- }, props), _path$j || (_path$j = /*#__PURE__*/createElement("path", {
19658
+ }, props), _path$j || (_path$j = /*#__PURE__*/createElement$1("path", {
19659
19659
  d: "M7.114 8L4.85 5.736a.626.626 0 11.886-.886L8 7.114l2.264-2.264a.626.626 0 11.886.886L8.886 8l2.264 2.264a.626.626 0 01-.886.886L8 8.886 5.736 11.15a.626.626 0 01-.886-.886L7.114 8z",
19660
19660
  fill: "#818C99"
19661
19661
  })));
@@ -19672,13 +19672,13 @@ function _extends$l() {
19672
19672
  }, _extends$l.apply(null, arguments);
19673
19673
  }
19674
19674
  function SvgTick(props) {
19675
- return /*#__PURE__*/createElement("svg", _extends$l({
19675
+ return /*#__PURE__*/createElement$1("svg", _extends$l({
19676
19676
  width: 11,
19677
19677
  height: 9,
19678
19678
  viewBox: "0 0 10 10",
19679
19679
  fill: "none",
19680
19680
  xmlns: "http://www.w3.org/2000/svg"
19681
- }, props), _path$k || (_path$k = /*#__PURE__*/createElement("path", {
19681
+ }, props), _path$k || (_path$k = /*#__PURE__*/createElement$1("path", {
19682
19682
  d: "M1.28 4.775a.75.75 0 00-1.06 1.06l2.722 2.723a.75.75 0 001.06 0l6.445-6.445a.75.75 0 10-1.06-1.06L3.471 6.967 1.28 4.775z",
19683
19683
  fill: "#fff"
19684
19684
  })));
@@ -19775,7 +19775,8 @@ var UsersPopup = function UsersPopup(_ref) {
19775
19775
  sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
19776
19776
  surface1Background = _useColor[THEME_COLORS.SURFACE_1],
19777
19777
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
19778
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
19778
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
19779
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
19779
19780
  var dispatch = useDispatch();
19780
19781
  var ChatClient = getClient();
19781
19782
  var selfUser = ChatClient.user;
@@ -20020,7 +20021,7 @@ var UsersPopup = function UsersPopup(_ref) {
20020
20021
  var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
20021
20022
  return /*#__PURE__*/React__default.createElement(ListRow, {
20022
20023
  isAdd: actionType !== 'createChat',
20023
- hoverBackground: colors.hoverBackgroundColor,
20024
+ hoverBackground: hoverBackground,
20024
20025
  key: user.id,
20025
20026
  onClick: function onClick() {
20026
20027
  return actionType === 'createChat' && handleAddMember(user);
@@ -20116,12 +20117,12 @@ function _extends$m() {
20116
20117
  }, _extends$m.apply(null, arguments);
20117
20118
  }
20118
20119
  function SvgCameraIcon(props) {
20119
- return /*#__PURE__*/createElement("svg", _extends$m({
20120
+ return /*#__PURE__*/createElement$1("svg", _extends$m({
20120
20121
  width: 42,
20121
20122
  height: 42,
20122
20123
  fill: "none",
20123
20124
  xmlns: "http://www.w3.org/2000/svg"
20124
- }, props), _path$l || (_path$l = /*#__PURE__*/createElement("path", {
20125
+ }, props), _path$l || (_path$l = /*#__PURE__*/createElement$1("path", {
20125
20126
  fillRule: "evenodd",
20126
20127
  clipRule: "evenodd",
20127
20128
  d: "M11.55 11.55c1.206 0 2.119-.428 2.813-1.095.511-.49.899-1.124 1.164-1.559l.115-.186c.315-.505.542-.802.82-1.005.238-.172.624-.355 1.388-.355h6.3c.763 0 1.15.183 1.387.355.278.203.505.5.82 1.005l.116.186c.265.435.652 1.068 1.163 1.56.695.666 1.607 1.094 2.814 1.094 1.539 0 2.078.008 2.496.091a4.725 4.725 0 013.713 3.712c.083.418.09.958.09 2.497v7.245c0 1.79 0 3.038-.08 4.01-.078.953-.223 1.5-.434 1.915a4.725 4.725 0 01-2.065 2.065c-.415.212-.963.357-1.916.435-.971.079-2.22.08-4.01.08H13.753c-1.79 0-3.038-.001-4.01-.08-.953-.078-1.5-.224-1.915-.435a4.725 4.725 0 01-2.065-2.065c-.212-.415-.357-.962-.435-1.915-.079-.972-.08-2.22-.08-4.01v-7.242c0-1.542.007-2.083.09-2.501a4.725 4.725 0 013.711-3.71c.42-.084.96-.092 2.502-.092zm6.3-7.35c-1.337 0-2.394.342-3.24.958-.804.585-1.299 1.337-1.64 1.882l-.158.255c-.285.459-.434.7-.63.888-.126.12-.264.217-.632.217h-.183c-1.29 0-2.17 0-2.934.152a7.875 7.875 0 00-6.184 6.184c-.153.765-.153 1.644-.152 2.934V25.163c0 1.707 0 3.083.09 4.198.095 1.148.293 2.156.768 3.09a7.875 7.875 0 003.442 3.44c.932.476 1.94.674 3.089.768 1.115.091 2.491.091 4.198.091h14.628c1.707 0 3.084 0 4.199-.09 1.148-.095 2.156-.293 3.089-.768a7.875 7.875 0 003.441-3.442c.476-.933.674-1.94.768-3.089.09-1.115.09-2.491.09-4.198v-7.495c.001-1.288.001-2.166-.15-2.93a7.875 7.875 0 00-6.188-6.186c-.764-.152-1.641-.152-2.93-.152h-.181c-.369 0-.506-.096-.632-.217-.197-.189-.346-.43-.63-.888-.05-.078-.102-.163-.159-.255-.34-.545-.835-1.297-1.64-1.882-.846-.616-1.903-.958-3.24-.958h-6.3zm7.875 17.325a4.725 4.725 0 11-9.45 0 4.725 4.725 0 019.45 0zm3.15 0a7.875 7.875 0 11-15.75 0 7.875 7.875 0 0115.75 0z",
@@ -20795,7 +20796,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
20795
20796
  uploadPhotoIcon = _ref.uploadPhotoIcon;
20796
20797
  var _useColor = useColors(),
20797
20798
  accentColor = _useColor[THEME_COLORS.ACCENT],
20798
- focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
20799
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
20799
20800
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
20800
20801
  var _useState = useState(false),
20801
20802
  showAddMemberPopup = _useState[0],
@@ -20820,14 +20821,14 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
20820
20821
  theme: theme,
20821
20822
  zIndex: '300',
20822
20823
  trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
20823
- hoverBackground: focusBackground,
20824
+ hoverBackground: hoverBackground,
20824
20825
  leftAuto: !showSearch,
20825
20826
  iconColor: accentColor
20826
20827
  }, createChannelIcon || /*#__PURE__*/React__default.createElement(SvgAddChat, null))
20827
20828
  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
20828
20829
  key: 1,
20829
20830
  textColor: textPrimary,
20830
- hoverBackground: focusBackground,
20831
+ hoverBackground: hoverBackground,
20831
20832
  onClick: function onClick() {
20832
20833
  return handleOpenCreateChannel('broadcast');
20833
20834
  },
@@ -20835,7 +20836,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
20835
20836
  }, newChannelIcon || /*#__PURE__*/React__default.createElement(SvgCreateChannel, null), "New channel"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
20836
20837
  key: 2,
20837
20838
  textColor: textPrimary,
20838
- hoverBackground: focusBackground,
20839
+ hoverBackground: hoverBackground,
20839
20840
  onClick: function onClick() {
20840
20841
  return handleOpenCreateChannel('group');
20841
20842
  },
@@ -20843,7 +20844,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
20843
20844
  }, newGroupIcon || /*#__PURE__*/React__default.createElement(SvgCreateGroup, null), "New group"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
20844
20845
  key: 3,
20845
20846
  textColor: textPrimary,
20846
- hoverBackground: focusBackground,
20847
+ hoverBackground: hoverBackground,
20847
20848
  onClick: function onClick() {
20848
20849
  return handleOpenCreateChannel('direct');
20849
20850
  },
@@ -20884,13 +20885,13 @@ function _extends$n() {
20884
20885
  }, _extends$n.apply(null, arguments);
20885
20886
  }
20886
20887
  function SvgArrowLeft(props) {
20887
- return /*#__PURE__*/createElement("svg", _extends$n({
20888
+ return /*#__PURE__*/createElement$1("svg", _extends$n({
20888
20889
  width: 32,
20889
20890
  height: 32,
20890
20891
  viewBox: "0 0 32.01 32.01",
20891
20892
  fill: "none",
20892
20893
  xmlns: "http://www.w3.org/2000/svg"
20893
- }, props), _path$m || (_path$m = /*#__PURE__*/createElement("path", {
20894
+ }, props), _path$m || (_path$m = /*#__PURE__*/createElement$1("path", {
20894
20895
  fillRule: "evenodd",
20895
20896
  clipRule: "evenodd",
20896
20897
  d: "M15.489 9.276a.941.941 0 010 1.33l-4.276 4.276H23.06a.941.941 0 110 1.883H11.213l4.276 4.275a.941.941 0 11-1.331 1.331L8.276 16.49a.941.941 0 010-1.331l5.882-5.882a.941.941 0 011.331 0z",
@@ -20909,13 +20910,13 @@ function _extends$o() {
20909
20910
  }, _extends$o.apply(null, arguments);
20910
20911
  }
20911
20912
  function SvgNotifications(props) {
20912
- return /*#__PURE__*/createElement("svg", _extends$o({
20913
+ return /*#__PURE__*/createElement$1("svg", _extends$o({
20913
20914
  width: 20,
20914
20915
  height: 20,
20915
20916
  viewBox: "0 0 20.01 20.01",
20916
20917
  fill: "none",
20917
20918
  xmlns: "http://www.w3.org/2000/svg"
20918
- }, props), _path$n || (_path$n = /*#__PURE__*/createElement("path", {
20919
+ }, props), _path$n || (_path$n = /*#__PURE__*/createElement$1("path", {
20919
20920
  d: "M10.246 1.75c3.449 0 5.924 2.816 5.924 6.47v1.375c0 .196.166.457.619.924l.232.236c.929.942 1.296 1.485 1.296 2.358 0 .382-.044.68-.23 1.037-.391.754-1.222 1.174-2.464 1.174H13.98c-.54 2.004-1.83 3.093-3.738 3.093-1.928 0-3.225-1.112-3.755-3.157l.016.064H4.861c-1.278 0-2.118-.432-2.493-1.212-.164-.341-.201-.618-.201-.998 0-.874.367-1.417 1.296-2.359.12-.12.174-.176.232-.236.453-.467.62-.728.62-.924V8.22c0-3.652 2.48-6.47 5.93-6.47zm2.114 13.575H8.125c.391 1.071 1.066 1.545 2.118 1.545 1.052 0 1.727-.474 2.118-1.545zM10.247 3.296c-2.55 0-4.385 2.085-4.385 4.924v1.375c0 .732-.335 1.257-1.055 2l-.242.246c-.642.65-.851.96-.851 1.273 0 .164.012.25.049.328.092.192.372.335 1.1.335h10.76c.705 0 .991-.144 1.093-.34.043-.082.056-.17.056-.323 0-.313-.21-.622-.851-1.273-.12-.12-.179-.181-.242-.246-.72-.743-1.055-1.268-1.055-2V8.22c0-2.84-1.83-4.924-4.377-4.924z",
20920
20921
  fill: "currentColor"
20921
20922
  })));
@@ -20932,13 +20933,13 @@ function _extends$p() {
20932
20933
  }, _extends$p.apply(null, arguments);
20933
20934
  }
20934
20935
  function SvgLock(props) {
20935
- return /*#__PURE__*/createElement("svg", _extends$p({
20936
+ return /*#__PURE__*/createElement$1("svg", _extends$p({
20936
20937
  width: 20,
20937
20938
  height: 20,
20938
20939
  viewBox: "0 0 21 21",
20939
20940
  fill: "none",
20940
20941
  xmlns: "http://www.w3.org/2000/svg"
20941
- }, props), _path$o || (_path$o = /*#__PURE__*/createElement("path", {
20942
+ }, props), _path$o || (_path$o = /*#__PURE__*/createElement$1("path", {
20942
20943
  d: "M10 2.5a4.167 4.167 0 014.166 4.167v1.666h.364c.743 0 1.012.078 1.284.223.271.145.485.358.63.63.145.272.222.541.222 1.284v4.893c0 .743-.077 1.013-.222 1.284a1.514 1.514 0 01-.63.63c-.272.146-.541.223-1.284.223H5.47c-.743 0-1.013-.077-1.284-.223a1.515 1.515 0 01-.63-.63c-.146-.271-.223-.54-.223-1.284V10.47c0-.743.077-1.012.223-1.284.145-.272.358-.485.63-.63.271-.145.54-.223 1.284-.223h.362l.001-1.666A4.167 4.167 0 0110 2.5zm0 1.667a2.5 2.5 0 00-2.5 2.5l-.001 1.666h5V6.667a2.5 2.5 0 00-2.5-2.5z",
20943
20944
  fill: "CurrentColor"
20944
20945
  })));
@@ -20955,13 +20956,13 @@ function _extends$q() {
20955
20956
  }, _extends$q.apply(null, arguments);
20956
20957
  }
20957
20958
  function SvgLeave(props) {
20958
- return /*#__PURE__*/createElement("svg", _extends$q({
20959
+ return /*#__PURE__*/createElement$1("svg", _extends$q({
20959
20960
  width: 20,
20960
20961
  height: 20,
20961
20962
  viewBox: "0 0 20.01 20.01",
20962
20963
  fill: "none",
20963
20964
  xmlns: "http://www.w3.org/2000/svg"
20964
- }, props), _path$p || (_path$p = /*#__PURE__*/createElement("path", {
20965
+ }, props), _path$p || (_path$p = /*#__PURE__*/createElement$1("path", {
20965
20966
  d: "M9.457 9.68h-7.03c-.47 0-.86.362-.86.82 0 .458.39.82.86.82h7.03l-1.56 1.477a.793.793 0 000 1.163.89.89 0 001.213 0l3.038-2.878h0l.006-.006h0a.799.799 0 00.248-.573v-.005a.784.784 0 00-.066-.313M9.457 9.68l2.88.505m-2.88-.505l-1.56-1.477a.793.793 0 010-1.163.89.89 0 011.213 0l3.038 2.878m-2.69-.238l2.69.238m.188.267s0 0 0 0l-.091.04.091-.04zm-.188-.267l-.069.073.069-.073h0zm-1.365 8.599h2.011c.82 0 1.488 0 2.03-.042.559-.043 1.06-.135 1.525-.36a3.805 3.805 0 001.705-1.616c.238-.443.336-.919.381-1.45.045-.514.045-1.146.045-1.923V7.874c0-.776 0-1.409-.045-1.923-.045-.53-.143-1.007-.381-1.45a3.805 3.805 0 00-1.705-1.615c-.466-.225-.966-.317-1.526-.36-.541-.043-1.208-.043-2.029-.042h-.003 0-2.008c-.47 0-.86.361-.86.82 0 .457.39.819.86.819h1.975c.865 0 1.462 0 1.926.036.454.036.704.1.888.19.41.197.744.513.952.9.093.173.16.408.198.837.038.438.038 1.003.038 1.823v5.182c0 .82 0 1.385-.038 1.824-.037.429-.105.664-.198.836-.208.387-.541.703-.952.901-.184.089-.434.154-.888.189-.464.036-1.061.036-1.926.036h-1.975c-.47 0-.86.362-.86.82 0 .458.39.82.86.82z",
20966
20967
  fill: "CurrentColor",
20967
20968
  stroke: "CurrentColor",
@@ -21747,13 +21748,13 @@ function _extends$r() {
21747
21748
  }, _extends$r.apply(null, arguments);
21748
21749
  }
21749
21750
  function SvgMessage(props) {
21750
- return /*#__PURE__*/createElement("svg", _extends$r({
21751
+ return /*#__PURE__*/createElement$1("svg", _extends$r({
21751
21752
  width: 48,
21752
21753
  height: 48,
21753
21754
  viewBox: "0 0 48.01 48.01",
21754
21755
  fill: "none",
21755
21756
  xmlns: "http://www.w3.org/2000/svg"
21756
- }, props), _path$q || (_path$q = /*#__PURE__*/createElement("path", {
21757
+ }, props), _path$q || (_path$q = /*#__PURE__*/createElement$1("path", {
21757
21758
  fillRule: "evenodd",
21758
21759
  clipRule: "evenodd",
21759
21760
  d: "M15.524 4.2h16.951c1.616 0 2.938 0 4.012.088 1.112.09 2.116.285 3.054.762a7.8 7.8 0 013.409 3.41c.477.937.671 1.941.762 3.053.088 1.074.088 2.396.088 4.012v10.95c0 1.617 0 2.938-.088 4.013-.09 1.111-.285 2.115-.762 3.053a7.8 7.8 0 01-3.409 3.409c-.938.478-1.942.672-3.054.762-1.074.088-2.396.088-4.012.088h-5.108c-1.32 0-1.73.009-2.107.086a4.2 4.2 0 00-1.066.374c-.342.175-.668.425-1.7 1.25l-4.822 3.858c-.37.296-.739.59-1.06.803-.308.204-.877.548-1.61.549a2.8 2.8 0 01-2.19-1.054c-.457-.572-.544-1.23-.577-1.599-.035-.383-.035-.855-.035-1.33V37.79c-.86-.02-1.573-.081-2.219-.255a7.8 7.8 0 01-5.515-5.515c-.267-.997-.267-2.152-.266-3.76V15.525c0-1.616 0-2.938.088-4.012.09-1.112.284-2.116.762-3.054A7.8 7.8 0 018.459 5.05c.938-.477 1.942-.671 3.053-.762 1.075-.088 2.396-.088 4.012-.088zm-3.718 3.676c-.89.073-1.367.206-1.713.382a4.2 4.2 0 00-1.835 1.835c-.177.346-.31.824-.382 1.713-.075.91-.076 2.084-.076 3.794V28c0 1.976.015 2.61.143 3.087a4.2 4.2 0 002.97 2.97c.476.128 1.111.143 3.087.143a1.8 1.8 0 011.8 1.8v4.255l4.446-3.557.126-.101c.853-.682 1.476-1.18 2.184-1.543a7.795 7.795 0 011.98-.695c.78-.16 1.577-.16 2.67-.159H32.4c1.71 0 2.884-.001 3.794-.076.89-.072 1.367-.205 1.713-.382a4.2 4.2 0 001.835-1.835c.176-.346.31-.823.382-1.713.075-.91.076-2.084.076-3.794V15.6c0-1.71-.002-2.884-.076-3.794-.073-.89-.206-1.367-.382-1.713a4.2 4.2 0 00-1.835-1.835c-.346-.176-.824-.31-1.713-.382-.91-.074-2.084-.076-3.794-.076H15.6c-1.71 0-2.884.002-3.794.076zM12.2 17a1.8 1.8 0 011.8-1.8h10a1.8 1.8 0 010 3.6H14a1.8 1.8 0 01-1.8-1.8zm0 7a1.8 1.8 0 011.8-1.8h16a1.8 1.8 0 010 3.6H14a1.8 1.8 0 01-1.8-1.8z",
@@ -21874,12 +21875,12 @@ function _extends$s() {
21874
21875
  }, _extends$s.apply(null, arguments);
21875
21876
  }
21876
21877
  function SvgInfo(props) {
21877
- return /*#__PURE__*/createElement("svg", _extends$s({
21878
+ return /*#__PURE__*/createElement$1("svg", _extends$s({
21878
21879
  width: 22,
21879
21880
  height: 22,
21880
21881
  fill: "none",
21881
21882
  xmlns: "http://www.w3.org/2000/svg"
21882
- }, props), _path$r || (_path$r = /*#__PURE__*/createElement("path", {
21883
+ }, props), _path$r || (_path$r = /*#__PURE__*/createElement$1("path", {
21883
21884
  d: "M11 20.167a9.167 9.167 0 100-18.333 9.167 9.167 0 000 18.333zM11 14.667V11M11 7.334h.01",
21884
21885
  stroke: "CurrentColor",
21885
21886
  strokeWidth: 2,
@@ -21917,7 +21918,8 @@ function ChatHeader(_ref) {
21917
21918
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
21918
21919
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
21919
21920
  iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
21920
- borderColor = _useColor[THEME_COLORS.BORDER];
21921
+ borderColor = _useColor[THEME_COLORS.BORDER],
21922
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
21921
21923
  var dispatch = useDispatch();
21922
21924
  var ChatClient = getClient();
21923
21925
  var user = ChatClient.user;
@@ -21959,12 +21961,12 @@ function ChatHeader(_ref) {
21959
21961
  onClick: handleBackToChannels
21960
21962
  }, MobileBackButton || (/*#__PURE__*/React__default.createElement(MobileBackButtonWrapper, {
21961
21963
  onClick: handleBackToChannels,
21962
- hoverBackground: colors.primaryLight
21964
+ hoverBackground: hoverBackground
21963
21965
  }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
21964
21966
  color: iconPrimary
21965
21967
  })))), activeChannel.isLinkedChannel && (/*#__PURE__*/React__default.createElement(BackButtonWrapper, {
21966
21968
  onClick: handleSwitchChannel,
21967
- hoverBackground: colors.primaryLight,
21969
+ hoverBackground: hoverBackground,
21968
21970
  order: backButtonOrder
21969
21971
  }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
21970
21972
  color: iconPrimary
@@ -22049,13 +22051,13 @@ function _extends$t() {
22049
22051
  }, _extends$t.apply(null, arguments);
22050
22052
  }
22051
22053
  function SvgChoseMedia(props) {
22052
- return /*#__PURE__*/createElement("svg", _extends$t({
22054
+ return /*#__PURE__*/createElement$1("svg", _extends$t({
22053
22055
  width: 18,
22054
22056
  height: 18,
22055
22057
  viewBox: "0 0 19 19",
22056
22058
  fill: "none",
22057
22059
  xmlns: "http://www.w3.org/2000/svg"
22058
- }, props), _path$s || (_path$s = /*#__PURE__*/createElement("path", {
22060
+ }, props), _path$s || (_path$s = /*#__PURE__*/createElement$1("path", {
22059
22061
  fillRule: "evenodd",
22060
22062
  clipRule: "evenodd",
22061
22063
  d: "M3.614 2.052C4.366 1.65 5.107 1.5 6.798 1.5h4.404c1.691 0 2.432.15 3.184.552.672.36 1.203.89 1.562 1.562.402.752.552 1.493.552 3.184v4.404c0 1.691-.15 2.432-.552 3.184a3.763 3.763 0 01-1.562 1.562c-.752.402-1.493.552-3.184.552H6.798c-1.691 0-2.432-.15-3.184-.552a3.764 3.764 0 01-1.562-1.562c-.402-.752-.552-1.493-.552-3.184V6.798c0-1.691.15-2.432.552-3.184.36-.672.89-1.203 1.562-1.562zm7.16 7.07a.297.297 0 01.482.004l3.04 4.193c.101.139.074.335-.06.44a.297.297 0 01-.183.062h-9.57a.309.309 0 01-.304-.314c0-.07.022-.137.064-.192l2.22-2.954a.297.297 0 01.473-.008l1.528 1.861 2.31-3.092zM5.785 6.857a1.071 1.071 0 100-2.143 1.071 1.071 0 000 2.143z",
@@ -22074,24 +22076,24 @@ function _extends$u() {
22074
22076
  }, _extends$u.apply(null, arguments);
22075
22077
  }
22076
22078
  function SvgNoMessagesIcon(props) {
22077
- return /*#__PURE__*/createElement("svg", _extends$u({
22079
+ return /*#__PURE__*/createElement$1("svg", _extends$u({
22078
22080
  width: 49,
22079
22081
  height: 49,
22080
22082
  fill: "none",
22081
22083
  xmlns: "http://www.w3.org/2000/svg",
22082
22084
  xmlnsXlink: "http://www.w3.org/1999/xlink"
22083
- }, props), _path$t || (_path$t = /*#__PURE__*/createElement("path", {
22085
+ }, props), _path$t || (_path$t = /*#__PURE__*/createElement$1("path", {
22084
22086
  d: "M.5 48.36h48v-48H.5v48z",
22085
22087
  fill: "url(#noMessagesIcon_svg__pattern0)"
22086
- })), _defs || (_defs = /*#__PURE__*/createElement("defs", null, /*#__PURE__*/createElement("pattern", {
22088
+ })), _defs || (_defs = /*#__PURE__*/createElement$1("defs", null, /*#__PURE__*/createElement$1("pattern", {
22087
22089
  id: "noMessagesIcon_svg__pattern0",
22088
22090
  patternContentUnits: "objectBoundingBox",
22089
22091
  width: 1,
22090
22092
  height: 1
22091
- }, /*#__PURE__*/createElement("use", {
22093
+ }, /*#__PURE__*/createElement$1("use", {
22092
22094
  xlinkHref: "#noMessagesIcon_svg__image0_2070_42990",
22093
22095
  transform: "scale(.00625)"
22094
- })), /*#__PURE__*/createElement("image", {
22096
+ })), /*#__PURE__*/createElement$1("image", {
22095
22097
  id: "noMessagesIcon_svg__image0_2070_42990",
22096
22098
  width: 160,
22097
22099
  height: 160,
@@ -22202,13 +22204,13 @@ function _extends$v() {
22202
22204
  }, _extends$v.apply(null, arguments);
22203
22205
  }
22204
22206
  function SvgDownload(props) {
22205
- return /*#__PURE__*/createElement("svg", _extends$v({
22207
+ return /*#__PURE__*/createElement$1("svg", _extends$v({
22206
22208
  width: 32,
22207
22209
  height: 32,
22208
22210
  viewBox: "0 0 32.01 32.01",
22209
22211
  fill: "none",
22210
22212
  xmlns: "http://www.w3.org/2000/svg"
22211
- }, props), _path$u || (_path$u = /*#__PURE__*/createElement("path", {
22213
+ }, props), _path$u || (_path$u = /*#__PURE__*/createElement$1("path", {
22212
22214
  d: "M17.5 3.5a1.5 1.5 0 00-3 0v13.379l-4.44-4.44a1.5 1.5 0 00-2.12 2.122l7 7a1.5 1.5 0 002.12 0l7-7a1.5 1.5 0 00-2.12-2.122l-4.44 4.44V3.5zM5.5 25a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3h-21z",
22213
22215
  fill: "#fff"
22214
22216
  })));
@@ -22225,13 +22227,13 @@ function _extends$w() {
22225
22227
  }, _extends$w.apply(null, arguments);
22226
22228
  }
22227
22229
  function SvgCancel(props) {
22228
- return /*#__PURE__*/createElement("svg", _extends$w({
22230
+ return /*#__PURE__*/createElement$1("svg", _extends$w({
22229
22231
  width: 20,
22230
22232
  height: 20,
22231
22233
  viewBox: "0 0 20.01 20.01",
22232
22234
  fill: "none",
22233
22235
  xmlns: "http://www.w3.org/2000/svg"
22234
- }, props), _path$v || (_path$v = /*#__PURE__*/createElement("path", {
22236
+ }, props), _path$v || (_path$v = /*#__PURE__*/createElement$1("path", {
22235
22237
  d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z",
22236
22238
  fill: "#fff"
22237
22239
  })));
@@ -22248,13 +22250,13 @@ function _extends$x() {
22248
22250
  }, _extends$x.apply(null, arguments);
22249
22251
  }
22250
22252
  function SvgSliderButtonRight(props) {
22251
- return /*#__PURE__*/createElement("svg", _extends$x({
22253
+ return /*#__PURE__*/createElement$1("svg", _extends$x({
22252
22254
  width: 28,
22253
22255
  height: 28,
22254
22256
  viewBox: "0 0 28.01 28.01",
22255
22257
  fill: "none",
22256
22258
  xmlns: "http://www.w3.org/2000/svg"
22257
- }, props), _path$w || (_path$w = /*#__PURE__*/createElement("path", {
22259
+ }, props), _path$w || (_path$w = /*#__PURE__*/createElement$1("path", {
22258
22260
  fillRule: "evenodd",
22259
22261
  clipRule: "evenodd",
22260
22262
  d: "M9.846 5.763a1.75 1.75 0 012.475 0l7 7a1.75 1.75 0 010 2.474l-7 7a1.75 1.75 0 11-2.475-2.474L15.61 14 9.846 8.237a1.75 1.75 0 010-2.474z",
@@ -22273,13 +22275,13 @@ function _extends$y() {
22273
22275
  }, _extends$y.apply(null, arguments);
22274
22276
  }
22275
22277
  function SvgSliderButtonLeft(props) {
22276
- return /*#__PURE__*/createElement("svg", _extends$y({
22278
+ return /*#__PURE__*/createElement$1("svg", _extends$y({
22277
22279
  width: 28,
22278
22280
  height: 28,
22279
22281
  viewBox: "0 0 28.01 28.01",
22280
22282
  fill: "none",
22281
22283
  xmlns: "http://www.w3.org/2000/svg"
22282
- }, props), _path$x || (_path$x = /*#__PURE__*/createElement("path", {
22284
+ }, props), _path$x || (_path$x = /*#__PURE__*/createElement$1("path", {
22283
22285
  fillRule: "evenodd",
22284
22286
  clipRule: "evenodd",
22285
22287
  d: "M18.154 5.763a1.75 1.75 0 00-2.475 0l-7 7a1.75 1.75 0 000 2.474l7 7a1.75 1.75 0 102.475-2.474L12.392 14l5.762-5.763a1.75 1.75 0 000-2.474z",
@@ -22298,18 +22300,18 @@ function _extends$z() {
22298
22300
  }, _extends$z.apply(null, arguments);
22299
22301
  }
22300
22302
  function SvgForward(props) {
22301
- return /*#__PURE__*/createElement("svg", _extends$z({
22303
+ return /*#__PURE__*/createElement$1("svg", _extends$z({
22302
22304
  width: 18,
22303
22305
  height: 18,
22304
22306
  viewBox: "0 0 18.01 18.01",
22305
22307
  fill: "none",
22306
22308
  xmlns: "http://www.w3.org/2000/svg"
22307
- }, props), _path$y || (_path$y = /*#__PURE__*/createElement("path", {
22309
+ }, props), _path$y || (_path$y = /*#__PURE__*/createElement$1("path", {
22308
22310
  fillRule: "evenodd",
22309
22311
  clipRule: "evenodd",
22310
22312
  d: "M14.764 7.12a.86.86 0 00-.86-.86h-7.63C3.77 6.26 1.8 8.36 1.8 10.88c0 2.519 1.97 4.62 4.473 4.62H7.96a.86.86 0 000-1.72H6.273c-1.49 0-2.754-1.266-2.754-2.9 0-1.635 1.265-2.901 2.754-2.901h7.631a.86.86 0 00.86-.86z",
22311
22313
  fill: "CurrentColor"
22312
- })), _path2$3 || (_path2$3 = /*#__PURE__*/createElement("path", {
22314
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/createElement$1("path", {
22313
22315
  fillRule: "evenodd",
22314
22316
  clipRule: "evenodd",
22315
22317
  d: "M11.16 2.75a.86.86 0 00-.003 1.216l3.182 3.192-3.182 3.192a.86.86 0 001.218 1.214l3.786-3.799a.86.86 0 000-1.214l-3.786-3.798a.86.86 0 00-1.216-.002z",
@@ -22328,13 +22330,13 @@ function _extends$A() {
22328
22330
  }, _extends$A.apply(null, arguments);
22329
22331
  }
22330
22332
  function SvgDeleteChannel(props) {
22331
- return /*#__PURE__*/createElement("svg", _extends$A({
22333
+ return /*#__PURE__*/createElement$1("svg", _extends$A({
22332
22334
  width: 20,
22333
22335
  height: 21,
22334
22336
  viewBox: "0 0 20.01 21.01",
22335
22337
  fill: "none",
22336
22338
  xmlns: "http://www.w3.org/2000/svg"
22337
- }, props), _path$z || (_path$z = /*#__PURE__*/createElement("path", {
22339
+ }, props), _path$z || (_path$z = /*#__PURE__*/createElement$1("path", {
22338
22340
  d: "M5 16.333C5 17.25 5.75 18 6.667 18h6.666C14.25 18 15 17.25 15 16.333V8c0-.917-.75-1.667-1.667-1.667H6.667C5.75 6.333 5 7.083 5 8v8.333zm10-12.5h-2.083l-.592-.591A.84.84 0 0011.742 3H8.258a.84.84 0 00-.583.242l-.592.591H5a.836.836 0 00-.833.834c0 .458.375.833.833.833h10a.836.836 0 00.833-.833.836.836 0 00-.833-.834z",
22339
22341
  fill: "CurrentColor"
22340
22342
  })));
@@ -22395,13 +22397,13 @@ function _extends$B() {
22395
22397
  }, _extends$B.apply(null, arguments);
22396
22398
  }
22397
22399
  function SvgVideoPlayerPlay(props) {
22398
- return /*#__PURE__*/createElement("svg", _extends$B({
22400
+ return /*#__PURE__*/createElement$1("svg", _extends$B({
22399
22401
  width: 20,
22400
22402
  height: 20,
22401
22403
  viewBox: "0 0 20.01 20.01",
22402
22404
  fill: "none",
22403
22405
  xmlns: "http://www.w3.org/2000/svg"
22404
- }, props), _path$A || (_path$A = /*#__PURE__*/createElement("path", {
22406
+ }, props), _path$A || (_path$A = /*#__PURE__*/createElement$1("path", {
22405
22407
  d: "M16.28 8.913c.793.48.793 1.692 0 2.172l-8.265 4.997c-.787.475-1.765-.126-1.765-1.086V5.002c0-.96.979-1.561 1.765-1.086l8.265 4.997z",
22406
22408
  fill: "#fff"
22407
22409
  })));
@@ -22418,13 +22420,13 @@ function _extends$C() {
22418
22420
  }, _extends$C.apply(null, arguments);
22419
22421
  }
22420
22422
  function SvgVideoPlayerPause(props) {
22421
- return /*#__PURE__*/createElement("svg", _extends$C({
22423
+ return /*#__PURE__*/createElement$1("svg", _extends$C({
22422
22424
  width: 20,
22423
22425
  height: 20,
22424
22426
  viewBox: "0 0 20.01 20.01",
22425
22427
  fill: "none",
22426
22428
  xmlns: "http://www.w3.org/2000/svg"
22427
- }, props), _path$B || (_path$B = /*#__PURE__*/createElement("path", {
22429
+ }, props), _path$B || (_path$B = /*#__PURE__*/createElement$1("path", {
22428
22430
  d: "M7.468 3.75c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h1.186zm6.25 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.162.088-.324.134-.77.134h-1.186c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.162-.088.324-.134.77-.134h1.186z",
22429
22431
  fill: "#fff"
22430
22432
  })));
@@ -22441,13 +22443,13 @@ function _extends$D() {
22441
22443
  }, _extends$D.apply(null, arguments);
22442
22444
  }
22443
22445
  function SvgVolume(props) {
22444
- return /*#__PURE__*/createElement("svg", _extends$D({
22446
+ return /*#__PURE__*/createElement$1("svg", _extends$D({
22445
22447
  width: 20,
22446
22448
  height: 20,
22447
22449
  viewBox: "0 0 20.01 20.01",
22448
22450
  fill: "none",
22449
22451
  xmlns: "http://www.w3.org/2000/svg"
22450
- }, props), _path$C || (_path$C = /*#__PURE__*/createElement("path", {
22452
+ }, props), _path$C || (_path$C = /*#__PURE__*/createElement$1("path", {
22451
22453
  d: "M11.667 2.5c.46 0 .833.373.833.833v13.334c0 .46-.373.833-.833.833a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l4.595-4.422c.385-.37.9-.578 1.434-.578zm4.487 2.786a.75.75 0 011.06 0 6.667 6.667 0 010 9.428.75.75 0 01-1.06-1.06 5.167 5.167 0 000-7.307.75.75 0 010-1.061zm-2.122 2.121a.75.75 0 011.061 0 3.667 3.667 0 010 5.186.75.75 0 01-1.06-1.06 2.167 2.167 0 000-3.065.75.75 0 010-1.06z",
22452
22454
  fill: "#fff"
22453
22455
  })));
@@ -22464,13 +22466,13 @@ function _extends$E() {
22464
22466
  }, _extends$E.apply(null, arguments);
22465
22467
  }
22466
22468
  function SvgVolumeMute(props) {
22467
- return /*#__PURE__*/createElement("svg", _extends$E({
22469
+ return /*#__PURE__*/createElement$1("svg", _extends$E({
22468
22470
  width: 20,
22469
22471
  height: 20,
22470
22472
  viewBox: "0 0 20.01 20.01",
22471
22473
  fill: "none",
22472
22474
  xmlns: "http://www.w3.org/2000/svg"
22473
- }, props), _path$D || (_path$D = /*#__PURE__*/createElement("path", {
22475
+ }, props), _path$D || (_path$D = /*#__PURE__*/createElement$1("path", {
22474
22476
  d: "M4.763 2.746l11.655 11.658a.833.833 0 01-1.1 1.248l-.078-.07-2.74-2.74v3.825c0 .427-.321.78-.736.827l-.097.006a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l.775-.747-2.829-2.828a.833.833 0 011.179-1.179zm6.904-.246c.46 0 .833.373.833.833v4.8L8.812 4.445l1.421-1.367a2.068 2.068 0 011.274-.572l.16-.006z",
22475
22477
  fill: "#fff"
22476
22478
  })));
@@ -22487,13 +22489,13 @@ function _extends$F() {
22487
22489
  }, _extends$F.apply(null, arguments);
22488
22490
  }
22489
22491
  function SvgFullscreen(props) {
22490
- return /*#__PURE__*/createElement("svg", _extends$F({
22492
+ return /*#__PURE__*/createElement$1("svg", _extends$F({
22491
22493
  width: 20,
22492
22494
  height: 20,
22493
22495
  viewBox: "0 0 20.01 20.01",
22494
22496
  fill: "none",
22495
22497
  xmlns: "http://www.w3.org/2000/svg"
22496
- }, props), _path$E || (_path$E = /*#__PURE__*/createElement("path", {
22498
+ }, props), _path$E || (_path$E = /*#__PURE__*/createElement$1("path", {
22497
22499
  fillRule: "evenodd",
22498
22500
  clipRule: "evenodd",
22499
22501
  d: "M11.875 3.344c0-.466.378-.844.844-.844h3.937c.466 0 .844.378.844.844V7.28a.844.844 0 01-1.688 0v-1.9l-3.434 3.434a.844.844 0 01-1.193-1.193l3.434-3.434h-1.9a.844.844 0 01-.844-.844zM8.815 11.185c.33.33.33.863 0 1.193l-3.434 3.434H7.28a.844.844 0 010 1.688H3.344a.844.844 0 01-.844-.844V12.72a.844.844 0 111.688 0v1.9l3.434-3.434a.844.844 0 011.193 0z",
@@ -22512,13 +22514,13 @@ function _extends$G() {
22512
22514
  }, _extends$G.apply(null, arguments);
22513
22515
  }
22514
22516
  function SvgFullscreenExit(props) {
22515
- return /*#__PURE__*/createElement("svg", _extends$G({
22517
+ return /*#__PURE__*/createElement$1("svg", _extends$G({
22516
22518
  width: 20,
22517
22519
  height: 20,
22518
22520
  viewBox: "0 0 20.01 20.01",
22519
22521
  fill: "none",
22520
22522
  xmlns: "http://www.w3.org/2000/svg"
22521
- }, props), _path$F || (_path$F = /*#__PURE__*/createElement("path", {
22523
+ }, props), _path$F || (_path$F = /*#__PURE__*/createElement$1("path", {
22522
22524
  fillRule: "evenodd",
22523
22525
  clipRule: "evenodd",
22524
22526
  d: "M3.438 11.781c0-.466.377-.844.843-.844H8.22c.466 0 .844.378.844.844v3.938a.844.844 0 01-1.688 0v-1.9L3.94 17.252a.844.844 0 11-1.193-1.193l3.435-3.435h-1.9a.844.844 0 01-.844-.844zM17.253 2.747c.33.33.33.864 0 1.193l-3.435 3.435h1.899a.844.844 0 110 1.688h-3.936a.844.844 0 01-.844-.844V4.28a.844.844 0 011.688 0v1.9l3.435-3.434a.844.844 0 011.193 0z",
@@ -23807,19 +23809,19 @@ function _extends$H() {
23807
23809
  }, _extends$H.apply(null, arguments);
23808
23810
  }
23809
23811
  function SvgErrorIcon(props) {
23810
- return /*#__PURE__*/createElement("svg", _extends$H({
23812
+ return /*#__PURE__*/createElement$1("svg", _extends$H({
23811
23813
  width: 32,
23812
23814
  height: 32,
23813
23815
  viewBox: "0 0 32.01 32.01",
23814
23816
  fill: "none",
23815
23817
  xmlns: "http://www.w3.org/2000/svg"
23816
- }, props), _circle$1 || (_circle$1 = /*#__PURE__*/createElement("circle", {
23818
+ }, props), _circle$1 || (_circle$1 = /*#__PURE__*/createElement$1("circle", {
23817
23819
  cx: 16,
23818
23820
  cy: 16,
23819
23821
  r: 12,
23820
23822
  stroke: "#FA4C56",
23821
23823
  strokeWidth: 2
23822
- })), _path$G || (_path$G = /*#__PURE__*/createElement("path", {
23824
+ })), _path$G || (_path$G = /*#__PURE__*/createElement$1("path", {
23823
23825
  fillRule: "evenodd",
23824
23826
  clipRule: "evenodd",
23825
23827
  d: "M16 9c.552 0 1 .537 1 1.2v6c0 .663-.448 1.2-1 1.2s-1-.537-1-1.2v-6c0-.663.448-1.2 1-1.2zM15 20.994c0-.55.445-.994.994-.994h.012a.994.994 0 110 1.988h-.012a.994.994 0 01-.994-.994z",
@@ -23838,13 +23840,13 @@ function _extends$I() {
23838
23840
  }, _extends$I.apply(null, arguments);
23839
23841
  }
23840
23842
  function SvgSelectionIcon(props) {
23841
- return /*#__PURE__*/createElement("svg", _extends$I({
23843
+ return /*#__PURE__*/createElement$1("svg", _extends$I({
23842
23844
  width: 24,
23843
23845
  height: 24,
23844
23846
  viewBox: "0 0 24.01 24.01",
23845
23847
  fill: "none",
23846
23848
  xmlns: "http://www.w3.org/2000/svg"
23847
- }, props), _path$H || (_path$H = /*#__PURE__*/createElement("path", {
23849
+ }, props), _path$H || (_path$H = /*#__PURE__*/createElement$1("path", {
23848
23850
  fillRule: "evenodd",
23849
23851
  clipRule: "evenodd",
23850
23852
  d: "M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm5.749-13.501a1 1 0 00-1.414-1.414l-6.168 6.167-2.502-2.5a1 1 0 00-1.414 1.413l3.209 3.209a1 1 0 001.414 0l6.875-6.875z",
@@ -24093,12 +24095,12 @@ function _extends$J() {
24093
24095
  }, _extends$J.apply(null, arguments);
24094
24096
  }
24095
24097
  function SvgDeleteIcon(props) {
24096
- return /*#__PURE__*/createElement("svg", _extends$J({
24098
+ return /*#__PURE__*/createElement$1("svg", _extends$J({
24097
24099
  width: 20,
24098
24100
  height: 20,
24099
24101
  fill: "none",
24100
24102
  xmlns: "http://www.w3.org/2000/svg"
24101
- }, props), _path$I || (_path$I = /*#__PURE__*/createElement("path", {
24103
+ }, props), _path$I || (_path$I = /*#__PURE__*/createElement$1("path", {
24102
24104
  d: "M15.714 7.143v7.5a3.214 3.214 0 01-3.214 3.214h-5a3.214 3.214 0 01-3.214-3.214v-7.5h-.507a.922.922 0 01-.922-.922V5.178c0-1.085.88-1.964 1.964-1.964h1.18a2.144 2.144 0 011.856-1.071h4.286c.783 0 1.482.423 1.856 1.071h1.18c1.085 0 1.964.88 1.964 1.964v1.043a.922.922 0 01-.922.922h-.507zM15 5.714h.714v-.536a.536.536 0 00-.535-.535h-1.652a.714.714 0 01-.692-.537.715.715 0 00-.692-.535H7.857a.715.715 0 00-.692.535.714.714 0 01-.691.537H4.82a.536.536 0 00-.535.535v.536H15zM5.714 7.143v7.5c0 .986.8 1.785 1.786 1.785h5c.986 0 1.786-.8 1.786-1.785v-7.5H5.714z",
24103
24105
  fill: "CurrentColor"
24104
24106
  })));
@@ -24115,13 +24117,13 @@ function _extends$K() {
24115
24117
  }, _extends$K.apply(null, arguments);
24116
24118
  }
24117
24119
  function SvgCheckCircle(props) {
24118
- return /*#__PURE__*/createElement("svg", _extends$K({
24120
+ return /*#__PURE__*/createElement$1("svg", _extends$K({
24119
24121
  width: 18,
24120
24122
  height: 18,
24121
24123
  viewBox: "0 0 18.01 18.01",
24122
24124
  fill: "none",
24123
24125
  xmlns: "http://www.w3.org/2000/svg"
24124
- }, props), _path$J || (_path$J = /*#__PURE__*/createElement("path", {
24126
+ }, props), _path$J || (_path$J = /*#__PURE__*/createElement$1("path", {
24125
24127
  fillRule: "evenodd",
24126
24128
  clipRule: "evenodd",
24127
24129
  d: "M9 2.6a6.4 6.4 0 100 12.8A6.4 6.4 0 009 2.6zm-5.657.743a8 8 0 1111.314 11.314A8 8 0 013.343 3.343zm8.623 3.491a.8.8 0 010 1.132l-3.2 3.2a.8.8 0 01-1.132 0l-1.6-1.6a.8.8 0 011.132-1.132L8.2 9.47l2.634-2.635a.8.8 0 011.132 0z",
@@ -24140,12 +24142,12 @@ function _extends$L() {
24140
24142
  }, _extends$L.apply(null, arguments);
24141
24143
  }
24142
24144
  function SvgReportIcon(props) {
24143
- return /*#__PURE__*/createElement("svg", _extends$L({
24145
+ return /*#__PURE__*/createElement$1("svg", _extends$L({
24144
24146
  width: 18,
24145
24147
  height: 18,
24146
24148
  fill: "none",
24147
24149
  xmlns: "http://www.w3.org/2000/svg"
24148
- }, props), _path$K || (_path$K = /*#__PURE__*/createElement("path", {
24150
+ }, props), _path$K || (_path$K = /*#__PURE__*/createElement$1("path", {
24149
24151
  fillRule: "evenodd",
24150
24152
  clipRule: "evenodd",
24151
24153
  d: "M6.623 1.5h4.754c.51-.001.908.16 1.274.528l3.321 3.32c.362.361.53.756.528 1.275v4.754c.001.519-.166.914-.528 1.274l-3.32 3.321c-.36.362-.756.53-1.275.528H6.623a1.675 1.675 0 01-1.274-.528l-3.321-3.32a1.675 1.675 0 01-.528-1.275V6.623a1.675 1.675 0 01.528-1.274l3.32-3.321A1.675 1.675 0 016.624 1.5zm-.337 1.52L3.02 6.285c-.136.136-.155.183-.155.375v4.678c0 .19.019.239.155.375l3.267 3.267c.136.136.183.155.375.155h4.678c.192 0 .239-.019.375-.155l3.267-3.267c.136-.136.155-.186.155-.375V6.66c0-.192-.02-.24-.155-.375L11.714 3.02c-.137-.136-.184-.155-.375-.155H6.66c-.192 0-.241.021-.375.155zm3.472 9.01a.758.758 0 11-1.516 0 .758.758 0 011.516 0zm-.076-6.136a.682.682 0 00-1.364 0v3.94a.682.682 0 001.364 0v-3.94z",
@@ -24164,13 +24166,13 @@ function _extends$M() {
24164
24166
  }, _extends$M.apply(null, arguments);
24165
24167
  }
24166
24168
  function SvgEditIcon(props) {
24167
- return /*#__PURE__*/createElement("svg", _extends$M({
24169
+ return /*#__PURE__*/createElement$1("svg", _extends$M({
24168
24170
  width: 20,
24169
24171
  height: 20,
24170
24172
  viewBox: "0 0 20.01 20.01",
24171
24173
  fill: "none",
24172
24174
  xmlns: "http://www.w3.org/2000/svg"
24173
- }, props), _path$L || (_path$L = /*#__PURE__*/createElement("path", {
24175
+ }, props), _path$L || (_path$L = /*#__PURE__*/createElement$1("path", {
24174
24176
  fillRule: "evenodd",
24175
24177
  clipRule: "evenodd",
24176
24178
  d: "M11.883 6.232l-7.531 7.53a.917.917 0 00-.269.65v1.422c0 .046.038.083.084.083h1.422a.917.917 0 00.648-.268l7.531-7.531-1.885-1.886zm1.06-1.06l1.886 1.885.943-.943a.5.5 0 000-.707l-1.179-1.179a.5.5 0 00-.707 0l-.943.943zm-9.652 7.53l9.534-9.534a2 2 0 012.829 0l1.178 1.178a2 2 0 010 2.829l-9.534 9.534a2.417 2.417 0 01-1.709.708H4.167a1.583 1.583 0 01-1.584-1.583V14.41c0-.64.255-1.256.708-1.709z",
@@ -24189,12 +24191,12 @@ function _extends$N() {
24189
24191
  }, _extends$N.apply(null, arguments);
24190
24192
  }
24191
24193
  function SvgResend(props) {
24192
- return /*#__PURE__*/createElement("svg", _extends$N({
24194
+ return /*#__PURE__*/createElement$1("svg", _extends$N({
24193
24195
  width: 17,
24194
24196
  height: 15,
24195
24197
  fill: "none",
24196
24198
  xmlns: "http://www.w3.org/2000/svg"
24197
- }, props), _path$M || (_path$M = /*#__PURE__*/createElement("path", {
24199
+ }, props), _path$M || (_path$M = /*#__PURE__*/createElement$1("path", {
24198
24200
  d: "M15.913 7.425l-7.23-6.281a.1.1 0 00-.165.075v3.585a.101.101 0 01-.095.101c-.616.037-4.069.305-5.627 1.728C.894 8.371.966 12.608 1.02 13.726c.005.093.123.126.179.05.49-.66 2.003-2.597 3.359-3.243 1.268-.604 3.411-.476 3.872-.44a.097.097 0 01.089.098v3.59a.1.1 0 00.166.075l7.23-6.28a.1.1 0 000-.151z",
24199
24201
  stroke: "currentColor",
24200
24202
  strokeWidth: 1.4
@@ -24212,18 +24214,18 @@ function _extends$O() {
24212
24214
  }, _extends$O.apply(null, arguments);
24213
24215
  }
24214
24216
  function SvgEmojiSmileIcon(props) {
24215
- return /*#__PURE__*/createElement("svg", _extends$O({
24217
+ return /*#__PURE__*/createElement$1("svg", _extends$O({
24216
24218
  width: 20,
24217
24219
  height: 20,
24218
24220
  viewBox: "0 0 20.01 20.01",
24219
24221
  fill: "none",
24220
24222
  xmlns: "http://www.w3.org/2000/svg"
24221
- }, props), _path$N || (_path$N = /*#__PURE__*/createElement("path", {
24223
+ }, props), _path$N || (_path$N = /*#__PURE__*/createElement$1("path", {
24222
24224
  fillRule: "evenodd",
24223
24225
  clipRule: "evenodd",
24224
24226
  d: "M10 3.043a6.957 6.957 0 100 13.914 6.957 6.957 0 000-13.914zM1.667 10a8.333 8.333 0 1116.666 0 8.333 8.333 0 01-16.666 0zm4.97-2.293a1.07 1.07 0 112.14 0 1.07 1.07 0 01-2.14 0zm4.586 0a1.07 1.07 0 112.141 0 1.07 1.07 0 01-2.14 0z",
24225
24227
  fill: "CurrentColor"
24226
- })), _path2$4 || (_path2$4 = /*#__PURE__*/createElement("path", {
24228
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/createElement$1("path", {
24227
24229
  fillRule: "evenodd",
24228
24230
  clipRule: "evenodd",
24229
24231
  d: "M6.546 11.287a.714.714 0 01.977.26 2.865 2.865 0 004.955 0 .714.714 0 011.235.717 4.293 4.293 0 01-7.426 0 .714.714 0 01.26-.977z",
@@ -24242,13 +24244,13 @@ function _extends$P() {
24242
24244
  }, _extends$P.apply(null, arguments);
24243
24245
  }
24244
24246
  function SvgReplyIcon(props) {
24245
- return /*#__PURE__*/createElement("svg", _extends$P({
24247
+ return /*#__PURE__*/createElement$1("svg", _extends$P({
24246
24248
  width: 20,
24247
24249
  height: 20,
24248
24250
  viewBox: "0 0 20.01 20.01",
24249
24251
  fill: "none",
24250
24252
  xmlns: "http://www.w3.org/2000/svg"
24251
- }, props), _path$O || (_path$O = /*#__PURE__*/createElement("path", {
24253
+ }, props), _path$O || (_path$O = /*#__PURE__*/createElement$1("path", {
24252
24254
  fillRule: "evenodd",
24253
24255
  clipRule: "evenodd",
24254
24256
  d: "M6.364 3.637a.75.75 0 010 1.06L4.31 6.75h9.439a4.5 4.5 0 110 9H10a.75.75 0 010-1.5h3.75a3 3 0 100-6H4.31l2.054 2.053a.75.75 0 01-1.061 1.061L1.97 8.031a.75.75 0 010-1.061l3.333-3.333a.75.75 0 011.06 0z",
@@ -24267,13 +24269,13 @@ function _extends$Q() {
24267
24269
  }, _extends$Q.apply(null, arguments);
24268
24270
  }
24269
24271
  function SvgCopyIcon(props) {
24270
- return /*#__PURE__*/createElement("svg", _extends$Q({
24272
+ return /*#__PURE__*/createElement$1("svg", _extends$Q({
24271
24273
  width: 20,
24272
24274
  height: 20,
24273
24275
  viewBox: "0 0 20.01 20.01",
24274
24276
  fill: "none",
24275
24277
  xmlns: "http://www.w3.org/2000/svg"
24276
- }, props), _path$P || (_path$P = /*#__PURE__*/createElement("path", {
24278
+ }, props), _path$P || (_path$P = /*#__PURE__*/createElement$1("path", {
24277
24279
  fillRule: "evenodd",
24278
24280
  clipRule: "evenodd",
24279
24281
  d: "M14.121 3.564c-.497-.041-1.134-.042-2.042-.042H6.401a.72.72 0 010-1.439h5.71c.868 0 1.565 0 2.127.046.578.047 1.079.146 1.54.381a3.919 3.919 0 011.711 1.712c.235.46.334.961.382 1.54.046.562.046 1.258.046 2.127v5.71a.72.72 0 01-1.44 0V7.92c0-.908 0-1.545-.041-2.043-.04-.489-.115-.778-.229-1.002a2.48 2.48 0 00-1.083-1.083c-.224-.114-.514-.19-1.003-.23zM5.334 4.882h6.533c.424 0 .785 0 1.081.024.311.025.614.081.904.229.436.222.79.577 1.013 1.013.147.29.203.592.229.903.024.297.024.657.024 1.081v6.534c0 .424 0 .784-.024 1.08-.026.312-.082.615-.229.904a2.32 2.32 0 01-1.013 1.014c-.29.147-.593.203-.904.228-.296.024-.657.024-1.08.024H5.333c-.424 0-.785 0-1.081-.024-.311-.025-.614-.08-.904-.228a2.32 2.32 0 01-1.013-1.014c-.147-.29-.203-.592-.229-.903-.024-.296-.024-.657-.024-1.081V8.132c0-.424 0-.784.024-1.08.026-.312.082-.615.229-.904a2.319 2.319 0 011.013-1.013c.29-.148.593-.204.904-.229.296-.024.657-.024 1.08-.024zM4.37 6.34c-.222.018-.314.05-.367.076a.88.88 0 00-.384.385c-.027.052-.059.144-.077.367-.019.23-.02.532-.02.991v6.478c0 .46.001.761.02.992.018.222.05.314.077.367a.88.88 0 00.384.384c.053.027.145.058.367.076.23.02.532.02.992.02h6.477c.46 0 .761 0 .992-.02.222-.018.314-.05.367-.076a.88.88 0 00.384-.384c.027-.053.059-.145.077-.367.019-.231.02-.533.02-.992V8.16c0-.46-.001-.76-.02-.991-.018-.223-.05-.315-.077-.367a.88.88 0 00-.384-.385c-.053-.027-.145-.058-.367-.076-.23-.02-.532-.02-.992-.02H5.362c-.46 0-.761 0-.992.02z",
@@ -24292,13 +24294,13 @@ function _extends$R() {
24292
24294
  }, _extends$R.apply(null, arguments);
24293
24295
  }
24294
24296
  function SvgReplyInThreadIcon(props) {
24295
- return /*#__PURE__*/createElement("svg", _extends$R({
24297
+ return /*#__PURE__*/createElement$1("svg", _extends$R({
24296
24298
  width: 20,
24297
24299
  height: 20,
24298
24300
  viewBox: "0 0 20.01 20.01",
24299
24301
  fill: "none",
24300
24302
  xmlns: "http://www.w3.org/2000/svg"
24301
- }, props), _path$Q || (_path$Q = /*#__PURE__*/createElement("path", {
24303
+ }, props), _path$Q || (_path$Q = /*#__PURE__*/createElement$1("path", {
24302
24304
  fillRule: "evenodd",
24303
24305
  clipRule: "evenodd",
24304
24306
  d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
@@ -24547,18 +24549,18 @@ function _extends$S() {
24547
24549
  }, _extends$S.apply(null, arguments);
24548
24550
  }
24549
24551
  function SvgFileIcon(props) {
24550
- return /*#__PURE__*/createElement("svg", _extends$S({
24552
+ return /*#__PURE__*/createElement$1("svg", _extends$S({
24551
24553
  width: 40,
24552
24554
  height: 40,
24553
24555
  viewBox: "0 0 40.01 40.01",
24554
24556
  fill: "none",
24555
24557
  xmlns: "http://www.w3.org/2000/svg"
24556
- }, props), _rect$1 || (_rect$1 = /*#__PURE__*/createElement("rect", {
24558
+ }, props), _rect$1 || (_rect$1 = /*#__PURE__*/createElement$1("rect", {
24557
24559
  width: 40,
24558
24560
  height: 40,
24559
24561
  rx: 20,
24560
24562
  fill: "Transparent"
24561
- })), _path$R || (_path$R = /*#__PURE__*/createElement("path", {
24563
+ })), _path$R || (_path$R = /*#__PURE__*/createElement$1("path", {
24562
24564
  d: "M22.48 10.097c.298.068.56.177.819.338.258.162.468.332 1.015.88l3.372 3.37c.547.548.717.758.879 1.016.161.258.27.521.338.818.069.297.097.565.097 1.34v7.295c0 1.337-.14 1.822-.4 2.311a2.726 2.726 0 01-1.135 1.134c-.489.262-.974.401-2.31.401h-9.31c-1.337 0-1.821-.14-2.31-.4a2.726 2.726 0 01-1.134-1.135c-.262-.489-.401-.974-.401-2.31v-11.31c0-1.337.14-1.821.4-2.31a2.726 2.726 0 011.135-1.134c.489-.262.973-.401 2.31-.401h5.296c.775 0 1.043.028 1.34.097zm-.68 1.827a.3.3 0 00-.3.3V16a.5.5 0 00.5.5h3.776a.3.3 0 00.212-.512l-3.976-3.976a.3.3 0 00-.212-.088z",
24563
24565
  fill: "#fff"
24564
24566
  })));
@@ -24575,20 +24577,20 @@ function _extends$T() {
24575
24577
  }, _extends$T.apply(null, arguments);
24576
24578
  }
24577
24579
  function SvgDeleteUpload(props) {
24578
- return /*#__PURE__*/createElement("svg", _extends$T({
24580
+ return /*#__PURE__*/createElement$1("svg", _extends$T({
24579
24581
  width: 20,
24580
24582
  height: 20,
24581
24583
  viewBox: "0 0 20.01 20.01",
24582
24584
  fill: "none",
24583
24585
  xmlns: "http://www.w3.org/2000/svg"
24584
- }, props), _circle$2 || (_circle$2 = /*#__PURE__*/createElement("circle", {
24586
+ }, props), _circle$2 || (_circle$2 = /*#__PURE__*/createElement$1("circle", {
24585
24587
  cx: 10,
24586
24588
  cy: 10,
24587
24589
  r: 9.3,
24588
24590
  fill: "CurrentColor",
24589
24591
  stroke: "#fff",
24590
24592
  strokeWidth: 1.4
24591
- })), _path$S || (_path$S = /*#__PURE__*/createElement("path", {
24593
+ })), _path$S || (_path$S = /*#__PURE__*/createElement$1("path", {
24592
24594
  d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
24593
24595
  stroke: "#fff",
24594
24596
  strokeWidth: 1.4,
@@ -24608,13 +24610,13 @@ function _extends$U() {
24608
24610
  }, _extends$U.apply(null, arguments);
24609
24611
  }
24610
24612
  function SvgUpload(props) {
24611
- return /*#__PURE__*/createElement("svg", _extends$U({
24613
+ return /*#__PURE__*/createElement$1("svg", _extends$U({
24612
24614
  width: 32,
24613
24615
  height: 32,
24614
24616
  viewBox: "0 0 32.01 32.01",
24615
24617
  fill: "none",
24616
24618
  xmlns: "http://www.w3.org/2000/svg"
24617
- }, props), _path$T || (_path$T = /*#__PURE__*/createElement("path", {
24619
+ }, props), _path$T || (_path$T = /*#__PURE__*/createElement$1("path", {
24618
24620
  fillRule: "evenodd",
24619
24621
  clipRule: "evenodd",
24620
24622
  d: "M14.5 20.5a1.5 1.5 0 003 0V7.121l4.44 4.44a1.5 1.5 0 002.12-2.122l-7-7a1.5 1.5 0 00-2.12 0l-7 7a1.5 1.5 0 002.12 2.122l4.44-4.44V20.5zm-9 4.5a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3h-21z",
@@ -24633,18 +24635,18 @@ function _extends$V() {
24633
24635
  }, _extends$V.apply(null, arguments);
24634
24636
  }
24635
24637
  function SvgPlayVideo(props) {
24636
- return /*#__PURE__*/createElement("svg", _extends$V({
24638
+ return /*#__PURE__*/createElement$1("svg", _extends$V({
24637
24639
  width: 56,
24638
24640
  height: 56,
24639
24641
  fill: "none",
24640
24642
  xmlns: "http://www.w3.org/2000/svg"
24641
- }, props), _circle$3 || (_circle$3 = /*#__PURE__*/createElement("circle", {
24643
+ }, props), _circle$3 || (_circle$3 = /*#__PURE__*/createElement$1("circle", {
24642
24644
  cx: 28,
24643
24645
  cy: 28,
24644
24646
  r: 28,
24645
24647
  fill: "#17191C",
24646
24648
  fillOpacity: 0.4
24647
- })), _path$U || (_path$U = /*#__PURE__*/createElement("path", {
24649
+ })), _path$U || (_path$U = /*#__PURE__*/createElement$1("path", {
24648
24650
  d: "M38.048 26.262c1.27.767 1.27 2.706 0 3.473l-13.224 7.996c-1.258.76-2.824-.202-2.824-1.737V20.003c0-1.535 1.566-2.498 2.824-1.737l13.224 7.996z",
24649
24651
  fill: "#fff"
24650
24652
  })));
@@ -24837,18 +24839,18 @@ function _extends$W() {
24837
24839
  }, _extends$W.apply(null, arguments);
24838
24840
  }
24839
24841
  function SvgPlay(props) {
24840
- return /*#__PURE__*/createElement("svg", _extends$W({
24842
+ return /*#__PURE__*/createElement$1("svg", _extends$W({
24841
24843
  width: 32,
24842
24844
  height: 32,
24843
24845
  viewBox: "0 0 33 33",
24844
24846
  fill: "none",
24845
24847
  xmlns: "http://www.w3.org/2000/svg"
24846
- }, props), _circle$4 || (_circle$4 = /*#__PURE__*/createElement("circle", {
24848
+ }, props), _circle$4 || (_circle$4 = /*#__PURE__*/createElement$1("circle", {
24847
24849
  cx: 16,
24848
24850
  cy: 16,
24849
24851
  r: 16,
24850
24852
  fill: "CurrentColor"
24851
- })), _path$V || (_path$V = /*#__PURE__*/createElement("path", {
24853
+ })), _path$V || (_path$V = /*#__PURE__*/createElement$1("path", {
24852
24854
  d: "M21.652 15.022c.714.432.714 1.522 0 1.954l-7.438 4.498c-.708.428-1.589-.114-1.589-.977v-8.995c0-.864.88-1.405 1.589-.977l7.438 4.497z",
24853
24855
  fill: "#fff"
24854
24856
  })));
@@ -24865,23 +24867,1822 @@ function _extends$X() {
24865
24867
  }, _extends$X.apply(null, arguments);
24866
24868
  }
24867
24869
  function SvgPause(props) {
24868
- return /*#__PURE__*/createElement("svg", _extends$X({
24870
+ return /*#__PURE__*/createElement$1("svg", _extends$X({
24869
24871
  width: 32,
24870
24872
  height: 32,
24871
24873
  viewBox: "0 0 33 33",
24872
24874
  fill: "none",
24873
24875
  xmlns: "http://www.w3.org/2000/svg"
24874
- }, props), _circle$5 || (_circle$5 = /*#__PURE__*/createElement("circle", {
24876
+ }, props), _circle$5 || (_circle$5 = /*#__PURE__*/createElement$1("circle", {
24875
24877
  cx: 16,
24876
24878
  cy: 16,
24877
24879
  r: 16,
24878
24880
  fill: "CurrentColor"
24879
- })), _path$W || (_path$W = /*#__PURE__*/createElement("path", {
24881
+ })), _path$W || (_path$W = /*#__PURE__*/createElement$1("path", {
24880
24882
  d: "M13.721 10.375c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12h-1.067c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067zm5.625 0c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12H18.28c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067z",
24881
24883
  fill: "#fff"
24882
24884
  })));
24883
24885
  }
24884
24886
 
24887
+ /** A simple event emitter that can be used to listen to and emit events. */
24888
+ class EventEmitter {
24889
+ constructor() {
24890
+ this.listeners = {};
24891
+ }
24892
+ /** Subscribe to an event. Returns an unsubscribe function. */
24893
+ on(event, listener, options) {
24894
+ if (!this.listeners[event]) {
24895
+ this.listeners[event] = new Set();
24896
+ }
24897
+ this.listeners[event].add(listener);
24898
+ if (options === null || options === void 0 ? void 0 : options.once) {
24899
+ const unsubscribeOnce = () => {
24900
+ this.un(event, unsubscribeOnce);
24901
+ this.un(event, listener);
24902
+ };
24903
+ this.on(event, unsubscribeOnce);
24904
+ return unsubscribeOnce;
24905
+ }
24906
+ return () => this.un(event, listener);
24907
+ }
24908
+ /** Unsubscribe from an event */
24909
+ un(event, listener) {
24910
+ var _a;
24911
+ (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.delete(listener);
24912
+ }
24913
+ /** Subscribe to an event only once */
24914
+ once(event, listener) {
24915
+ return this.on(event, listener, { once: true });
24916
+ }
24917
+ /** Clear all events */
24918
+ unAll() {
24919
+ this.listeners = {};
24920
+ }
24921
+ /** Emit an event */
24922
+ emit(eventName, ...args) {
24923
+ if (this.listeners[eventName]) {
24924
+ this.listeners[eventName].forEach((listener) => listener(...args));
24925
+ }
24926
+ }
24927
+ }
24928
+
24929
+ /** Base class for wavesurfer plugins */
24930
+ class BasePlugin extends EventEmitter {
24931
+ /** Create a plugin instance */
24932
+ constructor(options) {
24933
+ super();
24934
+ this.subscriptions = [];
24935
+ this.options = options;
24936
+ }
24937
+ /** Called after this.wavesurfer is available */
24938
+ onInit() {
24939
+ return;
24940
+ }
24941
+ /** Do not call directly, only called by WavesSurfer internally */
24942
+ _init(wavesurfer) {
24943
+ this.wavesurfer = wavesurfer;
24944
+ this.onInit();
24945
+ }
24946
+ /** Destroy the plugin and unsubscribe from all events */
24947
+ destroy() {
24948
+ this.emit('destroy');
24949
+ this.subscriptions.forEach((unsubscribe) => unsubscribe());
24950
+ }
24951
+ }
24952
+
24953
+ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
24954
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
24955
+ return new (P || (P = Promise))(function (resolve, reject) {
24956
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
24957
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
24958
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
24959
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
24960
+ });
24961
+ };
24962
+ /** Decode an array buffer into an audio buffer */
24963
+ function decode(audioData, sampleRate) {
24964
+ return __awaiter(this, void 0, void 0, function* () {
24965
+ const audioCtx = new AudioContext({ sampleRate });
24966
+ const decode = audioCtx.decodeAudioData(audioData);
24967
+ return decode.finally(() => audioCtx.close());
24968
+ });
24969
+ }
24970
+ /** Normalize peaks to -1..1 */
24971
+ function normalize(channelData) {
24972
+ const firstChannel = channelData[0];
24973
+ if (firstChannel.some((n) => n > 1 || n < -1)) {
24974
+ const length = firstChannel.length;
24975
+ let max = 0;
24976
+ for (let i = 0; i < length; i++) {
24977
+ const absN = Math.abs(firstChannel[i]);
24978
+ if (absN > max)
24979
+ max = absN;
24980
+ }
24981
+ for (const channel of channelData) {
24982
+ for (let i = 0; i < length; i++) {
24983
+ channel[i] /= max;
24984
+ }
24985
+ }
24986
+ }
24987
+ return channelData;
24988
+ }
24989
+ /** Create an audio buffer from pre-decoded audio data */
24990
+ function createBuffer(channelData, duration) {
24991
+ // If a single array of numbers is passed, make it an array of arrays
24992
+ if (typeof channelData[0] === 'number')
24993
+ channelData = [channelData];
24994
+ // Normalize to -1..1
24995
+ normalize(channelData);
24996
+ return {
24997
+ duration,
24998
+ length: channelData[0].length,
24999
+ sampleRate: channelData[0].length / duration,
25000
+ numberOfChannels: channelData.length,
25001
+ getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
25002
+ copyFromChannel: AudioBuffer.prototype.copyFromChannel,
25003
+ copyToChannel: AudioBuffer.prototype.copyToChannel,
25004
+ };
25005
+ }
25006
+ const Decoder = {
25007
+ decode,
25008
+ createBuffer,
25009
+ };
25010
+
25011
+ function renderNode(tagName, content) {
25012
+ const element = content.xmlns
25013
+ ? document.createElementNS(content.xmlns, tagName)
25014
+ : document.createElement(tagName);
25015
+ for (const [key, value] of Object.entries(content)) {
25016
+ if (key === 'children') {
25017
+ for (const [key, value] of Object.entries(content)) {
25018
+ if (typeof value === 'string') {
25019
+ element.appendChild(document.createTextNode(value));
25020
+ }
25021
+ else {
25022
+ element.appendChild(renderNode(key, value));
25023
+ }
25024
+ }
25025
+ }
25026
+ else if (key === 'style') {
25027
+ Object.assign(element.style, value);
25028
+ }
25029
+ else if (key === 'textContent') {
25030
+ element.textContent = value;
25031
+ }
25032
+ else {
25033
+ element.setAttribute(key, value.toString());
25034
+ }
25035
+ }
25036
+ return element;
25037
+ }
25038
+ function createElement(tagName, content, container) {
25039
+ const el = renderNode(tagName, content || {});
25040
+ container === null || container === void 0 ? void 0 : container.appendChild(el);
25041
+ return el;
25042
+ }
25043
+
25044
+ var dom = {
25045
+ __proto__: null,
25046
+ createElement: createElement,
25047
+ 'default': createElement
25048
+ };
25049
+
25050
+ var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
25051
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
25052
+ return new (P || (P = Promise))(function (resolve, reject) {
25053
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25054
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
25055
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
25056
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
25057
+ });
25058
+ };
25059
+ function watchProgress(response, progressCallback) {
25060
+ return __awaiter$1(this, void 0, void 0, function* () {
25061
+ if (!response.body || !response.headers)
25062
+ return;
25063
+ const reader = response.body.getReader();
25064
+ const contentLength = Number(response.headers.get('Content-Length')) || 0;
25065
+ let receivedLength = 0;
25066
+ // Process the data
25067
+ const processChunk = (value) => __awaiter$1(this, void 0, void 0, function* () {
25068
+ // Add to the received length
25069
+ receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
25070
+ const percentage = Math.round((receivedLength / contentLength) * 100);
25071
+ progressCallback(percentage);
25072
+ });
25073
+ const read = () => __awaiter$1(this, void 0, void 0, function* () {
25074
+ let data;
25075
+ try {
25076
+ data = yield reader.read();
25077
+ }
25078
+ catch (_a) {
25079
+ // Ignore errors because we can only handle the main response
25080
+ return;
25081
+ }
25082
+ // Continue reading data until done
25083
+ if (!data.done) {
25084
+ processChunk(data.value);
25085
+ yield read();
25086
+ }
25087
+ });
25088
+ read();
25089
+ });
25090
+ }
25091
+ function fetchBlob(url, progressCallback, requestInit) {
25092
+ return __awaiter$1(this, void 0, void 0, function* () {
25093
+ // Fetch the resource
25094
+ const response = yield fetch(url, requestInit);
25095
+ if (response.status >= 400) {
25096
+ throw new Error(`Failed to fetch ${url}: ${response.status} (${response.statusText})`);
25097
+ }
25098
+ // Read the data to track progress
25099
+ watchProgress(response.clone(), progressCallback);
25100
+ return response.blob();
25101
+ });
25102
+ }
25103
+ const Fetcher = {
25104
+ fetchBlob,
25105
+ };
25106
+
25107
+ var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
25108
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
25109
+ return new (P || (P = Promise))(function (resolve, reject) {
25110
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25111
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
25112
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
25113
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
25114
+ });
25115
+ };
25116
+ class Player extends EventEmitter {
25117
+ constructor(options) {
25118
+ super();
25119
+ this.isExternalMedia = false;
25120
+ if (options.media) {
25121
+ this.media = options.media;
25122
+ this.isExternalMedia = true;
25123
+ }
25124
+ else {
25125
+ this.media = document.createElement('audio');
25126
+ }
25127
+ // Controls
25128
+ if (options.mediaControls) {
25129
+ this.media.controls = true;
25130
+ }
25131
+ // Autoplay
25132
+ if (options.autoplay) {
25133
+ this.media.autoplay = true;
25134
+ }
25135
+ // Speed
25136
+ if (options.playbackRate != null) {
25137
+ this.onMediaEvent('canplay', () => {
25138
+ if (options.playbackRate != null) {
25139
+ this.media.playbackRate = options.playbackRate;
25140
+ }
25141
+ }, { once: true });
25142
+ }
25143
+ }
25144
+ onMediaEvent(event, callback, options) {
25145
+ this.media.addEventListener(event, callback, options);
25146
+ return () => this.media.removeEventListener(event, callback, options);
25147
+ }
25148
+ getSrc() {
25149
+ return this.media.currentSrc || this.media.src || '';
25150
+ }
25151
+ revokeSrc() {
25152
+ const src = this.getSrc();
25153
+ if (src.startsWith('blob:')) {
25154
+ URL.revokeObjectURL(src);
25155
+ }
25156
+ }
25157
+ canPlayType(type) {
25158
+ return this.media.canPlayType(type) !== '';
25159
+ }
25160
+ setSrc(url, blob) {
25161
+ const src = this.getSrc();
25162
+ if (url && src === url)
25163
+ return;
25164
+ this.revokeSrc();
25165
+ const newSrc = blob instanceof Blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
25166
+ // Reset the media element, otherwise it keeps the previous source
25167
+ if (src) {
25168
+ this.media.src = '';
25169
+ }
25170
+ try {
25171
+ this.media.src = newSrc;
25172
+ }
25173
+ catch (e) {
25174
+ this.media.src = url;
25175
+ }
25176
+ }
25177
+ destroy() {
25178
+ if (this.isExternalMedia)
25179
+ return;
25180
+ this.media.pause();
25181
+ this.media.remove();
25182
+ this.revokeSrc();
25183
+ this.media.src = '';
25184
+ // Load resets the media element to its initial state
25185
+ this.media.load();
25186
+ }
25187
+ setMediaElement(element) {
25188
+ this.media = element;
25189
+ }
25190
+ /** Start playing the audio */
25191
+ play() {
25192
+ return __awaiter$2(this, void 0, void 0, function* () {
25193
+ return this.media.play();
25194
+ });
25195
+ }
25196
+ /** Pause the audio */
25197
+ pause() {
25198
+ this.media.pause();
25199
+ }
25200
+ /** Check if the audio is playing */
25201
+ isPlaying() {
25202
+ return !this.media.paused && !this.media.ended;
25203
+ }
25204
+ /** Jump to a specific time in the audio (in seconds) */
25205
+ setTime(time) {
25206
+ this.media.currentTime = Math.max(0, Math.min(time, this.getDuration()));
25207
+ }
25208
+ /** Get the duration of the audio in seconds */
25209
+ getDuration() {
25210
+ return this.media.duration;
25211
+ }
25212
+ /** Get the current audio position in seconds */
25213
+ getCurrentTime() {
25214
+ return this.media.currentTime;
25215
+ }
25216
+ /** Get the audio volume */
25217
+ getVolume() {
25218
+ return this.media.volume;
25219
+ }
25220
+ /** Set the audio volume */
25221
+ setVolume(volume) {
25222
+ this.media.volume = volume;
25223
+ }
25224
+ /** Get the audio muted state */
25225
+ getMuted() {
25226
+ return this.media.muted;
25227
+ }
25228
+ /** Mute or unmute the audio */
25229
+ setMuted(muted) {
25230
+ this.media.muted = muted;
25231
+ }
25232
+ /** Get the playback speed */
25233
+ getPlaybackRate() {
25234
+ return this.media.playbackRate;
25235
+ }
25236
+ /** Check if the audio is seeking */
25237
+ isSeeking() {
25238
+ return this.media.seeking;
25239
+ }
25240
+ /** Set the playback speed, pass an optional false to NOT preserve the pitch */
25241
+ setPlaybackRate(rate, preservePitch) {
25242
+ // preservePitch is true by default in most browsers
25243
+ if (preservePitch != null) {
25244
+ this.media.preservesPitch = preservePitch;
25245
+ }
25246
+ this.media.playbackRate = rate;
25247
+ }
25248
+ /** Get the HTML media element */
25249
+ getMediaElement() {
25250
+ return this.media;
25251
+ }
25252
+ /** Set a sink id to change the audio output device */
25253
+ setSinkId(sinkId) {
25254
+ // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId
25255
+ const media = this.media;
25256
+ return media.setSinkId(sinkId);
25257
+ }
25258
+ }
25259
+
25260
+ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
25261
+ if (!element)
25262
+ return () => void 0;
25263
+ const isTouchDevice = matchMedia('(pointer: coarse)').matches;
25264
+ let unsubscribeDocument = () => void 0;
25265
+ const onPointerDown = (event) => {
25266
+ if (event.button !== mouseButton)
25267
+ return;
25268
+ event.preventDefault();
25269
+ event.stopPropagation();
25270
+ let startX = event.clientX;
25271
+ let startY = event.clientY;
25272
+ let isDragging = false;
25273
+ const touchStartTime = Date.now();
25274
+ const onPointerMove = (event) => {
25275
+ event.preventDefault();
25276
+ event.stopPropagation();
25277
+ if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
25278
+ return;
25279
+ const x = event.clientX;
25280
+ const y = event.clientY;
25281
+ const dx = x - startX;
25282
+ const dy = y - startY;
25283
+ if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
25284
+ const rect = element.getBoundingClientRect();
25285
+ const { left, top } = rect;
25286
+ if (!isDragging) {
25287
+ onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
25288
+ isDragging = true;
25289
+ }
25290
+ onDrag(dx, dy, x - left, y - top);
25291
+ startX = x;
25292
+ startY = y;
25293
+ }
25294
+ };
25295
+ const onPointerUp = (event) => {
25296
+ if (isDragging) {
25297
+ const x = event.clientX;
25298
+ const y = event.clientY;
25299
+ const rect = element.getBoundingClientRect();
25300
+ const { left, top } = rect;
25301
+ onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
25302
+ }
25303
+ unsubscribeDocument();
25304
+ };
25305
+ const onPointerLeave = (e) => {
25306
+ // Listen to events only on the document and not on inner elements
25307
+ if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
25308
+ onPointerUp(e);
25309
+ }
25310
+ };
25311
+ const onClick = (event) => {
25312
+ if (isDragging) {
25313
+ event.stopPropagation();
25314
+ event.preventDefault();
25315
+ }
25316
+ };
25317
+ const onTouchMove = (event) => {
25318
+ if (isDragging) {
25319
+ event.preventDefault();
25320
+ }
25321
+ };
25322
+ document.addEventListener('pointermove', onPointerMove);
25323
+ document.addEventListener('pointerup', onPointerUp);
25324
+ document.addEventListener('pointerout', onPointerLeave);
25325
+ document.addEventListener('pointercancel', onPointerLeave);
25326
+ document.addEventListener('touchmove', onTouchMove, { passive: false });
25327
+ document.addEventListener('click', onClick, { capture: true });
25328
+ unsubscribeDocument = () => {
25329
+ document.removeEventListener('pointermove', onPointerMove);
25330
+ document.removeEventListener('pointerup', onPointerUp);
25331
+ document.removeEventListener('pointerout', onPointerLeave);
25332
+ document.removeEventListener('pointercancel', onPointerLeave);
25333
+ document.removeEventListener('touchmove', onTouchMove);
25334
+ setTimeout(() => {
25335
+ document.removeEventListener('click', onClick, { capture: true });
25336
+ }, 10);
25337
+ };
25338
+ };
25339
+ element.addEventListener('pointerdown', onPointerDown);
25340
+ return () => {
25341
+ unsubscribeDocument();
25342
+ element.removeEventListener('pointerdown', onPointerDown);
25343
+ };
25344
+ }
25345
+
25346
+ var __awaiter$3 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
25347
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
25348
+ return new (P || (P = Promise))(function (resolve, reject) {
25349
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25350
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
25351
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
25352
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
25353
+ });
25354
+ };
25355
+ var __rest = (undefined && undefined.__rest) || function (s, e) {
25356
+ var t = {};
25357
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
25358
+ t[p] = s[p];
25359
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
25360
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
25361
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
25362
+ t[p[i]] = s[p[i]];
25363
+ }
25364
+ return t;
25365
+ };
25366
+ class Renderer extends EventEmitter {
25367
+ constructor(options, audioElement) {
25368
+ super();
25369
+ this.timeouts = [];
25370
+ this.isScrollable = false;
25371
+ this.audioData = null;
25372
+ this.resizeObserver = null;
25373
+ this.lastContainerWidth = 0;
25374
+ this.isDragging = false;
25375
+ this.subscriptions = [];
25376
+ this.unsubscribeOnScroll = [];
25377
+ this.subscriptions = [];
25378
+ this.options = options;
25379
+ const parent = this.parentFromOptionsContainer(options.container);
25380
+ this.parent = parent;
25381
+ const [div, shadow] = this.initHtml();
25382
+ parent.appendChild(div);
25383
+ this.container = div;
25384
+ this.scrollContainer = shadow.querySelector('.scroll');
25385
+ this.wrapper = shadow.querySelector('.wrapper');
25386
+ this.canvasWrapper = shadow.querySelector('.canvases');
25387
+ this.progressWrapper = shadow.querySelector('.progress');
25388
+ this.cursor = shadow.querySelector('.cursor');
25389
+ if (audioElement) {
25390
+ shadow.appendChild(audioElement);
25391
+ }
25392
+ this.initEvents();
25393
+ }
25394
+ parentFromOptionsContainer(container) {
25395
+ let parent;
25396
+ if (typeof container === 'string') {
25397
+ parent = document.querySelector(container);
25398
+ }
25399
+ else if (container instanceof HTMLElement) {
25400
+ parent = container;
25401
+ }
25402
+ if (!parent) {
25403
+ throw new Error('Container not found');
25404
+ }
25405
+ return parent;
25406
+ }
25407
+ initEvents() {
25408
+ const getClickPosition = (e) => {
25409
+ const rect = this.wrapper.getBoundingClientRect();
25410
+ const x = e.clientX - rect.left;
25411
+ const y = e.clientY - rect.top;
25412
+ const relativeX = x / rect.width;
25413
+ const relativeY = y / rect.height;
25414
+ return [relativeX, relativeY];
25415
+ };
25416
+ // Add a click listener
25417
+ this.wrapper.addEventListener('click', (e) => {
25418
+ const [x, y] = getClickPosition(e);
25419
+ this.emit('click', x, y);
25420
+ });
25421
+ // Add a double click listener
25422
+ this.wrapper.addEventListener('dblclick', (e) => {
25423
+ const [x, y] = getClickPosition(e);
25424
+ this.emit('dblclick', x, y);
25425
+ });
25426
+ // Drag
25427
+ if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
25428
+ this.initDrag();
25429
+ }
25430
+ // Add a scroll listener
25431
+ this.scrollContainer.addEventListener('scroll', () => {
25432
+ const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
25433
+ const startX = scrollLeft / scrollWidth;
25434
+ const endX = (scrollLeft + clientWidth) / scrollWidth;
25435
+ this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
25436
+ });
25437
+ // Re-render the waveform on container resize
25438
+ if (typeof ResizeObserver === 'function') {
25439
+ const delay = this.createDelay(100);
25440
+ this.resizeObserver = new ResizeObserver(() => {
25441
+ delay()
25442
+ .then(() => this.onContainerResize())
25443
+ .catch(() => undefined);
25444
+ });
25445
+ this.resizeObserver.observe(this.scrollContainer);
25446
+ }
25447
+ }
25448
+ onContainerResize() {
25449
+ const width = this.parent.clientWidth;
25450
+ if (width === this.lastContainerWidth && this.options.height !== 'auto')
25451
+ return;
25452
+ this.lastContainerWidth = width;
25453
+ this.reRender();
25454
+ }
25455
+ initDrag() {
25456
+ this.subscriptions.push(makeDraggable(this.wrapper,
25457
+ // On drag
25458
+ (_, __, x) => {
25459
+ this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
25460
+ },
25461
+ // On start drag
25462
+ (x) => {
25463
+ this.isDragging = true;
25464
+ this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
25465
+ },
25466
+ // On end drag
25467
+ (x) => {
25468
+ this.isDragging = false;
25469
+ this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
25470
+ }));
25471
+ }
25472
+ getHeight(optionsHeight, optionsSplitChannel) {
25473
+ var _a;
25474
+ const defaultHeight = 128;
25475
+ const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
25476
+ if (optionsHeight == null)
25477
+ return defaultHeight;
25478
+ if (!isNaN(Number(optionsHeight)))
25479
+ return Number(optionsHeight);
25480
+ if (optionsHeight === 'auto') {
25481
+ const height = this.parent.clientHeight || defaultHeight;
25482
+ if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
25483
+ return height / numberOfChannels;
25484
+ return height;
25485
+ }
25486
+ return defaultHeight;
25487
+ }
25488
+ initHtml() {
25489
+ const div = document.createElement('div');
25490
+ const shadow = div.attachShadow({ mode: 'open' });
25491
+ const cspNonce = this.options.cspNonce && typeof this.options.cspNonce === 'string' ? this.options.cspNonce.replace(/"/g, '') : '';
25492
+ shadow.innerHTML = `
25493
+ <style${cspNonce ? ` nonce="${cspNonce}"` : ''}>
25494
+ :host {
25495
+ user-select: none;
25496
+ min-width: 1px;
25497
+ }
25498
+ :host audio {
25499
+ display: block;
25500
+ width: 100%;
25501
+ }
25502
+ :host .scroll {
25503
+ overflow-x: auto;
25504
+ overflow-y: hidden;
25505
+ width: 100%;
25506
+ position: relative;
25507
+ }
25508
+ :host .noScrollbar {
25509
+ scrollbar-color: transparent;
25510
+ scrollbar-width: none;
25511
+ }
25512
+ :host .noScrollbar::-webkit-scrollbar {
25513
+ display: none;
25514
+ -webkit-appearance: none;
25515
+ }
25516
+ :host .wrapper {
25517
+ position: relative;
25518
+ overflow: visible;
25519
+ z-index: 2;
25520
+ }
25521
+ :host .canvases {
25522
+ min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
25523
+ }
25524
+ :host .canvases > div {
25525
+ position: relative;
25526
+ }
25527
+ :host canvas {
25528
+ display: block;
25529
+ position: absolute;
25530
+ top: 0;
25531
+ image-rendering: pixelated;
25532
+ }
25533
+ :host .progress {
25534
+ pointer-events: none;
25535
+ position: absolute;
25536
+ z-index: 2;
25537
+ top: 0;
25538
+ left: 0;
25539
+ width: 0;
25540
+ height: 100%;
25541
+ overflow: hidden;
25542
+ }
25543
+ :host .progress > div {
25544
+ position: relative;
25545
+ }
25546
+ :host .cursor {
25547
+ pointer-events: none;
25548
+ position: absolute;
25549
+ z-index: 5;
25550
+ top: 0;
25551
+ left: 0;
25552
+ height: 100%;
25553
+ border-radius: 2px;
25554
+ }
25555
+ </style>
25556
+
25557
+ <div class="scroll" part="scroll">
25558
+ <div class="wrapper" part="wrapper">
25559
+ <div class="canvases" part="canvases"></div>
25560
+ <div class="progress" part="progress"></div>
25561
+ <div class="cursor" part="cursor"></div>
25562
+ </div>
25563
+ </div>
25564
+ `;
25565
+ return [div, shadow];
25566
+ }
25567
+ /** Wavesurfer itself calls this method. Do not call it manually. */
25568
+ setOptions(options) {
25569
+ if (this.options.container !== options.container) {
25570
+ const newParent = this.parentFromOptionsContainer(options.container);
25571
+ newParent.appendChild(this.container);
25572
+ this.parent = newParent;
25573
+ }
25574
+ if (options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
25575
+ this.initDrag();
25576
+ }
25577
+ this.options = options;
25578
+ // Re-render the waveform
25579
+ this.reRender();
25580
+ }
25581
+ getWrapper() {
25582
+ return this.wrapper;
25583
+ }
25584
+ getWidth() {
25585
+ return this.scrollContainer.clientWidth;
25586
+ }
25587
+ getScroll() {
25588
+ return this.scrollContainer.scrollLeft;
25589
+ }
25590
+ setScroll(pixels) {
25591
+ this.scrollContainer.scrollLeft = pixels;
25592
+ }
25593
+ setScrollPercentage(percent) {
25594
+ const { scrollWidth } = this.scrollContainer;
25595
+ const scrollStart = scrollWidth * percent;
25596
+ this.setScroll(scrollStart);
25597
+ }
25598
+ destroy() {
25599
+ var _a, _b;
25600
+ this.subscriptions.forEach((unsubscribe) => unsubscribe());
25601
+ this.container.remove();
25602
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
25603
+ (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.forEach((unsubscribe) => unsubscribe());
25604
+ this.unsubscribeOnScroll = [];
25605
+ }
25606
+ createDelay(delayMs = 10) {
25607
+ let timeout;
25608
+ let reject;
25609
+ const onClear = () => {
25610
+ if (timeout)
25611
+ clearTimeout(timeout);
25612
+ if (reject)
25613
+ reject();
25614
+ };
25615
+ this.timeouts.push(onClear);
25616
+ return () => {
25617
+ return new Promise((resolveFn, rejectFn) => {
25618
+ onClear();
25619
+ reject = rejectFn;
25620
+ timeout = setTimeout(() => {
25621
+ timeout = undefined;
25622
+ reject = undefined;
25623
+ resolveFn();
25624
+ }, delayMs);
25625
+ });
25626
+ };
25627
+ }
25628
+ // Convert array of color values to linear gradient
25629
+ convertColorValues(color) {
25630
+ if (!Array.isArray(color))
25631
+ return color || '';
25632
+ if (color.length < 2)
25633
+ return color[0] || '';
25634
+ const canvasElement = document.createElement('canvas');
25635
+ const ctx = canvasElement.getContext('2d');
25636
+ const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
25637
+ const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
25638
+ const colorStopPercentage = 1 / (color.length - 1);
25639
+ color.forEach((color, index) => {
25640
+ const offset = index * colorStopPercentage;
25641
+ gradient.addColorStop(offset, color);
25642
+ });
25643
+ return gradient;
25644
+ }
25645
+ getPixelRatio() {
25646
+ return Math.max(1, window.devicePixelRatio || 1);
25647
+ }
25648
+ renderBarWaveform(channelData, options, ctx, vScale) {
25649
+ const topChannel = channelData[0];
25650
+ const bottomChannel = channelData[1] || channelData[0];
25651
+ const length = topChannel.length;
25652
+ const { width, height } = ctx.canvas;
25653
+ const halfHeight = height / 2;
25654
+ const pixelRatio = this.getPixelRatio();
25655
+ const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
25656
+ const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
25657
+ const barRadius = options.barRadius || 0;
25658
+ const barIndexScale = width / (barWidth + barGap) / length;
25659
+ const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
25660
+ ctx.beginPath();
25661
+ let prevX = 0;
25662
+ let maxTop = 0;
25663
+ let maxBottom = 0;
25664
+ for (let i = 0; i <= length; i++) {
25665
+ const x = Math.round(i * barIndexScale);
25666
+ if (x > prevX) {
25667
+ const topBarHeight = Math.round(maxTop * halfHeight * vScale);
25668
+ const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
25669
+ const barHeight = topBarHeight + bottomBarHeight || 1;
25670
+ // Vertical alignment
25671
+ let y = halfHeight - topBarHeight;
25672
+ if (options.barAlign === 'top') {
25673
+ y = 0;
25674
+ }
25675
+ else if (options.barAlign === 'bottom') {
25676
+ y = height - barHeight;
25677
+ }
25678
+ ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
25679
+ prevX = x;
25680
+ maxTop = 0;
25681
+ maxBottom = 0;
25682
+ }
25683
+ const magnitudeTop = Math.abs(topChannel[i] || 0);
25684
+ const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
25685
+ if (magnitudeTop > maxTop)
25686
+ maxTop = magnitudeTop;
25687
+ if (magnitudeBottom > maxBottom)
25688
+ maxBottom = magnitudeBottom;
25689
+ }
25690
+ ctx.fill();
25691
+ ctx.closePath();
25692
+ }
25693
+ renderLineWaveform(channelData, _options, ctx, vScale) {
25694
+ const drawChannel = (index) => {
25695
+ const channel = channelData[index] || channelData[0];
25696
+ const length = channel.length;
25697
+ const { height } = ctx.canvas;
25698
+ const halfHeight = height / 2;
25699
+ const hScale = ctx.canvas.width / length;
25700
+ ctx.moveTo(0, halfHeight);
25701
+ let prevX = 0;
25702
+ let max = 0;
25703
+ for (let i = 0; i <= length; i++) {
25704
+ const x = Math.round(i * hScale);
25705
+ if (x > prevX) {
25706
+ const h = Math.round(max * halfHeight * vScale) || 1;
25707
+ const y = halfHeight + h * (index === 0 ? -1 : 1);
25708
+ ctx.lineTo(prevX, y);
25709
+ prevX = x;
25710
+ max = 0;
25711
+ }
25712
+ const value = Math.abs(channel[i] || 0);
25713
+ if (value > max)
25714
+ max = value;
25715
+ }
25716
+ ctx.lineTo(prevX, halfHeight);
25717
+ };
25718
+ ctx.beginPath();
25719
+ drawChannel(0);
25720
+ drawChannel(1);
25721
+ ctx.fill();
25722
+ ctx.closePath();
25723
+ }
25724
+ renderWaveform(channelData, options, ctx) {
25725
+ ctx.fillStyle = this.convertColorValues(options.waveColor);
25726
+ // Custom rendering function
25727
+ if (options.renderFunction) {
25728
+ options.renderFunction(channelData, ctx);
25729
+ return;
25730
+ }
25731
+ // Vertical scaling
25732
+ let vScale = options.barHeight || 1;
25733
+ if (options.normalize) {
25734
+ const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
25735
+ vScale = max ? 1 / max : 1;
25736
+ }
25737
+ // Render waveform as bars
25738
+ if (options.barWidth || options.barGap || options.barAlign) {
25739
+ this.renderBarWaveform(channelData, options, ctx, vScale);
25740
+ return;
25741
+ }
25742
+ // Render waveform as a polyline
25743
+ this.renderLineWaveform(channelData, options, ctx, vScale);
25744
+ }
25745
+ renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
25746
+ const pixelRatio = this.getPixelRatio();
25747
+ const canvas = document.createElement('canvas');
25748
+ canvas.width = Math.round(width * pixelRatio);
25749
+ canvas.height = Math.round(height * pixelRatio);
25750
+ canvas.style.width = `${width}px`;
25751
+ canvas.style.height = `${height}px`;
25752
+ canvas.style.left = `${Math.round(offset)}px`;
25753
+ canvasContainer.appendChild(canvas);
25754
+ const ctx = canvas.getContext('2d');
25755
+ this.renderWaveform(data, options, ctx);
25756
+ // Draw a progress canvas
25757
+ if (canvas.width > 0 && canvas.height > 0) {
25758
+ const progressCanvas = canvas.cloneNode();
25759
+ const progressCtx = progressCanvas.getContext('2d');
25760
+ progressCtx.drawImage(canvas, 0, 0);
25761
+ // Set the composition method to draw only where the waveform is drawn
25762
+ progressCtx.globalCompositeOperation = 'source-in';
25763
+ progressCtx.fillStyle = this.convertColorValues(options.progressColor);
25764
+ // This rectangle acts as a mask thanks to the composition method
25765
+ progressCtx.fillRect(0, 0, canvas.width, canvas.height);
25766
+ progressContainer.appendChild(progressCanvas);
25767
+ }
25768
+ }
25769
+ renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer) {
25770
+ const pixelRatio = this.getPixelRatio();
25771
+ const { clientWidth } = this.scrollContainer;
25772
+ const totalWidth = width / pixelRatio;
25773
+ let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
25774
+ let drawnIndexes = {};
25775
+ // Nothing to render
25776
+ if (singleCanvasWidth === 0)
25777
+ return;
25778
+ // Adjust width to avoid gaps between canvases when using bars
25779
+ if (options.barWidth || options.barGap) {
25780
+ const barWidth = options.barWidth || 0.5;
25781
+ const barGap = options.barGap || barWidth / 2;
25782
+ const totalBarWidth = barWidth + barGap;
25783
+ if (singleCanvasWidth % totalBarWidth !== 0) {
25784
+ singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
25785
+ }
25786
+ }
25787
+ // Draw a single canvas
25788
+ const draw = (index) => {
25789
+ if (index < 0 || index >= numCanvases)
25790
+ return;
25791
+ if (drawnIndexes[index])
25792
+ return;
25793
+ drawnIndexes[index] = true;
25794
+ const offset = index * singleCanvasWidth;
25795
+ const clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
25796
+ if (clampedWidth <= 0)
25797
+ return;
25798
+ const data = channelData.map((channel) => {
25799
+ const start = Math.floor((offset / totalWidth) * channel.length);
25800
+ const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
25801
+ return channel.slice(start, end);
25802
+ });
25803
+ this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
25804
+ };
25805
+ // Clear canvases to avoid too many DOM nodes
25806
+ const clearCanvases = () => {
25807
+ if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
25808
+ canvasContainer.innerHTML = '';
25809
+ progressContainer.innerHTML = '';
25810
+ drawnIndexes = {};
25811
+ }
25812
+ };
25813
+ // Calculate how many canvases to render
25814
+ const numCanvases = Math.ceil(totalWidth / singleCanvasWidth);
25815
+ // Render all canvases if the waveform doesn't scroll
25816
+ if (!this.isScrollable) {
25817
+ for (let i = 0; i < numCanvases; i++) {
25818
+ draw(i);
25819
+ }
25820
+ return;
25821
+ }
25822
+ // Lazy rendering
25823
+ const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
25824
+ const startCanvas = Math.floor(viewPosition * numCanvases);
25825
+ // Draw the canvases in the viewport first
25826
+ draw(startCanvas - 1);
25827
+ draw(startCanvas);
25828
+ draw(startCanvas + 1);
25829
+ // Subscribe to the scroll event to draw additional canvases
25830
+ if (numCanvases > 1) {
25831
+ const unsubscribe = this.on('scroll', () => {
25832
+ const { scrollLeft } = this.scrollContainer;
25833
+ const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
25834
+ clearCanvases();
25835
+ draw(canvasIndex - 1);
25836
+ draw(canvasIndex);
25837
+ draw(canvasIndex + 1);
25838
+ });
25839
+ this.unsubscribeOnScroll.push(unsubscribe);
25840
+ }
25841
+ }
25842
+ renderChannel(channelData, _a, width, channelIndex) {
25843
+ var { overlay } = _a, options = __rest(_a, ["overlay"]);
25844
+ // A container for canvases
25845
+ const canvasContainer = document.createElement('div');
25846
+ const height = this.getHeight(options.height, options.splitChannels);
25847
+ canvasContainer.style.height = `${height}px`;
25848
+ if (overlay && channelIndex > 0) {
25849
+ canvasContainer.style.marginTop = `-${height}px`;
25850
+ }
25851
+ this.canvasWrapper.style.minHeight = `${height}px`;
25852
+ this.canvasWrapper.appendChild(canvasContainer);
25853
+ // A container for progress canvases
25854
+ const progressContainer = canvasContainer.cloneNode();
25855
+ this.progressWrapper.appendChild(progressContainer);
25856
+ // Render the waveform
25857
+ this.renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer);
25858
+ }
25859
+ render(audioData) {
25860
+ return __awaiter$3(this, void 0, void 0, function* () {
25861
+ var _a;
25862
+ // Clear previous timeouts
25863
+ this.timeouts.forEach((clear) => clear());
25864
+ this.timeouts = [];
25865
+ // Clear the canvases
25866
+ this.canvasWrapper.innerHTML = '';
25867
+ this.progressWrapper.innerHTML = '';
25868
+ // Width
25869
+ if (this.options.width != null) {
25870
+ this.scrollContainer.style.width =
25871
+ typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width;
25872
+ }
25873
+ // Determine the width of the waveform
25874
+ const pixelRatio = this.getPixelRatio();
25875
+ const parentWidth = this.scrollContainer.clientWidth;
25876
+ const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
25877
+ // Whether the container should scroll
25878
+ this.isScrollable = scrollWidth > parentWidth;
25879
+ const useParentWidth = this.options.fillParent && !this.isScrollable;
25880
+ // Width of the waveform in pixels
25881
+ const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
25882
+ // Set the width of the wrapper
25883
+ this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
25884
+ // Set additional styles
25885
+ this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden';
25886
+ this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
25887
+ this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
25888
+ this.cursor.style.width = `${this.options.cursorWidth}px`;
25889
+ this.audioData = audioData;
25890
+ this.emit('render');
25891
+ // Render the waveform
25892
+ if (this.options.splitChannels) {
25893
+ // Render a waveform for each channel
25894
+ for (let i = 0; i < audioData.numberOfChannels; i++) {
25895
+ const options = Object.assign(Object.assign({}, this.options), (_a = this.options.splitChannels) === null || _a === void 0 ? void 0 : _a[i]);
25896
+ this.renderChannel([audioData.getChannelData(i)], options, width, i);
25897
+ }
25898
+ }
25899
+ else {
25900
+ // Render a single waveform for the first two channels (left and right)
25901
+ const channels = [audioData.getChannelData(0)];
25902
+ if (audioData.numberOfChannels > 1)
25903
+ channels.push(audioData.getChannelData(1));
25904
+ this.renderChannel(channels, this.options, width, 0);
25905
+ }
25906
+ // Must be emitted asynchronously for backward compatibility
25907
+ Promise.resolve().then(() => this.emit('rendered'));
25908
+ });
25909
+ }
25910
+ reRender() {
25911
+ this.unsubscribeOnScroll.forEach((unsubscribe) => unsubscribe());
25912
+ this.unsubscribeOnScroll = [];
25913
+ // Return if the waveform has not been rendered yet
25914
+ if (!this.audioData)
25915
+ return;
25916
+ // Remember the current cursor position
25917
+ const { scrollWidth } = this.scrollContainer;
25918
+ const { right: before } = this.progressWrapper.getBoundingClientRect();
25919
+ // Re-render the waveform
25920
+ this.render(this.audioData);
25921
+ // Adjust the scroll position so that the cursor stays in the same place
25922
+ if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
25923
+ const { right: after } = this.progressWrapper.getBoundingClientRect();
25924
+ let delta = after - before;
25925
+ // to limit compounding floating-point drift
25926
+ // we need to round to the half px furthest from 0
25927
+ delta *= 2;
25928
+ delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
25929
+ delta /= 2;
25930
+ this.scrollContainer.scrollLeft += delta;
25931
+ }
25932
+ }
25933
+ zoom(minPxPerSec) {
25934
+ this.options.minPxPerSec = minPxPerSec;
25935
+ this.reRender();
25936
+ }
25937
+ scrollIntoView(progress, isPlaying = false) {
25938
+ const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
25939
+ const progressWidth = progress * scrollWidth;
25940
+ const startEdge = scrollLeft;
25941
+ const endEdge = scrollLeft + clientWidth;
25942
+ const middle = clientWidth / 2;
25943
+ if (this.isDragging) {
25944
+ // Scroll when dragging close to the edge of the viewport
25945
+ const minGap = 30;
25946
+ if (progressWidth + minGap > endEdge) {
25947
+ this.scrollContainer.scrollLeft += minGap;
25948
+ }
25949
+ else if (progressWidth - minGap < startEdge) {
25950
+ this.scrollContainer.scrollLeft -= minGap;
25951
+ }
25952
+ }
25953
+ else {
25954
+ if (progressWidth < startEdge || progressWidth > endEdge) {
25955
+ this.scrollContainer.scrollLeft = progressWidth - (this.options.autoCenter ? middle : 0);
25956
+ }
25957
+ // Keep the cursor centered when playing
25958
+ const center = progressWidth - scrollLeft - middle;
25959
+ if (isPlaying && this.options.autoCenter && center > 0) {
25960
+ this.scrollContainer.scrollLeft += Math.min(center, 10);
25961
+ }
25962
+ }
25963
+ // Emit the scroll event
25964
+ {
25965
+ const newScroll = this.scrollContainer.scrollLeft;
25966
+ const startX = newScroll / scrollWidth;
25967
+ const endX = (newScroll + clientWidth) / scrollWidth;
25968
+ this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
25969
+ }
25970
+ }
25971
+ renderProgress(progress, isPlaying) {
25972
+ if (isNaN(progress))
25973
+ return;
25974
+ const percents = progress * 100;
25975
+ this.canvasWrapper.style.clipPath = `polygon(${percents}% 0, 100% 0, 100% 100%, ${percents}% 100%)`;
25976
+ this.progressWrapper.style.width = `${percents}%`;
25977
+ this.cursor.style.left = `${percents}%`;
25978
+ this.cursor.style.transform = `translateX(-${Math.round(percents) === 100 ? this.options.cursorWidth : 0}px)`;
25979
+ if (this.isScrollable && this.options.autoScroll) {
25980
+ this.scrollIntoView(progress, isPlaying);
25981
+ }
25982
+ }
25983
+ exportImage(format, quality, type) {
25984
+ return __awaiter$3(this, void 0, void 0, function* () {
25985
+ const canvases = this.canvasWrapper.querySelectorAll('canvas');
25986
+ if (!canvases.length) {
25987
+ throw new Error('No waveform data');
25988
+ }
25989
+ // Data URLs
25990
+ if (type === 'dataURL') {
25991
+ const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality));
25992
+ return Promise.resolve(images);
25993
+ }
25994
+ // Blobs
25995
+ return Promise.all(Array.from(canvases).map((canvas) => {
25996
+ return new Promise((resolve, reject) => {
25997
+ canvas.toBlob((blob) => {
25998
+ blob ? resolve(blob) : reject(new Error('Could not export image'));
25999
+ }, format, quality);
26000
+ });
26001
+ }));
26002
+ });
26003
+ }
26004
+ }
26005
+ Renderer.MAX_CANVAS_WIDTH = 8000;
26006
+ Renderer.MAX_NODES = 10;
26007
+
26008
+ class Timer extends EventEmitter {
26009
+ constructor() {
26010
+ super(...arguments);
26011
+ this.unsubscribe = () => undefined;
26012
+ }
26013
+ start() {
26014
+ this.unsubscribe = this.on('tick', () => {
26015
+ requestAnimationFrame(() => {
26016
+ this.emit('tick');
26017
+ });
26018
+ });
26019
+ this.emit('tick');
26020
+ }
26021
+ stop() {
26022
+ this.unsubscribe();
26023
+ }
26024
+ destroy() {
26025
+ this.unsubscribe();
26026
+ }
26027
+ }
26028
+
26029
+ var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
26030
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
26031
+ return new (P || (P = Promise))(function (resolve, reject) {
26032
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
26033
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26034
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
26035
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
26036
+ });
26037
+ };
26038
+ /**
26039
+ * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.
26040
+ */
26041
+ class WebAudioPlayer extends EventEmitter {
26042
+ constructor(audioContext = new AudioContext()) {
26043
+ super();
26044
+ this.bufferNode = null;
26045
+ this.playStartTime = 0;
26046
+ this.playedDuration = 0;
26047
+ this._muted = false;
26048
+ this._playbackRate = 1;
26049
+ this._duration = undefined;
26050
+ this.buffer = null;
26051
+ this.currentSrc = '';
26052
+ this.paused = true;
26053
+ this.crossOrigin = null;
26054
+ this.seeking = false;
26055
+ this.autoplay = false;
26056
+ /** Subscribe to an event. Returns an unsubscribe function. */
26057
+ this.addEventListener = this.on;
26058
+ /** Unsubscribe from an event */
26059
+ this.removeEventListener = this.un;
26060
+ this.audioContext = audioContext;
26061
+ this.gainNode = this.audioContext.createGain();
26062
+ this.gainNode.connect(this.audioContext.destination);
26063
+ }
26064
+ load() {
26065
+ return __awaiter$4(this, void 0, void 0, function* () {
26066
+ return;
26067
+ });
26068
+ }
26069
+ get src() {
26070
+ return this.currentSrc;
26071
+ }
26072
+ set src(value) {
26073
+ this.currentSrc = value;
26074
+ this._duration = undefined;
26075
+ if (!value) {
26076
+ this.buffer = null;
26077
+ this.emit('emptied');
26078
+ return;
26079
+ }
26080
+ fetch(value)
26081
+ .then((response) => {
26082
+ if (response.status >= 400) {
26083
+ throw new Error(`Failed to fetch ${value}: ${response.status} (${response.statusText})`);
26084
+ }
26085
+ return response.arrayBuffer();
26086
+ })
26087
+ .then((arrayBuffer) => {
26088
+ if (this.currentSrc !== value)
26089
+ return null;
26090
+ return this.audioContext.decodeAudioData(arrayBuffer);
26091
+ })
26092
+ .then((audioBuffer) => {
26093
+ if (this.currentSrc !== value)
26094
+ return;
26095
+ this.buffer = audioBuffer;
26096
+ this.emit('loadedmetadata');
26097
+ this.emit('canplay');
26098
+ if (this.autoplay)
26099
+ this.play();
26100
+ });
26101
+ }
26102
+ _play() {
26103
+ var _a;
26104
+ if (!this.paused)
26105
+ return;
26106
+ this.paused = false;
26107
+ (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();
26108
+ this.bufferNode = this.audioContext.createBufferSource();
26109
+ if (this.buffer) {
26110
+ this.bufferNode.buffer = this.buffer;
26111
+ }
26112
+ this.bufferNode.playbackRate.value = this._playbackRate;
26113
+ this.bufferNode.connect(this.gainNode);
26114
+ let currentPos = this.playedDuration * this._playbackRate;
26115
+ if (currentPos >= this.duration || currentPos < 0) {
26116
+ currentPos = 0;
26117
+ this.playedDuration = 0;
26118
+ }
26119
+ this.bufferNode.start(this.audioContext.currentTime, currentPos);
26120
+ this.playStartTime = this.audioContext.currentTime;
26121
+ this.bufferNode.onended = () => {
26122
+ if (this.currentTime >= this.duration) {
26123
+ this.pause();
26124
+ this.emit('ended');
26125
+ }
26126
+ };
26127
+ }
26128
+ _pause() {
26129
+ var _a;
26130
+ this.paused = true;
26131
+ (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.stop();
26132
+ this.playedDuration += this.audioContext.currentTime - this.playStartTime;
26133
+ }
26134
+ play() {
26135
+ return __awaiter$4(this, void 0, void 0, function* () {
26136
+ if (!this.paused)
26137
+ return;
26138
+ this._play();
26139
+ this.emit('play');
26140
+ });
26141
+ }
26142
+ pause() {
26143
+ if (this.paused)
26144
+ return;
26145
+ this._pause();
26146
+ this.emit('pause');
26147
+ }
26148
+ stopAt(timeSeconds) {
26149
+ const delay = timeSeconds - this.currentTime;
26150
+ const currentBufferNode = this.bufferNode;
26151
+ currentBufferNode === null || currentBufferNode === void 0 ? void 0 : currentBufferNode.stop(this.audioContext.currentTime + delay);
26152
+ currentBufferNode === null || currentBufferNode === void 0 ? void 0 : currentBufferNode.addEventListener('ended', () => {
26153
+ if (currentBufferNode === this.bufferNode) {
26154
+ this.bufferNode = null;
26155
+ this.pause();
26156
+ }
26157
+ }, { once: true });
26158
+ }
26159
+ setSinkId(deviceId) {
26160
+ return __awaiter$4(this, void 0, void 0, function* () {
26161
+ const ac = this.audioContext;
26162
+ return ac.setSinkId(deviceId);
26163
+ });
26164
+ }
26165
+ get playbackRate() {
26166
+ return this._playbackRate;
26167
+ }
26168
+ set playbackRate(value) {
26169
+ this._playbackRate = value;
26170
+ if (this.bufferNode) {
26171
+ this.bufferNode.playbackRate.value = value;
26172
+ }
26173
+ }
26174
+ get currentTime() {
26175
+ const time = this.paused
26176
+ ? this.playedDuration
26177
+ : this.playedDuration + (this.audioContext.currentTime - this.playStartTime);
26178
+ return time * this._playbackRate;
26179
+ }
26180
+ set currentTime(value) {
26181
+ const wasPlaying = !this.paused;
26182
+ wasPlaying && this._pause();
26183
+ this.playedDuration = value / this._playbackRate;
26184
+ wasPlaying && this._play();
26185
+ this.emit('seeking');
26186
+ this.emit('timeupdate');
26187
+ }
26188
+ get duration() {
26189
+ var _a, _b;
26190
+ return (_a = this._duration) !== null && _a !== void 0 ? _a : (((_b = this.buffer) === null || _b === void 0 ? void 0 : _b.duration) || 0);
26191
+ }
26192
+ set duration(value) {
26193
+ this._duration = value;
26194
+ }
26195
+ get volume() {
26196
+ return this.gainNode.gain.value;
26197
+ }
26198
+ set volume(value) {
26199
+ this.gainNode.gain.value = value;
26200
+ this.emit('volumechange');
26201
+ }
26202
+ get muted() {
26203
+ return this._muted;
26204
+ }
26205
+ set muted(value) {
26206
+ if (this._muted === value)
26207
+ return;
26208
+ this._muted = value;
26209
+ if (this._muted) {
26210
+ this.gainNode.disconnect();
26211
+ }
26212
+ else {
26213
+ this.gainNode.connect(this.audioContext.destination);
26214
+ }
26215
+ }
26216
+ canPlayType(mimeType) {
26217
+ return /^(audio|video)\//.test(mimeType);
26218
+ }
26219
+ /** Get the GainNode used to play the audio. Can be used to attach filters. */
26220
+ getGainNode() {
26221
+ return this.gainNode;
26222
+ }
26223
+ /** Get decoded audio */
26224
+ getChannelData() {
26225
+ const channels = [];
26226
+ if (!this.buffer)
26227
+ return channels;
26228
+ const numChannels = this.buffer.numberOfChannels;
26229
+ for (let i = 0; i < numChannels; i++) {
26230
+ channels.push(this.buffer.getChannelData(i));
26231
+ }
26232
+ return channels;
26233
+ }
26234
+ }
26235
+
26236
+ var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
26237
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
26238
+ return new (P || (P = Promise))(function (resolve, reject) {
26239
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
26240
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26241
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
26242
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
26243
+ });
26244
+ };
26245
+ const defaultOptions = {
26246
+ waveColor: '#999',
26247
+ progressColor: '#555',
26248
+ cursorWidth: 1,
26249
+ minPxPerSec: 0,
26250
+ fillParent: true,
26251
+ interact: true,
26252
+ dragToSeek: false,
26253
+ autoScroll: true,
26254
+ autoCenter: true,
26255
+ sampleRate: 8000,
26256
+ };
26257
+ class WaveSurfer extends Player {
26258
+ /** Create a new WaveSurfer instance */
26259
+ static create(options) {
26260
+ return new WaveSurfer(options);
26261
+ }
26262
+ /** Create a new WaveSurfer instance */
26263
+ constructor(options) {
26264
+ const media = options.media ||
26265
+ (options.backend === 'WebAudio' ? new WebAudioPlayer() : undefined);
26266
+ super({
26267
+ media,
26268
+ mediaControls: options.mediaControls,
26269
+ autoplay: options.autoplay,
26270
+ playbackRate: options.audioRate,
26271
+ });
26272
+ this.plugins = [];
26273
+ this.decodedData = null;
26274
+ this.stopAtPosition = null;
26275
+ this.subscriptions = [];
26276
+ this.mediaSubscriptions = [];
26277
+ this.abortController = null;
26278
+ this.options = Object.assign({}, defaultOptions, options);
26279
+ this.timer = new Timer();
26280
+ const audioElement = media ? undefined : this.getMediaElement();
26281
+ this.renderer = new Renderer(this.options, audioElement);
26282
+ this.initPlayerEvents();
26283
+ this.initRendererEvents();
26284
+ this.initTimerEvents();
26285
+ this.initPlugins();
26286
+ // Read the initial URL before load has been called
26287
+ const initialUrl = this.options.url || this.getSrc() || '';
26288
+ // Init and load async to allow external events to be registered
26289
+ Promise.resolve().then(() => {
26290
+ this.emit('init');
26291
+ // Load audio if URL or an external media with an src is passed,
26292
+ // of render w/o audio if pre-decoded peaks and duration are provided
26293
+ const { peaks, duration } = this.options;
26294
+ if (initialUrl || (peaks && duration)) {
26295
+ // Swallow async errors because they cannot be caught from a constructor call.
26296
+ // Subscribe to the wavesurfer's error event to handle them.
26297
+ this.load(initialUrl, peaks, duration).catch(() => null);
26298
+ }
26299
+ });
26300
+ }
26301
+ updateProgress(currentTime = this.getCurrentTime()) {
26302
+ this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
26303
+ return currentTime;
26304
+ }
26305
+ initTimerEvents() {
26306
+ // The timer fires every 16ms for a smooth progress animation
26307
+ this.subscriptions.push(this.timer.on('tick', () => {
26308
+ if (!this.isSeeking()) {
26309
+ const currentTime = this.updateProgress();
26310
+ this.emit('timeupdate', currentTime);
26311
+ this.emit('audioprocess', currentTime);
26312
+ // Pause audio when it reaches the stopAtPosition
26313
+ if (this.stopAtPosition != null && this.isPlaying() && currentTime >= this.stopAtPosition) {
26314
+ this.pause();
26315
+ }
26316
+ }
26317
+ }));
26318
+ }
26319
+ initPlayerEvents() {
26320
+ if (this.isPlaying()) {
26321
+ this.emit('play');
26322
+ this.timer.start();
26323
+ }
26324
+ this.mediaSubscriptions.push(this.onMediaEvent('timeupdate', () => {
26325
+ const currentTime = this.updateProgress();
26326
+ this.emit('timeupdate', currentTime);
26327
+ }), this.onMediaEvent('play', () => {
26328
+ this.emit('play');
26329
+ this.timer.start();
26330
+ }), this.onMediaEvent('pause', () => {
26331
+ this.emit('pause');
26332
+ this.timer.stop();
26333
+ this.stopAtPosition = null;
26334
+ }), this.onMediaEvent('emptied', () => {
26335
+ this.timer.stop();
26336
+ this.stopAtPosition = null;
26337
+ }), this.onMediaEvent('ended', () => {
26338
+ this.emit('timeupdate', this.getDuration());
26339
+ this.emit('finish');
26340
+ this.stopAtPosition = null;
26341
+ }), this.onMediaEvent('seeking', () => {
26342
+ this.emit('seeking', this.getCurrentTime());
26343
+ }), this.onMediaEvent('error', () => {
26344
+ var _a;
26345
+ this.emit('error', ((_a = this.getMediaElement().error) !== null && _a !== void 0 ? _a : new Error('Media error')));
26346
+ this.stopAtPosition = null;
26347
+ }));
26348
+ }
26349
+ initRendererEvents() {
26350
+ this.subscriptions.push(
26351
+ // Seek on click
26352
+ this.renderer.on('click', (relativeX, relativeY) => {
26353
+ if (this.options.interact) {
26354
+ this.seekTo(relativeX);
26355
+ this.emit('interaction', relativeX * this.getDuration());
26356
+ this.emit('click', relativeX, relativeY);
26357
+ }
26358
+ }),
26359
+ // Double click
26360
+ this.renderer.on('dblclick', (relativeX, relativeY) => {
26361
+ this.emit('dblclick', relativeX, relativeY);
26362
+ }),
26363
+ // Scroll
26364
+ this.renderer.on('scroll', (startX, endX, scrollLeft, scrollRight) => {
26365
+ const duration = this.getDuration();
26366
+ this.emit('scroll', startX * duration, endX * duration, scrollLeft, scrollRight);
26367
+ }),
26368
+ // Redraw
26369
+ this.renderer.on('render', () => {
26370
+ this.emit('redraw');
26371
+ }),
26372
+ // RedrawComplete
26373
+ this.renderer.on('rendered', () => {
26374
+ this.emit('redrawcomplete');
26375
+ }),
26376
+ // DragStart
26377
+ this.renderer.on('dragstart', (relativeX) => {
26378
+ this.emit('dragstart', relativeX);
26379
+ }),
26380
+ // DragEnd
26381
+ this.renderer.on('dragend', (relativeX) => {
26382
+ this.emit('dragend', relativeX);
26383
+ }));
26384
+ // Drag
26385
+ {
26386
+ let debounce;
26387
+ this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
26388
+ if (!this.options.interact)
26389
+ return;
26390
+ // Update the visual position
26391
+ this.renderer.renderProgress(relativeX);
26392
+ // Set the audio position with a debounce
26393
+ clearTimeout(debounce);
26394
+ let debounceTime;
26395
+ if (this.isPlaying()) {
26396
+ debounceTime = 0;
26397
+ }
26398
+ else if (this.options.dragToSeek === true) {
26399
+ debounceTime = 200;
26400
+ }
26401
+ else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
26402
+ debounceTime = this.options.dragToSeek['debounceTime'];
26403
+ }
26404
+ debounce = setTimeout(() => {
26405
+ this.seekTo(relativeX);
26406
+ }, debounceTime);
26407
+ this.emit('interaction', relativeX * this.getDuration());
26408
+ this.emit('drag', relativeX);
26409
+ }));
26410
+ }
26411
+ }
26412
+ initPlugins() {
26413
+ var _a;
26414
+ if (!((_a = this.options.plugins) === null || _a === void 0 ? void 0 : _a.length))
26415
+ return;
26416
+ this.options.plugins.forEach((plugin) => {
26417
+ this.registerPlugin(plugin);
26418
+ });
26419
+ }
26420
+ unsubscribePlayerEvents() {
26421
+ this.mediaSubscriptions.forEach((unsubscribe) => unsubscribe());
26422
+ this.mediaSubscriptions = [];
26423
+ }
26424
+ /** Set new wavesurfer options and re-render it */
26425
+ setOptions(options) {
26426
+ this.options = Object.assign({}, this.options, options);
26427
+ if (options.duration && !options.peaks) {
26428
+ this.decodedData = Decoder.createBuffer(this.exportPeaks(), options.duration);
26429
+ }
26430
+ if (options.peaks && options.duration) {
26431
+ // Create new decoded data buffer from peaks and duration
26432
+ this.decodedData = Decoder.createBuffer(options.peaks, options.duration);
26433
+ }
26434
+ this.renderer.setOptions(this.options);
26435
+ if (options.audioRate) {
26436
+ this.setPlaybackRate(options.audioRate);
26437
+ }
26438
+ if (options.mediaControls != null) {
26439
+ this.getMediaElement().controls = options.mediaControls;
26440
+ }
26441
+ }
26442
+ /** Register a wavesurfer.js plugin */
26443
+ registerPlugin(plugin) {
26444
+ plugin._init(this);
26445
+ this.plugins.push(plugin);
26446
+ // Unregister plugin on destroy
26447
+ this.subscriptions.push(plugin.once('destroy', () => {
26448
+ this.plugins = this.plugins.filter((p) => p !== plugin);
26449
+ }));
26450
+ return plugin;
26451
+ }
26452
+ /** For plugins only: get the waveform wrapper div */
26453
+ getWrapper() {
26454
+ return this.renderer.getWrapper();
26455
+ }
26456
+ /** For plugins only: get the scroll container client width */
26457
+ getWidth() {
26458
+ return this.renderer.getWidth();
26459
+ }
26460
+ /** Get the current scroll position in pixels */
26461
+ getScroll() {
26462
+ return this.renderer.getScroll();
26463
+ }
26464
+ /** Set the current scroll position in pixels */
26465
+ setScroll(pixels) {
26466
+ return this.renderer.setScroll(pixels);
26467
+ }
26468
+ /** Move the start of the viewing window to a specific time in the audio (in seconds) */
26469
+ setScrollTime(time) {
26470
+ const percentage = time / this.getDuration();
26471
+ this.renderer.setScrollPercentage(percentage);
26472
+ }
26473
+ /** Get all registered plugins */
26474
+ getActivePlugins() {
26475
+ return this.plugins;
26476
+ }
26477
+ loadAudio(url, blob, channelData, duration) {
26478
+ return __awaiter$5(this, void 0, void 0, function* () {
26479
+ var _a;
26480
+ this.emit('load', url);
26481
+ if (!this.options.media && this.isPlaying())
26482
+ this.pause();
26483
+ this.decodedData = null;
26484
+ this.stopAtPosition = null;
26485
+ // Fetch the entire audio as a blob if pre-decoded data is not provided
26486
+ if (!blob && !channelData) {
26487
+ const fetchParams = this.options.fetchParams || {};
26488
+ if (window.AbortController && !fetchParams.signal) {
26489
+ this.abortController = new AbortController();
26490
+ fetchParams.signal = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal;
26491
+ }
26492
+ const onProgress = (percentage) => this.emit('loading', percentage);
26493
+ blob = yield Fetcher.fetchBlob(url, onProgress, fetchParams);
26494
+ const overridenMimeType = this.options.blobMimeType;
26495
+ if (overridenMimeType) {
26496
+ blob = new Blob([blob], { type: overridenMimeType });
26497
+ }
26498
+ }
26499
+ // Set the mediaelement source
26500
+ this.setSrc(url, blob);
26501
+ // Wait for the audio duration
26502
+ const audioDuration = yield new Promise((resolve) => {
26503
+ const staticDuration = duration || this.getDuration();
26504
+ if (staticDuration) {
26505
+ resolve(staticDuration);
26506
+ }
26507
+ else {
26508
+ this.mediaSubscriptions.push(this.onMediaEvent('loadedmetadata', () => resolve(this.getDuration()), { once: true }));
26509
+ }
26510
+ });
26511
+ // Set the duration if the player is a WebAudioPlayer without a URL
26512
+ if (!url && !blob) {
26513
+ const media = this.getMediaElement();
26514
+ if (media instanceof WebAudioPlayer) {
26515
+ media.duration = audioDuration;
26516
+ }
26517
+ }
26518
+ // Decode the audio data or use user-provided peaks
26519
+ if (channelData) {
26520
+ this.decodedData = Decoder.createBuffer(channelData, audioDuration || 0);
26521
+ }
26522
+ else if (blob) {
26523
+ const arrayBuffer = yield blob.arrayBuffer();
26524
+ this.decodedData = yield Decoder.decode(arrayBuffer, this.options.sampleRate);
26525
+ }
26526
+ if (this.decodedData) {
26527
+ this.emit('decode', this.getDuration());
26528
+ this.renderer.render(this.decodedData);
26529
+ }
26530
+ this.emit('ready', this.getDuration());
26531
+ });
26532
+ }
26533
+ /** Load an audio file by URL, with optional pre-decoded audio data */
26534
+ load(url, channelData, duration) {
26535
+ return __awaiter$5(this, void 0, void 0, function* () {
26536
+ try {
26537
+ return yield this.loadAudio(url, undefined, channelData, duration);
26538
+ }
26539
+ catch (err) {
26540
+ this.emit('error', err);
26541
+ throw err;
26542
+ }
26543
+ });
26544
+ }
26545
+ /** Load an audio blob */
26546
+ loadBlob(blob, channelData, duration) {
26547
+ return __awaiter$5(this, void 0, void 0, function* () {
26548
+ try {
26549
+ return yield this.loadAudio('', blob, channelData, duration);
26550
+ }
26551
+ catch (err) {
26552
+ this.emit('error', err);
26553
+ throw err;
26554
+ }
26555
+ });
26556
+ }
26557
+ /** Zoom the waveform by a given pixels-per-second factor */
26558
+ zoom(minPxPerSec) {
26559
+ if (!this.decodedData) {
26560
+ throw new Error('No audio loaded');
26561
+ }
26562
+ this.renderer.zoom(minPxPerSec);
26563
+ this.emit('zoom', minPxPerSec);
26564
+ }
26565
+ /** Get the decoded audio data */
26566
+ getDecodedData() {
26567
+ return this.decodedData;
26568
+ }
26569
+ /** Get decoded peaks */
26570
+ exportPeaks({ channels = 2, maxLength = 8000, precision = 10000 } = {}) {
26571
+ if (!this.decodedData) {
26572
+ throw new Error('The audio has not been decoded yet');
26573
+ }
26574
+ const maxChannels = Math.min(channels, this.decodedData.numberOfChannels);
26575
+ const peaks = [];
26576
+ for (let i = 0; i < maxChannels; i++) {
26577
+ const channel = this.decodedData.getChannelData(i);
26578
+ const data = [];
26579
+ const sampleSize = channel.length / maxLength;
26580
+ for (let i = 0; i < maxLength; i++) {
26581
+ const sample = channel.slice(Math.floor(i * sampleSize), Math.ceil((i + 1) * sampleSize));
26582
+ let max = 0;
26583
+ for (let x = 0; x < sample.length; x++) {
26584
+ const n = sample[x];
26585
+ if (Math.abs(n) > Math.abs(max))
26586
+ max = n;
26587
+ }
26588
+ data.push(Math.round(max * precision) / precision);
26589
+ }
26590
+ peaks.push(data);
26591
+ }
26592
+ return peaks;
26593
+ }
26594
+ /** Get the duration of the audio in seconds */
26595
+ getDuration() {
26596
+ let duration = super.getDuration() || 0;
26597
+ // Fall back to the decoded data duration if the media duration is incorrect
26598
+ if ((duration === 0 || duration === Infinity) && this.decodedData) {
26599
+ duration = this.decodedData.duration;
26600
+ }
26601
+ return duration;
26602
+ }
26603
+ /** Toggle if the waveform should react to clicks */
26604
+ toggleInteraction(isInteractive) {
26605
+ this.options.interact = isInteractive;
26606
+ }
26607
+ /** Jump to a specific time in the audio (in seconds) */
26608
+ setTime(time) {
26609
+ this.stopAtPosition = null;
26610
+ super.setTime(time);
26611
+ this.updateProgress(time);
26612
+ this.emit('timeupdate', time);
26613
+ }
26614
+ /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
26615
+ seekTo(progress) {
26616
+ const time = this.getDuration() * progress;
26617
+ this.setTime(time);
26618
+ }
26619
+ /** Start playing the audio */
26620
+ play(start, end) {
26621
+ const _super = Object.create(null, {
26622
+ play: { get: () => super.play }
26623
+ });
26624
+ return __awaiter$5(this, void 0, void 0, function* () {
26625
+ if (start != null) {
26626
+ this.setTime(start);
26627
+ }
26628
+ const playResult = yield _super.play.call(this);
26629
+ if (end != null) {
26630
+ if (this.media instanceof WebAudioPlayer) {
26631
+ this.media.stopAt(end);
26632
+ }
26633
+ else {
26634
+ this.stopAtPosition = end;
26635
+ }
26636
+ }
26637
+ return playResult;
26638
+ });
26639
+ }
26640
+ /** Play or pause the audio */
26641
+ playPause() {
26642
+ return __awaiter$5(this, void 0, void 0, function* () {
26643
+ return this.isPlaying() ? this.pause() : this.play();
26644
+ });
26645
+ }
26646
+ /** Stop the audio and go to the beginning */
26647
+ stop() {
26648
+ this.pause();
26649
+ this.setTime(0);
26650
+ }
26651
+ /** Skip N or -N seconds from the current position */
26652
+ skip(seconds) {
26653
+ this.setTime(this.getCurrentTime() + seconds);
26654
+ }
26655
+ /** Empty the waveform */
26656
+ empty() {
26657
+ this.load('', [[0]], 0.001);
26658
+ }
26659
+ /** Set HTML media element */
26660
+ setMediaElement(element) {
26661
+ this.unsubscribePlayerEvents();
26662
+ super.setMediaElement(element);
26663
+ this.initPlayerEvents();
26664
+ }
26665
+ exportImage() {
26666
+ return __awaiter$5(this, arguments, void 0, function* (format = 'image/png', quality = 1, type = 'dataURL') {
26667
+ return this.renderer.exportImage(format, quality, type);
26668
+ });
26669
+ }
26670
+ /** Unmount wavesurfer */
26671
+ destroy() {
26672
+ var _a;
26673
+ this.emit('destroy');
26674
+ (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
26675
+ this.plugins.forEach((plugin) => plugin.destroy());
26676
+ this.subscriptions.forEach((unsubscribe) => unsubscribe());
26677
+ this.unsubscribePlayerEvents();
26678
+ this.timer.destroy();
26679
+ this.renderer.destroy();
26680
+ super.destroy();
26681
+ }
26682
+ }
26683
+ WaveSurfer.BasePlugin = BasePlugin;
26684
+ WaveSurfer.dom = dom;
26685
+
24885
26686
  var _templateObject$t, _templateObject2$p, _templateObject3$j, _templateObject4$g, _templateObject5$e, _templateObject6$c;
24886
26687
  var AudioPlayer = function AudioPlayer(_ref) {
24887
26688
  var url = _ref.url,
@@ -24997,73 +26798,69 @@ var AudioPlayer = function AudioPlayer(_ref) {
24997
26798
  }
24998
26799
  var initWaveSurfer = function initWaveSurfer() {
24999
26800
  try {
25000
- var _temp = _catch(function () {
25001
- return Promise.resolve(import('wavesurfer.js')).then(function (WaveSurfer) {
25002
- wavesurfer.current = WaveSurfer["default"].create({
25003
- container: wavesurferContainer.current,
25004
- waveColor: textSecondary,
25005
- skipLength: 0,
25006
- progressColor: accentColor,
25007
- audioRate: audioRate,
25008
- barWidth: 1,
25009
- barHeight: 1,
25010
- hideScrollbar: true,
25011
- barRadius: 1.5,
25012
- cursorWidth: 0,
25013
- barGap: 2,
25014
- barMinHeight: 2,
25015
- height: 20
25016
- });
25017
- var peaks;
25018
- if (file.metadata) {
25019
- if (file.metadata.dur) {
25020
- setCurrentTime(formatAudioVideoTime(file.metadata.dur));
25021
- }
25022
- if (file.metadata.tmb) {
25023
- var maxVal = Math.max.apply(Math, file.metadata.tmb);
25024
- var dec = maxVal / 100;
25025
- peaks = file.metadata.tmb.map(function (peak) {
25026
- return peak / dec / 100;
25027
- });
25028
- }
26801
+ try {
26802
+ wavesurfer.current = WaveSurfer.create({
26803
+ container: wavesurferContainer.current,
26804
+ waveColor: textSecondary,
26805
+ progressColor: accentColor,
26806
+ audioRate: audioRate,
26807
+ barWidth: 1,
26808
+ barHeight: 1,
26809
+ hideScrollbar: true,
26810
+ barRadius: 1.5,
26811
+ cursorWidth: 0,
26812
+ barGap: 2,
26813
+ height: 20
26814
+ });
26815
+ var peaks;
26816
+ if (file.metadata) {
26817
+ if (file.metadata.dur) {
26818
+ setCurrentTime(formatAudioVideoTime(file.metadata.dur));
25029
26819
  }
25030
- wavesurfer.current.load(url, peaks);
25031
- wavesurfer.current.on('ready', function () {
25032
- var audioDuration = wavesurfer.current.getDuration();
25033
- setCurrentTime(formatAudioVideoTime(audioDuration));
25034
- wavesurfer.current.drawBuffer = function (d) {
25035
- log.info('filters --- ', d);
25036
- };
25037
- });
25038
- wavesurfer.current.on('finish', function () {
25039
- setPlayAudio(false);
25040
- wavesurfer.current.seekTo(0);
25041
- var audioDuration = wavesurfer.current.getDuration();
25042
- setCurrentTime(formatAudioVideoTime(audioDuration));
25043
- if (playingAudioId === file.id) {
25044
- dispatch(setPlayingAudioIdAC(null));
25045
- }
25046
- clearInterval(intervalRef.current);
25047
- });
25048
- wavesurfer.current.on('pause', function () {
25049
- setPlayAudio(false);
25050
- if (playingAudioId === file.id) {
25051
- dispatch(setPlayingAudioIdAC(null));
25052
- }
25053
- clearInterval(intervalRef.current);
25054
- });
25055
- wavesurfer.current.on('interaction', function () {
25056
- var currentTime = wavesurfer.current.getCurrentTime();
25057
- setCurrentTime(formatAudioVideoTime(currentTime));
25058
- });
25059
- if (url !== '_') {
25060
- setIsRendered(true);
26820
+ if (file.metadata.tmb) {
26821
+ var maxVal = Math.max.apply(Math, file.metadata.tmb);
26822
+ var dec = maxVal / 100;
26823
+ peaks = file.metadata.tmb.map(function (peak) {
26824
+ return peak / dec / 100;
26825
+ });
26826
+ }
26827
+ }
26828
+ wavesurfer.current.load(url, peaks);
26829
+ wavesurfer.current.on('ready', function () {
26830
+ var audioDuration = wavesurfer.current.getDuration();
26831
+ setCurrentTime(formatAudioVideoTime(audioDuration));
26832
+ wavesurfer.current.drawBuffer = function (d) {
26833
+ log.info('filters --- ', d);
26834
+ };
26835
+ });
26836
+ wavesurfer.current.on('finish', function () {
26837
+ setPlayAudio(false);
26838
+ wavesurfer.current.seekTo(0);
26839
+ var audioDuration = wavesurfer.current.getDuration();
26840
+ setCurrentTime(formatAudioVideoTime(audioDuration));
26841
+ if (playingAudioId === file.id) {
26842
+ dispatch(setPlayingAudioIdAC(null));
26843
+ }
26844
+ clearInterval(intervalRef.current);
26845
+ });
26846
+ wavesurfer.current.on('pause', function () {
26847
+ setPlayAudio(false);
26848
+ if (playingAudioId === file.id) {
26849
+ dispatch(setPlayingAudioIdAC(null));
25061
26850
  }
26851
+ clearInterval(intervalRef.current);
25062
26852
  });
25063
- }, function (e) {
26853
+ wavesurfer.current.on('interaction', function () {
26854
+ var currentTime = wavesurfer.current.getCurrentTime();
26855
+ setCurrentTime(formatAudioVideoTime(currentTime));
26856
+ });
26857
+ if (url !== '_') {
26858
+ setIsRendered(true);
26859
+ }
26860
+ } catch (e) {
25064
26861
  log.error('Failed to init wavesurfer', e);
25065
- });
25066
- return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
26862
+ }
26863
+ return Promise.resolve();
25067
26864
  } catch (e) {
25068
26865
  return Promise.reject(e);
25069
26866
  }
@@ -25088,7 +26885,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
25088
26885
  }), /*#__PURE__*/React__default.createElement(AudioRate, {
25089
26886
  color: textSecondary,
25090
26887
  onClick: handleSetAudioRate
25091
- }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer, {
26888
+ }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer$1, {
25092
26889
  color: textSecondary
25093
26890
  }, currentTime));
25094
26891
  };
@@ -25101,7 +26898,7 @@ var AudioRate = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTe
25101
26898
  return props.color;
25102
26899
  });
25103
26900
  var WaveContainer = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n margin-left: 8px;\n"])));
25104
- var Timer = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 59px;\n bottom: 12px;\n display: inline-block;\n font-weight: 400;\n font-size: 11px;\n line-height: 12px;\n color: ", ";\n"])), function (props) {
26901
+ var Timer$1 = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 59px;\n bottom: 12px;\n display: inline-block;\n font-weight: 400;\n font-size: 11px;\n line-height: 12px;\n color: ", ";\n"])), function (props) {
25105
26902
  return props.color;
25106
26903
  });
25107
26904
 
@@ -25937,13 +27734,13 @@ function _extends$Y() {
25937
27734
  }, _extends$Y.apply(null, arguments);
25938
27735
  }
25939
27736
  function SvgEmojiAnimalIcon(props) {
25940
- return /*#__PURE__*/createElement("svg", _extends$Y({
27737
+ return /*#__PURE__*/createElement$1("svg", _extends$Y({
25941
27738
  width: 20,
25942
27739
  height: 20,
25943
27740
  viewBox: "0 0 20.01 20.01",
25944
27741
  fill: "none",
25945
27742
  xmlns: "http://www.w3.org/2000/svg"
25946
- }, props), _path$X || (_path$X = /*#__PURE__*/createElement("path", {
27743
+ }, props), _path$X || (_path$X = /*#__PURE__*/createElement$1("path", {
25947
27744
  fillRule: "evenodd",
25948
27745
  clipRule: "evenodd",
25949
27746
  d: "M7.188 3.875a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm7.938-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zM3.437 7.624a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.312.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm15.438-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm-6.393-.359a3.563 3.563 0 015.567 1.862c.193.672.643 1.24 1.252 1.582a3.25 3.25 0 01-1.548 6.102h-.002c-.435 0-.864-.086-1.265-.253a4.859 4.859 0 00-3.722 0h.001a3.28 3.28 0 01-1.265.253h-.003a3.25 3.25 0 01-1.548-6.101A2.657 2.657 0 006.576 9.94a3.563 3.563 0 011.28-1.862zM10 8.863a2.062 2.062 0 00-1.982 1.493 4.156 4.156 0 01-1.964 2.478l-.008.004a1.75 1.75 0 001.517 3.15l.001-.001a6.358 6.358 0 014.872 0h.001a1.75 1.75 0 001.516-3.15l-.007-.003a4.156 4.156 0 01-1.964-2.478A2.062 2.062 0 0010 8.863z",
@@ -25962,23 +27759,23 @@ function _extends$Z() {
25962
27759
  }, _extends$Z.apply(null, arguments);
25963
27760
  }
25964
27761
  function SvgEmojiFoodIcon(props) {
25965
- return /*#__PURE__*/createElement("svg", _extends$Z({
27762
+ return /*#__PURE__*/createElement$1("svg", _extends$Z({
25966
27763
  width: 20,
25967
27764
  height: 20,
25968
27765
  viewBox: "0 0 20.01 20.01",
25969
27766
  fill: "none",
25970
27767
  xmlns: "http://www.w3.org/2000/svg"
25971
- }, props), _path$Y || (_path$Y = /*#__PURE__*/createElement("path", {
27768
+ }, props), _path$Y || (_path$Y = /*#__PURE__*/createElement$1("path", {
25972
27769
  fillRule: "evenodd",
25973
27770
  clipRule: "evenodd",
25974
27771
  d: "M12.143 7.855c0-.395.32-.714.714-.714.779 0 1.501.261 2.033.779.535.52.824 1.249.824 2.078a.714.714 0 11-1.428 0c0-.49-.165-.833-.392-1.054-.23-.224-.579-.375-1.037-.375a.714.714 0 01-.714-.714z",
25975
27772
  fill: "CurrentColor"
25976
- })), _path2$5 || (_path2$5 = /*#__PURE__*/createElement("path", {
27773
+ })), _path2$5 || (_path2$5 = /*#__PURE__*/createElement$1("path", {
25977
27774
  fillRule: "evenodd",
25978
27775
  clipRule: "evenodd",
25979
27776
  d: "M10.083 2.222c-.616.616-.81 1.522-.797 2.367a6.008 6.008 0 00-1.905-.306c-3.438 0-5.952 2.45-5.952 5.858 0 1.644.588 3.698 1.574 5.35.968 1.622 2.465 3.08 4.378 3.08a5.98 5.98 0 002.62-.596 5.98 5.98 0 002.618.597c1.914 0 3.41-1.46 4.378-3.081.986-1.652 1.574-3.706 1.574-5.35 0-3.208-2.229-5.568-5.36-5.833.223-.434.307-.893.34-1.244.049-.518-.016-1.016-.09-1.528-.513-.072-1.01-.14-1.528-.09-.524.048-1.288.213-1.85.776zM7.38 5.712c-2.674 0-4.524 1.835-4.524 4.43 0 1.356.503 3.16 1.372 4.616.887 1.486 2.01 2.385 3.152 2.385.758 0 1.454-.178 2.075-.492a1.206 1.206 0 011.088 0 4.55 4.55 0 002.075.492c1.142 0 2.265-.899 3.152-2.385.869-1.456 1.372-3.26 1.372-4.617 0-2.594-1.85-4.43-4.524-4.43a4.57 4.57 0 00-2.073.493 1.206 1.206 0 01-1.09 0 4.551 4.551 0 00-2.075-.492zm3.341-1.437c.362-.026.776-.105 1.043-.37.265-.267.344-.682.37-1.043-.361.026-.776.104-1.042.37-.266.267-.345.681-.37 1.043z",
25980
27777
  fill: "CurrentColor"
25981
- })), _path3$2 || (_path3$2 = /*#__PURE__*/createElement("path", {
27778
+ })), _path3$2 || (_path3$2 = /*#__PURE__*/createElement$1("path", {
25982
27779
  fillRule: "evenodd",
25983
27780
  clipRule: "evenodd",
25984
27781
  d: "M12.857 7.14a.714.714 0 000 1.43c.458 0 .807.15 1.037.374.227.221.392.565.392 1.054a.714.714 0 101.428 0c0-.83-.289-1.557-.824-2.078-.532-.518-1.254-.78-2.033-.78z",
@@ -25997,13 +27794,13 @@ function _extends$_() {
25997
27794
  }, _extends$_.apply(null, arguments);
25998
27795
  }
25999
27796
  function SvgEmojiTravelIcon(props) {
26000
- return /*#__PURE__*/createElement("svg", _extends$_({
27797
+ return /*#__PURE__*/createElement$1("svg", _extends$_({
26001
27798
  width: 20,
26002
27799
  height: 20,
26003
27800
  viewBox: "0 0 20.01 20.01",
26004
27801
  fill: "none",
26005
27802
  xmlns: "http://www.w3.org/2000/svg"
26006
- }, props), _path$Z || (_path$Z = /*#__PURE__*/createElement("path", {
27803
+ }, props), _path$Z || (_path$Z = /*#__PURE__*/createElement$1("path", {
26007
27804
  fillRule: "evenodd",
26008
27805
  clipRule: "evenodd",
26009
27806
  d: "M13.763 2.458a2.6 2.6 0 013.748 3.604l-2.135 2.236a5.065 5.065 0 00-.188.204.076.076 0 00-.004.017l.004.03c.008.05.024.116.053.241l1.327 5.754.012.05c.044.189.096.412.079.639-.015.197-.07.39-.162.564-.106.202-.268.364-.406.5l-.036.037-.306.306c-.215.215-.409.408-.58.55-.175.147-.406.309-.705.362a1.46 1.46 0 01-1.124-.266c-.244-.18-.378-.429-.47-.638-.089-.204-.175-.464-.272-.752l-1.2-3.6-1.779 1.78a4.815 4.815 0 00-.172.178.076.076 0 00-.005.015l.001.027c.003.045.01.105.022.22l.141 1.27.005.045c.02.168.042.368.01.567a1.46 1.46 0 01-.172.49c-.1.176-.242.317-.362.437l-.032.032-.152.151-.018.019c-.166.166-.32.32-.46.438-.15.125-.338.258-.583.322a1.46 1.46 0 01-1.007-.1 1.49 1.49 0 01-.508-.43c-.114-.142-.236-.325-.366-.52l-1.22-1.83a4.929 4.929 0 00-.063-.09l-.009-.006a4.655 4.655 0 00-.077-.052l-1.829-1.22a7.783 7.783 0 01-.52-.365 1.492 1.492 0 01-.43-.509 1.46 1.46 0 01-.1-1.006c.065-.245.197-.434.323-.584.117-.14.272-.294.438-.46l.018-.018.152-.152.031-.032c.12-.12.262-.262.437-.362.152-.086.318-.145.49-.172a2.09 2.09 0 01.568.01l.044.005 1.27.141a4.747 4.747 0 00.247.023.075.075 0 00.015-.005 4.867 4.867 0 00.178-.172l1.78-1.78-3.6-1.199a9.48 9.48 0 01-.752-.272c-.209-.092-.457-.226-.638-.47a1.46 1.46 0 01-.265-1.124c.053-.298.215-.53.36-.705.143-.171.337-.365.552-.58l.02-.02.285-.285.037-.037c.136-.137.298-.3.5-.406a1.46 1.46 0 01.564-.161c.228-.018.45.034.64.078l.05.012 5.731 1.323a5.096 5.096 0 00.275.057.075.075 0 00.019-.005 5.146 5.146 0 00.199-.197l2.082-2.152zm2.728.948a1.216 1.216 0 00-1.734.014l-2.082 2.151-.036.037c-.132.137-.288.3-.483.407a1.46 1.46 0 01-.602.178c-.223.016-.442-.036-.627-.079l-.05-.011L5.146 4.78a5.06 5.06 0 00-.279-.059.077.077 0 00-.017.005 5.065 5.065 0 00-.205.197l-.285.285c-.243.243-.39.392-.487.508a.915.915 0 00-.063.083c0 .006.002.012.004.018.016.01.045.025.094.046.138.06.337.128.662.236l4.633 1.544a.692.692 0 01.27 1.146l-2.57 2.57-.032.032c-.12.12-.261.262-.436.362a1.459 1.459 0 01-.492.172 2.09 2.09 0 01-.567-.01l-.044-.005-1.27-.141a4.747 4.747 0 00-.247-.023.075.075 0 00-.015.005 4.867 4.867 0 00-.178.172l-.152.152c-.19.19-.301.302-.375.39a.735.735 0 00-.045.058c0 .008 0 .015.002.023.01.009.027.025.056.048.09.072.22.16.444.309l1.808 1.205.015.01a1.466 1.466 0 01.507.507l.01.016 1.206 1.807c.15.225.237.355.308.444.024.03.04.047.049.056a.076.076 0 00.022.002.723.723 0 00.059-.045c.087-.073.199-.184.39-.375l.151-.151a4.89 4.89 0 00.172-.178.077.077 0 00.005-.016v-.026a4.94 4.94 0 00-.023-.22l-.14-1.27-.006-.045a2.091 2.091 0 01-.01-.567 1.46 1.46 0 01.172-.491c.1-.175.242-.317.363-.437l.031-.031 2.57-2.57a.692.692 0 011.146.27L13.9 15.43c.109.325.175.523.236.662a.9.9 0 00.046.093.073.073 0 00.019.004.917.917 0 00.083-.063c.116-.096.264-.244.507-.486l.285-.285a5.078 5.078 0 00.197-.206.073.073 0 00.005-.017 5.042 5.042 0 00-.058-.279l-1.328-5.753-.011-.049c-.044-.184-.095-.401-.079-.624a1.46 1.46 0 01.152-.553c.1-.199.255-.36.386-.496l.034-.037 2.136-2.236a1.216 1.216 0 00-.02-1.7z",
@@ -26022,22 +27819,22 @@ function _extends$$() {
26022
27819
  }, _extends$$.apply(null, arguments);
26023
27820
  }
26024
27821
  function SvgEmojiObjectIcon(props) {
26025
- return /*#__PURE__*/createElement("svg", _extends$$({
27822
+ return /*#__PURE__*/createElement$1("svg", _extends$$({
26026
27823
  width: 20,
26027
27824
  height: 20,
26028
27825
  viewBox: "0 0 20.01 20.01",
26029
27826
  fill: "none",
26030
27827
  xmlns: "http://www.w3.org/2000/svg"
26031
- }, props), _g || (_g = /*#__PURE__*/createElement("g", {
27828
+ }, props), _g || (_g = /*#__PURE__*/createElement$1("g", {
26032
27829
  clipPath: "url(#emojiObjectIcon_svg__clip0_1048_8610)"
26033
- }, /*#__PURE__*/createElement("path", {
27830
+ }, /*#__PURE__*/createElement$1("path", {
26034
27831
  fillRule: "evenodd",
26035
27832
  clipRule: "evenodd",
26036
27833
  d: "M10 .917a.75.75 0 01.75.75V2.5a.75.75 0 01-1.5 0v-.833a.75.75 0 01.75-.75zM3.553 3.553a.75.75 0 011.06 0l.5.5a.75.75 0 11-1.06 1.061l-.5-.5a.75.75 0 010-1.06zm12.894 0a.75.75 0 010 1.061l-.5.5a.75.75 0 11-1.06-1.06l.5-.5a.75.75 0 011.06 0zM10 5.75a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4.25 10a5.75 5.75 0 118.167 5.22v1.447a2.417 2.417 0 01-4.834 0v-1.448A5.75 5.75 0 014.25 10zm4.833 5.678v.989a.917.917 0 101.834 0v-.99a5.795 5.795 0 01-1.834 0zM.917 10a.75.75 0 01.75-.75H2.5a.75.75 0 110 1.5h-.833a.75.75 0 01-.75-.75zm15.833 0a.75.75 0 01.75-.75h.833a.75.75 0 110 1.5H17.5a.75.75 0 01-.75-.75z",
26037
27834
  fill: "CurrentColor"
26038
- }))), _defs$1 || (_defs$1 = /*#__PURE__*/createElement("defs", null, /*#__PURE__*/createElement("clipPath", {
27835
+ }))), _defs$1 || (_defs$1 = /*#__PURE__*/createElement$1("defs", null, /*#__PURE__*/createElement$1("clipPath", {
26039
27836
  id: "emojiObjectIcon_svg__clip0_1048_8610"
26040
- }, /*#__PURE__*/createElement("path", {
27837
+ }, /*#__PURE__*/createElement$1("path", {
26041
27838
  fill: "CurrentColor",
26042
27839
  d: "M0 0h20v20H0z"
26043
27840
  })))));
@@ -26054,13 +27851,13 @@ function _extends$10() {
26054
27851
  }, _extends$10.apply(null, arguments);
26055
27852
  }
26056
27853
  function SvgEmojiSymbolsIcon(props) {
26057
- return /*#__PURE__*/createElement("svg", _extends$10({
27854
+ return /*#__PURE__*/createElement$1("svg", _extends$10({
26058
27855
  width: 20,
26059
27856
  height: 20,
26060
27857
  viewBox: "0 0 20.01 20.01",
26061
27858
  fill: "none",
26062
27859
  xmlns: "http://www.w3.org/2000/svg"
26063
- }, props), _path$_ || (_path$_ = /*#__PURE__*/createElement("path", {
27860
+ }, props), _path$_ || (_path$_ = /*#__PURE__*/createElement$1("path", {
26064
27861
  fillRule: "evenodd",
26065
27862
  clipRule: "evenodd",
26066
27863
  d: "M8.04 1.76a.75.75 0 01.616.863l-.548 3.294h5.146l.59-3.54a.75.75 0 111.48.246l-.55 3.294h2.31a.75.75 0 010 1.5h-2.56l-.86 5.167h2.586a.75.75 0 110 1.5h-2.837l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H6.745l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H2.083a.75.75 0 010-1.5h3.393l.86-5.167h-3.42a.75.75 0 110-1.5h3.67l.59-3.54a.75.75 0 01.864-.617zm-.182 5.657l-.862 5.167h5.146l.862-5.167H7.858z",
@@ -26079,13 +27876,13 @@ function _extends$11() {
26079
27876
  }, _extends$11.apply(null, arguments);
26080
27877
  }
26081
27878
  function SvgEmojiFlagicon(props) {
26082
- return /*#__PURE__*/createElement("svg", _extends$11({
27879
+ return /*#__PURE__*/createElement$1("svg", _extends$11({
26083
27880
  width: 20,
26084
27881
  height: 20,
26085
27882
  viewBox: "0 0 20.01 20.01",
26086
27883
  fill: "none",
26087
27884
  xmlns: "http://www.w3.org/2000/svg"
26088
- }, props), _path$$ || (_path$$ = /*#__PURE__*/createElement("path", {
27885
+ }, props), _path$$ || (_path$$ = /*#__PURE__*/createElement$1("path", {
26089
27886
  fillRule: "evenodd",
26090
27887
  clipRule: "evenodd",
26091
27888
  d: "M4.167 3.25a.917.917 0 00-.917.917v7.764c.288-.118.6-.181.917-.181h5.416a.75.75 0 01.53.22l.614.613h5.56L14.329 8.67a.75.75 0 010-.671l1.957-3.915H10.75V7.5a.75.75 0 01-1.5 0V3.25H4.167zm6.56-.667l-.613-.613a.75.75 0 00-.53-.22H4.166A2.417 2.417 0 001.75 4.167V17.5a.75.75 0 001.5 0v-3.333a.917.917 0 01.917-.917h5.106l.613.614c.141.14.332.22.53.22H17.5a.75.75 0 00.67-1.086l-2.332-4.665 2.333-4.664a.75.75 0 00-.671-1.086h-6.773z",
@@ -26589,13 +28386,13 @@ function _extends$12() {
26589
28386
  }, _extends$12.apply(null, arguments);
26590
28387
  }
26591
28388
  function SvgPlus(props) {
26592
- return /*#__PURE__*/createElement("svg", _extends$12({
28389
+ return /*#__PURE__*/createElement$1("svg", _extends$12({
26593
28390
  width: 20,
26594
28391
  height: 20,
26595
28392
  viewBox: "0 0 20.01 20.01",
26596
28393
  fill: "none",
26597
28394
  xmlns: "http://www.w3.org/2000/svg"
26598
- }, props), _path$10 || (_path$10 = /*#__PURE__*/createElement("path", {
28395
+ }, props), _path$10 || (_path$10 = /*#__PURE__*/createElement$1("path", {
26599
28396
  d: "M10 3.778c.43 0 .778.348.778.778v4.666h4.666a.778.778 0 110 1.556h-4.666v4.666a.778.778 0 11-1.556 0v-4.666H4.556a.778.778 0 110-1.556h4.666V4.556c0-.43.348-.778.778-.778z",
26600
28397
  fill: "currentColor"
26601
28398
  })));
@@ -29733,13 +31530,13 @@ function _extends$13() {
29733
31530
  }, _extends$13.apply(null, arguments);
29734
31531
  }
29735
31532
  function SvgBold(props) {
29736
- return /*#__PURE__*/createElement("svg", _extends$13({
31533
+ return /*#__PURE__*/createElement$1("svg", _extends$13({
29737
31534
  width: 18,
29738
31535
  height: 18,
29739
31536
  viewBox: "0 0 18.01 18.01",
29740
31537
  fill: "none",
29741
31538
  xmlns: "http://www.w3.org/2000/svg"
29742
- }, props), _path$11 || (_path$11 = /*#__PURE__*/createElement("path", {
31539
+ }, props), _path$11 || (_path$11 = /*#__PURE__*/createElement$1("path", {
29743
31540
  fillRule: "evenodd",
29744
31541
  clipRule: "evenodd",
29745
31542
  d: "M6.35 3.029A1.1 1.1 0 005 4.1v10a1.1 1.1 0 001.35 1.072c.08.018.164.028.25.028h3.429c1.998 0 3.671-1.583 3.671-3.6a3.566 3.566 0 00-1.596-2.969c.38-.588.596-1.294.596-2.031 0-1.904-1.444-3.6-3.408-3.6H6.6c-.086 0-.17.01-.25.029zm3.41 7.138a3.318 3.318 0 01-.468.033H7.2V13h2.829c.842 0 1.471-.656 1.471-1.4 0-.744-.63-1.4-1.471-1.4a1.1 1.1 0 01-.268-.033zM7.2 8h2.092c.586 0 1.208-.542 1.208-1.4 0-.858-.622-1.4-1.208-1.4H7.2V8z",
@@ -29758,13 +31555,13 @@ function _extends$14() {
29758
31555
  }, _extends$14.apply(null, arguments);
29759
31556
  }
29760
31557
  function SvgItalic(props) {
29761
- return /*#__PURE__*/createElement("svg", _extends$14({
31558
+ return /*#__PURE__*/createElement$1("svg", _extends$14({
29762
31559
  width: 18,
29763
31560
  height: 18,
29764
31561
  viewBox: "0 0 18.01 18.01",
29765
31562
  fill: "none",
29766
31563
  xmlns: "http://www.w3.org/2000/svg"
29767
- }, props), _path$12 || (_path$12 = /*#__PURE__*/createElement("path", {
31564
+ }, props), _path$12 || (_path$12 = /*#__PURE__*/createElement$1("path", {
29768
31565
  fillRule: "evenodd",
29769
31566
  clipRule: "evenodd",
29770
31567
  d: "M9.984 3.2H8a.8.8 0 000 1.6h1.024l-1.68 8.4H6a.8.8 0 100 1.6h4a.8.8 0 000-1.6H8.976l1.68-8.4H12a.8.8 0 000-1.6H9.984z",
@@ -29783,19 +31580,19 @@ function _extends$15() {
29783
31580
  }, _extends$15.apply(null, arguments);
29784
31581
  }
29785
31582
  function SvgStrikethrough(props) {
29786
- return /*#__PURE__*/createElement("svg", _extends$15({
31583
+ return /*#__PURE__*/createElement$1("svg", _extends$15({
29787
31584
  width: 18,
29788
31585
  height: 18,
29789
31586
  viewBox: "0 0 18.01 18.01",
29790
31587
  fill: "none",
29791
31588
  xmlns: "http://www.w3.org/2000/svg"
29792
- }, props), _g$1 || (_g$1 = /*#__PURE__*/createElement("g", {
31589
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/createElement$1("g", {
29793
31590
  fillRule: "evenodd",
29794
31591
  clipRule: "evenodd",
29795
31592
  fill: "CurrentColor"
29796
- }, /*#__PURE__*/createElement("path", {
31593
+ }, /*#__PURE__*/createElement$1("path", {
29797
31594
  d: "M8.565 4.766c1.043-.104 1.987.287 2.447 1.138a.75.75 0 101.32-.713c-.821-1.519-2.44-2.064-3.915-1.918-2.504.248-3.581 2.265-3.144 3.93.228.868.738 1.423 1.342 1.797h4.835a4.345 4.345 0 00-.457-.205c-.514-.196-1.105-.325-1.634-.44l-.314-.07c-1.343-.301-2.097-.611-2.32-1.462-.197-.748.227-1.898 1.84-2.057zM12.937 11H11.38c.195.497.15 1.007-.113 1.392-.285.418-.943.858-2.277.858-2.072 0-2.685-1.118-2.762-1.428a.75.75 0 10-1.455.363c.255 1.021 1.503 2.565 4.217 2.565 1.656 0 2.867-.56 3.517-1.513.466-.685.582-1.486.43-2.237z"
29798
- }), /*#__PURE__*/createElement("path", {
31595
+ }), /*#__PURE__*/createElement$1("path", {
29799
31596
  d: "M2.7 9a.8.8 0 01.8-.8h11a.8.8 0 010 1.6h-11a.8.8 0 01-.8-.8z"
29800
31597
  }))));
29801
31598
  }
@@ -29811,13 +31608,13 @@ function _extends$16() {
29811
31608
  }, _extends$16.apply(null, arguments);
29812
31609
  }
29813
31610
  function SvgMono(props) {
29814
- return /*#__PURE__*/createElement("svg", _extends$16({
31611
+ return /*#__PURE__*/createElement$1("svg", _extends$16({
29815
31612
  width: 18,
29816
31613
  height: 18,
29817
31614
  viewBox: "0 0 18.01 18.01",
29818
31615
  fill: "none",
29819
31616
  xmlns: "http://www.w3.org/2000/svg"
29820
- }, props), _path$13 || (_path$13 = /*#__PURE__*/createElement("path", {
31617
+ }, props), _path$13 || (_path$13 = /*#__PURE__*/createElement$1("path", {
29821
31618
  d: "M4.98 14.753A.826.826 0 014.37 15a.882.882 0 01-.624-.247.882.882 0 01-.247-.624V3.87c0-.24.082-.444.247-.608A.853.853 0 014.37 3c.581 0 1.003.258 1.266.773l3.238 6.28c0 .01.006.015.017.015.01 0 .016-.005.016-.016l3.222-6.247c.274-.537.712-.805 1.315-.805.252 0 .466.088.641.263a.873.873 0 01.263.641v10.192a.873.873 0 01-.263.641.872.872 0 01-.64.263.873.873 0 01-.642-.263.873.873 0 01-.263-.641V6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017l-2.433 4.833c-.252.493-.646.74-1.183.74s-.932-.247-1.184-.74L5.275 6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017v7.989c0 .24-.087.45-.263.624z",
29822
31619
  fill: "CurrentColor"
29823
31620
  })));
@@ -29834,17 +31631,17 @@ function _extends$17() {
29834
31631
  }, _extends$17.apply(null, arguments);
29835
31632
  }
29836
31633
  function SvgUnderline(props) {
29837
- return /*#__PURE__*/createElement("svg", _extends$17({
31634
+ return /*#__PURE__*/createElement$1("svg", _extends$17({
29838
31635
  width: 18,
29839
31636
  height: 18,
29840
31637
  viewBox: "0 0 18.01 18.01",
29841
31638
  fill: "none",
29842
31639
  xmlns: "http://www.w3.org/2000/svg"
29843
- }, props), _g$2 || (_g$2 = /*#__PURE__*/createElement("g", {
31640
+ }, props), _g$2 || (_g$2 = /*#__PURE__*/createElement$1("g", {
29844
31641
  fill: "CurrentColor"
29845
- }, /*#__PURE__*/createElement("path", {
31642
+ }, /*#__PURE__*/createElement$1("path", {
29846
31643
  d: "M13 9c0 2.79-1.368 4.184-4.105 4.184S4.789 11.79 4.789 9V2.384c0-.242.085-.447.253-.616a.864.864 0 01.632-.268c.242 0 .447.09.615.268a.814.814 0 01.269.616V9.08c0 .926.19 1.6.568 2.021.39.421.99.632 1.8.632s1.406-.21 1.784-.632c.39-.421.585-1.095.585-2.021V2.353a.82.82 0 01.252-.6.82.82 0 01.6-.253.82.82 0 01.6.253.82.82 0 01.253.6V9z"
29847
- }), /*#__PURE__*/createElement("path", {
31644
+ }), /*#__PURE__*/createElement$1("path", {
29848
31645
  fillRule: "evenodd",
29849
31646
  clipRule: "evenodd",
29850
31647
  d: "M4 15.71a.79.79 0 01.79-.789h8.42a.79.79 0 110 1.579H4.79a.79.79 0 01-.79-.79z"
@@ -30790,17 +32587,17 @@ function _extends$18() {
30790
32587
  }, _extends$18.apply(null, arguments);
30791
32588
  }
30792
32589
  function SvgSend(props) {
30793
- return /*#__PURE__*/createElement("svg", _extends$18({
32590
+ return /*#__PURE__*/createElement$1("svg", _extends$18({
30794
32591
  width: 32,
30795
32592
  height: 32,
30796
32593
  fill: "none",
30797
32594
  xmlns: "http://www.w3.org/2000/svg"
30798
- }, props), _circle$6 || (_circle$6 = /*#__PURE__*/createElement("circle", {
32595
+ }, props), _circle$6 || (_circle$6 = /*#__PURE__*/createElement$1("circle", {
30799
32596
  cx: 16,
30800
32597
  cy: 16,
30801
32598
  r: 16,
30802
32599
  fill: "currentColor"
30803
- })), _path$14 || (_path$14 = /*#__PURE__*/createElement("path", {
32600
+ })), _path$14 || (_path$14 = /*#__PURE__*/createElement$1("path", {
30804
32601
  d: "M10.953 18.945c-.545 1.46-.888 2.485-1.028 3.076-.439 1.856-.758 2.274.879 1.392 1.637-.882 9.56-5.251 11.329-6.222 2.304-1.266 2.335-1.167-.124-2.511-1.873-1.024-9.704-5.279-11.205-6.115-1.501-.835-1.318-.464-.879 1.392.142.6.49 1.634 1.043 3.105a3.143 3.143 0 002.35 1.98l4.595.88a.079.079 0 010 .155l-4.606.88a3.143 3.143 0 00-2.354 1.988z",
30805
32602
  fill: "#fff"
30806
32603
  })));
@@ -30817,12 +32614,12 @@ function _extends$19() {
30817
32614
  }, _extends$19.apply(null, arguments);
30818
32615
  }
30819
32616
  function SvgEye(props) {
30820
- return /*#__PURE__*/createElement("svg", _extends$19({
32617
+ return /*#__PURE__*/createElement$1("svg", _extends$19({
30821
32618
  width: 25,
30822
32619
  height: 24,
30823
32620
  fill: "none",
30824
32621
  xmlns: "http://www.w3.org/2000/svg"
30825
- }, props), _path$15 || (_path$15 = /*#__PURE__*/createElement("path", {
32622
+ }, props), _path$15 || (_path$15 = /*#__PURE__*/createElement$1("path", {
30826
32623
  d: "M12.5 5c6 0 10 5.6 10 7 0 1.4-4 7-10 7s-10-5.6-10-7c0-1.4 4-7 10-7zm0 2a5 5 0 100 10 5 5 0 000-10zm.001 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z",
30827
32624
  fill: "CurrentColor"
30828
32625
  })));
@@ -30839,13 +32636,13 @@ function _extends$1a() {
30839
32636
  }, _extends$1a.apply(null, arguments);
30840
32637
  }
30841
32638
  function SvgAddAttachment(props) {
30842
- return /*#__PURE__*/createElement("svg", _extends$1a({
32639
+ return /*#__PURE__*/createElement$1("svg", _extends$1a({
30843
32640
  width: 24,
30844
32641
  height: 24,
30845
32642
  viewBox: "0 0 24.01 24.01",
30846
32643
  fill: "none",
30847
32644
  xmlns: "http://www.w3.org/2000/svg"
30848
- }, props), _path$16 || (_path$16 = /*#__PURE__*/createElement("path", {
32645
+ }, props), _path$16 || (_path$16 = /*#__PURE__*/createElement$1("path", {
30849
32646
  d: "M12 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.286-10.286 10.286C6.32 22.286 1.714 17.68 1.714 12 1.714 6.32 6.32 1.714 12 1.714zm0 1.715a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 3.428c.473 0 .857.384.857.857v3.429h3.429a.857.857 0 010 1.714h-3.429v3.429a.857.857 0 11-1.714 0v-3.429H7.714a.857.857 0 110-1.714h3.429V7.714c0-.473.384-.857.857-.857z",
30850
32647
  fill: "CurrentColor"
30851
32648
  })));
@@ -30862,12 +32659,12 @@ function _extends$1b() {
30862
32659
  }, _extends$1b.apply(null, arguments);
30863
32660
  }
30864
32661
  function SvgErrorCircle(props) {
30865
- return /*#__PURE__*/createElement("svg", _extends$1b({
32662
+ return /*#__PURE__*/createElement$1("svg", _extends$1b({
30866
32663
  width: 25,
30867
32664
  height: 24,
30868
32665
  fill: "none",
30869
32666
  xmlns: "http://www.w3.org/2000/svg"
30870
- }, props), _path$17 || (_path$17 = /*#__PURE__*/createElement("path", {
32667
+ }, props), _path$17 || (_path$17 = /*#__PURE__*/createElement$1("path", {
30871
32668
  d: "M12.5 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.285-10.286 10.285C6.82 22.285 2.214 17.68 2.214 12 2.214 6.319 6.82 1.714 12.5 1.714zm0 1.714a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 11.657a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zm.063-8.228c.204 0 .332.032.443.091.112.06.2.148.26.26.06.111.091.24.091.443v5.269c0 .204-.032.331-.091.443a.623.623 0 01-.26.26c-.111.059-.24.09-.443.09h-.126c-.204 0-.332-.031-.443-.09a.624.624 0 01-.26-.26c-.06-.112-.091-.24-.091-.443V7.65c0-.203.032-.33.091-.442.06-.112.148-.2.26-.26.111-.06.24-.091.443-.091h.126z",
30872
32669
  fill: "#FFB73D"
30873
32670
  })));
@@ -30884,13 +32681,13 @@ function _extends$1c() {
30884
32681
  }, _extends$1c.apply(null, arguments);
30885
32682
  }
30886
32683
  function SvgPlayRecord(props) {
30887
- return /*#__PURE__*/createElement("svg", _extends$1c({
32684
+ return /*#__PURE__*/createElement$1("svg", _extends$1c({
30888
32685
  width: 20,
30889
32686
  height: 20,
30890
32687
  viewBox: "0 0 20.01 20.01",
30891
32688
  fill: "none",
30892
32689
  xmlns: "http://www.w3.org/2000/svg"
30893
- }, props), _path$18 || (_path$18 = /*#__PURE__*/createElement("path", {
32690
+ }, props), _path$18 || (_path$18 = /*#__PURE__*/createElement$1("path", {
30894
32691
  d: "M16.28 8.913c.793.48.793 1.692 0 2.172l-8.265 4.997c-.787.475-1.765-.126-1.765-1.086V5.002c0-.96.979-1.561 1.765-1.086l8.265 4.997z",
30895
32692
  fill: "CurrentColor"
30896
32693
  })));
@@ -30907,13 +32704,13 @@ function _extends$1d() {
30907
32704
  }, _extends$1d.apply(null, arguments);
30908
32705
  }
30909
32706
  function SvgPauseRecord(props) {
30910
- return /*#__PURE__*/createElement("svg", _extends$1d({
32707
+ return /*#__PURE__*/createElement$1("svg", _extends$1d({
30911
32708
  width: 20,
30912
32709
  height: 20,
30913
32710
  viewBox: "0 0 20.01 20.01",
30914
32711
  fill: "none",
30915
32712
  xmlns: "http://www.w3.org/2000/svg"
30916
- }, props), _path$19 || (_path$19 = /*#__PURE__*/createElement("path", {
32713
+ }, props), _path$19 || (_path$19 = /*#__PURE__*/createElement$1("path", {
30917
32714
  d: "M7.468 3.75c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h1.186zm6.25 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.162.088-.324.134-.77.134h-1.186c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.162-.088.324-.134.77-.134h1.186z",
30918
32715
  fill: "CurrentColor"
30919
32716
  })));
@@ -30930,12 +32727,12 @@ function _extends$1e() {
30930
32727
  }, _extends$1e.apply(null, arguments);
30931
32728
  }
30932
32729
  function SvgStopRecord(props) {
30933
- return /*#__PURE__*/createElement("svg", _extends$1e({
32730
+ return /*#__PURE__*/createElement$1("svg", _extends$1e({
30934
32731
  width: 20,
30935
32732
  height: 20,
30936
32733
  fill: "none",
30937
32734
  xmlns: "http://www.w3.org/2000/svg"
30938
- }, props), _path$1a || (_path$1a = /*#__PURE__*/createElement("path", {
32735
+ }, props), _path$1a || (_path$1a = /*#__PURE__*/createElement$1("path", {
30939
32736
  fillRule: "evenodd",
30940
32737
  clipRule: "evenodd",
30941
32738
  d: "M4.421 5.441c-.254.5-.254 1.153-.254 2.46v4.2c0 1.306 0 1.96.254 2.459.224.439.581.796 1.02 1.02.5.254 1.153.254 2.46.254h4.2c1.306 0 1.96 0 2.459-.255.439-.223.796-.58 1.02-1.02.254-.498.254-1.152.254-2.459V7.9c0-1.306 0-1.96-.255-2.459a2.333 2.333 0 00-1.02-1.02c-.498-.254-1.152-.254-2.459-.254H7.9c-1.306 0-1.96 0-2.459.254-.439.224-.796.581-1.02 1.02z",
@@ -30954,21 +32751,21 @@ function _extends$1f() {
30954
32751
  }, _extends$1f.apply(null, arguments);
30955
32752
  }
30956
32753
  function SvgRecordButton(props) {
30957
- return /*#__PURE__*/createElement("svg", _extends$1f({
32754
+ return /*#__PURE__*/createElement$1("svg", _extends$1f({
30958
32755
  width: 32,
30959
32756
  height: 32,
30960
32757
  viewBox: "0 0 32.01 32.01",
30961
32758
  fill: "none",
30962
32759
  xmlns: "http://www.w3.org/2000/svg"
30963
- }, props), _circle$7 || (_circle$7 = /*#__PURE__*/createElement("circle", {
32760
+ }, props), _circle$7 || (_circle$7 = /*#__PURE__*/createElement$1("circle", {
30964
32761
  cx: 16,
30965
32762
  cy: 16,
30966
32763
  r: 16,
30967
32764
  fill: "CurrentColor"
30968
- })), _path$1b || (_path$1b = /*#__PURE__*/createElement("path", {
32765
+ })), _path$1b || (_path$1b = /*#__PURE__*/createElement$1("path", {
30969
32766
  d: "M12.875 10.375a3.125 3.125 0 116.25 0v5a3.125 3.125 0 11-6.25 0v-5zM15.219 22.406a.781.781 0 111.562 0v1.563a.781.781 0 11-1.562 0v-1.563zM23.5 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0zM10.063 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0z",
30970
32767
  fill: "#fff"
30971
- })), _path2$6 || (_path2$6 = /*#__PURE__*/createElement("path", {
32768
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/createElement$1("path", {
30972
32769
  d: "M16 22.25a7.5 7.5 0 007.5-7.5h-1.563a5.937 5.937 0 11-11.875 0H8.5a7.5 7.5 0 007.5 7.5z",
30973
32770
  fill: "#fff"
30974
32771
  })));
@@ -30976,7 +32773,6 @@ function SvgRecordButton(props) {
30976
32773
 
30977
32774
  var _templateObject$G, _templateObject2$B, _templateObject3$u, _templateObject4$q, _templateObject5$m, _templateObject6$i, _templateObject7$g;
30978
32775
  var shouldDraw = false;
30979
- var WaveSurfer;
30980
32776
  var AudioRecord = function AudioRecord(_ref) {
30981
32777
  var startRecording = function startRecording() {
30982
32778
  try {
@@ -31218,60 +33014,48 @@ var AudioRecord = function AudioRecord(_ref) {
31218
33014
  if (recordedFile) {
31219
33015
  var initWaveSurfer = function initWaveSurfer() {
31220
33016
  try {
31221
- var _temp3 = _catch(function () {
31222
- function _temp2() {
31223
- if (wavesurfer.current) {
31224
- wavesurfer.current.destroy();
31225
- }
31226
- wavesurfer.current = WaveSurfer["default"].create({
31227
- container: wavesurferContainer.current,
31228
- waveColor: textSecondary,
31229
- skipLength: 0,
31230
- progressColor: accentColor,
31231
- barWidth: 1,
31232
- barHeight: 2,
31233
- audioRate: 1,
31234
- hideScrollbar: true,
31235
- barRadius: 1.5,
31236
- cursorWidth: 0,
31237
- barGap: 2.5,
31238
- barMinHeight: 1.5,
31239
- height: 28
31240
- });
31241
- wavesurfer.current.load(recordedFile.objectUrl);
31242
- wavesurfer.current.on('ready', function () {
31243
- setRecordingIsReadyToPlay(true);
31244
- var audioDuration = wavesurfer.current.getDuration();
31245
- setCurrentTime(audioDuration);
31246
- });
31247
- wavesurfer.current.on('finish', function () {
31248
- setPlayAudio(false);
31249
- wavesurfer.current.seekTo(0);
31250
- var audioDuration = wavesurfer.current.getDuration();
31251
- setCurrentTime(audioDuration);
31252
- clearInterval(intervalRef.current);
31253
- });
31254
- wavesurfer.current.on('pause', function () {
31255
- setPlayAudio(false);
31256
- clearInterval(intervalRef.current);
31257
- });
31258
- wavesurfer.current.on('interaction', function () {
31259
- var currentTime = wavesurfer.current.getCurrentTime();
31260
- setCurrentTime(currentTime);
31261
- });
33017
+ try {
33018
+ if (wavesurfer.current) {
33019
+ wavesurfer.current.destroy();
31262
33020
  }
31263
- var _temp = function () {
31264
- if (!WaveSurfer) {
31265
- return Promise.resolve(import('wavesurfer.js')).then(function (_import) {
31266
- WaveSurfer = _import;
31267
- });
31268
- }
31269
- }();
31270
- return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
31271
- }, function (e) {
33021
+ wavesurfer.current = WaveSurfer.create({
33022
+ container: wavesurferContainer.current,
33023
+ waveColor: textSecondary,
33024
+ progressColor: accentColor,
33025
+ barWidth: 1,
33026
+ barHeight: 2,
33027
+ audioRate: 1,
33028
+ hideScrollbar: true,
33029
+ barRadius: 1.5,
33030
+ cursorWidth: 0,
33031
+ barGap: 2.5,
33032
+ height: 28
33033
+ });
33034
+ wavesurfer.current.load(recordedFile.objectUrl);
33035
+ wavesurfer.current.on('ready', function () {
33036
+ setRecordingIsReadyToPlay(true);
33037
+ var audioDuration = wavesurfer.current.getDuration();
33038
+ setCurrentTime(audioDuration);
33039
+ });
33040
+ wavesurfer.current.on('finish', function () {
33041
+ setPlayAudio(false);
33042
+ wavesurfer.current.seekTo(0);
33043
+ var audioDuration = wavesurfer.current.getDuration();
33044
+ setCurrentTime(audioDuration);
33045
+ clearInterval(intervalRef.current);
33046
+ });
33047
+ wavesurfer.current.on('pause', function () {
33048
+ setPlayAudio(false);
33049
+ clearInterval(intervalRef.current);
33050
+ });
33051
+ wavesurfer.current.on('interaction', function () {
33052
+ var currentTime = wavesurfer.current.getCurrentTime();
33053
+ setCurrentTime(currentTime);
33054
+ });
33055
+ } catch (e) {
31272
33056
  log.error('Failed to init wavesurfer', e);
31273
- });
31274
- return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
33057
+ }
33058
+ return Promise.resolve();
31275
33059
  } catch (e) {
31276
33060
  return Promise.reject(e);
31277
33061
  }
@@ -31289,9 +33073,9 @@ var AudioRecord = function AudioRecord(_ref) {
31289
33073
  useEffect(function () {
31290
33074
  (function () {
31291
33075
  try {
31292
- var _temp5 = function () {
33076
+ var _temp2 = function () {
31293
33077
  if (!recorder) {
31294
- var _temp4 = _catch(function () {
33078
+ var _temp = _catch(function () {
31295
33079
  return Promise.resolve(import('mic-recorder-to-mp3')).then(function (MicRecorderModule) {
31296
33080
  var MicRecorder = MicRecorderModule["default"];
31297
33081
  var recorder = new MicRecorder({
@@ -31302,10 +33086,10 @@ var AudioRecord = function AudioRecord(_ref) {
31302
33086
  }, function (e) {
31303
33087
  log.error('Failed to init mic-recorder-to-mp3', e);
31304
33088
  });
31305
- if (_temp4 && _temp4.then) return _temp4.then(function () {});
33089
+ if (_temp && _temp.then) return _temp.then(function () {});
31306
33090
  }
31307
33091
  }();
31308
- return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
33092
+ return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
31309
33093
  } catch (e) {
31310
33094
  Promise.reject(e);
31311
33095
  }
@@ -31329,7 +33113,7 @@ var AudioRecord = function AudioRecord(_ref) {
31329
33113
  hide: recordedFile,
31330
33114
  id: 'waveform',
31331
33115
  recording: recording
31332
- }), recording && /*#__PURE__*/React__default.createElement(Timer$1, {
33116
+ }), recording && /*#__PURE__*/React__default.createElement(Timer$2, {
31333
33117
  color: textSecondary
31334
33118
  }, formatAudioVideoTime(currentTime)), recordingIsReadyToPlay && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
31335
33119
  iconColor: accentColor,
@@ -31337,7 +33121,7 @@ var AudioRecord = function AudioRecord(_ref) {
31337
33121
  }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPauseRecord, null) : /*#__PURE__*/React__default.createElement(SvgPlayRecord, null))), /*#__PURE__*/React__default.createElement(AudioVisualization$1, {
31338
33122
  ref: wavesurferContainer,
31339
33123
  show: recordedFile
31340
- }), recordingIsReadyToPlay && /*#__PURE__*/React__default.createElement(Timer$1, {
33124
+ }), recordingIsReadyToPlay && /*#__PURE__*/React__default.createElement(Timer$2, {
31341
33125
  color: textSecondary
31342
33126
  }, formatAudioVideoTime(currentTime))), /*#__PURE__*/React__default.createElement(RecordIconWrapper, {
31343
33127
  ref: recordButtonRef,
@@ -31385,7 +33169,7 @@ var Canvas = styled.canvas(_templateObject6$i || (_templateObject6$i = _taggedTe
31385
33169
  var hide = _ref8.hide;
31386
33170
  return hide && '-1';
31387
33171
  });
31388
- var Timer$1 = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n width: 40px;\n font-weight: 400;\n font-size: 16px;\n line-height: 12px;\n color: ", ";\n margin-left: auto;\n"])), function (props) {
33172
+ var Timer$2 = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n width: 40px;\n font-weight: 400;\n font-size: 16px;\n line-height: 12px;\n color: ", ";\n margin-left: auto;\n"])), function (props) {
31389
33173
  return props.color;
31390
33174
  });
31391
33175
 
@@ -31524,12 +33308,12 @@ var SendMessageInput = function SendMessageInput(_ref3) {
31524
33308
  var _useColor = useColors(),
31525
33309
  accentColor = _useColor[THEME_COLORS.ACCENT],
31526
33310
  sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
31527
- focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
31528
33311
  surface1Background = _useColor[THEME_COLORS.SURFACE_1],
31529
33312
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
31530
33313
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
31531
33314
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
31532
- errorColor = _useColor[THEME_COLORS.WARNING];
33315
+ errorColor = _useColor[THEME_COLORS.WARNING],
33316
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
31533
33317
  var dispatch = useDispatch();
31534
33318
  var ChatClient = getClient();
31535
33319
  var user = ChatClient.user;
@@ -32625,13 +34409,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
32625
34409
  color: errorColor
32626
34410
  }, uploadErrorMessage), selectedMessagesMap && selectedMessagesMap.size > 0 ? (/*#__PURE__*/React__default.createElement(SelectedMessagesWrapper, null, selectedMessagesMap.size, " ", selectedMessagesMap.size > 1 ? ' messages selected' : ' message selected', /*#__PURE__*/React__default.createElement(CustomButton, {
32627
34411
  onClick: handleToggleForwardMessagePopup,
32628
- backgroundColor: colors.primaryLight,
34412
+ backgroundColor: hoverBackground,
32629
34413
  marginLeft: '32px',
32630
34414
  color: textPrimary
32631
34415
  }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forward"), /*#__PURE__*/React__default.createElement(CustomButton, {
32632
34416
  onClick: handleToggleDeleteMessagePopup,
32633
34417
  color: errorColor,
32634
- backgroundColor: colors.primaryLight,
34418
+ backgroundColor: hoverBackground,
32635
34419
  marginLeft: '16px'
32636
34420
  }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
32637
34421
  onClick: handleCloseSelectMessages
@@ -32767,7 +34551,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
32767
34551
  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, showChooseMediaAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
32768
34552
  key: 1,
32769
34553
  textColor: textPrimary,
32770
- hoverBackground: focusBackground,
34554
+ hoverBackground: hoverBackground,
32771
34555
  onClick: function onClick() {
32772
34556
  return onOpenFileUploader(mediaExtensions);
32773
34557
  },
@@ -32776,7 +34560,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
32776
34560
  }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null), chooseMediaAttachmentText != null ? chooseMediaAttachmentText : 'Photo or video')), showChooseFileAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
32777
34561
  key: 2,
32778
34562
  textColor: textPrimary,
32779
- hoverBackground: focusBackground,
34563
+ hoverBackground: hoverBackground,
32780
34564
  onClick: function onClick() {
32781
34565
  return onOpenFileUploader('');
32782
34566
  },
@@ -33029,12 +34813,12 @@ function _extends$1g() {
33029
34813
  }, _extends$1g.apply(null, arguments);
33030
34814
  }
33031
34815
  function SvgBottom(props) {
33032
- return /*#__PURE__*/createElement("svg", _extends$1g({
34816
+ return /*#__PURE__*/createElement$1("svg", _extends$1g({
33033
34817
  width: 12,
33034
34818
  height: 7,
33035
34819
  fill: "none",
33036
34820
  xmlns: "http://www.w3.org/2000/svg"
33037
- }, props), _path$1c || (_path$1c = /*#__PURE__*/createElement("path", {
34821
+ }, props), _path$1c || (_path$1c = /*#__PURE__*/createElement$1("path", {
33038
34822
  d: "M1.5 1.5l4.5 4 4.5-4",
33039
34823
  stroke: "#676A7C",
33040
34824
  strokeWidth: 1.4,
@@ -33054,16 +34838,16 @@ function _extends$1h() {
33054
34838
  }, _extends$1h.apply(null, arguments);
33055
34839
  }
33056
34840
  function SvgMarkAsUnRead(props) {
33057
- return /*#__PURE__*/createElement("svg", _extends$1h({
34841
+ return /*#__PURE__*/createElement$1("svg", _extends$1h({
33058
34842
  width: 20,
33059
34843
  height: 20,
33060
34844
  viewBox: "0 0 20.01 20.01",
33061
34845
  fill: "none",
33062
34846
  xmlns: "http://www.w3.org/2000/svg"
33063
- }, props), _path$1d || (_path$1d = /*#__PURE__*/createElement("path", {
34847
+ }, props), _path$1d || (_path$1d = /*#__PURE__*/createElement$1("path", {
33064
34848
  d: "M18.25 7.189v3.843c0 .673 0 1.224-.037 1.671-.037.464-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.2-.81.28-1.273.318-.447.036-.998.036-1.671.036h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608c-.154.124-.307.246-.441.335-.129.085-.366.228-.67.228-.356 0-.692-.16-.914-.438-.19-.239-.226-.513-.24-.667-.015-.16-.015-.356-.015-.554v-1.228c-.358-.01-.655-.034-.924-.107a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.881.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037h6.342c-.19.464-.3.97-.31 1.5h-6c-.713 0-1.203 0-1.582.032-.37.03-.57.086-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.088.059 1.286a1.75 1.75 0 001.237 1.238c.199.053.463.06 1.286.06a.75.75 0 01.75.75v1.772L8.49 15.25c.355-.284.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.031.37-.03.57-.086.713-.16a1.75 1.75 0 00.765-.764c.074-.144.13-.343.16-.714.03-.38.031-.868.031-1.58V7.498c.53-.01 1.036-.12 1.5-.31z",
33065
34849
  fill: "currentColor"
33066
- })), _path2$7 || (_path2$7 = /*#__PURE__*/createElement("path", {
34850
+ })), _path2$7 || (_path2$7 = /*#__PURE__*/createElement$1("path", {
33067
34851
  d: "M5.833 6.334a.75.75 0 100 1.5H10a.75.75 0 000-1.5H5.833zM5.833 9.25a.75.75 0 100 1.5H12.5a.75.75 0 100-1.5H5.833zM19.167 3.333a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z",
33068
34852
  fill: "currentColor"
33069
34853
  })));
@@ -33080,13 +34864,13 @@ function _extends$1i() {
33080
34864
  }, _extends$1i.apply(null, arguments);
33081
34865
  }
33082
34866
  function SvgMarkAsRead(props) {
33083
- return /*#__PURE__*/createElement("svg", _extends$1i({
34867
+ return /*#__PURE__*/createElement$1("svg", _extends$1i({
33084
34868
  width: 20,
33085
34869
  height: 20,
33086
34870
  viewBox: "0 0 20.01 20.01",
33087
34871
  fill: "none",
33088
34872
  xmlns: "http://www.w3.org/2000/svg"
33089
- }, props), _path$1e || (_path$1e = /*#__PURE__*/createElement("path", {
34873
+ }, props), _path$1e || (_path$1e = /*#__PURE__*/createElement$1("path", {
33090
34874
  fillRule: "evenodd",
33091
34875
  clipRule: "evenodd",
33092
34876
  d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
@@ -33105,12 +34889,12 @@ function _extends$1j() {
33105
34889
  }, _extends$1j.apply(null, arguments);
33106
34890
  }
33107
34891
  function SvgClear(props) {
33108
- return /*#__PURE__*/createElement("svg", _extends$1j({
34892
+ return /*#__PURE__*/createElement$1("svg", _extends$1j({
33109
34893
  width: 20,
33110
34894
  height: 21,
33111
34895
  fill: "none",
33112
34896
  xmlns: "http://www.w3.org/2000/svg"
33113
- }, props), _path$1f || (_path$1f = /*#__PURE__*/createElement("path", {
34897
+ }, props), _path$1f || (_path$1f = /*#__PURE__*/createElement$1("path", {
33114
34898
  fillRule: "evenodd",
33115
34899
  clipRule: "evenodd",
33116
34900
  d: "M10 3.833a6.667 6.667 0 100 13.333 6.667 6.667 0 000-13.333zm-8.333 6.666a8.333 8.333 0 1116.667 0 8.333 8.333 0 01-16.667 0zM6.911 7.41a.833.833 0 011.179 0L10 9.32l1.911-1.91A.833.833 0 0113.09 8.59l-1.911 1.91 1.91 1.911a.833.833 0 01-1.178 1.179l-1.91-1.911-1.911 1.91A.833.833 0 016.91 12.41l1.91-1.91-1.91-1.911a.833.833 0 010-1.179z",
@@ -33129,13 +34913,13 @@ function _extends$1k() {
33129
34913
  }, _extends$1k.apply(null, arguments);
33130
34914
  }
33131
34915
  function SvgBlockChannel(props) {
33132
- return /*#__PURE__*/createElement("svg", _extends$1k({
34916
+ return /*#__PURE__*/createElement$1("svg", _extends$1k({
33133
34917
  width: 20,
33134
34918
  height: 21,
33135
34919
  viewBox: "0 0 20.01 21.01",
33136
34920
  fill: "none",
33137
34921
  xmlns: "http://www.w3.org/2000/svg"
33138
- }, props), _path$1g || (_path$1g = /*#__PURE__*/createElement("path", {
34922
+ }, props), _path$1g || (_path$1g = /*#__PURE__*/createElement$1("path", {
33139
34923
  d: "M10 2.167A8.336 8.336 0 001.667 10.5c0 4.6 3.733 8.334 8.333 8.334s8.333-3.734 8.333-8.334S14.6 2.167 10 2.167zm0 15A6.665 6.665 0 013.333 10.5c0-1.541.525-2.958 1.409-4.083l9.341 9.342A6.586 6.586 0 0110 17.167zm5.258-2.583L5.917 5.242A6.585 6.585 0 0110 3.834a6.665 6.665 0 016.667 6.666 6.586 6.586 0 01-1.409 4.084z",
33140
34924
  fill: "CurrentColor"
33141
34925
  })));
@@ -33152,15 +34936,15 @@ function _extends$1l() {
33152
34936
  }, _extends$1l.apply(null, arguments);
33153
34937
  }
33154
34938
  function SvgReport(props) {
33155
- return /*#__PURE__*/createElement("svg", _extends$1l({
34939
+ return /*#__PURE__*/createElement$1("svg", _extends$1l({
33156
34940
  width: 20,
33157
34941
  height: 21,
33158
34942
  fill: "none",
33159
34943
  xmlns: "http://www.w3.org/2000/svg"
33160
- }, props), _path$1h || (_path$1h = /*#__PURE__*/createElement("path", {
34944
+ }, props), _path$1h || (_path$1h = /*#__PURE__*/createElement$1("path", {
33161
34945
  d: "M9.096 10.402a.882.882 0 011.765 0v3.627a.882.882 0 11-1.765 0v-3.627zM9.979 6.088a.98.98 0 100 1.96.98.98 0 000-1.96z",
33162
34946
  fill: "CurrentColor"
33163
- })), _path2$8 || (_path2$8 = /*#__PURE__*/createElement("path", {
34947
+ })), _path2$8 || (_path2$8 = /*#__PURE__*/createElement$1("path", {
33164
34948
  fillRule: "evenodd",
33165
34949
  clipRule: "evenodd",
33166
34950
  d: "M10 17.27A6.77 6.77 0 1010 3.73a6.77 6.77 0 000 13.542zm0 1.563a8.333 8.333 0 100-16.667 8.333 8.333 0 000 16.667z",
@@ -33179,12 +34963,12 @@ function _extends$1m() {
33179
34963
  }, _extends$1m.apply(null, arguments);
33180
34964
  }
33181
34965
  function SvgStar(props) {
33182
- return /*#__PURE__*/createElement("svg", _extends$1m({
34966
+ return /*#__PURE__*/createElement$1("svg", _extends$1m({
33183
34967
  width: 20,
33184
34968
  height: 20,
33185
34969
  fill: "none",
33186
34970
  xmlns: "http://www.w3.org/2000/svg"
33187
- }, props), _path$1i || (_path$1i = /*#__PURE__*/createElement("path", {
34971
+ }, props), _path$1i || (_path$1i = /*#__PURE__*/createElement$1("path", {
33188
34972
  d: "M12.888 7.002l3.823.367c1.33.128 1.739 1.43.711 2.285l-2.993 2.49 1.111 4.06c.365 1.332-.767 2.14-1.901 1.337l-3.637-2.573-3.637 2.573c-1.13.799-2.267-.005-1.902-1.338l1.111-4.058-2.993-2.491c-1.032-.86-.625-2.156.711-2.285l3.823-.367 1.684-3.889c.528-1.217 1.878-1.217 2.405 0l1.684 3.889z",
33189
34973
  fill: "#B2B6BE"
33190
34974
  })));
@@ -33201,13 +34985,13 @@ function _extends$1n() {
33201
34985
  }, _extends$1n.apply(null, arguments);
33202
34986
  }
33203
34987
  function SvgUnpin(props) {
33204
- return /*#__PURE__*/createElement("svg", _extends$1n({
34988
+ return /*#__PURE__*/createElement$1("svg", _extends$1n({
33205
34989
  width: 20,
33206
34990
  height: 21,
33207
34991
  viewBox: "0 0 20.01 21.01",
33208
34992
  fill: "none",
33209
34993
  xmlns: "http://www.w3.org/2000/svg"
33210
- }, props), _path$1j || (_path$1j = /*#__PURE__*/createElement("path", {
34994
+ }, props), _path$1j || (_path$1j = /*#__PURE__*/createElement$1("path", {
33211
34995
  d: "M8.74 6.616l1.09 1.089 2.995 2.996 1.09 1.088 3.557 3.559a.77.77 0 01-1.09 1.09l-3.365-3.366-.306 3.982a1.059 1.059 0 01-1.805.667l-3.504-3.504-4.356 4.356c-.726.726-1.816-.363-1.09-1.089l4.357-4.356L2.81 9.624a1.059 1.059 0 01.667-1.805l3.982-.306L4.06 4.115a.77.77 0 011.09-1.09l3.59 3.591zm1.634-1.634l.32-.32a.385.385 0 00.106-.197l.34-1.699a.77.77 0 011.3-.394l5.717 5.718a.77.77 0 01-.393 1.3l-1.7.34a.385.385 0 00-.196.105l-.32.32a.77.77 0 01-1.09-1.089l.32-.32c.27-.269.612-.452.985-.526l.288-.058-3.683-3.683-.058.288a1.926 1.926 0 01-.526.984l-.32.32a.77.77 0 11-1.09-1.089zM8.701 8.755a1.925 1.925 0 01-.849.272l-3.214.247 6.617 6.618.248-3.214c.023-.303.117-.593.272-.849L8.7 8.755z",
33212
34996
  fill: "CurrentColor"
33213
34997
  })));
@@ -33291,7 +35075,7 @@ var Actions = function Actions(_ref) {
33291
35075
  var _useColor = useColors(),
33292
35076
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
33293
35077
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
33294
- focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
35078
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
33295
35079
  borderThemeColor = _useColor[THEME_COLORS.BORDER],
33296
35080
  iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
33297
35081
  errorColor = _useColor[THEME_COLORS.WARNING];
@@ -33461,7 +35245,7 @@ var Actions = function Actions(_ref) {
33461
35245
  return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33462
35246
  textColor: textPrimary,
33463
35247
  key: value + index,
33464
- hoverBackground: colors.primaryLight,
35248
+ hoverBackground: hoverBackground,
33465
35249
  onClick: function onClick() {
33466
35250
  return handleNotificationOnOff(value * oneHour);
33467
35251
  }
@@ -33469,28 +35253,28 @@ var Actions = function Actions(_ref) {
33469
35253
  }) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33470
35254
  textColor: textPrimary,
33471
35255
  key: 1,
33472
- hoverBackground: focusBackground,
35256
+ hoverBackground: hoverBackground,
33473
35257
  onClick: function onClick() {
33474
35258
  return handleNotificationOnOff(oneHour);
33475
35259
  }
33476
35260
  }, "Mute for 1 hour"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33477
35261
  textColor: textPrimary,
33478
35262
  key: 2,
33479
- hoverBackground: focusBackground,
35263
+ hoverBackground: hoverBackground,
33480
35264
  onClick: function onClick() {
33481
35265
  return handleNotificationOnOff(twoHours);
33482
35266
  }
33483
35267
  }, "Mute for 2 hours"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33484
35268
  textColor: textPrimary,
33485
35269
  key: 3,
33486
- hoverBackground: focusBackground,
35270
+ hoverBackground: hoverBackground,
33487
35271
  onClick: function onClick() {
33488
35272
  return handleNotificationOnOff(oneDay);
33489
35273
  }
33490
35274
  }, "Mute for 1 day"))), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33491
35275
  textColor: textPrimary,
33492
35276
  key: 4,
33493
- hoverBackground: focusBackground,
35277
+ hoverBackground: hoverBackground,
33494
35278
  onClick: function onClick() {
33495
35279
  return handleNotificationOnOff();
33496
35280
  }
@@ -33718,18 +35502,18 @@ function _extends$1o() {
33718
35502
  }, _extends$1o.apply(null, arguments);
33719
35503
  }
33720
35504
  function SvgAddMember(props) {
33721
- return /*#__PURE__*/createElement("svg", _extends$1o({
35505
+ return /*#__PURE__*/createElement$1("svg", _extends$1o({
33722
35506
  width: 40,
33723
35507
  height: 40,
33724
35508
  viewBox: "0 0 40.01 40.01",
33725
35509
  fill: "none",
33726
35510
  xmlns: "http://www.w3.org/2000/svg"
33727
- }, props), _rect$2 || (_rect$2 = /*#__PURE__*/createElement("rect", {
35511
+ }, props), _rect$2 || (_rect$2 = /*#__PURE__*/createElement$1("rect", {
33728
35512
  width: 40,
33729
35513
  height: 40,
33730
35514
  rx: 20,
33731
35515
  fill: "#F3F5F7"
33732
- })), _rect2 || (_rect2 = /*#__PURE__*/createElement("rect", {
35516
+ })), _rect2 || (_rect2 = /*#__PURE__*/createElement$1("rect", {
33733
35517
  x: 0.25,
33734
35518
  y: 0.25,
33735
35519
  width: 39.5,
@@ -33738,7 +35522,7 @@ function SvgAddMember(props) {
33738
35522
  stroke: "#000",
33739
35523
  strokeOpacity: 0.08,
33740
35524
  strokeWidth: 0.5
33741
- })), _path$1k || (_path$1k = /*#__PURE__*/createElement("path", {
35525
+ })), _path$1k || (_path$1k = /*#__PURE__*/createElement$1("path", {
33742
35526
  d: "M20 12a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0l-.001-6H13a1 1 0 110-2h5.999L19 13a1 1 0 011-1z",
33743
35527
  fill: "CurrentColor"
33744
35528
  })));
@@ -33755,12 +35539,12 @@ function _extends$1p() {
33755
35539
  }, _extends$1p.apply(null, arguments);
33756
35540
  }
33757
35541
  function SvgMoreVert(props) {
33758
- return /*#__PURE__*/createElement("svg", _extends$1p({
35542
+ return /*#__PURE__*/createElement$1("svg", _extends$1p({
33759
35543
  width: 4,
33760
35544
  height: 14,
33761
35545
  fill: "none",
33762
35546
  xmlns: "http://www.w3.org/2000/svg"
33763
- }, props), _path$1l || (_path$1l = /*#__PURE__*/createElement("path", {
35547
+ }, props), _path$1l || (_path$1l = /*#__PURE__*/createElement$1("path", {
33764
35548
  d: "M.532 11.012c.355-.355.764-.533 1.228-.533.464 0 .874.178 1.228.533.355.354.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 13.113 0 12.704 0 12.24c0-.464.177-.873.532-1.228zm0-5.24c.355-.355.764-.532 1.228-.532.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 7.873 0 7.464 0 7c0-.464.177-.873.532-1.228zm2.456-2.784c-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 2.634 0 2.224 0 1.76 0 1.296.177.887.532.532.887.177 1.296 0 1.76 0c.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.874-.532 1.228z",
33765
35549
  fill: "#9B9DA8"
33766
35550
  })));
@@ -33778,7 +35562,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
33778
35562
  surface1Background = _useColor[THEME_COLORS.SURFACE_1],
33779
35563
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
33780
35564
  textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
33781
- errorColor = _useColor[THEME_COLORS.WARNING];
35565
+ errorColor = _useColor[THEME_COLORS.WARNING],
35566
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
33782
35567
  var dispatch = useDispatch();
33783
35568
  var _useState = useState(false),
33784
35569
  isChanged = _useState[0],
@@ -33837,7 +35622,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
33837
35622
  theme: theme
33838
35623
  }, !!roles.length && roles.map(function (role) {
33839
35624
  return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
33840
- hoverBackground: colors.primaryLight,
35625
+ hoverBackground: hoverBackground,
33841
35626
  key: role.name,
33842
35627
  onClick: function onClick() {
33843
35628
  return onChangeFunction(role.name);
@@ -33890,7 +35675,7 @@ var Members = function Members(_ref) {
33890
35675
  var _useColor = useColors(),
33891
35676
  accentColor = _useColor[THEME_COLORS.ACCENT],
33892
35677
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
33893
- focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
35678
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
33894
35679
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
33895
35680
  errorColor = _useColor[THEME_COLORS.WARNING];
33896
35681
  var dispatch = useDispatch();
@@ -34037,14 +35822,14 @@ var Members = function Members(_ref) {
34037
35822
  key: 1,
34038
35823
  onClick: handleAddMemberPopup,
34039
35824
  color: textPrimary,
34040
- hoverBackground: hoverBackgroundColor || focusBackground,
35825
+ hoverBackground: hoverBackgroundColor || hoverBackground,
34041
35826
  addMemberIconColor: accentColor,
34042
35827
  fontSize: addMemberFontSize
34043
35828
  }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
34044
35829
  return /*#__PURE__*/React__default.createElement(MemberItem$1, {
34045
35830
  key: member.id + index,
34046
35831
  color: textPrimary,
34047
- hoverBackground: hoverBackgroundColor || focusBackground,
35832
+ hoverBackground: hoverBackgroundColor || hoverBackground,
34048
35833
  onClick: function onClick() {
34049
35834
  return handleCreateChat(member);
34050
35835
  },
@@ -34079,7 +35864,7 @@ var Members = function Members(_ref) {
34079
35864
  setCloseMenu('1');
34080
35865
  },
34081
35866
  key: 1,
34082
- hoverBackground: focusBackground
35867
+ hoverBackground: hoverBackground
34083
35868
  }, "Change role")), showMakeMemberAdmin && checkActionPermission('changeMemberRole') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
34084
35869
  onClick: function onClick(e) {
34085
35870
  setSelectedMember(member);
@@ -34088,7 +35873,7 @@ var Members = function Members(_ref) {
34088
35873
  },
34089
35874
  textColor: member.role === 'admin' ? errorColor : '',
34090
35875
  key: 2,
34091
- hoverBackground: focusBackground
35876
+ hoverBackground: hoverBackground
34092
35877
  }, member.role === 'admin' ? 'Revoke Admin' : 'Make Admin')), showKickMember && checkActionPermission('kickMember') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
34093
35878
  onClick: function onClick(e) {
34094
35879
  setSelectedMember(member);
@@ -34097,11 +35882,11 @@ var Members = function Members(_ref) {
34097
35882
  },
34098
35883
  textColor: errorColor,
34099
35884
  key: 3,
34100
- hoverBackground: focusBackground
35885
+ hoverBackground: hoverBackground
34101
35886
  }, "Remove")), showKickAndBlockMember && checkActionPermission('kickAndBlockMember') && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
34102
35887
  textColor: errorColor,
34103
35888
  key: 4,
34104
- hoverBackground: focusBackground,
35889
+ hoverBackground: hoverBackground,
34105
35890
  onClick: function onClick(e) {
34106
35891
  setSelectedMember(member);
34107
35892
  toggleBlockMemberPopup(e);
@@ -34238,19 +36023,19 @@ function _extends$1q() {
34238
36023
  }, _extends$1q.apply(null, arguments);
34239
36024
  }
34240
36025
  function SvgFileIcon$1(props) {
34241
- return /*#__PURE__*/createElement("svg", _extends$1q({
36026
+ return /*#__PURE__*/createElement$1("svg", _extends$1q({
34242
36027
  width: 40,
34243
36028
  height: 40,
34244
36029
  fill: "none",
34245
36030
  xmlns: "http://www.w3.org/2000/svg",
34246
36031
  color: "#5159f6"
34247
- }, props), _rect$3 || (_rect$3 = /*#__PURE__*/createElement("rect", {
36032
+ }, props), _rect$3 || (_rect$3 = /*#__PURE__*/createElement$1("rect", {
34248
36033
  width: 40,
34249
36034
  height: 40,
34250
36035
  rx: 8,
34251
36036
  fill: "currentColor",
34252
36037
  fillOpacity: 0.2
34253
- })), _path$1m || (_path$1m = /*#__PURE__*/createElement("path", {
36038
+ })), _path$1m || (_path$1m = /*#__PURE__*/createElement$1("path", {
34254
36039
  fillRule: "evenodd",
34255
36040
  clipRule: "evenodd",
34256
36041
  d: "M18.022 9.714c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.94-.687 1.864-.687 3.962v7.386c0 2.098.184 3.023.687 3.962a4.686 4.686 0 001.944 1.944c.938.502 1.864.687 3.962.687h3.957c2.098 0 3.023-.185 3.962-.687a4.686 4.686 0 001.944-1.944c.502-.939.687-1.864.687-3.962v-5.1c0-.683-.024-.99-.105-1.34a3.097 3.097 0 00-.399-.964c-.19-.305-.391-.539-.874-1.022l-4.175-4.175c-.483-.483-.717-.683-1.022-.874a3.095 3.095 0 00-.964-.399c-.293-.068-.556-.095-1.033-.103v-.002h-1.978zm0 1.715c-2.002 0-2.587.181-3.154.484a2.971 2.971 0 00-1.24 1.24c-.304.567-.485 1.153-.485 3.154v7.386c0 2.001.181 2.587.484 3.153.288.538.704.954 1.241 1.241.566.303 1.152.485 3.154.485h3.957c2.001 0 2.587-.182 3.153-.485a2.971 2.971 0 001.241-1.24c.303-.567.484-1.153.484-3.154v-5.1c0-.117 0-.219-.002-.308h-4.712A2.143 2.143 0 0120 16.144l.001-4.712-.15-.002h-1.83zm3.784.875l-.092-.091v3.93c0 .21.152.385.352.422l.077.006 3.932.002-.093-.093-4.176-4.176zm-6.092 12.839c0-.474.384-.857.858-.857H20A.857.857 0 1120 26h-3.428a.857.857 0 01-.858-.857zm.858-4.286a.857.857 0 000 1.715h6a.857.857 0 000-1.715h-6z",
@@ -34269,12 +36054,12 @@ function _extends$1r() {
34269
36054
  }, _extends$1r.apply(null, arguments);
34270
36055
  }
34271
36056
  function SvgDownloadFile(props) {
34272
- return /*#__PURE__*/createElement("svg", _extends$1r({
36057
+ return /*#__PURE__*/createElement$1("svg", _extends$1r({
34273
36058
  width: 24,
34274
36059
  height: 24,
34275
36060
  xmlns: "http://www.w3.org/2000/svg",
34276
36061
  fill: "currentColor"
34277
- }, props), _path$1n || (_path$1n = /*#__PURE__*/createElement("path", {
36062
+ }, props), _path$1n || (_path$1n = /*#__PURE__*/createElement$1("path", {
34278
36063
  fillRule: "evenodd",
34279
36064
  clipRule: "evenodd",
34280
36065
  d: "M12 2a.91.91 0 01.91.91v11.44l2.993-2.993a.91.91 0 011.285 1.286l-4.545 4.545a.91.91 0 01-1.286 0l-4.545-4.545a.909.909 0 111.285-1.286l2.994 2.994V2.909A.91.91 0 0112 2zM2.91 15.636a.91.91 0 01.908.91v1.136a2.5 2.5 0 002.5 2.5h11.364a2.5 2.5 0 002.5-2.5v-1.136a.91.91 0 111.818 0v1.136A4.318 4.318 0 0117.682 22H6.318A4.318 4.318 0 012 17.682v-1.136a.91.91 0 01.91-.91z"
@@ -34432,19 +36217,19 @@ function _extends$1s() {
34432
36217
  }, _extends$1s.apply(null, arguments);
34433
36218
  }
34434
36219
  function SvgLinkIcon(props) {
34435
- return /*#__PURE__*/createElement("svg", _extends$1s({
36220
+ return /*#__PURE__*/createElement$1("svg", _extends$1s({
34436
36221
  width: 40,
34437
36222
  height: 40,
34438
36223
  fill: "none",
34439
36224
  xmlns: "http://www.w3.org/2000/svg",
34440
36225
  color: "#5159f6"
34441
- }, props), _rect$4 || (_rect$4 = /*#__PURE__*/createElement("rect", {
36226
+ }, props), _rect$4 || (_rect$4 = /*#__PURE__*/createElement$1("rect", {
34442
36227
  width: 40,
34443
36228
  height: 40,
34444
36229
  rx: 8,
34445
36230
  fill: "currentColor",
34446
36231
  fillOpacity: 0.2
34447
- })), _path$1o || (_path$1o = /*#__PURE__*/createElement("path", {
36232
+ })), _path$1o || (_path$1o = /*#__PURE__*/createElement$1("path", {
34448
36233
  fillRule: "evenodd",
34449
36234
  clipRule: "evenodd",
34450
36235
  d: "M21.547 11.524a4.9 4.9 0 016.928 6.929l-.01.011-4 4a4.9 4.9 0 01-6.93 0 .9.9 0 011.273-1.273 3.1 3.1 0 004.384 0l3.994-3.994a3.1 3.1 0 00-4.384-4.383l-1.094 1.094a.9.9 0 01-1.272-1.273l1.1-1.1.01-.01zm-6.011 6.011a4.9 4.9 0 016.928 0 .9.9 0 11-1.272 1.273 3.1 3.1 0 00-4.384 0l-4 4-.01.011a3.1 3.1 0 104.383 4.384l.01-.012 1.103-1.1a.9.9 0 111.272 1.272l-1.097 1.096a4.9 4.9 0 11-6.928-6.929l3.995-3.995z",
@@ -34531,22 +36316,22 @@ function _extends$1t() {
34531
36316
  }, _extends$1t.apply(null, arguments);
34532
36317
  }
34533
36318
  function SvgVoicePreview(props) {
34534
- return /*#__PURE__*/createElement("svg", _extends$1t({
36319
+ return /*#__PURE__*/createElement$1("svg", _extends$1t({
34535
36320
  width: 40,
34536
36321
  height: 40,
34537
36322
  fill: "none",
34538
36323
  xmlns: "http://www.w3.org/2000/svg"
34539
- }, props), _rect$5 || (_rect$5 = /*#__PURE__*/createElement("rect", {
36324
+ }, props), _rect$5 || (_rect$5 = /*#__PURE__*/createElement$1("rect", {
34540
36325
  width: 40,
34541
36326
  height: 40,
34542
36327
  rx: 8,
34543
36328
  fill: "#F3F5F7"
34544
- })), _circle$8 || (_circle$8 = /*#__PURE__*/createElement("circle", {
36329
+ })), _circle$8 || (_circle$8 = /*#__PURE__*/createElement$1("circle", {
34545
36330
  cx: 20,
34546
36331
  cy: 20,
34547
36332
  r: 14,
34548
36333
  fill: "#0DBD8B"
34549
- })), _path$1p || (_path$1p = /*#__PURE__*/createElement("path", {
36334
+ })), _path$1p || (_path$1p = /*#__PURE__*/createElement$1("path", {
34550
36335
  d: "M25.024 19.13c.635.385.635 1.354 0 1.738l-6.612 3.997c-.63.38-1.412-.1-1.412-.868v-7.995c0-.768.783-1.25 1.412-.869l6.612 3.998z",
34551
36336
  fill: "#fff"
34552
36337
  })));
@@ -34563,22 +36348,22 @@ function _extends$1u() {
34563
36348
  }, _extends$1u.apply(null, arguments);
34564
36349
  }
34565
36350
  function SvgVoicePreviewPause(props) {
34566
- return /*#__PURE__*/createElement("svg", _extends$1u({
36351
+ return /*#__PURE__*/createElement$1("svg", _extends$1u({
34567
36352
  width: 40,
34568
36353
  height: 40,
34569
36354
  fill: "none",
34570
36355
  xmlns: "http://www.w3.org/2000/svg"
34571
- }, props), _rect$6 || (_rect$6 = /*#__PURE__*/createElement("rect", {
36356
+ }, props), _rect$6 || (_rect$6 = /*#__PURE__*/createElement$1("rect", {
34572
36357
  width: 40,
34573
36358
  height: 40,
34574
36359
  rx: 8,
34575
36360
  fill: "#F3F5F7"
34576
- })), _circle$9 || (_circle$9 = /*#__PURE__*/createElement("circle", {
36361
+ })), _circle$9 || (_circle$9 = /*#__PURE__*/createElement$1("circle", {
34577
36362
  cx: 20,
34578
36363
  cy: 20,
34579
36364
  r: 14,
34580
36365
  fill: "#0DBD8B"
34581
- })), _path$1q || (_path$1q = /*#__PURE__*/createElement("path", {
36366
+ })), _path$1q || (_path$1q = /*#__PURE__*/createElement$1("path", {
34582
36367
  d: "M17.974 15c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948zm5 0c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948z",
34583
36368
  fill: "#fff"
34584
36369
  })));
@@ -34595,22 +36380,22 @@ function _extends$1v() {
34595
36380
  }, _extends$1v.apply(null, arguments);
34596
36381
  }
34597
36382
  function SvgVoicePreviewHoverIcon(props) {
34598
- return /*#__PURE__*/createElement("svg", _extends$1v({
36383
+ return /*#__PURE__*/createElement$1("svg", _extends$1v({
34599
36384
  width: 40,
34600
36385
  height: 40,
34601
36386
  fill: "none",
34602
36387
  xmlns: "http://www.w3.org/2000/svg"
34603
- }, props), _rect$7 || (_rect$7 = /*#__PURE__*/createElement("rect", {
36388
+ }, props), _rect$7 || (_rect$7 = /*#__PURE__*/createElement$1("rect", {
34604
36389
  width: 40,
34605
36390
  height: 40,
34606
36391
  rx: 8,
34607
36392
  fill: "#fff"
34608
- })), _circle$a || (_circle$a = /*#__PURE__*/createElement("circle", {
36393
+ })), _circle$a || (_circle$a = /*#__PURE__*/createElement$1("circle", {
34609
36394
  cx: 20,
34610
36395
  cy: 20,
34611
36396
  r: 14,
34612
36397
  fill: "#0DBD8B"
34613
- })), _path$1r || (_path$1r = /*#__PURE__*/createElement("path", {
36398
+ })), _path$1r || (_path$1r = /*#__PURE__*/createElement$1("path", {
34614
36399
  d: "M25.024 19.13c.635.385.635 1.354 0 1.738l-6.612 3.997c-.63.38-1.412-.1-1.412-.868v-7.995c0-.768.783-1.25 1.412-.869l6.612 3.998z",
34615
36400
  fill: "#fff"
34616
36401
  })));
@@ -34627,22 +36412,22 @@ function _extends$1w() {
34627
36412
  }, _extends$1w.apply(null, arguments);
34628
36413
  }
34629
36414
  function SvgVoicePreviewPauseHover(props) {
34630
- return /*#__PURE__*/createElement("svg", _extends$1w({
36415
+ return /*#__PURE__*/createElement$1("svg", _extends$1w({
34631
36416
  width: 40,
34632
36417
  height: 40,
34633
36418
  fill: "none",
34634
36419
  xmlns: "http://www.w3.org/2000/svg"
34635
- }, props), _rect$8 || (_rect$8 = /*#__PURE__*/createElement("rect", {
36420
+ }, props), _rect$8 || (_rect$8 = /*#__PURE__*/createElement$1("rect", {
34636
36421
  width: 40,
34637
36422
  height: 40,
34638
36423
  rx: 8,
34639
36424
  fill: "#fff"
34640
- })), _circle$b || (_circle$b = /*#__PURE__*/createElement("circle", {
36425
+ })), _circle$b || (_circle$b = /*#__PURE__*/createElement$1("circle", {
34641
36426
  cx: 20,
34642
36427
  cy: 20,
34643
36428
  r: 14,
34644
36429
  fill: "#0DBD8B"
34645
- })), _path$1s || (_path$1s = /*#__PURE__*/createElement("path", {
36430
+ })), _path$1s || (_path$1s = /*#__PURE__*/createElement$1("path", {
34646
36431
  d: "M17.974 15c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948zm5 0c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948z",
34647
36432
  fill: "#fff"
34648
36433
  })));
@@ -34862,7 +36647,8 @@ var DetailsTab = function DetailsTab(_ref) {
34862
36647
  var _useColor = useColors(),
34863
36648
  accentColor = _useColor[THEME_COLORS.ACCENT],
34864
36649
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
34865
- borderThemeColor = _useColor[THEME_COLORS.BORDER];
36650
+ borderThemeColor = _useColor[THEME_COLORS.BORDER],
36651
+ backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
34866
36652
  var dispatch = useDispatch();
34867
36653
  var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
34868
36654
  var showMembers = !isDirectChannel && checkActionPermission('getMembers');
@@ -34889,7 +36675,8 @@ var DetailsTab = function DetailsTab(_ref) {
34889
36675
  borderColor: borderColor || borderThemeColor,
34890
36676
  fontSize: tabItemsFontSize,
34891
36677
  lineHeight: tabItemsLineHeight,
34892
- minWidth: tabItemsMinWidth
36678
+ minWidth: tabItemsMinWidth,
36679
+ backgroundColor: backgroundColor
34893
36680
  }, Object.keys(channelDetailsTabs).map(function (key) {
34894
36681
  if (key === 'member') {
34895
36682
  if (showMembers) {
@@ -34961,8 +36748,10 @@ var DetailsTab = function DetailsTab(_ref) {
34961
36748
  })));
34962
36749
  };
34963
36750
  var Container$r = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n //border-top: 1px solid ", ";\n"])), colors.gray1);
34964
- 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 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) {
36751
+ 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) {
34965
36752
  return props.borderColor;
36753
+ }, function (props) {
36754
+ return props.backgroundColor || 'transparent';
34966
36755
  }, function (props) {
34967
36756
  return props.fontSize || '15px';
34968
36757
  }, function (props) {
@@ -35002,7 +36791,8 @@ var EditChannel = function EditChannel(_ref) {
35002
36791
  borderColor = _useColor[THEME_COLORS.BORDER],
35003
36792
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
35004
36793
  textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
35005
- errorColor = _useColor[THEME_COLORS.WARNING];
36794
+ errorColor = _useColor[THEME_COLORS.WARNING],
36795
+ hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
35006
36796
  var ChatClient = getClient();
35007
36797
  var user = ChatClient.user;
35008
36798
  var dispatch = useDispatch();
@@ -35147,7 +36937,7 @@ var EditChannel = function EditChannel(_ref) {
35147
36937
  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
35148
36938
  key: 1,
35149
36939
  textColor: textPrimary,
35150
- hoverBackground: colors.primaryLight,
36940
+ hoverBackground: hoverBackground,
35151
36941
  onClick: function onClick() {
35152
36942
  return onOpenFileUploader();
35153
36943
  },
@@ -35159,7 +36949,7 @@ var EditChannel = function EditChannel(_ref) {
35159
36949
  type: 'file'
35160
36950
  })), newAvatar.url && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
35161
36951
  key: 2,
35162
- hoverBackground: colors.primaryLight,
36952
+ hoverBackground: hoverBackground,
35163
36953
  textColor: errorColor,
35164
36954
  onClick: handleToggleDeleteAvatarPopup,
35165
36955
  iconWidth: '20px'
@@ -35880,12 +37670,12 @@ function _extends$1x() {
35880
37670
  }, _extends$1x.apply(null, arguments);
35881
37671
  }
35882
37672
  function SvgChevronDown(props) {
35883
- return /*#__PURE__*/createElement("svg", _extends$1x({
37673
+ return /*#__PURE__*/createElement$1("svg", _extends$1x({
35884
37674
  width: 32,
35885
37675
  height: 32,
35886
37676
  fill: "none",
35887
37677
  xmlns: "http://www.w3.org/2000/svg"
35888
- }, props), _path$1t || (_path$1t = /*#__PURE__*/createElement("path", {
37678
+ }, props), _path$1t || (_path$1t = /*#__PURE__*/createElement$1("path", {
35889
37679
  d: "M9.298 12.937a1.056 1.056 0 10-1.374 1.603l7.39 6.333c.395.339.978.339 1.373 0l7.389-6.333a1.056 1.056 0 10-1.374-1.603L16 18.68l-6.702-5.744z",
35890
37680
  fill: "CurrentColor"
35891
37681
  })));