@sendbird/uikit-react 3.1.3 → 3.2.0-rc.0

package/cjs/{_rollupPluginBabelHelpers-09706ebf.js → _rollupPluginBabelHelpers-f9e4bb55.js}

@@ -131,4 +131,4 @@ function _nonIterableRest() {
 exports._objectSpread2 = _objectSpread2;
 exports._slicedToArray = _slicedToArray;
 exports._toConsumableArray = _toConsumableArray;
-//# sourceMappingURL=_rollupPluginBabelHelpers-09706ebf.js.map
+//# sourceMappingURL=_rollupPluginBabelHelpers-f9e4bb55.js.map

package/cjs/{_rollupPluginBabelHelpers-09706ebf.js.map → _rollupPluginBabelHelpers-f9e4bb55.js.map}

@@ -1 +1 @@
-{"version":3,"file":"_rollupPluginBabelHelpers-09706ebf.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"_rollupPluginBabelHelpers-f9e4bb55.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/{actionTypes-b3af2b15.js → actionTypes-17aa0989.js}

@@ -7,4 +7,4 @@ var UPDATE_USER_INFO = 'UPDATE_USER_INFO';
 exports.INIT_USER = INIT_USER;
 exports.RESET_USER = RESET_USER;
 exports.UPDATE_USER_INFO = UPDATE_USER_INFO;
-//# sourceMappingURL=actionTypes-b3af2b15.js.map
+//# sourceMappingURL=actionTypes-17aa0989.js.map

package/cjs/{actionTypes-b3af2b15.js.map → actionTypes-17aa0989.js.map}

@@ -1 +1 @@
-{"version":3,"file":"actionTypes-b3af2b15.js","sources":["../../src/lib/dux/user/actionTypes.js"],"sourcesContent":["export const INIT_USER = 'INIT_USER';\nexport const RESET_USER = 'RESET_USER';\nexport const SET_USER_LOADING = 'SET_USER_LOADING';\nexport const UPDATE_USER_INFO = 'UPDATE_USER_INFO';\n"],"names":["INIT_USER","RESET_USER","UPDATE_USER_INFO"],"mappings":";;IAAaA,SAAS,GAAG;IACZC,UAAU,GAAG;IAEbC,gBAAgB,GAAG;;;;;;"}
+{"version":3,"file":"actionTypes-17aa0989.js","sources":["../../src/lib/dux/user/actionTypes.js"],"sourcesContent":["export const INIT_USER = 'INIT_USER';\nexport const RESET_USER = 'RESET_USER';\nexport const SET_USER_LOADING = 'SET_USER_LOADING';\nexport const UPDATE_USER_INFO = 'UPDATE_USER_INFO';\n"],"names":["INIT_USER","RESET_USER","UPDATE_USER_INFO"],"mappings":";;IAAaA,SAAS,GAAG;IACZC,UAAU,GAAG;IAEbC,gBAAgB,GAAG;;;;;;"}

package/cjs/{color-f0ffb253.js → color-9e293baf.js}

@@ -3,14 +3,14 @@
 exports.Colors = void 0;
 
 (function (Colors) {
-  Colors[Colors["ONBACKGROUND_1"] = 0] = "ONBACKGROUND_1";
-  Colors[Colors["ONBACKGROUND_2"] = 1] = "ONBACKGROUND_2";
-  Colors[Colors["ONBACKGROUND_3"] = 2] = "ONBACKGROUND_3";
-  Colors[Colors["ONBACKGROUND_4"] = 3] = "ONBACKGROUND_4";
-  Colors[Colors["ONCONTENT_1"] = 4] = "ONCONTENT_1";
-  Colors[Colors["ONCONTENT_2"] = 5] = "ONCONTENT_2";
-  Colors[Colors["PRIMARY"] = 6] = "PRIMARY";
-  Colors[Colors["ERROR"] = 7] = "ERROR";
+  Colors["ONBACKGROUND_1"] = "ONBACKGROUND_1";
+  Colors["ONBACKGROUND_2"] = "ONBACKGROUND_2";
+  Colors["ONBACKGROUND_3"] = "ONBACKGROUND_3";
+  Colors["ONBACKGROUND_4"] = "ONBACKGROUND_4";
+  Colors["ONCONTENT_1"] = "ONCONTENT_1";
+  Colors["ONCONTENT_2"] = "ONCONTENT_2";
+  Colors["PRIMARY"] = "PRIMARY";
+  Colors["ERROR"] = "ERROR";
 })(exports.Colors || (exports.Colors = {}));
 
 var changeColorToClassName = function changeColorToClassName(color) {
@@ -42,4 +42,4 @@ var changeColorToClassName = function changeColorToClassName(color) {
 };
 
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=color-f0ffb253.js.map
+//# sourceMappingURL=color-9e293baf.js.map

package/cjs/color-9e293baf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-9e293baf.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":";;AAEYA;;AAAZ,WAAYA;EACVA,wBAAA,mBAAA;EACAA,wBAAA,mBAAA;EACAA,wBAAA,mBAAA;EACAA,wBAAA,mBAAA;EACAA,qBAAA,gBAAA;EACAA,qBAAA,gBAAA;EACAA,iBAAA,YAAA;EACAA,eAAA,UAAA;AACD,CATD,EAAYA,cAAM,KAANA,cAAM,KAAA,CAAlB;;IAWaC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,KAAD;EACpC,QAAQA,KAAR;IACE,KAAKF,cAAM,CAACG,cAAZ;MAA4B,OAAO,gCAAP;;IAC5B,KAAKH,cAAM,CAACI,cAAZ;MAA4B,OAAO,gCAAP;;IAC5B,KAAKJ,cAAM,CAACK,cAAZ;MAA4B,OAAO,gCAAP;;IAC5B,KAAKL,cAAM,CAACM,cAAZ;MAA4B,OAAO,gCAAP;;IAC5B,KAAKN,cAAM,CAACO,WAAZ;MAAyB,OAAO,6BAAP;;IACzB,KAAKP,cAAM,CAACQ,OAAZ;MAAqB,OAAO,yBAAP;;IACrB,KAAKR,cAAM,CAACS,KAAZ;MAAmB,OAAO,uBAAP;;IACnB;MAAS,OAAO,IAAP;;AAEZ;;;;"}

package/cjs/{compareIds-10371145.js → compareIds-cf626c9f.js}

@@ -17,4 +17,4 @@ function compareIds (a, b) {
 }
 
 exports.compareIds = compareIds;
-//# sourceMappingURL=compareIds-10371145.js.map
+//# sourceMappingURL=compareIds-cf626c9f.js.map

package/cjs/{compareIds-10371145.js.map → compareIds-cf626c9f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"compareIds-10371145.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,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD;AAAA,SAAUA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKC,SAAlC;AAAA,CAAhB;AAGA;;;AACe,qBAAUC,CAAV,EAAaC,CAAb,EAAgB;AAC7B,MAAIJ,OAAO,CAACG,CAAD,CAAP,IAAcH,OAAO,CAACI,CAAD,CAAzB,EAA8B;AAC5B,WAAO,KAAP;AACD;;AACD,MAAMC,OAAO,GAAGF,CAAC,CAACG,QAAF,EAAhB;AACA,MAAMC,OAAO,GAAGH,CAAC,CAACE,QAAF,EAAhB;AACA,SAAOD,OAAO,KAAKE,OAAnB;AACD;;;;"}
+{"version":3,"file":"compareIds-cf626c9f.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,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD;EAAA,OAAUA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKC,SAAlC;AAAA,CAAhB;AAGA;;;AACe,qBAAUC,CAAV,EAAaC,CAAb,EAAgB;EAC7B,IAAIJ,OAAO,CAACG,CAAD,CAAP,IAAcH,OAAO,CAACI,CAAD,CAAzB,EAA8B;IAC5B,OAAO,KAAP;;;EAEF,IAAMC,OAAO,GAAGF,CAAC,CAACG,QAAF,EAAhB;EACA,IAAMC,OAAO,GAAGH,CAAC,CAACE,QAAF,EAAhB;EACA,OAAOD,OAAO,KAAKE,OAAnB;AACD;;;;"}

package/cjs/{const-84c58686.js → const-17108318.js}

@@ -19,4 +19,4 @@ var NodeNames = {
 exports.MessageInputKeys = MessageInputKeys;
 exports.NodeNames = NodeNames;
 exports.NodeTypes = NodeTypes;
-//# sourceMappingURL=const-84c58686.js.map
+//# sourceMappingURL=const-17108318.js.map

package/cjs/{const-84c58686.js.map → const-17108318.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-84c58686.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":";;IAAaA,gBAAgB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OADuB;AAE9BC,EAAAA,OAAO,EAAE,SAFqB;AAG9BC,EAAAA,SAAS,EAAE,WAHmB;AAI9BC,EAAAA,SAAS,EAAE;AAJmB;IAOnBC,SAAS,GAAG;AACvBC,EAAAA,WAAW,EAAE,CADU;AAEvBC,EAAAA,QAAQ,EAAE;AAFa;IAKZC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,EAAE,EAAE,IAFmB;AAGvBC,EAAAA,GAAG,EAAE;AAHkB;;;;;;"}
+{"version":3,"file":"const-17108318.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":";;IAAaA,gBAAgB,GAAG;EAC9BC,KAAK,EAAE,OADuB;EAE9BC,OAAO,EAAE,SAFqB;EAG9BC,SAAS,EAAE,WAHmB;EAI9BC,SAAS,EAAE;AAJmB;IAOnBC,SAAS,GAAG;EACvBC,WAAW,EAAE,CADU;EAEvBC,QAAQ,EAAE;AAFa;IAKZC,SAAS,GAAG;EACvBC,IAAI,EAAE,MADiB;EAEvBC,EAAE,EAAE,IAFmB;EAGvBC,GAAG,EAAE;AAHkB;;;;;;"}

package/cjs/{const-459420a0.js → const-955190c4.js}

@@ -11,4 +11,4 @@ exports.MAX_USER_SUGGESTION_COUNT = MAX_USER_SUGGESTION_COUNT;
 exports.NEXT_RESULT_SIZE = NEXT_RESULT_SIZE;
 exports.PREV_RESULT_SIZE = PREV_RESULT_SIZE;
 exports.USER_MENTION_TEMP_CHAR = USER_MENTION_TEMP_CHAR;
-//# sourceMappingURL=const-459420a0.js.map
+//# sourceMappingURL=const-955190c4.js.map

package/cjs/{const-459420a0.js.map → const-955190c4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-459420a0.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"],"names":["PREV_RESULT_SIZE","NEXT_RESULT_SIZE","MAX_USER_MENTION_COUNT","MAX_USER_SUGGESTION_COUNT","USER_MENTION_TEMP_CHAR"],"mappings":";;IAAaA,gBAAgB,GAAG;IACnBC,gBAAgB,GAAG;IAEnBC,sBAAsB,GAAG;IACzBC,yBAAyB,GAAG;IAC5BC,sBAAsB,GAAG;;;;;;;;"}
+{"version":3,"file":"const-955190c4.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"],"names":["PREV_RESULT_SIZE","NEXT_RESULT_SIZE","MAX_USER_MENTION_COUNT","MAX_USER_SUGGESTION_COUNT","USER_MENTION_TEMP_CHAR"],"mappings":";;IAAaA,gBAAgB,GAAG;IACnBC,gBAAgB,GAAG;IAEnBC,sBAAsB,GAAG;IACzBC,yBAAyB,GAAG;IAC5BC,sBAAsB,GAAG;;;;;;;;"}

package/cjs/{context-01248097.js → context-e041c8e0.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./utils-760ac018.js');
+var utils = require('./utils-09738454.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,4 +16,4 @@ var Provider = Context.Provider;
 
 exports.Consumer = Consumer;
 exports.Provider = Provider;
-//# sourceMappingURL=context-01248097.js.map
+//# sourceMappingURL=context-e041c8e0.js.map

package/cjs/{context-01248097.js.map → context-e041c8e0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-01248097.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,yBAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC;AAFqC,CAAlC,CAAhB;IAKaC,QAAQ,GAAGN,OAAO,CAACM;IACnBC,QAAQ,GAAGP,OAAO,CAACO;;;;;"}
+{"version":3,"file":"context-e041c8e0.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,yBAAK,CAACC,aAAN,CAAkC;EAChDC,MAAM,EAAE,EADwC;EAEhDC,SAAS,EAAEC;AAFqC,CAAlC,CAAhB;IAKaC,QAAQ,GAAGN,OAAO,CAACM;IACnBC,QAAQ,GAAGP,OAAO,CAACO;;;;;"}

package/cjs/dist/index.css

@@ -1,47 +1,3 @@
-.sendbird-chat-header {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 64px;
-  min-height: 64px;
-  padding-left: 20px;
-  padding-right: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box; }
-  .sendbird-theme--light .sendbird-chat-header {
-    border-bottom: 1px solid var(--sendbird-light-onlight-04);
-    background-color: var(--sendbird-light-background-50); }
-  .sendbird-theme--dark .sendbird-chat-header {
-    border-bottom: 1px solid var(--sendbird-dark-ondark-04);
-    background-color: var(--sendbird-dark-background-600); }
-  .sendbird-chat-header__left {
-    margin-right: 24px; }
-  .sendbird-chat-header__left, .sendbird-chat-header__right {
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    align-items: center; }
-  .sendbird-chat-header .sendbird-chat-header__left__title {
-    margin-left: 8px;
-    margin-right: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 780px; }
-  .sendbird-chat-header .sendbird-chat-header__left__subtitle {
-    max-width: 240px;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .sendbird-chat-header .sendbird-chat-header__right__mute {
-    margin-right: 26px; }
-  .sendbird-chat-header .sendbird-iconbutton--pressed {
-    background-color: inherit; }
-  .sendbird-chat-header .sendbird-chat-header__right__info {
-    margin-left: 16px; }
-
 .sendbird-openchannel-conversation-header {
   position: relative;
   min-height: 64px;
@@ -91,104 +47,228 @@
   .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
     background-color: var(--sendbird-dark-background-300); }
 
-.sendbird__offline .sendbird-channel-preview {
-  cursor: not-allowed; }
+.sendbird-open-channel-list,
+.sendbird-open-channel-list-ui {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 256px;
+  min-width: 256px;
+  height: 100%;
+  box-sizing: border-box; }
+  .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 {
+      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 {
+      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 {
+      position: relative;
+      margin-left: 24px;
+      display: inline-flex;
+      align-items: center;
+      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;
+      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;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      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 {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    height: calc(100% - 64px);
+    box-sizing: border-box;
+    overflow-y: scroll; }
 
-.sendbird-channel-preview {
+.sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   position: relative;
-  cursor: pointer;
-  box-sizing: border-box;
-  width: 320px;
-  height: 80px;
-  display: flex;
-  flex-direction: row;
+  min-height: 62px;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  padding: 12px 16px 12px 16px; }
-  .sendbird-theme--light .sendbird-channel-preview {
+  justify-content: center; }
+  .sendbird-theme--light .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+    background-color: var(--sendbird-light-background-100); }
+  .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
+    background-color: var(--sendbird-dark-background-500); }
+
+.sendbird-open-channel-preview {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  width: 264px;
+  height: 58px;
+  min-width: 264px;
+  min-height: 58px;
+  box-sizing: border-box; }
+  .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-channel-preview {
+  .sendbird-theme--dark .sendbird-open-channel-preview {
+    background-color: var(--sendbird-dark-background-600);
     border-bottom: solid 1px var(--sendbird-dark-ondark-04); }
-  .sendbird-channel-preview:focus {
-    outline: none; }
-  .sendbird-channel-preview .sendbird-channel-preview__avatar {
-    width: 56px;
-    height: 56px; }
-  .sendbird-channel-preview .sendbird-channel-preview__content {
-    width: 100%;
-    height: 100%;
-    margin-left: 16px; }
-    .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
-      display: flex;
-      justify-content: space-between;
-      width: 216px;
-      height: 16px; }
-      .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header {
-        display: flex;
-        justify-content: flex-start;
-        overflow: hidden;
-        text-overflow: ellipsis; }
-        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__broadcast-icon {
-          padding-right: 4px; }
-        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__channel-name {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 128px;
-          word-break: break-all;
-          white-space: nowrap; }
-        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__total-members {
-          margin-top: 2px;
-          margin-left: 4px; }
-        .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__frozen-icon {
-          padding-left: 4px; }
-      .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__last-message-at {
-        margin-left: 4px;
-        margin-bottom: 4px;
-        white-space: nowrap; }
-    .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower {
-      margin-top: 8px;
-      width: 216px;
-      height: 32px;
-      display: flex;
-      justify-content: space-between; }
-      .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__last-message {
-        overflow: hidden;
-        text-overflow: ellipsis; }
-      .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count {
-        margin-left: 8px;
-        margin-bottom: 12px; }
-  .sendbird-channel-preview .sendbird-channel-preview__action {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    display: inline-block; }
-    .sendbird-channel-preview .sendbird-channel-preview__action .sendbird-iconbutton {
-      display: none; }
-  .sendbird-theme--light .sendbird-channel-preview:hover {
+  .sendbird-theme--light .sendbird-open-channel-preview:hover {
     background-color: var(--sendbird-light-background-100); }
-  .sendbird-theme--dark .sendbird-channel-preview:hover {
+  .sendbird-theme--dark .sendbird-open-channel-preview:hover {
     background-color: var(--sendbird-dark-background-500); }
-  .sendbird-channel-preview:hover .sendbird-channel-preview__action .sendbird-iconbutton {
-    display: inline-block; }
-  .sendbird-channel-preview:hover .sendbird-channel-preview__content__upper__last-message-at {
-    display: none; }
-  .sendbird-channel-preview:hover .sendbird-channel-preview__content__lower__unread-message-count {
-    display: none; }
+  .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-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-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-preview .sendbird-open-channel-preview__context {
+    position: relative;
+    margin-top: 8px;
+    margin-left: 16px;
+    display: inline-flex;
+    flex-direction: column;
+    max-width: 178px;
+    box-sizing: border-box; }
+    .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
+      position: relative;
+      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;
+        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;
+      width: 100%;
+      height: 14px;
+      box-sizing: border-box; }
+      .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-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-channel-preview--active {
-  padding: 12px 16px 12px 12px; }
-  .sendbird-theme--light .sendbird-channel-preview--active {
-    border-left: solid 4px var(--sendbird-light-primary-300);
-    border-bottom: solid 1px var(--sendbird-light-onlight-04);
-    background-color: var(--sendbird-light-primary-100); }
-  .sendbird-theme--dark .sendbird-channel-preview--active {
-    border-left: solid 4px var(--sendbird-dark-primary-200);
-    border-bottom: solid 1px var(--sendbird-dark-ondark-04);
-    background-color: var(--sendbird-dark-background-700); }
-  .sendbird-theme--light .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
-    color: var(--sendbird-light-primary-300); }
-  .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
-    color: var(--sendbird-dark-primary-200); }
+.sendbird-create-open-channel-ui {
+  position: relative;
+  display: inline-flex; }
+
+.sendbird-create-open-channel-ui__profile-input {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box; }
+  .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section {
+    position: relative;
+    margin-top: 16px;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center; }
+    .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 80px;
+      height: 80px; }
+      .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 80px;
+        border-radius: 50%; }
+        .sendbird-theme--light .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+          background-color: var(--sendbird-light-background-200); }
+        .sendbird-theme--dark .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__avatar--default {
+          background-color: var(--sendbird-dark-background-400); }
+    .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__img-section .sendbird-create-open-channel-ui__profile-input__img-section__button {
+      position: relative;
+      margin-left: 18px;
+      display: inline-flex; }
+  .sendbird-create-open-channel-ui__profile-input .sendbird-create-open-channel-ui__profile-input__name-section {
+    position: relative;
+    margin-top: 8px;
+    display: inline-flex;
+    flex-direction: row; }
 
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
@@ -2131,6 +2211,7 @@
   width: 100%;
   position: relative; }
   .sendbird-message-input .sendbird-message-input--textarea {
+    position: relative;
     width: 100%;
     border-radius: 4px;
     font-size: 14px;
@@ -2187,14 +2268,14 @@
       color: var(--sendbird-dark-ondark-03); }
   .sendbird-message-input .sendbird-message-input--attach {
     position: absolute;
-    right: 12px;
-    bottom: 18px;
-    padding: 6px; }
+    padding: 6px;
+    right: 16px;
+    bottom: 14px; }
   .sendbird-message-input .sendbird-message-input--send {
     position: absolute;
     padding: 6px;
     right: 16px;
-    bottom: 16px; }
+    bottom: 14px; }
   .sendbird-message-input .sendbird-message-input--attach-input {
     display: none; }
 
@@ -2606,7 +2687,8 @@ div.sendbird-text-message-item-body {
   height: fit-content; }
   .sendbird-word .sendbird-word__url,
   .sendbird-word .sendbird-word__normal {
-    display: inline-block; }
+    display: inline-block;
+    color: inherit; }
 
 .sendbird-link-label {
   text-decoration: unset; }
@@ -2851,13 +2933,17 @@ div.sendbird-text-message-item-body {
   .sendbird-og-message-item-body .sendbird-og-message-item-body__description:hover {
     cursor: pointer; }
   .sendbird-theme--light .sendbird-og-message-item-body.outgoing .sendbird-og-message-item-body__text-bubble {
-    background-color: var(--sendbird-light-primary-300); }
+    background-color: var(--sendbird-light-primary-300);
+    color: var(--sendbird-light-ondark-01); }
   .sendbird-theme--dark .sendbird-og-message-item-body.outgoing .sendbird-og-message-item-body__text-bubble {
-    background-color: var(--sendbird-dark-primary-200); }
+    background-color: var(--sendbird-dark-primary-200);
+    color: var(--sendbird-dark-onlight-01); }
   .sendbird-theme--light .sendbird-og-message-item-body.incoming .sendbird-og-message-item-body__text-bubble {
-    background-color: var(--sendbird-light-background-100); }
+    background-color: var(--sendbird-light-background-100);
+    color: var(--sendbird-light-onlight-01); }
   .sendbird-theme--dark .sendbird-og-message-item-body.incoming .sendbird-og-message-item-body__text-bubble {
-    background-color: var(--sendbird-dark-background-500); }
+    background-color: var(--sendbird-dark-background-500);
+    color: var(--sendbird-dark-ondark-01); }
   .sendbird-theme--light .sendbird-og-message-item-body.mouse-hover .sendbird-og-message-item-body__description, .sendbird-theme--light .sendbird-og-message-item-body:hover .sendbird-og-message-item-body__description {
     background-color: var(--sendbird-light-background-200); }
   .sendbird-theme--dark .sendbird-og-message-item-body.mouse-hover .sendbird-og-message-item-body__description, .sendbird-theme--dark .sendbird-og-message-item-body:hover .sendbird-og-message-item-body__description {
@@ -4116,6 +4202,10 @@ div.sendbird-og-message-item-body__text-bubble {
         display: inline;
         white-space: pre-wrap;
         word-break: break-all; }
+        .sendbird-theme--light .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__description .sendbird-openchannel-og-message__top__right__description__message .sendbird-word .sendbird-word__url {
+          color: var(--sendbird-light-primary-300); }
+        .sendbird-theme--dark .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__description .sendbird-openchannel-og-message__top__right__description__message .sendbird-word .sendbird-word__url {
+          color: var(--sendbird-dark-primary-200); }
     .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu {
       position: absolute;
       right: 16px;
@@ -4209,12 +4299,6 @@ div.sendbird-og-message-item-body__text-bubble {
   margin: 0px 2px;
   word-break: break-all; }
 
-.sendbird-theme--light .sendbird-openchannel-og-message--word--link {
-  color: var(--sendbird-light-primary-300); }
-
-.sendbird-theme--dark .sendbird-openchannel-og-message--word--link {
-  color: var(--sendbird-dark-primary-200); }
-
 .sendbird-openchannel-thumbnail-message {
   position: relative;
   display: flex;
@@ -4582,6 +4666,10 @@ div.sendbird-og-message-item-body__text-bubble {
       right: 18px; }
     .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value {
       margin-top: 8px; }
+      .sendbird-theme--light .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value {
+        color: var(--sendbird-light-onlight-01); }
+      .sendbird-theme--dark .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value {
+        color: var(--sendbird-dark-ondark-01); }
     .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-value,
     .sendbird-openchannel-settings .sendbird-openchannel-settings__url .sendbird-openchannel-settings__url-label {
       text-align: left;