stream-chat-react 14.0.0-beta.1 → 14.0.0-beta.3

package/dist/cjs/mp3-encoder.js

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const audioProcessing = require("../audioProcessing-BbOs2wMd.js");
+const audioProcessing = require("./audioProcessing.56e5db9d.js");
 const ENCODING_BIT_RATE = 128;
 const COUNT_SAMPLES_PER_ENCODED_BLOCK = 1152;
 const float32ArrayToInt16Array = (float32Arr) => {

package/dist/css/index.css

@@ -1255,6 +1255,19 @@
   padding-inline: var(--spacing-sm);
 }
 
+.str-chat__badge--variant-error.str-chat__badge--size-xs {
+  min-width: 16px;
+  min-height: 16px;
+}
+.str-chat__badge--variant-error.str-chat__badge--size-sm {
+  min-width: 20px;
+  min-height: 20px;
+}
+.str-chat__badge--variant-error.str-chat__badge--size-md {
+  min-width: 24px;
+  min-height: 24px;
+}
+
 .str-chat .str-chat__image-placeholder {
   width: 100%;
   height: 100%;
@@ -1879,6 +1892,66 @@
   top: var(--spacing-xs);
 }
 
+@keyframes str-chat-context-menu-roll-in-from-left {
+  from {
+    opacity: 0.12;
+    transform: translateX(16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-right {
+  from {
+    opacity: 0.12;
+    transform: translateX(-16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-top {
+  from {
+    opacity: 0.12;
+    transform: translateY(14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-roll-in-from-bottom {
+  from {
+    opacity: 0.12;
+    transform: translateY(-14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes str-chat-context-menu-submenu-forward {
+  from {
+    opacity: 0.18;
+    transform: translateX(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes str-chat-context-menu-submenu-backward {
+  from {
+    opacity: 0.18;
+    transform: translateX(-32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 .str-chat {
   /*
    * Dialog theme variables (ported from @stream-chat-css v2 Dialog theme),
@@ -1916,6 +1989,12 @@
   --str-chat__dialog-menu-button-border-inline-start: none;
   --str-chat__dialog-menu-button-border-inline-end: none;
   --str-chat__dialog-menu-button-box-shadow: none;
+  --str-chat__menu-roll-duration: 170ms;
+  --str-chat__menu-roll-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --str-chat__menu-submenu-forward-duration: 280ms;
+  --str-chat__menu-submenu-backward-duration: 400ms;
+  --str-chat__menu-submenu-forward-ease: cubic-bezier(0.2, 0.95, 0.25, 1);
+  --str-chat__menu-submenu-backward-ease: cubic-bezier(0.16, 0.92, 0.2, 1);
 }
 .str-chat .str-chat__context-menu {
   background: var(--str-chat__dialog-menu-background-color);
@@ -1975,6 +2054,19 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxxs);
+  overflow-x: hidden;
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-forward {
+  animation-duration: var(--str-chat__menu-submenu-forward-duration, 220ms);
+  animation-name: var(--str-chat__context-menu-submenu-forward-animation, str-chat-context-menu-submenu-forward);
+  animation-timing-function: var(--str-chat__menu-submenu-forward-ease, cubic-bezier(0.25, 0.9, 0.35, 1));
+  transform-origin: var(--str-chat__context-menu-submenu-forward-transform-origin, left center);
+}
+.str-chat .str-chat__context-menu .str-chat__context-menu__body.str-chat__context-menu__body--submenu-backward {
+  animation-duration: var(--str-chat__menu-submenu-backward-duration, 320ms);
+  animation-name: var(--str-chat__context-menu-submenu-backward-animation, str-chat-context-menu-submenu-backward);
+  animation-timing-function: var(--str-chat__menu-submenu-backward-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
+  transform-origin: var(--str-chat__context-menu-submenu-backward-transform-origin, right center);
 }
 .str-chat .str-chat__context-menu .str-chat__context-menu__button {
   background: var(--str-chat__dialog-menu-button-background-color);
@@ -2040,6 +2132,72 @@
 .str-chat .str-chat__context-menu .str-chat__user-context-menu__button {
   font-weight: var(--typography-font-weight-regular, 400);
 }
+.str-chat [data-str-chat-placement^=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat [data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat [data-str-chat-placement^=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center top;
+}
+.str-chat [data-str-chat-placement^=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center bottom;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: left center;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: right center;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: center top;
+}
+.str-chat [data-str-chat-dialog-state=closing][data-str-chat-placement^=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease) reverse forwards;
+  transform-origin: center bottom;
+}
+.str-chat .str-chat__context-menu__submenu-container:not([data-str-chat-roll-from])[data-str-chat-roll-axis=x][data-str-chat-placement^=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat .str-chat__context-menu__submenu-container:not([data-str-chat-roll-from])[data-str-chat-roll-axis=x]:not([data-str-chat-placement^=left]) > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=left] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-left var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: left center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=right] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-right var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: right center;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=top] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-top var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center top;
+}
+.str-chat .str-chat__context-menu__submenu-container[data-str-chat-roll-from=bottom] > .str-chat__context-menu {
+  animation: str-chat-context-menu-roll-in-from-bottom var(--str-chat__menu-roll-duration, 130ms) var(--str-chat__menu-roll-ease);
+  transform-origin: center bottom;
+}
+.str-chat .str-chat__context-menu[data-str-chat-enable-animations=false],
+.str-chat .str-chat__context-menu[data-str-chat-enable-animations=false] .str-chat__context-menu__body {
+  animation: none !important;
+  transform: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .str-chat [data-str-chat-placement] > .str-chat__context-menu {
+    animation: none;
+  }
+}
 
 .str-chat__dialog-overlay {
   inset: 0;
@@ -2603,9 +2761,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-xs);
+  padding-block: var(--spacing-xs);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-sm);
   min-height: 60px;
 }
+.str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__play-button-container {
+  padding: var(--spacing-xxs);
+}
 .str-chat__attachment-list .str-chat__message-attachment__voice-recording-widget .str-chat__message-attachment__voice-recording-widget__metadata {
   min-width: 180px;
   padding-inline: var(--spacing-xs);
@@ -2649,14 +2812,16 @@
 }
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  padding: 0;
-  background-color: transparent;
   border: 1px solid var(--chat-border-incoming);
   box-shadow: var(--background-core-elevation-0);
 }
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment {
   background-color: var(--chat-bg-incoming);
 }
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-attachment .str-chat__message-attachment__voice-recording-widget {
+  padding: unset;
+  padding-inline-end: var(--spacing-xxs);
+}
 
 .str-chat__message--me .str-chat__message-attachment {
   background-color: var(--chat-bg-attachment-outgoing);
@@ -3479,7 +3644,7 @@
   position: absolute;
   width: calc(100% + 4px);
   height: calc(100% + 4px);
-  border: 2px solid var(--border-core-inverted);
+  border: 2px solid var(--border-core-inverse);
   border-radius: inherit;
 }
 .str-chat__avatar .str-chat__avatar-status-badge {
@@ -5081,6 +5246,7 @@
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-playback,
 .str-chat__audio_recorder .str-chat__audio-recorder__recording-preview {
   flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
@@ -5153,11 +5319,11 @@
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container,
 .str-chat__audio_recorder .str-chat__waveform-box-container {
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
-  width: 100%;
+  width: auto;
   min-width: 0;
-  flex-shrink: 1;
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container {
   max-width: 500px;
@@ -5168,7 +5334,7 @@
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track {
   display: flex;
   min-width: 0;
-  width: unset;
+  width: 100%;
   align-items: center;
   flex-wrap: nowrap;
   height: 2rem;
@@ -5183,7 +5349,7 @@
   padding-inline: var(--spacing-xs);
 }
 .str-chat__audio_recorder .str-chat__wave-progress-bar__track-container .str-chat__wave-progress-bar__track {
-  flex: unset;
+  flex: 1 1 auto;
 }
 .str-chat__audio_recorder .str-chat__audio_recorder__recording-controls {
   display: flex;
@@ -5211,7 +5377,7 @@
   --str-chat__message-border-inline-end: none;
   --str-chat__message-box-shadow: none;
   --str-chat__message-active-background-color: transparent;
-  --str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
+  --str-chat__message-options-color: var(--button-secondary-text);
   --str-chat__message-options-hover-background-color: var(
     --str-chat__tertiary-surface-color
   );
@@ -5323,16 +5489,6 @@
   max-width: var(--str-chat__message-max-width);
 }
 
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text .str-chat__message-bubble {
-  padding: 0;
-}
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
-  padding: 0;
-}
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-text {
-  display: none;
-}
-
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment .str-chat__message-bubble {
   padding: 0;
 }
@@ -5345,11 +5501,6 @@
   font: var(--str-chat__body2-medium-text);
 }
 
-.str-chat__message--error-message {
-  color: var(--str-chat__message-error-message-color);
-  font: var(--str-chat__caption-text);
-}
-
 .str-chat__message {
   background: var(--str-chat__message-background-color);
   color: var(--str-chat__message-color);
@@ -5395,10 +5546,10 @@
   grid-template-columns: 1fr;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-start;
+  justify-self: flex-end;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-end;
+  justify-self: flex-start;
 }
 .str-chat__message.str-chat__message--other .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-start: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
@@ -5431,10 +5582,10 @@
   grid-template-columns: 1fr;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host {
-  justify-self: flex-end;
+  justify-self: flex-start;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--flipped-horizontally) {
-  justify-self: flex-start;
+  justify-self: flex-end;
 }
 .str-chat__message.str-chat__message--me .str-chat__message-inner .str-chat__message-reactions-host:has(.str-chat__message-reactions--top) {
   padding-inline-end: calc(var(--str-chat__message-reactions-host-offset-x) * -1);
@@ -5594,13 +5745,8 @@
   display: inline-block;
   width: 1.25em;
 }
-.str-chat__message .str-chat__message-error-icon {
+.str-chat__message .str-chat__message-error-indicator {
   display: none;
-  --str-chat-icon-color: var(--str-chat__message-error-message-color);
-  /* stylelint-disable-next-line selector-max-id */
-}
-.str-chat__message .str-chat__message-error-icon svg #background {
-  fill: var(--str-chat__message-error-message-color);
 }
 .str-chat__message .str-chat__message-inner--error {
   cursor: pointer;
@@ -5614,16 +5760,12 @@
   padding: 0;
   gap: var(--spacing-xxs);
 }
-.str-chat__message.str-chat__message--error .str-chat__message-error-icon, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon {
+.str-chat__message.str-chat__message--failed .str-chat__message-error-indicator {
   display: block;
   position: absolute;
   top: 8px;
   inset-inline-end: calc(-1 * calc(var(--str-chat__spacing-px) * 18) / 2);
 }
-.str-chat__message.str-chat__message--error .str-chat__message-error-icon svg, .str-chat__message.str-chat__message--failed .str-chat__message-error-icon svg {
-  width: calc(var(--str-chat__spacing-px) * 18);
-  height: calc(var(--str-chat__spacing-px) * 18);
-}
 
 .str-chat__message--highlighted {
   transition: background-color 0.1s ease-out;
@@ -6109,6 +6251,8 @@
 .str-chat__message-options .str-chat__message-reply-in-thread-button .str-chat__message-action-icon path,
 .str-chat__message-options .str-chat__message-reactions-button .str-chat__message-action-icon path {
   fill: var(--str-chat__message-options-color);
+  stroke: var(--str-chat__message-options-color);
+  stroke-width: 0.25;
 }
 .str-chat__message-options .str-chat__message-actions-box-button:hover,
 .str-chat__message-options .str-chat__message-reply-in-thread-button:hover,
@@ -6480,18 +6624,15 @@
 
 .str-chat__command-chip {
   display: flex;
-  padding: var(--spacing-xxs) var(--spacing-sm);
+  padding: var(--spacing-xxs) var(--spacing-xs);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-xxs);
   border-radius: var(--radius-max);
-  height: fit-content;
   color: var(--text-inverse);
   background-color: var(--background-core-inverse, var(--slate-900));
   text-transform: uppercase;
-  font-size: var(--typography-font-size-xs);
-  font-weight: var(--typography-font-weight-semi-bold);
-  line-height: var(--typography-line-height-tight);
+  font: var(--str-chat__metadata-emphasis-text);
 }
 .str-chat__command-chip .str-chat__command-chip__close-button {
   background: none;
@@ -6715,7 +6856,7 @@
   --str-chat__cooldown-border-inline-start: 0;
   --str-chat__cooldown-border-inline-end: 0;
   --str-chat__cooldown-box-shadow: none;
-  --str-chat__message-composer-max-width: 768px;
+  --str-chat__message-composer-max-width: 1120px;
   --str-chat__message-composer-padding: var(--spacing-md);
   --str-chat__message-composer-command-transition-duration: 280ms;
   --str-chat__message-composer-command-ease: cubic-bezier(0.22, 1, 0.32, 1);
@@ -6833,11 +6974,22 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 26px;
+  justify-content: center;
   gap: var(--spacing-sm);
 }
+.str-chat .str-chat__message-composer-controls .str-chat__message-composer-controls__text-composition-controls .str-chat__message-composer-controls__text-composition-controls__command-chip-container {
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  align-self: flex-end;
+}
 .str-chat .str-chat__message-composer-controls .str-chat__message-composer-controls__text-composition-controls__text {
   display: flex;
-  align-items: end;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
   gap: var(--spacing-xxs);
 }
 .str-chat .str-chat__message-composer-controls .str-chat__message-composer__actions,
@@ -6852,14 +7004,14 @@
   max-width: 6rem;
   opacity: 1;
   transition: max-width var(--str-chat__message-composer-command-transition-duration) var(--str-chat__message-composer-command-ease), opacity calc(var(--str-chat__message-composer-command-transition-duration) * 0.85) ease-out;
-  overflow: hidden;
 }
 .str-chat .str-chat__message-composer-controls .str-chat__textarea {
   flex: 1;
+  min-width: 0;
   position: relative;
   display: flex;
   align-items: center;
-  margin-inline: var(--spacing-xxs) var(--spacing-xs);
+  width: 100%;
 }
 .str-chat .str-chat__message-composer-controls .str-chat__textarea textarea {
   background: var(--str-chat__message-textarea-background-color);
@@ -7145,7 +7297,7 @@
 .str-chat__message-list-main-panel {
   --str-chat__message-list-scroll-max-width: calc(
     var(--str-chat__message-composer-max-width) +
-      var(--str-chat__message-composer-padding)
+      (2 * var(--str-chat__message-composer-padding))
   );
 }
 
@@ -7176,7 +7328,6 @@
   max-width: 100%;
 }
 .str-chat__message-list .str-chat__message-list-scroll {
-  /* Max container 800px, 16px padding → 768px readable content; matches composer width + padding */
   max-width: var(--str-chat__message-list-scroll-max-width);
 }
 .str-chat__message-list .str-chat__message-list-scroll .str-chat__ul {
@@ -7410,7 +7561,7 @@
 .str-chat__notification {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   min-height: 48px;
   min-width: 200px;
   max-width: 100%;
@@ -7427,7 +7578,6 @@
   display: flex;
   flex: 1 1 auto;
   gap: var(--spacing-xs);
-  min-width: 0;
 }
 .str-chat__notification .str-chat__notification-content .str-chat__notification-icon {
   display: flex;
@@ -7442,7 +7592,8 @@
   flex: 1 1 auto;
   padding-block: var(--spacing-xxxs);
   font: var(--str-chat__caption-default-text);
-  min-width: 0;
+  text-align: center;
+  white-space: nowrap;
 }
 .str-chat__notification .str-chat__notification-actions {
   display: flex;
@@ -7817,34 +7968,40 @@
   border: 1px solid var(--str-chat__disabled-color);
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__checkmark--checked {
-  height: calc(var(--str-chat__poll-checkmark-size) + 1px);
-  width: calc(var(--str-chat__poll-checkmark-size) + 1px);
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg==");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 11px 10px;
   background-color: var(--str-chat__primary-color);
-  border: none;
+  border-color: var(--str-chat__primary-color);
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data {
   flex: 1;
   display: flex;
   align-items: start;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-xs);
   grid-column: 2/3;
   grid-row: 1/2;
+  min-height: 24px;
+  padding-block: var(--spacing-xxxs);
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data p {
   margin: 0;
   flex: 1;
 }
-.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-voters {
+.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-votes {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+}
+.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-votes .str-chat__poll-option-voters {
   --str-chat__avatar-size: 1.175rem;
   display: flex;
 }
-.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-vote-count {
-  font-size: var(--typography-font-size-xs);
-  line-height: var(--typography-line-height-tight);
+.str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option-data .str-chat__poll-option-votes .str-chat__poll-option-vote-count {
+  text-align: right;
+  font: var(--str-chat__metadata-default-text);
+  font-variant-numeric: tabular-nums;
 }
 .str-chat__poll-option-list .str-chat__poll-option .str-chat__poll-option__votes-bar {
   grid-column: 2/3;
@@ -7956,7 +8113,9 @@
   border-top: 1px solid var(--border-core-default);
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option--has-more-votes,
-.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-more-votes {
+.str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option--has-votes,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-more-votes,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__option-list .str-chat__poll-option--has-votes {
   padding-bottom: 0;
 }
 .str-chat__modal__poll-results .str-chat_poll-option-with-votes-list .str-chat__poll-option {
@@ -8363,10 +8522,20 @@
   gap: var(--spacing-xs);
   padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
 }
+.str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-icon {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: system-ui;
+  font-style: normal;
+  letter-spacing: 0;
+  display: flex;
+}
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxxs);
+  flex-grow: 1;
+  min-width: 0;
 }
 .str-chat__message-reactions-detail .str-chat__message-reactions-detail__user-list .str-chat__message-reactions-detail__user-list-item .str-chat__message-reactions-detail__user-list-item-info .str-chat__message-reactions-detail__user-list-item-username {
   color: var(--text-primary);
@@ -8382,6 +8551,7 @@
   color: var(--text-tertiary);
   font: var(--str-chat__metadata-default-text);
   cursor: pointer;
+  align-self: flex-start;
 }
 
 .str-chat__search {