stream-chat-react 9.4.1 → 10.0.0-theming-v2.1

package/dist/scss/v2/_global-layout-variables.scss

@@ -0,0 +1,65 @@
+// Since Angular uses dynamic components it's not enough the hide the message input for theme-v1/v2, we have to remove it from the DOM tree
+// Angular component lifecycle requires us to place this on the root level
+:root {
+  /* The theme version being used, 1 or 2. Used internally by SDKs */
+  --str-chat__theme-version: 2;
+}
+
+.str-chat {
+  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
+  --str-chat__spacing-px: 1px;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-0_5: 0.125rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-1: 0.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-1_5: 0.375rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-2: 0.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-2_5: 0.625rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-3: 0.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-3_5: 0.875rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-4: 1rem; // 16px by default
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-5: 1.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-6: 1.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-7: 1.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-8: 2rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-9: 2.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-10: 2.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-11: 2.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-12: 3rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-14: 3.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-16: 4rem;
+}

package/dist/scss/v2/_global-theme-variables.scss

@@ -0,0 +1,166 @@
+.str-chat {
+  /* Border radius used for slightly rounded elements */
+  --str-chat__border-radius-xs: 8px;
+
+  /* Border radius used for slightly rounded elements */
+  --str-chat__border-radius-sm: 14px;
+
+  /* Border radius used for rounded elements */
+  --str-chat__border-radius-md: 18px;
+
+  /* Border radius used for rounded elements */
+  --str-chat__border-radius-lg: 20px;
+
+  /* Border radius used for circular elements */
+  --str-chat__border-radius-circle: 999px;
+
+  /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
+  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, Helvetica Neue, sans-serif;
+
+  /* The font used for caption texts */
+  --str-chat__caption-text: 0.75rem/1rem var(--str-chat__font-family);
+
+  /* The font used for caption texts with emphasize */
+  --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
+
+  /* The font used for body texts */
+  --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
+
+  /* The font used for body texts with emphasize */
+  --str-chat__body-medium-text: 500 0.875rem/1rem var(--str-chat__font-family);
+
+  /* The font used for body texts */
+  --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
+
+  /* The font used for body texts with emphasize */
+  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
+
+  /* The font used for subtitle texts */
+  --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
+
+  /* The font used for subtitle texts with emphasize */
+  --str-chat__subtitle-medium-text: 500 1rem/1.25rem var(--str-chat__font-family);
+
+  /* The font used for subtitle texts */
+  --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family);
+
+  /* The font used for subtitle texts with emphasize */
+  --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family);
+
+  /* The font used for headline texts */
+  --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);
+
+  /* The font used for headline texts */
+  --str-chat__headline2-text: 1.8rem/1.8rem var(--str-chat__font-family);
+}
+
+.str-chat,
+.str-chat__theme-light {
+  /* Used for emphasis, brands can inject their main color using this variable */
+  --str-chat__primary-color: var(--str-chat__blue500);
+
+  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
+  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
+
+  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
+  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
+
+  /* Used to indicate that a UI element with primary color is in an active state */
+  --str-chat__active-primary-color: var(--str-chat__blue600);
+
+  /* If the primary color is used as a background, text/icons are displayed in this color */
+  --str-chat__on-primary-color: var(--str-chat__grey50);
+
+  /* Used as a background color for the main chat UI components */
+  --str-chat__background-color: var(--str-chat__grey50);
+
+  /* Used as a background color for the main chat UI components */
+  --str-chat__secondary-background-color: var(--str-chat__grey50);
+
+  /* Used as a background color to give emphasis, but less vibrant than the primary color */
+  --str-chat__primary-surface-color: var(--str-chat__blue100);
+
+  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
+  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
+
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-chat__surface-color: var(--str-chat__grey300);
+
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-chat__secondary-surface-color: var(--str-chat__grey200);
+
+  /* A neutral color used to give emphasis to different surfaces */
+  --str-chat__tertiary-surface-color: var(--str-chat__grey100);
+
+  /* The main color used for texts/icons */
+  --str-chat__text-color: var(--str-chat__grey950);
+
+  /* Used for texts/icons that need less emphasis */
+  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
+
+  /* Used for displaying disabled UI elements (typically buttons) */
+  --str-chat__disabled-color: var(--str-chat__grey400);
+
+  /* Used for text/icon colors if disabled color is used as a background color */
+  --str-chat__on-disabled-color: var(--str-chat__grey50);
+
+  /* Used for error messages, and destructive actions */
+  --str-chat__danger-color: var(--str-chat__red400);
+
+  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
+  --str-chat__message-highlight-color: var(--str-chat__yellow100);
+
+  /* Used for displaying the unread badge */
+  --str-chat__unread-badge-color: var(--str-chat__red400);
+
+  /* Used for text/icon colors if unread badge color is used as a background color */
+  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
+
+  /* The background color used for overlays */
+  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
+
+  /* The background color used for subtle overlays */
+  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
+
+  /* The text/icon color used on subtle overlays */
+  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
+
+  /* The background color used for opaque surfaces */
+  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
+
+  /* The text color used on opaque surfaces */
+  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
+
+  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
+  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
+}
+
+.str-chat__theme-dark {
+  --str-chat__primary-color: var(--str-chat__blue400);
+  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
+  --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
+  --str-chat__active-primary-color: var(--str-chat__blue600);
+  --str-chat__on-primary-color: var(--str-chat__grey50);
+  --str-chat__background-color: var(--str-chat__grey950);
+  --str-chat__secondary-background-color: var(--str-chat__grey900);
+  --str-chat__primary-surface-color: var(--str-chat__blue900);
+  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
+  --str-chat__surface-color: var(--str-chat__grey700);
+  --str-chat__secondary-surface-color: var(--str-chat__grey800);
+  --str-chat__tertiary-surface-color: var(--str-chat__grey900);
+  --str-chat__text-color: var(--str-chat__grey50);
+  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
+  --str-chat__disabled-color: var(--str-chat__grey600);
+  --str-chat__on-disabled-color: var(--str-chat__grey50);
+  --str-chat__danger-color: var(--str-chat__red600);
+  --str-chat__message-highlight-color: var(--str-chat__yellow900);
+  --str-chat__unread-badge-color: var(--str-chat__red400);
+  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
+  --str-chat__overlay-color: rgba(0, 0, 0, 0.7);
+  --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
+  --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
+  --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
+  --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
+  --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
+}

package/dist/scss/v2/_palette-variables.scss

@@ -0,0 +1,55 @@
+.str-chat {
+  --str-chat__blue950: #001333;
+  --str-chat__blue900: #00163d;
+  --str-chat__blue800: #002666;
+  --str-chat__blue700: #003999;
+  --str-chat__blue600: #004ccc;
+  --str-chat__blue500: #005fff;
+  --str-chat__blue400: #337eff;
+  --str-chat__blue300: #669fff;
+  --str-chat__blue200: #ccdfff;
+  --str-chat__blue100: #e0f0ff;
+  --str-chat__blue50: #ebf5ff;
+
+  --str-chat__grey950: #080707;
+  --str-chat__grey900: #17191c;
+  --str-chat__grey800: #1c1e22;
+  --str-chat__grey700: #272a30;
+  --str-chat__grey600: #4c525c;
+  --str-chat__grey500: #72767e;
+  --str-chat__grey400: #b4b7bb;
+  --str-chat__grey300: #dbdde1;
+  --str-chat__grey200: #e9eaed;
+  --str-chat__grey100: #f4f4f5;
+  --str-chat__grey50: #ffffff;
+
+  --str-chat__red900: #330003;
+  --str-chat__red800: #660006;
+  --str-chat__red700: #990008;
+  --str-chat__red600: #cc000b;
+  --str-chat__red500: #ff000e;
+  --str-chat__red400: #ff3742;
+  --str-chat__red300: #ff666e;
+  --str-chat__red200: #ff999f;
+  --str-chat__red100: #ffe5e7;
+
+  --str-chat__green900: #062d16;
+  --str-chat__green800: #0d592c;
+  --str-chat__green700: #138643;
+  --str-chat__green600: #19b359;
+  --str-chat__green500: #20e070;
+  --str-chat__green400: #4ce68c;
+  --str-chat__green300: #79eca9;
+  --str-chat__green200: #a6f2c6;
+  --str-chat__green100: #e9f1ff;
+
+  --str-chat__yellow900: #332500;
+  --str-chat__yellow800: #664900;
+  --str-chat__yellow700: #996e00;
+  --str-chat__yellow600: #cc9200;
+  --str-chat__yellow500: #ffb700;
+  --str-chat__yellow400: #ffd466;
+  --str-chat__yellow300: #ffe299;
+  --str-chat__yellow200: #fff1cc;
+  --str-chat__yellow100: #fff8e5;
+}

package/dist/scss/v2/_utils.scss

@@ -0,0 +1,188 @@
+@mixin flex-row-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-top-right {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+@mixin flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin ellipsis-text-parent {
+  overflow-y: visible;
+  // Not every browser support clip overflow, so hidden is defined as a fallback
+  overflow-x: hidden;
+  overflow-x: clip;
+  min-width: 0;
+}
+
+@mixin ellipsis-text {
+  white-space: nowrap;
+  overflow-y: visible;
+  // Not every browser support clip overflow, so hidden is defined as a fallback
+  overflow-x: hidden;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+}
+
+@mixin scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+@mixin unset-button($outline-radius: var(--str-chat__border-radius-circle)) {
+  padding: unset;
+  background: unset;
+  border: unset;
+  border-radius: $outline-radius;
+}
+
+@mixin component-layer-overrides($component-name, $important: '') {
+  background: var(--str-chat__#{$component-name}-background-color) #{$important};
+  color: var(--str-chat__#{$component-name}-color) #{$important};
+  box-shadow: var(--str-chat__#{$component-name}-box-shadow) #{$important};
+  border-radius: var(--str-chat__#{$component-name}-border-radius) #{$important};
+  border-block-start: var(--str-chat__#{$component-name}-border-block-start) #{$important};
+  border-block-end: var(--str-chat__#{$component-name}-border-block-end) #{$important};
+  border-inline-start: var(--str-chat__#{$component-name}-border-inline-start) #{$important};
+  border-inline-end: var(--str-chat__#{$component-name}-border-inline-end) #{$important};
+}
+
+@mixin button-reset {
+  outline: none;
+  background: none;
+  border: none;
+}
+
+@mixin cta-button-overrides($component-name) {
+  &:active {
+    background-color: var(--str-chat__#{$component-name}-pressed-background-color);
+  }
+
+  &:disabled {
+    background-color: var(--str-chat__#{$component-name}-disabled-background-color);
+    color: var(--str-chat__#{$component-name}-disabled-color);
+  }
+}
+
+@mixin circle-fab-overrides($component-name) {
+  svg path {
+    fill: var(--str-chat__#{$component-name}-color);
+  }
+
+  &:active {
+    background-color: var(--str-chat__#{$component-name}-pressed-background-color);
+  }
+}
+
+@mixin header-layout {
+  display: flex;
+  padding: var(--str-chat__spacing-2);
+  column-gap: var(--str-chat__spacing-4);
+  align-items: center;
+}
+
+@mixin header-text-layout {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden; // for Edge
+  overflow-x: hidden; // for ellipsis text
+  flex: 1;
+  row-gap: var(--str-chat__spacing-1_5);
+}
+
+@mixin empty-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--str-chat__spacing-4);
+
+  svg {
+    width: calc(var(--str-chat__spacing-px) * 136);
+    height: calc(var(--str-chat__spacing-px) * 136);
+  }
+}
+
+@mixin empty-theme($component-name) {
+  font: var(--str-chat__headline-text);
+  text-align: center;
+
+  svg path {
+    fill: var(--str-chat__#{$component-name}-empty-indicator-color);
+  }
+}
+
+@mixin message-list-spacing {
+  $spacing: var(--str-chat__spacing-2);
+  padding: 0 $spacing;
+
+  // Need this trick to be able to apply full-width background color on hover to messages / full-width separator to thread header
+  .str-chat__li {
+    margin-inline: calc(-1 * #{$spacing});
+    padding-inline: $spacing;
+  }
+
+  .str-chat__parent-message-li {
+    margin-inline: calc(-1 * #{$spacing});
+  }
+
+  @media only screen and (min-device-width: 768px) {
+    $spacing: min(var(--str-chat__spacing-10), 4%);
+
+    padding: 0 $spacing;
+
+    .str-chat__li {
+      margin-inline: calc(-1 * #{$spacing});
+      padding-inline: $spacing;
+    }
+
+    .str-chat__parent-message-li {
+      margin-inline: calc(-1 * #{$spacing} - 2px);
+    }
+  }
+}
+
+@mixin loading-item-background($component-name) {
+  background-image: linear-gradient(
+    -90deg,
+    var(--str-chat__#{$component-name}-loading-state-color) 0%,
+    var(--str-chat__#{$component-name}-loading-state-color) 100%
+  );
+}
+
+@mixin loading-animation {
+  animation: pulsate 1s linear 0s infinite alternate;
+
+  &:nth-of-type(2) {
+    animation: pulsate 1s linear 0.3334s infinite alternate;
+  }
+
+  &:last-of-type {
+    animation: pulsate 1s linear 0.6667s infinite alternate;
+  }
+
+  @keyframes pulsate {
+    from {
+      opacity: 0.5;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin channel-preview-display-name-theme {
+  font: var(--str-chat__subtitle-medium-text);
+}

package/dist/scss/v2/common/CTAButton/CTAButton-layout.scss

@@ -0,0 +1,4 @@
+.str-chat__cta-button {
+  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
+  cursor: pointer;
+}

package/dist/scss/v2/common/CTAButton/CTAButton-theme.scss

@@ -0,0 +1,42 @@
+@use '../../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__cta-button-border-radius: var(--str-chat__border-radius-xs);
+
+  /* The text/icon color of the component */
+  --str-chat__cta-button-color: var(--str-chat__on-primary-color);
+
+  /* The background color of the component */
+  --str-chat__cta-button-background-color: var(--str-chat__primary-color);
+
+  /* Top border of the component */
+  --str-chat__cta-button-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__cta-button-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__cta-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__cta-button-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__cta-button-box-shadow: none;
+
+  /* The background color of the component in pressed state */
+  --str-chat__cta-button-pressed-background-color: var(--str-chat__active-primary-color);
+
+  /* The background color of the component in disabled state */
+  --str-chat__cta-button-disabled-background-color: var(--str-chat__disabled-color);
+
+  /* The text/icon color of the component in disabled state */
+  --str-chat__cta-button-disabled-color: var(--str-chat__on-disabled-color);
+}
+
+.str-chat__cta-button {
+  @include utils.component-layer-overrides('cta-button');
+  @include utils.cta-button-overrides('cta-button');
+  font: var(--str-chat__subtitle-text);
+}

package/dist/scss/v2/common/CircleFAButton/CircleFAButton-layout.scss

@@ -0,0 +1,14 @@
+.str-chat__circle-fab {
+  width: calc(var(--str-chat__spacing-px) * 42);
+  height: calc(var(--str-chat__spacing-px) * 42);
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .str-chat__circle-fab-icon {
+    display: inline-block;
+    height: calc(var(--str-chat__spacing-px) * 24);
+  }
+}

package/dist/scss/v2/common/CircleFAButton/CircleFAButton-theme.scss

@@ -0,0 +1,35 @@
+@use '../../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__circle-fab-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the component */
+  --str-chat__circle-fab-color: var(--str-chat__primary-color);
+
+  /* The background color of the component */
+  --str-chat__circle-fab-background-color: var(--str-chat__secondary-background-color);
+
+  /* The background color of the component in pressed state */
+  --str-chat__circle-fab-pressed-background-color: var(--str-chat__surface-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__circle-fab-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+
+  /* Top border of the component */
+  --str-chat__circle-fab-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__circle-fab-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__circle-fab-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__circle-fab-border-inline-end: none;
+}
+
+.str-chat__circle-fab {
+  @include utils.component-layer-overrides('circle-fab');
+  @include utils.circle-fab-overrides('circle-fab');
+}

package/dist/scss/v2/index.layout.scss

@@ -0,0 +1,31 @@
+@use 'base';
+@use 'global-layout-variables';
+
+@use 'Avatar/Avatar-layout';
+@use 'AttachmentList/AttachmentList-layout';
+@use 'AttachmentPreviewList/AttachmentPreviewList-layout';
+@use 'Autocomplete/Autocomplete-layout';
+@use 'Channel/Channel-layout';
+@use 'ChannelHeader/ChannelHeader-layout';
+@use 'ChannelList/ChannelList-layout';
+@use 'ChannelPreview/ChannelPreview-layout';
+@use 'ChannelSearch/ChannelSearch-layout';
+@use 'common/CTAButton/CTAButton-layout';
+@use 'common/CircleFAButton/CircleFAButton-layout';
+@use 'EditMessageForm/EditMessageForm-layout';
+@use 'ImageCarousel/ImageCarousel-layout';
+@use 'LoadingIndicator/LoadingIndicator-layout';
+@use 'Message/Message-layout';
+@use 'MessageActionsBox/MessageActionsBox-layout';
+@use 'MessageInput/MessageInput-layout';
+@use 'MessageList/MessageList-layout';
+@use 'MessageList/VirtualizedMessageList-layout';
+@use 'MessageReactions/MessageReactions-layout';
+@use 'MessageReactions/MessageReactionsSelector-layout';
+@use 'Modal/Modal-layout';
+@use 'Notification/MessageNotification-layout';
+@use 'Notification/NotificationList-layout';
+@use 'Notification/Notification-layout';
+@use 'Thread/Thread-layout';
+@use 'Tooltip/Tooltip-layout';
+@use 'TypingIndicator/TypingIndicator-layout';

package/dist/scss/v2/index.scss

@@ -0,0 +1,36 @@
+@use 'index.layout.scss';
+@use 'palette-variables';
+@use 'global-theme-variables';
+
+@use 'vendor/emoji-mart.scss';
+
+@use 'common/CTAButton/CTAButton-theme';
+@use 'common/CircleFAButton/CircleFAButton-theme';
+@use 'Avatar/Avatar-theme';
+@use 'AttachmentList/AttachmentList-theme';
+@use 'AttachmentPreviewList/AttachmentPreviewList-theme';
+@use 'Autocomplete/Autocomplete-theme';
+@use 'Channel/Channel-theme.scss';
+@use 'ChannelHeader/ChannelHeader-theme';
+@use 'ChannelList/ChannelList-theme';
+@use 'ChannelPreview/ChannelPreview-theme';
+@use 'ChannelSearch/ChannelSearch-theme';
+@use 'EditMessageForm/EditMessageForm-theme';
+@use 'ImageCarousel/ImageCarousel-theme';
+@use 'LoadingIndicator/LoadingIndicator-theme';
+@use 'Message/Message-theme';
+@use 'MessageActionsBox/MessageActionsBox-theme';
+@use 'MessageInput/MessageInput-theme';
+@use 'MessageList/MessageList-theme';
+@use 'MessageList/VirtualizedMessageList-theme';
+@use 'MessageReactions/MessageReactions-theme';
+@use 'MessageReactions/MessageReactionsSelector-theme';
+@use 'Modal/Modal-theme';
+@use 'Notification/MessageNotification-theme';
+@use 'Notification/NotificationList-theme';
+@use 'Notification/Notification-theme';
+@use 'Thread/Thread-theme';
+@use 'Tooltip/Tooltip-theme';
+@use 'TypingIndicator/TypingIndicator-theme';
+
+@use '../../vendor/react-image-gallery';