@sendbird/uikit-react 3.6.6 → 3.6.7-rc-0

package/{consts-55e36248.js.map → consts-51e4746e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-55e36248.js","sources":["../src/utils/consts.ts"],"sourcesContent":["export const SCROLL_BUFFER = 10;\n\n// voice message record\nexport const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;\nexport const VOICE_RECORDER_DEFAULT_MIN = 1000; // 1 seconds\nexport const VOICE_RECORDER_DEFAULT_MAX = 600000; // 10 minutes\nexport const VOICE_RECORDER_AUDIO_BIT_RATE = 12000;\nexport const VOICE_RECORDER_AUDIO_SAMPLE_RATE = 11025;\nexport const BROWSER_SUPPORT_MIME_TYPE_LIST = ['audio/webm', 'audio/mp4', 'audio/mpeg', 'audio/ogg'];\n\n// voice message play\nexport const VOICE_PLAYER_PLAYBACK_BUFFER = 0.01;\nexport const VOICE_PLAYER_DURATION_MIN_SIZE = 1000;\n\n/**\n * Append Audio element to the root\n * because I can't get the Audio element in the useEffect unmount scope\n */\nexport const VOICE_PLAYER_ROOT_ID = 'sendbird-voice-player-provider-root';\nexport const VOICE_PLAYER_AUDIO_ID = 'sendbird-global-audio-player-id';\n\n// voice message file\nexport const VOICE_MESSAGE_FILE_NAME = 'Voice_message.mp3';\nexport const VOICE_MESSAGE_MIME_TYPE = 'audio/mp3;sbu_type=voice';\n\n// meta array\nexport const META_ARRAY_VOICE_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';\nexport const META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';\nexport const META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = 'voice/mp3';\n"],"names":["SCROLL_BUFFER","VOICE_RECORDER_CLICK_BUFFER_TIME","VOICE_RECORDER_DEFAULT_MIN","VOICE_RECORDER_DEFAULT_MAX","VOICE_RECORDER_AUDIO_BIT_RATE","VOICE_RECORDER_AUDIO_SAMPLE_RATE","BROWSER_SUPPORT_MIME_TYPE_LIST","VOICE_PLAYER_ROOT_ID","VOICE_PLAYER_AUDIO_ID","VOICE_MESSAGE_FILE_NAME","VOICE_MESSAGE_MIME_TYPE","META_ARRAY_VOICE_DURATION_KEY","META_ARRAY_MESSAGE_TYPE_KEY","META_ARRAY_MESSAGE_TYPE_VALUE__VOICE"],"mappings":"AAAO,MAAMA,aAAa,GAAG,GAAE;;AAE/B;AACO,MAAMC,gCAAgC,GAAG,IAAG;AACtCC,MAAAA,0BAA0B,GAAG,KAAK;AAClCC,MAAAA,0BAA0B,GAAG,OAAO;AAC1C,MAAMC,6BAA6B,GAAG,MAAK;AAC3C,MAAMC,gCAAgC,GAAG,MAAK;AAC9C,MAAMC,8BAA8B,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAC;;AAMpG;AACA;AACA;AACA;AACO,MAAMC,oBAAoB,GAAG,sCAAqC;AAClE,MAAMC,qBAAqB,GAAG,kCAAiC;;AAEtE;AACO,MAAMC,uBAAuB,GAAG,oBAAmB;AACnD,MAAMC,uBAAuB,GAAG,2BAA0B;;AAEjE;AACO,MAAMC,6BAA6B,GAAG,6BAA4B;AAClE,MAAMC,2BAA2B,GAAG,4BAA2B;AAC/D,MAAMC,oCAAoC,GAAG;;;;"}
+{"version":3,"file":"consts-51e4746e.js","sources":["../src/utils/consts.ts"],"sourcesContent":["export const SCROLL_BUFFER = 10;\n\n// voice message record\nexport const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;\nexport const VOICE_RECORDER_DEFAULT_MIN = 1000; // 1 seconds\nexport const VOICE_RECORDER_DEFAULT_MAX = 600000; // 10 minutes\nexport const VOICE_RECORDER_AUDIO_BIT_RATE = 12000;\nexport const VOICE_RECORDER_AUDIO_SAMPLE_RATE = 11025;\nexport const BROWSER_SUPPORT_MIME_TYPE_LIST = ['audio/webm', 'audio/mp4', 'audio/mpeg', 'audio/ogg'];\n\n// voice message play\nexport const VOICE_PLAYER_PLAYBACK_BUFFER = 0.01;\nexport const VOICE_PLAYER_DURATION_MIN_SIZE = 1000;\n\n/**\n * Append Audio element to the root\n * because I can't get the Audio element in the useEffect unmount scope\n */\nexport const VOICE_PLAYER_ROOT_ID = 'sendbird-voice-player-provider-root';\nexport const VOICE_PLAYER_AUDIO_ID = 'sendbird-global-audio-player-id';\n\n// voice message file\nexport const VOICE_MESSAGE_FILE_NAME = 'Voice_message.mp3';\nexport const VOICE_MESSAGE_MIME_TYPE = 'audio/mp3;sbu_type=voice';\n\n// meta array\nexport const META_ARRAY_VOICE_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';\nexport const META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';\nexport const META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = 'voice/mp3';\n\n// delivery receipt in feature list\nexport const DELIVERY_RECEIPT = 'delivery_receipt';\n"],"names":["SCROLL_BUFFER","VOICE_RECORDER_CLICK_BUFFER_TIME","VOICE_RECORDER_DEFAULT_MIN","VOICE_RECORDER_DEFAULT_MAX","VOICE_RECORDER_AUDIO_BIT_RATE","VOICE_RECORDER_AUDIO_SAMPLE_RATE","BROWSER_SUPPORT_MIME_TYPE_LIST","VOICE_PLAYER_ROOT_ID","VOICE_PLAYER_AUDIO_ID","VOICE_MESSAGE_FILE_NAME","VOICE_MESSAGE_MIME_TYPE","META_ARRAY_VOICE_DURATION_KEY","META_ARRAY_MESSAGE_TYPE_KEY","META_ARRAY_MESSAGE_TYPE_VALUE__VOICE","DELIVERY_RECEIPT"],"mappings":"AAAO,MAAMA,aAAa,GAAG,GAAE;;AAE/B;AACO,MAAMC,gCAAgC,GAAG,IAAG;AACtCC,MAAAA,0BAA0B,GAAG,KAAK;AAClCC,MAAAA,0BAA0B,GAAG,OAAO;AAC1C,MAAMC,6BAA6B,GAAG,MAAK;AAC3C,MAAMC,gCAAgC,GAAG,MAAK;AAC9C,MAAMC,8BAA8B,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAC;;AAMpG;AACA;AACA;AACA;AACO,MAAMC,oBAAoB,GAAG,sCAAqC;AAClE,MAAMC,qBAAqB,GAAG,kCAAiC;;AAEtE;AACO,MAAMC,uBAAuB,GAAG,oBAAmB;AACnD,MAAMC,uBAAuB,GAAG,2BAA0B;;AAEjE;AACO,MAAMC,6BAA6B,GAAG,6BAA4B;AAClE,MAAMC,2BAA2B,GAAG,4BAA2B;AAC/D,MAAMC,oCAAoC,GAAG,YAAW;;AAE/D;AACO,MAAMC,gBAAgB,GAAG;;;;"}

package/{consts-0726d733.js → consts-faca6bf9.js}

@@ -1,4 +1,4 @@
 const TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 export { TEXT_MESSAGE_BODY_CLASSNAME as T };
-//# sourceMappingURL=consts-0726d733.js.map
+//# sourceMappingURL=consts-faca6bf9.js.map

package/{consts-0726d733.js.map → consts-faca6bf9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-0726d733.js","sources":["../src/ui/TextMessageItemBody/consts.ts"],"sourcesContent":["export const TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';\n"],"names":["TEXT_MESSAGE_BODY_CLASSNAME"],"mappings":"AAAO,MAAMA,2BAA2B,GAAG;;;;"}
+{"version":3,"file":"consts-faca6bf9.js","sources":["../src/ui/TextMessageItemBody/consts.ts"],"sourcesContent":["export const TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';\n"],"names":["TEXT_MESSAGE_BODY_CLASSNAME"],"mappings":"AAAO,MAAMA,2BAA2B,GAAG;;;;"}

package/{context-ebecf7b8.js → context-5973d35e.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { n as noop } from './utils-cae251db.js';
+import { n as noop } from './utils-9f0ab1b0.js';
 
 const Context = /*#__PURE__*/React__default.createContext({
   opened: '',
@@ -10,4 +10,4 @@ const Consumer = Context.Consumer;
 const Provider = Context.Provider;
 
 export { Consumer as C, Provider as P };
-//# sourceMappingURL=context-ebecf7b8.js.map
+//# sourceMappingURL=context-5973d35e.js.map

package/{context-ebecf7b8.js.map → context-5973d35e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-ebecf7b8.js","sources":["../src/ui/Accordion/context.ts"],"sourcesContent":["import React from 'react';\n\nimport { noop } from '../../utils/utils';\n\ninterface ContextValue {\n  setOpened(accordion: string): void;\n  opened: string;\n}\n\nconst Context = React.createContext<ContextValue>({\n  opened: '', // mock default value\n  setOpened: noop,\n});\n\nexport const Consumer = Context.Consumer;\nexport const Provider = Context.Provider;\n"],"names":["Context","React","createContext","opened","setOpened","noop","Consumer","Provider"],"mappings":";;;AASA,MAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAa,CAAe;AAChDC,EAAAA,MAAM,EAAE,EAAE;AAAE;AACZC,EAAAA,SAAS,EAAEC,IAAAA;AACb,CAAC,CAAC,CAAA;AAEWC,MAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAQ;AAC3BC,MAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}
+{"version":3,"file":"context-5973d35e.js","sources":["../src/ui/Accordion/context.ts"],"sourcesContent":["import React from 'react';\n\nimport { noop } from '../../utils/utils';\n\ninterface ContextValue {\n  setOpened(accordion: string): void;\n  opened: string;\n}\n\nconst Context = React.createContext<ContextValue>({\n  opened: '', // mock default value\n  setOpened: noop,\n});\n\nexport const Consumer = Context.Consumer;\nexport const Provider = Context.Provider;\n"],"names":["Context","React","createContext","opened","setOpened","noop","Consumer","Provider"],"mappings":";;;AASA,MAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAa,CAAe;AAChDC,EAAAA,MAAM,EAAE,EAAE;AAAE;AACZC,EAAAA,SAAS,EAAEC,IAAAA;AACb,CAAC,CAAC,CAAA;AAEWC,MAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAQ;AAC3BC,MAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}

package/dist/index.css

@@ -70,132 +70,99 @@
   color: inherit;
   word-break: break-all;
 }
-.sendbird-open-channel-preview {
+.sendbird-open-channel-list,
+.sendbird-open-channel-list-ui {
   position: relative;
   display: inline-flex;
-  flex-direction: row;
-  width: 264px;
-  height: 58px;
-  min-width: 264px;
-  min-height: 58px;
+  flex-direction: column;
+  width: 256px;
+  min-width: 256px;
+  height: 100%;
   box-sizing: border-box;
 }
-.sendbird--mobile-mode .sendbird-open-channel-preview {
+.sendbird--mobile-mode .sendbird-open-channel-list,
+.sendbird--mobile-mode .sendbird-open-channel-list-ui {
   width: 100%;
 }
-.sendbird-theme--light .sendbird-open-channel-preview {
+.sendbird-theme--light .sendbird-open-channel-list,
+.sendbird-theme--light .sendbird-open-channel-list-ui {
+  border-right: solid 1px var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-open-channel-list,
+.sendbird-theme--dark .sendbird-open-channel-list-ui {
+  border-right: solid 1px var(--sendbird-dark-ondark-04);
+}
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+  box-sizing: border-box;
+}
+.sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
   background-color: var(--sendbird-light-background-50);
   border-bottom: solid 1px var(--sendbird-light-onlight-04);
 }
-.sendbird-theme--dark .sendbird-open-channel-preview {
+.sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
+.sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
   background-color: var(--sendbird-dark-background-600);
   border-bottom: solid 1px var(--sendbird-dark-ondark-04);
 }
-.sendbird-theme--light .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-theme--light .sendbird-open-channel-preview.selected {
-  background-color: var(--sendbird-light-primary-100);
-  border-left: solid 4px var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview.selected {
-  background-color: var(--sendbird-dark-primary-300);
-  border-left: solid 4px var(--sendbird-dark-primary-200);
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
   position: relative;
-  margin-top: 8px;
-  margin-left: 16px;
+  margin-left: 24px;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 42px;
-  height: 42px;
   box-sizing: border-box;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar,
-.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar--default {
-  position: relative;
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
+  position: absolute;
+  top: 16px;
+  right: 56px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context {
-  position: relative;
-  margin-top: 8px;
-  margin-left: 16px;
-  display: inline-flex;
-  flex-direction: column;
-  width: calc(100% - 100px);
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
-  position: relative;
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
+  position: absolute;
+  top: 16px;
+  right: 16px;
   display: inline-flex;
-  flex-direction: row;
   align-items: center;
-  width: 100%;
-  height: 16px;
-  box-sizing: border-box;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  justify-content: center;
   box-sizing: border-box;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
-  max-width: calc(100% - 20px);
-}
-.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
-  overflow-y: hidden;
-}
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
-  position: relative;
-  margin-left: 4px;
-  display: inline-flex;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
+.sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
+.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
   position: relative;
-  margin-top: 8px;
   display: inline-flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
   width: 100%;
-  height: 14px;
+  height: calc(100% - 64px);
   box-sizing: border-box;
+  overflow-y: scroll;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__icon {
+
+.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   position: relative;
+  min-height: 62px;
   display: inline-flex;
-  width: 14px;
-  height: 14px;
-  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
-  position: relative;
-  margin-left: 4px;
-  display: inline-flex;
-  width: 160px;
-  max-width: 160px;
-  height: 12px;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
+.sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+  background-color: var(--sendbird-light-background-100);
 }
-.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
-  overflow-y: hidden;
+.sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+  background-color: var(--sendbird-dark-background-500);
 }
 .sendbird-create-open-channel-ui {
   position: relative;
@@ -252,99 +219,132 @@
   display: inline-flex;
   flex-direction: row;
 }
-.sendbird-open-channel-list,
-.sendbird-open-channel-list-ui {
+.sendbird-open-channel-preview {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
-  width: 256px;
-  min-width: 256px;
-  height: 100%;
+  flex-direction: row;
+  width: 264px;
+  height: 58px;
+  min-width: 264px;
+  min-height: 58px;
   box-sizing: border-box;
 }
-.sendbird--mobile-mode .sendbird-open-channel-list,
-.sendbird--mobile-mode .sendbird-open-channel-list-ui {
-  width: 100%;
-}
-.sendbird-theme--light .sendbird-open-channel-list,
-.sendbird-theme--light .sendbird-open-channel-list-ui {
-  border-right: solid 1px var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-open-channel-list,
-.sendbird-theme--dark .sendbird-open-channel-list-ui {
-  border-right: solid 1px var(--sendbird-dark-ondark-04);
-}
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
+.sendbird--mobile-mode .sendbird-open-channel-preview {
   width: 100%;
-  height: 64px;
-  box-sizing: border-box;
 }
-.sendbird-theme--light .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-theme--light .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+.sendbird-theme--light .sendbird-open-channel-preview {
   background-color: var(--sendbird-light-background-50);
   border-bottom: solid 1px var(--sendbird-light-onlight-04);
 }
-.sendbird-theme--dark .sendbird-open-channel-list .sendbird-open-channel-list-ui__header,
-.sendbird-theme--dark .sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header {
+.sendbird-theme--dark .sendbird-open-channel-preview {
   background-color: var(--sendbird-dark-background-600);
   border-bottom: solid 1px var(--sendbird-dark-ondark-04);
 }
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__title {
+.sendbird-theme--light .sendbird-open-channel-preview:hover {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-open-channel-preview:hover {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-theme--light .sendbird-open-channel-preview.selected {
+  background-color: var(--sendbird-light-primary-100);
+  border-left: solid 4px var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-open-channel-preview.selected {
+  background-color: var(--sendbird-dark-primary-300);
+  border-left: solid 4px var(--sendbird-dark-primary-200);
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image {
   position: relative;
-  margin-left: 24px;
+  margin-top: 8px;
+  margin-left: 16px;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
   box-sizing: border-box;
 }
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-refresh {
-  position: absolute;
-  top: 16px;
-  right: 56px;
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar,
+.sendbird-open-channel-preview .sendbird-open-channel-preview__cover-image .sendbird-open-channel-preview__cover-image__avatar--default {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
 }
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__header .sendbird-open-channel-list-ui__header__button-create-channel {
-  position: absolute;
-  top: 16px;
-  right: 16px;
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context {
+  position: relative;
+  margin-top: 8px;
+  margin-left: 16px;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  width: calc(100% - 100px);
   box-sizing: border-box;
 }
-.sendbird-open-channel-list .sendbird-open-channel-list-ui__channel-list,
-.sendbird-open-channel-list-ui .sendbird-open-channel-list-ui__channel-list {
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   width: 100%;
-  height: calc(100% - 64px);
+  height: 16px;
   box-sizing: border-box;
-  overflow-y: scroll;
 }
-
-.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
   position: relative;
-  min-height: 62px;
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
+  max-width: calc(100% - 20px);
+}
+.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
+  overflow-y: hidden;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
+  position: relative;
+  margin-left: 4px;
+  display: inline-flex;
+}
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
+  position: relative;
+  margin-top: 8px;
   display: inline-flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  width: 100%;
+  height: 14px;
+  box-sizing: border-box;
 }
-.sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
-  background-color: var(--sendbird-light-background-100);
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__icon {
+  position: relative;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
 }
-.sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
-  background-color: var(--sendbird-dark-background-500);
+.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
+  position: relative;
+  margin-left: 4px;
+  display: inline-flex;
+  width: 160px;
+  max-width: 160px;
+  height: 12px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
+  overflow-y: hidden;
 }
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {