stream-chat-react 10.14.0 → 11.0.0-rc.1

package/dist/browser.full-bundle.js

@@ -6940,14 +6940,12 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     var DefaultEmojiIndex = /*@__PURE__*/getDefaultExportFromCjs(nimbleEmojiIndex);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DefaultEmoji$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmoji; }); });
-    var DefaultEmojiPicker$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmojiPicker; }); });
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DefaultEmojiPicker$1 = React__default["default"].lazy(function () { return Promise.resolve().then(function () { return DefaultEmojiPicker; }); });
     var EmojiContext = React__default["default"].createContext(undefined);
     var EmojiProvider = function (_a) {
         var children = _a.children, value = _a.value;
-        var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji$1 : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker$1 : _d;
+        var emojiConfig = value.emojiConfig, _b = value.EmojiIndex, EmojiIndex = _b === void 0 ? DefaultEmojiIndex : _b, _c = value.EmojiPicker, EmojiPicker = _c === void 0 ? DefaultEmojiPicker$1 : _c;
         var emojiContextValue = {
-            Emoji: Emoji,
             emojiConfig: emojiConfig,
             EmojiIndex: EmojiIndex,
             EmojiPicker: EmojiPicker,
@@ -39604,8 +39602,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         __assign(__assign({ colons: ':pensive:', id: 'sad', name: 'sad', sheet_x: 0, sheet_y: 1 }, commonEmoji), emojiSetDef),
         __assign(__assign({ colons: ':angry:', id: 'angry', name: 'angry', sheet_x: 1, sheet_y: 1 }, commonEmoji), emojiSetDef),
     ];
-    // use this only for small lists like in ReactionSelector
-    var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data), { emojis: {} })); };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCreateChannelStateContext = function (value) {
         var _a;
@@ -44852,24 +44848,32 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         }
         return false;
     };
+    var getImageDimensions = function (source) {
+        return new Promise(function (resolve, reject) {
+            var image = new Image();
+            image.addEventListener('load', function () {
+                resolve([image.width, image.height]);
+            }, { once: true });
+            image.addEventListener('error', function () { return reject("Couldn't load image from ".concat(source)); }, {
+                once: true,
+            });
+            image.src = source;
+        });
+    };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedReactionSelector = React__default["default"].forwardRef(function (props, ref) {
         var _a;
-        var _b = props.additionalEmojiProps, additionalEmojiProps = _b === void 0 ? {} : _b, propAvatar = props.Avatar, _c = props.detailedView, detailedView = _c === void 0 ? true : _c, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _d = props.reverse, reverse = _d === void 0 ? false : _d;
-        var contextAvatar = useComponentContext('ReactionSelector').Avatar;
-        var _e = useEmojiContext('ReactionSelector'), Emoji = _e.Emoji, emojiConfig = _e.emojiConfig;
-        var _f = useMessageContext('ReactionSelector'), contextHandleReaction = _f.handleReaction, message = _f.message;
-        var _g = emojiConfig || {}, defaultMinimalEmojis = _g.defaultMinimalEmojis, fullEmojiData = _g.emojiData, emojiSetDef = _g.emojiSetDef;
+        var propAvatar = props.Avatar, _b = props.detailedView, detailedView = _b === void 0 ? true : _b, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propOwnReactions = props.own_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _c = props.reverse, reverse = _c === void 0 ? false : _c;
+        var _d = useComponentContext('ReactionSelector'), contextAvatar = _d.Avatar, contextReactionOptions = _d.reactionOptions;
+        var _e = useMessageContext('ReactionSelector'), contextHandleReaction = _e.handleReaction, message = _e.message;
+        var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
         var Avatar$1 = propAvatar || contextAvatar || Avatar;
         var handleReaction = propHandleReaction || contextHandleReaction;
         var latestReactions = propLatestReactions || (message === null || message === void 0 ? void 0 : message.latest_reactions) || [];
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
         var reactionCounts = propReactionCounts || (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
-        var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-        var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
-        var emojiData = React$2.useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
-        var _h = React$2.useState(null), tooltipReactionType = _h[0], setTooltipReactionType = _h[1];
-        var _j = React$2.useState(null), tooltipPositions = _j[0], setTooltipPositions = _j[1];
+        var _f = React$2.useState(null), tooltipReactionType = _f[0], setTooltipReactionType = _f[1];
+        var _g = React$2.useState(null), tooltipPositions = _g[0], setTooltipPositions = _g[1];
         var targetRef = React$2.useRef(null);
         var tooltipRef = React$2.useRef(null);
         var showTooltip = React$2.useCallback(function (event, reactionType) {
@@ -44926,17 +44930,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 } },
                 React__default["default"].createElement("div", { className: 'arrow', style: { left: tooltipPositions === null || tooltipPositions === void 0 ? void 0 : tooltipPositions.arrow } }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
                 _a.map(function (user, i, users) { return (React__default["default"].createElement("span", { className: 'latest-user-username', key: "key-".concat(i, "-").concat(user) }, "".concat(user).concat(i < users.length - 1 ? ', ' : ''))); }))),
-            React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (reactionOption) {
-                var latestUser = getLatestUserForReactionType(reactionOption.id);
-                var count = reactionCounts && reactionCounts[reactionOption.id];
-                return (React__default["default"].createElement("li", { key: "item-".concat(reactionOption.id) },
-                    React__default["default"].createElement("button", { "aria-label": "Select Reaction: ".concat(reactionOption.name), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
-                            'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionOption.id),
-                        }), "data-text": reactionOption.id, onClick: function (event) { return handleReaction(reactionOption.id, event); } },
-                        !!count && detailedView && (React__default["default"].createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionOption.id); }, onMouseLeave: hideTooltip }, latestUser ? (React__default["default"].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default["default"].createElement("div", { className: 'latest-user-not-found' })))),
-                        React__default["default"].createElement(React$2.Suspense, { fallback: null },
-                            React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                                React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: reactionOption, size: 20 }, (reactionsAreCustom ? additionalEmojiProps : emojiSetDef))))),
+            React__default["default"].createElement("ul", { className: 'str-chat__message-reactions-list str-chat__message-reactions-options' }, reactionOptions.map(function (_a) {
+                var Component = _a.Component, reactionName = _a.name, reactionType = _a.type;
+                var latestUser = getLatestUserForReactionType(reactionType);
+                var count = reactionCounts && reactionCounts[reactionType];
+                return (React__default["default"].createElement("li", { key: reactionType },
+                    React__default["default"].createElement("button", { "aria-label": "Select Reaction: ".concat(reactionName || reactionType), className: clsx('str-chat__message-reactions-list-item str-chat__message-reactions-option', {
+                            'str-chat__message-reactions-option-selected': iHaveReactedWithReaction(reactionType),
+                        }), "data-text": reactionType, onClick: function (event) { return handleReaction(reactionType, event); } },
+                        !!count && detailedView && (React__default["default"].createElement("div", { className: 'latest-user str-chat__message-reactions-last-user', onClick: hideTooltip, onMouseEnter: function (e) { return showTooltip(e, reactionType); }, onMouseLeave: hideTooltip }, latestUser ? (React__default["default"].createElement(Avatar$1, { image: latestUser.image, name: latestUser.name, size: 20, user: latestUser })) : (React__default["default"].createElement("div", { className: 'latest-user-not-found' })))),
+                        React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                            React__default["default"].createElement(Component, null)),
                         Boolean(count) && detailedView && (React__default["default"].createElement("span", { className: 'str-chat__message-reactions-list-item__count' }, count || '')))));
             }))));
     });
@@ -44946,19 +44950,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     var ReactionSelector = React__default["default"].memo(UnMemoizedReactionSelector);
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useProcessReactions = function (params) {
-        var _a = params.additionalEmojiProps, additionalEmojiProps = _a === void 0 ? {} : _a, emojiConfig = params.emojiConfig, propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
-        var message = useMessageContext('ReactionsList').message;
-        var _b = emojiConfig || {}, defaultMinimalEmojis = _b.defaultMinimalEmojis, fullEmojiData = _b.emojiData, emojiSetDef = _b.emojiSetDef;
+        var propOwnReactions = params.own_reactions, propReactionCounts = params.reaction_counts, propReactionOptions = params.reactionOptions, propReactions = params.reactions;
+        var message = useMessageContext('useProcessReactions').message;
+        var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
+        var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
         var latestReactions = propReactions || message.latest_reactions || [];
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
         var reactionCounts = propReactionCounts || message.reaction_counts || {};
-        var reactionOptions = propReactionOptions || defaultMinimalEmojis;
-        var reactionsAreCustom = !!(propReactionOptions === null || propReactionOptions === void 0 ? void 0 : propReactionOptions.length);
         var iHaveReactedWithReaction = React$2.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
-        var getEmojiByReactionType = React$2.useCallback(function (type) {
-            return reactionOptions.find(function (option) { return option.id === type; });
-        }, [reactionOptions]);
-        var emojiData = React$2.useMemo(function () { return (reactionsAreCustom ? fullEmojiData : getStrippedEmojiData(fullEmojiData)); }, [fullEmojiData, reactionsAreCustom]);
+        var getEmojiByReactionType = React$2.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
+            var type = _a.type;
+            return type === reactionType;
+        }); }, [reactionOptions]);
         var latestReactionTypes = React$2.useMemo(function () {
             return latestReactions.reduce(function (reactionTypes, _a) {
                 var type = _a.type;
@@ -44969,13 +44972,13 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }, []);
         }, [latestReactions]);
         var supportedReactionMap = React$2.useMemo(function () {
-            return reactionOptions.reduce(function (acc, _a) {
-                var id = _a.id;
-                acc[id] = true;
-                return acc;
+            return reactionOptions.reduce(function (map, _a) {
+                var reactionType = _a.type;
+                map[reactionType] = true;
+                return map;
             }, {});
         }, [reactionOptions]);
-        var supportedReactionsArePresent = React$2.useMemo(function () { return latestReactionTypes.some(function (type) { return supportedReactionMap[type]; }); }, [latestReactionTypes, supportedReactionMap]);
+        var supportedReactionsArePresent = React$2.useMemo(function () { return latestReactionTypes.some(function (reactionType) { return supportedReactionMap[reactionType]; }); }, [latestReactionTypes, supportedReactionMap]);
         var totalReactionCount = React$2.useMemo(function () {
             return supportedReactionsArePresent
                 ? Object.values(reactionCounts).reduce(function (total, count) { return total + count; }, 0)
@@ -44992,9 +44995,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }, {});
         }, [latestReactions]);
         return {
-            additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
             aggregatedUserNamesByType: aggregatedUserNamesByType,
-            emojiData: emojiData,
             getEmojiByReactionType: getEmojiByReactionType,
             iHaveReactedWithReaction: iHaveReactedWithReaction,
             latestReactions: latestReactions,
@@ -45019,9 +45020,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
     var UnMemoizedReactionsList = function (props) {
         var onClick = props.onClick, _a = props.reverse, reverse = _a === void 0 ? false : _a, rest = __rest(props, ["onClick", "reverse"]);
-        var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
         var onReactionListClick = useMessageContext('ReactionsList').onReactionListClick;
-        var _c = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _c.additionalEmojiProps, aggregatedUserNamesByType = _c.aggregatedUserNamesByType, emojiData = _c.emojiData, getEmojiByReactionType = _c.getEmojiByReactionType, iHaveReactedWithReaction = _c.iHaveReactedWithReaction, latestReactions = _c.latestReactions, latestReactionTypes = _c.latestReactionTypes, reactionCounts = _c.reactionCounts, supportedReactionsArePresent = _c.supportedReactionsArePresent, totalReactionCount = _c.totalReactionCount;
+        var _b = useProcessReactions(rest), aggregatedUserNamesByType = _b.aggregatedUserNamesByType, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, reactionCounts = _b.reactionCounts, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
         if (!latestReactions.length)
             return null;
         if (!supportedReactionsArePresent)
@@ -45031,17 +45031,16 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }), "data-testid": 'reaction-list', onClick: onClick || onReactionListClick, onKeyUp: onClick || onReactionListClick, role: 'figure' },
             React__default["default"].createElement("ul", { className: 'str-chat__message-reactions' },
                 latestReactionTypes.map(function (reactionType) {
-                    var emojiObject = getEmojiByReactionType(reactionType);
+                    var ReactionOption = getEmojiByReactionType(reactionType);
                     var isOwnReaction = iHaveReactedWithReaction(reactionType);
-                    return emojiObject ? (React__default["default"].createElement("li", { className: clsx('str-chat__message-reaction', {
+                    return (ReactionOption && (React__default["default"].createElement("li", { className: clsx('str-chat__message-reaction', {
                             'str-chat__message-reaction-own': isOwnReaction,
-                        }), key: emojiObject.id },
-                        React__default["default"].createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
-                            React__default["default"].createElement(React$2.Suspense, { fallback: null },
-                                React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
-                                    React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 16 }, additionalEmojiProps)))),
+                        }), key: reactionType },
+                        React__default["default"].createElement(ButtonWithTooltip, { "aria-label": "Reactions: ".concat(reactionType), "data-testid": "reactions-list-button-".concat(reactionType), title: aggregatedUserNamesByType[reactionType].join(', '), type: 'button' },
+                            React__default["default"].createElement("span", { className: 'str-chat__message-reaction-emoji' },
+                                React__default["default"].createElement(ReactionOption.Component, null)),
                             "\u00A0",
-                            React__default["default"].createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))) : null;
+                            React__default["default"].createElement("span", { className: 'str-chat__message-reaction-count', "data-testclass": 'reaction-list-reaction-count' }, reactionCounts[reactionType])))));
                 }),
                 React__default["default"].createElement("li", null,
                     React__default["default"].createElement("span", { className: 'str-chat__reaction-list--counter' }, totalReactionCount)))));
@@ -45067,10 +45066,9 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
     var UnMemoizedSimpleReactionsList = function (props) {
         var propHandleReaction = props.handleReaction, rest = __rest(props, ["handleReaction"]);
-        var _a = useEmojiContext('SimpleReactionsList'), Emoji = _a.Emoji, emojiConfig = _a.emojiConfig;
         var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
-        var _b = useProcessReactions(__assign({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _b.additionalEmojiProps, emojiData = _b.emojiData, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
-        var _c = React$2.useState(undefined), tooltipReactionType = _c[0], setTooltipReactionType = _c[1];
+        var _a = useProcessReactions(rest), getEmojiByReactionType = _a.getEmojiByReactionType, iHaveReactedWithReaction = _a.iHaveReactedWithReaction, latestReactions = _a.latestReactions, latestReactionTypes = _a.latestReactionTypes, supportedReactionsArePresent = _a.supportedReactionsArePresent, totalReactionCount = _a.totalReactionCount;
+        var _b = React$2.useState(undefined), tooltipReactionType = _b[0], setTooltipReactionType = _b[1];
         var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
         var handleReaction = propHandleReaction || contextHandleReaction;
         if (!latestReactions.length)
@@ -45090,27 +45088,77 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         };
         return (React__default["default"].createElement("div", { className: 'str-chat__message-reactions-container' },
             React__default["default"].createElement("ul", { className: 'str-chat__simple-reactions-list str-chat__message-reactions', "data-testid": 'simple-reaction-list', onMouseLeave: function () { return setTooltipReactionType(undefined); } },
-                latestReactionTypes.map(function (reactionType, i) {
+                latestReactionTypes.map(function (reactionType) {
                     var _a;
-                    var emojiObject = getEmojiByReactionType(reactionType);
+                    var ReactionOption = getEmojiByReactionType(reactionType);
                     var isOwnReaction = iHaveReactedWithReaction(reactionType);
-                    var tooltipVisible = emojiObject && tooltipReactionType === (emojiObject === null || emojiObject === void 0 ? void 0 : emojiObject.id);
+                    var tooltipVisible = tooltipReactionType === reactionType;
                     var tooltipContent = (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 : _a.join(', ');
-                    return emojiObject ? (React__default["default"].createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
+                    return (ReactionOption && (React__default["default"].createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                             'str-chat__message-reaction-own': isOwnReaction,
-                        }), key: "".concat(emojiObject.id, "-").concat(i), onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
+                        }), key: reactionType, onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
                         React__default["default"].createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
-                            React__default["default"].createElement(React$2.Suspense, { fallback: null },
-                                React__default["default"].createElement(Emoji, __assign({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
+                            React__default["default"].createElement(ReactionOption.Component, null),
                             "\u00A0",
                             tooltipVisible && themeVersion === '1' && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
                                 React__default["default"].createElement("div", { className: 'arrow' }),
-                                tooltipContent))))) : null;
+                                tooltipContent))))));
                 }),
                 React__default["default"].createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
     };
     var SimpleReactionsList = React__default["default"].memo(UnMemoizedSimpleReactionsList);
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var SpriteImage = function (_a) {
+        var columns = _a.columns, fallback = _a.fallback, height = _a.height, position = _a.position, rows = _a.rows, spriteUrl = _a.spriteUrl, width = _a.width;
+        var _b = React$2.useState([0, 0]), _c = _b[0], spriteWidth = _c[0], spriteHeight = _c[1], setSpriteDimensions = _b[1];
+        React$2.useEffect(function () {
+            getImageDimensions(spriteUrl).then(setSpriteDimensions).catch(console.error);
+        }, [spriteUrl]);
+        var x = position[0], y = position[1];
+        var spriteItemWidth = spriteWidth / columns;
+        var spriteItemHeight = spriteHeight / rows;
+        var resizeRatio = 1;
+        if (!width && height)
+            resizeRatio = height / spriteItemHeight;
+        if (width && !height)
+            resizeRatio = width / spriteItemWidth;
+        if (resizeRatio === Infinity)
+            resizeRatio = 1;
+        if (!spriteHeight || !spriteWidth)
+            return React__default["default"].createElement(React__default["default"].Fragment, null, fallback);
+        return (React__default["default"].createElement("div", { "data-testid": 'sprite-image', style: {
+                backgroundImage: "url('".concat(spriteUrl, "')"),
+                backgroundPosition: "".concat(x * (100 / (columns - 1)), "% ").concat(y * (100 / (rows - 1)), "%"),
+                backgroundSize: "".concat(columns * 100, "% ").concat(rows * 100, "%"),
+                height: height !== null && height !== void 0 ? height : spriteItemHeight * resizeRatio,
+                width: width !== null && width !== void 0 ? width : spriteItemWidth * resizeRatio,
+            } }));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var StreamSpriteEmojiPositions = {
+        angry: [1, 1],
+        haha: [1, 0],
+        like: [0, 0],
+        love: [1, 2],
+        sad: [0, 1],
+        wow: [0, 2],
+    };
+    var STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
+    var StreamEmoji = function (_a) {
+        var fallback = _a.fallback, type = _a.type;
+        var position = StreamSpriteEmojiPositions[type];
+        return (React__default["default"].createElement(SpriteImage, { columns: 2, fallback: fallback, height: 18, position: position, rows: 3, spriteUrl: STREAM_SPRITE_URL }));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/* eslint-disable sort-keys */
+    var defaultReactionOptions = [
+        { type: 'haha', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }); }, name: 'Joy' },
+        { type: 'like', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }); }, name: 'Thumbs up' },
+        { type: 'love', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }); }, name: 'Heart' },
+        { type: 'sad', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }); }, name: 'Sad' },
+        { type: 'wow', Component: function () { return React__default["default"].createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }); }, name: 'Astonished' },
+    ];
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageSimpleWithContext = function (props) {
@@ -46169,49 +46217,52 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             jumpToMessage,
             jumpToLatestMessage,
         ]);
-        var componentContextValue = React$2.useMemo(function () { return ({
-            Attachment: props.Attachment || Attachment,
-            AttachmentPreviewList: props.AttachmentPreviewList,
-            AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
-            AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
-            AutocompleteSuggestionList: props.AutocompleteSuggestionList,
-            Avatar: props.Avatar,
-            CooldownTimer: props.CooldownTimer,
-            DateSeparator: props.DateSeparator,
-            EditMessageInput: props.EditMessageInput,
-            EmojiIcon: props.EmojiIcon,
-            EmptyStateIndicator: props.EmptyStateIndicator,
-            FileUploadIcon: props.FileUploadIcon,
-            GiphyPreviewMessage: props.GiphyPreviewMessage,
-            HeaderComponent: props.HeaderComponent,
-            Input: props.Input,
-            LinkPreviewList: props.LinkPreviewList,
-            LoadingIndicator: props.LoadingIndicator,
-            Message: props.Message || MessageSimple,
-            MessageDeleted: props.MessageDeleted,
-            MessageListNotifications: props.MessageListNotifications,
-            MessageNotification: props.MessageNotification,
-            MessageOptions: props.MessageOptions,
-            MessageRepliesCountButton: props.MessageRepliesCountButton,
-            MessageStatus: props.MessageStatus,
-            MessageSystem: props.MessageSystem,
-            MessageTimestamp: props.MessageTimestamp,
-            ModalGallery: props.ModalGallery,
-            PinIndicator: props.PinIndicator,
-            QuotedMessage: props.QuotedMessage,
-            QuotedMessagePreview: props.QuotedMessagePreview,
-            ReactionSelector: props.ReactionSelector,
-            ReactionsList: props.ReactionsList,
-            SendButton: props.SendButton,
-            ThreadHead: props.ThreadHead,
-            ThreadHeader: props.ThreadHeader,
-            ThreadStart: props.ThreadStart,
-            TriggerProvider: props.TriggerProvider,
-            TypingIndicator: props.TypingIndicator,
-            VirtualMessage: props.VirtualMessage,
-        }); }, []);
+        var componentContextValue = React$2.useMemo(function () {
+            var _a;
+            return ({
+                Attachment: props.Attachment || Attachment,
+                AttachmentPreviewList: props.AttachmentPreviewList,
+                AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
+                AutocompleteSuggestionItem: props.AutocompleteSuggestionItem,
+                AutocompleteSuggestionList: props.AutocompleteSuggestionList,
+                Avatar: props.Avatar,
+                CooldownTimer: props.CooldownTimer,
+                DateSeparator: props.DateSeparator,
+                EditMessageInput: props.EditMessageInput,
+                EmojiIcon: props.EmojiIcon,
+                EmptyStateIndicator: props.EmptyStateIndicator,
+                FileUploadIcon: props.FileUploadIcon,
+                GiphyPreviewMessage: props.GiphyPreviewMessage,
+                HeaderComponent: props.HeaderComponent,
+                Input: props.Input,
+                LinkPreviewList: props.LinkPreviewList,
+                LoadingIndicator: props.LoadingIndicator,
+                Message: props.Message || MessageSimple,
+                MessageDeleted: props.MessageDeleted,
+                MessageListNotifications: props.MessageListNotifications,
+                MessageNotification: props.MessageNotification,
+                MessageOptions: props.MessageOptions,
+                MessageRepliesCountButton: props.MessageRepliesCountButton,
+                MessageStatus: props.MessageStatus,
+                MessageSystem: props.MessageSystem,
+                MessageTimestamp: props.MessageTimestamp,
+                ModalGallery: props.ModalGallery,
+                PinIndicator: props.PinIndicator,
+                QuotedMessage: props.QuotedMessage,
+                QuotedMessagePreview: props.QuotedMessagePreview,
+                reactionOptions: (_a = props.reactionOptions) !== null && _a !== void 0 ? _a : defaultReactionOptions,
+                ReactionSelector: props.ReactionSelector,
+                ReactionsList: props.ReactionsList,
+                SendButton: props.SendButton,
+                ThreadHead: props.ThreadHead,
+                ThreadHeader: props.ThreadHeader,
+                ThreadStart: props.ThreadStart,
+                TriggerProvider: props.TriggerProvider,
+                TypingIndicator: props.TypingIndicator,
+                VirtualMessage: props.VirtualMessage,
+            });
+        }, [props.reactionOptions]);
         var emojiContextValue = React$2.useMemo(function () { return ({
-            Emoji: props.Emoji,
             emojiConfig: emojiConfig,
             EmojiIndex: props.EmojiIndex,
             EmojiPicker: props.EmojiPicker,
@@ -47555,7 +47606,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.14.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.0.0-rc.1';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -50843,421 +50894,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    var nimbleEmoji$1 = {};
-
-    var sharedProps = {};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var hasRequiredSharedProps;
-
-    function requireSharedProps () {
-    	if (hasRequiredSharedProps) return sharedProps;
-    	hasRequiredSharedProps = 1;
-
-    	var _interopRequireDefault = interopRequireDefault.exports;
-
-    	Object.defineProperty(sharedProps, "__esModule", {
-    	  value: true
-    	});
-    	sharedProps.PickerPropTypes = sharedProps.EmojiPropTypes = void 0;
-
-    	var _propTypes = _interopRequireDefault(requirePropTypes());
-
-    	var EmojiPropTypes = {
-    	  data: _propTypes["default"].object.isRequired,
-    	  onOver: _propTypes["default"].func,
-    	  onLeave: _propTypes["default"].func,
-    	  onClick: _propTypes["default"].func,
-    	  fallback: _propTypes["default"].func,
-    	  backgroundImageFn: _propTypes["default"].func,
-    	  "native": _propTypes["default"].bool,
-    	  forceSize: _propTypes["default"].bool,
-    	  tooltip: _propTypes["default"].bool,
-    	  useButton: _propTypes["default"].bool,
-    	  skin: _propTypes["default"].oneOf([1, 2, 3, 4, 5, 6]),
-    	  sheetSize: _propTypes["default"].oneOf([16, 20, 32, 64]),
-    	  sheetColumns: _propTypes["default"].number,
-    	  sheetRows: _propTypes["default"].number,
-    	  set: _propTypes["default"].oneOf(['apple', 'google', 'twitter', 'facebook']),
-    	  size: _propTypes["default"].number.isRequired,
-    	  emoji: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired
-    	};
-    	sharedProps.EmojiPropTypes = EmojiPropTypes;
-    	var PickerPropTypes = {
-    	  onClick: _propTypes["default"].func,
-    	  onSelect: _propTypes["default"].func,
-    	  onSkinChange: _propTypes["default"].func,
-    	  perLine: _propTypes["default"].number,
-    	  emojiSize: _propTypes["default"].number,
-    	  i18n: _propTypes["default"].object,
-    	  style: _propTypes["default"].object,
-    	  title: _propTypes["default"].string,
-    	  emoji: _propTypes["default"].string,
-    	  color: _propTypes["default"].string,
-    	  set: EmojiPropTypes.set,
-    	  skin: EmojiPropTypes.skin,
-    	  "native": _propTypes["default"].bool,
-    	  backgroundImageFn: EmojiPropTypes.backgroundImageFn,
-    	  sheetSize: EmojiPropTypes.sheetSize,
-    	  emojisToShowFilter: _propTypes["default"].func,
-    	  showPreview: _propTypes["default"].bool,
-    	  showSkinTones: _propTypes["default"].bool,
-    	  emojiTooltip: EmojiPropTypes.tooltip,
-    	  useButton: EmojiPropTypes.useButton,
-    	  theme: _propTypes["default"].oneOf(['auto', 'light', 'dark']),
-    	  include: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    	  exclude: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    	  recent: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    	  autoFocus: _propTypes["default"].bool,
-    	  enableFrequentEmojiSort: _propTypes["default"].bool,
-    	  custom: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    	    name: _propTypes["default"].string.isRequired,
-    	    short_names: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
-    	    emoticons: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    	    keywords: _propTypes["default"].arrayOf(_propTypes["default"].string),
-    	    imageUrl: _propTypes["default"].string,
-    	    spriteUrl: _propTypes["default"].string,
-    	    sheet_x: _propTypes["default"].number,
-    	    sheet_y: _propTypes["default"].number,
-    	    size: _propTypes["default"].number,
-    	    sheetColumns: _propTypes["default"].number,
-    	    sheetRows: _propTypes["default"].number
-    	  })),
-    	  skinEmoji: _propTypes["default"].string,
-    	  notFound: _propTypes["default"].func,
-    	  notFoundEmoji: _propTypes["default"].string,
-    	  icons: _propTypes["default"].object
-    	};
-    	sharedProps.PickerPropTypes = PickerPropTypes;
-    	return sharedProps;
-    }
-
-    var sharedDefaultProps = {};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    var hasRequiredSharedDefaultProps;
-
-    function requireSharedDefaultProps () {
-    	if (hasRequiredSharedDefaultProps) return sharedDefaultProps;
-    	hasRequiredSharedDefaultProps = 1;
-
-    	Object.defineProperty(sharedDefaultProps, "__esModule", {
-    	  value: true
-    	});
-    	sharedDefaultProps.EmojiDefaultProps = sharedDefaultProps.PickerDefaultProps = void 0;
-    	var EmojiDefaultProps = {
-    	  skin: 1,
-    	  set: 'apple',
-    	  sheetSize: 64,
-    	  sheetColumns: 57,
-    	  sheetRows: 57,
-    	  "native": false,
-    	  forceSize: false,
-    	  tooltip: false,
-    	  useButton: true,
-    	  backgroundImageFn: function backgroundImageFn(set, sheetSize) {
-    	    return "https://unpkg.com/emoji-datasource-".concat(set, "@").concat("5.0.1", "/img/").concat(set, "/sheets-256/").concat(sheetSize, ".png");
-    	  }
-    	};
-    	sharedDefaultProps.EmojiDefaultProps = EmojiDefaultProps;
-    	var PickerDefaultProps = {
-    	  onClick: function onClick() {},
-    	  onSelect: function onSelect() {},
-    	  onSkinChange: function onSkinChange() {},
-    	  emojiSize: 24,
-    	  perLine: 9,
-    	  i18n: {},
-    	  style: {},
-    	  title: 'Emoji Mart™',
-    	  emoji: 'department_store',
-    	  color: '#ae65c5',
-    	  set: EmojiDefaultProps.set,
-    	  theme: 'light',
-    	  skin: null,
-    	  defaultSkin: EmojiDefaultProps.skin,
-    	  "native": EmojiDefaultProps["native"],
-    	  sheetSize: EmojiDefaultProps.sheetSize,
-    	  backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
-    	  emojisToShowFilter: null,
-    	  showPreview: true,
-    	  showSkinTones: true,
-    	  emojiTooltip: EmojiDefaultProps.tooltip,
-    	  useButton: EmojiDefaultProps.useButton,
-    	  autoFocus: false,
-    	  enableFrequentEmojiSort: false,
-    	  custom: [],
-    	  skinEmoji: '',
-    	  notFound: function notFound() {},
-    	  notFoundEmoji: 'sleuth_or_spy',
-    	  icons: {}
-    	};
-    	sharedDefaultProps.PickerDefaultProps = PickerDefaultProps;
-    	return sharedDefaultProps;
-    }
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    (function (exports) {
-
-    	var _interopRequireDefault = interopRequireDefault.exports;
-
-    	Object.defineProperty(exports, "__esModule", {
-    	  value: true
-    	});
-    	exports["default"] = void 0;
-
-    	var _extends2 = _interopRequireDefault(_extends$3.exports);
-
-    	var _defineProperty2 = _interopRequireDefault(defineProperty$1.exports);
-
-    	var _react = _interopRequireDefault(React__default["default"]);
-
-    	var _propTypes = _interopRequireDefault(requirePropTypes());
-
-    	var _utils = requireUtils();
-
-    	var _data = requireData();
-
-    	var _sharedProps = requireSharedProps();
-
-    	var _sharedDefaultProps = requireSharedDefaultProps();
-
-    	function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-    	function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-    	var _getData = function _getData(props) {
-    	  var emoji = props.emoji,
-    	      skin = props.skin,
-    	      set = props.set,
-    	      data = props.data;
-    	  return (0, _utils.getData)(emoji, skin, set, data);
-    	};
-
-    	var _getPosition = function _getPosition(props) {
-    	  var _getData2 = _getData(props),
-    	      sheet_x = _getData2.sheet_x,
-    	      sheet_y = _getData2.sheet_y,
-    	      multiplyX = 100 / (props.sheetColumns - 1),
-    	      multiplyY = 100 / (props.sheetRows - 1);
-
-    	  return "".concat(multiplyX * sheet_x, "% ").concat(multiplyY * sheet_y, "%");
-    	};
-
-    	var _getSanitizedData = function _getSanitizedData(props) {
-    	  var emoji = props.emoji,
-    	      skin = props.skin,
-    	      set = props.set,
-    	      data = props.data;
-    	  return (0, _utils.getSanitizedData)(emoji, skin, set, data);
-    	};
-
-    	var _handleClick = function _handleClick(e, props) {
-    	  if (!props.onClick) {
-    	    return;
-    	  }
-
-    	  var onClick = props.onClick,
-    	      emoji = _getSanitizedData(props);
-
-    	  onClick(emoji, e);
-    	};
-
-    	var _handleOver = function _handleOver(e, props) {
-    	  if (!props.onOver) {
-    	    return;
-    	  }
-
-    	  var onOver = props.onOver,
-    	      emoji = _getSanitizedData(props);
-
-    	  onOver(emoji, e);
-    	};
-
-    	var _handleLeave = function _handleLeave(e, props) {
-    	  if (!props.onLeave) {
-    	    return;
-    	  }
-
-    	  var onLeave = props.onLeave,
-    	      emoji = _getSanitizedData(props);
-
-    	  onLeave(emoji, e);
-    	};
-
-    	var _isNumeric = function _isNumeric(value) {
-    	  return !isNaN(value - parseFloat(value));
-    	};
-
-    	var _convertStyleToCSS = function _convertStyleToCSS(style) {
-    	  var div = document.createElement('div');
-
-    	  for (var key in style) {
-    	    var value = style[key];
-
-    	    if (_isNumeric(value)) {
-    	      value += 'px';
-    	    }
-
-    	    div.style[key] = value;
-    	  }
-
-    	  return div.getAttribute('style');
-    	};
-
-    	var NimbleEmoji = function NimbleEmoji(props) {
-    	  if (props.data.compressed) {
-    	    (0, _data.uncompress)(props.data);
-    	  }
-
-    	  for (var k in NimbleEmoji.defaultProps) {
-    	    if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
-    	      props[k] = NimbleEmoji.defaultProps[k];
-    	    }
-    	  }
-
-    	  var data = _getData(props);
-
-    	  if (!data) {
-    	    if (props.fallback) {
-    	      return props.fallback(null, props);
-    	    } else {
-    	      return null;
-    	    }
-    	  }
-
-    	  var unified = data.unified,
-    	      custom = data.custom,
-    	      short_names = data.short_names,
-    	      imageUrl = data.imageUrl,
-    	      style = {},
-    	      children = props.children,
-    	      className = 'emoji-mart-emoji',
-    	      nativeEmoji = unified && (0, _utils.unifiedToNative)(unified),
-    	      label = [nativeEmoji].concat(short_names).filter(Boolean).join(', '),
-    	      title = null;
-
-    	  if (!unified && !custom) {
-    	    if (props.fallback) {
-    	      return props.fallback(data, props);
-    	    } else {
-    	      return null;
-    	    }
-    	  }
-
-    	  if (props.tooltip) {
-    	    title = short_names[0];
-    	  }
-
-    	  if (props["native"] && unified) {
-    	    className += ' emoji-mart-emoji-native';
-    	    style = {
-    	      fontSize: props.size
-    	    };
-    	    children = nativeEmoji;
-
-    	    if (props.forceSize) {
-    	      style.display = 'inline-block';
-    	      style.width = props.size;
-    	      style.height = props.size;
-    	      style.wordBreak = 'keep-all';
-    	    }
-    	  } else if (custom) {
-    	    className += ' emoji-mart-emoji-custom';
-    	    style = {
-    	      width: props.size,
-    	      height: props.size,
-    	      display: 'inline-block'
-    	    };
-
-    	    if (data.spriteUrl) {
-    	      style = _objectSpread({}, style, {
-    	        backgroundImage: "url(".concat(data.spriteUrl, ")"),
-    	        backgroundSize: "".concat(100 * props.sheetColumns, "% ").concat(100 * props.sheetRows, "%"),
-    	        backgroundPosition: _getPosition(props)
-    	      });
-    	    } else {
-    	      style = _objectSpread({}, style, {
-    	        backgroundImage: "url(".concat(imageUrl, ")"),
-    	        backgroundSize: 'contain',
-    	        backgroundRepeat: 'no-repeat',
-    	        backgroundPosition: 'center'
-    	      });
-    	    }
-    	  } else {
-    	    var setHasEmoji = data["has_img_".concat(props.set)] == undefined || data["has_img_".concat(props.set)];
-
-    	    if (!setHasEmoji) {
-    	      if (props.fallback) {
-    	        return props.fallback(data, props);
-    	      } else {
-    	        return null;
-    	      }
-    	    } else {
-    	      style = {
-    	        width: props.size,
-    	        height: props.size,
-    	        display: 'inline-block',
-    	        backgroundImage: "url(".concat(props.backgroundImageFn(props.set, props.sheetSize), ")"),
-    	        backgroundSize: "".concat(100 * props.sheetColumns, "% ").concat(100 * props.sheetRows, "%"),
-    	        backgroundPosition: _getPosition(props)
-    	      };
-    	    }
-    	  }
-
-    	  var Tag = {
-    	    name: 'span',
-    	    props: {}
-    	  };
-
-    	  if (props.onClick && props.useButton) {
-    	    Tag.name = 'button';
-    	    Tag.props = {
-    	      type: 'button'
-    	    };
-    	  }
-
-    	  if (props.html) {
-    	    style = _convertStyleToCSS(style);
-    	    return "<".concat(Tag.name, " style='").concat(style, "' aria-label='").concat(label, "' ").concat(title ? "title='".concat(title, "'") : '', " class='").concat(className, "'>").concat(children || '', "</").concat(Tag.name, ">");
-    	  } else {
-    	    return _react["default"].createElement(Tag.name, (0, _extends2["default"])({
-    	      onClick: function onClick(e) {
-    	        return _handleClick(e, props);
-    	      },
-    	      onMouseEnter: function onMouseEnter(e) {
-    	        return _handleOver(e, props);
-    	      },
-    	      onMouseLeave: function onMouseLeave(e) {
-    	        return _handleLeave(e, props);
-    	      },
-    	      "aria-label": label,
-    	      title: title,
-    	      className: className
-    	    }, Tag.props), _react["default"].createElement("span", {
-    	      style: style
-    	    }, children));
-    	  }
-    	};
-
-    	NimbleEmoji.propTypes
-    	/* remove-proptypes */
-    	= _objectSpread({}, _sharedProps.EmojiPropTypes, {
-    	  data: _propTypes["default"].object.isRequired
-    	});
-    	NimbleEmoji.defaultProps = _sharedDefaultProps.EmojiDefaultProps;
-    	var _default = NimbleEmoji;
-    	exports["default"] = _default;
-    } (nimbleEmoji$1));
-
-    var nimbleEmoji = /*@__PURE__*/getDefaultExportFromCjs(nimbleEmoji$1);
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// @ts-expect-error
-
-    var DefaultEmoji = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        'default': nimbleEmoji
-    });
-
     var nimblePicker$1 = {};
 
     var interopRequireWildcard = {exports: {}};
@@ -51577,6 +51213,93 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     	return frequently;
     }
 
+    var sharedProps = {};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    var hasRequiredSharedProps;
+
+    function requireSharedProps () {
+    	if (hasRequiredSharedProps) return sharedProps;
+    	hasRequiredSharedProps = 1;
+
+    	var _interopRequireDefault = interopRequireDefault.exports;
+
+    	Object.defineProperty(sharedProps, "__esModule", {
+    	  value: true
+    	});
+    	sharedProps.PickerPropTypes = sharedProps.EmojiPropTypes = void 0;
+
+    	var _propTypes = _interopRequireDefault(requirePropTypes());
+
+    	var EmojiPropTypes = {
+    	  data: _propTypes["default"].object.isRequired,
+    	  onOver: _propTypes["default"].func,
+    	  onLeave: _propTypes["default"].func,
+    	  onClick: _propTypes["default"].func,
+    	  fallback: _propTypes["default"].func,
+    	  backgroundImageFn: _propTypes["default"].func,
+    	  "native": _propTypes["default"].bool,
+    	  forceSize: _propTypes["default"].bool,
+    	  tooltip: _propTypes["default"].bool,
+    	  useButton: _propTypes["default"].bool,
+    	  skin: _propTypes["default"].oneOf([1, 2, 3, 4, 5, 6]),
+    	  sheetSize: _propTypes["default"].oneOf([16, 20, 32, 64]),
+    	  sheetColumns: _propTypes["default"].number,
+    	  sheetRows: _propTypes["default"].number,
+    	  set: _propTypes["default"].oneOf(['apple', 'google', 'twitter', 'facebook']),
+    	  size: _propTypes["default"].number.isRequired,
+    	  emoji: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired
+    	};
+    	sharedProps.EmojiPropTypes = EmojiPropTypes;
+    	var PickerPropTypes = {
+    	  onClick: _propTypes["default"].func,
+    	  onSelect: _propTypes["default"].func,
+    	  onSkinChange: _propTypes["default"].func,
+    	  perLine: _propTypes["default"].number,
+    	  emojiSize: _propTypes["default"].number,
+    	  i18n: _propTypes["default"].object,
+    	  style: _propTypes["default"].object,
+    	  title: _propTypes["default"].string,
+    	  emoji: _propTypes["default"].string,
+    	  color: _propTypes["default"].string,
+    	  set: EmojiPropTypes.set,
+    	  skin: EmojiPropTypes.skin,
+    	  "native": _propTypes["default"].bool,
+    	  backgroundImageFn: EmojiPropTypes.backgroundImageFn,
+    	  sheetSize: EmojiPropTypes.sheetSize,
+    	  emojisToShowFilter: _propTypes["default"].func,
+    	  showPreview: _propTypes["default"].bool,
+    	  showSkinTones: _propTypes["default"].bool,
+    	  emojiTooltip: EmojiPropTypes.tooltip,
+    	  useButton: EmojiPropTypes.useButton,
+    	  theme: _propTypes["default"].oneOf(['auto', 'light', 'dark']),
+    	  include: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    	  exclude: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    	  recent: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    	  autoFocus: _propTypes["default"].bool,
+    	  enableFrequentEmojiSort: _propTypes["default"].bool,
+    	  custom: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    	    name: _propTypes["default"].string.isRequired,
+    	    short_names: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+    	    emoticons: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    	    keywords: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    	    imageUrl: _propTypes["default"].string,
+    	    spriteUrl: _propTypes["default"].string,
+    	    sheet_x: _propTypes["default"].number,
+    	    sheet_y: _propTypes["default"].number,
+    	    size: _propTypes["default"].number,
+    	    sheetColumns: _propTypes["default"].number,
+    	    sheetRows: _propTypes["default"].number
+    	  })),
+    	  skinEmoji: _propTypes["default"].string,
+    	  notFound: _propTypes["default"].func,
+    	  notFoundEmoji: _propTypes["default"].string,
+    	  icons: _propTypes["default"].object
+    	};
+    	sharedProps.PickerPropTypes = PickerPropTypes;
+    	return sharedProps;
+    }
+
     var anchors = {};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -51708,6 +51431,332 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     var category = {};
 
+    var nimbleEmoji = {};
+
+    var sharedDefaultProps = {};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    var hasRequiredSharedDefaultProps;
+
+    function requireSharedDefaultProps () {
+    	if (hasRequiredSharedDefaultProps) return sharedDefaultProps;
+    	hasRequiredSharedDefaultProps = 1;
+
+    	Object.defineProperty(sharedDefaultProps, "__esModule", {
+    	  value: true
+    	});
+    	sharedDefaultProps.EmojiDefaultProps = sharedDefaultProps.PickerDefaultProps = void 0;
+    	var EmojiDefaultProps = {
+    	  skin: 1,
+    	  set: 'apple',
+    	  sheetSize: 64,
+    	  sheetColumns: 57,
+    	  sheetRows: 57,
+    	  "native": false,
+    	  forceSize: false,
+    	  tooltip: false,
+    	  useButton: true,
+    	  backgroundImageFn: function backgroundImageFn(set, sheetSize) {
+    	    return "https://unpkg.com/emoji-datasource-".concat(set, "@").concat("5.0.1", "/img/").concat(set, "/sheets-256/").concat(sheetSize, ".png");
+    	  }
+    	};
+    	sharedDefaultProps.EmojiDefaultProps = EmojiDefaultProps;
+    	var PickerDefaultProps = {
+    	  onClick: function onClick() {},
+    	  onSelect: function onSelect() {},
+    	  onSkinChange: function onSkinChange() {},
+    	  emojiSize: 24,
+    	  perLine: 9,
+    	  i18n: {},
+    	  style: {},
+    	  title: 'Emoji Mart™',
+    	  emoji: 'department_store',
+    	  color: '#ae65c5',
+    	  set: EmojiDefaultProps.set,
+    	  theme: 'light',
+    	  skin: null,
+    	  defaultSkin: EmojiDefaultProps.skin,
+    	  "native": EmojiDefaultProps["native"],
+    	  sheetSize: EmojiDefaultProps.sheetSize,
+    	  backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
+    	  emojisToShowFilter: null,
+    	  showPreview: true,
+    	  showSkinTones: true,
+    	  emojiTooltip: EmojiDefaultProps.tooltip,
+    	  useButton: EmojiDefaultProps.useButton,
+    	  autoFocus: false,
+    	  enableFrequentEmojiSort: false,
+    	  custom: [],
+    	  skinEmoji: '',
+    	  notFound: function notFound() {},
+    	  notFoundEmoji: 'sleuth_or_spy',
+    	  icons: {}
+    	};
+    	sharedDefaultProps.PickerDefaultProps = PickerDefaultProps;
+    	return sharedDefaultProps;
+    }
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    var hasRequiredNimbleEmoji;
+
+    function requireNimbleEmoji () {
+    	if (hasRequiredNimbleEmoji) return nimbleEmoji;
+    	hasRequiredNimbleEmoji = 1;
+    	(function (exports) {
+
+    		var _interopRequireDefault = interopRequireDefault.exports;
+
+    		Object.defineProperty(exports, "__esModule", {
+    		  value: true
+    		});
+    		exports["default"] = void 0;
+
+    		var _extends2 = _interopRequireDefault(_extends$3.exports);
+
+    		var _defineProperty2 = _interopRequireDefault(defineProperty$1.exports);
+
+    		var _react = _interopRequireDefault(React__default["default"]);
+
+    		var _propTypes = _interopRequireDefault(requirePropTypes());
+
+    		var _utils = requireUtils();
+
+    		var _data = requireData();
+
+    		var _sharedProps = requireSharedProps();
+
+    		var _sharedDefaultProps = requireSharedDefaultProps();
+
+    		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+    		function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+    		var _getData = function _getData(props) {
+    		  var emoji = props.emoji,
+    		      skin = props.skin,
+    		      set = props.set,
+    		      data = props.data;
+    		  return (0, _utils.getData)(emoji, skin, set, data);
+    		};
+
+    		var _getPosition = function _getPosition(props) {
+    		  var _getData2 = _getData(props),
+    		      sheet_x = _getData2.sheet_x,
+    		      sheet_y = _getData2.sheet_y,
+    		      multiplyX = 100 / (props.sheetColumns - 1),
+    		      multiplyY = 100 / (props.sheetRows - 1);
+
+    		  return "".concat(multiplyX * sheet_x, "% ").concat(multiplyY * sheet_y, "%");
+    		};
+
+    		var _getSanitizedData = function _getSanitizedData(props) {
+    		  var emoji = props.emoji,
+    		      skin = props.skin,
+    		      set = props.set,
+    		      data = props.data;
+    		  return (0, _utils.getSanitizedData)(emoji, skin, set, data);
+    		};
+
+    		var _handleClick = function _handleClick(e, props) {
+    		  if (!props.onClick) {
+    		    return;
+    		  }
+
+    		  var onClick = props.onClick,
+    		      emoji = _getSanitizedData(props);
+
+    		  onClick(emoji, e);
+    		};
+
+    		var _handleOver = function _handleOver(e, props) {
+    		  if (!props.onOver) {
+    		    return;
+    		  }
+
+    		  var onOver = props.onOver,
+    		      emoji = _getSanitizedData(props);
+
+    		  onOver(emoji, e);
+    		};
+
+    		var _handleLeave = function _handleLeave(e, props) {
+    		  if (!props.onLeave) {
+    		    return;
+    		  }
+
+    		  var onLeave = props.onLeave,
+    		      emoji = _getSanitizedData(props);
+
+    		  onLeave(emoji, e);
+    		};
+
+    		var _isNumeric = function _isNumeric(value) {
+    		  return !isNaN(value - parseFloat(value));
+    		};
+
+    		var _convertStyleToCSS = function _convertStyleToCSS(style) {
+    		  var div = document.createElement('div');
+
+    		  for (var key in style) {
+    		    var value = style[key];
+
+    		    if (_isNumeric(value)) {
+    		      value += 'px';
+    		    }
+
+    		    div.style[key] = value;
+    		  }
+
+    		  return div.getAttribute('style');
+    		};
+
+    		var NimbleEmoji = function NimbleEmoji(props) {
+    		  if (props.data.compressed) {
+    		    (0, _data.uncompress)(props.data);
+    		  }
+
+    		  for (var k in NimbleEmoji.defaultProps) {
+    		    if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
+    		      props[k] = NimbleEmoji.defaultProps[k];
+    		    }
+    		  }
+
+    		  var data = _getData(props);
+
+    		  if (!data) {
+    		    if (props.fallback) {
+    		      return props.fallback(null, props);
+    		    } else {
+    		      return null;
+    		    }
+    		  }
+
+    		  var unified = data.unified,
+    		      custom = data.custom,
+    		      short_names = data.short_names,
+    		      imageUrl = data.imageUrl,
+    		      style = {},
+    		      children = props.children,
+    		      className = 'emoji-mart-emoji',
+    		      nativeEmoji = unified && (0, _utils.unifiedToNative)(unified),
+    		      label = [nativeEmoji].concat(short_names).filter(Boolean).join(', '),
+    		      title = null;
+
+    		  if (!unified && !custom) {
+    		    if (props.fallback) {
+    		      return props.fallback(data, props);
+    		    } else {
+    		      return null;
+    		    }
+    		  }
+
+    		  if (props.tooltip) {
+    		    title = short_names[0];
+    		  }
+
+    		  if (props["native"] && unified) {
+    		    className += ' emoji-mart-emoji-native';
+    		    style = {
+    		      fontSize: props.size
+    		    };
+    		    children = nativeEmoji;
+
+    		    if (props.forceSize) {
+    		      style.display = 'inline-block';
+    		      style.width = props.size;
+    		      style.height = props.size;
+    		      style.wordBreak = 'keep-all';
+    		    }
+    		  } else if (custom) {
+    		    className += ' emoji-mart-emoji-custom';
+    		    style = {
+    		      width: props.size,
+    		      height: props.size,
+    		      display: 'inline-block'
+    		    };
+
+    		    if (data.spriteUrl) {
+    		      style = _objectSpread({}, style, {
+    		        backgroundImage: "url(".concat(data.spriteUrl, ")"),
+    		        backgroundSize: "".concat(100 * props.sheetColumns, "% ").concat(100 * props.sheetRows, "%"),
+    		        backgroundPosition: _getPosition(props)
+    		      });
+    		    } else {
+    		      style = _objectSpread({}, style, {
+    		        backgroundImage: "url(".concat(imageUrl, ")"),
+    		        backgroundSize: 'contain',
+    		        backgroundRepeat: 'no-repeat',
+    		        backgroundPosition: 'center'
+    		      });
+    		    }
+    		  } else {
+    		    var setHasEmoji = data["has_img_".concat(props.set)] == undefined || data["has_img_".concat(props.set)];
+
+    		    if (!setHasEmoji) {
+    		      if (props.fallback) {
+    		        return props.fallback(data, props);
+    		      } else {
+    		        return null;
+    		      }
+    		    } else {
+    		      style = {
+    		        width: props.size,
+    		        height: props.size,
+    		        display: 'inline-block',
+    		        backgroundImage: "url(".concat(props.backgroundImageFn(props.set, props.sheetSize), ")"),
+    		        backgroundSize: "".concat(100 * props.sheetColumns, "% ").concat(100 * props.sheetRows, "%"),
+    		        backgroundPosition: _getPosition(props)
+    		      };
+    		    }
+    		  }
+
+    		  var Tag = {
+    		    name: 'span',
+    		    props: {}
+    		  };
+
+    		  if (props.onClick && props.useButton) {
+    		    Tag.name = 'button';
+    		    Tag.props = {
+    		      type: 'button'
+    		    };
+    		  }
+
+    		  if (props.html) {
+    		    style = _convertStyleToCSS(style);
+    		    return "<".concat(Tag.name, " style='").concat(style, "' aria-label='").concat(label, "' ").concat(title ? "title='".concat(title, "'") : '', " class='").concat(className, "'>").concat(children || '', "</").concat(Tag.name, ">");
+    		  } else {
+    		    return _react["default"].createElement(Tag.name, (0, _extends2["default"])({
+    		      onClick: function onClick(e) {
+    		        return _handleClick(e, props);
+    		      },
+    		      onMouseEnter: function onMouseEnter(e) {
+    		        return _handleOver(e, props);
+    		      },
+    		      onMouseLeave: function onMouseLeave(e) {
+    		        return _handleLeave(e, props);
+    		      },
+    		      "aria-label": label,
+    		      title: title,
+    		      className: className
+    		    }, Tag.props), _react["default"].createElement("span", {
+    		      style: style
+    		    }, children));
+    		  }
+    		};
+
+    		NimbleEmoji.propTypes
+    		/* remove-proptypes */
+    		= _objectSpread({}, _sharedProps.EmojiPropTypes, {
+    		  data: _propTypes["default"].object.isRequired
+    		});
+    		NimbleEmoji.defaultProps = _sharedDefaultProps.EmojiDefaultProps;
+    		var _default = NimbleEmoji;
+    		exports["default"] = _default;
+    } (nimbleEmoji));
+    	return nimbleEmoji;
+    }
+
     var notFound = {};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -51741,7 +51790,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     		var _propTypes = _interopRequireDefault(requirePropTypes());
 
-    		var _nimbleEmoji = _interopRequireDefault(nimbleEmoji$1);
+    		var _nimbleEmoji = _interopRequireDefault(requireNimbleEmoji());
 
     		function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -51835,7 +51884,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     		var _utils = requireUtils();
 
-    		var _nimbleEmoji = _interopRequireDefault(nimbleEmoji$1);
+    		var _nimbleEmoji = _interopRequireDefault(requireNimbleEmoji());
 
     		var _notFound = _interopRequireDefault(requireNotFound());
 
@@ -52229,7 +52278,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     		var _propTypes = _interopRequireDefault(requirePropTypes());
 
-    		var _nimbleEmoji = _interopRequireDefault(nimbleEmoji$1);
+    		var _nimbleEmoji = _interopRequireDefault(requireNimbleEmoji());
 
     		var _skins = _interopRequireDefault(requireSkins());
 
@@ -52466,7 +52515,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     		var _utils = requireUtils();
 
-    		var _nimbleEmoji = _interopRequireDefault(nimbleEmoji$1);
+    		var _nimbleEmoji = _interopRequireDefault(requireNimbleEmoji());
 
     		var _skinsEmoji = _interopRequireDefault(requireSkinsEmoji());
 
@@ -76619,7 +76668,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       }, error);
     };
 
-    var Image = function Image(_ref) {
+    var Image$1 = function Image(_ref) {
       var src = _ref.src,
           _ref$alt = _ref.alt,
           alt = _ref$alt === void 0 ? '' : _ref$alt,
@@ -77267,7 +77316,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         }));
       },
       image: function image(tag) {
-        return React__default["default"].createElement(Image, Object.assign({}, tag.attributes, {
+        return React__default["default"].createElement(Image$1, Object.assign({}, tag.attributes, {
           key: tag.key,
           src: tag.attributes.src
         }));
@@ -77563,7 +77612,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         Col: Col,
         Error: Error$1,
         Icon: Icon,
-        Image: Image,
+        Image: Image$1,
         Input: Input,
         Loading: Loading,
         MD: MD,
@@ -77705,6 +77754,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     exports.SendIconV1 = SendIconV1;
     exports.SendIconV2 = SendIconV2;
     exports.SimpleReactionsList = SimpleReactionsList;
+    exports.SpriteImage = SpriteImage;
+    exports.StreamEmoji = StreamEmoji;
     exports.Streami18n = Streami18n;
     exports.Thread = Thread;
     exports.ThreadHeader = ThreadHeader;
@@ -77731,6 +77782,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     exports.deTranslations = deTranslations;
     exports.defaultDateTimeParser = defaultDateTimeParser;
     exports.defaultPinPermissions = defaultPinPermissions;
+    exports.defaultReactionOptions = defaultReactionOptions;
     exports.defaultScrollToItem = defaultScrollToItem;
     exports.defaultTimestampFormat = defaultTimestampFormat;
     exports.defaultTranslatorFunction = defaultTranslatorFunction;