@sendbird/uikit-react 3.4.6-0 → 3.4.6-rc.1

package/cjs/{uuid-f23c161c.js → uuid-d0a9c040.js}

@@ -14,4 +14,4 @@ var uuidv4 = function () {
 };
 
 exports.uuidv4 = uuidv4;
-//# sourceMappingURL=uuid-f23c161c.js.map
+//# sourceMappingURL=uuid-d0a9c040.js.map

package/cjs/{uuid-f23c161c.js.map → uuid-d0a9c040.js.map}

@@ -1 +1 @@
-{"version":3,"file":"uuid-f23c161c.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;AACaA,IAAAA,MAAM,GAAG,YAAc;EAAA,OAAA,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAACC,CAAC,EAAA;IAC5F,IAAMC,CAAC,GAAGC,IAAI,CAACC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AAChC,IAAA,IAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAG,GAAI,CAAA;AACzC,IAAA,OAAOG,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAAA;AACvB,GAAC,CAAC,CAAA;AAJkC;;;;"}
+{"version":3,"file":"uuid-d0a9c040.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;AACaA,IAAAA,MAAM,GAAG,YAAc;EAAA,OAAA,sCAAsC,CAACC,OAAO,CAAC,OAAO,EAAE,UAACC,CAAC,EAAA;IAC5F,IAAMC,CAAC,GAAGC,IAAI,CAACC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AAChC,IAAA,IAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAG,GAAGC,CAAC,GAAIA,CAAC,GAAG,GAAG,GAAG,GAAI,CAAA;AACzC,IAAA,OAAOG,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAAA;AACvB,GAAC,CAAC,CAAA;AAJkC;;;;"}

package/cjs/withSendbird.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-67bdb021.js');
+var tslib_es6 = require('./tslib.es6-b412d11d.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{color-e54d3ed7.js → color-4ecee870.js}

@@ -31,4 +31,4 @@ var changeColorToClassName = function (color) {
 };
 
 export { Colors as C, changeColorToClassName as c };
-//# sourceMappingURL=color-e54d3ed7.js.map
+//# sourceMappingURL=color-4ecee870.js.map

package/{color-e54d3ed7.js.map → color-4ecee870.js.map}

@@ -1 +1 @@
-{"version":3,"file":"color-e54d3ed7.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,OASX;AATD,CAAA,UAAYA,MAAM,EAAA;AAChBA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC3BA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC3BA,EAAAA,MAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,MAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EATWA,MAAM,KAANA,MAAM,GASjB,EAAA,CAAA,CAAA,CAAA;IAEYC,sBAAsB,GAAG,UAACC,KAAa,EAAA;AAClD,EAAA,QAAQA,KAAK;IACX,KAAKF,MAAM,CAACG,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKH,MAAM,CAACI,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKJ,MAAM,CAACK,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKL,MAAM,CAACM,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKN,MAAM,CAACO,WAAW;AAAE,MAAA,OAAO,6BAA6B,CAAA;IAC7D,KAAKP,MAAM,CAACQ,OAAO;AAAE,MAAA,OAAO,yBAAyB,CAAA;IACrD,KAAKR,MAAM,CAACS,KAAK;AAAE,MAAA,OAAO,uBAAuB,CAAA;AACjD,IAAA;AAAS,MAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAEzB;;;;"}
+{"version":3,"file":"color-4ecee870.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,OASX;AATD,CAAA,UAAYA,MAAM,EAAA;AAChBA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC,CAAA;AACjCA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC3BA,EAAAA,MAAA,CAAA,aAAA,CAAA,GAAA,aAA2B,CAAA;AAC3BA,EAAAA,MAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,MAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EATWA,MAAM,KAANA,MAAM,GASjB,EAAA,CAAA,CAAA,CAAA;IAEYC,sBAAsB,GAAG,UAACC,KAAa,EAAA;AAClD,EAAA,QAAQA,KAAK;IACX,KAAKF,MAAM,CAACG,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKH,MAAM,CAACI,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKJ,MAAM,CAACK,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKL,MAAM,CAACM,cAAc;AAAE,MAAA,OAAO,gCAAgC,CAAA;IACnE,KAAKN,MAAM,CAACO,WAAW;AAAE,MAAA,OAAO,6BAA6B,CAAA;IAC7D,KAAKP,MAAM,CAACQ,OAAO;AAAE,MAAA,OAAO,yBAAyB,CAAA;IACrD,KAAKR,MAAM,CAACS,KAAK;AAAE,MAAA,OAAO,uBAAuB,CAAA;AACjD,IAAA;AAAS,MAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAEzB;;;;"}

package/{compareIds-3e30a438.js → compareIds-bc4cf9bf.js}

@@ -12,4 +12,4 @@ function compareIds (a, b) {
 }
 
 export { compareIds as c };
-//# sourceMappingURL=compareIds-3e30a438.js.map
+//# sourceMappingURL=compareIds-bc4cf9bf.js.map

package/{compareIds-3e30a438.js.map → compareIds-bc4cf9bf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"compareIds-3e30a438.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,GAAG,IAAMA,GAAG,KAAK,IAAI,IAAIA,GAAG,KAAKC,SAAU,CAAA;;AAE5D;AACA;AACe,mBAAUC,EAAAA,CAAC,EAAEC,CAAC,EAAE;EAC7B,IAAIJ,OAAO,CAACG,CAAC,CAAC,IAAIH,OAAO,CAACI,CAAC,CAAC,EAAE;AAC5B,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACA,EAAA,MAAMC,OAAO,GAAGF,CAAC,CAACG,QAAQ,EAAE,CAAA;AAC5B,EAAA,MAAMC,OAAO,GAAGH,CAAC,CAACE,QAAQ,EAAE,CAAA;EAC5B,OAAOD,OAAO,KAAKE,OAAO,CAAA;AAC5B;;;;"}
+{"version":3,"file":"compareIds-bc4cf9bf.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,GAAG,IAAMA,GAAG,KAAK,IAAI,IAAIA,GAAG,KAAKC,SAAU,CAAA;;AAE5D;AACA;AACe,mBAAUC,EAAAA,CAAC,EAAEC,CAAC,EAAE;EAC7B,IAAIJ,OAAO,CAACG,CAAC,CAAC,IAAIH,OAAO,CAACI,CAAC,CAAC,EAAE;AAC5B,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACA,EAAA,MAAMC,OAAO,GAAGF,CAAC,CAACG,QAAQ,EAAE,CAAA;AAC5B,EAAA,MAAMC,OAAO,GAAGH,CAAC,CAACE,QAAQ,EAAE,CAAA;EAC5B,OAAOD,OAAO,KAAKE,OAAO,CAAA;AAC5B;;;;"}

package/{const-71bd6867.js → const-34b3294d.js}

@@ -10,4 +10,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-71bd6867.js.map
+//# sourceMappingURL=const-34b3294d.js.map

package/{const-71bd6867.js.map → const-34b3294d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-71bd6867.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,GAAE;AAC3B,IAAMC,gBAAgB,GAAG,GAAE;AAE3B,IAAMC,sBAAsB,GAAG,GAAE;AACjC,IAAMC,yBAAyB,GAAG,GAAE;AACpC,IAAMC,sBAAsB,GAAG,IAAG;IAE7BC,sBAGX;AAHD,CAAA,UAAYA,qBAAqB,EAAA;AAC/BA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjBA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHWA,qBAAqB,KAArBA,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"const-34b3294d.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,GAAE;AAC3B,IAAMC,gBAAgB,GAAG,GAAE;AAE3B,IAAMC,sBAAsB,GAAG,GAAE;AACjC,IAAMC,yBAAyB,GAAG,GAAE;AACpC,IAAMC,sBAAsB,GAAG,IAAG;IAE7BC,sBAGX;AAHD,CAAA,UAAYA,qBAAqB,EAAA;AAC/BA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjBA,EAAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHWA,qBAAqB,KAArBA,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}

package/{const-48a3200e.js → const-8a7444d1.js}

@@ -15,4 +15,4 @@ var NodeNames = {
 };
 
 export { MessageInputKeys as M, NodeTypes as N, NodeNames as a };
-//# sourceMappingURL=const-48a3200e.js.map
+//# sourceMappingURL=const-8a7444d1.js.map

package/{const-48a3200e.js.map → const-8a7444d1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-48a3200e.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,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,SAAS,EAAE,WAAA;EACZ;AAEM,IAAMC,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,QAAQ,EAAE,CAAA;EACX;AAEM,IAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,GAAG,EAAE,KAAA;;;;;"}
+{"version":3,"file":"const-8a7444d1.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,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,SAAS,EAAE,WAAA;EACZ;AAEM,IAAMC,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAE,CAAC;AACdC,EAAAA,QAAQ,EAAE,CAAA;EACX;AAEM,IAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,GAAG,EAAE,KAAA;;;;;"}

package/{consts-665331c7.js → consts-165100af.js}

@@ -1,4 +1,4 @@
 var TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 export { TEXT_MESSAGE_BODY_CLASSNAME as T };
-//# sourceMappingURL=consts-665331c7.js.map
+//# sourceMappingURL=consts-165100af.js.map

package/{consts-665331c7.js.map → consts-165100af.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-665331c7.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,IAAMA,2BAA2B,GAAG;;;;"}
+{"version":3,"file":"consts-165100af.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,IAAMA,2BAA2B,GAAG;;;;"}

package/{consts-4b1e008b.js → consts-7a61df9f.js}

@@ -1,4 +1,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 export { OG_MESSAGE_BODY_CLASSNAME as O };
-//# sourceMappingURL=consts-4b1e008b.js.map
+//# sourceMappingURL=consts-7a61df9f.js.map

package/{consts-4b1e008b.js.map → consts-7a61df9f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-4b1e008b.js","sources":["../src/ui/OGMessageItemBody/consts.ts"],"sourcesContent":["export const OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';\n"],"names":["OG_MESSAGE_BODY_CLASSNAME"],"mappings":"AAAO,IAAMA,yBAAyB,GAAG;;;;"}
+{"version":3,"file":"consts-7a61df9f.js","sources":["../src/ui/OGMessageItemBody/consts.ts"],"sourcesContent":["export const OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';\n"],"names":["OG_MESSAGE_BODY_CLASSNAME"],"mappings":"AAAO,IAAMA,yBAAyB,GAAG;;;;"}

package/{consts-e4e1a8fc.js → consts-81c7d9ed.js}

@@ -1,4 +1,4 @@
 var MENTION_USER_LABEL_CLASSNAME = 'sendbird-mention-user-label';
 
 export { MENTION_USER_LABEL_CLASSNAME as M };
-//# sourceMappingURL=consts-e4e1a8fc.js.map
+//# sourceMappingURL=consts-81c7d9ed.js.map

package/{consts-e4e1a8fc.js.map → consts-81c7d9ed.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-e4e1a8fc.js","sources":["../src/ui/MentionUserLabel/consts.ts"],"sourcesContent":["export const MENTION_USER_LABEL_CLASSNAME = 'sendbird-mention-user-label';\n"],"names":["MENTION_USER_LABEL_CLASSNAME"],"mappings":"AAAO,IAAMA,4BAA4B,GAAG;;;;"}
+{"version":3,"file":"consts-81c7d9ed.js","sources":["../src/ui/MentionUserLabel/consts.ts"],"sourcesContent":["export const MENTION_USER_LABEL_CLASSNAME = 'sendbird-mention-user-label';\n"],"names":["MENTION_USER_LABEL_CLASSNAME"],"mappings":"AAAO,IAAMA,4BAA4B,GAAG;;;;"}

package/{consts-30f09302.js → consts-96859f90.js}

@@ -20,4 +20,4 @@ var META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';
 var META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = 'voice/mp3';
 
 export { META_ARRAY_VOICE_DURATION_KEY as M, SCROLL_BUFFER as S, VOICE_RECORDER_DEFAULT_MAX as V, VOICE_RECORDER_DEFAULT_MIN as a, VOICE_MESSAGE_FILE_NAME as b, VOICE_MESSAGE_MIME_TYPE as c, META_ARRAY_MESSAGE_TYPE_KEY as d, META_ARRAY_MESSAGE_TYPE_VALUE__VOICE as e, VOICE_PLAYER_ROOT_ID as f, VOICE_PLAYER_AUDIO_ID as g, VOICE_RECORDER_MIME_TYPE as h, VOICE_RECORDER_AUDIO_BITS as i, VOICE_RECORDER_CLICK_BUFFER_TIME as j };
-//# sourceMappingURL=consts-30f09302.js.map
+//# sourceMappingURL=consts-96859f90.js.map

package/{consts-30f09302.js.map → consts-96859f90.js.map}

@@ -1 +1 @@
-{"version":3,"file":"consts-30f09302.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_MIME_TYPE = 'audio/webm';\nexport const VOICE_RECORDER_AUDIO_BITS = 128000;\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_MIME_TYPE","VOICE_RECORDER_AUDIO_BITS","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,IAAMA,aAAa,GAAG,GAAE;AAE/B;AACO,IAAMC,gCAAgC,GAAG,IAAG;AACtCC,IAAAA,0BAA0B,GAAG,KAAK;AAClCC,IAAAA,0BAA0B,GAAG,OAAO;AAC1C,IAAMC,wBAAwB,GAAG,aAAY;AAC7C,IAAMC,yBAAyB,GAAG,OAAM;AAM/C;;;AAGG;AACI,IAAMC,oBAAoB,GAAG,sCAAqC;AAClE,IAAMC,qBAAqB,GAAG,kCAAiC;AAEtE;AACO,IAAMC,uBAAuB,GAAG,oBAAmB;AACnD,IAAMC,uBAAuB,GAAG,2BAA0B;AAEjE;AACO,IAAMC,6BAA6B,GAAG,6BAA4B;AAClE,IAAMC,2BAA2B,GAAG,4BAA2B;AAC/D,IAAMC,oCAAoC,GAAG;;;;"}
+{"version":3,"file":"consts-96859f90.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_MIME_TYPE = 'audio/webm';\nexport const VOICE_RECORDER_AUDIO_BITS = 128000;\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_MIME_TYPE","VOICE_RECORDER_AUDIO_BITS","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,IAAMA,aAAa,GAAG,GAAE;AAE/B;AACO,IAAMC,gCAAgC,GAAG,IAAG;AACtCC,IAAAA,0BAA0B,GAAG,KAAK;AAClCC,IAAAA,0BAA0B,GAAG,OAAO;AAC1C,IAAMC,wBAAwB,GAAG,aAAY;AAC7C,IAAMC,yBAAyB,GAAG,OAAM;AAM/C;;;AAGG;AACI,IAAMC,oBAAoB,GAAG,sCAAqC;AAClE,IAAMC,qBAAqB,GAAG,kCAAiC;AAEtE;AACO,IAAMC,uBAAuB,GAAG,oBAAmB;AACnD,IAAMC,uBAAuB,GAAG,2BAA0B;AAEjE;AACO,IAAMC,6BAA6B,GAAG,6BAA4B;AAClE,IAAMC,2BAA2B,GAAG,4BAA2B;AAC/D,IAAMC,oCAAoC,GAAG;;;;"}

package/{context-993ee0c3.js → context-c54bc9b4.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { n as noop } from './utils-a7563986.js';
+import { n as noop } from './utils-7dc80efd.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-993ee0c3.js.map
+//# sourceMappingURL=context-c54bc9b4.js.map

package/{context-993ee0c3.js.map → context-c54bc9b4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-993ee0c3.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,aAAa,CAAe;AAChDC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,SAAS,EAAEC,IAAAA;AACZ,CAAA,CAAC,CAAA;AAEWC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAQ;AAC3BC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}
+{"version":3,"file":"context-c54bc9b4.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,aAAa,CAAe;AAChDC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,SAAS,EAAEC,IAAAA;AACZ,CAAA,CAAC,CAAA;AAEWC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAQ;AAC3BC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}

package/dist/index.css

@@ -69,97 +69,124 @@
   display: inline-block;
   color: inherit;
 }
-.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;
 }
 .sendbird-create-open-channel-ui {
   position: relative;
@@ -216,124 +243,97 @@
   display: inline-flex;
   flex-direction: row;
 }
-.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);
 }
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
@@ -1810,6 +1810,7 @@
 }
 .sendbird--mobile-mode .sendbird-channel-preview .sendbird-channel-preview__content {
   position: relative;
+  max-width: calc(100% - 72px);
 }
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
   display: flex;
@@ -2887,7 +2888,7 @@
   max-width: 400px;
 }
 .sendbird--mobile-mode .sendbird-message-content .sendbird-message-content__middle {
-  max-width: calc(100vw - 100px);
+  max-width: calc(100vw - 140px);
 }
 .sendbird-message-content .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.use-quote {
   margin-top: -8px;