@sendbird/uikit-react 3.14.0-beta → 3.14.0-beta.2

package/cjs/ui/Carousel.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var MediaQueryContext = require('../chunks/bundle-DhbE_hFO.js');
 
 var PADDING_WIDTH = 24;
 var CONTENT_LEFT_WIDTH = 40;
-var SWIPE_THRESHOLD = 30;
+var SWIPE_THRESHOLD = 15;
 var LAST_ITEM_RIGHT_SNAP_THRESHOLD = 100;
 /**
  * fixed sized template items should use its child width.
@@ -19,13 +19,12 @@ function shouldRenderAsFixed(item) {
     return ((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed';
 }
 function CarouselItem(_a) {
-    var key = _a.key, item = _a.item, defaultWidth = _a.defaultWidth;
-    return React.createElement("div", { key: key, style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
+    var item = _a.item, defaultWidth = _a.defaultWidth;
+    return React.createElement("div", { style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
 }
-function Carousel(_a) {
+var Carousel = React.memo(function (_a) {
     var _b, _c;
-    var id = _a.id, items = _a.items, _d = _a.gap, gap = _d === void 0 ? 8 : _d;
-    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var id = _a.id, items = _a.items, _d = _a.gap, gap = _d === void 0 ? 8 : _d, _e = _a.classNameWithTouchAction, classNameWithTouchAction = _e === void 0 ? 'sendbird-conversation__messages-padding' : _e;
     var carouselRef = React.useRef(null);
     var screenWidth = window.innerWidth;
     var defaultItemWidth = (_c = (_b = carouselRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
@@ -41,130 +40,193 @@ function Carousel(_a) {
     var isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
     var isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
     var itemPositions = getEachItemPositions();
-    var _e = React.useState(0), currentIndex = _e[0], setCurrentIndex = _e[1];
-    var _f = React.useState(null), dragging = _f[0], setDragging = _f[1];
-    var _g = React.useState(0), startX = _g[0], setStartX = _g[1];
-    var _h = React.useState(0), offset = _h[0], setOffset = _h[1];
-    var _j = React.useState(0), translateX = _j[0], setTranslateX = _j[1];
+    var _f = React.useState({
+        scrolling: false,
+        dragging: false,
+        startPos: null,
+        offset: 0,
+        translateX: 0,
+        currentIndex: 0,
+    }), draggingInfo = _f[0], setDraggingInfo = _f[1];
     var handleMouseDown = function (event) {
-        event.preventDefault();
-        setDragging('horizontal');
-        setStartX(event.clientX);
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: false, dragging: true, startPos: {
+                x: event.clientX,
+                y: event.clientY,
+            }, offset: 0 }));
     };
     var handleMouseMove = function (event) {
-        if (!dragging)
+        if (!draggingInfo.dragging)
             return;
         var currentX = event.clientX;
-        var newOffset = currentX - startX;
-        setOffset(newOffset);
+        var newOffset = currentX - draggingInfo.startPos.x;
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { offset: newOffset }));
     };
     var handleMouseUp = function () {
-        if (!dragging)
+        if (!draggingInfo.dragging)
             return;
-        setDragging(null);
-        onDragEnd();
+        handleDragEnd();
+    };
+    var blockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-x';
+        }
+    };
+    var unblockScroll = function () {
+        var parentElements = document.getElementsByClassName(classNameWithTouchAction);
+        var parentElement = parentElements[0];
+        if (parentElement) {
+            parentElement.style.touchAction = 'pan-y';
+        }
     };
     var handleTouchStart = function (event) {
-        setStartX(event.touches[0].clientX);
+        setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: false, dragging: false, startPos: {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            }, offset: 0 }));
     };
+    React.useEffect(function () {
+        if (draggingInfo.scrolling) {
+            unblockScroll();
+        }
+    }, [draggingInfo.scrolling]);
     var handleTouchMove = function (event) {
-        if (!startX)
+        if (!draggingInfo.startPos || draggingInfo.scrolling)
             return;
+        var startPos = draggingInfo.startPos;
         var touchMoveX = event.touches[0].clientX;
-        var deltaX = Math.abs(touchMoveX - startX);
-        var deltaY = Math.abs(event.touches[0].clientY - event.touches[event.touches.length - 1].clientY);
-        var threshold = 5;
-        if (dragging === 'horizontal' || (dragging !== 'vertical' && deltaX > deltaY + threshold)) {
-            var parentElement = document.getElementsByClassName('sendbird-conversation__messages-padding');
-            parentElement[0].style.overflowY = 'hidden';
-            if (dragging !== 'horizontal')
-                setDragging('horizontal');
-            var newOffset = event.touches[0].clientX - startX;
-            if (newOffset !== offset)
-                setOffset(newOffset);
-        }
-        else if (dragging !== 'vertical')
-            setDragging('vertical');
-    };
-    var handleTouchEnd = function () {
-        if (dragging !== null) {
-            setDragging(null);
+        var touchMoveY = event.touches[0].clientY;
+        var deltaX = Math.abs(touchMoveX - startPos.x);
+        var deltaY = Math.abs(touchMoveY - startPos.y);
+        var newOffset = touchMoveX - startPos.x;
+        if (newOffset === draggingInfo.offset)
+            return;
+        if (draggingInfo.dragging) {
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { offset: newOffset }));
+            return;
+        }
+        if (deltaY > deltaX) {
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { scrolling: true }));
         }
-        onDragEnd();
+        else {
+            blockScroll();
+            setDraggingInfo(_tslib.__assign(_tslib.__assign({}, draggingInfo), { dragging: true, offset: newOffset }));
+        }
+    };
+    var getNewDraggingInfo = function (props) {
+        if (props === void 0) { props = {}; }
+        var newTranslateX = props.newTranslateX, nextIndex = props.nextIndex;
+        var translateX = draggingInfo.translateX, currentIndex = draggingInfo.currentIndex;
+        return {
+            scrolling: false,
+            dragging: false,
+            startPos: null,
+            offset: 0,
+            translateX: newTranslateX !== null && newTranslateX !== void 0 ? newTranslateX : translateX,
+            currentIndex: nextIndex !== null && nextIndex !== void 0 ? nextIndex : currentIndex,
+        };
     };
     var handleDragEnd = function () {
+        var offset = draggingInfo.offset;
         var absOffset = Math.abs(offset);
-        if (absOffset >= SWIPE_THRESHOLD) {
-            // If dragged to left, next index should be to the right
-            if (offset < 0 && currentIndex < items.length - 1) {
-                var nextIndex = currentIndex + 1;
-                setTranslateX(itemPositions[nextIndex].start);
-                setCurrentIndex(nextIndex);
-                // If dragged to right, next index should be to the left
-            }
-            else if (offset > 0 && currentIndex > 0) {
-                var nextIndex = currentIndex - 1;
-                setTranslateX(itemPositions[nextIndex].start);
-                setCurrentIndex(nextIndex);
-            }
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        var currentIndex = draggingInfo.currentIndex;
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
         }
-        setOffset(0);
     };
-    var handleDragEndForMobile = function () {
+    var handleTouchEnd = function () {
+        var offset = draggingInfo.offset, currentIndex = draggingInfo.currentIndex;
         var absOffset = Math.abs(offset);
-        if (absOffset >= SWIPE_THRESHOLD) {
-            // If dragged to left, next index should be to the right
-            if (offset < 0 && currentIndex < items.length - 1) {
-                var nextIndex = currentIndex + 1;
-                /**
-                 * This is special logic for "더 보기" button for Socar use-case.
-                 * The button will have a small width (less than 50px).
-                 * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
-                 */
-                if (isLastItemNarrow) {
-                    if (isLastTwoItemsFitScreen) {
-                        if (nextIndex !== items.length - 1) {
-                            setTranslateX(itemPositions[nextIndex].start);
-                            setCurrentIndex(nextIndex);
-                        }
-                    }
-                    else if (nextIndex !== items.length - 1) {
-                        setTranslateX(itemPositions[nextIndex].start);
-                        setCurrentIndex(nextIndex);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        if (offset < 0 && currentIndex < items.length - 1) {
+            var nextIndex = currentIndex + 1;
+            /**
+             * This is special logic for "더 보기" button for Socar use-case.
+             * The button will have a small width (less than 50px).
+             * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
+             */
+            if (isLastItemNarrow) {
+                if (isLastTwoItemsFitScreen) {
+                    if (nextIndex !== items.length - 1) {
+                        setDraggingInfo(getNewDraggingInfo({
+                            newTranslateX: itemPositions[nextIndex].start,
+                            nextIndex: nextIndex,
+                        }));
                     }
                     else {
-                        var translateWidth = itemPositions[nextIndex].start - lastItemWidth;
-                        var rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
-                        setTranslateX(translateWidth + rightEmptyWidth);
-                        setCurrentIndex(nextIndex);
+                        setDraggingInfo(getNewDraggingInfo());
                     }
                 }
+                else if (nextIndex !== items.length - 1) {
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: itemPositions[nextIndex].start,
+                        nextIndex: nextIndex,
+                    }));
+                }
                 else {
-                    setTranslateX(itemPositions[nextIndex].start);
-                    setCurrentIndex(nextIndex);
+                    var translateWidth = itemPositions[nextIndex].start - lastItemWidth;
+                    var rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: translateWidth + rightEmptyWidth,
+                        nextIndex: nextIndex,
+                    }));
                 }
-                // If dragged to right, next index should be to the left
             }
-            else if (offset > 0 && currentIndex > 0) {
-                var nextIndex = currentIndex - 1;
-                setTranslateX(itemPositions[nextIndex].start);
-                setCurrentIndex(nextIndex);
+            else {
+                setDraggingInfo(getNewDraggingInfo({
+                    newTranslateX: itemPositions[nextIndex].start,
+                    nextIndex: nextIndex,
+                }));
             }
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            var nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex: nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+        if (draggingInfo.dragging) {
+            unblockScroll();
         }
-        setOffset(0);
-        var parentElement = document.getElementsByClassName('sendbird-conversation__messages-padding');
-        parentElement[0].style.overflowY = 'scroll';
     };
     function getCurrentTranslateX() {
-        return translateX + offset;
+        return draggingInfo.translateX + draggingInfo.offset;
     }
     function getIsLastTwoItemsFitScreen() {
         var restItemsWidth = itemWidths.slice(-2).reduce(function (prev, curr) { return prev + gap + curr; });
         var restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
         return restTotalWidth <= screenWidth;
     }
-    var onDragEnd = isMobile ? handleDragEndForMobile : handleDragEnd;
-    var currentTranslateX = getCurrentTranslateX();
     function getEachItemPositions() {
         var accumulator = 0;
         return itemWidths.map(function (itemWidth, i) {
@@ -179,15 +241,13 @@ function Carousel(_a) {
             return itemPosition;
         });
     }
-    return (React.createElement("div", { id: id, ref: carouselRef, style: {
-            cursor: dragging ? 'grabbing' : 'grab',
-        }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
-        React.createElement("div", { className: 'sendbird-carousel-items-wrapper', style: {
-                transition: dragging ? 'none' : 'transform 0.3s ease',
-                transform: "translateX(".concat(currentTranslateX, "px)"),
-                gap: gap,
-            } }, items.map(function (item, index) { return (React.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); }))));
-}
+    return (React.createElement("div", { id: id, ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: 'sendbird-carousel-items-wrapper', style: {
+            cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
+            transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
+            transform: "translateX(".concat(getCurrentTranslateX(), "px)"),
+            gap: gap,
+        } }, items.map(function (item, index) { return (React.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); })));
+});
 
 exports.Carousel = Carousel;
 exports.default = Carousel;

package/cjs/ui/Carousel.js.map

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

package/cjs/ui/ChannelAvatar.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-Di5APzpg.js');
+var ui_Avatar = require('../chunks/bundle-BsGXZt6G.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-Chu9Um5P.js');
-require('../chunks/bundle-BmOkcO1e.js');
+var utils = require('../chunks/bundle-BH87xcnc.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-6RaeE_-7.js');
-require('../chunks/bundle-Bd5-Auhd.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle--ToWZ9cj.js');
 
 function ChannelAvatar(_a) {
     var channel = _a.channel, userId = _a.userId, theme = _a.theme, _b = _a.width, width = _b === void 0 ? 56 : _b, _c = _a.height, height = _c === void 0 ? 56 : _c;

package/cjs/ui/ConnectionStatus.js

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
-var LocalizationContext = require('../chunks/bundle-CSfRc5hY.js');
-require('../chunks/bundle-BmOkcO1e.js');
-require('../chunks/bundle-6RaeE_-7.js');
-require('../chunks/bundle-BZyYPaEv.js');
-require('../chunks/bundle-FDJnhm3r.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
 
 function ConnectionStatus() {
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;

package/cjs/ui/ContextMenu.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var reactDom = require('react-dom');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../chunks/bundle-B3gE4-sg.js');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
-require('../chunks/bundle-BZByKaLs.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-DfYperTC.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-wwwDjH0w.js');
-require('../chunks/bundle-BZyYPaEv.js');
+require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-CqF06THu.js');
 
 // padding to handle height of last item in message-list
 var HEIGHT_PADDING = 60;

package/cjs/ui/DateSeparator.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var color = require('../chunks/bundle-viPU2Zrj.js');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
-require('../chunks/bundle-BZyYPaEv.js');
+var color = require('../chunks/bundle-SIHqK2VF.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-CqF06THu.js');
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;

package/cjs/ui/EmojiReactions.js

@@ -6,41 +6,41 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../chunks/bundle-B3gE4-sg.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
 var ui_UserListItem = require('./UserListItem.js');
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-DhbE_hFO.js');
-var useLongPress = require('../chunks/bundle-0dm-rZLh.js');
-var LocalizationContext = require('../chunks/bundle-CSfRc5hY.js');
+var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
+var useLongPress = require('../chunks/bundle-CIswYN43.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-require('../chunks/bundle-BZyYPaEv.js');
-require('../chunks/bundle-6RaeE_-7.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-CDBTt08y.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-BZByKaLs.js');
+require('../chunks/bundle-DfYperTC.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-wwwDjH0w.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-XHpUo2d5.js');
+require('../chunks/bundle-dNtU9_eg.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-FDJnhm3r.js');
-require('../chunks/bundle-Crhw0Zu1.js');
-require('../chunks/bundle-Di5APzpg.js');
-require('../chunks/bundle-Bd5-Auhd.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-BF04PgMH.js');
+require('../chunks/bundle-BsGXZt6G.js');
+require('../chunks/bundle--ToWZ9cj.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-BkrtMQxo.js');
+require('../chunks/bundle-BMsGwLym.js');
 require('../withSendbird.js');
 
 var ReactedMembersBottomSheet = function (_a) {

package/cjs/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-CSfRc5hY.js');
-var index = require('../chunks/bundle-B3gE4-sg.js');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
-require('../chunks/bundle-BZyYPaEv.js');
-require('../chunks/bundle-FDJnhm3r.js');
-require('../chunks/bundle-BmOkcO1e.js');
+var LocalizationContext = require('../chunks/bundle-CmFB08Wf.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-wwwDjH0w.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/cjs/ui/FileMessageItemBody.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-B3gE4-sg.js');
-var color = require('../chunks/bundle-viPU2Zrj.js');
-var MediaQueryContext = require('../chunks/bundle-DhbE_hFO.js');
-require('../chunks/bundle-BmOkcO1e.js');
-require('../chunks/bundle-BZyYPaEv.js');
-require('../chunks/bundle-6RaeE_-7.js');
+var index = require('../chunks/bundle-B1Nml3ap.js');
+var color = require('../chunks/bundle-SIHqK2VF.js');
+var MediaQueryContext = require('../chunks/bundle-CsvKRjaK.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-CDBTt08y.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-wwwDjH0w.js');
+require('../chunks/bundle-Cmmi9pdk.js');
 
 function FileMessageItemBody(_a) {
     var _b;

package/cjs/ui/FileViewer.js

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-BmOkcO1e.js');
+require('../chunks/bundle-Q5_I3n-8.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-CSfRc5hY.js');
+require('../chunks/bundle-CmFB08Wf.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-B3gE4-sg.js');
-require('../chunks/bundle-6RaeE_-7.js');
-require('../chunks/bundle-Di5APzpg.js');
-require('../chunks/bundle-CidVlBMl.js');
+require('../chunks/bundle-B1Nml3ap.js');
+require('../chunks/bundle-CDBTt08y.js');
+require('../chunks/bundle-BsGXZt6G.js');
+require('../chunks/bundle-C88DsCNB.js');
 require('./Icon.js');
-var ui_FileViewer = require('../chunks/bundle-C3gIbns_.js');
-require('../chunks/bundle-B5pxZS7a.js');
-require('../chunks/bundle-XHpUo2d5.js');
-require('../chunks/bundle-BZyYPaEv.js');
-require('../chunks/bundle-FDJnhm3r.js');
-require('../chunks/bundle-wwwDjH0w.js');
-require('../chunks/bundle-DhbE_hFO.js');
+var ui_FileViewer = require('../chunks/bundle-DNP731Dg.js');
+require('../chunks/bundle-tHnRbr7F.js');
+require('../chunks/bundle-dNtU9_eg.js');
+require('../chunks/bundle-CqF06THu.js');
+require('../chunks/bundle-1hCsXfVb.js');
+require('../chunks/bundle-Cmmi9pdk.js');
+require('../chunks/bundle-CsvKRjaK.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-Bd5-Auhd.js');
-require('../chunks/bundle-BPcaLWyG.js');
+require('../chunks/bundle--ToWZ9cj.js');
+require('../chunks/bundle-Dpu1gg5r.js');
 require('@sendbird/uikit-tools');
 
 

package/cjs/ui/Icon.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var utils = require('../chunks/bundle-6RaeE_-7.js');
+var utils = require('../chunks/bundle-CDBTt08y.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {

package/cjs/ui/ImageRenderer.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BmOkcO1e.js');
+var _tslib = require('../chunks/bundle-Q5_I3n-8.js');
 var React = require('react');
-var utils = require('../chunks/bundle-6RaeE_-7.js');
+var utils = require('../chunks/bundle-CDBTt08y.js');
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-CidVlBMl.js');
-require('../chunks/bundle-BmOkcO1e.js');
-require('../chunks/bundle-BZyYPaEv.js');
+var ui_Label = require('../chunks/bundle-C88DsCNB.js');
+require('../chunks/bundle-Q5_I3n-8.js');
+require('../chunks/bundle-CqF06THu.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;