@sendbird/uikit-react 3.0.2 → 3.1.1-rc.0

package/cjs/{_rollupPluginBabelHelpers-59502943.js → _rollupPluginBabelHelpers-d4231746.js}

@@ -240,4 +240,4 @@ exports._inherits = _inherits;
 exports._objectSpread2 = _objectSpread2;
 exports._slicedToArray = _slicedToArray;
 exports._toConsumableArray = _toConsumableArray;
-//# sourceMappingURL=_rollupPluginBabelHelpers-59502943.js.map
+//# sourceMappingURL=_rollupPluginBabelHelpers-d4231746.js.map

package/cjs/{_rollupPluginBabelHelpers-59502943.js.map → _rollupPluginBabelHelpers-d4231746.js.map}

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

package/cjs/{actionTypes-d637dc1d.js → actionTypes-ef5574ae.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-d637dc1d.js.map
+//# sourceMappingURL=actionTypes-ef5574ae.js.map

package/cjs/{actionTypes-d637dc1d.js.map → actionTypes-ef5574ae.js.map}

@@ -1 +1 @@
-{"version":3,"file":"actionTypes-d637dc1d.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-ef5574ae.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-57d2d881.js → color-f1d22e48.js}

@@ -39,4 +39,4 @@ function changeColorToClassName(color) {
 
 exports.Colors = Colors;
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=color-57d2d881.js.map
+//# sourceMappingURL=color-f1d22e48.js.map

package/cjs/{color-57d2d881.js.map → color-f1d22e48.js.map}

@@ -1 +1 @@
-{"version":3,"file":"color-57d2d881.js","sources":["../../src/utils/color.js"],"sourcesContent":["import './color.scss';\n\nexport const 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  PRIMARY: 'PRIMARY',\n  ERROR: 'ERROR',\n};\n\nexport function changeColorToClassName(color) {\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","ONBACKGROUND_1","ONBACKGROUND_2","ONBACKGROUND_3","ONBACKGROUND_4","ONCONTENT_1","PRIMARY","ERROR","changeColorToClassName","color"],"mappings":";;IAEaA,MAAM,GAAG;AACpBC,EAAAA,cAAc,EAAE,gBADI;AAEpBC,EAAAA,cAAc,EAAE,gBAFI;AAGpBC,EAAAA,cAAc,EAAE,gBAHI;AAIpBC,EAAAA,cAAc,EAAE,gBAJI;AAKpBC,EAAAA,WAAW,EAAE,aALO;AAMpBC,EAAAA,OAAO,EAAE,SANW;AAOpBC,EAAAA,KAAK,EAAE;AAPa;AAUf,SAASC,sBAAT,CAAgCC,KAAhC,EAAuC;AAC5C,UAAQA,KAAR;AACE,SAAKT,MAAM,CAACC,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKD,MAAM,CAACE,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKF,MAAM,CAACG,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKH,MAAM,CAACI,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKJ,MAAM,CAACK,WAAZ;AAAyB,aAAO,6BAAP;;AACzB,SAAKL,MAAM,CAACM,OAAZ;AAAqB,aAAO,yBAAP;;AACrB,SAAKN,MAAM,CAACO,KAAZ;AAAmB,aAAO,uBAAP;;AACnB;AAAS,aAAO,IAAP;AARX;AAUD;;;;;"}
+{"version":3,"file":"color-f1d22e48.js","sources":["../../src/utils/color.js"],"sourcesContent":["import './color.scss';\n\nexport const 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  PRIMARY: 'PRIMARY',\n  ERROR: 'ERROR',\n};\n\nexport function changeColorToClassName(color) {\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","ONBACKGROUND_1","ONBACKGROUND_2","ONBACKGROUND_3","ONBACKGROUND_4","ONCONTENT_1","PRIMARY","ERROR","changeColorToClassName","color"],"mappings":";;IAEaA,MAAM,GAAG;AACpBC,EAAAA,cAAc,EAAE,gBADI;AAEpBC,EAAAA,cAAc,EAAE,gBAFI;AAGpBC,EAAAA,cAAc,EAAE,gBAHI;AAIpBC,EAAAA,cAAc,EAAE,gBAJI;AAKpBC,EAAAA,WAAW,EAAE,aALO;AAMpBC,EAAAA,OAAO,EAAE,SANW;AAOpBC,EAAAA,KAAK,EAAE;AAPa;AAUf,SAASC,sBAAT,CAAgCC,KAAhC,EAAuC;AAC5C,UAAQA,KAAR;AACE,SAAKT,MAAM,CAACC,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKD,MAAM,CAACE,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKF,MAAM,CAACG,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKH,MAAM,CAACI,cAAZ;AAA4B,aAAO,gCAAP;;AAC5B,SAAKJ,MAAM,CAACK,WAAZ;AAAyB,aAAO,6BAAP;;AACzB,SAAKL,MAAM,CAACM,OAAZ;AAAqB,aAAO,yBAAP;;AACrB,SAAKN,MAAM,CAACO,KAAZ;AAAmB,aAAO,uBAAP;;AACnB;AAAS,aAAO,IAAP;AARX;AAUD;;;;;"}

package/cjs/{compareIds-70f7ec01.js → compareIds-09284eb5.js}

@@ -17,4 +17,4 @@ function compareIds (a, b) {
 }
 
 exports.compareIds = compareIds;
-//# sourceMappingURL=compareIds-70f7ec01.js.map
+//# sourceMappingURL=compareIds-09284eb5.js.map

package/cjs/{compareIds-70f7ec01.js.map → compareIds-09284eb5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"compareIds-70f7ec01.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-09284eb5.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;;;;"}

package/cjs/{const-79c19d9a.js → const-6ff8b2d7.js}

@@ -19,4 +19,4 @@ var NodeNames = {
 exports.MessageInputKeys = MessageInputKeys;
 exports.NodeNames = NodeNames;
 exports.NodeTypes = NodeTypes;
-//# sourceMappingURL=const-79c19d9a.js.map
+//# sourceMappingURL=const-6ff8b2d7.js.map

package/cjs/{const-79c19d9a.js.map → const-6ff8b2d7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-79c19d9a.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-6ff8b2d7.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;;;;;;"}

package/cjs/{const-cddf6176.js → const-a0e65c1f.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-cddf6176.js.map
+//# sourceMappingURL=const-a0e65c1f.js.map

package/cjs/{const-cddf6176.js.map → const-a0e65c1f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-cddf6176.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-a0e65c1f.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-277763cc.js → context-3116d4af.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./utils-0b87e6c8.js');
+var utils = require('./utils-cb9aac85.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-277763cc.js.map
+//# sourceMappingURL=context-3116d4af.js.map

package/cjs/{context-277763cc.js.map → context-3116d4af.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-277763cc.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-3116d4af.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;;;;;"}

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,6 +47,50 @@
   .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
     background-color: var(--sendbird-dark-background-300); }
 
+.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__offline .sendbird-channel-preview {
   cursor: not-allowed; }
 
@@ -1016,6 +1016,61 @@
     background-color: var(--sendbird-dark-background-400);
     color: var(--sendbird-dark-onlight-01); }
 
+.sendbird-user-list-item {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: 432px;
+  height: 56px; }
+  .sendbird-theme--light .sendbird-user-list-item {
+    border-bottom: 1px solid var(--sendbird-light-onlight-04);
+    background-color: var(--sendbird-light-background-50); }
+  .sendbird-theme--dark .sendbird-user-list-item {
+    border-bottom: 1px solid var(--sendbird-dark-ondark-04);
+    background-color: var(--sendbird-dark-background-500); }
+  .sendbird-user-list-item .sendbird-user-list-item__avatar {
+    position: absolute;
+    top: 8px;
+    left: 0px;
+    z-index: 1;
+    cursor: pointer; }
+  .sendbird-user-list-item .sendbird-muted-avatar {
+    position: absolute;
+    top: 8px;
+    left: 0px;
+    z-index: 2;
+    pointer-events: none; }
+  .sendbird-user-list-item .sendbird-user-list-item__title {
+    position: absolute;
+    top: 17px;
+    left: 56px;
+    max-width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+  .sendbird-user-list-item .sendbird-user-list-item__subtitle {
+    position: absolute;
+    top: 23px;
+    left: 140px;
+    max-width: 237px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+  .sendbird-user-list-item .sendbird-user-list-item__checkbox {
+    position: absolute;
+    top: 16px;
+    right: 16px; }
+  .sendbird-user-list-item .sendbird-user-list-item__action {
+    position: absolute;
+    right: 0;
+    top: 10px; }
+  .sendbird-user-list-item .sendbird-user-list-item__operator {
+    position: absolute;
+    right: 40px;
+    top: 22px; }
+    .sendbird-user-list-item .sendbird-user-list-item__operator.checkbox {
+      right: 66px; }
+
 .sendbird-muted-avatar {
   border-radius: 50%;
   display: inline-block; }
@@ -1037,7 +1092,7 @@
       background-color: var(--sendbird-dark-primary-300); }
 
 .sendbird-checkbox {
-  display: block;
+  display: inline-block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
@@ -1064,9 +1119,13 @@
   border-radius: 2px;
   background-color: inherit; }
   .sendbird-theme--light .sendbird-checkbox--checkmark {
-    border: 2px solid var(--sendbird-light-background-400); }
+    border: solid 2px var(--sendbird-light-background-400); }
   .sendbird-theme--dark .sendbird-checkbox--checkmark {
-    border: 2px solid var(--sendbird-dark-background-300); }
+    border: solid 2px var(--sendbird-dark-background-300); }
+  .sendbird-theme--light .sendbird-checkbox--checkmark.disabled {
+    border: solid 2px var(--sendbird-light-onlight-04); }
+  .sendbird-theme--dark .sendbird-checkbox--checkmark.disabled {
+    border: solid 2px var(--sendbird-dark-ondark-04); }
 
 .sendbird-theme--light .sendbird-checkbox input:focus ~ .sendbird-checkbox--checkmark {
   box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300); }
@@ -1076,11 +1135,19 @@
 
 .sendbird-theme--light .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark {
   background-color: var(--sendbird-light-primary-300);
-  border: 2px solid var(--sendbird-light-primary-300); }
+  border: solid 2px var(--sendbird-light-primary-300); }
 
 .sendbird-theme--dark .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark {
   background-color: var(--sendbird-dark-primary-200);
-  border: 2px solid var(--sendbird-dark-primary-200); }
+  border: solid 2px var(--sendbird-dark-primary-200); }
+
+.sendbird-theme--light .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark.disabled {
+  background-color: var(--sendbird-light-onlight-04);
+  border: solid 2px var(--sendbird-light-onlight-04); }
+
+.sendbird-theme--dark .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark.disabled {
+  background-color: var(--sendbird-dark-ondark-04);
+  border: solid 2px var(--sendbird-dark-ondark-04); }
 
 .sendbird-checkbox--checkmark:after {
   content: "";
@@ -1123,7 +1190,7 @@
   .sendbird__user-profile .sendbird__user-profile-avatar {
     margin: 8px 0px; }
   .sendbird__user-profile .sendbird__user-profile-name {
-    max-width: 270px;
+    max-width: 250px;
     white-space: nowrap;
     overflow-x: hidden;
     text-overflow: ellipsis; }
@@ -1213,59 +1280,6 @@
   justify-content: flex-start;
   align-items: center; }
 
-.sendbird-user-list-item {
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  width: 432px;
-  height: 56px; }
-  .sendbird-theme--light .sendbird-user-list-item {
-    border-bottom: 1px solid var(--sendbird-light-onlight-04);
-    background-color: var(--sendbird-light-background-50); }
-  .sendbird-theme--dark .sendbird-user-list-item {
-    border-bottom: 1px solid var(--sendbird-dark-ondark-04);
-    background-color: var(--sendbird-dark-background-500); }
-  .sendbird-user-list-item__avatar {
-    position: absolute;
-    top: 8px;
-    left: 0px;
-    z-index: 1;
-    cursor: pointer; }
-  .sendbird-user-list-item .sendbird-muted-avatar {
-    position: absolute;
-    top: 8px;
-    left: 0px;
-    z-index: 2;
-    pointer-events: none; }
-  .sendbird-user-list-item__title {
-    position: absolute;
-    top: 17px;
-    left: 56px;
-    max-width: 280px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .sendbird-user-list-item__subtitle {
-    position: absolute;
-    top: 23px;
-    left: 140px;
-    max-width: 237px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .sendbird-user-list-item__checkbox {
-    position: absolute;
-    top: 16px;
-    right: 16px; }
-  .sendbird-user-list-item__action {
-    position: absolute;
-    right: 0;
-    top: 10px; }
-  .sendbird-user-list-item__operator {
-    position: absolute;
-    right: 40px;
-    top: 22px; }
-
 .sendbird__offline .sendbird-channel-preview {
   cursor: not-allowed; }
 
@@ -4473,7 +4487,7 @@ div.sendbird-og-message-item-body__text-bubble {
     left: 16px; }
   .sendbird-openchannel-settings .sendbird-openchannel-settings__participant {
     height: 100%; }
-    .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__participants-list {
+    .sendbird-openchannel-settings .sendbird-openchannel-settings__participant .sendbird-openchannel-settings__participant-list {
       padding-top: 64px;
       height: calc(100% - 64px);
       overflow-y: scroll; }
@@ -4558,20 +4572,55 @@ div.sendbird-og-message-item-body__text-bubble {
   .sendbird-openchannel-settings .sendbird-participants-accordion__member {
     position: relative;
     padding: 12px 0px 12px 56px;
+    width: 100%;
     height: 40px;
     box-sizing: border-box;
     text-align: left; }
     .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-label {
-      max-width: 240px;
+      max-width: 190px;
       display: inline-block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis; }
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__title.operator,
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__title.user-id {
+      position: absolute;
+      right: 16px; }
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member .sendbird-participants-accordion__member__action {
+      display: none; }
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member:hover .sendbird-participants-accordion__member__title.operator,
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member:hover .sendbird-participants-accordion__member__title.user-id {
+      display: none; }
+    .sendbird-openchannel-settings .sendbird-participants-accordion__member:hover .sendbird-participants-accordion__member__action {
+      display: inline-block; }
   .sendbird-openchannel-settings .sendbird-participants-accordion__member-avatar {
     position: absolute;
     left: 16px;
     top: 10px;
     cursor: pointer; }
+  .sendbird-openchannel-settings .sendbird-participants-accordion__member__action {
+    position: absolute;
+    display: none;
+    top: 4px;
+    right: 8px;
+    cursor: pointer; }
+  .sendbird-openchannel-settings .sendbird-openchannel-operator-list__footer,
+  .sendbird-openchannel-settings .sendbird-openchannel-participant-list__footer,
+  .sendbird-openchannel-settings .sendbird-channel-settings-muted-participant-list__footer,
+  .sendbird-openchannel-settings .sendbird-channel-settings-banned-user-list__footer {
+    padding-top: 16px;
+    display: flex;
+    justify-content: left;
+    padding-left: 12px; }
+    .sendbird-openchannel-settings .sendbird-openchannel-operator-list__footer .sendbird-button:nth-child(2),
+    .sendbird-openchannel-settings .sendbird-openchannel-participant-list__footer .sendbird-button:nth-child(2),
+    .sendbird-openchannel-settings .sendbird-channel-settings-muted-participant-list__footer .sendbird-button:nth-child(2),
+    .sendbird-openchannel-settings .sendbird-channel-settings-banned-user-list__footer .sendbird-button:nth-child(2) {
+      margin-left: 8px; }
+
+.sendbird-more-users__popup-scroll {
+  max-height: 420px;
+  overflow: scroll; }
 
 .sendbird-openchannel-profile {
   position: relative;