@sendbird/uikit-react 3.3.7 → 3.4.0-rc.0

package/cjs/consts-7142bdfe.js

@@ -0,0 +1,36 @@
+'use strict';
+
+// voice message record
+var VOICE_RECORDER_CLICK_BUFFER_TIME = 250;
+var VOICE_RECORDER_DEFAULT_MIN = 1000;
+var VOICE_RECORDER_DEFAULT_MAX = 60000;
+var VOICE_RECORDER_MIME_TYPE = 'audio/webm';
+var VOICE_RECORDER_AUDIO_BITS = 128000; // voice message play
+/**
+ * Append Audio element to the root
+ * because I can't get the Audio element in the useEffect unmount scope
+ */
+
+var VOICE_PLAYER_ROOT_ID = 'sendbird-voice-player-provider-root';
+var VOICE_PLAYER_AUDIO_ID = 'sendbird-global-audio-player-id'; // voice message file
+
+var VOICE_MESSAGE_FILE_NAME = 'Voice_message.mp3';
+var VOICE_MESSAGE_MIME_TYPE = 'audio/mp3;sbu_type=voice'; // meta array
+
+var META_ARRAY_VOICE_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';
+var META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';
+var META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = 'voice/mp3';
+
+exports.META_ARRAY_MESSAGE_TYPE_KEY = META_ARRAY_MESSAGE_TYPE_KEY;
+exports.META_ARRAY_MESSAGE_TYPE_VALUE__VOICE = META_ARRAY_MESSAGE_TYPE_VALUE__VOICE;
+exports.META_ARRAY_VOICE_DURATION_KEY = META_ARRAY_VOICE_DURATION_KEY;
+exports.VOICE_MESSAGE_FILE_NAME = VOICE_MESSAGE_FILE_NAME;
+exports.VOICE_MESSAGE_MIME_TYPE = VOICE_MESSAGE_MIME_TYPE;
+exports.VOICE_PLAYER_AUDIO_ID = VOICE_PLAYER_AUDIO_ID;
+exports.VOICE_PLAYER_ROOT_ID = VOICE_PLAYER_ROOT_ID;
+exports.VOICE_RECORDER_AUDIO_BITS = VOICE_RECORDER_AUDIO_BITS;
+exports.VOICE_RECORDER_CLICK_BUFFER_TIME = VOICE_RECORDER_CLICK_BUFFER_TIME;
+exports.VOICE_RECORDER_DEFAULT_MAX = VOICE_RECORDER_DEFAULT_MAX;
+exports.VOICE_RECORDER_DEFAULT_MIN = VOICE_RECORDER_DEFAULT_MIN;
+exports.VOICE_RECORDER_MIME_TYPE = VOICE_RECORDER_MIME_TYPE;
+//# sourceMappingURL=consts-7142bdfe.js.map

package/cjs/consts-7142bdfe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts-7142bdfe.js","sources":["../../src/utils/consts.ts"],"sourcesContent":["// voice message record\nexport const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;\nexport const VOICE_RECORDER_DEFAULT_MIN = 1000;\nexport const VOICE_RECORDER_DEFAULT_MAX = 60000;\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":["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":";;AAAA;AACO,IAAMA,gCAAgC,GAAG,IAAzC;AACA,IAAMC,0BAA0B,GAAG,KAAnC;AACA,IAAMC,0BAA0B,GAAG,MAAnC;AACA,IAAMC,wBAAwB,GAAG,aAAjC;AACMC,IAAAA,yBAAyB,GAAG;AAMzC;;;AAGG;;AACI,IAAMC,oBAAoB,GAAG,sCAA7B;AACMC,IAAAA,qBAAqB,GAAG;;AAG9B,IAAMC,uBAAuB,GAAG,oBAAhC;AACMC,IAAAA,uBAAuB,GAAG;;AAGhC,IAAMC,6BAA6B,GAAG,6BAAtC;AACA,IAAMC,2BAA2B,GAAG,4BAApC;AACA,IAAMC,oCAAoC,GAAG;;;;;;;;;;;;;;;"}

package/cjs/{context-4b1de73e.js → context-9f945182.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./utils-aa1597cc.js');
+var utils = require('./utils-178ccede.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-4b1de73e.js.map
+//# sourceMappingURL=context-9f945182.js.map

package/cjs/{context-4b1de73e.js.map → context-9f945182.js.map}

@@ -1 +1 @@
-{"version":3,"file":"context-4b1de73e.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,UAAAA;AAFqC,CAAlC,CAAhB,CAAA;AAKaC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAzB;AACMC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;;"}
+{"version":3,"file":"context-9f945182.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,UAAAA;AAFqC,CAAlC,CAAhB,CAAA;AAKaC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAzB;AACMC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;;"}

package/cjs/dist/index.css

@@ -782,6 +782,13 @@
   fill: var(--sendbird-dark-primary-200);
 }
 
+.sendbird-theme--light .sendbird-icon-color--primary-2 [class*=fill] {
+  fill: var(--sendbird-light-primary-200);
+}
+.sendbird-theme--dark .sendbird-icon-color--primary-2 [class*=fill] {
+  fill: var(--sendbird-dark-primary-400);
+}
+
 .sendbird-theme--light .sendbird-icon-color--primary [class*=stroke] {
   stroke: var(--sendbird-light-primary-300);
   stroke-width: 2px;
@@ -857,6 +864,13 @@
   fill: var(--sendbird-dark-ondark-03);
 }
 
+.sendbird-theme--light .sendbird-icon-color--on-background-4 [class*=fill] {
+  fill: var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-icon-color--on-background-4 [class*=fill] {
+  fill: var(--sendbird-dark-ondark-04);
+}
+
 .sendbird-theme--light .sendbird-icon-color--background-3 [class*=fill] {
   fill: var(--sendbird-light-background-300);
 }
@@ -2433,6 +2447,12 @@
   animation-duration: 1.6s;
   animation-fill-mode: forwards;
 }
+.sendbird-msg-hoc__highlighted .sendbird-voice-message-item-body {
+  display: block;
+  animation-name: sbHighlightBlock;
+  animation-duration: 1.6s;
+  animation-fill-mode: forwards;
+}
 .sendbird-msg-hoc__highlighted .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__image-cover {
   display: block;
   animation-name: sbHighlightBlock;
@@ -2529,7 +2549,7 @@
   text-overflow: ellipsis;
 }
 .sendbird-chat-header .sendbird-chat-header__right__mute {
-  margin-right: 26px;
+  margin-right: 18px;
 }
 .sendbird-chat-header .sendbird-iconbutton--pressed {
   background-color: inherit;
@@ -2756,13 +2776,16 @@
   font-size: 14px;
   line-height: 1.43;
 }
-.sendbird-theme--light .sendbird-message-input .sendbird-message-input--placeholder {
-  color: var(--sendbird-light-onlight-03);
+.sendbird-message-input .sendbird-message-input--attach {
+  position: absolute;
+  padding: 6px;
+  right: 16px;
+  bottom: 14px;
 }
-.sendbird-theme--dark .sendbird-message-input .sendbird-message-input--placeholder {
-  color: var(--sendbird-dark-ondark-03);
+.sendbird-message-input .sendbird-message-input--attach.is-voice-message-enabled {
+  right: 48px;
 }
-.sendbird-message-input .sendbird-message-input--attach {
+.sendbird-message-input .sendbird-message-input--voice-message {
   position: absolute;
   padding: 6px;
   right: 16px;
@@ -2818,16 +2841,12 @@
   cursor: disabled;
 }
 .sendbird-theme--light .sendbird-message-input__disabled .sendbird-message-input--textarea {
-  background-color: var(--sendbird-light-background-100);
+  color: var(--sendbird-light-onlight-04);
+  border: 1px solid var(--sendbird-light-onlight-04);
 }
 .sendbird-theme--dark .sendbird-message-input__disabled .sendbird-message-input--textarea {
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-theme--light .sendbird-message-input__disabled svg {
-  fill: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-message-input__disabled svg {
-  fill: var(--sendbird-dark-ondark-03);
+  color: var(--sendbird-dark-ondark-04);
+  border: 1px solid var(--sendbird-dark-ondark-04);
 }
 .sendbird-message-content {
   position: relative;
@@ -2977,8 +2996,7 @@
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container {
   position: relative;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 100%;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   position: absolute;
@@ -3054,6 +3072,11 @@
 .sendbird-message-content__middle__thread-replies {
   margin-top: 4px;
 }
+
+.sendbird-voice-message-item-body.sendbird-message-content__middle__message-item-body {
+  min-width: 136px;
+  height: 50px;
+}
 .sendbird-message-item-menu__list__menu-item:focus-visible {
   outline: none;
 }
@@ -4086,6 +4109,114 @@ div.sendbird-og-message-item-body__text-bubble {
   position: relative;
   display: inline-flex;
 }
+.sendbird-voice-message-item-body {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.sendbird-voice-message-item-body.is-reactions-contained {
+  border-radius: 16px 16px 0px 0px;
+}
+
+.sendbird-voice-message-item-body__progress-bar {
+  position: absolute;
+  width: 100%;
+  height: 50px;
+}
+
+.sendbird-voice-message-item-body__status-button {
+  position: relative;
+  top: 8px;
+  left: 12px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+}
+
+.sendbird-voice-message-item-body__status-button__button {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-voice-message-item-body__status-button__button {
+  background-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-voice-message-item-body__status-button__button {
+  background-color: var(--sendbird-dark-background-600);
+}
+
+.sendbird-voice-message-item-body__playback-time {
+  position: absolute;
+  top: 15px;
+  right: 12px;
+}
+
+.sendbird-voice-message-item-body__status-button__button__pause {
+  position: relative;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 13.75px;
+  height: 13.75px;
+}
+
+.sendbird-voice-message-item-body__status-button__button__pause__inner {
+  position: relative;
+  display: inline-flex;
+  width: 4.38px;
+  height: 13.75px;
+  border-radius: 2px;
+}
+.sendbird-theme--light .sendbird-voice-message-item-body__status-button__button__pause__inner {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-voice-message-item-body__status-button__button__pause__inner {
+  background-color: var(--sendbird-dark-primary-200);
+}
+.sendbird-progress-bar, .sendbird-progress-bar__fill {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+.sendbird-progress-bar {
+  justify-content: flex-start;
+}
+
+.sendbird-theme--light .sendbird-progress-bar__fill {
+  background-color: var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-progress-bar__fill {
+  background-color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-theme--light .progress-bar-color--primary {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .progress-bar-color--primary {
+  background-color: var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--light .sendbird-progress-bar.progress-bar--disabled, .sendbird-theme--light .progress-bar-color--gray {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-progress-bar.progress-bar--disabled, .sendbird-theme--dark .progress-bar-color--gray {
+  background-color: var(--sendbird-dark-background-500);
+}
+
+.sendbird-progress-bar.progress-bar--disabled .sendbird-progress-bar__fill {
+  background-color: transparent;
+}
 .sendbird-fileviewer__header__right__actions__download,
 .sendbird-fileviewer__header__right__actions__delete,
 .sendbird-fileviewer__header__right__actions__close {
@@ -4296,20 +4427,25 @@ div.sendbird-og-message-item-body__text-bubble {
   justify-content: center;
   margin-right: 8px;
 }
+.sendbird-message-input-wrapper--voice-message,
 .sendbird-message-input-wrapper {
   position: relative;
   width: 100%;
 }
+.sendbird-message-input-wrapper--voice-message .sendbird-message-input-wrapper__quote-message-input,
 .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
   position: relative;
   width: 100%;
 }
+.sendbird-theme--light .sendbird-message-input-wrapper--voice-message .sendbird-message-input-wrapper__quote-message-input,
 .sendbird-theme--light .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
   border-top: solid 1px var(--sendbird-light-onlight-04);
 }
+.sendbird-theme--dark .sendbird-message-input-wrapper--voice-message .sendbird-message-input-wrapper__quote-message-input,
 .sendbird-theme--dark .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
   border-top: solid 1px var(--sendbird-dark-ondark-04);
 }
+.sendbird-message-input-wrapper--voice-message .sendbird-message-input-wrapper__message-input,
 .sendbird-message-input-wrapper .sendbird-message-input-wrapper__message-input {
   position: relative;
   width: 100%;
@@ -4317,6 +4453,13 @@ div.sendbird-og-message-item-body__text-bubble {
   padding-left: 24px;
   padding-right: 24px;
 }
+
+.sendbird-theme--light .sendbird-message-input-wrapper--voice-message {
+  border-top: 1px solid var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-message-input-wrapper--voice-message {
+  border-top: 1px solid var(--sendbird-dark-ondark-04);
+}
 .sendbird-quote_message_input {
   position: relative;
   padding: 16px 80px 16px 40px;
@@ -4375,6 +4518,207 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-quote_message_input .sendbird-quote_message_input__close-button:hover {
   cursor: pointer;
 }
+.sendbird-voice-message-input-wrapper .sendbird-voice-message-input__indicator {
+  height: 40px;
+}
+
+.sendbird-voice-message-input-wrapper-alert__body {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: 100%;
+  height: 74px;
+}
+
+.sendbird-voice-message-input-wrapper-alert__body__ok-button {
+  width: 74px;
+}
+.sendbird-voice-message-input {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  height: 110px;
+  padding-top: 22px;
+  padding-left: 24px;
+  padding-right: 24px;
+  box-sizing: border-box;
+}
+
+.sendbird-voice-message-input__indicator {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.sendbird-voice-message-input__indicator__progress-bar {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  border-radius: 28px;
+  overflow: hidden;
+}
+
+.sendbird-voice-message-input__indicator__on-rec {
+  position: absolute;
+  top: 14px;
+  right: 53px;
+}
+
+.sendbird-voice-message-input__indicator__playback-time {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+}
+
+.sendbird-voice-message-input__controler {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 14px;
+  height: 34px;
+  min-height: 34px;
+}
+
+.sendbird-voice-message-input__controler__main {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-voice-message-input__controler__main {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-voice-message-input__controler__main {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-voice-message-input__controler__main:hover {
+  cursor: pointer;
+}
+
+.sendbird-voice-message-input__controler__submit {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-voice-message-input__controler__submit {
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-voice-message-input__controler__submit {
+  background-color: var(--sendbird-dark-primary-200);
+}
+.sendbird-voice-message-input__controler__submit:hover {
+  cursor: pointer;
+}
+
+.sendbird-theme--light .sendbird-voice-message-input__controler__submit.voice-message--disabled {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-voice-message-input__controler__submit.voice-message--disabled {
+  background-color: var(--sendbird-dark-background-500);
+}
+.sendbird-voice-message-input__controler__submit.voice-message--disabled:hover {
+  cursor: default;
+}
+
+@keyframes flickerAnimation {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.sendbird-voice-message-input__indicator__on-rec {
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  border-radius: 50%;
+  animation: flickerAnimation 1s infinite;
+}
+.sendbird-theme--light .sendbird-voice-message-input__indicator__on-rec {
+  background-color: var(--sendbird-light-error-300);
+}
+.sendbird-theme--dark .sendbird-voice-message-input__indicator__on-rec {
+  background-color: var(--sendbird-dark-error-300);
+}
+
+.sendbird-voice-message-input__indicator__progress-bar__bar {
+  height: 40px;
+}
+
+.sendbird-controler-icon {
+  position: relative;
+  display: inline-block;
+}
+
+.sendbird-controler-icon.record-icon {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  border-radius: 50%;
+}
+.sendbird-theme--light .sendbird-controler-icon.record-icon {
+  background-color: var(--sendbird-light-error-300);
+}
+.sendbird-theme--dark .sendbird-controler-icon.record-icon {
+  background-color: var(--sendbird-dark-error-300);
+}
+
+.sendbird-controler-icon.stop-icon {
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+  border-radius: 2px;
+}
+.sendbird-theme--light .sendbird-controler-icon.stop-icon {
+  background-color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-controler-icon.stop-icon {
+  background-color: var(--sendbird-dark-ondark-01);
+}
+
+.sendbird-controler-icon.pause-icon {
+  display: inline-flex;
+  width: 100%;
+  gap: 3.75px;
+  width: 13.75px;
+  height: 13.75px;
+  min-width: 13.75px;
+  min-height: 13.75px;
+}
+
+.sendbird-controler-icon.pause-icon-inner {
+  display: inline-flex;
+  min-width: 4.38px;
+  border-radius: 2px;
+}
+.sendbird-theme--light .sendbird-controler-icon.pause-icon-inner {
+  background-color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-controler-icon.pause-icon-inner {
+  background-color: var(--sendbird-dark-ondark-01);
+}
 .sendbird-channel-settings {
   height: 100%;
   width: 320px;
@@ -4778,6 +5122,42 @@ div.sendbird-og-message-item-body__text-bubble {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sendbird-more-members__popup-scroll {
+  max-height: 420px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.sendbird--mobile-mode .sendbird-more-members__popup-scroll {
+  max-height: 100%;
+}
+.sendbird-more-members__popup-scroll .sendbird-user-list-item__operator {
+  right: 72px;
+}
+.sendbird-more-members__popup-scroll .sendbird-user-list-item__title {
+  max-width: 240px;
+}
+
+.sendbird-channel-settings__badge {
+  position: absolute;
+  right: 48px;
+}
+.sendbird-theme--light .sendbird-channel-settings__badge {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-channel-settings__badge {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-channel-settings__badge .sendbird-label {
+  color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-channel-settings__badge .sendbird-label {
+  color: var(--sendbird-dark-ondark-02);
+}
+
+.sendbird-channel-settings__user-panel .sendbird-channel-settings-accordion__footer {
+  padding-left: 14px;
+  padding-top: 14px;
+}
 .sendbird-message-search-pannel {
   position: relative;
   display: flex;
@@ -5427,6 +5807,11 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-parent-message-info-item__thumbnail-message:hover .sendbird-parent-message-info-item__thumbnail-message__image-cover {
   display: inline-flex;
 }
+
+.sendbird-parent-message-info-item__voice-message__item {
+  min-width: 136px;
+  height: 50px;
+}
 .sendbird-fileviewer__header__right__actions__download,
 .sendbird-fileviewer__header__right__actions__delete,
 .sendbird-fileviewer__header__right__actions__close {
@@ -5867,6 +6252,11 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-thread-list-item-content__middle__message-item-body .sendbird-thumbnail-message-item-body__video {
   height: 148px;
 }
+
+.sendbird-voice-message-item-body.sendbird-thread-list-item-content__middle__message-item-body {
+  min-width: 136px;
+  height: 50px;
+}
 .sendbird-thread-message-input .sendbird-mention-suggest-list {
   width: 100%;
   margin-left: 0px;
@@ -5885,6 +6275,13 @@ div.sendbird-og-message-item-body__text-bubble {
 .sendbird-thread-message-input .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
   max-width: 46px;
 }
+
+.sendbird-theme--light .sendbird-thread-message-input--voice-message {
+  border-top: 1px solid var(--sendbird-light-onlight-04);
+}
+.sendbird-theme--dark .sendbird-thread-message-input--voice-message {
+  border-top: 1px solid var(--sendbird-dark-ondark-04);
+}
 .sb_mobile__panelwrap {
   height: 100vh;
 }