@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/chunks/{bundle-C21OJi5Y.js → bundle-Co8lVUvq.js}

@@ -13,4 +13,4 @@ function compareIds(a, b) {
 }
 
 exports.compareIds = compareIds;
-//# sourceMappingURL=bundle-C21OJi5Y.js.map
+//# sourceMappingURL=bundle-Co8lVUvq.js.map

package/cjs/chunks/bundle-Co8lVUvq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Co8lVUvq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-Cq7gxYWj.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var _tslib = require('./bundle-BSZgogl8.js');
+var React = require('react');
+var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var pxToNumber = require('./bundle-CGBazQAC.js');
+var ui_Icon = require('../ui/Icon.js');
+var utils = require('./bundle-BsUVmQmx.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var AvatarDefault = function (props) {
+    var width = props.width, height = props.height, text = props.text;
+    var iconWidth = pxToNumber.pxToNumber(width);
+    var iconHeight = pxToNumber.pxToNumber(height);
+    if (typeof iconWidth === 'number' && !Number.isNaN(iconWidth)) {
+        iconWidth *= 0.575;
+    }
+    if (typeof iconHeight === 'number' && !Number.isNaN(iconHeight)) {
+        iconHeight *= 0.575;
+    }
+    return (React__default.default.createElement("div", { className: utils.classnames('sendbird-avatar-img--default', text && 'text'), style: { width: width, height: height } }, text
+        ? React__default.default.createElement("div", { className: 'sendbird-avatar-text' }, text)
+        : React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.USER, fillColor: ui_Icon.IconColors.CONTENT, width: iconWidth, height: iconHeight })));
+};
+
+var imageRendererClassName = 'sendbird-avatar-img';
+var AvatarInner = function (_a) {
+    var _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.alt, alt = _c === void 0 ? '' : _c, height = _a.height, width = _a.width, customDefaultComponent = _a.customDefaultComponent;
+    var defaultComponent = function () { return customDefaultComponent
+        ? customDefaultComponent({ width: width, height: height })
+        : React__default.default.createElement(AvatarDefault, { width: width, height: height }); };
+    if (typeof src === 'string') {
+        return (React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src, height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+    }
+    if (src && src.length) {
+        if (src.length === 1) {
+            return (React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+        }
+        if (src.length === 2) {
+            return (React__default.default.createElement("div", { className: "sendbird-avatar--inner__two-child" },
+                React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
+                React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent })));
+        }
+        if (src.length === 3) {
+            return (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement("div", { className: "sendbird-avatar--inner__three-child--upper" },
+                    React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[0], height: height, width: width, alt: alt, defaultComponent: defaultComponent })),
+                React__default.default.createElement("div", { className: "sendbird-avatar--inner__three-child--lower" },
+                    React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[1], height: height, width: width, alt: alt, defaultComponent: defaultComponent }),
+                    React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src[2], height: height, width: width, alt: alt, defaultComponent: defaultComponent }))));
+        }
+        return (React__default.default.createElement("div", { className: "sendbird-avatar--inner__four-child" }, src.slice(0, 4)
+            .map(function (url, index) { return (React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: url, height: height, width: width, alt: alt, key: "".concat(url, "-").concat(index), defaultComponent: defaultComponent })); })));
+    }
+    // default img
+    return (React__default.default.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: "", height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
+};
+function Avatar(_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '' : _h, _j = _a.bottom, bottom = _j === void 0 ? '' : _j, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
+    return (React__default.default.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-avatar',
+        ], false).join(' '), role: "button", ref: ref, style: {
+            height: height,
+            width: width,
+            zIndex: zIndex,
+            left: left,
+            bottom: bottom,
+        }, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
+        React__default.default.createElement(AvatarInner, { src: src, width: width, height: height, alt: alt, customDefaultComponent: customDefaultComponent })));
+}
+var Avatar$1 = React__default.default.forwardRef(Avatar);
+
+exports.Avatar = Avatar$1;
+exports.AvatarDefault = AvatarDefault;
+exports.AvatarInner = AvatarInner;
+//# sourceMappingURL=bundle-Cq7gxYWj.js.map

package/cjs/chunks/bundle-Cq7gxYWj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Cq7gxYWj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CrkUdg03.js → bundle-CqS517qU.js}

@@ -237,4 +237,4 @@ var getStringSet = function (lang) {
 };
 
 exports.getStringSet = getStringSet;
-//# sourceMappingURL=bundle-CrkUdg03.js.map
+//# sourceMappingURL=bundle-CqS517qU.js.map

package/cjs/chunks/{bundle-CrkUdg03.js.map → bundle-CqS517qU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-CrkUdg03.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-CqS517qU.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BHieBSdL.js → bundle-CteyVr3n.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 var React = require('react');
-var MediaQueryContext = require('./bundle-D0U-xAFE.js');
+var MediaQueryContext = require('./bundle-DW5WyVEg.js');
 
 var DEFAULT_DURATION = 300;
 function preventDefault(e) {
@@ -76,4 +76,4 @@ function useLongPress(_a, _b) {
 }
 
 exports.useLongPress = useLongPress;
-//# sourceMappingURL=bundle-BHieBSdL.js.map
+//# sourceMappingURL=bundle-CteyVr3n.js.map

package/cjs/chunks/bundle-CteyVr3n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CteyVr3n.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-CuQr5jRg.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+
+/* global MutationCallback */
+/* global MutationObserverInit */
+// To prevent Undefined lint errors: https://github.com/standard/standard/issues/1159#issuecomment-403003627
+function useElementObserver(selector, targetElement) {
+    var _a = React.useState(false), isElementMounted = _a[0], setIsElementMounted = _a[1];
+    React.useEffect(function () {
+        var targetElements = Array.isArray(targetElement) ? targetElement : [targetElement];
+        var updateElementState = function () {
+            var _a;
+            var elements = targetElements === null || targetElements === void 0 ? void 0 : targetElements.map(function (target) { return target === null || target === void 0 ? void 0 : target.querySelector(selector); });
+            setIsElementMounted((_a = elements === null || elements === void 0 ? void 0 : elements.some(function (element) { return !!element; })) !== null && _a !== void 0 ? _a : false);
+        };
+        updateElementState();
+        var observerCallback = function (mutations) {
+            mutations.forEach(function (mutation) {
+                if (mutation.addedNodes.length || mutation.removedNodes.length) {
+                    Array.from(mutation.addedNodes).forEach(function (node) {
+                        if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) {
+                            setIsElementMounted(true);
+                        }
+                    });
+                    Array.from(mutation.removedNodes).forEach(function (node) {
+                        if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) {
+                            setIsElementMounted(false);
+                        }
+                    });
+                }
+            });
+        };
+        var observer = new MutationObserver(observerCallback);
+        var observerOptions = {
+            childList: true, // Observe addition and removal of child nodes
+            subtree: true, // Observe the entire subtree
+        };
+        targetElements === null || targetElements === void 0 ? void 0 : targetElements.forEach(function (target) {
+            if (target)
+                observer.observe(target, observerOptions);
+        });
+        return function () {
+            observer.disconnect();
+        };
+    }, [selector, targetElement]);
+    return isElementMounted;
+}
+
+exports.useElementObserver = useElementObserver;
+//# sourceMappingURL=bundle-CuQr5jRg.js.map

package/cjs/chunks/bundle-CuQr5jRg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CuQr5jRg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BKID5CS2.js → bundle-CwwjS2wm.js}

@@ -3,4 +3,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 exports.OG_MESSAGE_BODY_CLASSNAME = OG_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=bundle-BKID5CS2.js.map
+//# sourceMappingURL=bundle-CwwjS2wm.js.map

package/cjs/chunks/bundle-CwwjS2wm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-CwwjS2wm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/chunks/{bundle-BKe7hLI0.js → bundle-Cy0nPHcx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ui_Label = require('./bundle-BM95N32D.js');
+var ui_Label = require('./bundle-CLsH2CaE.js');
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -24,4 +24,4 @@ var getChannelTitle = function (channel, currentUserId, stringSet) {
 };
 
 exports.getChannelTitle = getChannelTitle;
-//# sourceMappingURL=bundle-BKe7hLI0.js.map
+//# sourceMappingURL=bundle-Cy0nPHcx.js.map

package/cjs/chunks/bundle-Cy0nPHcx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Cy0nPHcx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CqDaqTbt.js → bundle-D1D4kiAc.js}

@@ -8,4 +8,4 @@ var Role = {
 };
 
 exports.Role = Role;
-//# sourceMappingURL=bundle-CqDaqTbt.js.map
+//# sourceMappingURL=bundle-D1D4kiAc.js.map

package/cjs/chunks/bundle-D1D4kiAc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-D1D4kiAc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/cjs/chunks/{bundle-DoSN8wR4.js → bundle-D2E4FfSM.js}

@@ -1,19 +1,23 @@
 'use strict';
 
 var React = require('react');
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 var message = require('@sendbird/chat/message');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_ImageRenderer = require('../ui/ImageRenderer.js');
-var index = require('./bundle-VyDwmxN4.js');
+var index = require('./bundle-E1Tkj9Pc.js');
 var ui_FileViewer = require('../ui/FileViewer.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 function ImageGrid(_a) {
     var _b;
     var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
-    return (React.createElement("div", { className: 'sendbird-image-grid-wrap' },
-        React.createElement("div", { className: index.getClassName([
+    return (React__default.default.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React__default.default.createElement("div", { className: index.getClassName([
                 className !== null && className !== void 0 ? className : '',
                 'sendbird-image-grid',
                 (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
@@ -70,8 +74,8 @@ function MultipleFilesMessageItemBody(_a) {
     function onClickRight() {
         setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
     }
-    return (threadMessageKindKey ? (React.createElement(React.Fragment, null,
-        currentFileViewerIndex > -1 && (React.createElement(ui_FileViewer.default, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+    return (threadMessageKindKey ? (React__default.default.createElement(React__default.default.Fragment, null,
+        currentFileViewerIndex > -1 && (React__default.default.createElement(ui_FileViewer.default, { message: message$1, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose, onDownloadClick: function (e) { return _tslib.__awaiter(_this, void 0, void 0, function () {
                 var allowDownload, err_1;
                 var _a, _b;
                 return _tslib.__generator(this, function (_c) {
@@ -98,31 +102,31 @@ function MultipleFilesMessageItemBody(_a) {
                     }
                 });
             }); } })),
-        React.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
+        React__default.default.createElement(ImageGrid, { className: className, message: message$1, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index$1) {
             var _a, _b, _c, _d;
-            return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
-                React.createElement(ui_ImageRenderer.default, { url: (_d = (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url) !== null && _d !== void 0 ? _d : '', fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
+            return (React__default.default.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message$1.sendingStatus === message.SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index$1); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index$1, "-").concat(fileInfo.url) },
+                React__default.default.createElement(ui_ImageRenderer.default, { url: (_d = (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url) !== null && _d !== void 0 ? _d : '', fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: ui_ImageRenderer.getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index$1, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
                         var style = _a.style;
                         if (fileInfo.mimeType && index.isGif(fileInfo.mimeType))
-                            return React.createElement(ImagePlaceholder.GIF, { style: style });
-                        return React.createElement(ImagePlaceholder.Default, { style: style });
-                    }, defaultComponent: React.createElement(ImagePlaceholder.LoadError, null) })));
-        })))) : React.createElement(React.Fragment, null));
+                            return React__default.default.createElement(ImagePlaceholder.GIF, { style: style });
+                        return React__default.default.createElement(ImagePlaceholder.Default, { style: style });
+                    }, defaultComponent: React__default.default.createElement(ImagePlaceholder.LoadError, null) })));
+        })))) : React__default.default.createElement(React__default.default.Fragment, null));
 }
 var ImagePlaceholder = {
     Default: function (_a) {
         var style = _a.style;
-        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
+        return (React__default.default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
     },
     GIF: function (_a) {
         var style = _a.style;
-        return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
-            React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
+        return (React__default.default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React__default.default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
     },
-    LoadError: function () { return (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
-        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
+    LoadError: function () { return (React__default.default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
+        React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
 };
 
 function useThreadMessageKindKeySelector(_a) {
@@ -183,4 +187,4 @@ exports.MultipleFilesMessageItemBody = MultipleFilesMessageItemBody;
 exports.ThreadMessageKind = ThreadMessageKind;
 exports.useFileInfoListWithUploaded = useFileInfoListWithUploaded;
 exports.useThreadMessageKindKeySelector = useThreadMessageKindKeySelector;
-//# sourceMappingURL=bundle-DoSN8wR4.js.map
+//# sourceMappingURL=bundle-D2E4FfSM.js.map

package/cjs/chunks/bundle-D2E4FfSM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-D2E4FfSM.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle--1XlzjL_.js → bundle-D3jgqkKs.js}

@@ -1,9 +1,13 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('./bundle-CI9mjpa7.js');
+var pubSub_topics = require('./bundle-B8eM_7mB.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var _tslib = require('./bundle-BSZgogl8.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 exports.OpenChannelListFetchingStatus = void 0;
 (function (OpenChannelListFetchingStatus) {
@@ -253,7 +257,7 @@ function useRefreshOpenChannelList(_a, _b) {
     }, [sdkInitialized, openChannelListQuery]);
 }
 
-var OpenChannelListContext = React.createContext(null);
+var OpenChannelListContext = React__default.default.createContext(null);
 function useOpenChannelListContext() {
     var context = React.useContext(OpenChannelListContext);
     if (!context)
@@ -311,7 +315,7 @@ var OpenChannelListProvider = function (_a) {
         logger: logger,
         openChannelListDispatcher: openChannelListDispatcher,
     });
-    return (React.createElement(OpenChannelListContext.Provider, { value: {
+    return (React__default.default.createElement(OpenChannelListContext.Provider, { value: {
             // props
             onChannelSelected: onChannelSelected,
             customOpenChannelListQuery: customOpenChannelListQuery,
@@ -324,7 +328,7 @@ var OpenChannelListProvider = function (_a) {
             refreshOpenChannelList: refreshOpenChannelList,
             openChannelListDispatcher: openChannelListDispatcher,
         } },
-        React.createElement("div", { className: "sendbird-open-channel-list ".concat(className) }, children)));
+        React__default.default.createElement("div", { className: "sendbird-open-channel-list ".concat(className) }, children)));
 };
 var OpenChannelListProvider$1 = {
     OpenChannelListProvider: OpenChannelListProvider,
@@ -335,4 +339,4 @@ exports.OpenChannelListActionTypes = OpenChannelListActionTypes$1;
 exports.OpenChannelListProvider = OpenChannelListProvider;
 exports.OpenChannelListProvider$1 = OpenChannelListProvider$1;
 exports.useOpenChannelListContext = useOpenChannelListContext;
-//# sourceMappingURL=bundle--1XlzjL_.js.map
+//# sourceMappingURL=bundle-D3jgqkKs.js.map

package/cjs/chunks/{bundle--1XlzjL_.js.map → bundle-D3jgqkKs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle--1XlzjL_.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-D3jgqkKs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-rXt3MgU-.js → bundle-D58niGxd.js}

@@ -1,12 +1,16 @@
 'use strict';
 
 var React = require('react');
-var index = require('./bundle-VyDwmxN4.js');
-var tokenize = require('./bundle-auAyIyjy.js');
+var index = require('./bundle-E1Tkj9Pc.js');
+var tokenize = require('./bundle-B0yVr4jS.js');
 var Message_context = require('../Message/context.js');
 var ui_MentionLabel = require('../ui/MentionLabel.js');
 var ui_LinkLabel = require('../ui/LinkLabel.js');
-var ui_Label = require('./bundle-BM95N32D.js');
+var ui_Label = require('./bundle-CLsH2CaE.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 // this function is used to generate a unique key for token in message
 // it changes with updated time and index
@@ -40,32 +44,32 @@ function TextFragment(_a) {
     var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
     var isByMe = messageStore === null || messageStore === void 0 ? void 0 : messageStore.isByMe;
     var updatedAt = message.updatedAt, createdAt = message.createdAt;
-    return (React.createElement(React.Fragment, null, tokens === null || tokens === void 0 ? void 0 : tokens.map(function (token, idx) {
+    return (React__default.default.createElement(React__default.default.Fragment, null, tokens === null || tokens === void 0 ? void 0 : tokens.map(function (token, idx) {
         var key = keyGenerator(createdAt, updatedAt, idx);
         return index.K(token.type)
             .with(tokenize.TOKEN_TYPES.markdown, function () {
             var markdownToken = token;
             var groups = markdownToken.groups;
-            return React.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" }, index.K(markdownToken.markdownType)
-                .with('bold', function () { return (React.createElement("span", { style: { fontWeight: 'bold' } },
-                React.createElement(TextFragment, { tokens: tokenize.tokenizeMarkdown({ messageText: groups[1] }) }))); })
+            return React__default.default.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" }, index.K(markdownToken.markdownType)
+                .with('bold', function () { return (React__default.default.createElement("span", { style: { fontWeight: 'bold' } },
+                React__default.default.createElement(TextFragment, { tokens: tokenize.tokenizeMarkdown({ messageText: groups[1] }) }))); })
                 .with('url', function () {
-                return (React.createElement("a", { className: isByMe
+                return (React__default.default.createElement("a", { className: isByMe
                         ? 'sendbird-label--color-oncontent-1'
                         : 'sendbird-label--color-onbackground-1', href: asSafeURL(groups[2]) },
-                    React.createElement(TextFragment, { tokens: tokenize.tokenizeMarkdown({ messageText: groups[1] }) })));
+                    React__default.default.createElement(TextFragment, { tokens: tokenize.tokenizeMarkdown({ messageText: groups[1] }) })));
             })
-                .otherwise(function () { return React.createElement(React.Fragment, null); }));
+                .otherwise(function () { return React__default.default.createElement(React__default.default.Fragment, null); }));
         })
-            .with(tokenize.TOKEN_TYPES.mention, function () { return (React.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" },
-            React.createElement(ui_MentionLabel, { mentionTemplate: tokenize.USER_MENTION_PREFIX, 
+            .with(tokenize.TOKEN_TYPES.mention, function () { return (React__default.default.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" },
+            React__default.default.createElement(ui_MentionLabel, { mentionTemplate: tokenize.USER_MENTION_PREFIX, 
                 // @ts-ignore
                 mentionedUserId: token.userId, mentionedUserNickname: token.value, isByMe: isByMe }))); })
-            .with(tokenize.TOKEN_TYPES.url, function () { return (React.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" },
-            React.createElement(ui_LinkLabel.default, { src: token.value, type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, token.value))); })
-            .otherwise(function () { return React.createElement(React.Fragment, { key: key }, tokenize.getWhiteSpacePreservedText(token.value)); });
+            .with(tokenize.TOKEN_TYPES.url, function () { return (React__default.default.createElement("span", { className: "sendbird-word", key: key, "data-testid": "sendbird-ui-word" },
+            React__default.default.createElement(ui_LinkLabel.default, { src: token.value, type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, token.value))); })
+            .otherwise(function () { return React__default.default.createElement(React__default.default.Fragment, { key: key }, tokenize.getWhiteSpacePreservedText(token.value)); });
     })));
 }
 
 exports.TextFragment = TextFragment;
-//# sourceMappingURL=bundle-rXt3MgU-.js.map
+//# sourceMappingURL=bundle-D58niGxd.js.map

package/cjs/chunks/bundle-D58niGxd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-D58niGxd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-CCm3PIiM.js → bundle-D8QV4Pzq.js}

@@ -81,4 +81,4 @@ exports.SET_CHANNEL_INVALID = SET_CHANNEL_INVALID;
 exports.SET_CURRENT_CHANNEL = SET_CURRENT_CHANNEL;
 exports.SET_EMOJI_CONTAINER = SET_EMOJI_CONTAINER;
 exports.channelActions = channelActions;
-//# sourceMappingURL=bundle-CCm3PIiM.js.map
+//# sourceMappingURL=bundle-D8QV4Pzq.js.map

package/cjs/chunks/bundle-D8QV4Pzq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-D8QV4Pzq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-BkKs2HEQ.js → bundle-DAzWBBxC.js}

@@ -12,4 +12,4 @@ var uuidv4 = function () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace
 }); };
 
 exports.uuidv4 = uuidv4;
-//# sourceMappingURL=bundle-BkKs2HEQ.js.map
+//# sourceMappingURL=bundle-DAzWBBxC.js.map

package/cjs/chunks/bundle-DAzWBBxC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-DAzWBBxC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-DAJdesda.js → bundle-DBvrEPDQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-_xb0mhf9.js');
+var index = require('./bundle-C6bh_Eny.js');
 
 /**
  * @name startOfDay
@@ -63,4 +63,4 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) {
 }
 
 exports.isSameDay = isSameDay;
-//# sourceMappingURL=bundle-DAJdesda.js.map
+//# sourceMappingURL=bundle-DBvrEPDQ.js.map

package/cjs/chunks/{bundle-DAJdesda.js.map → bundle-DBvrEPDQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-DAJdesda.js","sources":["../../../node_modules/date-fns/esm/startOfDay/index.js","../../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":["requiredArgs","toDate"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAED,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}
+{"version":3,"file":"bundle-DBvrEPDQ.js","sources":["../../../node_modules/date-fns/esm/startOfDay/index.js","../../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":["requiredArgs","toDate"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAED,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}