@sendbird/uikit-react 3.4.9 → 3.5.0-feature-config-rc-0

package/cjs/dist/index.css

@@ -130,7 +130,7 @@
   margin-left: 16px;
   display: inline-flex;
   flex-direction: column;
-  max-width: 178px;
+  width: calc(100% - 100px);
   box-sizing: border-box;
 }
 .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title {
@@ -145,8 +145,10 @@
 .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%;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   box-sizing: border-box;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -155,6 +157,9 @@
 .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--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name {
+  overflow-y: hidden;
+}
 .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;
@@ -189,6 +194,64 @@
   text-overflow: ellipsis;
   word-break: keep-all;
 }
+.sendbird--mobile-mode .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__participants .sendbird-open-channel-preview__context__participants__count {
+  overflow-y: hidden;
+}
+.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;
+}
 .sendbird-open-channel-list,
 .sendbird-open-channel-list-ui {
   position: relative;
@@ -283,61 +346,6 @@
 .sendbird-theme--dark .sendbird-open-channel-list-ui__channel-list--place-holder--loading {
   background-color: var(--sendbird-dark-background-500);
 }
-.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 {
   --sendbird-light-primary-500: #491389;
@@ -504,108 +512,432 @@
 .sendbird-experimental__rem__units .sendbird-quote-message .sendbird-quote-message__replied-message__file-message {
   font-size: 0.75rem;
 }
-.sendbird-channel-list {
-  width: 320px;
+.sendbird-modal--full-mobile .sendbird-modal__content {
+  width: 100vw;
+  max-width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
 }
-.sendbird-theme--light .sendbird-channel-list {
-  background-color: var(--sendbird-light-background-50);
-}
-.sendbird-theme--dark .sendbird-channel-list {
-  background-color: var(--sendbird-dark-background-600);
+.sendbird--mobile-mode .sendbird-modal--full-mobile .sendbird-modal__content {
+  height: -webkit-fill-available;
+  height: -moz-available;
+  height: stretch;
 }
-.sendbird--mobile-mode .sendbird-channel-list {
+
+.sendbird-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.sendbird-channel-list__header {
-  height: 64px;
-  min-height: 64px;
+.sendbird-modal__backdrop--clickoutside {
+  cursor: pointer;
 }
 
-.sendbird-channel-list__body {
-  flex: 1 1 0;
-  -ms-flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+.sendbird-modal__content {
+  width: 480px;
+  border-radius: 4px;
+  z-index: 10001;
+  padding: 18px 24px 24px 24px;
+  position: relative;
+  box-sizing: border-box;
 }
-.sendbird-label {
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
+.sendbird-theme--light .sendbird-modal__content {
+  background-color: var(--sendbird-light-background-50);
+  box-shadow: var(--sendbird-light-shadow-04);
 }
-
-[class*=sendbird-label] {
-  font-family: var(--sendbird-font-family-default);
+.sendbird-theme--dark .sendbird-modal__content {
+  background-color: var(--sendbird-dark-background-500);
+  box-shadow: var(--sendbird-dark-shadow-04);
 }
-
-.sendbird-label--h-1 {
-  font-size: 20px;
-  font-weight: 600;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.4;
-  letter-spacing: -0.2px;
+.sendbird-modal__content .sendbird-modal__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
 }
-
-.sendbird-label--h-2 {
-  font-size: 18px;
-  font-weight: 600;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: -0.2px;
+.sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
+  fill: var(--sendbird-light-onlight-01);
 }
-
-.sendbird-label--subtitle-1 {
-  font-size: 16px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.38;
-  letter-spacing: -0.2px;
+.sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
+  fill: var(--sendbird-dark-ondark-01);
 }
-
-.sendbird-label--subtitle-2 {
-  font-size: 14px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.14;
-  letter-spacing: -0.2px;
+.sendbird-modal__content .sendbird-modal__header {
+  margin-bottom: 16px;
 }
-
-.sendbird-label--body-1 {
-  font-size: 14px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.43;
-  letter-spacing: normal;
+.sendbird-modal__content .sendbird-modal__body {
+  height: calc(100% - 116px);
 }
-
-.sendbird-label--body-2 {
-  font-size: 12px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.33;
-  letter-spacing: normal;
+.sendbird-modal__content .sendbird-modal__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 32px;
+  text-align: right;
 }
-
-.sendbird-label--button-1 {
-  font-size: 14px;
-  font-weight: 600;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.43;
-  letter-spacing: normal;
+.sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
+  position: sticky;
+  bottom: 24px;
 }
-
-.sendbird-label--button-2 {
-  font-size: 14px;
+.sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
+  margin-left: 8px;
+  min-width: 80px;
+  height: 40px;
+}
+
+.sendbird-modal__backdrop {
+  position: fixed;
+  z-index: 10000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.sendbird-theme--light .sendbird-modal__backdrop {
+  background-color: var(--sendbird-light-overlay-02);
+}
+.sendbird-theme--dark .sendbird-modal__backdrop {
+  background-color: var(--sendbird-dark-overlay-02);
+}
+.sendbird-button {
+  display: inline-block;
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0px;
+  font-family: var(--sendbird-font-family-default);
+  cursor: pointer;
+}
+.sendbird-button:hover {
+  box-shadow: none;
+}
+.sendbird-button:focus {
+  outline: none;
+}
+.sendbird-button:active {
+  box-shadow: none;
+}
+.sendbird-button.sendbird-button__disabled {
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-button.sendbird-button__disabled {
+  border: none;
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
+  border: none;
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
+  background-color: var(--sendbird-dark-background-400);
+}
+
+.sendbird-button--big {
+  height: 40px;
+}
+.sendbird-button--big .sendbird-button__text {
+  margin: 10px 16px;
+}
+
+.sendbird-button--small {
+  height: 32px;
+}
+.sendbird-button--small .sendbird-button__text {
+  margin: 6px 16px;
+}
+
+.sendbird-theme--light .sendbird-button--primary {
+  border: 1px solid var(--sendbird-light-primary-300);
+  background-color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--primary {
+  border: 1px solid var(--sendbird-dark-primary-200);
+  background-color: var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
+  color: var(--sendbird-light-ondark-01);
+}
+.sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
+  color: var(--sendbird-dark-onlight-01);
+}
+.sendbird-theme--light .sendbird-button--primary:hover {
+  background-color: var(--sendbird-light-primary-400);
+  border-color: var(--sendbird-light-primary-400);
+}
+.sendbird-theme--dark .sendbird-button--primary:hover {
+  background-color: var(--sendbird-dark-primary-300);
+  border-color: var(--sendbird-dark-primary-300);
+}
+.sendbird-theme--light .sendbird-button--primary:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300);
+  border: 1px solid var(--sendbird-button-border-focus);
+}
+.sendbird-theme--dark .sendbird-button--primary:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200);
+  border: 1px solid var(--sendbird-button-border-focus);
+}
+.sendbird-theme--light .sendbird-button--primary:active {
+  background-color: var(--sendbird-light-primary-500);
+}
+.sendbird-theme--dark .sendbird-button--primary:active {
+  background-color: var(--sendbird-dark-primary-400);
+}
+.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-400);
+}
+.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-300);
+}
+.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-500);
+}
+.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-400);
+}
+
+.sendbird-button--secondary {
+  background-color: transparent;
+}
+.sendbird-theme--light .sendbird-button--secondary {
+  border: 1px solid var(--sendbird-light-onlight-03);
+}
+.sendbird-theme--dark .sendbird-button--secondary {
+  border: 1px solid var(--sendbird-dark-ondark-03);
+}
+.sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
+  color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
+  color: var(--sendbird-dark-ondark-01);
+}
+.sendbird-button--secondary:hover {
+  background-color: transparent;
+}
+.sendbird-theme--light .sendbird-button--secondary:hover {
+  border: 1px solid var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--secondary:hover {
+  border: 1px solid var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
+  color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
+  color: var(--sendbird-dark-primary-200);
+}
+.sendbird-button--secondary.sendbird-button__disabled {
+  cursor: not-allowed;
+  border: none;
+}
+.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
+  color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
+  color: var(--sendbird-dark-ondark-02);
+}
+.sendbird-button--secondary.sendbird-button__disabled:hover {
+  border: none;
+}
+.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
+  background-color: var(--sendbird-light-background-200);
+}
+.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
+  color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
+  color: var(--sendbird-dark-ondark-02);
+}
+.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
+  color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
+  color: var(--sendbird-dark-primary-200);
+}
+.sendbird-button--secondary:focus {
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+.sendbird-theme--light .sendbird-button--secondary:focus {
+  box-shadow: var(--sendbird-light-primary-300) 0px 0px 0px 2px;
+}
+.sendbird-theme--dark .sendbird-button--secondary:focus {
+  box-shadow: var(--sendbird-dark-primary-200) 0px 0px 0px 2px;
+}
+.sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
+  color: var(--sendbird-light-onlight-01);
+}
+.sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
+  color: var(--sendbird-dark-ondark-01);
+}
+.sendbird-button--secondary:active {
+  box-shadow: none;
+}
+.sendbird-theme--light .sendbird-button--secondary:active {
+  border: 1px solid var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--secondary:active {
+  border: 1px solid var(--sendbird-dark-primary-200);
+}
+.sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
+  color: var(--sendbird-light-primary-300);
+}
+.sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
+  color: var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--light .sendbird-button--danger {
+  border: 1px solid var(--sendbird-light-error-300);
+  background-color: var(--sendbird-light-error-300);
+}
+.sendbird-theme--dark .sendbird-button--danger {
+  border: 1px solid var(--sendbird-dark-error-200);
+  background-color: var(--sendbird-dark-error-200);
+}
+.sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
+  color: var(--sendbird-light-ondark-01);
+}
+.sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
+  color: var(--sendbird-dark-onlight-01);
+}
+.sendbird-theme--light .sendbird-button--danger:hover {
+  background-color: var(--sendbird-light-error-400);
+  border-color: var(--sendbird-light-error-400);
+}
+.sendbird-theme--dark .sendbird-button--danger:hover {
+  background-color: var(--sendbird-dark-error-400);
+  border-color: var(--sendbird-dark-error-400);
+}
+.sendbird-theme--light .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-300);
+  border-color: var(--sendbird-button-border-focus);
+}
+.sendbird-theme--dark .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-300);
+  border-color: var(--sendbird-button-border-focus);
+}
+.sendbird-button--danger:active {
+  box-shadow: none;
+}
+.sendbird-theme--light .sendbird-button--danger:active {
+  background-color: var(--sendbird-light-error-500);
+}
+.sendbird-theme--dark .sendbird-button--danger:active {
+  background-color: var(--sendbird-dark-error-500);
+}
+.sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-400);
+}
+.sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-400);
+}
+.sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-500);
+}
+.sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
+  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-500);
+}
+
+.sendbird-button--disabled {
+  border: 1px solid transparent;
+  cursor: not-allowed;
+}
+.sendbird-theme--light .sendbird-button--disabled {
+  background-color: var(--sendbird-light-background-200);
+  color: var(--sendbird-light-ondark-01);
+}
+.sendbird-theme--dark .sendbird-button--disabled {
+  background-color: var(--sendbird-dark-background-400);
+  color: var(--sendbird-dark-onlight-01);
+}
+.sendbird--mobile-mode .sendbird-label {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+[class*=sendbird-label] {
+  font-family: var(--sendbird-font-family-default);
+}
+
+.sendbird-label--h-1 {
+  font-size: 20px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: -0.2px;
+}
+
+.sendbird-label--h-2 {
+  font-size: 18px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: -0.2px;
+}
+
+.sendbird-label--subtitle-1 {
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.38;
+  letter-spacing: -0.2px;
+}
+
+.sendbird-label--subtitle-2 {
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.14;
+  letter-spacing: -0.2px;
+}
+
+.sendbird-label--body-1 {
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+}
+
+.sendbird-label--body-2 {
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+}
+
+.sendbird-label--button-1 {
+  font-size: 14px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+}
+
+.sendbird-label--button-2 {
+  font-size: 14px;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
@@ -695,97 +1027,11 @@
   color: var(--sendbird-dark-error-200);
 }
 
-.sendbird-theme--light .sendbird-label--color-secondary-3 {
-  color: var(--sendbird-light-secondary-300);
-}
-.sendbird-theme--dark .sendbird-label--color-secondary-3 {
-  color: var(--sendbird-dark-secondary-200);
-}
-.sendbird-channel-header {
-  position: relative;
-  height: 64px;
-  min-height: 64px;
-  width: 320px;
-  padding: 8px 64px 8px 8px;
-  box-sizing: border-box;
-}
-.sendbird-theme--light .sendbird-channel-header {
-  border-bottom: 1px solid var(--sendbird-light-onlight-04);
-  background-color: var(--sendbird-light-background-50);
-}
-.sendbird-theme--dark .sendbird-channel-header {
-  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
-  background-color: var(--sendbird-dark-background-600);
-}
-.sendbird--mobile-mode .sendbird-channel-header {
-  width: 100%;
-}
-.sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
-  cursor: pointer;
-}
-.sendbird-channel-header .sendbird-channel-header__title {
-  display: flex;
-  flex-direction: row;
-  width: 260px;
-  height: 48px;
-  border-radius: 4px;
-}
-.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:hover {
-  background: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:hover {
-  background: var(--sendbird-dark-background-500);
-}
-.sendbird-channel-header .sendbird-channel-header__title:focus {
-  outline: none;
-}
-.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:focus {
-  background: var(--sendbird-light-background-200);
-}
-.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:focus {
-  background: var(--sendbird-dark-background-400);
-}
-.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:active {
-  border: solid 2px var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:active {
-  border: solid 2px var(--sendbird-dark-primary-200);
-}
-.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__left {
-  width: 48px;
-  padding: 8px;
-  box-sizing: border-box;
-}
-.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right {
-  margin-left: 4px;
-  padding-top: 8px;
-}
-.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__name,
-.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__user-id {
-  display: block;
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sendbird-channel-header .sendbird-channel-header__right-icon {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-}
-.sendbird-image-renderer {
-  overflow: hidden;
-  position: relative;
-}
-
-.sendbird-image-renderer__hidden-image-loader {
-  display: none;
+.sendbird-theme--light .sendbird-label--color-secondary-3 {
+  color: var(--sendbird-light-secondary-300);
 }
-
-.sendbird-image-renderer,
-.sendbird-image-renderer__image {
-  width: 320px;
-  height: 180px;
+.sendbird-theme--dark .sendbird-label--color-secondary-3 {
+  color: var(--sendbird-dark-secondary-200);
 }
 .sendbird-icon {
   display: inline-block;
@@ -836,592 +1082,354 @@
 .sendbird-theme--light .sendbird-icon-color--content-inverse [class*=fill] {
   fill: var(--sendbird-light-onlight-01);
 }
-.sendbird-theme--dark .sendbird-icon-color--content-inverse [class*=fill] {
-  fill: var(--sendbird-dark-ondark-01);
-}
-
-.sendbird-icon-color--white [class*=fill] {
-  fill: #ffffff;
-}
-
-.sendbird-icon-color--gray [class*=fill] {
-  fill: var(--sendbird-light-onlight-04);
-}
-
-.sendbird-theme--light .sendbird-icon-color--sent [class*=fill] {
-  fill: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-icon-color--sent [class*=fill] {
-  fill: var(--sendbird-dark-ondark-03);
-}
-
-.sendbird-theme--light .sendbird-icon-color--read [class*=fill] {
-  fill: var(--sendbird-light-secondary-300);
-}
-.sendbird-theme--dark .sendbird-icon-color--read [class*=fill] {
-  fill: var(--sendbird-dark-secondary-200);
-}
-
-.sendbird-theme--light .sendbird-icon-color--on-background-1 [class*=fill] {
-  fill: var(--sendbird-light-onlight-01);
-}
-.sendbird-theme--dark .sendbird-icon-color--on-background-1 [class*=fill] {
-  fill: var(--sendbird-dark-ondark-01);
-}
-
-.sendbird-theme--light .sendbird-icon-color--on-background-2 [class*=fill] {
-  fill: var(--sendbird-light-onlight-02);
-}
-.sendbird-theme--dark .sendbird-icon-color--on-background-2 [class*=fill] {
-  fill: var(--sendbird-dark-ondark-02);
-}
-
-.sendbird-theme--light .sendbird-icon-color--on-background-3 [class*=fill] {
-  fill: var(--sendbird-light-onlight-03);
-}
-.sendbird-theme--dark .sendbird-icon-color--on-background-3 [class*=fill] {
-  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);
-}
-.sendbird-theme--dark .sendbird-icon-color--background-3 [class*=fill] {
-  fill: var(--sendbird-dark-background-400);
-}
-
-.sendbird-theme--light .sendbird-icon-color--error [class*=fill] {
-  fill: var(--sendbird-light-error-300);
-}
-.sendbird-theme--dark .sendbird-icon-color--error [class*=fill] {
-  fill: var(--sendbird-dark-error-200);
-}
-.sendbird-avatar {
-  display: inline-block;
-  overflow: hidden;
-  border-radius: 50%;
-  position: relative;
-}
-.sendbird-avatar:focus {
-  outline: none;
-}
-.sendbird-avatar .sendbird-avatar-img {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
-  background-color: var(--sendbird-light-background-300);
-}
-.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img {
-  background-color: var(--sendbird-dark-background-300);
-}
-.sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:first-child {
-  transform: translate(2%, -50%);
-}
-.sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:last-child {
-  transform: translate(-102%, -50%);
-}
-.sendbird-avatar .sendbird-avatar--inner__three-child--upper .sendbird-avatar-img:first-child {
-  transform: translate(-50%, -102%);
-}
-.sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:first-child {
-  transform: translate(-77%, -23%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:last-child {
-  transform: translate(-23%, -23%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:first-child {
-  transform: translate(-77%, -77%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(2) {
-  transform: translate(-23%, -77%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(3) {
-  transform: translate(-77%, -23%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:last-child {
-  transform: translate(-23%, -23%) scale(0.5);
-}
-.sendbird-avatar .sendbird-avatar-img--default {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
-  background-color: var(--sendbird-light-background-300);
-}
-.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
-  background-color: var(--sendbird-dark-background-300);
-}
-.sendbird-iconbutton {
-  color: var(--sendbird-iconbutton-color);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3px;
-  background-color: transparent;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  outline: 0px;
-}
-.sendbird-iconbutton .sendbird-iconbutton__inner {
-  height: 100%;
-}
-.sendbird-theme--light .sendbird-iconbutton .sendbird-iconbutton__inner svg {
-  fill: var(--sendbird-light-onlight-01);
-}
-.sendbird-theme--dark .sendbird-iconbutton .sendbird-iconbutton__inner svg {
-  fill: var(--sendbird-dark-ondark-01);
-}
-.sendbird-theme--light .sendbird-iconbutton:hover {
-  background-color: var(--sendbird-light-background-100);
-}
-.sendbird-theme--dark .sendbird-iconbutton:hover {
-  background-color: var(--sendbird-dark-background-500);
-}
-.sendbird-theme--light .sendbird-iconbutton:active {
-  background-color: var(--sendbird-light-background-200);
-}
-.sendbird-theme--dark .sendbird-iconbutton:active {
-  background-color: var(--sendbird-dark-background-400);
-}
-.sendbird-iconbutton:disabled {
-  cursor: not-allowed !important;
-}
-.sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
-  fill: var(--sendbird-light-onlight-02);
-}
-.sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
-  fill: var(--sendbird-dark-ondark-02);
-}
-
-.sendbird-theme--light .sendbird-iconbutton--pressed {
-  background-color: var(--sendbird-light-primary-100);
-}
-.sendbird-theme--dark .sendbird-iconbutton--pressed {
-  background-color: var(--sendbird-dark-background-700);
-}
-.sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
-  margin: 0 40px;
-}
-
-.sendbird-add-channel__rectangle-wrap {
-  margin-top: 26px;
-}
-
-.sendbird-add-channel__rectangle-footer {
-  text-align: right;
-  margin-top: 32px;
-}
-
-.sendbird-add-channel__rectangle {
-  width: 432px;
-  height: 72px;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  padding: 25px 72px;
-  position: relative;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-.sendbird--mobile-mode .sendbird-add-channel__rectangle {
-  min-width: 288px;
-  width: 100%;
-  padding-right: 0;
-}
-.sendbird-theme--light .sendbird-add-channel__rectangle {
-  border: 1px solid var(--sendbird-light-onlight-04);
-}
-.sendbird-theme--dark .sendbird-add-channel__rectangle {
-  border: 1px solid var(--sendbird-dark-ondark-04);
-}
-.sendbird-add-channel__rectangle .sendbird-icon {
-  position: absolute;
-  left: 22px;
-  top: 24px;
-}
-.sendbird-create-channel--content {
-  width: 480px;
-  max-height: 552px;
-}
-
-.sendbird-create-channel--scroll {
-  height: 360px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.sendbird--mobile-mode .sendbird-create-channel--scroll {
-  height: calc(100vh - 200px);
-  height: calc(var(--sendbird-vh, 1vh) * 100 - 200px);
-}
-.sendbird-modal--full-mobile .sendbird-modal__content {
-  width: 100vw;
-  max-width: 100%;
-  height: 100%;
-}
-.sendbird--mobile-mode .sendbird-modal--full-mobile .sendbird-modal__content {
-  height: -webkit-fill-available;
-  height: -moz-available;
-  height: stretch;
-}
+.sendbird-theme--dark .sendbird-icon-color--content-inverse [class*=fill] {
+  fill: var(--sendbird-dark-ondark-01);
+}
 
-.sendbird-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.sendbird-icon-color--white [class*=fill] {
+  fill: #ffffff;
 }
 
-.sendbird-modal__backdrop--clickoutside {
-  cursor: pointer;
+.sendbird-icon-color--gray [class*=fill] {
+  fill: var(--sendbird-light-onlight-04);
 }
 
-.sendbird-modal__content {
-  width: 480px;
-  border-radius: 4px;
-  z-index: 10001;
-  padding: 18px 24px 24px 24px;
-  position: relative;
-  box-sizing: border-box;
+.sendbird-theme--light .sendbird-icon-color--sent [class*=fill] {
+  fill: var(--sendbird-light-onlight-03);
 }
-.sendbird-theme--light .sendbird-modal__content {
-  background-color: var(--sendbird-light-background-50);
-  box-shadow: var(--sendbird-light-shadow-04);
+.sendbird-theme--dark .sendbird-icon-color--sent [class*=fill] {
+  fill: var(--sendbird-dark-ondark-03);
 }
-.sendbird-theme--dark .sendbird-modal__content {
-  background-color: var(--sendbird-dark-background-500);
-  box-shadow: var(--sendbird-dark-shadow-04);
+
+.sendbird-theme--light .sendbird-icon-color--read [class*=fill] {
+  fill: var(--sendbird-light-secondary-300);
 }
-.sendbird-modal__content .sendbird-modal__close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  cursor: pointer;
+.sendbird-theme--dark .sendbird-icon-color--read [class*=fill] {
+  fill: var(--sendbird-dark-secondary-200);
 }
-.sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
+
+.sendbird-theme--light .sendbird-icon-color--on-background-1 [class*=fill] {
   fill: var(--sendbird-light-onlight-01);
 }
-.sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
+.sendbird-theme--dark .sendbird-icon-color--on-background-1 [class*=fill] {
   fill: var(--sendbird-dark-ondark-01);
 }
-.sendbird-modal__content .sendbird-modal__header {
-  margin-bottom: 16px;
+
+.sendbird-theme--light .sendbird-icon-color--on-background-2 [class*=fill] {
+  fill: var(--sendbird-light-onlight-02);
 }
-.sendbird-modal__content .sendbird-modal__body {
-  height: calc(100% - 116px);
+.sendbird-theme--dark .sendbird-icon-color--on-background-2 [class*=fill] {
+  fill: var(--sendbird-dark-ondark-02);
 }
-.sendbird-modal__content .sendbird-modal__footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: 32px;
-  text-align: right;
+
+.sendbird-theme--light .sendbird-icon-color--on-background-3 [class*=fill] {
+  fill: var(--sendbird-light-onlight-03);
 }
-.sendbird--mobile-mode .sendbird-modal__content .sendbird-modal__footer {
-  position: sticky;
-  bottom: 24px;
+.sendbird-theme--dark .sendbird-icon-color--on-background-3 [class*=fill] {
+  fill: var(--sendbird-dark-ondark-03);
 }
-.sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
-  margin-left: 8px;
-  min-width: 80px;
-  height: 40px;
+
+.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-modal__backdrop {
-  position: fixed;
-  z-index: 10000;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
+.sendbird-theme--light .sendbird-icon-color--background-3 [class*=fill] {
+  fill: var(--sendbird-light-background-300);
 }
-.sendbird-theme--light .sendbird-modal__backdrop {
-  background-color: var(--sendbird-light-overlay-02);
+.sendbird-theme--dark .sendbird-icon-color--background-3 [class*=fill] {
+  fill: var(--sendbird-dark-background-400);
 }
-.sendbird-theme--dark .sendbird-modal__backdrop {
-  background-color: var(--sendbird-dark-overlay-02);
+
+.sendbird-theme--light .sendbird-icon-color--error [class*=fill] {
+  fill: var(--sendbird-light-error-300);
 }
-.sendbird-button {
-  display: inline-block;
-  box-shadow: none;
-  border-radius: 4px;
-  padding: 0px;
-  font-family: var(--sendbird-font-family-default);
-  cursor: pointer;
+.sendbird-theme--dark .sendbird-icon-color--error [class*=fill] {
+  fill: var(--sendbird-dark-error-200);
 }
-.sendbird-button:hover {
-  box-shadow: none;
+.sendbird-iconbutton {
+  color: var(--sendbird-iconbutton-color);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+  background-color: transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  outline: 0px;
 }
-.sendbird-button:focus {
-  outline: none;
+.sendbird-iconbutton .sendbird-iconbutton__inner {
+  height: 100%;
 }
-.sendbird-button:active {
-  box-shadow: none;
+.sendbird-theme--light .sendbird-iconbutton .sendbird-iconbutton__inner svg {
+  fill: var(--sendbird-light-onlight-01);
 }
-.sendbird-button.sendbird-button__disabled {
-  cursor: not-allowed;
+.sendbird-theme--dark .sendbird-iconbutton .sendbird-iconbutton__inner svg {
+  fill: var(--sendbird-dark-ondark-01);
 }
-.sendbird-theme--light .sendbird-button.sendbird-button__disabled {
-  border: none;
-  background-color: var(--sendbird-light-background-200);
+.sendbird-theme--light .sendbird-iconbutton:hover {
+  background-color: var(--sendbird-light-background-100);
 }
-.sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
-  border: none;
-  background-color: var(--sendbird-dark-background-400);
+.sendbird-theme--dark .sendbird-iconbutton:hover {
+  background-color: var(--sendbird-dark-background-500);
 }
-.sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
+.sendbird-theme--light .sendbird-iconbutton:active {
   background-color: var(--sendbird-light-background-200);
 }
-.sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
+.sendbird-theme--dark .sendbird-iconbutton:active {
   background-color: var(--sendbird-dark-background-400);
 }
-
-.sendbird-button--big {
-  height: 40px;
-}
-.sendbird-button--big .sendbird-button__text {
-  margin: 10px 16px;
+.sendbird-iconbutton:disabled {
+  cursor: not-allowed !important;
 }
-
-.sendbird-button--small {
-  height: 32px;
+.sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
+  fill: var(--sendbird-light-onlight-02);
 }
-.sendbird-button--small .sendbird-button__text {
-  margin: 6px 16px;
+.sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
+  fill: var(--sendbird-dark-ondark-02);
 }
 
-.sendbird-theme--light .sendbird-button--primary {
-  border: 1px solid var(--sendbird-light-primary-300);
-  background-color: var(--sendbird-light-primary-300);
-}
-.sendbird-theme--dark .sendbird-button--primary {
-  border: 1px solid var(--sendbird-dark-primary-200);
-  background-color: var(--sendbird-dark-primary-200);
-}
-.sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
-  color: var(--sendbird-light-ondark-01);
-}
-.sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
-  color: var(--sendbird-dark-onlight-01);
-}
-.sendbird-theme--light .sendbird-button--primary:hover {
-  background-color: var(--sendbird-light-primary-400);
-  border-color: var(--sendbird-light-primary-400);
-}
-.sendbird-theme--dark .sendbird-button--primary:hover {
-  background-color: var(--sendbird-dark-primary-300);
-  border-color: var(--sendbird-dark-primary-300);
-}
-.sendbird-theme--light .sendbird-button--primary:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300);
-  border: 1px solid var(--sendbird-button-border-focus);
-}
-.sendbird-theme--dark .sendbird-button--primary:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200);
-  border: 1px solid var(--sendbird-button-border-focus);
+.sendbird-theme--light .sendbird-iconbutton--pressed {
+  background-color: var(--sendbird-light-primary-100);
 }
-.sendbird-theme--light .sendbird-button--primary:active {
-  background-color: var(--sendbird-light-primary-500);
+.sendbird-theme--dark .sendbird-iconbutton--pressed {
+  background-color: var(--sendbird-dark-background-700);
 }
-.sendbird-theme--dark .sendbird-button--primary:active {
-  background-color: var(--sendbird-dark-primary-400);
+.sendbird-channel-list {
+  width: 320px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 }
-.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-400);
+.sendbird-theme--light .sendbird-channel-list {
+  background-color: var(--sendbird-light-background-50);
 }
-.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-300);
+.sendbird-theme--dark .sendbird-channel-list {
+  background-color: var(--sendbird-dark-background-600);
 }
-.sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-500);
+.sendbird--mobile-mode .sendbird-channel-list {
+  width: 100%;
 }
-.sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-400);
+
+.sendbird-channel-list__header {
+  height: 64px;
+  min-height: 64px;
 }
 
-.sendbird-button--secondary {
-  background-color: transparent;
+.sendbird-channel-list__body {
+  flex: 1 1 0;
+  -ms-flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
-.sendbird-theme--light .sendbird-button--secondary {
-  border: 1px solid var(--sendbird-light-onlight-03);
+.sendbird-channel-header {
+  position: relative;
+  height: 64px;
+  min-height: 64px;
+  width: 320px;
+  padding: 8px 64px 8px 8px;
+  box-sizing: border-box;
 }
-.sendbird-theme--dark .sendbird-button--secondary {
-  border: 1px solid var(--sendbird-dark-ondark-03);
+.sendbird-theme--light .sendbird-channel-header {
+  border-bottom: 1px solid var(--sendbird-light-onlight-04);
+  background-color: var(--sendbird-light-background-50);
 }
-.sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
-  color: var(--sendbird-light-onlight-01);
+.sendbird-theme--dark .sendbird-channel-header {
+  border-bottom: 1px solid var(--sendbird-dark-ondark-04);
+  background-color: var(--sendbird-dark-background-600);
 }
-.sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
-  color: var(--sendbird-dark-ondark-01);
+.sendbird--mobile-mode .sendbird-channel-header {
+  width: 100%;
 }
-.sendbird-button--secondary:hover {
-  background-color: transparent;
+.sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
+  cursor: pointer;
 }
-.sendbird-theme--light .sendbird-button--secondary:hover {
-  border: 1px solid var(--sendbird-light-primary-300);
+.sendbird-channel-header .sendbird-channel-header__title {
+  display: flex;
+  flex-direction: row;
+  width: 260px;
+  height: 48px;
+  border-radius: 4px;
 }
-.sendbird-theme--dark .sendbird-button--secondary:hover {
-  border: 1px solid var(--sendbird-dark-primary-200);
+.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:hover {
+  background: var(--sendbird-light-background-100);
 }
-.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
-  color: var(--sendbird-light-primary-300);
+.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:hover {
+  background: var(--sendbird-dark-background-500);
 }
-.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
-  color: var(--sendbird-dark-primary-200);
+.sendbird-channel-header .sendbird-channel-header__title:focus {
+  outline: none;
 }
-.sendbird-button--secondary.sendbird-button__disabled {
-  cursor: not-allowed;
-  border: none;
+.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:focus {
+  background: var(--sendbird-light-background-200);
 }
-.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
-  background-color: var(--sendbird-light-background-200);
+.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:focus {
+  background: var(--sendbird-dark-background-400);
 }
-.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
-  background-color: var(--sendbird-dark-background-400);
+.sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:active {
+  border: solid 2px var(--sendbird-light-primary-300);
 }
-.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
-  color: var(--sendbird-light-onlight-02);
+.sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:active {
+  border: solid 2px var(--sendbird-dark-primary-200);
 }
-.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
-  color: var(--sendbird-dark-ondark-02);
+.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__left {
+  width: 48px;
+  padding: 8px;
+  box-sizing: border-box;
 }
-.sendbird-button--secondary.sendbird-button__disabled:hover {
-  border: none;
+.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right {
+  margin-left: 4px;
+  padding-top: 8px;
 }
-.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
-  background-color: var(--sendbird-light-background-200);
+.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__name,
+.sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__user-id {
+  display: block;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
-  background-color: var(--sendbird-dark-background-400);
+.sendbird-channel-header .sendbird-channel-header__right-icon {
+  position: absolute;
+  right: 16px;
+  top: 16px;
 }
-.sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
-  color: var(--sendbird-light-onlight-02);
+.sendbird-image-renderer {
+  overflow: hidden;
+  position: relative;
 }
-.sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
-  color: var(--sendbird-dark-ondark-02);
+
+.sendbird-image-renderer__hidden-image-loader {
+  display: none;
 }
-.sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
-  color: var(--sendbird-light-primary-300);
+
+.sendbird-image-renderer,
+.sendbird-image-renderer__image {
+  width: 320px;
+  height: 180px;
 }
-.sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
-  color: var(--sendbird-dark-primary-200);
+.sendbird-avatar {
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 50%;
+  position: relative;
 }
-.sendbird-button--secondary:focus {
-  border: 1px solid transparent;
-  background-color: transparent;
+.sendbird-avatar:focus {
+  outline: none;
 }
-.sendbird-theme--light .sendbird-button--secondary:focus {
-  box-shadow: var(--sendbird-light-primary-300) 0px 0px 0px 2px;
+.sendbird-avatar .sendbird-avatar-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.sendbird-theme--dark .sendbird-button--secondary:focus {
-  box-shadow: var(--sendbird-dark-primary-200) 0px 0px 0px 2px;
+.sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
+  background-color: var(--sendbird-light-background-300);
 }
-.sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
-  color: var(--sendbird-light-onlight-01);
+.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img {
+  background-color: var(--sendbird-dark-background-300);
 }
-.sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
-  color: var(--sendbird-dark-ondark-01);
+.sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:first-child {
+  transform: translate(2%, -50%);
 }
-.sendbird-button--secondary:active {
-  box-shadow: none;
+.sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:last-child {
+  transform: translate(-102%, -50%);
 }
-.sendbird-theme--light .sendbird-button--secondary:active {
-  border: 1px solid var(--sendbird-light-primary-300);
+.sendbird-avatar .sendbird-avatar--inner__three-child--upper .sendbird-avatar-img:first-child {
+  transform: translate(-50%, -102%);
 }
-.sendbird-theme--dark .sendbird-button--secondary:active {
-  border: 1px solid var(--sendbird-dark-primary-200);
+.sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:first-child {
+  transform: translate(-77%, -23%) scale(0.5);
 }
-.sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
-  color: var(--sendbird-light-primary-300);
+.sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:last-child {
+  transform: translate(-23%, -23%) scale(0.5);
 }
-.sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
-  color: var(--sendbird-dark-primary-200);
+.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:first-child {
+  transform: translate(-77%, -77%) scale(0.5);
 }
-
-.sendbird-theme--light .sendbird-button--danger {
-  border: 1px solid var(--sendbird-light-error-300);
-  background-color: var(--sendbird-light-error-300);
+.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(2) {
+  transform: translate(-23%, -77%) scale(0.5);
 }
-.sendbird-theme--dark .sendbird-button--danger {
-  border: 1px solid var(--sendbird-dark-error-200);
-  background-color: var(--sendbird-dark-error-200);
+.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(3) {
+  transform: translate(-77%, -23%) scale(0.5);
 }
-.sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
-  color: var(--sendbird-light-ondark-01);
+.sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:last-child {
+  transform: translate(-23%, -23%) scale(0.5);
 }
-.sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
-  color: var(--sendbird-dark-onlight-01);
+.sendbird-avatar .sendbird-avatar-img--default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.sendbird-theme--light .sendbird-button--danger:hover {
-  background-color: var(--sendbird-light-error-400);
-  border-color: var(--sendbird-light-error-400);
+.sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
+  background-color: var(--sendbird-light-background-300);
 }
-.sendbird-theme--dark .sendbird-button--danger:hover {
-  background-color: var(--sendbird-dark-error-400);
-  border-color: var(--sendbird-dark-error-400);
+.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
+  background-color: var(--sendbird-dark-background-300);
 }
-.sendbird-theme--light .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-300);
-  border-color: var(--sendbird-button-border-focus);
+.sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
+  margin: 0 40px;
 }
-.sendbird-theme--dark .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-300);
-  border-color: var(--sendbird-button-border-focus);
+
+.sendbird-add-channel__rectangle-wrap {
+  margin-top: 26px;
 }
-.sendbird-button--danger:active {
-  box-shadow: none;
+
+.sendbird-add-channel__rectangle-footer {
+  text-align: right;
+  margin-top: 32px;
 }
-.sendbird-theme--light .sendbird-button--danger:active {
-  background-color: var(--sendbird-light-error-500);
+
+.sendbird-add-channel__rectangle {
+  width: 432px;
+  height: 72px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  padding: 25px 72px;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
 }
-.sendbird-theme--dark .sendbird-button--danger:active {
-  background-color: var(--sendbird-dark-error-500);
+.sendbird--mobile-mode .sendbird-add-channel__rectangle {
+  min-width: 288px;
+  width: 100%;
+  padding-right: 0;
 }
-.sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-400);
+.sendbird-theme--light .sendbird-add-channel__rectangle {
+  border: 1px solid var(--sendbird-light-onlight-04);
 }
-.sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-400);
+.sendbird-theme--dark .sendbird-add-channel__rectangle {
+  border: 1px solid var(--sendbird-dark-ondark-04);
 }
-.sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-500);
+.sendbird-add-channel__rectangle .sendbird-icon {
+  position: absolute;
+  left: 22px;
+  top: 24px;
 }
-.sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
-  box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-500);
+.sendbird-create-channel--content {
+  width: 480px;
+  max-height: 552px;
 }
 
-.sendbird-button--disabled {
-  border: 1px solid transparent;
-  cursor: not-allowed;
-}
-.sendbird-theme--light .sendbird-button--disabled {
-  background-color: var(--sendbird-light-background-200);
-  color: var(--sendbird-light-ondark-01);
+.sendbird-create-channel--scroll {
+  height: 360px;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
-.sendbird-theme--dark .sendbird-button--disabled {
-  background-color: var(--sendbird-dark-background-400);
-  color: var(--sendbird-dark-onlight-01);
+.sendbird--mobile-mode .sendbird-create-channel--scroll {
+  height: calc(100vh - 200px);
+  height: calc(var(--sendbird-vh, 1vh) * 100 - 200px);
 }
 .sendbird-user-list-item {
   display: block;
@@ -3388,8 +3396,7 @@
 }
 .sendbird-admin-message .sendbird-admin-message__text {
   display: flex;
-  width: 100%;
-  word-break: break-word;
+  text-align: center;
 }
 .sendbird-text-message-item-body {
   position: relative;
@@ -3593,7 +3600,6 @@ div.sendbird-text-message-item-body {
   border-radius: 16px;
 }
 .sendbird--mobile-mode .sendbird-thumbnail-message-item-body {
-  width: 66vw;
   min-width: 160px;
 }
 .sendbird-thumbnail-message-item-body.reactions {
@@ -3679,7 +3685,6 @@ div.sendbird-text-message-item-body {
   max-width: 400px;
 }
 .sendbird--mobile-mode .sendbird-og-message-item-body {
-  width: 66vw;
   min-width: 160px;
 }
 .sendbird-og-message-item-body .sendbird-og-message-item-body__text-bubble {
@@ -6226,6 +6231,10 @@ div.sendbird-og-message-item-body__text-bubble {
   bottom: -8px;
 }
 
+.sendbird-thread-list-item-content__middle__body-container {
+  width: 100%;
+}
+
 .sendbird-thread-list-item-content.incoming .sendbird-thread-list-item-content__left {
   position: relative;
   display: inline-flex;
@@ -6350,8 +6359,6 @@ div.sendbird-og-message-item-body__text-bubble {
 }
 .sendbird-thread-list-item-content.outgoing .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container {
   position: relative;
-  width: -moz-fit-content;
-  width: fit-content;
 }
 .sendbird-thread-list-item-content.outgoing .sendbird-thread-list-item-content__middle .sendbird-thread-list-item-content__middle__body-container .sendbird-thread-list-item-content__middle__body-container__created-at {
   position: absolute;
@@ -6383,8 +6390,6 @@ div.sendbird-og-message-item-body__text-bubble {
 
 .sendbird-thread-list-item-content__middle__body-container {
   position: relative;
-  width: -moz-fit-content;
-  width: fit-content;
   display: flex;
   flex-direction: column;
 }