@sendbird/uikit-react 3.1.0-rc.0 → 3.1.1-rc.1

package/cjs/{uuid-54ad2cc3.js.map → uuid-86a50395.js.map}

@@ -1 +1 @@
-{"version":3,"file":"uuid-54ad2cc3.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;IACaA,MAAM,GAAG,SAATA,MAAS;AAAc,SAAA,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAACC,CAAD;AAC1F,QAAMC,CAAC,GAAGC,IAAI,CAACC,MAAL,KAAgB,EAAhB,GAAqB,CAA/B;AACA,QAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAJ,GAAU,GAArC;AACA,WAAOG,CAAC,CAACC,QAAF,CAAW,EAAX,CAAP;AACD,GAJmC,CAAA;AAIlC;;;;"}
+{"version":3,"file":"uuid-86a50395.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;IACaA,MAAM,GAAG,SAATA,MAAS;AAAc,SAAA,uCAAuCC,OAAvC,CAA+C,OAA/C,EAAwD,UAACC,CAAD;AAC1F,QAAMC,CAAC,GAAGC,IAAI,CAACC,MAAL,KAAgB,EAAhB,GAAqB,CAA/B;AACA,QAAMC,CAAC,GAAGJ,CAAC,KAAK,GAAN,GAAYC,CAAZ,GAAiBA,CAAC,GAAG,GAAJ,GAAU,GAArC;AACA,WAAOG,CAAC,CAACC,QAAF,CAAW,EAAX,CAAP;AACD,GAJmC,CAAA;AAIlC;;;;"}

package/cjs/withSendbird.js

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

package/{color-04ed392d.js → color-fc3db298.js}

@@ -36,4 +36,4 @@ function changeColorToClassName(color) {
 }
 
 export { Colors as C, changeColorToClassName as c };
-//# sourceMappingURL=color-04ed392d.js.map
+//# sourceMappingURL=color-fc3db298.js.map

package/{color-04ed392d.js.map → color-fc3db298.js.map}

@@ -1 +1 @@
-{"version":3,"file":"color-04ed392d.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-fc3db298.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/{compareIds-7eaf62a5.js → compareIds-3705ecf0.js}

@@ -15,4 +15,4 @@ function compareIds (a, b) {
 }
 
 export { compareIds as c };
-//# sourceMappingURL=compareIds-7eaf62a5.js.map
+//# sourceMappingURL=compareIds-3705ecf0.js.map

package/{compareIds-7eaf62a5.js.map → compareIds-3705ecf0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"compareIds-7eaf62a5.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-3705ecf0.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/{const-db8ec16d.js → const-254817e2.js}

@@ -5,4 +5,4 @@ var MAX_USER_SUGGESTION_COUNT = 15;
 var USER_MENTION_TEMP_CHAR = '@';
 
 export { MAX_USER_MENTION_COUNT as M, NEXT_RESULT_SIZE as N, PREV_RESULT_SIZE as P, USER_MENTION_TEMP_CHAR as U, MAX_USER_SUGGESTION_COUNT as a };
-//# sourceMappingURL=const-db8ec16d.js.map
+//# sourceMappingURL=const-254817e2.js.map

package/{const-db8ec16d.js.map → const-254817e2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-db8ec16d.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-254817e2.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/{const-5ab9bb9f.js → const-f1437524.js}

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

package/{const-5ab9bb9f.js.map → const-f1437524.js.map}

@@ -1 +1 @@
-{"version":3,"file":"const-5ab9bb9f.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-f1437524.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/{context-4ca94848.js → context-fd21a0e0.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { n as noop } from './utils-af217adb.js';
+import { n as noop } from './utils-e2330639.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-4ca94848.js.map
+//# sourceMappingURL=context-fd21a0e0.js.map

package/{context-4ca94848.js.map → context-fd21a0e0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-4ca94848.js","sources":["../src/ui/Accordion/context.ts"],"sourcesContent":["import React from 'react';\n\nimport { noop } from '../../utils/utils';\n\ninterface ContextValue {\n  setOpened(accordion: string): void;\n  opened: string;\n}\n\nconst Context = React.createContext<ContextValue>({\n  opened: '', // mock default value\n  setOpened: noop,\n});\n\nexport const Consumer = Context.Consumer;\nexport const Provider = Context.Provider;\n"],"names":["Context","React","createContext","opened","setOpened","noop","Consumer","Provider"],"mappings":";;;AASA,IAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC;AAFqC,CAAlC,CAAhB;IAKaC,QAAQ,GAAGN,OAAO,CAACM;IACnBC,QAAQ,GAAGP,OAAO,CAACO;;;;"}
+{"version":3,"file":"context-fd21a0e0.js","sources":["../src/ui/Accordion/context.ts"],"sourcesContent":["import React from 'react';\n\nimport { noop } from '../../utils/utils';\n\ninterface ContextValue {\n  setOpened(accordion: string): void;\n  opened: string;\n}\n\nconst Context = React.createContext<ContextValue>({\n  opened: '', // mock default value\n  setOpened: noop,\n});\n\nexport const Consumer = Context.Consumer;\nexport const Provider = Context.Provider;\n"],"names":["Context","React","createContext","opened","setOpened","noop","Consumer","Provider"],"mappings":";;;AASA,IAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC;AAFqC,CAAlC,CAAhB;IAKaC,QAAQ,GAAGN,OAAO,CAACM;IACnBC,QAAQ,GAAGP,OAAO,CAACO;;;;"}

package/dist/index.css

@@ -146,33 +146,6 @@
   .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
     color: var(--sendbird-dark-primary-200); }
 
-.sendbird-dropdown {
-  position: relative;
-  display: inline-block; }
-  .sendbird-dropdown .sendbird-dropdown__menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    min-width: 140px;
-    margin: 0px;
-    padding: 8px 0px;
-    border-radius: 4px;
-    list-style: none; }
-    .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu {
-      box-shadow: var(--sendbird-light-shadow-02);
-      background-color: var(--sendbird-light-background-50); }
-    .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu {
-      box-shadow: var(--sendbird-dark-shadow-02);
-      background-color: var(--sendbird-dark-background-500); }
-    .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
-      cursor: pointer;
-      white-space: nowrap;
-      padding: 8px 16px; }
-      .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
-        background-color: var(--sendbird-light-background-100); }
-      .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
-        background-color: var(--sendbird-dark-background-400); }
-
 .sendbird-chat-header {
   position: relative;
   display: flex;
@@ -217,6 +190,33 @@
   .sendbird-chat-header .sendbird-chat-header__right__info {
     margin-left: 16px; }
 
+.sendbird-dropdown {
+  position: relative;
+  display: inline-block; }
+  .sendbird-dropdown .sendbird-dropdown__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 140px;
+    margin: 0px;
+    padding: 8px 0px;
+    border-radius: 4px;
+    list-style: none; }
+    .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu {
+      box-shadow: var(--sendbird-light-shadow-02);
+      background-color: var(--sendbird-light-background-50); }
+    .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu {
+      box-shadow: var(--sendbird-dark-shadow-02);
+      background-color: var(--sendbird-dark-background-500); }
+    .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
+      cursor: pointer;
+      white-space: nowrap;
+      padding: 8px 16px; }
+      .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
+        background-color: var(--sendbird-light-background-100); }
+      .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
+        background-color: var(--sendbird-dark-background-400); }
+
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 :root {
   --sendbird-light-primary-500: #491389;