@sendbird/uikit-react 3.3.4-rc.0 → 3.3.4

package/cjs/{utils-df9e3c35.js → utils-4cce255c.js}

@@ -29,4 +29,4 @@ var copyToClipboard = function (text) {
 };
 
 exports.copyToClipboard = copyToClipboard;
-//# sourceMappingURL=utils-df9e3c35.js.map
+//# sourceMappingURL=utils-4cce255c.js.map

package/cjs/{utils-df9e3c35.js.map → utils-4cce255c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-df9e3c35.js","sources":["../../src/ui/OpenchannelUserMessage/utils.ts"],"sourcesContent":["export const copyToClipboard = (text: string): boolean => {\n  // @ts-ignore: Unreachable code error\n  if (window.clipboardData && window.clipboardData.setData) {\n    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.\n    // @ts-ignore: Unreachable code error\n    return window.clipboardData.setData('Text', text);\n  }\n  if (document.queryCommandSupported && document.queryCommandSupported('copy')) {\n    const textarea = document.createElement('textarea');\n    textarea.textContent = text;\n    textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in Microsoft Edge.\n    document.body.appendChild(textarea);\n    textarea.select();\n    try {\n      return document.execCommand('copy'); // Security exception may be thrown by some browsers.\n    } catch (ex) {\n      return false;\n    } finally {\n      document.body.removeChild(textarea);\n    }\n  }\n  return false;\n};\n\nexport default { copyToClipboard };\n"],"names":["copyToClipboard","text","window","clipboardData","setData","document","queryCommandSupported","textarea","createElement","textContent","style","position","body","appendChild","select","execCommand","ex","removeChild"],"mappings":";;AAAaA,IAAAA,eAAe,GAAG,UAACC,IAAD,EAAa;AAC1C;EACA,IAAIC,MAAM,CAACC,aAAP,IAAwBD,MAAM,CAACC,aAAP,CAAqBC,OAAjD,EAA0D;AACxD;AACA;IACA,OAAOF,MAAM,CAACC,aAAP,CAAqBC,OAArB,CAA6B,MAA7B,EAAqCH,IAArC,CAAP,CAAA;AACD,GAAA;;EACD,IAAII,QAAQ,CAACC,qBAAT,IAAkCD,QAAQ,CAACC,qBAAT,CAA+B,MAA/B,CAAtC,EAA8E;AAC5E,IAAA,IAAMC,QAAQ,GAAGF,QAAQ,CAACG,aAAT,CAAuB,UAAvB,CAAjB,CAAA;IACAD,QAAQ,CAACE,WAAT,GAAuBR,IAAvB,CAAA;AACAM,IAAAA,QAAQ,CAACG,KAAT,CAAeC,QAAf,GAA0B,OAA1B,CAH4E;;AAI5EN,IAAAA,QAAQ,CAACO,IAAT,CAAcC,WAAd,CAA0BN,QAA1B,CAAA,CAAA;AACAA,IAAAA,QAAQ,CAACO,MAAT,EAAA,CAAA;;IACA,IAAI;AACF,MAAA,OAAOT,QAAQ,CAACU,WAAT,CAAqB,MAArB,CAAP,CADE;KAAJ,CAEE,OAAOC,EAAP,EAAW;AACX,MAAA,OAAO,KAAP,CAAA;AACD,KAJD,SAIU;AACRX,MAAAA,QAAQ,CAACO,IAAT,CAAcK,WAAd,CAA0BV,QAA1B,CAAA,CAAA;AACD,KAAA;AACF,GAAA;;AACD,EAAA,OAAO,KAAP,CAAA;AACD;;;;"}
+{"version":3,"file":"utils-4cce255c.js","sources":["../../src/ui/OpenchannelUserMessage/utils.ts"],"sourcesContent":["export const copyToClipboard = (text: string): boolean => {\n  // @ts-ignore: Unreachable code error\n  if (window.clipboardData && window.clipboardData.setData) {\n    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.\n    // @ts-ignore: Unreachable code error\n    return window.clipboardData.setData('Text', text);\n  }\n  if (document.queryCommandSupported && document.queryCommandSupported('copy')) {\n    const textarea = document.createElement('textarea');\n    textarea.textContent = text;\n    textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in Microsoft Edge.\n    document.body.appendChild(textarea);\n    textarea.select();\n    try {\n      return document.execCommand('copy'); // Security exception may be thrown by some browsers.\n    } catch (ex) {\n      return false;\n    } finally {\n      document.body.removeChild(textarea);\n    }\n  }\n  return false;\n};\n\nexport default { copyToClipboard };\n"],"names":["copyToClipboard","text","window","clipboardData","setData","document","queryCommandSupported","textarea","createElement","textContent","style","position","body","appendChild","select","execCommand","ex","removeChild"],"mappings":";;AAAaA,IAAAA,eAAe,GAAG,UAACC,IAAD,EAAa;AAC1C;EACA,IAAIC,MAAM,CAACC,aAAP,IAAwBD,MAAM,CAACC,aAAP,CAAqBC,OAAjD,EAA0D;AACxD;AACA;IACA,OAAOF,MAAM,CAACC,aAAP,CAAqBC,OAArB,CAA6B,MAA7B,EAAqCH,IAArC,CAAP,CAAA;AACD,GAAA;;EACD,IAAII,QAAQ,CAACC,qBAAT,IAAkCD,QAAQ,CAACC,qBAAT,CAA+B,MAA/B,CAAtC,EAA8E;AAC5E,IAAA,IAAMC,QAAQ,GAAGF,QAAQ,CAACG,aAAT,CAAuB,UAAvB,CAAjB,CAAA;IACAD,QAAQ,CAACE,WAAT,GAAuBR,IAAvB,CAAA;AACAM,IAAAA,QAAQ,CAACG,KAAT,CAAeC,QAAf,GAA0B,OAA1B,CAH4E;;AAI5EN,IAAAA,QAAQ,CAACO,IAAT,CAAcC,WAAd,CAA0BN,QAA1B,CAAA,CAAA;AACAA,IAAAA,QAAQ,CAACO,MAAT,EAAA,CAAA;;IACA,IAAI;AACF,MAAA,OAAOT,QAAQ,CAACU,WAAT,CAAqB,MAArB,CAAP,CADE;KAAJ,CAEE,OAAOC,EAAP,EAAW;AACX,MAAA,OAAO,KAAP,CAAA;AACD,KAJD,SAIU;AACRX,MAAAA,QAAQ,CAACO,IAAT,CAAcK,WAAd,CAA0BV,QAA1B,CAAA,CAAA;AACD,KAAA;AACF,GAAA;;AACD,EAAA,OAAO,KAAP,CAAA;AACD;;;;"}

package/cjs/{utils-0c605067.js → utils-7818d87a.js}

@@ -3,4 +3,4 @@
 const noop = () => {};
 
 exports.noop = noop;
-//# sourceMappingURL=utils-0c605067.js.map
+//# sourceMappingURL=utils-7818d87a.js.map

package/cjs/{utils-0c605067.js.map → utils-7818d87a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-0c605067.js","sources":["../../src/utils/utils.js"],"sourcesContent":["export const noop = () => {};\n\nexport const getSenderName = (message) => (\n  message.sender && (\n    message.sender.friendName\n    || message.sender.nickname\n    || message.sender.userId\n  )\n);\n\nexport const getSenderProfileUrl = (message) => message.sender && message.sender.profileUrl;\n\nexport default {\n  getSenderName,\n  getSenderProfileUrl,\n};\n"],"names":["noop"],"mappings":";;AAAaA,MAAAA,IAAI,GAAG,MAAM;;;;"}
+{"version":3,"file":"utils-7818d87a.js","sources":["../../src/utils/utils.js"],"sourcesContent":["export const noop = () => {};\n\nexport const getSenderName = (message) => (\n  message.sender && (\n    message.sender.friendName\n    || message.sender.nickname\n    || message.sender.userId\n  )\n);\n\nexport const getSenderProfileUrl = (message) => message.sender && message.sender.profileUrl;\n\nexport default {\n  getSenderName,\n  getSenderProfileUrl,\n};\n"],"names":["noop"],"mappings":";;AAAaA,MAAAA,IAAI,GAAG,MAAM;;;;"}

package/cjs/{utils-54b34144.js → utils-eaf70168.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ui_Label = require('./index-8beae959.js');
+var ui_Label = require('./index-f058f9f9.js');
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
   var _a;
@@ -29,4 +29,4 @@ var getChannelTitle = function (channel, currentUserId, stringSet) {
 };
 
 exports.getChannelTitle = getChannelTitle;
-//# sourceMappingURL=utils-54b34144.js.map
+//# sourceMappingURL=utils-eaf70168.js.map

package/cjs/{utils-54b34144.js.map → utils-eaf70168.js.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-54b34144.js","sources":["../../src/smart-components/Channel/components/ChannelHeader/utils.ts"],"sourcesContent":["import type { GroupChannel } from '@sendbird/chat/groupChannel';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel?.name && !channel?.members) {\n    return LABEL_STRING_SET.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return LABEL_STRING_SET.NO_MEMBERS;\n  }\n\n  return channel?.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || LABEL_STRING_SET.NO_NAME))\n    .join(', ');\n};\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","_a","length","NO_MEMBERS","filter","userId","map","nickname","NO_NAME","join"],"mappings":";;;;AAGO,IAAMA,eAAe,GAAG,UAC7BC,OAD6B,EAE7BC,aAF6B,EAG7BC,SAH6B,EAGS;;;AAEtC,EAAA,IAAMC,gBAAgB,GAAgCD,SAAS,IAAIE,uBAAnE,CAAA;;AACA,EAAA,IAAI,EAACJ,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEK,IAAV,CAAA,IAAkB,EAACL,OAAO,KAAP,IAAA,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEM,OAAV,CAAtB,EAAyC;IACvC,OAAOH,gBAAgB,CAACI,QAAxB,CAAA;AACD,GAAA;;EACD,IAAI,CAAAP,OAAO,KAAP,IAAA,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEK,IAAT,KAAiBL,OAAO,CAACK,IAAR,KAAiB,eAAtC,EAAuD;IACrD,OAAOL,OAAO,CAACK,IAAf,CAAA;AACD,GAAA;;AAED,EAAA,IAAI,CAAA,CAAAG,EAAA,GAAAR,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAEM,OAAT,MAAgB,IAAhB,IAAgBE,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgBA,EAAA,CAAEC,MAAlB,MAA6B,CAAjC,EAAoC;IAClC,OAAON,gBAAgB,CAACO,UAAxB,CAAA;AACD,GAAA;;EAED,OAAOV,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEM,OAAT,CACJK,MADI,CACG,UAACH,EAAD,EAAW;AAAR,IAAA,IAAAI,MAAM,GAAAJ,EAAA,CAAAI,MAAN,CAAA;IAAa,OAAAA,MAAM,KAAKX,aAAX,CAAA;AAAwB,GAD3C,CAEJY,CAAAA,GAFI,CAEA,UAACL,EAAD,EAAa;AAAV,IAAA,IAAAM,QAAQ,GAAAN,EAAA,CAAAM,QAAR,CAAA;AAAe,IAAA,OAACA,QAAQ,IAAIX,gBAAgB,CAACY,OAA9B,CAAA;AAAsC,GAFxD,CAGJC,CAAAA,IAHI,CAGC,IAHD,CAAP,CAAA;AAID;;;;"}
+{"version":3,"file":"utils-eaf70168.js","sources":["../../src/smart-components/Channel/components/ChannelHeader/utils.ts"],"sourcesContent":["import type { GroupChannel } from '@sendbird/chat/groupChannel';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel?.name && !channel?.members) {\n    return LABEL_STRING_SET.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return LABEL_STRING_SET.NO_MEMBERS;\n  }\n\n  return channel?.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || LABEL_STRING_SET.NO_NAME))\n    .join(', ');\n};\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","_a","length","NO_MEMBERS","filter","userId","map","nickname","NO_NAME","join"],"mappings":";;;;AAGO,IAAMA,eAAe,GAAG,UAC7BC,OAD6B,EAE7BC,aAF6B,EAG7BC,SAH6B,EAGS;;;AAEtC,EAAA,IAAMC,gBAAgB,GAAgCD,SAAS,IAAIE,uBAAnE,CAAA;;AACA,EAAA,IAAI,EAACJ,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEK,IAAV,CAAA,IAAkB,EAACL,OAAO,KAAP,IAAA,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEM,OAAV,CAAtB,EAAyC;IACvC,OAAOH,gBAAgB,CAACI,QAAxB,CAAA;AACD,GAAA;;EACD,IAAI,CAAAP,OAAO,KAAP,IAAA,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEK,IAAT,KAAiBL,OAAO,CAACK,IAAR,KAAiB,eAAtC,EAAuD;IACrD,OAAOL,OAAO,CAACK,IAAf,CAAA;AACD,GAAA;;AAED,EAAA,IAAI,CAAA,CAAAG,EAAA,GAAAR,OAAO,KAAA,IAAP,IAAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAAA,OAAO,CAAEM,OAAT,MAAgB,IAAhB,IAAgBE,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgBA,EAAA,CAAEC,MAAlB,MAA6B,CAAjC,EAAoC;IAClC,OAAON,gBAAgB,CAACO,UAAxB,CAAA;AACD,GAAA;;EAED,OAAOV,OAAO,KAAP,IAAA,IAAAA,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,OAAO,CAAEM,OAAT,CACJK,MADI,CACG,UAACH,EAAD,EAAW;AAAR,IAAA,IAAAI,MAAM,GAAAJ,EAAA,CAAAI,MAAN,CAAA;IAAa,OAAAA,MAAM,KAAKX,aAAX,CAAA;AAAwB,GAD3C,CAEJY,CAAAA,GAFI,CAEA,UAACL,EAAD,EAAa;AAAV,IAAA,IAAAM,QAAQ,GAAAN,EAAA,CAAAM,QAAR,CAAA;AAAe,IAAA,OAACA,QAAQ,IAAIX,gBAAgB,CAACY,OAA9B,CAAA;AAAsC,GAFxD,CAGJC,CAAAA,IAHI,CAGC,IAHD,CAAP,CAAA;AAID;;;;"}

package/cjs/{uuid-e4633253.js → uuid-bea1faad.js}

@@ -16,4 +16,4 @@ var uuidv4 = function () {
 };
 
 exports.uuidv4 = uuidv4;
-//# sourceMappingURL=uuid-e4633253.js.map
+//# sourceMappingURL=uuid-bea1faad.js.map

package/cjs/{uuid-e4633253.js.map → uuid-bea1faad.js.map}

@@ -1 +1 @@
-{"version":3,"file":"uuid-e4633253.js","sources":["../../src/utils/uuid.ts"],"sourcesContent":["/* eslint-disable no-bitwise */\n/* eslint-disable eqeqeq */\n/* eslint-disable no-mixed-operators */\n// https://stackoverflow.com/a/2117523\n// used mainly for dom key generation\nexport const uuidv4 = (): string => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n  const r = Math.random() * 16 | 0;\n  const v = c === 'x' ? r : (r & 0x3 | 0x8);\n  return v.toString(16);\n});\n\nexport default uuidv4;\n"],"names":["uuidv4","replace","c","r","Math","random","v","toString"],"mappings":";;AAAA;;AACA;;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,YAAc;AAAA,EAAA,OAAA,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAACC,CAAD,EAAE;IAC5F,IAAMC,CAAC,GAAGC,IAAI,CAACC,MAAL,EAAgB,GAAA,EAAhB,GAAqB,CAA/B,CAAA;AACA,IAAA,IAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAJ,GAAU,GAArC,CAAA;AACA,IAAA,OAAOG,CAAC,CAACC,QAAF,CAAW,EAAX,CAAP,CAAA;AACD,GAJmC,CAAA,CAAA;AAIlC;;;;"}
+{"version":3,"file":"uuid-bea1faad.js","sources":["../../src/utils/uuid.ts"],"sourcesContent":["/* eslint-disable no-bitwise */\n/* eslint-disable eqeqeq */\n/* eslint-disable no-mixed-operators */\n// https://stackoverflow.com/a/2117523\n// used mainly for dom key generation\nexport const uuidv4 = (): string => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n  const r = Math.random() * 16 | 0;\n  const v = c === 'x' ? r : (r & 0x3 | 0x8);\n  return v.toString(16);\n});\n\nexport default uuidv4;\n"],"names":["uuidv4","replace","c","r","Math","random","v","toString"],"mappings":";;AAAA;;AACA;;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,YAAc;AAAA,EAAA,OAAA,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAACC,CAAD,EAAE;IAC5F,IAAMC,CAAC,GAAGC,IAAI,CAACC,MAAL,EAAgB,GAAA,EAAhB,GAAqB,CAA/B,CAAA;AACA,IAAA,IAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAJ,GAAU,GAArC,CAAA;AACA,IAAA,OAAOG,CAAC,CAACC,QAAF,CAAW,EAAX,CAAP,CAAA;AACD,GAJmC,CAAA,CAAA;AAIlC;;;;"}

package/cjs/withSendbird.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-9d8b114a.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-cf1a9aed.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{color-391a0b09.js → color-bf0c20dc.js}

@@ -40,4 +40,4 @@ var changeColorToClassName = function (color) {
 };
 
 export { Colors as C, changeColorToClassName as c };
-//# sourceMappingURL=color-391a0b09.js.map
+//# sourceMappingURL=color-bf0c20dc.js.map

package/{color-391a0b09.js.map → color-bf0c20dc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"color-391a0b09.js","sources":["../src/utils/color.ts"],"sourcesContent":["import './color.scss';\n\nexport enum Colors {\n  ONBACKGROUND_1 = 'ONBACKGROUND_1',\n  ONBACKGROUND_2 = 'ONBACKGROUND_2',\n  ONBACKGROUND_3 = 'ONBACKGROUND_3',\n  ONBACKGROUND_4 = 'ONBACKGROUND_4',\n  ONCONTENT_1 = 'ONCONTENT_1',\n  ONCONTENT_2 = 'ONCONTENT_2',\n  PRIMARY = 'PRIMARY',\n  ERROR = 'ERROR',\n}\n\nexport const changeColorToClassName = (color: Colors): string => {\n  switch (color) {\n    case Colors.ONBACKGROUND_1: return 'sendbird-color--onbackground-1';\n    case Colors.ONBACKGROUND_2: return 'sendbird-color--onbackground-2';\n    case Colors.ONBACKGROUND_3: return 'sendbird-color--onbackground-3';\n    case Colors.ONBACKGROUND_4: return 'sendbird-color--onbackground-4';\n    case Colors.ONCONTENT_1: return 'sendbird-color--oncontent-1';\n    case Colors.PRIMARY: return 'sendbird-color--primary';\n    case Colors.ERROR: return 'sendbird-color--error';\n    default: return null;\n  }\n};\n"],"names":["Colors","changeColorToClassName","color","ONBACKGROUND_1","ONBACKGROUND_2","ONBACKGROUND_3","ONBACKGROUND_4","ONCONTENT_1","PRIMARY","ERROR"],"mappings":"IAEYA,OAAZ;;AAAA,CAAA,UAAYA,MAAZ,EAAkB;AAChBA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AACD,CATD,EAAYA,MAAM,KAANA,MAAM,GASjB,EATiB,CAAlB,CAAA,CAAA;;AAWaC,IAAAA,sBAAsB,GAAG,UAACC,KAAD,EAAc;AAClD,EAAA,QAAQA,KAAR;IACE,KAAKF,MAAM,CAACG,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKH,MAAM,CAACI,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKJ,MAAM,CAACK,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKL,MAAM,CAACM,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKN,MAAM,CAACO,WAAZ;AAAyB,MAAA,OAAO,6BAAP,CAAA;;IACzB,KAAKP,MAAM,CAACQ,OAAZ;AAAqB,MAAA,OAAO,yBAAP,CAAA;;IACrB,KAAKR,MAAM,CAACS,KAAZ;AAAmB,MAAA,OAAO,uBAAP,CAAA;;AACnB,IAAA;AAAS,MAAA,OAAO,IAAP,CAAA;AARX,GAAA;AAUD;;;;"}
+{"version":3,"file":"color-bf0c20dc.js","sources":["../src/utils/color.ts"],"sourcesContent":["import './color.scss';\n\nexport enum Colors {\n  ONBACKGROUND_1 = 'ONBACKGROUND_1',\n  ONBACKGROUND_2 = 'ONBACKGROUND_2',\n  ONBACKGROUND_3 = 'ONBACKGROUND_3',\n  ONBACKGROUND_4 = 'ONBACKGROUND_4',\n  ONCONTENT_1 = 'ONCONTENT_1',\n  ONCONTENT_2 = 'ONCONTENT_2',\n  PRIMARY = 'PRIMARY',\n  ERROR = 'ERROR',\n}\n\nexport const changeColorToClassName = (color: Colors): string => {\n  switch (color) {\n    case Colors.ONBACKGROUND_1: return 'sendbird-color--onbackground-1';\n    case Colors.ONBACKGROUND_2: return 'sendbird-color--onbackground-2';\n    case Colors.ONBACKGROUND_3: return 'sendbird-color--onbackground-3';\n    case Colors.ONBACKGROUND_4: return 'sendbird-color--onbackground-4';\n    case Colors.ONCONTENT_1: return 'sendbird-color--oncontent-1';\n    case Colors.PRIMARY: return 'sendbird-color--primary';\n    case Colors.ERROR: return 'sendbird-color--error';\n    default: return null;\n  }\n};\n"],"names":["Colors","changeColorToClassName","color","ONBACKGROUND_1","ONBACKGROUND_2","ONBACKGROUND_3","ONBACKGROUND_4","ONCONTENT_1","PRIMARY","ERROR"],"mappings":"IAEYA,OAAZ;;AAAA,CAAA,UAAYA,MAAZ,EAAkB;AAChBA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;AACAA,EAAAA,MAAA,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AACD,CATD,EAAYA,MAAM,KAANA,MAAM,GASjB,EATiB,CAAlB,CAAA,CAAA;;AAWaC,IAAAA,sBAAsB,GAAG,UAACC,KAAD,EAAc;AAClD,EAAA,QAAQA,KAAR;IACE,KAAKF,MAAM,CAACG,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKH,MAAM,CAACI,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKJ,MAAM,CAACK,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKL,MAAM,CAACM,cAAZ;AAA4B,MAAA,OAAO,gCAAP,CAAA;;IAC5B,KAAKN,MAAM,CAACO,WAAZ;AAAyB,MAAA,OAAO,6BAAP,CAAA;;IACzB,KAAKP,MAAM,CAACQ,OAAZ;AAAqB,MAAA,OAAO,yBAAP,CAAA;;IACrB,KAAKR,MAAM,CAACS,KAAZ;AAAmB,MAAA,OAAO,uBAAP,CAAA;;AACnB,IAAA;AAAS,MAAA,OAAO,IAAP,CAAA;AARX,GAAA;AAUD;;;;"}

package/{compareIds-b5226388.js → compareIds-8f9595bc.js}

@@ -13,4 +13,4 @@ function compareIds (a, b) {
 }
 
 export { compareIds as c };
-//# sourceMappingURL=compareIds-b5226388.js.map
+//# sourceMappingURL=compareIds-8f9595bc.js.map

package/{compareIds-b5226388.js.map → compareIds-8f9595bc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"compareIds-b5226388.js","sources":["../src/utils/compareIds.js"],"sourcesContent":["const isEmpty = (val) => (val === null || val === undefined);\n\n// Some Ids return string and number inconsistently\n// only use to comapre IDs\nexport default function (a, b) {\n  if (isEmpty(a) || isEmpty(b)) {\n    return false;\n  }\n  const aString = a.toString();\n  const bString = b.toString();\n  return aString === bString;\n}\n"],"names":["isEmpty","val","undefined","a","b","aString","toString","bString"],"mappings":"AAAA,MAAMA,OAAO,GAAIC,GAAD,IAAUA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKC,SAAlD;AAGA;;;AACe,mBAAUC,EAAAA,CAAV,EAAaC,CAAb,EAAgB;EAC7B,IAAIJ,OAAO,CAACG,CAAD,CAAP,IAAcH,OAAO,CAACI,CAAD,CAAzB,EAA8B;AAC5B,IAAA,OAAO,KAAP,CAAA;AACD,GAAA;;AACD,EAAA,MAAMC,OAAO,GAAGF,CAAC,CAACG,QAAF,EAAhB,CAAA;AACA,EAAA,MAAMC,OAAO,GAAGH,CAAC,CAACE,QAAF,EAAhB,CAAA;EACA,OAAOD,OAAO,KAAKE,OAAnB,CAAA;AACD;;;;"}
+{"version":3,"file":"compareIds-8f9595bc.js","sources":["../src/utils/compareIds.js"],"sourcesContent":["const isEmpty = (val) => (val === null || val === undefined);\n\n// Some Ids return string and number inconsistently\n// only use to comapre IDs\nexport default function (a, b) {\n  if (isEmpty(a) || isEmpty(b)) {\n    return false;\n  }\n  const aString = a.toString();\n  const bString = b.toString();\n  return aString === bString;\n}\n"],"names":["isEmpty","val","undefined","a","b","aString","toString","bString"],"mappings":"AAAA,MAAMA,OAAO,GAAIC,GAAD,IAAUA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKC,SAAlD;AAGA;;;AACe,mBAAUC,EAAAA,CAAV,EAAaC,CAAb,EAAgB;EAC7B,IAAIJ,OAAO,CAACG,CAAD,CAAP,IAAcH,OAAO,CAACI,CAAD,CAAzB,EAA8B;AAC5B,IAAA,OAAO,KAAP,CAAA;AACD,GAAA;;AACD,EAAA,MAAMC,OAAO,GAAGF,CAAC,CAACG,QAAF,EAAhB,CAAA;AACA,EAAA,MAAMC,OAAO,GAAGH,CAAC,CAACE,QAAF,EAAhB,CAAA;EACA,OAAOD,OAAO,KAAKE,OAAnB,CAAA;AACD;;;;"}

package/{const-144fbeda.js → const-d3c760a4.js}

@@ -15,4 +15,4 @@ var NodeNames = {
 };
 
 export { MessageInputKeys as M, NodeTypes as N, NodeNames as a };
-//# sourceMappingURL=const-144fbeda.js.map
+//# sourceMappingURL=const-d3c760a4.js.map

package/{const-144fbeda.js.map → const-d3c760a4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-144fbeda.js","sources":["../src/ui/MessageInput/const.ts"],"sourcesContent":["export const MessageInputKeys = {\n  Enter: 'Enter',\n  ArrowUp: 'ArrowUp',\n  ArrowDown: 'ArrowDown',\n  Backspace: 'Backspace',\n};\n\nexport const NodeTypes = {\n  ElementNode: 1,\n  TextNode: 3,\n};\n\nexport const NodeNames = {\n  Span: 'SPAN',\n  Br: 'BR',\n  Div: 'DIV',\n};\n"],"names":["MessageInputKeys","Enter","ArrowUp","ArrowDown","Backspace","NodeTypes","ElementNode","TextNode","NodeNames","Span","Br","Div"],"mappings":"AAAO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OADuB;AAE9BC,EAAAA,OAAO,EAAE,SAFqB;AAG9BC,EAAAA,SAAS,EAAE,WAHmB;AAI9BC,EAAAA,SAAS,EAAE,WAAA;AAJmB,EAAzB;AAOA,IAAMC,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAE,CADU;AAEvBC,EAAAA,QAAQ,EAAE,CAAA;AAFa,EAAlB;AAKA,IAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,EAAE,EAAE,IAFmB;AAGvBC,EAAAA,GAAG,EAAE,KAAA;AAHkB;;;;"}
+{"version":3,"file":"const-d3c760a4.js","sources":["../src/ui/MessageInput/const.ts"],"sourcesContent":["export const MessageInputKeys = {\n  Enter: 'Enter',\n  ArrowUp: 'ArrowUp',\n  ArrowDown: 'ArrowDown',\n  Backspace: 'Backspace',\n};\n\nexport const NodeTypes = {\n  ElementNode: 1,\n  TextNode: 3,\n};\n\nexport const NodeNames = {\n  Span: 'SPAN',\n  Br: 'BR',\n  Div: 'DIV',\n};\n"],"names":["MessageInputKeys","Enter","ArrowUp","ArrowDown","Backspace","NodeTypes","ElementNode","TextNode","NodeNames","Span","Br","Div"],"mappings":"AAAO,IAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OADuB;AAE9BC,EAAAA,OAAO,EAAE,SAFqB;AAG9BC,EAAAA,SAAS,EAAE,WAHmB;AAI9BC,EAAAA,SAAS,EAAE,WAAA;AAJmB,EAAzB;AAOA,IAAMC,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAE,CADU;AAEvBC,EAAAA,QAAQ,EAAE,CAAA;AAFa,EAAlB;AAKA,IAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,EAAE,EAAE,IAFmB;AAGvBC,EAAAA,GAAG,EAAE,KAAA;AAHkB;;;;"}

package/{const-94898fbb.js → const-faf029e4.js}

@@ -11,4 +11,4 @@ var ThreadReplySelectType;
 })(ThreadReplySelectType || (ThreadReplySelectType = {}));
 
 export { MAX_USER_MENTION_COUNT as M, NEXT_RESULT_SIZE as N, PREV_RESULT_SIZE as P, ThreadReplySelectType as T, USER_MENTION_TEMP_CHAR as U, MAX_USER_SUGGESTION_COUNT as a };
-//# sourceMappingURL=const-94898fbb.js.map
+//# sourceMappingURL=const-faf029e4.js.map

package/{const-94898fbb.js.map → const-faf029e4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-94898fbb.js","sources":["../src/smart-components/Channel/context/const.ts"],"sourcesContent":["export const PREV_RESULT_SIZE = 30;\nexport const NEXT_RESULT_SIZE = 15;\n\nexport const MAX_USER_MENTION_COUNT = 10;\nexport const MAX_USER_SUGGESTION_COUNT = 15;\nexport const USER_MENTION_TEMP_CHAR = '@';\n\nexport enum ThreadReplySelectType {\n  PARENT = 'PARENT',\n  THREAD = 'THREAD',\n}\n"],"names":["PREV_RESULT_SIZE","NEXT_RESULT_SIZE","MAX_USER_MENTION_COUNT","MAX_USER_SUGGESTION_COUNT","USER_MENTION_TEMP_CHAR","ThreadReplySelectType"],"mappings":"AAAO,IAAMA,gBAAgB,GAAG,GAAzB;AACA,IAAMC,gBAAgB,GAAG,GAAzB;AAEA,IAAMC,sBAAsB,GAAG,GAA/B;AACA,IAAMC,yBAAyB,GAAG,GAAlC;AACA,IAAMC,sBAAsB,GAAG,IAA/B;IAEKC,sBAAZ;;AAAA,CAAA,UAAYA,qBAAZ,EAAiC;AAC/BA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AACAA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AACD,CAHD,EAAYA,qBAAqB,KAArBA,qBAAqB,GAGhC,EAHgC,CAAjC,CAAA;;;;"}
+{"version":3,"file":"const-faf029e4.js","sources":["../src/smart-components/Channel/context/const.ts"],"sourcesContent":["export const PREV_RESULT_SIZE = 30;\nexport const NEXT_RESULT_SIZE = 15;\n\nexport const MAX_USER_MENTION_COUNT = 10;\nexport const MAX_USER_SUGGESTION_COUNT = 15;\nexport const USER_MENTION_TEMP_CHAR = '@';\n\nexport enum ThreadReplySelectType {\n  PARENT = 'PARENT',\n  THREAD = 'THREAD',\n}\n"],"names":["PREV_RESULT_SIZE","NEXT_RESULT_SIZE","MAX_USER_MENTION_COUNT","MAX_USER_SUGGESTION_COUNT","USER_MENTION_TEMP_CHAR","ThreadReplySelectType"],"mappings":"AAAO,IAAMA,gBAAgB,GAAG,GAAzB;AACA,IAAMC,gBAAgB,GAAG,GAAzB;AAEA,IAAMC,sBAAsB,GAAG,GAA/B;AACA,IAAMC,yBAAyB,GAAG,GAAlC;AACA,IAAMC,sBAAsB,GAAG,IAA/B;IAEKC,sBAAZ;;AAAA,CAAA,UAAYA,qBAAZ,EAAiC;AAC/BA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AACAA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;AACD,CAHD,EAAYA,qBAAqB,KAArBA,qBAAqB,GAGhC,EAHgC,CAAjC,CAAA;;;;"}

package/{context-41df87d8.js → context-7e7aa145.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { n as noop } from './utils-4b7f7007.js';
+import { n as noop } from './utils-531c0ded.js';
 
 var Context = /*#__PURE__*/React__default.createContext({
   opened: '',
@@ -9,4 +9,4 @@ var Consumer = Context.Consumer;
 var Provider = Context.Provider;
 
 export { Consumer as C, Provider as P };
-//# sourceMappingURL=context-41df87d8.js.map
+//# sourceMappingURL=context-7e7aa145.js.map

package/{context-41df87d8.js.map → context-7e7aa145.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-41df87d8.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,IAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC,IAAAA;AAFqC,CAAlC,CAAhB,CAAA;AAKaC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAzB;AACMC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}
+{"version":3,"file":"context-7e7aa145.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,IAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC,IAAAA;AAFqC,CAAlC,CAAhB,CAAA;AAKaC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAzB;AACMC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}

package/dist/index.css

@@ -58,124 +58,97 @@
 .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
   background-color: var(--sendbird-dark-background-300);
 }
-.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 {
-  background-color: var(--sendbird-light-background-50);
-  border-bottom: solid 1px var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-open-channel-preview {
-  background-color: var(--sendbird-dark-background-600);
-  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
+.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--light .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-light-background-100);
+.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-theme--dark .sendbird-open-channel-preview:hover {
-  background-color: var(--sendbird-dark-background-500);
+.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-preview.selected {
-  background-color: var(--sendbird-light-primary-100);
-  border-left: solid 4px var(--sendbird-light-primary-300);
+.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 {
+  border-bottom: solid 1px var(--sendbird-light-onlight-04);
 }
-.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-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 {
+  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
 }
-.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;
+.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: column;
-  max-width: 178px;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
+.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;
   display: inline-flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
   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;
-  max-width: 100%;
-  height: 100%;
+  height: calc(100% - 64px);
   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-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;
+  overflow-y: scroll;
 }
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants {
+
+.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   position: relative;
-  margin-top: 8px;
+  min-height: 62px;
   display: inline-flex;
-  flex-direction: row;
   align-items: center;
-  width: 100%;
-  height: 14px;
-  box-sizing: border-box;
+  justify-content: center;
 }
-.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--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__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--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;
@@ -232,97 +205,124 @@
   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 {
+.sendbird--mobile-mode .sendbird-open-channel-preview {
   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--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-theme--dark .sendbird-open-channel-list-ui {
-  border-right: solid 1px var(--sendbird-dark-ondark-04);
+.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 .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-preview:hover {
+  background-color: var(--sendbird-light-background-100);
 }
-.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 {
-  border-bottom: solid 1px var(--sendbird-light-onlight-04);
+.sendbird-theme--dark .sendbird-open-channel-preview:hover {
+  background-color: var(--sendbird-dark-background-500);
 }
-.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 {
-  border-bottom: solid 1px var(--sendbird-dark-ondark-04);
+.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-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--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;
+  max-width: 178px;
   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;
+  max-width: 100%;
+  height: 100%;
+  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-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;
 }
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {