@sendbird/uikit-react 3.14.14 → 3.15.0

package/dist/index.css

@@ -241,14 +241,14 @@
   word-break: keep-all;
 }
 
-.sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__channel-name.frozen {
-  max-width: calc(100% - 20px);
-}
-
 .sendbird--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__channel-name.frozen {
+  max-width: calc(100% - 20px);
+}
+
 .sendbird-open-channel-preview .sendbird-open-channel-preview__context .sendbird-open-channel-preview__context__title .sendbird-open-channel-preview__context__title__frozen {
   position: relative;
   display: inline-flex;
@@ -927,6 +927,7 @@
 
 .sendbird-modal__content .sendbird-modal__body {
   height: calc(100% - 116px);
+  overflow: auto;
 }
 
 .sendbird-modal__content .sendbird-modal__footer {
@@ -1627,6 +1628,14 @@
   color: var(--sendbird-dark-onlight-02);
 }
 
+.sendbird-theme--light .sendbird-label--color-oncontent-3 {
+  color: var(--sendbird-light-ondark-03);
+}
+
+.sendbird-theme--dark .sendbird-label--color-oncontent-3 {
+  color: var(--sendbird-dark-onlight-03);
+}
+
 .sendbird-theme--light .sendbird-label--color-oncontent-inverse-1 {
   color: var(--sendbird-light-onlight-01);
 }
@@ -1710,6 +1719,14 @@
   fill: var(--sendbird-dark-secondary-200);
 }
 
+.sendbird-theme--light .sendbird-icon-color--secondary-2 [class*=fill] {
+  fill: var(--sendbird-light-secondary-200);
+}
+
+.sendbird-theme--dark .sendbird-icon-color--secondary-2 [class*=fill] {
+  fill: var(--sendbird-dark-secondary-200);
+}
+
 .sendbird-theme--light .sendbird-icon-color--content [class*=fill] {
   fill: var(--sendbird-light-ondark-01);
 }
@@ -1903,6 +1920,11 @@
   margin: 4px;
 }
 
+.sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__emptyLabel {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .sendbird-dropdown__menu-backdrop {
   background-color: transparent;
   position: fixed;
@@ -3115,6 +3137,10 @@
   position: relative;
 }
 
+.sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container {
+  max-width: 100%;
+}
+
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   bottom: 6px;
   display: flex;
@@ -3398,6 +3424,14 @@
   box-sizing: border-box;
 }
 
+.sendbird-message-content__middle__body-container .sendbird-message-content__middle__message-item-body.reactions {
+  width: 100%;
+}
+
+.sendbird-message-content__middle__body-container:has(.sendbird-message-content__middle__message-item-body.reactions) {
+  align-items: unset;
+}
+
 .sendbird-message-content-reactions {
   border-radius: 0 0 16px 16px;
   max-width: 400px;
@@ -4934,7 +4968,6 @@
   display: inline-block;
   width: 320px;
   min-width: 320px;
-  max-width: 320px;
 }
 
 .sendbird--mobile-mode .sendbird-og-message-item-body {
@@ -5231,6 +5264,22 @@ div.sendbird-og-message-item-body__text-bubble {
   background-color: var(--sendbird-dark-primary-300);
 }
 
+.sendbird-theme--light .sendbird-text-message-item-body.disable-hover.mouse-hover.incoming, .sendbird-theme--light .sendbird-text-message-item-body.disable-hover:hover.incoming {
+  background-color: var(--sendbird-light-background-100);
+}
+
+.sendbird-theme--dark .sendbird-text-message-item-body.disable-hover.mouse-hover.incoming, .sendbird-theme--dark .sendbird-text-message-item-body.disable-hover:hover.incoming {
+  background-color: var(--sendbird-dark-background-500);
+}
+
+.sendbird-theme--light .sendbird-text-message-item-body.disable-hover.mouse-hover.outgoing, .sendbird-theme--light .sendbird-text-message-item-body.disable-hover:hover.outgoing {
+  background-color: var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--dark .sendbird-text-message-item-body.disable-hover.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-text-message-item-body.disable-hover:hover.outgoing {
+  background-color: var(--sendbird-dark-primary-200);
+}
+
 .sendbird-text-message-item-body .sendbird-text-message-item-body__text-bubble__message {
   display: inline;
   margin: 0px 2px;
@@ -5402,37 +5451,49 @@ div.sendbird-text-message-item-body {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 64px;
-  padding: 16px 20px;
+  padding: 0 20px;
+  overflow: hidden;
 }
 
-[dir="ltr"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
-  margin-right: 8px;
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
+  display: flex;
+  margin-inline-end: 8px;
 }
 
-[dir="rtl"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
-  margin-left: 8px;
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
+  margin-inline-end: 12px;
 }
 
-.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container {
+  flex-direction: column;
+  align-items: unset;
+}
+
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__filename {
   max-width: 500px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
+  margin-inline-end: 8px;
+  padding-top: 3px;
 }
 
-.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  display: inline-block;
-  padding-top: 5px;
-}
-
-[dir="ltr"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  margin-left: 8px;
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__filename {
+  display: block;
+  max-width: calc(100vw - 240px);
+  padding-top: 0;
+  margin-inline-end: 0;
 }
 
-[dir="rtl"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  margin-right: 8px;
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__sender-name {
+  line-height: 1.1;
 }
 
 .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right {
@@ -6050,6 +6111,359 @@ div.sendbird-text-message-item-body {
   border-radius: 0;
   font-family: var(--sendbird-font-family-default);
 }
+.sendbird-theme--light {
+  --form__chip__color__selected-focus: var(--sendbird-light-primary-300);
+  --form__chip__color__submitted-default: var(--sendbird-light-onlight-02);
+  --form__chip__bg-color__default: var(--sendbird-light-background-50);
+  --form__chip__bg-color__selected: var(--sendbird-light-primary-100);
+  --form__chip__bg-color__selected-hover: var(--sendbird-light-background-50);
+  --form__chip__bg-color__selected-focus: var(--sendbird-light-background-50);
+  --form__chip__bg-color__submitted-default: var(--sendbird-dark-ondark-02);
+  --form__chip__bg-color__submitted-selected: var(--sendbird-dark-ondark-02);
+  --form__chip__bd-color__default-focus: var(--sendbird-light-primary-300);
+  --form__chip__bd-color__selected-focus: var(--sendbird-light-primary-300);
+  --form__submitted-input-box__color: var(--sendbird-dark-onlight-01);
+  --form__submitted-input-box__bg-color: var(--sendbird-dark-ondark-02);
+  --form__submit-button__color__disabled: var(--sendbird-light-background-50);
+  --form__submit-button__bg-color__disabled: var(--sendbird-light-onlight-04);
+}
+
+.sendbird-theme--dark {
+  --form__chip__color__selected-focus: var(--sendbird-dark-ondark-02);
+  --form__chip__color__submitted-default: var(--sendbird-dark-ondark-04);
+  --form__chip__bg-color__default: var(--sendbird-light-onlight-03);
+  --form__chip__bg-color__selected: var(--sendbird-dark-background-600);
+  --form__chip__bg-color__selected-hover: var(--sendbird-light-onlight-03);
+  --form__chip__bg-color__selected-focus: var(--sendbird-light-onlight-03);
+  --form__chip__bg-color__submitted-default: var(--sendbird-light-onlight-04);
+  --form__chip__bg-color__submitted-selected: var(--sendbird-light-onlight-04);
+  --form__chip__bd-color__default-focus: var(--sendbird-dark-ondark-02);
+  --form__chip__bd-color__selected-focus: var(--sendbird-dark-ondark-02);
+  --form__submitted-input-box__color: var(--sendbird-dark-ondark-01);
+  --form__submitted-input-box__bg-color: var(--sendbird-light-onlight-04);
+  --form__submit-button__color__disabled: var(--sendbird-light-onlight-01);
+  --form__submit-button__bg-color__disabled: var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-form-message__submit-button {
+  width: 100%;
+}
+
+.sendbird-form-message__submit-button.sendbird-button__disabled {
+  cursor: not-allowed;
+}
+
+.sendbird-form-message__submit-button.sendbird-button__disabled.sendbird-button--primary .sendbird-button__text {
+  color: var(--form__submit-button__color__disabled);
+}
+
+.sendbird-theme--light .sendbird-form-message__submit-button.sendbird-button__disabled {
+  background-color: var(--form__submit-button__bg-color__disabled);
+  border: none;
+}
+
+.sendbird-theme--light .sendbird-form-message__submit-button.sendbird-button__disabled:hover {
+  background-color: var(--form__submit-button__bg-color__disabled);
+}
+
+.sendbird-theme--dark .sendbird-form-message__submit-button.sendbird-button__disabled {
+  background-color: var(--form__submit-button__bg-color__disabled);
+  border: none;
+}
+
+.sendbird-theme--dark .sendbird-form-message__submit-button.sendbird-button__disabled:hover {
+  background-color: var(--form__submit-button__bg-color__disabled);
+}
+
+.sendbird-form-message__input__label {
+  line-height: 14px;
+  display: block;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.sendbird-form-message__input__title-container {
+  display: inline-block;
+}
+
+.sendbird-form-message__input__container {
+  width: 100%;
+  position: relative;
+}
+
+.sendbird-theme--light .sendbird-form-message__input__title-optional {
+  color: var(--sendbird-light-onlight-03);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__title-optional {
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-form-message__input__root {
+  padding-bottom: 12px;
+  width: 100%;
+  font-family: var(--sendbird-font-family-default);
+}
+
+.sendbird-form-message__input__textarea {
+  display: block;
+  resize: none;
+  height: 96px !important;
+  padding: 7px 12px !important;
+}
+
+.sendbird-theme--light .sendbird-form-message__input__textarea ::-moz-placeholder {
+  color: var(--sendbird-light-onlight-03);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__textarea ::placeholder {
+  color: var(--sendbird-light-onlight-03);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__textarea ::-moz-placeholder {
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__textarea ::placeholder {
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-form-message__error-label {
+  margin-top: 4px;
+  color: var(--sendbird-light-error-300);
+}
+
+.sendbird-form-message__submitted-input-box-text {
+  width: calc(100% - 24px);
+  line-height: 20px;
+}
+
+.sendbird-form-message__root {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px 12px;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-width: 220px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.sendbird--mobile-mode .sendbird-form-message__root {
+  max-width: calc(100vw - 164px);
+}
+
+.sendbird-form-message__input__chip-container {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+[dir="ltr"] .sendbird-form-message__submitted-check-icon-chip {
+  margin-left: 4px;
+}
+
+[dir="rtl"] .sendbird-form-message__submitted-check-icon-chip {
+  margin-right: 4px;
+}
+
+.sendbird-form-message__submitted-check-icon-container {
+  display: flex;
+  height: auto;
+  align-items: flex-end;
+}
+
+.sendbird-form-message__submitted-input-box {
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  display: flex;
+  word-wrap: break-word;
+  width: calc(100% - 24px);
+  color: var(--form__submitted-input-box__color);
+  background-color: var(--form__submitted-input-box__bg-color);
+  border: none;
+  pointer-events: none;
+  border-radius: 4px;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  padding: 8px 12px;
+  min-height: 20px;
+}
+
+.sendbird-form-message__submitted-input-box.textarea {
+  padding: 9px 12px;
+  min-height: 78px;
+}
+
+.sendbird-form-message__input__chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 20px;
+  letter-spacing: normal;
+}
+
+.sendbird-form-message__input__chip {
+  border-radius: 100px;
+  padding: 5px 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: calc(100% - 32px);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.default {
+  color: var(--sendbird-light-onlight-02);
+  border: 1px solid var(--sendbird-light-onlight-04);
+  cursor: pointer;
+  background-color: var(--form__chip__bg-color__default);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.default:hover {
+  color: var(--sendbird-light-primary-300);
+  border: 1px solid var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.default:focus {
+  color: var(--sendbird-light-onlight-02);
+  border: 1px solid var(--form__chip__bd-color__default-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--form__chip__bd-color__default-focus);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.default {
+  color: var(--sendbird-dark-ondark-02);
+  border: 1px solid var(--sendbird-dark-ondark-04);
+  cursor: pointer;
+  background-color: var(--form__chip__bg-color__default);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.default:hover {
+  color: var(--sendbird-dark-primary-200);
+  border: 1px solid var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.default:focus {
+  color: var(--sendbird-dark-ondark-02);
+  border: 1px solid var(--form__chip__bd-color__default-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--form__chip__bd-color__default-focus);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.selected {
+  color: var(--sendbird-light-primary-300);
+  background-color: var(--form__chip__bg-color__selected);
+  border: 1px solid var(--sendbird-light-primary-300);
+  cursor: pointer;
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.selected:hover {
+  color: var(--sendbird-light-primary-300);
+  background-color: var(--form__chip__bg-color__selected-hover);
+  border: 1px solid var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.selected:focus {
+  color: var(--form__chip__color__selected-focus);
+  background-color: var(--form__chip__bg-color__selected-focus);
+  border: 1px solid var(--form__chip__bd-color__selected-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--form__chip__bd-color__selected-focus);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.selected {
+  color: var(--sendbird-dark-primary-200);
+  background-color: var(--form__chip__bg-color__selected);
+  border: 1px solid var(--sendbird-dark-primary-200);
+  cursor: pointer;
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.selected:hover {
+  color: var(--sendbird-dark-primary-200);
+  background-color: var(--form__chip__bg-color__selected-hover);
+  border: 1px solid var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.selected:focus {
+  color: var(--form__chip__color__selected-focus);
+  background-color: var(--form__chip__bg-color__selected-focus);
+  border: 1px solid var(--form__chip__bd-color__selected-focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--form__chip__bd-color__selected-focus);
+}
+
+.sendbird-form-message__input__chip.submittedDefault {
+  border: none;
+  cursor: default;
+  padding: 6px 12px;
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.submittedDefault {
+  color: var(--form__chip__color__submitted-default);
+  background-color: var(--form__chip__bg-color__submitted-default);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.submittedDefault {
+  color: var(--form__chip__color__submitted-default);
+  background-color: var(--form__chip__bg-color__submitted-default);
+}
+
+.sendbird-form-message__input__chip.submittedSelected {
+  border: none;
+  cursor: default;
+  padding: 6px 12px;
+}
+
+.sendbird-theme--light .sendbird-form-message__input__chip.submittedSelected {
+  color: var(--sendbird-light-onlight-01);
+  background-color: var(--form__chip__bg-color__submitted-selected);
+}
+
+.sendbird-theme--dark .sendbird-form-message__input__chip.submittedSelected {
+  color: var(--sendbird-dark-ondark-01);
+  background-color: var(--form__chip__bg-color__submitted-selected);
+}
+.sendbird--mobile-mode .sendbird-message-feedback-modal-content__mobile {
+  max-width: 280px;
+  padding: 16px;
+}
+
+.sendbird-message-feedback-modal-footer__root {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sendbird-message-feedback-modal-footer__root_failed {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 48px;
+}
+
+.sendbird-message-feedback-modal-footer__right-content {
+  display: flex;
+  gap: 8px;
+}
+
+.sendbird-message-feedback-modal-body__root {
+  margin: 21px 0;
+}
+
+.sendbird--mobile-mode .sendbird-message-feedback-modal-header {
+  font-size: 18px;
+  line-height: 1.33;
+}
 .sendbird-iconbutton__feedback {
   display: flex;
   justify-content: center;
@@ -6254,39 +6668,139 @@ div.sendbird-text-message-item-body {
   color: var(--sendbird-dark-ondark-03);
 }
 
-.sendbird-input-label {
-  margin: 4px 0;
+.sendbird-theme--light {
+  --form__input__bg-color_default: var(--sendbird-light-background-50);
+  --form__input__bg-color_disabled: var(--sendbird-dark-ondark-02);
+  --form__input__bd-color_error: var(--sendbird-light-error-300);
 }
-.sendbird--mobile-mode .sendbird-message-feedback-modal-content__mobile {
-  max-width: 280px;
-  padding: 16px;
+
+.sendbird-theme--dark {
+  --form__input__bg-color_default: var(--sendbird-light-onlight-03);
+  --form__input__bg-color_disabled: var(--sendbird-light-onlight-04);
+  --form__input__bd-color_error: var(--sendbird-dark-error-200);
 }
 
-.sendbird-message-feedback-modal-footer__root {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.sendbird-input_for_form {
+  display: inline-block;
+  width: 100%;
+  height: unset;
+  position: relative;
 }
 
-.sendbird-message-feedback-modal-footer__root_failed {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-top: 48px;
+.sendbird-input_for_form .sendbird-input__input {
+  width: 100%;
+  height: -moz-fit-content;
+  height: fit-content;
+  border-radius: 4px;
+  font-family: var(--sendbird-font-family-default);
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  padding: 7px 12px;
+  box-sizing: border-box;
+  background-color: inherit;
 }
 
-.sendbird-message-feedback-modal-footer__right-content {
-  display: flex;
-  gap: 8px;
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__input {
+  caret-color: var(--sendbird-light-primary-300);
+  color: var(--sendbird-light-onlight-01);
+  background-color: var(--form__input__bg-color_default);
+  border: solid 1px var(--sendbird-light-onlight-04);
 }
 
-.sendbird-message-feedback-modal-body__root {
-  margin: 21px 0;
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__input:disabled {
+  pointer-events: none;
+  border: none;
+  cursor: not-allowed;
+  background-color: var(--form__input__bg-color_disabled);
+  color: var(--sendbird-light-onlight-03);
 }
 
-.sendbird--mobile-mode .sendbird-message-feedback-modal-header {
-  font-size: 18px;
-  line-height: 1.33;
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__input:focus {
+  border: solid 1px var(--sendbird-light-primary-300) !important;
+  outline: none;
+  box-shadow: 0 0 0 1px var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__input:active {
+  box-shadow: none;
+  border: solid 1px var(--sendbird-light-primary-300);
+}
+
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__input.error {
+  border: solid 1px var(--form__input__bd-color_error);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__input {
+  caret-color: var(--sendbird-dark-primary-200);
+  color: var(--sendbird-dark-ondark-01);
+  background-color: var(--form__input__bg-color_default);
+  border: solid 1px var(--sendbird-dark-ondark-04);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__input:disabled {
+  pointer-events: none;
+  border: none;
+  cursor: not-allowed;
+  background-color: var(--form__input__bg-color_disabled);
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__input:focus {
+  border: solid 1px var(--sendbird-dark-primary-200) !important;
+  outline: none;
+  box-shadow: 0 0 0 1px var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__input:active {
+  box-shadow: none;
+  border: solid 1px var(--sendbird-dark-primary-200);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__input.error {
+  border: solid 1px var(--form__input__bd-color_error);
+}
+
+.sendbird-input_for_form .sendbird-input__placeholder {
+  width: calc(100% - 26px);
+  height: calc(100% - 16px);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  position: absolute;
+  pointer-events: none;
+  top: 8px;
+  font-family: var(--sendbird-font-family-default);
+  font-size: 14px;
+  line-height: 1.43;
+}
+
+[dir="ltr"] .sendbird-input_for_form .sendbird-input__placeholder {
+  left: 13px;
+}
+
+[dir="rtl"] .sendbird-input_for_form .sendbird-input__placeholder {
+  right: 13px;
+}
+
+.sendbird-theme--light .sendbird-input_for_form .sendbird-input__placeholder {
+  color: var(--sendbird-light-onlight-03);
+}
+
+.sendbird-theme--dark .sendbird-input_for_form .sendbird-input__placeholder {
+  color: var(--sendbird-dark-ondark-03);
+}
+
+.sendbird-input_for_form .sendbird-input__placeholder.textarea {
+  -webkit-line-clamp: 4;
+}
+
+.sendbird-input-label {
+  margin: 4px 0;
 }
 /**
  * We operate the CSS files for Channel&GroupChannel modules in the GroupChannel.
@@ -6587,66 +7101,49 @@ div.sendbird-text-message-item-body {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 64px;
-  padding: 16px 20px;
+  padding: 0 20px;
   overflow: hidden;
 }
 
-[dir="ltr"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
-  margin-right: 8px;
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
+  display: flex;
+  margin-inline-end: 8px;
 }
 
-[dir="rtl"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
-  margin-left: 8px;
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
+  margin-inline-end: 12px;
 }
 
-.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container {
+  flex-direction: column;
+  align-items: unset;
+}
+
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__filename {
   max-width: 500px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
+  margin-inline-end: 8px;
+  padding-top: 3px;
 }
 
-.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
-  position: absolute;
-  top: 10px;
+.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__filename {
   display: block;
   max-width: calc(100vw - 240px);
+  padding-top: 0;
+  margin-inline-end: 0;
 }
 
-[dir="ltr"] .sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
-  left: 64px;
-}
-
-[dir="rtl"] .sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
-  right: 64px;
-}
-
-.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  display: inline-block;
-  padding-top: 5px;
-}
-
-[dir="ltr"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  margin-left: 8px;
-}
-
-[dir="rtl"] .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  margin-right: 8px;
-}
-
-.sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  position: absolute;
-  top: 24px;
-}
-
-[dir="ltr"] .sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  left: 56px;
-}
-
-[dir="rtl"] .sendbird--mobile-mode .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
-  right: 56px;
+.sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__text-container .sendbird-fileviewer__header__left__sender-name {
+  line-height: 1.1;
 }
 
 .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right {
@@ -7636,7 +8133,9 @@ div.sendbird-text-message-item-body {
 
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__last-message {
   overflow: hidden;
-  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count {
@@ -7793,10 +8292,6 @@ div.sendbird-text-message-item-body {
   height: 16px;
 }
 
-.sendbird-mention-user-label:hover {
-  cursor: pointer;
-}
-
 .sendbird-theme--light .sendbird-mention-user-label {
   color: var(--sendbird-light-onlight-01);
 }
@@ -7805,6 +8300,10 @@ div.sendbird-text-message-item-body {
   color: var(--sendbird-dark-ondark-01);
 }
 
+.sendbird-mention-user-label:hover {
+  cursor: pointer;
+}
+
 .sendbird-theme--light .sendbird-mention-user-label.reverse {
   color: var(--sendbird-light-ondark-01);
 }