@sendbird/uikit-react 3.5.0-mobile-web-1 → 3.5.0-mobile-rc-2

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 (540) hide show
  1. package/App.js +61 -54
  2. package/App.js.map +1 -1
  3. package/Channel/components/ChannelHeader.js +18 -18
  4. package/Channel/components/ChannelUI.js +41 -41
  5. package/Channel/components/FileViewer.js +14 -14
  6. package/Channel/components/FrozenNotification.js +4 -4
  7. package/Channel/components/Message.js +36 -36
  8. package/Channel/components/MessageInput.js +29 -29
  9. package/Channel/components/MessageList.js +37 -37
  10. package/Channel/components/RemoveMessageModal.js +16 -16
  11. package/Channel/components/SuggestedMentionList.js +16 -16
  12. package/Channel/components/TypingIndicator.js +14 -14
  13. package/Channel/components/UnreadCount.js +4 -4
  14. package/Channel/context.js +11 -11
  15. package/Channel.js +41 -41
  16. package/ChannelList/components/AddChannel.js +14 -14
  17. package/ChannelList/components/ChannelListHeader.js +6 -6
  18. package/ChannelList/components/ChannelListUI.js +29 -29
  19. package/ChannelList/components/ChannelPreview.js +25 -25
  20. package/ChannelList/components/ChannelPreviewAction.js +13 -13
  21. package/ChannelList/context.js +7 -7
  22. package/ChannelList.js +29 -29
  23. package/{ChannelListProvider-86b6d956.js → ChannelListProvider-f4c0aff6.js} +7 -7
  24. package/{ChannelListProvider-86b6d956.js.map → ChannelListProvider-f4c0aff6.js.map} +1 -1
  25. package/{ChannelProvider-b41fde4c.js → ChannelProvider-b87f8785.js} +43 -19
  26. package/ChannelProvider-b87f8785.js.map +1 -0
  27. package/ChannelSettings/components/ChannelProfile.js +11 -11
  28. package/ChannelSettings/components/ChannelSettingsUI.js +17 -17
  29. package/ChannelSettings/components/EditDetailsModal.js +11 -11
  30. package/ChannelSettings/components/LeaveChannel.js +11 -11
  31. package/ChannelSettings/components/ModerationPanel.js +14 -14
  32. package/ChannelSettings/components/UserListItem.js +10 -10
  33. package/ChannelSettings/components/UserPanel.js +13 -13
  34. package/ChannelSettings/context.js +3 -3
  35. package/ChannelSettings.js +17 -17
  36. package/CreateChannel/components/CreateChannelUI.js +13 -13
  37. package/CreateChannel/components/InviteUsers.js +13 -13
  38. package/CreateChannel/components/SelectChannelType.js +10 -10
  39. package/CreateChannel/context.js +4 -4
  40. package/CreateChannel.js +13 -13
  41. package/{CreateChannelProvider-2b669e7e.js → CreateChannelProvider-d1d6157f.js} +1 -1
  42. package/{CreateChannelProvider-2b669e7e.js.map → CreateChannelProvider-d1d6157f.js.map} +1 -1
  43. package/CreateOpenChannel/components/CreateOpenChannelUI.js +9 -9
  44. package/CreateOpenChannel/context.js +1 -1
  45. package/CreateOpenChannel.js +9 -9
  46. package/EditUserProfile/components/EditUserProfileUI.js +12 -12
  47. package/EditUserProfile.js +12 -12
  48. package/{LocalizationContext-57b46f6c.js → LocalizationContext-98745624.js} +3 -3
  49. package/{LocalizationContext-57b46f6c.js.map → LocalizationContext-98745624.js.map} +1 -1
  50. package/{MediaQueryContext-fbe7af77.js → MediaQueryContext-6d766662.js} +3 -2
  51. package/MediaQueryContext-6d766662.js.map +1 -0
  52. package/{MemberList-6ff1e7fa.js → MemberList-bf2773a4.js} +8 -6
  53. package/{cjs/MemberList-d878307c.js.map → MemberList-bf2773a4.js.map} +1 -1
  54. package/MessageSearch/components/MessageSearchUI.js +11 -11
  55. package/MessageSearch/context.js +1 -1
  56. package/MessageSearch.js +11 -11
  57. package/OpenChannel/components/FrozenChannelNotification.js +4 -4
  58. package/OpenChannel/components/OpenChannelHeader.js +12 -12
  59. package/OpenChannel/components/OpenChannelInput.js +18 -18
  60. package/OpenChannel/components/OpenChannelMessage.js +35 -31
  61. package/OpenChannel/components/OpenChannelMessage.js.map +1 -1
  62. package/OpenChannel/components/OpenChannelMessageList.js +31 -31
  63. package/OpenChannel/components/OpenChannelUI.js +31 -31
  64. package/OpenChannel/context.js +8 -8
  65. package/OpenChannel.js +31 -31
  66. package/OpenChannelList/components/OpenChannelListUI.js +13 -13
  67. package/OpenChannelList/components/OpenChannelPreview.js +3 -3
  68. package/OpenChannelList/context.js +3 -3
  69. package/OpenChannelList.js +13 -13
  70. package/{OpenChannelListProvider-700cf3de.js → OpenChannelListProvider-bf89d8f0.js} +3 -3
  71. package/{OpenChannelListProvider-700cf3de.js.map → OpenChannelListProvider-bf89d8f0.js.map} +1 -1
  72. package/{OpenChannelProvider-b634e564.js → OpenChannelProvider-7d82340b.js} +7 -7
  73. package/{OpenChannelProvider-b634e564.js.map → OpenChannelProvider-7d82340b.js.map} +1 -1
  74. package/OpenChannelSettings/components/EditDetailsModal.js +12 -12
  75. package/OpenChannelSettings/components/OpenChannelProfile.js +12 -12
  76. package/OpenChannelSettings/components/OpenChannelSettingsUI.js +17 -17
  77. package/OpenChannelSettings/components/OperatorUI.js +16 -16
  78. package/OpenChannelSettings/components/ParticipantUI.js +14 -14
  79. package/OpenChannelSettings/context.js +3 -3
  80. package/OpenChannelSettings.js +17 -17
  81. package/{RemoveMessageModal-625b3778.js → RemoveMessageModal-150f000c.js} +3 -3
  82. package/{RemoveMessageModal-625b3778.js.map → RemoveMessageModal-150f000c.js.map} +1 -1
  83. package/SendbirdProvider.js +33 -19
  84. package/SendbirdProvider.js.map +1 -1
  85. package/Thread/components/ParentMessageInfo.js +32 -32
  86. package/Thread/components/ParentMessageInfoItem.js +23 -21
  87. package/Thread/components/ParentMessageInfoItem.js.map +1 -1
  88. package/Thread/components/ThreadHeader.js +6 -6
  89. package/Thread/components/ThreadList.js +35 -35
  90. package/Thread/components/ThreadListItem.js +42 -38
  91. package/Thread/components/ThreadListItem.js.map +1 -1
  92. package/Thread/components/ThreadMessageInput.js +30 -30
  93. package/Thread/components/ThreadUI.js +39 -39
  94. package/Thread/context.js +8 -8
  95. package/Thread.js +39 -39
  96. package/{ThreadProvider-a3d3b241.js → ThreadProvider-4da093f0.js} +7 -7
  97. package/{ThreadProvider-a3d3b241.js.map → ThreadProvider-4da093f0.js.map} +1 -1
  98. package/{UserProfileContext-29074346.js → UserProfileContext-ce4a3d51.js} +1 -1
  99. package/{UserProfileContext-29074346.js.map → UserProfileContext-ce4a3d51.js.map} +1 -1
  100. package/{VoiceMessageInputWrapper-bdc53de4.js → VoiceMessageInputWrapper-f6ffe284.js} +8 -7
  101. package/VoiceMessageInputWrapper-f6ffe284.js.map +1 -0
  102. package/VoicePlayer/context.js +3 -3
  103. package/VoicePlayer/useVoicePlayer.js +15 -3
  104. package/VoicePlayer/useVoicePlayer.js.map +1 -1
  105. package/VoiceRecorder/context.js +42 -4
  106. package/VoiceRecorder/context.js.map +1 -1
  107. package/VoiceRecorder/useVoiceRecorder.js +14 -2
  108. package/VoiceRecorder/useVoiceRecorder.js.map +1 -1
  109. package/{WebAudioUtils-c3ea2db7.js → WebAudioUtils-f0cd04f9.js} +1 -1
  110. package/{WebAudioUtils-c3ea2db7.js.map → WebAudioUtils-f0cd04f9.js.map} +1 -1
  111. package/{_rollupPluginBabelHelpers-0bc76382.js → _rollupPluginBabelHelpers-447283c1.js} +1 -1
  112. package/_rollupPluginBabelHelpers-447283c1.js.map +1 -0
  113. package/{actionTypes-45ec82e6.js → actionTypes-79c91098.js} +1 -1
  114. package/{actionTypes-45ec82e6.js.map → actionTypes-79c91098.js.map} +1 -1
  115. package/cjs/App.js +61 -54
  116. package/cjs/App.js.map +1 -1
  117. package/cjs/Channel/components/ChannelHeader.js +18 -18
  118. package/cjs/Channel/components/ChannelUI.js +41 -41
  119. package/cjs/Channel/components/FileViewer.js +14 -14
  120. package/cjs/Channel/components/FrozenNotification.js +4 -4
  121. package/cjs/Channel/components/Message.js +36 -36
  122. package/cjs/Channel/components/MessageInput.js +29 -29
  123. package/cjs/Channel/components/MessageList.js +37 -37
  124. package/cjs/Channel/components/RemoveMessageModal.js +16 -16
  125. package/cjs/Channel/components/SuggestedMentionList.js +16 -16
  126. package/cjs/Channel/components/TypingIndicator.js +14 -14
  127. package/cjs/Channel/components/UnreadCount.js +4 -4
  128. package/cjs/Channel/context.js +11 -11
  129. package/cjs/Channel.js +41 -41
  130. package/cjs/ChannelList/components/AddChannel.js +14 -14
  131. package/cjs/ChannelList/components/ChannelListHeader.js +6 -6
  132. package/cjs/ChannelList/components/ChannelListUI.js +29 -29
  133. package/cjs/ChannelList/components/ChannelPreview.js +25 -25
  134. package/cjs/ChannelList/components/ChannelPreviewAction.js +13 -13
  135. package/cjs/ChannelList/context.js +7 -7
  136. package/cjs/ChannelList.js +29 -29
  137. package/cjs/{ChannelListProvider-46e379c7.js → ChannelListProvider-9d957501.js} +7 -7
  138. package/cjs/{ChannelListProvider-46e379c7.js.map → ChannelListProvider-9d957501.js.map} +1 -1
  139. package/cjs/{ChannelProvider-2bfafa25.js → ChannelProvider-922c546f.js} +43 -19
  140. package/cjs/ChannelProvider-922c546f.js.map +1 -0
  141. package/cjs/ChannelSettings/components/ChannelProfile.js +11 -11
  142. package/cjs/ChannelSettings/components/ChannelSettingsUI.js +17 -17
  143. package/cjs/ChannelSettings/components/EditDetailsModal.js +11 -11
  144. package/cjs/ChannelSettings/components/LeaveChannel.js +11 -11
  145. package/cjs/ChannelSettings/components/ModerationPanel.js +14 -14
  146. package/cjs/ChannelSettings/components/UserListItem.js +10 -10
  147. package/cjs/ChannelSettings/components/UserPanel.js +13 -13
  148. package/cjs/ChannelSettings/context.js +3 -3
  149. package/cjs/ChannelSettings.js +17 -17
  150. package/cjs/CreateChannel/components/CreateChannelUI.js +13 -13
  151. package/cjs/CreateChannel/components/InviteUsers.js +13 -13
  152. package/cjs/CreateChannel/components/SelectChannelType.js +10 -10
  153. package/cjs/CreateChannel/context.js +4 -4
  154. package/cjs/CreateChannel.js +13 -13
  155. package/cjs/{CreateChannelProvider-ef7e4c91.js → CreateChannelProvider-229e7f71.js} +1 -1
  156. package/cjs/{CreateChannelProvider-ef7e4c91.js.map → CreateChannelProvider-229e7f71.js.map} +1 -1
  157. package/cjs/CreateOpenChannel/components/CreateOpenChannelUI.js +9 -9
  158. package/cjs/CreateOpenChannel/context.js +1 -1
  159. package/cjs/CreateOpenChannel.js +9 -9
  160. package/cjs/EditUserProfile/components/EditUserProfileUI.js +12 -12
  161. package/cjs/EditUserProfile.js +12 -12
  162. package/cjs/{LocalizationContext-b42fa07d.js → LocalizationContext-08e5c17b.js} +3 -3
  163. package/cjs/{LocalizationContext-b42fa07d.js.map → LocalizationContext-08e5c17b.js.map} +1 -1
  164. package/cjs/{MediaQueryContext-372b55a6.js → MediaQueryContext-456e731e.js} +3 -2
  165. package/cjs/MediaQueryContext-456e731e.js.map +1 -0
  166. package/cjs/{MemberList-d878307c.js → MemberList-cbb81b79.js} +8 -6
  167. package/cjs/MemberList-cbb81b79.js.map +1 -0
  168. package/cjs/MessageSearch/components/MessageSearchUI.js +11 -11
  169. package/cjs/MessageSearch/context.js +1 -1
  170. package/cjs/MessageSearch.js +11 -11
  171. package/cjs/OpenChannel/components/FrozenChannelNotification.js +4 -4
  172. package/cjs/OpenChannel/components/OpenChannelHeader.js +12 -12
  173. package/cjs/OpenChannel/components/OpenChannelInput.js +18 -18
  174. package/cjs/OpenChannel/components/OpenChannelMessage.js +35 -31
  175. package/cjs/OpenChannel/components/OpenChannelMessage.js.map +1 -1
  176. package/cjs/OpenChannel/components/OpenChannelMessageList.js +31 -31
  177. package/cjs/OpenChannel/components/OpenChannelUI.js +31 -31
  178. package/cjs/OpenChannel/context.js +8 -8
  179. package/cjs/OpenChannel.js +31 -31
  180. package/cjs/OpenChannelList/components/OpenChannelListUI.js +13 -13
  181. package/cjs/OpenChannelList/components/OpenChannelPreview.js +3 -3
  182. package/cjs/OpenChannelList/context.js +3 -3
  183. package/cjs/OpenChannelList.js +13 -13
  184. package/cjs/{OpenChannelListProvider-d1cbe71b.js → OpenChannelListProvider-f20fba00.js} +3 -3
  185. package/cjs/{OpenChannelListProvider-d1cbe71b.js.map → OpenChannelListProvider-f20fba00.js.map} +1 -1
  186. package/cjs/{OpenChannelProvider-94eb45b4.js → OpenChannelProvider-d9241f7b.js} +7 -7
  187. package/cjs/{OpenChannelProvider-94eb45b4.js.map → OpenChannelProvider-d9241f7b.js.map} +1 -1
  188. package/cjs/OpenChannelSettings/components/EditDetailsModal.js +12 -12
  189. package/cjs/OpenChannelSettings/components/OpenChannelProfile.js +12 -12
  190. package/cjs/OpenChannelSettings/components/OpenChannelSettingsUI.js +17 -17
  191. package/cjs/OpenChannelSettings/components/OperatorUI.js +16 -16
  192. package/cjs/OpenChannelSettings/components/ParticipantUI.js +14 -14
  193. package/cjs/OpenChannelSettings/context.js +3 -3
  194. package/cjs/OpenChannelSettings.js +17 -17
  195. package/cjs/{RemoveMessageModal-83d3158a.js → RemoveMessageModal-4893cb9d.js} +3 -3
  196. package/cjs/{RemoveMessageModal-83d3158a.js.map → RemoveMessageModal-4893cb9d.js.map} +1 -1
  197. package/cjs/SendbirdProvider.js +33 -19
  198. package/cjs/SendbirdProvider.js.map +1 -1
  199. package/cjs/Thread/components/ParentMessageInfo.js +32 -32
  200. package/cjs/Thread/components/ParentMessageInfoItem.js +23 -21
  201. package/cjs/Thread/components/ParentMessageInfoItem.js.map +1 -1
  202. package/cjs/Thread/components/ThreadHeader.js +6 -6
  203. package/cjs/Thread/components/ThreadList.js +35 -35
  204. package/cjs/Thread/components/ThreadListItem.js +42 -38
  205. package/cjs/Thread/components/ThreadListItem.js.map +1 -1
  206. package/cjs/Thread/components/ThreadMessageInput.js +30 -30
  207. package/cjs/Thread/components/ThreadUI.js +39 -39
  208. package/cjs/Thread/context.js +8 -8
  209. package/cjs/Thread.js +39 -39
  210. package/cjs/{ThreadProvider-3ff0ff63.js → ThreadProvider-11d14c8b.js} +7 -7
  211. package/cjs/{ThreadProvider-3ff0ff63.js.map → ThreadProvider-11d14c8b.js.map} +1 -1
  212. package/cjs/{UserProfileContext-c87514d3.js → UserProfileContext-7a6236bc.js} +1 -1
  213. package/cjs/{UserProfileContext-c87514d3.js.map → UserProfileContext-7a6236bc.js.map} +1 -1
  214. package/cjs/{VoiceMessageInputWrapper-6e1d03d7.js → VoiceMessageInputWrapper-42361701.js} +8 -7
  215. package/cjs/VoiceMessageInputWrapper-42361701.js.map +1 -0
  216. package/cjs/VoicePlayer/context.js +4 -3
  217. package/cjs/VoicePlayer/context.js.map +1 -1
  218. package/cjs/VoicePlayer/useVoicePlayer.js +15 -3
  219. package/cjs/VoicePlayer/useVoicePlayer.js.map +1 -1
  220. package/cjs/VoiceRecorder/context.js +42 -4
  221. package/cjs/VoiceRecorder/context.js.map +1 -1
  222. package/cjs/VoiceRecorder/useVoiceRecorder.js +14 -2
  223. package/cjs/VoiceRecorder/useVoiceRecorder.js.map +1 -1
  224. package/cjs/{WebAudioUtils-de98e939.js → WebAudioUtils-1c3089ae.js} +1 -1
  225. package/cjs/{WebAudioUtils-de98e939.js.map → WebAudioUtils-1c3089ae.js.map} +1 -1
  226. package/cjs/{_rollupPluginBabelHelpers-3a9d1641.js → _rollupPluginBabelHelpers-36df1dd2.js} +1 -1
  227. package/cjs/_rollupPluginBabelHelpers-36df1dd2.js.map +1 -0
  228. package/cjs/{actionTypes-ecb5bef6.js → actionTypes-a970787b.js} +1 -1
  229. package/cjs/{actionTypes-ecb5bef6.js.map → actionTypes-a970787b.js.map} +1 -1
  230. package/cjs/{color-a4e73e6f.js → color-529206b1.js} +1 -1
  231. package/cjs/{color-a4e73e6f.js.map → color-529206b1.js.map} +1 -1
  232. package/cjs/{compareIds-a7029d6a.js → compareIds-bce52f6f.js} +1 -1
  233. package/cjs/{compareIds-a7029d6a.js.map → compareIds-bce52f6f.js.map} +1 -1
  234. package/cjs/{const-3ab3e45c.js → const-12d439f2.js} +1 -1
  235. package/cjs/{const-3ab3e45c.js.map → const-12d439f2.js.map} +1 -1
  236. package/cjs/{const-68cf2709.js → const-f45b8147.js} +1 -1
  237. package/cjs/{const-68cf2709.js.map → const-f45b8147.js.map} +1 -1
  238. package/cjs/{consts-ad8ba629.js → consts-47075b32.js} +1 -1
  239. package/cjs/{consts-ad8ba629.js.map → consts-47075b32.js.map} +1 -1
  240. package/cjs/{consts-26d4668c.js → consts-513030e5.js} +1 -1
  241. package/cjs/{consts-26d4668c.js.map → consts-513030e5.js.map} +1 -1
  242. package/cjs/{consts-f71467c8.js → consts-df560049.js} +1 -1
  243. package/cjs/{consts-f71467c8.js.map → consts-df560049.js.map} +1 -1
  244. package/cjs/{consts-bb2a67c7.js → consts-e2998e23.js} +1 -1
  245. package/cjs/{consts-bb2a67c7.js.map → consts-e2998e23.js.map} +1 -1
  246. package/cjs/{context-b81d493d.js → context-197da590.js} +2 -2
  247. package/cjs/{context-b81d493d.js.map → context-197da590.js.map} +1 -1
  248. package/cjs/dist/index.css +624 -624
  249. package/cjs/dist/index.css.map +1 -1
  250. package/cjs/{index-3f079f3e.js → index-00dd60e1.js} +6 -6
  251. package/cjs/{index-3f079f3e.js.map → index-00dd60e1.js.map} +1 -1
  252. package/cjs/{index-f4f6d794.js → index-0f0d9993.js} +2 -2
  253. package/cjs/{index-f4f6d794.js.map → index-0f0d9993.js.map} +1 -1
  254. package/cjs/{index-1c18afa8.js → index-2c2b84d3.js} +4 -4
  255. package/cjs/{index-1c18afa8.js.map → index-2c2b84d3.js.map} +1 -1
  256. package/cjs/{index-a401f2b6.js → index-3ca314da.js} +4 -4
  257. package/cjs/{index-a401f2b6.js.map → index-3ca314da.js.map} +1 -1
  258. package/cjs/{index-e8b83547.js → index-43dc753a.js} +1 -1
  259. package/cjs/{index-e8b83547.js.map → index-43dc753a.js.map} +1 -1
  260. package/cjs/{index-9d9e563e.js → index-5dd3d0d6.js} +3 -3
  261. package/cjs/{index-9d9e563e.js.map → index-5dd3d0d6.js.map} +1 -1
  262. package/cjs/{index-97005534.js → index-66390034.js} +1 -1
  263. package/cjs/{index-97005534.js.map → index-66390034.js.map} +1 -1
  264. package/cjs/{index-e1d69370.js → index-738bdba1.js} +6 -6
  265. package/cjs/{index-e1d69370.js.map → index-738bdba1.js.map} +1 -1
  266. package/cjs/{index-afada680.js → index-7eab3b18.js} +2 -2
  267. package/cjs/{index-afada680.js.map → index-7eab3b18.js.map} +1 -1
  268. package/cjs/{index-cb1d7ac4.js → index-7f58f1fb.js} +62 -24
  269. package/cjs/index-7f58f1fb.js.map +1 -0
  270. package/cjs/{index-849f44b0.js → index-963a1cb0.js} +2 -2
  271. package/cjs/{index-849f44b0.js.map → index-963a1cb0.js.map} +1 -1
  272. package/cjs/{index-0b8a1074.js → index-afdcc71c.js} +3 -3
  273. package/cjs/index-afdcc71c.js.map +1 -0
  274. package/cjs/{index-9b23b5c2.js → index-bed4f92e.js} +4 -4
  275. package/cjs/{index-9b23b5c2.js.map → index-bed4f92e.js.map} +1 -1
  276. package/cjs/{index-c38404d2.js → index-cf54e45c.js} +2 -2
  277. package/cjs/{index-c38404d2.js.map → index-cf54e45c.js.map} +1 -1
  278. package/cjs/{index-7ec4fe06.js → index-d246f067.js} +3 -3
  279. package/cjs/{index-7ec4fe06.js.map → index-d246f067.js.map} +1 -1
  280. package/cjs/{index-72e412f7.js → index-dc79adcc.js} +2 -2
  281. package/cjs/{index-72e412f7.js.map → index-dc79adcc.js.map} +1 -1
  282. package/cjs/{index-811da6ee.js → index-ffb65641.js} +5 -5
  283. package/cjs/{index-811da6ee.js.map → index-ffb65641.js.map} +1 -1
  284. package/cjs/index.js +56 -56
  285. package/cjs/{index.module-d2876b1c.js → index.module-76c961aa.js} +1 -1
  286. package/cjs/{index.module-d2876b1c.js.map → index.module-76c961aa.js.map} +1 -1
  287. package/cjs/sendbirdSelectors.js +3 -3
  288. package/cjs/{stringSet-4f30313f.js → stringSet-f096ea52.js} +3 -1
  289. package/cjs/stringSet-f096ea52.js.map +1 -0
  290. package/cjs/{tokenize-e944d548.js → tokenize-64ea0c48.js} +2 -2
  291. package/cjs/{tokenize-e944d548.js.map → tokenize-64ea0c48.js.map} +1 -1
  292. package/cjs/{topics-3226c6ee.js → topics-3c26f8b2.js} +1 -1
  293. package/cjs/{topics-3226c6ee.js.map → topics-3c26f8b2.js.map} +1 -1
  294. package/cjs/{types-31174fcc.js → types-81799612.js} +1 -1
  295. package/cjs/types-81799612.js.map +1 -0
  296. package/cjs/ui/Accordion.js +2 -2
  297. package/cjs/ui/AccordionGroup.js +2 -2
  298. package/cjs/ui/AdminMessage.js +2 -2
  299. package/cjs/ui/Avatar.js +1 -1
  300. package/cjs/ui/Badge.js +4 -4
  301. package/cjs/ui/BottomSheet.js +1 -1
  302. package/cjs/ui/Button.js +2 -2
  303. package/cjs/ui/ChannelAvatar.js +2 -2
  304. package/cjs/ui/ConnectionStatus.js +4 -4
  305. package/cjs/ui/ContextMenu.js +5 -5
  306. package/cjs/ui/DateSeparator.js +3 -3
  307. package/cjs/ui/EmojiReactions.js +13 -13
  308. package/cjs/ui/FileMessageItemBody.js +6 -6
  309. package/cjs/ui/FileViewer.js +8 -8
  310. package/cjs/ui/IconButton.js +1 -1
  311. package/cjs/ui/Input.js +2 -2
  312. package/cjs/ui/Label.js +2 -2
  313. package/cjs/ui/LinkLabel.js +2 -2
  314. package/cjs/ui/MentionLabel.js +10 -10
  315. package/cjs/ui/MentionUserLabel.js +1 -1
  316. package/cjs/ui/MessageContent.js +35 -33
  317. package/cjs/ui/MessageContent.js.map +1 -1
  318. package/cjs/ui/MessageInput.js +12 -12
  319. package/cjs/ui/MessageItemMenu.js +8 -8
  320. package/cjs/ui/MessageItemReactionMenu.js +8 -8
  321. package/cjs/ui/MessageSearchFileItem.js +10 -10
  322. package/cjs/ui/MessageSearchItem.js +8 -8
  323. package/cjs/ui/MessageStatus.js +10 -10
  324. package/cjs/ui/Modal.js +7 -7
  325. package/cjs/ui/OGMessageItemBody.js +14 -14
  326. package/cjs/ui/OpenChannelAdminMessage.js +2 -2
  327. package/cjs/ui/OpenChannelAvatar.js +5 -5
  328. package/cjs/ui/OpenchannelConversationHeader.js +6 -6
  329. package/cjs/ui/OpenchannelFileMessage.js +17 -17
  330. package/cjs/ui/OpenchannelFileMessage.js.map +1 -1
  331. package/cjs/ui/OpenchannelOGMessage.js +21 -21
  332. package/cjs/ui/OpenchannelOGMessage.js.map +1 -1
  333. package/cjs/ui/OpenchannelThumbnailMessage.js +16 -16
  334. package/cjs/ui/OpenchannelThumbnailMessage.js.map +1 -1
  335. package/cjs/ui/OpenchannelUserMessage.js +20 -21
  336. package/cjs/ui/OpenchannelUserMessage.js.map +1 -1
  337. package/cjs/ui/PlaceHolder.js +5 -5
  338. package/cjs/ui/PlaybackTime.js +2 -2
  339. package/cjs/ui/QuoteMessage.js +7 -7
  340. package/cjs/ui/QuoteMessage.js.map +1 -1
  341. package/cjs/ui/QuoteMessageInput.js +6 -6
  342. package/cjs/ui/ReactionBadge.js +2 -2
  343. package/cjs/ui/ReactionButton.js +4 -4
  344. package/cjs/ui/SortByRow.js +1 -1
  345. package/cjs/ui/TextButton.js +1 -1
  346. package/cjs/ui/TextMessageItemBody.js +14 -14
  347. package/cjs/ui/ThreadReplies.js +5 -5
  348. package/cjs/ui/ThumbnailMessageItemBody.js +6 -13
  349. package/cjs/ui/ThumbnailMessageItemBody.js.map +1 -1
  350. package/cjs/ui/Toggle.js +1 -1
  351. package/cjs/ui/Tooltip.js +2 -2
  352. package/cjs/ui/UnknownMessageItemBody.js +6 -6
  353. package/cjs/ui/UserListItem.js +10 -10
  354. package/cjs/ui/UserProfile.js +9 -9
  355. package/cjs/ui/VoiceMessageItemBody.js +17 -6
  356. package/cjs/ui/VoiceMessageItemBody.js.map +1 -1
  357. package/cjs/ui/VoiceMessgeInput.js +7 -7
  358. package/cjs/ui/Word.js +10 -10
  359. package/cjs/{useDirtyGetMentions-97c6e05a.js → useDirtyGetMentions-35357ca8.js} +1 -1
  360. package/cjs/{useDirtyGetMentions-97c6e05a.js.map → useDirtyGetMentions-35357ca8.js.map} +1 -1
  361. package/cjs/{useLongPress-bf1e8eee.js → useLongPress-a69973fa.js} +3 -3
  362. package/cjs/{useLongPress-bf1e8eee.js.map → useLongPress-a69973fa.js.map} +1 -1
  363. package/cjs/useSendbirdStateContext.js +1 -1
  364. package/cjs/utils/message/isVoiceMessage.js +2 -2
  365. package/cjs/{utils-146517a9.js → utils-16920dec.js} +1 -1
  366. package/cjs/{utils-146517a9.js.map → utils-16920dec.js.map} +1 -1
  367. package/cjs/{utils-dbaff0d0.js → utils-43f12430.js} +1 -1
  368. package/cjs/{utils-dbaff0d0.js.map → utils-43f12430.js.map} +1 -1
  369. package/cjs/{utils-411a893e.js → utils-7e57a1c0.js} +2 -2
  370. package/cjs/{utils-411a893e.js.map → utils-7e57a1c0.js.map} +1 -1
  371. package/cjs/{utils-de654d3c.js → utils-f4aa815e.js} +1 -1
  372. package/cjs/{utils-de654d3c.js.map → utils-f4aa815e.js.map} +1 -1
  373. package/cjs/{uuid-5ab4f88b.js → uuid-982f480d.js} +1 -1
  374. package/cjs/{uuid-5ab4f88b.js.map → uuid-982f480d.js.map} +1 -1
  375. package/cjs/withSendbird.js +1 -1
  376. package/{color-2ed716e6.js → color-e245623c.js} +1 -1
  377. package/{color-2ed716e6.js.map → color-e245623c.js.map} +1 -1
  378. package/{compareIds-bc881fe7.js → compareIds-91640dc3.js} +1 -1
  379. package/{compareIds-bc881fe7.js.map → compareIds-91640dc3.js.map} +1 -1
  380. package/{const-e51dda0c.js → const-6d65fabb.js} +1 -1
  381. package/{const-e51dda0c.js.map → const-6d65fabb.js.map} +1 -1
  382. package/{const-8daee9fc.js → const-973fe8be.js} +1 -1
  383. package/{const-8daee9fc.js.map → const-973fe8be.js.map} +1 -1
  384. package/{consts-d0b365df.js → consts-08ba417b.js} +1 -1
  385. package/{consts-d0b365df.js.map → consts-08ba417b.js.map} +1 -1
  386. package/{consts-3c0ff1ed.js → consts-1a2e6bf0.js} +1 -1
  387. package/{consts-3c0ff1ed.js.map → consts-1a2e6bf0.js.map} +1 -1
  388. package/{consts-d0cfee49.js → consts-66ff57d0.js} +1 -1
  389. package/{consts-d0cfee49.js.map → consts-66ff57d0.js.map} +1 -1
  390. package/{consts-7aab5aff.js → consts-ed8231c7.js} +1 -1
  391. package/{consts-7aab5aff.js.map → consts-ed8231c7.js.map} +1 -1
  392. package/{context-cde5c2bf.js → context-a276cbff.js} +2 -2
  393. package/{context-cde5c2bf.js.map → context-a276cbff.js.map} +1 -1
  394. package/dist/index.css +624 -624
  395. package/dist/index.css.map +1 -1
  396. package/{index-1ec11afb.js → index-220d8a67.js} +3 -3
  397. package/{index-1ec11afb.js.map → index-220d8a67.js.map} +1 -1
  398. package/{index-e2601165.js → index-23c41d59.js} +4 -4
  399. package/index-23c41d59.js.map +1 -0
  400. package/{index-5a1c1956.js → index-2fb2658d.js} +5 -5
  401. package/{index-5a1c1956.js.map → index-2fb2658d.js.map} +1 -1
  402. package/{index-4023d1b2.js → index-428dfbbb.js} +2 -2
  403. package/{index-4023d1b2.js.map → index-428dfbbb.js.map} +1 -1
  404. package/{index-fa37119a.js → index-5e79eee8.js} +2 -2
  405. package/{index-fa37119a.js.map → index-5e79eee8.js.map} +1 -1
  406. package/{index-fa140763.js → index-777dd564.js} +6 -6
  407. package/{index-fa140763.js.map → index-777dd564.js.map} +1 -1
  408. package/{index-7bff4ce0.js → index-81c890ab.js} +1 -1
  409. package/{index-7bff4ce0.js.map → index-81c890ab.js.map} +1 -1
  410. package/{index-5141f766.js → index-84b66a35.js} +4 -4
  411. package/{index-5141f766.js.map → index-84b66a35.js.map} +1 -1
  412. package/{index-865112db.js → index-88ce0c27.js} +1 -1
  413. package/{index-865112db.js.map → index-88ce0c27.js.map} +1 -1
  414. package/{index-ac642e0b.js → index-903c2a2c.js} +4 -4
  415. package/{index-ac642e0b.js.map → index-903c2a2c.js.map} +1 -1
  416. package/{index-1e5cf284.js → index-965d95b4.js} +4 -4
  417. package/{index-1e5cf284.js.map → index-965d95b4.js.map} +1 -1
  418. package/{index-f1701c11.js → index-9bd6a977.js} +2 -2
  419. package/{index-f1701c11.js.map → index-9bd6a977.js.map} +1 -1
  420. package/{index-d847a382.js → index-d8a55f17.js} +62 -25
  421. package/index-d8a55f17.js.map +1 -0
  422. package/{index-37531f98.js → index-e06140fa.js} +2 -2
  423. package/{index-37531f98.js.map → index-e06140fa.js.map} +1 -1
  424. package/{index-3f1fa3f9.js → index-ed9228f0.js} +2 -2
  425. package/{index-3f1fa3f9.js.map → index-ed9228f0.js.map} +1 -1
  426. package/{index-0f22e96e.js → index-eec0a3bd.js} +3 -3
  427. package/{index-0f22e96e.js.map → index-eec0a3bd.js.map} +1 -1
  428. package/{index-735cb5a3.js → index-f6be5c97.js} +6 -6
  429. package/{index-735cb5a3.js.map → index-f6be5c97.js.map} +1 -1
  430. package/index.d.ts +3 -2
  431. package/index.js +56 -56
  432. package/{index.module-9202ebbd.js → index.module-2576c9ac.js} +1 -1
  433. package/{index.module-9202ebbd.js.map → index.module-2576c9ac.js.map} +1 -1
  434. package/package.json +2 -2
  435. package/sendbirdSelectors.js +3 -3
  436. package/{stringSet-7a8ce1ce.js → stringSet-c7aab2f2.js} +3 -1
  437. package/stringSet-c7aab2f2.js.map +1 -0
  438. package/{tokenize-003bf3f7.js → tokenize-fcce2576.js} +2 -2
  439. package/{tokenize-003bf3f7.js.map → tokenize-fcce2576.js.map} +1 -1
  440. package/{topics-5ff88d6f.js → topics-1e293d68.js} +1 -1
  441. package/{topics-5ff88d6f.js.map → topics-1e293d68.js.map} +1 -1
  442. package/{types-bffbc5f5.js → types-0cc4206d.js} +1 -1
  443. package/types-0cc4206d.js.map +1 -0
  444. package/ui/Accordion.js +2 -2
  445. package/ui/AccordionGroup.js +2 -2
  446. package/ui/AdminMessage.js +2 -2
  447. package/ui/Avatar.js +1 -1
  448. package/ui/Badge.js +4 -4
  449. package/ui/BottomSheet.js +1 -1
  450. package/ui/Button.js +2 -2
  451. package/ui/ChannelAvatar.js +2 -2
  452. package/ui/ConnectionStatus.js +4 -4
  453. package/ui/ContextMenu.js +5 -5
  454. package/ui/DateSeparator.js +3 -3
  455. package/ui/EmojiReactions.js +13 -13
  456. package/ui/FileMessageItemBody.js +6 -6
  457. package/ui/FileViewer.js +8 -8
  458. package/ui/IconButton.js +1 -1
  459. package/ui/Input.js +2 -2
  460. package/ui/Label.js +2 -2
  461. package/ui/LinkLabel.js +2 -2
  462. package/ui/MentionLabel.js +10 -10
  463. package/ui/MentionUserLabel.js +1 -1
  464. package/ui/MessageContent.js +35 -33
  465. package/ui/MessageContent.js.map +1 -1
  466. package/ui/MessageInput.js +12 -12
  467. package/ui/MessageItemMenu.js +8 -8
  468. package/ui/MessageItemReactionMenu.js +8 -8
  469. package/ui/MessageSearchFileItem.js +10 -10
  470. package/ui/MessageSearchItem.js +8 -8
  471. package/ui/MessageStatus.js +10 -10
  472. package/ui/Modal.js +7 -7
  473. package/ui/OGMessageItemBody.js +14 -14
  474. package/ui/OpenChannelAdminMessage.js +2 -2
  475. package/ui/OpenChannelAvatar.js +5 -5
  476. package/ui/OpenchannelConversationHeader.js +6 -6
  477. package/ui/OpenchannelFileMessage.js +17 -17
  478. package/ui/OpenchannelFileMessage.js.map +1 -1
  479. package/ui/OpenchannelOGMessage.js +21 -21
  480. package/ui/OpenchannelOGMessage.js.map +1 -1
  481. package/ui/OpenchannelThumbnailMessage.js +16 -16
  482. package/ui/OpenchannelThumbnailMessage.js.map +1 -1
  483. package/ui/OpenchannelUserMessage.js +20 -21
  484. package/ui/OpenchannelUserMessage.js.map +1 -1
  485. package/ui/PlaceHolder.js +5 -5
  486. package/ui/PlaybackTime.js +2 -2
  487. package/ui/QuoteMessage.js +7 -7
  488. package/ui/QuoteMessage.js.map +1 -1
  489. package/ui/QuoteMessageInput.js +6 -6
  490. package/ui/ReactionBadge.js +2 -2
  491. package/ui/ReactionButton.js +4 -4
  492. package/ui/SortByRow.js +1 -1
  493. package/ui/TextButton.js +1 -1
  494. package/ui/TextMessageItemBody.js +14 -14
  495. package/ui/ThreadReplies.js +5 -5
  496. package/ui/ThumbnailMessageItemBody.js +6 -13
  497. package/ui/ThumbnailMessageItemBody.js.map +1 -1
  498. package/ui/Toggle.js +1 -1
  499. package/ui/Tooltip.js +2 -2
  500. package/ui/UnknownMessageItemBody.js +6 -6
  501. package/ui/UserListItem.js +10 -10
  502. package/ui/UserProfile.js +9 -9
  503. package/ui/VoiceMessageItemBody.js +17 -6
  504. package/ui/VoiceMessageItemBody.js.map +1 -1
  505. package/ui/VoiceMessgeInput.js +7 -7
  506. package/ui/Word.js +10 -10
  507. package/{useDirtyGetMentions-aac697f4.js → useDirtyGetMentions-1b05bd06.js} +1 -1
  508. package/{useDirtyGetMentions-aac697f4.js.map → useDirtyGetMentions-1b05bd06.js.map} +1 -1
  509. package/{useLongPress-fbab35a9.js → useLongPress-9865142d.js} +3 -3
  510. package/{useLongPress-fbab35a9.js.map → useLongPress-9865142d.js.map} +1 -1
  511. package/useSendbirdStateContext.js +1 -1
  512. package/utils/message/isVoiceMessage.js +2 -2
  513. package/{utils-388a790e.js → utils-24dcdae9.js} +1 -1
  514. package/{utils-388a790e.js.map → utils-24dcdae9.js.map} +1 -1
  515. package/{utils-6f2bb331.js → utils-79c2fe6a.js} +1 -1
  516. package/{utils-6f2bb331.js.map → utils-79c2fe6a.js.map} +1 -1
  517. package/{utils-0d88f863.js → utils-b847f3de.js} +1 -1
  518. package/{utils-0d88f863.js.map → utils-b847f3de.js.map} +1 -1
  519. package/{utils-af761f03.js → utils-be4cd77f.js} +2 -2
  520. package/{utils-af761f03.js.map → utils-be4cd77f.js.map} +1 -1
  521. package/{uuid-1f1bbd9c.js → uuid-aad1e324.js} +1 -1
  522. package/{uuid-1f1bbd9c.js.map → uuid-aad1e324.js.map} +1 -1
  523. package/withSendbird.js +1 -1
  524. package/ChannelProvider-b41fde4c.js.map +0 -1
  525. package/MediaQueryContext-fbe7af77.js.map +0 -1
  526. package/MemberList-6ff1e7fa.js.map +0 -1
  527. package/VoiceMessageInputWrapper-bdc53de4.js.map +0 -1
  528. package/_rollupPluginBabelHelpers-0bc76382.js.map +0 -1
  529. package/cjs/ChannelProvider-2bfafa25.js.map +0 -1
  530. package/cjs/MediaQueryContext-372b55a6.js.map +0 -1
  531. package/cjs/VoiceMessageInputWrapper-6e1d03d7.js.map +0 -1
  532. package/cjs/_rollupPluginBabelHelpers-3a9d1641.js.map +0 -1
  533. package/cjs/index-0b8a1074.js.map +0 -1
  534. package/cjs/index-cb1d7ac4.js.map +0 -1
  535. package/cjs/stringSet-4f30313f.js.map +0 -1
  536. package/cjs/types-31174fcc.js.map +0 -1
  537. package/index-d847a382.js.map +0 -1
  538. package/index-e2601165.js.map +0 -1
  539. package/stringSet-7a8ce1ce.js.map +0 -1
  540. package/types-bffbc5f5.js.map +0 -1
package/cjs/dist/index.css CHANGED
@@ -70,6 +70,100 @@
70
70
  color: inherit;
71
71
  word-break: break-all;
72
72
  }
73
+ .sendbird-open-channel-list,
74
+ .sendbird-open-channel-list-ui {
75
+ position: relative;
76
+ display: inline-flex;
77
+ flex-direction: column;
78
+ width: 256px;
79
+ min-width: 256px;
80
+ height: 100%;
81
+ box-sizing: border-box;
82
+ }
83
+ .sendbird--mobile-mode .sendbird-open-channel-list,
84
+ .sendbird--mobile-mode .sendbird-open-channel-list-ui {
85
+ width: 100%;
86
+ }
87
+ .sendbird-theme--light .sendbird-open-channel-list,
88
+ .sendbird-theme--light .sendbird-open-channel-list-ui {
89
+ border-right: solid 1px var(--sendbird-light-onlight-04);
90
+ }
91
+ .sendbird-theme--dark .sendbird-open-channel-list,
92
+ .sendbird-theme--dark .sendbird-open-channel-list-ui {
93
+ border-right: solid 1px var(--sendbird-dark-ondark-04);
94
+ }
95
+ .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
96
+ .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
97
+ position: relative;
98
+ display: inline-flex;
99
+ flex-direction: row;
100
+ align-items: center;
101
+ width: 100%;
102
+ height: 64px;
103
+ box-sizing: border-box;
104
+ }
105
+ .sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
106
+ .sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
107
+ background-color: var(--sendbird-light-background-50);
108
+ border-bottom: solid 1px var(--sendbird-light-onlight-04);
109
+ }
110
+ .sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
111
+ .sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
112
+ background-color: var(--sendbird-dark-background-600);
113
+ border-bottom: solid 1px var(--sendbird-dark-ondark-04);
114
+ }
115
+ .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
116
+ .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
117
+ position: relative;
118
+ margin-left: 24px;
119
+ display: inline-flex;
120
+ align-items: center;
121
+ box-sizing: border-box;
122
+ }
123
+ .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
124
+ .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
125
+ position: absolute;
126
+ top: 16px;
127
+ right: 56px;
128
+ display: inline-flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ box-sizing: border-box;
132
+ }
133
+ .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
134
+ .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
135
+ position: absolute;
136
+ top: 16px;
137
+ right: 16px;
138
+ display: inline-flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ box-sizing: border-box;
142
+ }
143
+ .sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
144
+ .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
145
+ position: relative;
146
+ display: inline-flex;
147
+ flex-direction: column;
148
+ width: 100%;
149
+ height: calc(100% - 64px);
150
+ box-sizing: border-box;
151
+ overflow-y: scroll;
152
+ }
153
+
154
+ .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
155
+ position: relative;
156
+ min-height: 62px;
157
+ display: inline-flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ }
161
+ .sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
162
+ background-color: var(--sendbird-light-background-100);
163
+ }
164
+ .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
165
+ background-color: var(--sendbird-dark-background-500);
166
+ }
73
167
  .sendbird-open-channel-preview {
74
168
  position: relative;
75
169
  display: inline-flex;
@@ -244,100 +338,6 @@
244
338
  display: inline-flex;
245
339
  flex-direction: row;
246
340
  }
247
- .sendbird-open-channel-list,
248
- .sendbird-open-channel-list-ui {
249
- position: relative;
250
- display: inline-flex;
251
- flex-direction: column;
252
- width: 256px;
253
- min-width: 256px;
254
- height: 100%;
255
- box-sizing: border-box;
256
- }
257
- .sendbird--mobile-mode .sendbird-open-channel-list,
258
- .sendbird--mobile-mode .sendbird-open-channel-list-ui {
259
- width: 100%;
260
- }
261
- .sendbird-theme--light .sendbird-open-channel-list,
262
- .sendbird-theme--light .sendbird-open-channel-list-ui {
263
- border-right: solid 1px var(--sendbird-light-onlight-04);
264
- }
265
- .sendbird-theme--dark .sendbird-open-channel-list,
266
- .sendbird-theme--dark .sendbird-open-channel-list-ui {
267
- border-right: solid 1px var(--sendbird-dark-ondark-04);
268
- }
269
- .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
270
- .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
271
- position: relative;
272
- display: inline-flex;
273
- flex-direction: row;
274
- align-items: center;
275
- width: 100%;
276
- height: 64px;
277
- box-sizing: border-box;
278
- }
279
- .sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
280
- .sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
281
- background-color: var(--sendbird-light-background-50);
282
- border-bottom: solid 1px var(--sendbird-light-onlight-04);
283
- }
284
- .sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
285
- .sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
286
- background-color: var(--sendbird-dark-background-600);
287
- border-bottom: solid 1px var(--sendbird-dark-ondark-04);
288
- }
289
- .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
290
- .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
291
- position: relative;
292
- margin-left: 24px;
293
- display: inline-flex;
294
- align-items: center;
295
- box-sizing: border-box;
296
- }
297
- .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
298
- .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
299
- position: absolute;
300
- top: 16px;
301
- right: 56px;
302
- display: inline-flex;
303
- align-items: center;
304
- justify-content: center;
305
- box-sizing: border-box;
306
- }
307
- .sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
308
- .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
309
- position: absolute;
310
- top: 16px;
311
- right: 16px;
312
- display: inline-flex;
313
- align-items: center;
314
- justify-content: center;
315
- box-sizing: border-box;
316
- }
317
- .sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
318
- .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
319
- position: relative;
320
- display: inline-flex;
321
- flex-direction: column;
322
- width: 100%;
323
- height: calc(100% - 64px);
324
- box-sizing: border-box;
325
- overflow-y: scroll;
326
- }
327
-
328
- .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
329
- position: relative;
330
- min-height: 62px;
331
- display: inline-flex;
332
- align-items: center;
333
- justify-content: center;
334
- }
335
- .sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
336
- background-color: var(--sendbird-light-background-100);
337
- }
338
- .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
339
- background-color: var(--sendbird-dark-background-500);
340
- }
341
341
  @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
342
342
  :root {
343
343
  --sendbird-light-primary-500: #491389;
@@ -504,54 +504,378 @@
504
504
  .sendbird-experimental__rem__units .sendbird-quote-message .sendbird-quote-message__replied-message__file-message {
505
505
  font-size: 0.75rem;
506
506
  }
507
- .sendbird-channel-list {
508
- width: 320px;
507
+ .sendbird-modal--full-mobile .sendbird-modal__content {
508
+ width: 100vw;
509
+ max-width: 100%;
509
510
  height: 100%;
510
- display: flex;
511
- flex-direction: column;
512
- box-sizing: border-box;
513
511
  }
514
- .sendbird-theme--light .sendbird-channel-list {
515
- background-color: var(--sendbird-light-background-50);
516
- }
517
- .sendbird-theme--dark .sendbird-channel-list {
518
- background-color: var(--sendbird-dark-background-600);
512
+ .sendbird--mobile-mode .sendbird-modal--full-mobile .sendbird-modal__content {
513
+ height: -webkit-fill-available;
514
+ height: -moz-available;
515
+ height: stretch;
519
516
  }
520
- .sendbird--mobile-mode .sendbird-channel-list {
517
+
518
+ .sendbird-modal {
519
+ position: fixed;
520
+ top: 0;
521
+ left: 0;
521
522
  width: 100%;
523
+ height: 100%;
524
+ display: flex;
525
+ align-items: center;
526
+ justify-content: center;
522
527
  }
523
528
 
524
- .sendbird-channel-list__header {
525
- height: 64px;
526
- min-height: 64px;
529
+ .sendbird-modal__backdrop--clickoutside {
530
+ cursor: pointer;
527
531
  }
528
532
 
529
- .sendbird-channel-list__body {
530
- flex: 1 1 0;
531
- -ms-flex: 1;
532
- overflow-y: auto;
533
- overflow-x: hidden;
534
- }
535
- .sendbird-label {
536
- -webkit-user-select: none;
537
- -webkit-touch-callout: none;
533
+ .sendbird-modal__content {
534
+ width: 480px;
535
+ border-radius: 4px;
536
+ z-index: 10001;
537
+ padding: 18px 24px 24px 24px;
538
+ position: relative;
539
+ box-sizing: border-box;
538
540
  }
539
-
540
- [class*=sendbird-label] {
541
- font-family: var(--sendbird-font-family-default);
541
+ .sendbird-theme--light .sendbird-modal__content {
542
+ background-color: var(--sendbird-light-background-50);
543
+ box-shadow: var(--sendbird-light-shadow-04);
542
544
  }
543
-
544
- .sendbird-label--h-1 {
545
- font-size: 20px;
546
- font-weight: 600;
547
- font-stretch: normal;
548
- font-style: normal;
549
- line-height: 1.4;
550
- letter-spacing: -0.2px;
545
+ .sendbird-theme--dark .sendbird-modal__content {
546
+ background-color: var(--sendbird-dark-background-500);
547
+ box-shadow: var(--sendbird-dark-shadow-04);
551
548
  }
552
-
553
- .sendbird-label--h-2 {
554
- font-size: 18px;
549
+ .sendbird-modal__content .sendbird-modal__close {
550
+ position: absolute;
551
+ top: 16px;
552
+ right: 16px;
553
+ cursor: pointer;
554
+ }
555
+ .sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
556
+ fill: var(--sendbird-light-onlight-01);
557
+ }
558
+ .sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
559
+ fill: var(--sendbird-dark-ondark-01);
560
+ }
561
+ .sendbird-modal__content .sendbird-modal__header {
562
+ margin-bottom: 16px;
563
+ }
564
+ .sendbird-modal__content .sendbird-modal__body {
565
+ height: calc(100% - 116px);
566
+ }
567
+ .sendbird-modal__content .sendbird-modal__footer {
568
+ display: flex;
569
+ flex-direction: row;
570
+ justify-content: flex-end;
571
+ margin-top: 32px;
572
+ text-align: right;
573
+ }
574
+ .sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
575
+ position: sticky;
576
+ bottom: 24px;
577
+ }
578
+ .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
579
+ margin-left: 8px;
580
+ min-width: 80px;
581
+ height: 40px;
582
+ }
583
+
584
+ .sendbird-modal__backdrop {
585
+ position: fixed;
586
+ z-index: 10000;
587
+ height: 100%;
588
+ width: 100%;
589
+ top: 0;
590
+ left: 0;
591
+ }
592
+ .sendbird-theme--light .sendbird-modal__backdrop {
593
+ background-color: var(--sendbird-light-overlay-02);
594
+ }
595
+ .sendbird-theme--dark .sendbird-modal__backdrop {
596
+ background-color: var(--sendbird-dark-overlay-02);
597
+ }
598
+ .sendbird-button {
599
+ display: inline-block;
600
+ box-shadow: none;
601
+ border-radius: 4px;
602
+ padding: 0px;
603
+ font-family: var(--sendbird-font-family-default);
604
+ cursor: pointer;
605
+ }
606
+ .sendbird-button:hover {
607
+ box-shadow: none;
608
+ }
609
+ .sendbird-button:focus {
610
+ outline: none;
611
+ }
612
+ .sendbird-button:active {
613
+ box-shadow: none;
614
+ }
615
+ .sendbird-button.sendbird-button__disabled {
616
+ cursor: not-allowed;
617
+ }
618
+ .sendbird-theme--light .sendbird-button.sendbird-button__disabled {
619
+ border: none;
620
+ background-color: var(--sendbird-light-background-200);
621
+ }
622
+ .sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
623
+ border: none;
624
+ background-color: var(--sendbird-dark-background-400);
625
+ }
626
+ .sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
627
+ background-color: var(--sendbird-light-background-200);
628
+ }
629
+ .sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
630
+ background-color: var(--sendbird-dark-background-400);
631
+ }
632
+
633
+ .sendbird-button--big {
634
+ height: 40px;
635
+ }
636
+ .sendbird-button--big .sendbird-button__text {
637
+ margin: 10px 16px;
638
+ }
639
+
640
+ .sendbird-button--small {
641
+ height: 32px;
642
+ }
643
+ .sendbird-button--small .sendbird-button__text {
644
+ margin: 6px 16px;
645
+ }
646
+
647
+ .sendbird-theme--light .sendbird-button--primary {
648
+ border: 1px solid var(--sendbird-light-primary-300);
649
+ background-color: var(--sendbird-light-primary-300);
650
+ }
651
+ .sendbird-theme--dark .sendbird-button--primary {
652
+ border: 1px solid var(--sendbird-dark-primary-200);
653
+ background-color: var(--sendbird-dark-primary-200);
654
+ }
655
+ .sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
656
+ color: var(--sendbird-light-ondark-01);
657
+ }
658
+ .sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
659
+ color: var(--sendbird-dark-onlight-01);
660
+ }
661
+ .sendbird-theme--light .sendbird-button--primary:hover {
662
+ background-color: var(--sendbird-light-primary-400);
663
+ border-color: var(--sendbird-light-primary-400);
664
+ }
665
+ .sendbird-theme--dark .sendbird-button--primary:hover {
666
+ background-color: var(--sendbird-dark-primary-300);
667
+ border-color: var(--sendbird-dark-primary-300);
668
+ }
669
+ .sendbird-theme--light .sendbird-button--primary:focus {
670
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300);
671
+ border: 1px solid var(--sendbird-button-border-focus);
672
+ }
673
+ .sendbird-theme--dark .sendbird-button--primary:focus {
674
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200);
675
+ border: 1px solid var(--sendbird-button-border-focus);
676
+ }
677
+ .sendbird-theme--light .sendbird-button--primary:active {
678
+ background-color: var(--sendbird-light-primary-500);
679
+ }
680
+ .sendbird-theme--dark .sendbird-button--primary:active {
681
+ background-color: var(--sendbird-dark-primary-400);
682
+ }
683
+ .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
684
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-400);
685
+ }
686
+ .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
687
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-300);
688
+ }
689
+ .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
690
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-500);
691
+ }
692
+ .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
693
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-400);
694
+ }
695
+
696
+ .sendbird-button--secondary {
697
+ background-color: transparent;
698
+ }
699
+ .sendbird-theme--light .sendbird-button--secondary {
700
+ border: 1px solid var(--sendbird-light-onlight-03);
701
+ }
702
+ .sendbird-theme--dark .sendbird-button--secondary {
703
+ border: 1px solid var(--sendbird-dark-ondark-03);
704
+ }
705
+ .sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
706
+ color: var(--sendbird-light-onlight-01);
707
+ }
708
+ .sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
709
+ color: var(--sendbird-dark-ondark-01);
710
+ }
711
+ .sendbird-button--secondary:hover {
712
+ background-color: transparent;
713
+ }
714
+ .sendbird-theme--light .sendbird-button--secondary:hover {
715
+ border: 1px solid var(--sendbird-light-primary-300);
716
+ }
717
+ .sendbird-theme--dark .sendbird-button--secondary:hover {
718
+ border: 1px solid var(--sendbird-dark-primary-200);
719
+ }
720
+ .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
721
+ color: var(--sendbird-light-primary-300);
722
+ }
723
+ .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
724
+ color: var(--sendbird-dark-primary-200);
725
+ }
726
+ .sendbird-button--secondary.sendbird-button__disabled {
727
+ cursor: not-allowed;
728
+ border: none;
729
+ }
730
+ .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
731
+ background-color: var(--sendbird-light-background-200);
732
+ }
733
+ .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
734
+ background-color: var(--sendbird-dark-background-400);
735
+ }
736
+ .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
737
+ color: var(--sendbird-light-onlight-02);
738
+ }
739
+ .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
740
+ color: var(--sendbird-dark-ondark-02);
741
+ }
742
+ .sendbird-button--secondary.sendbird-button__disabled:hover {
743
+ border: none;
744
+ }
745
+ .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
746
+ background-color: var(--sendbird-light-background-200);
747
+ }
748
+ .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
749
+ background-color: var(--sendbird-dark-background-400);
750
+ }
751
+ .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
752
+ color: var(--sendbird-light-onlight-02);
753
+ }
754
+ .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
755
+ color: var(--sendbird-dark-ondark-02);
756
+ }
757
+ .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
758
+ color: var(--sendbird-light-primary-300);
759
+ }
760
+ .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
761
+ color: var(--sendbird-dark-primary-200);
762
+ }
763
+ .sendbird-button--secondary:focus {
764
+ border: 1px solid transparent;
765
+ background-color: transparent;
766
+ }
767
+ .sendbird-theme--light .sendbird-button--secondary:focus {
768
+ box-shadow: var(--sendbird-light-primary-300) 0px 0px 0px 2px;
769
+ }
770
+ .sendbird-theme--dark .sendbird-button--secondary:focus {
771
+ box-shadow: var(--sendbird-dark-primary-200) 0px 0px 0px 2px;
772
+ }
773
+ .sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
774
+ color: var(--sendbird-light-onlight-01);
775
+ }
776
+ .sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
777
+ color: var(--sendbird-dark-ondark-01);
778
+ }
779
+ .sendbird-button--secondary:active {
780
+ box-shadow: none;
781
+ }
782
+ .sendbird-theme--light .sendbird-button--secondary:active {
783
+ border: 1px solid var(--sendbird-light-primary-300);
784
+ }
785
+ .sendbird-theme--dark .sendbird-button--secondary:active {
786
+ border: 1px solid var(--sendbird-dark-primary-200);
787
+ }
788
+ .sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
789
+ color: var(--sendbird-light-primary-300);
790
+ }
791
+ .sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
792
+ color: var(--sendbird-dark-primary-200);
793
+ }
794
+
795
+ .sendbird-theme--light .sendbird-button--danger {
796
+ border: 1px solid var(--sendbird-light-error-300);
797
+ background-color: var(--sendbird-light-error-300);
798
+ }
799
+ .sendbird-theme--dark .sendbird-button--danger {
800
+ border: 1px solid var(--sendbird-dark-error-200);
801
+ background-color: var(--sendbird-dark-error-200);
802
+ }
803
+ .sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
804
+ color: var(--sendbird-light-ondark-01);
805
+ }
806
+ .sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
807
+ color: var(--sendbird-dark-onlight-01);
808
+ }
809
+ .sendbird-theme--light .sendbird-button--danger:hover {
810
+ background-color: var(--sendbird-light-error-400);
811
+ border-color: var(--sendbird-light-error-400);
812
+ }
813
+ .sendbird-theme--dark .sendbird-button--danger:hover {
814
+ background-color: var(--sendbird-dark-error-400);
815
+ border-color: var(--sendbird-dark-error-400);
816
+ }
817
+ .sendbird-theme--light .sendbird-button--danger:focus {
818
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-300);
819
+ border-color: var(--sendbird-button-border-focus);
820
+ }
821
+ .sendbird-theme--dark .sendbird-button--danger:focus {
822
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-300);
823
+ border-color: var(--sendbird-button-border-focus);
824
+ }
825
+ .sendbird-button--danger:active {
826
+ box-shadow: none;
827
+ }
828
+ .sendbird-theme--light .sendbird-button--danger:active {
829
+ background-color: var(--sendbird-light-error-500);
830
+ }
831
+ .sendbird-theme--dark .sendbird-button--danger:active {
832
+ background-color: var(--sendbird-dark-error-500);
833
+ }
834
+ .sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
835
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-400);
836
+ }
837
+ .sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
838
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-400);
839
+ }
840
+ .sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
841
+ box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-500);
842
+ }
843
+ .sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
844
+ box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-500);
845
+ }
846
+
847
+ .sendbird-button--disabled {
848
+ border: 1px solid transparent;
849
+ cursor: not-allowed;
850
+ }
851
+ .sendbird-theme--light .sendbird-button--disabled {
852
+ background-color: var(--sendbird-light-background-200);
853
+ color: var(--sendbird-light-ondark-01);
854
+ }
855
+ .sendbird-theme--dark .sendbird-button--disabled {
856
+ background-color: var(--sendbird-dark-background-400);
857
+ color: var(--sendbird-dark-onlight-01);
858
+ }
859
+ .sendbird-label {
860
+ -webkit-user-select: none;
861
+ -webkit-touch-callout: none;
862
+ }
863
+
864
+ [class*=sendbird-label] {
865
+ font-family: var(--sendbird-font-family-default);
866
+ }
867
+
868
+ .sendbird-label--h-1 {
869
+ font-size: 20px;
870
+ font-weight: 600;
871
+ font-stretch: normal;
872
+ font-style: normal;
873
+ line-height: 1.4;
874
+ letter-spacing: -0.2px;
875
+ }
876
+
877
+ .sendbird-label--h-2 {
878
+ font-size: 18px;
555
879
  font-weight: 600;
556
880
  font-stretch: normal;
557
881
  font-style: normal;
@@ -701,92 +1025,6 @@
701
1025
  .sendbird-theme--dark .sendbird-label--color-secondary-3 {
702
1026
  color: var(--sendbird-dark-secondary-200);
703
1027
  }
704
- .sendbird-channel-header {
705
- position: relative;
706
- height: 64px;
707
- min-height: 64px;
708
- width: 320px;
709
- padding: 8px 64px 8px 8px;
710
- box-sizing: border-box;
711
- }
712
- .sendbird-theme--light .sendbird-channel-header {
713
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
714
- background-color: var(--sendbird-light-background-50);
715
- }
716
- .sendbird-theme--dark .sendbird-channel-header {
717
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
718
- background-color: var(--sendbird-dark-background-600);
719
- }
720
- .sendbird--mobile-mode .sendbird-channel-header {
721
- width: 100%;
722
- }
723
- .sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
724
- cursor: pointer;
725
- }
726
- .sendbird-channel-header .sendbird-channel-header__title {
727
- display: flex;
728
- flex-direction: row;
729
- width: 260px;
730
- height: 48px;
731
- border-radius: 4px;
732
- }
733
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:hover {
734
- background: var(--sendbird-light-background-100);
735
- }
736
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:hover {
737
- background: var(--sendbird-dark-background-500);
738
- }
739
- .sendbird-channel-header .sendbird-channel-header__title:focus {
740
- outline: none;
741
- }
742
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:focus {
743
- background: var(--sendbird-light-background-200);
744
- }
745
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:focus {
746
- background: var(--sendbird-dark-background-400);
747
- }
748
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:active {
749
- border: solid 2px var(--sendbird-light-primary-300);
750
- }
751
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:active {
752
- border: solid 2px var(--sendbird-dark-primary-200);
753
- }
754
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__left {
755
- width: 48px;
756
- padding: 8px;
757
- box-sizing: border-box;
758
- }
759
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right {
760
- margin-left: 4px;
761
- padding-top: 8px;
762
- }
763
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__name,
764
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__user-id {
765
- display: block;
766
- max-width: 200px;
767
- white-space: nowrap;
768
- overflow: hidden;
769
- text-overflow: ellipsis;
770
- }
771
- .sendbird-channel-header .sendbird-channel-header__right-icon {
772
- position: absolute;
773
- right: 16px;
774
- top: 16px;
775
- }
776
- .sendbird-image-renderer {
777
- overflow: hidden;
778
- position: relative;
779
- }
780
-
781
- .sendbird-image-renderer__hidden-image-loader {
782
- display: none;
783
- }
784
-
785
- .sendbird-image-renderer,
786
- .sendbird-image-renderer__image {
787
- width: 320px;
788
- height: 180px;
789
- }
790
1028
  .sendbird-icon {
791
1029
  display: inline-block;
792
1030
  }
@@ -900,70 +1138,8 @@
900
1138
  .sendbird-theme--light .sendbird-icon-color--error [class*=fill] {
901
1139
  fill: var(--sendbird-light-error-300);
902
1140
  }
903
- .sendbird-theme--dark .sendbird-icon-color--error [class*=fill] {
904
- fill: var(--sendbird-dark-error-200);
905
- }
906
- .sendbird-avatar {
907
- display: inline-block;
908
- overflow: hidden;
909
- border-radius: 50%;
910
- position: relative;
911
- }
912
- .sendbird-avatar:focus {
913
- outline: none;
914
- }
915
- .sendbird-avatar .sendbird-avatar-img {
916
- position: absolute;
917
- top: 50%;
918
- left: 50%;
919
- transform: translate(-50%, -50%);
920
- display: flex;
921
- justify-content: center;
922
- align-items: center;
923
- }
924
- .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
925
- background-color: var(--sendbird-light-background-300);
926
- }
927
- .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img {
928
- background-color: var(--sendbird-dark-background-300);
929
- }
930
- .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:first-child {
931
- transform: translate(2%, -50%);
932
- }
933
- .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:last-child {
934
- transform: translate(-102%, -50%);
935
- }
936
- .sendbird-avatar .sendbird-avatar--inner__three-child--upper .sendbird-avatar-img:first-child {
937
- transform: translate(-50%, -102%);
938
- }
939
- .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:first-child {
940
- transform: translate(-77%, -23%) scale(0.5);
941
- }
942
- .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:last-child {
943
- transform: translate(-23%, -23%) scale(0.5);
944
- }
945
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:first-child {
946
- transform: translate(-77%, -77%) scale(0.5);
947
- }
948
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(2) {
949
- transform: translate(-23%, -77%) scale(0.5);
950
- }
951
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(3) {
952
- transform: translate(-77%, -23%) scale(0.5);
953
- }
954
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:last-child {
955
- transform: translate(-23%, -23%) scale(0.5);
956
- }
957
- .sendbird-avatar .sendbird-avatar-img--default {
958
- display: flex;
959
- justify-content: center;
960
- align-items: center;
961
- }
962
- .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
963
- background-color: var(--sendbird-light-background-300);
964
- }
965
- .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
966
- background-color: var(--sendbird-dark-background-300);
1141
+ .sendbird-theme--dark .sendbird-icon-color--error [class*=fill] {
1142
+ fill: var(--sendbird-dark-error-200);
967
1143
  }
968
1144
  .sendbird-iconbutton {
969
1145
  color: var(--sendbird-iconbutton-color);
@@ -1018,410 +1194,234 @@
1018
1194
  .sendbird-theme--dark .sendbird-iconbutton--pressed {
1019
1195
  background-color: var(--sendbird-dark-background-700);
1020
1196
  }
1021
- .sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
1022
- margin: 0 40px;
1023
- }
1024
-
1025
- .sendbird-add-channel__rectangle-wrap {
1026
- margin-top: 26px;
1027
- }
1028
-
1029
- .sendbird-add-channel__rectangle-footer {
1030
- text-align: right;
1031
- margin-top: 32px;
1032
- }
1033
-
1034
- .sendbird-add-channel__rectangle {
1035
- width: 432px;
1036
- height: 72px;
1037
- border-radius: 4px;
1038
- margin-bottom: 8px;
1039
- padding: 25px 72px;
1040
- position: relative;
1041
- box-sizing: border-box;
1042
- cursor: pointer;
1043
- }
1044
- .sendbird--mobile-mode .sendbird-add-channel__rectangle {
1045
- min-width: 288px;
1046
- width: 100%;
1047
- padding-right: 0;
1048
- }
1049
- .sendbird-theme--light .sendbird-add-channel__rectangle {
1050
- border: 1px solid var(--sendbird-light-onlight-04);
1051
- }
1052
- .sendbird-theme--dark .sendbird-add-channel__rectangle {
1053
- border: 1px solid var(--sendbird-dark-ondark-04);
1054
- }
1055
- .sendbird-add-channel__rectangle .sendbird-icon {
1056
- position: absolute;
1057
- left: 22px;
1058
- top: 24px;
1059
- }
1060
- .sendbird-create-channel--content {
1061
- width: 480px;
1062
- max-height: 552px;
1063
- }
1064
-
1065
- .sendbird-create-channel--scroll {
1066
- height: 360px;
1067
- overflow-x: hidden;
1068
- overflow-y: scroll;
1069
- }
1070
- .sendbird--mobile-mode .sendbird-create-channel--scroll {
1071
- height: calc(100vh - 200px);
1072
- height: calc(var(--sendbird-vh, 1vh) * 100 - 200px);
1073
- }
1074
- .sendbird-modal--full-mobile .sendbird-modal__content {
1075
- width: 100vw;
1076
- max-width: 100%;
1077
- height: 100%;
1078
- }
1079
- .sendbird--mobile-mode .sendbird-modal--full-mobile .sendbird-modal__content {
1080
- height: -webkit-fill-available;
1081
- height: -moz-available;
1082
- height: stretch;
1083
- }
1084
-
1085
- .sendbird-modal {
1086
- position: fixed;
1087
- top: 0;
1088
- left: 0;
1089
- width: 100%;
1197
+ .sendbird-channel-list {
1198
+ width: 320px;
1090
1199
  height: 100%;
1091
1200
  display: flex;
1092
- align-items: center;
1093
- justify-content: center;
1094
- }
1095
-
1096
- .sendbird-modal__backdrop--clickoutside {
1097
- cursor: pointer;
1098
- }
1099
-
1100
- .sendbird-modal__content {
1101
- width: 480px;
1102
- border-radius: 4px;
1103
- z-index: 10001;
1104
- padding: 18px 24px 24px 24px;
1105
- position: relative;
1201
+ flex-direction: column;
1106
1202
  box-sizing: border-box;
1107
1203
  }
1108
- .sendbird-theme--light .sendbird-modal__content {
1204
+ .sendbird-theme--light .sendbird-channel-list {
1109
1205
  background-color: var(--sendbird-light-background-50);
1110
- box-shadow: var(--sendbird-light-shadow-04);
1111
- }
1112
- .sendbird-theme--dark .sendbird-modal__content {
1113
- background-color: var(--sendbird-dark-background-500);
1114
- box-shadow: var(--sendbird-dark-shadow-04);
1115
- }
1116
- .sendbird-modal__content .sendbird-modal__close {
1117
- position: absolute;
1118
- top: 16px;
1119
- right: 16px;
1120
- cursor: pointer;
1121
- }
1122
- .sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
1123
- fill: var(--sendbird-light-onlight-01);
1124
- }
1125
- .sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
1126
- fill: var(--sendbird-dark-ondark-01);
1127
- }
1128
- .sendbird-modal__content .sendbird-modal__header {
1129
- margin-bottom: 16px;
1130
- }
1131
- .sendbird-modal__content .sendbird-modal__body {
1132
- height: calc(100% - 116px);
1133
- }
1134
- .sendbird-modal__content .sendbird-modal__footer {
1135
- display: flex;
1136
- flex-direction: row;
1137
- justify-content: flex-end;
1138
- margin-top: 32px;
1139
- text-align: right;
1140
1206
  }
1141
- .sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
1142
- position: sticky;
1143
- bottom: 24px;
1144
- }
1145
- .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
1146
- margin-left: 8px;
1147
- min-width: 80px;
1148
- height: 40px;
1207
+ .sendbird-theme--dark .sendbird-channel-list {
1208
+ background-color: var(--sendbird-dark-background-600);
1149
1209
  }
1150
-
1151
- .sendbird-modal__backdrop {
1152
- position: fixed;
1153
- z-index: 10000;
1154
- height: 100%;
1210
+ .sendbird--mobile-mode .sendbird-channel-list {
1155
1211
  width: 100%;
1156
- top: 0;
1157
- left: 0;
1158
- }
1159
- .sendbird-theme--light .sendbird-modal__backdrop {
1160
- background-color: var(--sendbird-light-overlay-02);
1161
- }
1162
- .sendbird-theme--dark .sendbird-modal__backdrop {
1163
- background-color: var(--sendbird-dark-overlay-02);
1164
- }
1165
- .sendbird-button {
1166
- display: inline-block;
1167
- box-shadow: none;
1168
- border-radius: 4px;
1169
- padding: 0px;
1170
- font-family: var(--sendbird-font-family-default);
1171
- cursor: pointer;
1172
- }
1173
- .sendbird-button:hover {
1174
- box-shadow: none;
1175
- }
1176
- .sendbird-button:focus {
1177
- outline: none;
1178
- }
1179
- .sendbird-button:active {
1180
- box-shadow: none;
1181
- }
1182
- .sendbird-button.sendbird-button__disabled {
1183
- cursor: not-allowed;
1184
- }
1185
- .sendbird-theme--light .sendbird-button.sendbird-button__disabled {
1186
- border: none;
1187
- background-color: var(--sendbird-light-background-200);
1188
- }
1189
- .sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
1190
- border: none;
1191
- background-color: var(--sendbird-dark-background-400);
1192
- }
1193
- .sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
1194
- background-color: var(--sendbird-light-background-200);
1195
- }
1196
- .sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
1197
- background-color: var(--sendbird-dark-background-400);
1198
- }
1199
-
1200
- .sendbird-button--big {
1201
- height: 40px;
1202
- }
1203
- .sendbird-button--big .sendbird-button__text {
1204
- margin: 10px 16px;
1205
- }
1206
-
1207
- .sendbird-button--small {
1208
- height: 32px;
1209
- }
1210
- .sendbird-button--small .sendbird-button__text {
1211
- margin: 6px 16px;
1212
1212
  }
1213
1213
 
1214
- .sendbird-theme--light .sendbird-button--primary {
1215
- border: 1px solid var(--sendbird-light-primary-300);
1216
- background-color: var(--sendbird-light-primary-300);
1217
- }
1218
- .sendbird-theme--dark .sendbird-button--primary {
1219
- border: 1px solid var(--sendbird-dark-primary-200);
1220
- background-color: var(--sendbird-dark-primary-200);
1221
- }
1222
- .sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
1223
- color: var(--sendbird-light-ondark-01);
1224
- }
1225
- .sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
1226
- color: var(--sendbird-dark-onlight-01);
1227
- }
1228
- .sendbird-theme--light .sendbird-button--primary:hover {
1229
- background-color: var(--sendbird-light-primary-400);
1230
- border-color: var(--sendbird-light-primary-400);
1231
- }
1232
- .sendbird-theme--dark .sendbird-button--primary:hover {
1233
- background-color: var(--sendbird-dark-primary-300);
1234
- border-color: var(--sendbird-dark-primary-300);
1235
- }
1236
- .sendbird-theme--light .sendbird-button--primary:focus {
1237
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300);
1238
- border: 1px solid var(--sendbird-button-border-focus);
1239
- }
1240
- .sendbird-theme--dark .sendbird-button--primary:focus {
1241
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200);
1242
- border: 1px solid var(--sendbird-button-border-focus);
1243
- }
1244
- .sendbird-theme--light .sendbird-button--primary:active {
1245
- background-color: var(--sendbird-light-primary-500);
1246
- }
1247
- .sendbird-theme--dark .sendbird-button--primary:active {
1248
- background-color: var(--sendbird-dark-primary-400);
1249
- }
1250
- .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
1251
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-400);
1252
- }
1253
- .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
1254
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-300);
1255
- }
1256
- .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
1257
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-500);
1258
- }
1259
- .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
1260
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-400);
1214
+ .sendbird-channel-list__header {
1215
+ height: 64px;
1216
+ min-height: 64px;
1261
1217
  }
1262
1218
 
1263
- .sendbird-button--secondary {
1264
- background-color: transparent;
1219
+ .sendbird-channel-list__body {
1220
+ flex: 1 1 0;
1221
+ -ms-flex: 1;
1222
+ overflow-y: auto;
1223
+ overflow-x: hidden;
1265
1224
  }
1266
- .sendbird-theme--light .sendbird-button--secondary {
1267
- border: 1px solid var(--sendbird-light-onlight-03);
1225
+ .sendbird-channel-header {
1226
+ position: relative;
1227
+ height: 64px;
1228
+ min-height: 64px;
1229
+ width: 320px;
1230
+ padding: 8px 64px 8px 8px;
1231
+ box-sizing: border-box;
1268
1232
  }
1269
- .sendbird-theme--dark .sendbird-button--secondary {
1270
- border: 1px solid var(--sendbird-dark-ondark-03);
1233
+ .sendbird-theme--light .sendbird-channel-header {
1234
+ border-bottom: 1px solid var(--sendbird-light-onlight-04);
1235
+ background-color: var(--sendbird-light-background-50);
1271
1236
  }
1272
- .sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
1273
- color: var(--sendbird-light-onlight-01);
1237
+ .sendbird-theme--dark .sendbird-channel-header {
1238
+ border-bottom: 1px solid var(--sendbird-dark-ondark-04);
1239
+ background-color: var(--sendbird-dark-background-600);
1274
1240
  }
1275
- .sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
1276
- color: var(--sendbird-dark-ondark-01);
1241
+ .sendbird--mobile-mode .sendbird-channel-header {
1242
+ width: 100%;
1277
1243
  }
1278
- .sendbird-button--secondary:hover {
1279
- background-color: transparent;
1244
+ .sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
1245
+ cursor: pointer;
1280
1246
  }
1281
- .sendbird-theme--light .sendbird-button--secondary:hover {
1282
- border: 1px solid var(--sendbird-light-primary-300);
1247
+ .sendbird-channel-header .sendbird-channel-header__title {
1248
+ display: flex;
1249
+ flex-direction: row;
1250
+ width: 260px;
1251
+ height: 48px;
1252
+ border-radius: 4px;
1283
1253
  }
1284
- .sendbird-theme--dark .sendbird-button--secondary:hover {
1285
- border: 1px solid var(--sendbird-dark-primary-200);
1254
+ .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:hover {
1255
+ background: var(--sendbird-light-background-100);
1286
1256
  }
1287
- .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
1288
- color: var(--sendbird-light-primary-300);
1257
+ .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:hover {
1258
+ background: var(--sendbird-dark-background-500);
1289
1259
  }
1290
- .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
1291
- color: var(--sendbird-dark-primary-200);
1260
+ .sendbird-channel-header .sendbird-channel-header__title:focus {
1261
+ outline: none;
1292
1262
  }
1293
- .sendbird-button--secondary.sendbird-button__disabled {
1294
- cursor: not-allowed;
1295
- border: none;
1263
+ .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:focus {
1264
+ background: var(--sendbird-light-background-200);
1296
1265
  }
1297
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
1298
- background-color: var(--sendbird-light-background-200);
1266
+ .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:focus {
1267
+ background: var(--sendbird-dark-background-400);
1299
1268
  }
1300
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
1301
- background-color: var(--sendbird-dark-background-400);
1269
+ .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:active {
1270
+ border: solid 2px var(--sendbird-light-primary-300);
1302
1271
  }
1303
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
1304
- color: var(--sendbird-light-onlight-02);
1272
+ .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:active {
1273
+ border: solid 2px var(--sendbird-dark-primary-200);
1305
1274
  }
1306
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
1307
- color: var(--sendbird-dark-ondark-02);
1275
+ .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__left {
1276
+ width: 48px;
1277
+ padding: 8px;
1278
+ box-sizing: border-box;
1308
1279
  }
1309
- .sendbird-button--secondary.sendbird-button__disabled:hover {
1310
- border: none;
1280
+ .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right {
1281
+ margin-left: 4px;
1282
+ padding-top: 8px;
1311
1283
  }
1312
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
1313
- background-color: var(--sendbird-light-background-200);
1284
+ .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__name,
1285
+ .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__user-id {
1286
+ display: block;
1287
+ max-width: 200px;
1288
+ white-space: nowrap;
1289
+ overflow: hidden;
1290
+ text-overflow: ellipsis;
1314
1291
  }
1315
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
1316
- background-color: var(--sendbird-dark-background-400);
1292
+ .sendbird-channel-header .sendbird-channel-header__right-icon {
1293
+ position: absolute;
1294
+ right: 16px;
1295
+ top: 16px;
1317
1296
  }
1318
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
1319
- color: var(--sendbird-light-onlight-02);
1297
+ .sendbird-image-renderer {
1298
+ overflow: hidden;
1299
+ position: relative;
1320
1300
  }
1321
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
1322
- color: var(--sendbird-dark-ondark-02);
1301
+
1302
+ .sendbird-image-renderer__hidden-image-loader {
1303
+ display: none;
1323
1304
  }
1324
- .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
1325
- color: var(--sendbird-light-primary-300);
1305
+
1306
+ .sendbird-image-renderer,
1307
+ .sendbird-image-renderer__image {
1308
+ width: 320px;
1309
+ height: 180px;
1326
1310
  }
1327
- .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
1328
- color: var(--sendbird-dark-primary-200);
1311
+ .sendbird-avatar {
1312
+ display: inline-block;
1313
+ overflow: hidden;
1314
+ border-radius: 50%;
1315
+ position: relative;
1329
1316
  }
1330
- .sendbird-button--secondary:focus {
1331
- border: 1px solid transparent;
1332
- background-color: transparent;
1317
+ .sendbird-avatar:focus {
1318
+ outline: none;
1333
1319
  }
1334
- .sendbird-theme--light .sendbird-button--secondary:focus {
1335
- box-shadow: var(--sendbird-light-primary-300) 0px 0px 0px 2px;
1320
+ .sendbird-avatar .sendbird-avatar-img {
1321
+ position: absolute;
1322
+ top: 50%;
1323
+ left: 50%;
1324
+ transform: translate(-50%, -50%);
1325
+ display: flex;
1326
+ justify-content: center;
1327
+ align-items: center;
1336
1328
  }
1337
- .sendbird-theme--dark .sendbird-button--secondary:focus {
1338
- box-shadow: var(--sendbird-dark-primary-200) 0px 0px 0px 2px;
1329
+ .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
1330
+ background-color: var(--sendbird-light-background-300);
1339
1331
  }
1340
- .sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
1341
- color: var(--sendbird-light-onlight-01);
1332
+ .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img {
1333
+ background-color: var(--sendbird-dark-background-300);
1342
1334
  }
1343
- .sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
1344
- color: var(--sendbird-dark-ondark-01);
1335
+ .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:first-child {
1336
+ transform: translate(2%, -50%);
1345
1337
  }
1346
- .sendbird-button--secondary:active {
1347
- box-shadow: none;
1338
+ .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:last-child {
1339
+ transform: translate(-102%, -50%);
1348
1340
  }
1349
- .sendbird-theme--light .sendbird-button--secondary:active {
1350
- border: 1px solid var(--sendbird-light-primary-300);
1341
+ .sendbird-avatar .sendbird-avatar--inner__three-child--upper .sendbird-avatar-img:first-child {
1342
+ transform: translate(-50%, -102%);
1351
1343
  }
1352
- .sendbird-theme--dark .sendbird-button--secondary:active {
1353
- border: 1px solid var(--sendbird-dark-primary-200);
1344
+ .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:first-child {
1345
+ transform: translate(-77%, -23%) scale(0.5);
1354
1346
  }
1355
- .sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
1356
- color: var(--sendbird-light-primary-300);
1347
+ .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:last-child {
1348
+ transform: translate(-23%, -23%) scale(0.5);
1357
1349
  }
1358
- .sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
1359
- color: var(--sendbird-dark-primary-200);
1350
+ .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:first-child {
1351
+ transform: translate(-77%, -77%) scale(0.5);
1360
1352
  }
1361
-
1362
- .sendbird-theme--light .sendbird-button--danger {
1363
- border: 1px solid var(--sendbird-light-error-300);
1364
- background-color: var(--sendbird-light-error-300);
1353
+ .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(2) {
1354
+ transform: translate(-23%, -77%) scale(0.5);
1365
1355
  }
1366
- .sendbird-theme--dark .sendbird-button--danger {
1367
- border: 1px solid var(--sendbird-dark-error-200);
1368
- background-color: var(--sendbird-dark-error-200);
1356
+ .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(3) {
1357
+ transform: translate(-77%, -23%) scale(0.5);
1369
1358
  }
1370
- .sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
1371
- color: var(--sendbird-light-ondark-01);
1359
+ .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:last-child {
1360
+ transform: translate(-23%, -23%) scale(0.5);
1372
1361
  }
1373
- .sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
1374
- color: var(--sendbird-dark-onlight-01);
1362
+ .sendbird-avatar .sendbird-avatar-img--default {
1363
+ display: flex;
1364
+ justify-content: center;
1365
+ align-items: center;
1375
1366
  }
1376
- .sendbird-theme--light .sendbird-button--danger:hover {
1377
- background-color: var(--sendbird-light-error-400);
1378
- border-color: var(--sendbird-light-error-400);
1367
+ .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
1368
+ background-color: var(--sendbird-light-background-300);
1379
1369
  }
1380
- .sendbird-theme--dark .sendbird-button--danger:hover {
1381
- background-color: var(--sendbird-dark-error-400);
1382
- border-color: var(--sendbird-dark-error-400);
1370
+ .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
1371
+ background-color: var(--sendbird-dark-background-300);
1383
1372
  }
1384
- .sendbird-theme--light .sendbird-button--danger:focus {
1385
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-300);
1386
- border-color: var(--sendbird-button-border-focus);
1373
+ .sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
1374
+ margin: 0 40px;
1387
1375
  }
1388
- .sendbird-theme--dark .sendbird-button--danger:focus {
1389
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-300);
1390
- border-color: var(--sendbird-button-border-focus);
1376
+
1377
+ .sendbird-add-channel__rectangle-wrap {
1378
+ margin-top: 26px;
1391
1379
  }
1392
- .sendbird-button--danger:active {
1393
- box-shadow: none;
1380
+
1381
+ .sendbird-add-channel__rectangle-footer {
1382
+ text-align: right;
1383
+ margin-top: 32px;
1394
1384
  }
1395
- .sendbird-theme--light .sendbird-button--danger:active {
1396
- background-color: var(--sendbird-light-error-500);
1385
+
1386
+ .sendbird-add-channel__rectangle {
1387
+ width: 432px;
1388
+ height: 72px;
1389
+ border-radius: 4px;
1390
+ margin-bottom: 8px;
1391
+ padding: 25px 72px;
1392
+ position: relative;
1393
+ box-sizing: border-box;
1394
+ cursor: pointer;
1397
1395
  }
1398
- .sendbird-theme--dark .sendbird-button--danger:active {
1399
- background-color: var(--sendbird-dark-error-500);
1396
+ .sendbird--mobile-mode .sendbird-add-channel__rectangle {
1397
+ min-width: 288px;
1398
+ width: 100%;
1399
+ padding-right: 0;
1400
1400
  }
1401
- .sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
1402
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-400);
1401
+ .sendbird-theme--light .sendbird-add-channel__rectangle {
1402
+ border: 1px solid var(--sendbird-light-onlight-04);
1403
1403
  }
1404
- .sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
1405
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-400);
1404
+ .sendbird-theme--dark .sendbird-add-channel__rectangle {
1405
+ border: 1px solid var(--sendbird-dark-ondark-04);
1406
1406
  }
1407
- .sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
1408
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-500);
1407
+ .sendbird-add-channel__rectangle .sendbird-icon {
1408
+ position: absolute;
1409
+ left: 22px;
1410
+ top: 24px;
1409
1411
  }
1410
- .sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
1411
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-500);
1412
+ .sendbird-create-channel--content {
1413
+ width: 480px;
1414
+ max-height: 552px;
1412
1415
  }
1413
1416
 
1414
- .sendbird-button--disabled {
1415
- border: 1px solid transparent;
1416
- cursor: not-allowed;
1417
- }
1418
- .sendbird-theme--light .sendbird-button--disabled {
1419
- background-color: var(--sendbird-light-background-200);
1420
- color: var(--sendbird-light-ondark-01);
1417
+ .sendbird-create-channel--scroll {
1418
+ height: 360px;
1419
+ overflow-x: hidden;
1420
+ overflow-y: scroll;
1421
1421
  }
1422
- .sendbird-theme--dark .sendbird-button--disabled {
1423
- background-color: var(--sendbird-dark-background-400);
1424
- color: var(--sendbird-dark-onlight-01);
1422
+ .sendbird--mobile-mode .sendbird-create-channel--scroll {
1423
+ height: calc(100vh - 200px);
1424
+ height: calc(var(--sendbird-vh, 1vh) * 100 - 200px);
1425
1425
  }
1426
1426
  .sendbird-user-list-item {
1427
1427
  display: block;