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

package/dist/components/ChannelSearch/icons.d.ts

@@ -0,0 +1,6 @@
+import type { IconProps } from '../../types/types';
+export declare const MenuIcon: () => JSX.Element;
+export declare const ReturnIcon: () => JSX.Element;
+export declare const XIcon: () => JSX.Element;
+export declare const SearchIcon: ({ className }: IconProps) => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ChannelSearch/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelSearch/icons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,QAAQ,mBAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBActB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAOjB,CAAC;AAEF,eAAO,MAAM,UAAU,kBAAmB,SAAS,gBAclD,CAAC"}

package/dist/components/ChannelSearch/icons.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export var MenuIcon = function () { return (React.createElement("svg", { "data-testid": 'menu-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { clipRule: 'evenodd', d: 'M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z', fill: 'black', fillRule: 'evenodd' }))); };
+export var ReturnIcon = function () { return (React.createElement("svg", { "data-testid": 'return-icon', fill: 'none', height: '20', viewBox: '0 0 22 22', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M21.6668 9.66666V12.3333H5.6529L12.9932 19.6736L11.1076 21.5592L0.54834 11L11.1076 0.440765L12.9932 2.32638L5.6529 9.66666H21.6668Z', fill: '#080707' }))); };
+export var XIcon = function () { return (React.createElement("svg", { fill: 'none', height: '14', viewBox: '0 0 14 14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z', fill: '#747881' }))); };
+export var SearchIcon = function (_a) {
+    var className = _a.className;
+    return (React.createElement("svg", { className: className, fill: 'none', height: '18', viewBox: '0 0 18 18', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z', fill: '#747881' })));
+};

package/dist/components/Chat/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,YAAY,EAAkC,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAAgB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAuB,MAAM,kCAAkC,CAAC;AAE9F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvC,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,WAAW,GACX,YAAY,GACZ,CAAC,CAAC;AAEN,oBAAY,SAAS,CACnB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,mCAAmC;IACnC,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvC,8FAA8F;IAC9F,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oGAAoG;IACpG,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iPAAiP;IACjP,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,yKAyDhB,CAAC"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,EAAE,YAAY,EAAkC,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EAAgB,aAAa,EAAgB,MAAM,2BAA2B,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAuB,MAAM,kCAAkC,CAAC;AAE9F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IACvC,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,WAAW,GACX,YAAY,GACZ,CAAC,CAAC;AAEN,oBAAY,SAAS,CACnB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,mCAAmC;IACnC,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvC,8FAA8F;IAC9F,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oGAAoG;IACpG,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iPAAiP;IACjP,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI,yKA6DhB,CAAC"}

package/dist/components/Chat/Chat.js

@@ -13,6 +13,9 @@ export var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
     var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     var channelsQueryState = useChannelsQueryState();
+    var themeVersion = (getComputedStyle(document.documentElement)
+        .getPropertyValue('--str-chat__theme-version')
+        .replace(' ', '') || '1');
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
@@ -27,6 +30,7 @@ export var Chat = function (props) {
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
         theme: theme,
+        themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
     });
     if (!translators.t)

package/dist/components/Chat/hooks/useChat.d.ts

@@ -20,7 +20,7 @@ export declare const useChat: <StreamChatGenerics extends DefaultStreamChatGener
     setActiveChannel: (activeChannel?: Channel<StreamChatGenerics> | undefined, watchers?: {
         limit?: number;
         offset?: number;
-    }, event?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+    }, event?: React.BaseSyntheticEvent) => Promise<void>;
     translators: TranslationContextValue;
 };
 //# sourceMappingURL=useChat.d.ts.map

package/dist/components/Chat/hooks/useChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChat.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useChat.ts"],"names":[],"mappings":";AAEA,OAAO,EAGL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,EAAS,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE5F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,aAAa,CACvB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;2FAgFJ;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE;;CA8BlD,CAAC"}
+{"version":3,"file":"useChat.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useChat.ts"],"names":[],"mappings":";AAEA,OAAO,EAGL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,EAAS,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE5F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,oBAAY,aAAa,CACvB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;2FAgFJ;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,UACrC,MAAM,kBAAkB;;CA6BrC,CAAC"}

package/dist/components/Chat/hooks/useChat.js

@@ -77,7 +77,7 @@ export var useChat = function (_a) {
             var userAgent = client.getUserAgent();
             if (!userAgent.includes('stream-chat-react')) {
                 // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-                client.setUserAgent("stream-chat-react-" + version + "-" + userAgent);
+                client.setUserAgent("stream-chat-react-".concat(version, "-").concat(userAgent));
             }
         }
     }, [client]);

package/dist/components/Chat/hooks/useCreateChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateChatContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useCreateChatContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,oBAAoB,yKA0DhC,CAAC"}
+{"version":3,"file":"useCreateChatContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useCreateChatContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,oBAAoB,yKA4DhC,CAAC"}

package/dist/components/Chat/hooks/useCreateChatContext.js

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 export var useCreateChatContext = function (value) {
     var _a;
-    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
     var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
     var channelsQueryError = channelsQueryState.error;
     var channelsQueryInProgress = channelsQueryState.queryInProgress;
-    var clientValues = "" + client.clientID + Object.keys(client.activeChannels).length + Object.keys(client.listeners).length + client.mutedChannels.length + "\n  " + ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
+    var clientValues = "".concat(client.clientID).concat(Object.keys(client.activeChannels).length).concat(Object.keys(client.listeners).length).concat(client.mutedChannels.length, "\n  ").concat((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
     var mutedUsersLength = mutes.length;
     var chatContext = useMemo(function () { return ({
         channel: channel,
@@ -20,6 +20,7 @@ export var useCreateChatContext = function (value) {
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
         theme: theme,
+        themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
     }); }, [
         channelCid,

package/dist/components/Chat/hooks/useCustomStyles.d.ts

@@ -1,5 +1,5 @@
 export declare type CSSVariables = '--main-font' | '--second-font' | '--xs-font' | '--sm-font' | '--md-font' | '--lg-font' | '--xl-font' | '--xxl-font' | '--xxxl-font' | '--font-weight-regular' | '--font-weight-semi-bold' | '--font-weight-bold' | '--primary-color' | '--primary-color-faded' | '--magenta' | '--red' | '--faded-red' | '--dt-bg-team' | '--border-color' | '--lighten-black' | '--lighten-grey' | '--light-grey' | '--grey' | '--dark-grey' | '--green' | '--faded-green' | '--white' | '--white5' | '--white10' | '--white20' | '--white30' | '--white40' | '--white50' | '--white60' | '--white70' | '--white80' | '--white90' | '--white95' | '--black' | '--black5' | '--black10' | '--black20' | '--black30' | '--black40' | '--black50' | '--black60' | '--black70' | '--black80' | '--black90' | '--black95' | '--border-radius' | '--border-radius-sm' | '--border-radius-md' | '--border-radius-round' | '--spacing-unit' | '--xxs-p' | '--xs-p' | '--sm-p' | '--md-p' | '--lg-p' | '--xl-p' | '--xxl-p' | '--xxs-m' | '--xs-m' | '--sm-m' | '--md-m' | '--lg-m' | '--xl-m' | '--xxl-m' | '--assetsPath' | '--accent_blue' | '--accent_green' | '--accent_red' | '--bg-gradient-end' | '--bg-gradient-start' | '--black' | '--blue-alice' | '--border' | '--button-background' | '--button-text' | '--grey' | '--grey-gainsboro' | '--grey-whisper' | '--highlight' | '--modal-shadow' | '--overlay' | '--overlay-dark' | '--shadow-icon' | '--targetedMessageBackground' | '--transparent' | '--white' | '--white-smoke' | '--white-snow';
 export declare const darkModeTheme: CustomStyles;
 export declare type CustomStyles = Partial<Record<CSSVariables, string>>;
-export declare const useCustomStyles: (customStyles?: Partial<Record<CSSVariables, string>> | undefined) => void;
+export declare const useCustomStyles: (customStyles?: CustomStyles) => void;
 //# sourceMappingURL=useCustomStyles.d.ts.map

package/dist/components/Chat/hooks/useCustomStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCustomStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useCustomStyles.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY,GACpB,aAAa,GACb,eAAe,GACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,aAAa,GACb,uBAAuB,GACvB,yBAAyB,GACzB,oBAAoB,GACpB,iBAAiB,GACjB,uBAAuB,GACvB,WAAW,GACX,OAAO,GACP,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,QAAQ,GACR,aAAa,GACb,SAAS,GACT,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,oBAAoB,GACpB,oBAAoB,GACpB,uBAAuB,GACvB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,mBAAmB,GACnB,qBAAqB,GACrB,SAAS,GACT,cAAc,GACd,UAAU,GACV,qBAAqB,GACrB,eAAe,GACf,QAAQ,GACR,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,gBAAgB,GAChB,WAAW,GACX,gBAAgB,GAChB,eAAe,GACf,6BAA6B,GAC7B,eAAe,GACf,SAAS,GACT,eAAe,GACf,cAAc,CAAC;AAEnB,eAAO,MAAM,aAAa,EAAE,YAoB3B,CAAC;AAEF,oBAAY,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE,eAAO,MAAM,eAAe,4EAM3B,CAAC"}
+{"version":3,"file":"useCustomStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/hooks/useCustomStyles.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY,GACpB,aAAa,GACb,eAAe,GACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,aAAa,GACb,uBAAuB,GACvB,yBAAyB,GACzB,oBAAoB,GACpB,iBAAiB,GACjB,uBAAuB,GACvB,WAAW,GACX,OAAO,GACP,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,QAAQ,GACR,aAAa,GACb,SAAS,GACT,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,oBAAoB,GACpB,oBAAoB,GACpB,uBAAuB,GACvB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,mBAAmB,GACnB,qBAAqB,GACrB,SAAS,GACT,cAAc,GACd,UAAU,GACV,qBAAqB,GACrB,eAAe,GACf,QAAQ,GACR,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,gBAAgB,GAChB,WAAW,GACX,gBAAgB,GAChB,eAAe,GACf,6BAA6B,GAC7B,eAAe,GACf,SAAS,GACT,eAAe,GACf,cAAc,CAAC;AAEnB,eAAO,MAAM,aAAa,EAAE,YAoB3B,CAAC;AAEF,oBAAY,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE,eAAO,MAAM,eAAe,kBAAmB,YAAY,SAM1D,CAAC"}

package/dist/components/ChatAutoComplete/ChatAutoComplete.js

@@ -30,6 +30,6 @@ var UnMemoizedChatAutoComplete = function (props) {
             innerRef.current = ref;
         }
     }, [innerRef]);
-    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+    return (React.createElement(AutoCompleteTextarea, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea str-chat__message-textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea str-chat__message-textarea-react-host', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
 };
 export var ChatAutoComplete = React.memo(UnMemoizedChatAutoComplete);

package/dist/components/DateSeparator/DateSeparator.js

@@ -12,7 +12,7 @@ var UnMemoizedDateSeparator = function (props) {
     });
     return (React.createElement("div", { className: 'str-chat__date-separator' },
         (position === 'right' || position === 'center') && (React.createElement("hr", { className: 'str-chat__date-separator-line' })),
-        React.createElement("div", { className: 'str-chat__date-separator-date' }, unread ? t('New') + " - " + formattedDate : formattedDate),
+        React.createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
         (position === 'left' || position === 'center') && (React.createElement("hr", { className: 'str-chat__date-separator-line' }))));
 };
 /**

package/dist/components/EmoticonItem/EmoticonItem.js

@@ -8,7 +8,7 @@ var UnMemoizedEmoticonItem = function (props) {
             return null;
         return (hasEntity &&
             itemParts.parts.map(function (part, i) {
-                return part.toLowerCase() === itemParts.match.toLowerCase() ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: "part-" + i }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: "part-" + i }, part));
+                return part.toLowerCase() === itemParts.match.toLowerCase() ? (React.createElement("span", { className: 'str-chat__emoji-item--highlight', key: "part-".concat(i) }, part)) : (React.createElement("span", { className: 'str-chat__emoji-item--part', key: "part-".concat(i) }, part));
             }));
     };
     return (React.createElement("div", { className: 'str-chat__emoji-item' },

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.d.ts

@@ -1,6 +1,6 @@
 export declare type EmptyStateIndicatorProps = {
     /** List Type: channel | message */
-    listType: 'channel' | 'message';
+    listType?: 'channel' | 'message' | 'thread';
 };
 export declare const EmptyStateIndicator: (props: EmptyStateIndicatorProps) => JSX.Element | null;
 //# sourceMappingURL=EmptyStateIndicator.d.ts.map

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyStateIndicator/EmptyStateIndicator.tsx"],"names":[],"mappings":"AAIA,oBAAY,wBAAwB,GAAG;IACrC,mCAAmC;IACnC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,CAAC;AAeF,eAAO,MAAM,mBAAmB,UAbc,wBAAwB,uBAe7B,CAAC"}
+{"version":3,"file":"EmptyStateIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyStateIndicator/EmptyStateIndicator.tsx"],"names":[],"mappings":"AAKA,oBAAY,wBAAwB,GAAG;IACrC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CAC7C,CAAC;AAuCF,eAAO,MAAM,mBAAmB,UArCc,wBAAwB,uBAuC7B,CAAC"}

package/dist/components/EmptyStateIndicator/EmptyStateIndicator.js

@@ -1,12 +1,25 @@
 import React from 'react';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { ChatBubble } from './icons';
 var UnMemoizedEmptyStateIndicator = function (props) {
     var listType = props.listType;
     var t = useTranslationContext('EmptyStateIndicator').t;
-    if (listType === 'channel')
-        return React.createElement("p", { role: 'listitem' }, t('You have no channels currently'));
-    if (listType === 'message')
+    if (listType === 'thread')
         return null;
+    if (listType === 'channel') {
+        var text = t('You have no channels currently');
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'str-chat__channel-list-empty' },
+                React.createElement(ChatBubble, null),
+                React.createElement("p", { role: 'listitem' }, text)),
+            React.createElement("p", { className: 'str-chat__channel-list-empty-v1', role: 'listitem' }, text)));
+    }
+    if (listType === 'message') {
+        var text = t('No chats here yet…');
+        return (React.createElement("div", { className: 'str-chat__empty-channel' },
+            React.createElement(ChatBubble, null),
+            React.createElement("p", { className: 'str-chat__empty-channel-text', role: 'listitem' }, text)));
+    }
     return React.createElement("p", null, "No items exist");
 };
 export var EmptyStateIndicator = React.memo(UnMemoizedEmptyStateIndicator);

package/dist/components/EmptyStateIndicator/icons.d.ts

@@ -0,0 +1,2 @@
+export declare const ChatBubble: () => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/EmptyStateIndicator/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyStateIndicator/icons.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,mBActB,CAAC"}

package/dist/components/EmptyStateIndicator/icons.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var ChatBubble = function () { return (React.createElement("svg", { "data-testid": 'chat-bubble', fill: 'none', height: '96', viewBox: '0 0 136 136', width: '96', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z', fill: '#B4B7BB' }))); };

package/dist/components/EventComponent/EventComponent.js

@@ -36,7 +36,7 @@ var UnMemoizedEventComponent = function (props) {
                 getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
     if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
         var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
-        var sentence = name_1 + " " + (event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
+        var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
         return (React.createElement("div", { className: 'str-chat__event-component__channel-event' },
             React.createElement(Avatar, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
             React.createElement("div", { className: 'str-chat__event-component__channel-event__content' },

package/dist/components/Gallery/Gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EACF;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,EAAE,GACH,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACtC,CAAC;AAiFF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EACF;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,EAAE,GACH,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACtC,CAAC;AAsEF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}

package/dist/components/Gallery/Gallery.js

@@ -1,10 +1,14 @@
-import React, { useMemo, useState } from 'react';
-import { ModalComponent as ModalWrapper } from './ModalWrapper';
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { Modal } from '../Modal';
+import { ModalGallery as DefaultModalGallery } from './ModalGallery';
+import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 var UnMemoizedGallery = function (props) {
     var images = props.images;
     var _a = useState(0), index = _a[0], setIndex = _a[1];
     var _b = useState(false), modalOpen = _b[0], setModalOpen = _b[1];
+    var _c = useComponentContext('Gallery').ModalGallery, ModalGallery = _c === void 0 ? DefaultModalGallery : _c;
     var t = useTranslationContext('Gallery').t;
     var countImagesDisplayedInPreview = 4;
     var lastImageIndexInPreview = countImagesDisplayedInPreview - 1;
@@ -17,25 +21,23 @@ var UnMemoizedGallery = function (props) {
             setModalOpen(true);
         }
     };
-    var formattedArray = useMemo(function () {
-        return images.map(function (image) { return ({
-            original: image.image_url || image.thumb_url || '',
-            originalAlt: 'User uploaded content',
-            source: image.image_url || image.thumb_url || '',
-        }); });
-    }, [images]);
     var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
-        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); }, style: {
-                backgroundImage: "url(" + images[lastImageIndexInPreview].image_url + ")",
+        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); }, style: {
+                backgroundImage: "url(".concat(images[lastImageIndexInPreview].image_url, ")"),
             } },
             React.createElement("p", null, t('{{ imageCount }} more', {
                 imageCount: images.length - countImagesDisplayedInPreview,
-            })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-" + i, onClick: function () { return toggleModal(i); } },
+            })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
             React.createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
     });
-    return (React.createElement("div", { className: "str-chat__gallery " + (images.length > lastImageIndexInPreview ? 'str-chat__gallery--square' : '') },
+    var className = clsx('str-chat__gallery', {
+        'str-chat__gallery--square': images.length > lastImageIndexInPreview,
+        'str-chat__gallery-two-rows': images.length > 2,
+    });
+    return (React.createElement("div", { className: className },
         renderImages,
-        React.createElement(ModalWrapper, { images: formattedArray, index: index, modalIsOpen: modalOpen, toggleModal: function () { return setModalOpen(!modalOpen); } })));
+        React.createElement(Modal, { onClose: function () { return setModalOpen(function (modalOpen) { return !modalOpen; }); }, open: modalOpen },
+            React.createElement(ModalGallery, { images: images, index: index }))));
 };
 /**
  * Displays images in a simple responsive grid with a light box to view the images.

package/dist/components/Gallery/Image.d.ts

@@ -1,13 +1,17 @@
-export declare type ImageProps = {
+import type { Attachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics, Dimensions } from '../../types/types';
+export declare type ImageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    dimensions?: Dimensions;
+} & ({
     /** The text fallback for the image */
     fallback?: string;
     /** The full size image url */
     image_url?: string;
     /** The thumb url */
     thumb_url?: string;
-};
+} | Attachment<StreamChatGenerics>);
 /**
  * A simple component that displays an image.
  */
-export declare const ImageComponent: (props: ImageProps) => JSX.Element;
+export declare const ImageComponent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ImageProps<StreamChatGenerics>) => JSX.Element;
 //# sourceMappingURL=Image.d.ts.map

package/dist/components/Gallery/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Image.tsx"],"names":[],"mappings":"AAKA,oBAAY,UAAU,GAAG;IACvB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,UAAW,UAAU,gBA+B/C,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/E,oBAAY,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IAAE,UAAU,CAAC,EAAE,UAAU,CAAA;CAAE,GAAG,CAC9B;IACE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD,UAAU,CAAC,kBAAkB,CAAC,CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,0IA8B1B,CAAC"}

package/dist/components/Gallery/Image.js

@@ -1,18 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import { ModalComponent as ModalWrapper } from './ModalWrapper';
+import { Modal } from '../Modal';
+import { ModalGallery as DefaultModalGallery } from './ModalGallery';
+import { useComponentContext } from '../../context';
 /**
  * A simple component that displays an image.
  */
 export var ImageComponent = function (props) {
-    var _a = useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
-    var fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url;
+    var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url;
+    var _b = useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
+    var _c = useComponentContext('ImageComponent').ModalGallery, ModalGallery = _c === void 0 ? DefaultModalGallery : _c;
     var imageSrc = sanitizeUrl(image_url || thumb_url);
-    var formattedArray = [
-        { original: imageSrc, originalAlt: 'User uploaded content', source: imageSrc },
-    ];
-    var toggleModal = function () { return setModalIsOpen(!modalIsOpen); };
+    var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, onKeyPress: toggleModal, src: imageSrc, tabIndex: 0 }),
-        React.createElement(ModalWrapper, { images: formattedArray, index: 0, modalIsOpen: modalIsOpen, toggleModal: toggleModal })));
+        React.createElement("img", __assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, tabIndex: 0 }, dimensions)),
+        React.createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
+            React.createElement(ModalGallery, { images: [props], index: 0 }))));
 };

package/dist/components/Gallery/ModalGallery.d.ts

@@ -0,0 +1,10 @@
+import type { Attachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare type ModalGalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    /** The images for the Carousel component */
+    images: Attachment<StreamChatGenerics>[];
+    /** The index for the component */
+    index?: number;
+};
+export declare const ModalGallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ModalGalleryProps<StreamChatGenerics>) => JSX.Element;
+//# sourceMappingURL=ModalGallery.d.ts.map

package/dist/components/Gallery/ModalGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalGallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/ModalGallery.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,4CAA4C;IAC5C,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACzC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,iJA6BxB,CAAC"}

package/dist/components/Gallery/ModalGallery.js

@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react';
+import ImageGallery from 'react-image-gallery';
+export var ModalGallery = function (props) {
+    var images = props.images, index = props.index;
+    var formattedArray = useMemo(function () {
+        return images.map(function (image) {
+            var imageSrc = image.image_url || image.thumb_url || '';
+            return {
+                original: imageSrc,
+                originalAlt: 'User uploaded content',
+                source: imageSrc,
+            };
+        });
+    }, [images]);
+    return (React.createElement(ImageGallery, { items: formattedArray, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
+};

package/dist/components/Gallery/index.d.ts

@@ -1,4 +1,4 @@
 export * from './Gallery';
 export * from './Image';
-export * from './ModalWrapper';
+export * from './ModalGallery';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Gallery/index.js

@@ -1,3 +1,3 @@
 export * from './Gallery';
 export * from './Image';
-export * from './ModalWrapper';
+export * from './ModalGallery';

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts

@@ -4,6 +4,8 @@ export declare type InfiniteScrollProps = {
     element?: React.ElementType;
     hasMore?: boolean;
     hasMoreNewer?: boolean;
+    /** Element to be rendered at the top of the thread message list. By default Message and ThreadStart components */
+    head?: React.ReactNode;
     initialLoad?: boolean;
     isLoading?: boolean;
     listenToScroll?: (offset: number, reverseOffset: number, threshold: number) => void;

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScrollPaginator/InfiniteScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAYjF,oBAAY,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,kBAAkB,mBAAmB,CAAC,uEAkF3E,CAAC"}
+{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["../../../src/components/InfiniteScrollPaginator/InfiniteScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAYjF,oBAAY,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kHAAkH;IAClH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,kBAAkB,mBAAmB,CAAC,uEAuF3E,CAAC"}

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -31,7 +31,7 @@ var mousewheelListener = function (event) {
     }
 };
 export var InfiniteScroll = function (props) {
-    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, _b = props.hasMore, hasMore = _b === void 0 ? false : _b, _c = props.hasMoreNewer, hasMoreNewer = _c === void 0 ? false : _c, _d = props.initialLoad, initialLoad = _d === void 0 ? true : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, _f = props.threshold, threshold = _f === void 0 ? 250 : _f, _g = props.useCapture, useCapture = _g === void 0 ? false : _g, elementProps = __rest(props, ["children", "element", "hasMore", "hasMoreNewer", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "threshold", "useCapture"]);
+    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, _b = props.hasMore, hasMore = _b === void 0 ? false : _b, _c = props.hasMoreNewer, hasMoreNewer = _c === void 0 ? false : _c, head = props.head, _d = props.initialLoad, initialLoad = _d === void 0 ? true : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, _f = props.threshold, threshold = _f === void 0 ? 250 : _f, _g = props.useCapture, useCapture = _g === void 0 ? false : _g, elementProps = __rest(props, ["children", "element", "hasMore", "hasMoreNewer", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "threshold", "useCapture"]);
     var scrollComponent = useRef();
     var scrollListener = useCallback(function () {
         var element = scrollComponent.current;
@@ -81,5 +81,8 @@ export var InfiniteScroll = function (props) {
             scrollComponent.current = element;
         } });
     var childrenArray = [loader, children];
+    if (head) {
+        childrenArray.unshift(head);
+    }
     return React.createElement(element, attributes, childrenArray);
 };

package/dist/components/LoadMore/LoadMoreButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { LoadingIndicator } from 'react-file-utils';
+import { LoadingIndicator } from '../Loading';
 var UnMemoizedLoadMoreButton = function (props) {
     var _a = props.children, children = _a === void 0 ? 'Load more' : _a, onClick = props.onClick, refreshing = props.refreshing;
     return (React.createElement("div", { className: 'str-chat__load-more-button' },
-        React.createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React.createElement(LoadingIndicator, null) : children)));
+        React.createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React.createElement(LoadingIndicator, null) : children)));
 };
 export var LoadMoreButton = React.memo(UnMemoizedLoadMoreButton);

package/dist/components/Loading/LoadingChannels.js

@@ -1,7 +1,7 @@
 import React from 'react';
-var LoadingItems = function () { return (React.createElement("div", { className: 'str-chat__loading-channels-item' },
+var LoadingItems = function () { return (React.createElement("div", { className: 'str-chat__loading-channels-item str-chat__channel-preview-loading' },
     React.createElement("div", { className: 'str-chat__loading-channels-avatar' }),
-    React.createElement("div", { className: 'str-chat__loading-channels-meta' },
+    React.createElement("div", { className: 'str-chat__loading-channels-meta str-chat__channel-preview-end-loading' },
         React.createElement("div", { className: 'str-chat__loading-channels-username' }),
         React.createElement("div", { className: 'str-chat__loading-channels-status' })))); };
 var UnMemoizedLoadingChannels = function () { return (React.createElement("div", { className: 'str-chat__loading-channels' },

package/dist/components/Loading/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 var UnMemoizedLoadingIndicator = function (props) {
     var _a = props.color, color = _a === void 0 ? '#006CFF' : _a, _b = props.size, size = _b === void 0 ? 15 : _b;
-    return (React.createElement("div", { className: "str-chat__loading-indicator " + color, "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
+    return (React.createElement("div", { className: "str-chat__loading-indicator ".concat(color), "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
         React.createElement("svg", { height: size, viewBox: "0 0 30 30", width: size, xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("defs", null,
                 React.createElement("linearGradient", { id: 'a', x1: '50%', x2: '50%', y1: '0%', y2: '100%' },

package/dist/components/MML/MML.js

@@ -54,5 +54,5 @@ export var MML = function (props) {
     var actionHandler = props.actionHandler, _a = props.align, align = _a === void 0 ? 'right' : _a, source = props.source;
     var theme = useChatContext('MML').theme;
     return (React.createElement(Suspense, { fallback: null },
-        React.createElement(MMLReact, { className: "mml-align-" + align, Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
+        React.createElement(MMLReact, { className: "mml-align-".concat(align), Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
 };

package/dist/components/Message/FixedHeightMessage.js

@@ -14,7 +14,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { renderText } from '../../utils';
 var selectColor = function (number, dark) {
     var hue = number * 137.508; // use golden angle approximation
-    return "hsl(" + hue + "," + (dark ? '50%' : '85%') + ", " + (dark ? '75%' : '55%') + ")";
+    return "hsl(".concat(hue, ",").concat(dark ? '50%' : '85%', ", ").concat(dark ? '75%' : '55%', ")");
 };
 var hashUserId = function (userId) {
     var hash = userId.split('').reduce(function (acc, c) {
@@ -38,7 +38,7 @@ var UnMemoizedFixedHeightMessage = function (props) {
     var handleAction = useActionHandler(message);
     var handleDelete = useDeleteHandler(message);
     var role = useUserRole(message);
-    var messageTextToRender = ((_a = message === null || message === void 0 ? void 0 : message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) || (message === null || message === void 0 ? void 0 : message.text);
+    var messageTextToRender = ((_a = message === null || message === void 0 ? void 0 : message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || (message === null || message === void 0 ? void 0 : message.text);
     var renderedText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
         messageTextToRender,
@@ -50,7 +50,7 @@ var UnMemoizedFixedHeightMessage = function (props) {
         var type = _a.type;
         return type === 'image';
     });
-    return (React.createElement("div", { className: "str-chat__virtual-message__wrapper " + (role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : '') + " " + (groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''), key: message.id },
+    return (React.createElement("div", { className: "str-chat__virtual-message__wrapper ".concat(role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : '', " ").concat(groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''), key: message.id },
         message.user && (React.createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, shape: 'rounded', size: 38, user: message.user })),
         React.createElement("div", { className: 'str-chat__virtual-message__content' },
             React.createElement("div", { className: 'str-chat__virtual-message__meta' },

package/dist/components/Message/MessageDeleted.js

@@ -7,7 +7,7 @@ export var MessageDeleted = function (props) {
     var isMyMessage = useUserRole(message).isMyMessage;
     var messageClasses = isMyMessage
         ? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
-        : 'str-chat__message str-chat__message-simple';
-    return (React.createElement("div", { className: messageClasses + " str-chat__message--deleted " + message.type + " ", "data-testid": 'message-deleted-component', key: message.id },
+        : 'str-chat__message str-chat__message-simple str-chat__message--other';
+    return (React.createElement("div", { className: "".concat(messageClasses, " str-chat__message--deleted ").concat(message.type, " "), "data-testid": 'message-deleted-component', key: message.id },
         React.createElement("div", { className: 'str-chat__message--deleted-inner' }, t('This message was deleted...'))));
 };

package/dist/components/Message/MessageOptions.d.ts

@@ -3,6 +3,7 @@ import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type MessageOptionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleOpenThread'>> & {
     ActionsIcon?: React.FunctionComponent;
+    /** @deprecated: use CSS to style the order of the contents */
     displayLeft?: boolean;
     displayReplies?: boolean;
     messageWrapperRef?: React.RefObject<HTMLDivElement>;

package/dist/components/Message/MessageOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageOptions.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACtC,CAAC;AA8GF,eAAO,MAAM,cAAc,0JAES,CAAC"}
+{"version":3,"file":"MessageOptions.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC,GAAG;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACtC,CAAC;AAgFF,eAAO,MAAM,cAAc,0JAES,CAAC"}