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

package/ui/Carousel.js

@@ -1,9 +1,9 @@
-import React__default, { useRef, useState } from 'react';
-import { u as useMediaQueryContext } from '../chunks/bundle-BE9YtwxF.js';
+import { _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
+import React__default, { useRef, useState, useEffect } from 'react';
 
 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.
@@ -15,13 +15,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__default.createElement("div", { key: key, style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
+    var item = _a.item, defaultWidth = _a.defaultWidth;
+    return React__default.createElement("div", { style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth } }, item);
 }
-function Carousel(_a) {
+var Carousel = React__default.memo(function (_a) {
     var _b, _c;
-    var id = _a.id, items = _a.items, _d = _a.gap, gap = _d === void 0 ? 8 : _d;
-    var isMobile = 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 = 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;
@@ -37,130 +36,193 @@ function Carousel(_a) {
     var isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
     var isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
     var itemPositions = getEachItemPositions();
-    var _e = useState(0), currentIndex = _e[0], setCurrentIndex = _e[1];
-    var _f = useState(null), dragging = _f[0], setDragging = _f[1];
-    var _g = useState(0), startX = _g[0], setStartX = _g[1];
-    var _h = useState(0), offset = _h[0], setOffset = _h[1];
-    var _j = useState(0), translateX = _j[0], setTranslateX = _j[1];
+    var _f = 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(__assign(__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(__assign(__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(__assign(__assign({}, draggingInfo), { scrolling: false, dragging: false, startPos: {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            }, offset: 0 }));
     };
+    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(__assign(__assign({}, draggingInfo), { offset: newOffset }));
+            return;
+        }
+        if (deltaY > deltaX) {
+            setDraggingInfo(__assign(__assign({}, draggingInfo), { scrolling: true }));
         }
-        onDragEnd();
+        else {
+            blockScroll();
+            setDraggingInfo(__assign(__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) {
@@ -175,15 +237,13 @@ function Carousel(_a) {
             return itemPosition;
         });
     }
-    return (React__default.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__default.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__default.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); }))));
-}
+    return (React__default.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__default.createElement(CarouselItem, { key: "".concat(id, "-").concat(index), item: item, defaultWidth: defaultItemWidth + 'px' })); })));
+});
 
 export { Carousel, Carousel as default };
 //# sourceMappingURL=Carousel.js.map

package/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/ui/ChannelAvatar.js

@@ -1,11 +1,11 @@
 import React__default, { useMemo } from 'react';
-import { A as Avatar } from '../chunks/bundle-DyaS04Hg.js';
+import { A as Avatar } from '../chunks/bundle-C4sUzPGS.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-CWvAVk8m.js';
-import '../chunks/bundle-CfcTsxlD.js';
+import { g as generateDefaultAvatar, a as getChannelAvatarSource } from '../chunks/bundle-BPclYGwz.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-CWPkjiZ7.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-BUy5u56K.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/ui/ConnectionStatus.js

@@ -1,11 +1,11 @@
 import React__default, { useContext } from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
-import '../chunks/bundle-CfcTsxlD.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import { L as LocalizationContext } from '../chunks/bundle-CJIPD7gN.js';
+import '../chunks/bundle-D_KO6Orc.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CcTHgZqq.js';
 
 function ConnectionStatus() {
     var stringSet = useContext(LocalizationContext).stringSet;

package/ui/ContextMenu.js

@@ -1,16 +1,16 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { e as __extends, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { e as __extends, _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
 import { createPortal } from 'react-dom';
 import { Role } from '@sendbird/chat';
 import { OpenChannel } from '@sendbird/chat/openChannel';
 import SortByRow from './SortByRow.js';
-import { w as getClassName } from '../chunks/bundle-BqL00V4c.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-D4vlYCrG.js';
+import { w as getClassName } from '../chunks/bundle-5okwu0-4.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-BFDyBk4r.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
-import '../chunks/bundle-BydX5Gik.js';
+import '../chunks/bundle-aH4n4ipp.js';
+import '../chunks/bundle-DXhynnjn.js';
 
 // padding to handle height of last item in message-list
 var HEIGHT_PADDING = 60;

package/ui/DateSeparator.js

@@ -1,8 +1,8 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-DaAps-h8.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-BydX5Gik.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-CfKGkWtT.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.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 ? Colors.ONBACKGROUND_4 : _d;

package/ui/EmojiReactions.js

@@ -4,41 +4,41 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { O as getEmojiUrl, P as isReactedBy, Q as getEmojiTooltipString, y as getEmojiListAll, R as getEmojiMapAll, w as getClassName } from '../chunks/bundle-BqL00V4c.js';
+import { O as getEmojiUrl, P as isReactedBy, Q as getEmojiTooltipString, y as getEmojiListAll, R as getEmojiMapAll, w as getClassName } from '../chunks/bundle-5okwu0-4.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
 import UserListItem from './UserListItem.js';
-import { _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-BE9YtwxF.js';
-import { u as useLongPress } from '../chunks/bundle-D87WTORg.js';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-BuIxT5aZ.js';
+import { u as useLongPress } from '../chunks/bundle-DUTTSKO5.js';
+import { L as LocalizationContext } from '../chunks/bundle-CJIPD7gN.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-Bm9cdQdy.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CwofYH9U.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-D4vlYCrG.js';
+import '../chunks/bundle-BFDyBk4r.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-aH4n4ipp.js';
 import '../hooks/useModal.js';
-import '../chunks/bundle-DrKv7qiU.js';
+import '../chunks/bundle-BSPBjwR6.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-B0A-GTy2.js';
-import '../chunks/bundle-DyaS04Hg.js';
-import '../chunks/bundle-CWPkjiZ7.js';
+import '../chunks/bundle-CcTHgZqq.js';
+import '../chunks/bundle-DnFiUPoR.js';
+import '../chunks/bundle-C4sUzPGS.js';
+import '../chunks/bundle-BUy5u56K.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-C1UCPEjT.js';
+import '../chunks/bundle-Bf5VthYV.js';
 import '../withSendbird.js';
 
 var ReactedMembersBottomSheet = function (_a) {

package/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -1,13 +1,13 @@
 import React__default, { useContext } from 'react';
-import { L as LocalizationContext } from '../chunks/bundle-BkNNtN1V.js';
-import { w as getClassName } from '../chunks/bundle-BqL00V4c.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-CfcTsxlD.js';
+import { L as LocalizationContext } from '../chunks/bundle-CJIPD7gN.js';
+import { w as getClassName } from '../chunks/bundle-5okwu0-4.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CcTHgZqq.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-aH4n4ipp.js';
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;

package/ui/FileMessageItemBody.js

@@ -1,16 +1,16 @@
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-BqL00V4c.js';
-import { C as Colors } from '../chunks/bundle-DaAps-h8.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-BE9YtwxF.js';
-import '../chunks/bundle-CfcTsxlD.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-Bm9cdQdy.js';
+import { w as getClassName, o as getUIKitFileType, t as truncateString } from '../chunks/bundle-5okwu0-4.js';
+import { C as Colors } from '../chunks/bundle-CfKGkWtT.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-BuIxT5aZ.js';
+import '../chunks/bundle-D_KO6Orc.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CwofYH9U.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-VAV0nvVl.js';
+import '../chunks/bundle-aH4n4ipp.js';
 
 function FileMessageItemBody(_a) {
     var _b;

package/ui/FileViewer.js

@@ -1,26 +1,26 @@
-import '../chunks/bundle-CfcTsxlD.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import 'react';
 import 'react-dom';
-import '../chunks/bundle-BkNNtN1V.js';
+import '../chunks/bundle-CJIPD7gN.js';
 import '../hooks/useModal.js';
-import '../chunks/bundle-BqL00V4c.js';
-import '../chunks/bundle-Bm9cdQdy.js';
-import '../chunks/bundle-DyaS04Hg.js';
-import '../chunks/bundle-33BY7XhN.js';
+import '../chunks/bundle-5okwu0-4.js';
+import '../chunks/bundle-CwofYH9U.js';
+import '../chunks/bundle-C4sUzPGS.js';
+import '../chunks/bundle-C-_RpFyM.js';
 import './Icon.js';
-export { b as FileViewerComponent, F as default } from '../chunks/bundle-B-5nMQI8.js';
-import '../chunks/bundle-CsV5Pqhn.js';
-import '../chunks/bundle-DrKv7qiU.js';
-import '../chunks/bundle-BydX5Gik.js';
-import '../chunks/bundle-CKqBhRZh.js';
-import '../chunks/bundle-VAV0nvVl.js';
-import '../chunks/bundle-BE9YtwxF.js';
+export { b as FileViewerComponent, F as default } from '../chunks/bundle-zf2ni0YJ.js';
+import '../chunks/bundle-GQqssfTX.js';
+import '../chunks/bundle-BSPBjwR6.js';
+import '../chunks/bundle-DXhynnjn.js';
+import '../chunks/bundle-CcTHgZqq.js';
+import '../chunks/bundle-aH4n4ipp.js';
+import '../chunks/bundle-BuIxT5aZ.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-CWPkjiZ7.js';
-import '../chunks/bundle-BdJeQIAi.js';
+import '../chunks/bundle-BUy5u56K.js';
+import '../chunks/bundle-BJ9OAqWz.js';
 import '@sendbird/uikit-tools';
 //# sourceMappingURL=FileViewer.js.map

package/ui/Icon.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import * as React from 'react';
 import React__default from 'react';
-import { n as noop } from '../chunks/bundle-Bm9cdQdy.js';
+import { n as noop } from '../chunks/bundle-CwofYH9U.js';
 
 /* eslint-disable no-redeclare */
 var Types = {

package/ui/IconButton.js

@@ -1,4 +1,4 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
 import React__default, { useState } from 'react';
 
 var IconButton = React__default.forwardRef(function (props, ref) {

package/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-D_KO6Orc.js';
 import React__default, { useMemo, useState, useLayoutEffect, useRef } from 'react';
-import { n as noop } from '../chunks/bundle-Bm9cdQdy.js';
+import { n as noop } from '../chunks/bundle-CwofYH9U.js';
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;

package/ui/Input.js

@@ -1,7 +1,7 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-CfcTsxlD.js';
-import '../chunks/bundle-BydX5Gik.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-D_KO6Orc.js';
+import '../chunks/bundle-DXhynnjn.js';
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/ui/Label.js

@@ -1,5 +1,5 @@
-import '../chunks/bundle-CfcTsxlD.js';
+import '../chunks/bundle-D_KO6Orc.js';
 import 'react';
-export { e as Label, b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-BydX5Gik.js';
+export { e as Label, b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-CfcTsxlD.js';
+import { c as __spreadArray } from '../chunks/bundle-D_KO6Orc.js';
 import React__default from 'react';
-import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-33BY7XhN.js';
-import '../chunks/bundle-BydX5Gik.js';
+import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C-_RpFyM.js';
+import '../chunks/bundle-DXhynnjn.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {