stream-chat-react 12.4.0 → 12.5.0

package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout.scss

@@ -114,7 +114,7 @@
     top: calc(var(--str-chat__spacing-px) * 2);
     inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
     cursor: pointer;
-    z-index: 1;
+    z-index: 0;
 
     svg {
       width: calc(var(--str-chat__spacing-px) * 24);
@@ -128,7 +128,7 @@
     @include utils.unset-button(unset);
     inset-inline-start: 0;
     cursor: pointer;
-    z-index: 1;
+    z-index: 0;
   }
 }
 

package/dist/scss/v2/AudioRecorder/AudioRecorder-layout.scss

@@ -10,7 +10,8 @@
   padding-inline: 1rem;
 }
 
-.str-chat__audio_recorder {
+.str-chat__audio_recorder,
+stream-voice-recorder-wavebar {
   @include utils.flex-row-center;
   gap: 0.375rem;
 
@@ -21,28 +22,52 @@
     padding: 0;
   }
 
-  .str-chat__audio_recorder__cancel-button svg {
-    height: 28px;
+  .str-chat__audio_recorder__cancel-button {
+    --str-chat-icon-height: 28px;
+
+    svg {
+      height: 28px;
+    }
   }
 
-  .str-chat__audio_recorder__toggle-playback-button svg {
-    height: 16px;
+  .str-chat__audio_recorder__toggle-playback-button {
+    --str-chat-icon-height: 16px;
+
+    svg {
+      height: 16px;
+    }
   }
 
-  .str-chat__audio_recorder__pause-recording-button svg {
-    height: 12px;
+  .str-chat__audio_recorder__pause-recording-button {
+    --str-chat-icon-height: 12px;
+
+    svg {
+      height: 12px;
+    }
   }
 
-  .str-chat__audio_recorder__resume-recording-button svg {
-    height: 24px;
+  .str-chat__audio_recorder__resume-recording-button {
+    --str-chat-icon-height: 24px;
+
+    svg {
+      height: 24px;
+    }
   }
 
-  .str-chat__audio_recorder__stop-button svg {
-    height: 12px;
+  .str-chat__audio_recorder__stop-button {
+    --str-chat-icon-height: 12px;
+
+    svg {
+      height: 12px;
+    }
   }
 
-  .str-chat__audio_recorder__complete-button svg {
-    height: 16px;
+  .str-chat__audio_recorder__complete-button {
+    --str-chat-icon-height: 16px;
+
+    svg {
+      height: 16px;
+    }
   }
 
   .str-chat__recording-timer {
@@ -86,4 +111,29 @@
   .str-chat__audio_recorder__waveform-box {
     overflow-x: hidden;
   }
-}
+}
+
+.str-chat__audio_recorder-container {
+  .str-chat__message-attachment__voice-recording-widget {
+    display: flex;
+    gap: var(--str-chat__spacing-1_5);
+
+    .str-chat__message-attachment-voice-recording-widget--first-row {
+      display: none;
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__audio-state {
+      display: flex;
+      gap: var(--str-chat__spacing-1_5);
+
+      .str-chat__message-attachment__voice-recording-widget__timer {
+        min-width: 3rem;
+        align-self: center;
+      }
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__right-section {
+      display: none;
+    }
+  }
+}

package/dist/scss/v2/AudioRecorder/AudioRecorder-theme.scss

@@ -17,15 +17,24 @@
   }
 
   .str-chat__audio_recorder__cancel-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
     color: var(--str-chat__text-low-emphasis-color);
   }
 
   .str-chat__audio_recorder__toggle-playback-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
     color: var(--str-chat__text-low-emphasis-color);
   }
 
+  .str-chat__message-attachment-audio-widget--play-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+    box-shadow: none;
+    border: none;
+  }
+
   .str-chat__audio_recorder__pause-recording-button,
   .str-chat__audio_recorder__resume-recording-button {
+    --str-chat-icon-color: var(--str-chat__danger-color);
     color: var(--str-chat__danger-color);
   }
 
@@ -36,6 +45,7 @@
 
   .str-chat__audio_recorder__stop-button,
   .str-chat__audio_recorder__complete-button {
+    --str-chat-icon-color: var(--str-chat__on-primary-color);
     border-radius: var(--str-chat__border-radius-circle);
     color: var(--str-chat__on-primary-color);
     background-color: var(--str-chat__primary-color);
@@ -48,4 +58,4 @@
       }
     }
   }
-}
+}

package/dist/scss/v2/Avatar/Avatar-layout.scss

@@ -30,6 +30,10 @@
   .stream-chat__avatar--message-status {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
   }
+
+  .str-chat__avatar--poll-vote-author {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
+  }
 }
 
 .str-chat__avatar {

package/dist/scss/v2/ChannelList/ChannelList-layout.scss

@@ -34,6 +34,10 @@
       @include utils.flex-row-center;
     }
   }
+
+  .stream-chat__paginated-list {
+    gap: 0;
+  }
 }
 
 .str-chat__channel-list-react {
@@ -48,3 +52,14 @@
     }
   }
 }
+
+.str-chat-angular__channel-list {
+  .str-chat__channel-list-messenger__main {
+    display: flex;
+    flex-direction: column;
+
+    stream-paginated-list {
+      min-height: 0;
+    }
+  }
+}

package/dist/scss/v2/Dialog/Dialog-layout.scss

@@ -1,3 +1,5 @@
+@use '../utils';
+
 .str-chat__dialog-overlay {
   inset: 0;
   overflow: hidden;
@@ -5,4 +7,56 @@
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
   z-index: 2;
+}
+
+.str-chat__dialog {
+  width: 100%;
+
+  .str-chat__dialog__body {
+    padding: 2rem 1rem;
+    overflow-y: auto;
+
+    .str-chat__dialog__title {
+      margin-bottom: 1rem;
+    }
+
+  }
+
+  .str-chat__dialog__controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.25rem;
+    padding: 1.25rem;
+
+    .str-chat__dialog__controls-button {
+      @include utils.button-reset;
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    width: 100%;
+    padding: 0.625rem 1rem;
+  }
+}
+
+.str-chat__dialog-menu {
+  overflow: hidden;
+
+  .str-chat__dialog-menu__button {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+
+    .str-chat__dialog-menu__button-icon {
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .str-chat__dialog-menu__button-text {
+      padding-inline: 0.675rem;
+    }
+  }
 }

package/dist/scss/v2/Dialog/Dialog-theme.scss

@@ -0,0 +1,103 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the component */
+  --str-chat__dialog-menu-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__dialog-menu-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__dialog-menu-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+
+  /* The border radius used for the borders of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-radius: 0;
+
+  /* The text/icon color of an item in the message actions box */
+  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
+
+  /* The background color of an item in the message actions box */
+  --str-chat__dialog-menu-button-background-color: transparent;
+
+  /* The background color of an item in the message actions box when hovered */
+  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
+
+  /* Top border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-start: none;
+
+  /* Bottom border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-end: none;
+
+  /* Left (right in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-end: none;
+
+  /* Box shadow applied to an item in the message actions box */
+  --str-chat__dialog-menu-button-box-shadow: none;
+}
+
+.str-chat__dialog {
+  .str-chat__dialog__title {
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__dialog__prompt {
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__dialog__controls {
+    .str-chat__dialog__controls-button {
+      cursor: pointer;
+      font: var(--str-chat__body-medium-text);
+      color: var(--str-chat__primary-color);
+    }
+
+    .str-chat__dialog__controls-button--submit {
+      text-transform: uppercase;
+
+      &:disabled {
+        color: var(--str-chat__disabled-color);
+      }
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    font: var(--str-chat__subtitle-text);
+    border-radius: 20px;
+    border: 1px solid var(--str-chat__primary-color);
+  }
+}
+
+
+.str-chat__dialog-menu {
+  @include utils.component-layer-overrides('dialog-menu');
+
+  .str-chat__dialog-menu__button {
+    @include utils.component-layer-overrides('dialog-menu-button');
+    cursor: pointer;
+    font: var(--str-chat__subtitle-text);
+
+    &:hover, &:focus{
+      background-color: var(--str-chat__dialog-menu-button-hover-background-color);
+    }
+  }
+}

package/dist/scss/v2/DragAndDropContainer/DragAmdDropContainer-layout.scss

@@ -0,0 +1,5 @@
+.str-chat__drag-and-drop-container__item {
+  display: flex;
+  width: 100%;
+  padding-block: 0.25rem;
+}

package/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme.scss

@@ -0,0 +1,47 @@
+.str-chat {
+  /* Top border of the component */
+  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
+
+  /* Bottom border of the component */
+  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
+
+  /* Top border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
+
+  /* Bottom border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
+
+  /* Left (right in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
+}
+
+
+.str-chat__drag-and-drop-container--dragging {
+  cursor: grabbing;
+}
+
+.str-chat__drag-and-drop-container__item[draggable="true"] {
+  cursor: grab;
+
+  &:active {
+    background: transparent;
+  }
+}
+
+
+.str-chat__drag-and-drop-container__item {
+  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
+  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-top {
+    border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
+  }
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
+    border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
+  }
+}
+

package/dist/scss/v2/Form/Form-layout.scss

@@ -0,0 +1,9 @@
+.str-chat__dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .str-chat__form-field-error {
+    margin-left: 0.5rem;
+  }
+}

package/dist/scss/v2/Form/Form-theme.scss

@@ -0,0 +1,17 @@
+.str-chat__form-field-error {
+  font-size: 0.75rem;
+  color: var(--str-chat__danger-color)
+}
+
+// hide spin buttons form input of type number
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

package/dist/scss/v2/Icon/Icon-layout.scss

@@ -30,7 +30,6 @@
   content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
 }
 
-// Copy icon mapping here
 .str-chat__icon--action::before {
   content: '\e800';
 } /* '' */
@@ -85,3 +84,9 @@
 .str-chat__icon--attach::before {
   content: '\e811';
 } /* '' */
+.str-chat__icon--mic::before {
+  content: '\e812';
+} /* '' */
+.str-chat__icon--bin::before {
+  content: '\e813';
+} /* '' */

package/dist/scss/v2/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss

@@ -0,0 +1,4 @@
+.str-chat__infinite-scroll-paginator {
+  overflow-y: auto;
+  overflow-x: hidden;
+}

package/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout.scss

@@ -18,12 +18,3 @@
     }
   }
 }
-
-.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
-  display: none;
-  z-index: 1;
-
-  &.str-chat__message-actions-box--open {
-    display: block;
-  }
-}

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -53,10 +53,6 @@
       height: calc(var(--str-chat__spacing-px) * 45);
       cursor: pointer;
 
-      .str-chat__file-input {
-        display: none;
-      }
-
       .str-chat__file-input-label {
         @include utils.flex-row-center;
         cursor: pointer;
@@ -149,6 +145,7 @@
   }
 
   .str-chat__start-recording-audio-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
     @include utils.flex-row-center;
     cursor: pointer;
     padding: 0;
@@ -216,3 +213,31 @@
     transform: scale(-1, 1);
   }
 }
+
+.str-chat__attachment-selector-actions-menu,
+.str-chat__attachment-selector {
+  button {
+    @include utils.button-reset;
+  }
+}
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+
+    .str-chat__attachment-selector__menu-button__icon {
+      height: 26px;
+      width: 26px;
+    }
+  }
+}
+
+.str-chat__file-input {
+  display: none;
+}
+
+.str-chat__attachment-selector-actions-menu {
+  min-width: 300px;
+  padding-block: 0.5rem;
+}

package/dist/scss/v2/MessageInput/MessageInput-theme.scss

@@ -168,6 +168,18 @@
 
   /* Box shadow applied to the cooldown timer */
   --str-chat__cooldown-box-shadow: none;
+  
+  /* Color applied to an icon in a button that opens attachment selector */
+  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
+  
+  /* Color applied to an icon in a button that opens attachment selector when hovered over */
+  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over */
+  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over or focused */
+  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color);
 }
 
 .str-chat__message-input {
@@ -228,6 +240,7 @@
   }
 
   .str-chat__start-recording-audio-button {
+    --str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
     @include utils.component-layer-overrides('start-recording-audio-button');
 
     &:disabled {
@@ -282,3 +295,51 @@
     }
   }
 }
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    .str-chat__attachment-selector__menu-button__icon {
+      background-color: var(--str-chat__attachment-selector-button-icon-color);
+      -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+      mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+    }
+
+    &:hover {
+      .str-chat__attachment-selector__menu-button__icon {
+        background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
+      }
+    }
+  }
+}
+
+.str-chat__attachment-selector-actions-menu {
+  .str-chat__attachment-selector-actions-menu__button {
+    color: var(--str-chat__text-low-emphasis-color);
+
+    .str-chat__dialog-menu__button-icon {
+      background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
+    }
+
+    &:hover, &:focus {
+      color: var(--str-chat__text-color);
+
+      .str-chat__dialog-menu__button-icon {
+        background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
+      }
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__upload-file-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain;
+      mask: var(--str-chat__folder-icon) no-repeat center / contain;
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__create-poll-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
+      mask: var(--str-chat__poll-icon) no-repeat center / contain;
+    }
+  }
+}

package/dist/scss/v2/Modal/Modal-layout.scss

@@ -11,6 +11,36 @@
   height: 100%;
   z-index: 100;
 
+  .str-chat__modal-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 1.25rem 1rem;
+
+    button.str-chat__modal-header__go-back-button,
+    .str-chat__modal__close-button {
+      padding: 1rem;
+      background-size: 0.875rem;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    button.str-chat__modal-header__go-back-button {
+      background-image: var(--str-chat__arrow-left-icon);
+    }
+
+    .str-chat__modal-header__close-button {
+      background-image: var(--str-chat__close-icon);
+      background-repeat: no-repeat;
+      height: 0.875rem;
+      width: 0.875rem;
+    }
+
+    .str-chat__modal-header__title {
+      flex: 1;
+    }
+  }
+
   button.str-chat__modal__close-button {
     @include utils.unset-button;
     margin: var(--str-chat__spacing-2);
@@ -31,6 +61,7 @@
     @include utils.flex-col-center;
     padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
     width: 40%;
+    max-height: 80%;
     min-width: 0;
     min-height: 0;
   }

package/dist/scss/v2/Modal/Modal-theme.scss

@@ -46,6 +46,12 @@
     @include utils.component-layer-overrides('modal');
   }
 
+  .str-chat__modal-header {
+    .str-chat__modal-header__title {
+      font: var(--str-chat__subtitle2-medium-text);
+    }
+  }
+
   .str-chat__modal__close-button {
     --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
     @include utils.button-reset;

package/dist/scss/v2/Notification/MessageNotification-layout.scss

@@ -4,7 +4,7 @@
   align-self: center;
   padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
   bottom: calc(var(--str-chat__spacing-px) * 10);
-  z-index: 101;
+  z-index: 100;
 }
 
 .str-chat__list-notifications {