stream-chat-angular 6.2.0 → 6.3.0-beta.2

package/src/assets/styles/scss/Message/Message-layout.scss

@@ -88,9 +88,16 @@
   hyphens: auto;
   overflow-wrap: break-word;
 
+  .str-chat__message-reminder {
+    grid-area: message-reminder;
+    padding-block: 0.5rem 0.125rem;
+    margin: 0;
+  }
+
   &.str-chat__message--other,
   &.str-chat__quoted-message-preview {
     grid-template-areas:
+      '. message-reminder'
       'avatar message'
       '. replies'
       '. translation-notice'
@@ -103,6 +110,7 @@
 
   &.str-chat__message--me {
     grid-template-areas:
+      'message-reminder'
       'message'
       'replies'
       'translation-notice'
@@ -187,6 +195,7 @@
 
   &.str-chat__message--me .str-chat__message-inner {
     grid-template-areas:
+      'reminder reminder'
       'reactions reactions'
       'options message-bubble';
     grid-template-columns: 1fr auto;
@@ -251,7 +260,26 @@
     }
   }
 
-  .str-chat__message-replies-count-button-wrapper {
+  .str-chat__message-status-sent {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 12);
+
+    svg {
+      width: var(--str-chat-icon-height);
+      height: var(--str-chat-icon-height);
+    }
+  }
+
+  .str-chat__message-status-delivered {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
+
+    svg {
+      width: var(--str-chat-icon-height);
+      height: var(--str-chat-icon-height);
+    }
+  }
+
+  .str-chat__message-replies-count-button-wrapper,
+  .str-chat__message-is-thread-reply-button-wrapper {
     grid-area: replies;
 
     button {
@@ -313,7 +341,8 @@
 .str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
   /* This rule won't be applied in browsers that don't support :has() */
   .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)),
-  .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
+  .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)),
+  .str-chat__li:has(.str-chat__message-options--active) {
     .str-chat__message-options {
       display: flex;
     }
@@ -383,6 +412,12 @@
   }
 }
 
+.str-chat__message-inner:focus-within {
+  .str-chat__message-options {
+    display: flex;
+  }
+}
+
 .str-chat__message--other .str-chat__message-inner:not(:has(.str-chat__message-options--active)) {
   margin-inline-end: var(--str-chat-message-options-size);
 }

package/src/assets/styles/scss/Message/Message-theme.scss

@@ -198,6 +198,30 @@
 
   /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
   --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
+
+  /* The text color of the message reminder, if it's a quoted message */
+  --str-chat__message-reminder-color: var(--str-chat__primary-color);
+
+  /* The background of the message reminder, if it's a quoted message */
+  --str-chat__message-reminder-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the message reminder */
+  --str-chat__message-reminder-border-block-start: none;
+
+  /* Bottom border of the message reminder */
+  --str-chat__message-reminder-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the message reminder */
+  --str-chat__message-reminder-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the message reminder */
+  --str-chat__message-reminder-border-inline-end: none;
+
+  /* Box shadow applied to the message reminder */
+  --str-chat__message-reminder-box-shadow: none;
+
+  /* The border radius used for the borders of a message reminder */
+  --str-chat__message-reminder-border-radius: 0;
 }
 
 .str-chat__message--system {
@@ -228,6 +252,11 @@
     color: var(--str-chat__message-link-color);
   }
 
+  .str-chat__message-reminder {
+    @include utils.component-layer-overrides('message-reminder');
+    font: var(--str-chat__caption-medium-text);
+  }
+
   .str-chat__message-bubble {
     @include utils.component-layer-overrides('message-bubble');
     font: var(--str-chat__body2-text);
@@ -315,7 +344,17 @@
     }
   }
 
-  .str-chat__message-replies-count-button-wrapper {
+  .str-chat__message-status-sent,
+  .str-chat__message-status-delivered {
+    svg {
+      path {
+        fill: var(--str-chat__text-low-emphasis-color);
+      }
+    }
+  }
+
+  .str-chat__message-replies-count-button-wrapper,
+  .str-chat__message-is-thread-reply-button-wrapper {
     button {
       border: none;
       background-color: transparent;

package/src/assets/styles/scss/MessageActionsBox/MessageActionsBox-theme.scss

@@ -66,6 +66,14 @@
       background-color: var(--str-chat__message-actions-box-item-hover-background-color);
     }
   }
+
+  .str_chat__button-with-submenu--submenu-open {
+    background-color: var(--str-chat__message-actions-box-item-hover-background-color);
+  }
+
+  .str-chat__message-actions-box__submenu {
+    @include utils.component-layer-overrides('message-actions-box');
+  }
 }
 
 @media (hover: none) {

package/src/assets/styles/scss/MessageInput/MessageInput-layout.scss

@@ -26,19 +26,6 @@
     }
   }
 
-  .str-chat__dropzone-container {
-    @include utils.flex-row-center;
-
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 5;
-
-    p {
-      margin: unset;
-    }
-  }
-
   .str-chat__message-input-inner {
     flex-grow: 1;
     width: 100%;
@@ -59,6 +46,14 @@
       }
     }
 
+    .str-chat-angular__create-poll {
+      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 21);
+      @include utils.flex-row-center;
+      width: calc(var(--str-chat__spacing-px) * 45);
+      height: calc(var(--str-chat__spacing-px) * 45);
+      cursor: pointer;
+    }
+
     .str-chat__message-textarea-container {
       @include utils.flex-col-center;
       width: 100%;
@@ -179,6 +174,11 @@
 
   .str-chat__quoted-message-preview {
     padding: var(--str-chat__spacing-2);
+
+    .str-chat__quoted-poll-preview__name {
+      @include utils.ellipsis-text();
+      overflow-x: hidden; // force ellipsis to show
+    }
   }
 
   .str-chat__recording-permission-denied-notification {
@@ -247,3 +247,22 @@
   min-width: 300px;
   padding-block: 0.5rem;
 }
+
+.str-chat__send-to-channel-checkbox__container {
+  width: 100%;
+  display: flex;
+  padding: 0.5rem 0.75rem;
+
+  .str-chat__send-to-channel-checkbox__field {
+    display: flex;
+    align-items: center;
+
+    label {
+      padding-inline: 0.5rem;
+    }
+
+    input {
+      margin: 0;
+    }
+  }
+}

package/src/assets/styles/scss/MessageInput/MessageInput-theme.scss

@@ -25,15 +25,6 @@
   /* Box shadow applied to the component */
   --str-chat__message-input-box-shadow: none;
 
-  /* The text/icon color of the dropzone container */
-  --str-chat__dropzone-container-color: var(--str-chat__on-primary-color);
-
-  /* The background color of the dropzone container */
-  --str-chat__dropzone-container-background-color: var(--str-chat__primary-overlay-color);
-
-  /* The backdrop filter applied to the dropzone container */
-  --str-chat__dropzone-container-backdrop-filter: blur(3px);
-
   /* The border radius used for the borders of the textarea */
   --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
 
@@ -179,20 +170,16 @@
   --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__attachment-selector-actions-menu-button-icon-color-active: var(
+    --str-chat__primary-color
+  );
 }
 
 .str-chat__message-input {
   @include utils.component-layer-overrides('message-input');
 
-  .str-chat__dropzone-container {
-    background-color: var(--str-chat__dropzone-container-background-color);
-    color: var(--str-chat__dropzone-container-color);
-    backdrop-filter: var(--str-chat__dropzone-container-backdrop-filter);
-    font: var(--str-chat__subtitle-text);
-  }
-
-  .str-chat__file-input-container {
+  .str-chat__file-input-container,
+  .str-chat-angular__create-poll {
     --str-chat-icon-color: var(--str-chat__message-input-tools-color);
     @include utils.component-layer-overrides('message-input-tools');
 
@@ -326,11 +313,14 @@
       background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
     }
 
-    &:hover, &:focus {
+    &: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);
+        background-color: var(
+          --str-chat__attachment-selector-actions-menu-button-icon-color-active
+        );
       }
     }
   }
@@ -348,4 +338,22 @@
       mask: var(--str-chat__poll-icon) no-repeat center / contain;
     }
   }
+
+  .str-chat__attachment-selector-actions-menu__add-location-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__location-icon) no-repeat center / contain;
+      mask: var(--str-chat__location-icon) no-repeat center / contain;
+    }
+  }
+}
+
+.str-chat__send-to-channel-checkbox__field {
+  * {
+    cursor: pointer;
+  }
+
+  label {
+    color: var(--str-chat__text-low-emphasis-color);
+    font: var(--str-chat__body-text);
+  }
 }

package/src/assets/styles/scss/Modal/Modal-layout.scss

@@ -30,6 +30,8 @@
     }
 
     .str-chat__modal-header__close-button {
+      @include utils.button-reset;
+      cursor: pointer;
       background-image: var(--str-chat__close-icon);
       background-repeat: no-repeat;
       height: 0.875rem;

package/src/assets/styles/scss/Modal/Modal-theme.scss

@@ -74,14 +74,11 @@
   }
 }
 
-// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
-// width of its content in order the modal can be closed when clicked on overlay
-.str-chat__message-attachment--card,
-.str-chat__message-attachment--image,
-.str-chat__message-attachment--gallery {
-  .str-chat__modal--open .str-chat__modal__inner.str-chat-react__modal__inner {
+@mixin image-on-modal {
+  .str-chat__modal__inner.str-chat-react__modal__inner {
     background-color: transparent;
     width: unset;
+    max-width: unset;
     height: unset;
     padding: 0;
 
@@ -92,3 +89,21 @@
     }
   }
 }
+
+// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
+// width of its content in order the modal can be closed when clicked on overlay
+// todo: remove this rule once only GlobalModal is used and old Modal is removed from stream-chat-react
+.str-chat__message-attachment--card,
+.str-chat__message-attachment--image,
+.str-chat__message-attachment--gallery {
+  .str-chat__modal--open {
+    @include image-on-modal;
+  }
+}
+
+.str-chat-react__modal.str-chat__modal--open {
+  &.str-chat__image-modal,
+  &.str-chat__gallery-modal {
+    @include image-on-modal;
+  }
+}

package/src/assets/styles/scss/Poll/Poll-layout.scss

@@ -45,12 +45,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+  }
+}
 
-    .str-chat__poll-action {
-      padding: 0.675rem;
-      font: var(--str-chat__subtitle-text);
-      color: var(--str-chat__primary-color);
-    }
+.str-chat__poll-action {
+  padding: 0.675rem;
+  font: var(--str-chat__subtitle-text);
+  color: var(--str-chat__primary-color);
+}
+
+.str-chat__poll-results-modal,
+.str-chat__poll-answer-list-modal,
+.str-chat__add-poll-answer-modal,
+.str-chat__suggest-poll-option-modal,
+.str-chat__poll-options-modal {
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
   }
 }
 
@@ -89,7 +100,6 @@
   }
 }
 
-
 .str-chat__poll-option-list--full {
   .str-chat__poll-option {
     display: flex;
@@ -137,7 +147,6 @@
   }
 }
 
-
 .str-chat__modal__poll-results {
   .str-chat__poll-option {
     display: flex;
@@ -145,11 +154,15 @@
   }
 }
 
-.str-chat__poll-actions .str-chat__modal {
+.str-chat-react__modal.str-chat__poll-action-modal,
+.str-chat__poll-actions:not(.str-chat-angular__poll-actions) .str-chat__modal {
   .str-chat__modal__close-button {
     display: none;
   }
+}
 
+.str-chat-react__modal.str-chat__poll-action-modal,
+.str-chat__poll-actions .str-chat__modal {
   .str-chat__modal__inner {
     $content-offset-inline: 1rem;
     padding: 0 0 0.5rem;
@@ -320,6 +333,7 @@
   align-items: flex-start;
 }
 
+.str-chat-angular__create-poll-modal .str-chat__modal,
 .str-chat__modal.str-chat__create-poll-modal {
   .str-chat__modal__close-button {
     display: none;
@@ -401,7 +415,7 @@
       }
 
       .str-chat__form__input-field {
-          width: 100%;
+        width: 100%;
 
         .str-chat__form__input-field__value {
           padding: 0;
@@ -434,41 +448,6 @@
         width: 1rem;
       }
     }
-
-    .str-chat__form__switch-field {
-      width: 100%;
-      padding: 1rem;
-
-      input[type='checkbox'] {
-        display: none;
-      }
-
-      label {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-      }
-
-      .str-chat__form__switch-field__switch {
-        display: flex;
-        align-items: center;
-        width: calc(var(--str-chat__spacing-px) * 52);
-        height: calc(var(--str-chat__spacing-px) * 32);
-        padding: 0.25rem;
-
-        .str-chat__form__switch-field__switch-handle {
-          height: 1.5rem;
-          width: 1.5rem;
-        }
-
-        &.str-chat__form__switch-field__switch--on {
-          .str-chat__form__switch-field__switch-handle {
-            transform: translateX(1.25rem);
-          }
-        }
-      }
-    }
   }
 }
 
@@ -486,3 +465,25 @@
     }
   }
 }
+
+.str-chat-angular__poll-actions {
+  .str-chat__modal__poll-option-list {
+    max-height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .str-chat__modal__poll-option-list__body {
+      max-height: 100%;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+
+      stream-poll-options-list {
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+  }
+}

package/src/assets/styles/scss/Poll/Poll-theme.scss

@@ -44,14 +44,14 @@
       }
     }
   }
+}
 
-  .str-chat__poll-option-list--full,
-  .str-chat__poll-answer,
-  .str-chat__modal__poll-option-list__title,
-  .str-chat__modal__poll-results .str-chat__modal__poll-results__title,
-  .str-chat__modal__poll-results .str-chat__poll-option {
-    border-radius: 0.75rem;
-  }
+.str-chat__poll-option-list--full,
+.str-chat__poll-answer,
+.str-chat__modal__poll-option-list__title,
+.str-chat__modal__poll-results .str-chat__modal__poll-results__title,
+.str-chat__modal__poll-results .str-chat__poll-option {
+  border-radius: 0.75rem;
 }
 
 .str-chat__poll-option-list--full {
@@ -66,7 +66,7 @@
   }
 }
 
-.str-chat__poll-actions .str-chat__modal {
+.str-chat__modal, .str-chat__poll-actions .str-chat__modal {
   .str-chat__poll-answer__text,
   .str-chat__modal__poll-option-list__title,
   .str-chat__modal__poll-results__title {
@@ -175,32 +175,4 @@
       border: 1px solid var(--str-chat__message-error-message-color);
     }
   }
-
-  .str-chat__form__switch-field {
-    @include field-background;
-
-    &, label {
-      cursor: pointer;
-    }
-
-    .str-chat__form__switch-field__switch {
-      cursor: pointer;
-      background-color: var(--str-chat__text-low-emphasis-color);
-      border-radius: 100px;
-
-      .str-chat__form__switch-field__switch-handle {
-        border-radius: var(--str-chat__border-radius-circle);
-        background-color: var(--str-chat__disabled-color);
-      }
-
-      &.str-chat__form__switch-field__switch--on {
-        background-color: var(--str-chat__green600);
-
-        .str-chat__form__switch-field__switch-handle {
-          background-color: var(--str-chat__background-color);
-          border-radius: var(--str-chat__border-radius-circle);
-        }
-      }
-    }
-  }
 }

package/src/assets/styles/scss/_icons.scss

@@ -8,6 +8,7 @@
   --str-chat__add-attachment-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS4zMzMyIDcuMzMzMDdMMTIuNjY2NiA3LjMzMzA3TDEyLjY2NjYgMTIuNjY2NEw3LjMzMzI0IDEyLjY2NjRMNy4zMzMyNCAxNS4zMzMxTDEyLjY2NjYgMTUuMzMzMUwxMi42NjY2IDIwLjY2NjRMMTUuMzMzMiAyMC42NjY0TDE1LjMzMzIgMTUuMzMzMUwyMC42NjY2IDE1LjMzMzFMMjAuNjY2NiAxMi42NjY0TDE1LjMzMzIgMTIuNjY2NEwxNS4zMzMyIDcuMzMzMDdaTTEzLjk5OTkgMC42NjY0MDRDNi42Mzk5MSAwLjY2NjQwNCAwLjY2NjU3NiA2LjYzOTc0IDAuNjY2NTc3IDEzLjk5OTdDMC42NjY1NzYgMjEuMzU5NyA2LjYzOTkxIDI3LjMzMzEgMTMuOTk5OSAyNy4zMzMxQzIxLjM1OTkgMjcuMzMzMSAyNy4zMzMyIDIxLjM1OTcgMjcuMzMzMiAxMy45OTk3QzI3LjMzMzIgNi42Mzk3NCAyMS4zNTk5IDAuNjY2NDA0IDEzLjk5OTkgMC42NjY0MDRaTTEzLjk5OTkgMjQuNjY2NEM4LjExOTkxIDI0LjY2NjQgMy4zMzMyNCAxOS44Nzk3IDMuMzMzMjUgMTMuOTk5N0MzLjMzMzI0IDguMTE5NzQgOC4xMTk5MSAzLjMzMzA3IDEzLjk5OTkgMy4zMzMwN0MxOS44Nzk5IDMuMzMzMDcgMjQuNjY2NiA4LjExOTc0IDI0LjY2NjYgMTMuOTk5N0MyNC42NjY2IDE5Ljg3OTcgMTkuODc5OSAyNC42NjY0IDEzLjk5OTkgMjQuNjY2NFoiLz4KPC9zdmc+Cg==');
   --str-chat__folder-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo=');
   --str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+');
+  --str-chat__location-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDI1NS44NTYgMjU1Ljg1NiI+PHBhdGggZD0iTTEyNy45MjggMzguOGMtMzAuNzUgMC01NS43NjggMjUuMDE3LTU1Ljc2OCA1NS43NjdzMjUuMDE4IDU1Ljc2NyA1NS43NjggNTUuNzY3IDU1Ljc2OC0yNS4wMTcgNTUuNzY4LTU1Ljc2N1MxNTguNjc4IDM4LjggMTI3LjkyOCAzOC44em0wIDk2LjUzM2MtMjIuNDc5IDAtNDAuNzY4LTE4LjI4OC00MC43NjgtNDAuNzY3UzEwNS40NDkgNTMuOCAxMjcuOTI4IDUzLjhzNDAuNzY4IDE4LjI4OCA0MC43NjggNDAuNzY3LTE4LjI4OCA0MC43NjYtNDAuNzY4IDQwLjc2NnoiLz48cGF0aCBkPSJNMTI3LjkyOCAwQzc1Ljc4NCAwIDMzLjM2MiA0Mi40MjIgMzMuMzYyIDk0LjU2NmMwIDMwLjA3MiAyNS4yMiA3NC44NzUgNDAuMjUzIDk4LjkwNCA5Ljg5MSAxNS44MDkgMjAuNTIgMzAuODU1IDI5LjkyOCA0Mi4zNjUgMTUuMTAxIDE4LjQ3NCAyMC41MDYgMjAuMDIgMjQuMzg2IDIwLjAyIDMuOTM4IDAgOS4wNDEtMS41NDcgMjQuMDk1LTIwLjAzMSA5LjQyOS0xMS41NzkgMjAuMDYzLTI2LjYxNiAyOS45NDQtNDIuMzQyIDE1LjEzNi0yNC4wODggNDAuNTI3LTY4Ljk3MSA0MC41MjctOTguOTE3QzIyMi40OTUgNDIuNDIyIDE4MC4wNzMgMCAxMjcuOTI4IDB6bTQzLjY0MSAxODEuODAzYy0xOS4zOTYgMzEuNDgzLTM3LjIwMyA1Mi43NTctNDMuNzMgNTguMTg4LTYuNTYxLTUuMjY0LTI0LjA3OS0yNi4wMzItNDMuNzQ2LTU4LjA4OS0yMi43MDctMzcuMDE1LTM1LjczLTY4Ljg0OC0zNS43My04Ny4zMzZDNDguMzYyIDUwLjY5MyA4NC4wNTUgMTUgMTI3LjkyOCAxNXM3OS41NjYgMzUuNjkzIDc5LjU2NiA3OS41NjZjLjAwMSAxOC4zODItMTMuMDk0IDUwLjE3OC0zNS45MjUgODcuMjM3eiIvPjwvc3ZnPg==');
   --str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K');
   --str-chat__circle-stop-icon: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==');
   --str-chat__magnifier-glass-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=');

package/src/assets/styles/scss/index.layout.scss

@@ -16,7 +16,8 @@
 @use 'common/CTAButton/CTAButton-layout';
 @use 'common/CircleFAButton/CircleFAButton-layout';
 @use 'Dialog/Dialog-layout';
-@use 'DragAndDropContainer/DragAmdDropContainer-layout';
+@use 'DragAndDropContainer/DragAndDropContainer-layout';
+@use 'DropzoneContainer/DropzoneContainer-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'Form/Form-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
@@ -24,6 +25,7 @@
 @use 'InfiniteScrollPaginator/InfiniteScrollPaginator-layout';
 @use 'LinkPreview/LinkPreview-layout';
 @use 'LoadingIndicator/LoadingIndicator-layout';
+@use 'Location/Location-layout';
 @use 'Message/Message-layout';
 @use 'MessageActionsBox/MessageActionsBox-layout';
 @use 'MessageBouncePrompt/MessageBouncePrompt-layout';

package/src/assets/styles/scss/index.scss

@@ -19,12 +19,14 @@
 @use 'ChannelSearch/ChannelSearch-theme';
 @use 'Dialog/Dialog-theme';
 @use 'DragAndDropContainer/DragAndDropContainer-theme';
+@use 'DropzoneContainer/DropzoneContainer-theme';
 @use 'EditMessageForm/EditMessageForm-theme';
 @use 'Form/Form-theme';
 @use 'Icon/Icon-theme';
 @use 'ImageCarousel/ImageCarousel-theme';
 @use 'LinkPreview/LinkPreview-theme';
 @use 'LoadingIndicator/LoadingIndicator-theme';
+@use 'Location/Location-theme';
 @use 'Message/Message-theme';
 @use 'MessageActionsBox/MessageActionsBox-theme';
 @use 'MessageBouncePrompt/MessageBouncePrompt-theme';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '6.2.0';
+export const version = '6.3.0-beta.2';