@sendbird/uikit-react 3.14.12-rc.0 → 3.14.13-rc.0

package/cjs/chunks/{bundle-ixFTDNk4.js → bundle-Due_kqIz.js}

@@ -2,18 +2,22 @@
 
 var React = require('react');
 var DOMPurify = require('dompurify');
-var _const = require('./bundle-B6bMPH7-.js');
-var _const$1 = require('./bundle-DhsLc3aN.js');
-var _tslib = require('./bundle-CJ4C_lQr.js');
-var consts = require('./bundle-DAwgW6yl.js');
-var consts$2 = require('./bundle-DP_BgK40.js');
-var consts$1 = require('./bundle-Ckd5KYz3.js');
+var _const = require('./bundle-wVbT1fu8.js');
+var _const$1 = require('./bundle-CbHU1T-B.js');
+var _tslib = require('./bundle-DmCOU0rJ.js');
+var consts = require('./bundle-52q2knIq.js');
+var consts$2 = require('./bundle-BjFlNAEh.js');
+var consts$1 = require('./bundle-C5fH7ZXr.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var DOMPurify__default = /*#__PURE__*/_interopDefaultCompat(DOMPurify);
 
 function renderToString(_a) {
     var userId = _a.userId, nickname = _a.nickname;
     // donot change this template, it wont work
     var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(consts.MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
-    var purifier = DOMPurify(window);
+    var purifier = DOMPurify__default.default(window);
     var sanitized_ = purifier.sanitize(el);
     var token = sanitized_.split(' ');
     var spanTag = token[0], rest = token.slice(1);
@@ -211,7 +215,7 @@ function usePaste(_a) {
             return;
         }
         // has html, check if there are mentions, sanitize and insert
-        var purifier = DOMPurify(window);
+        var purifier = DOMPurify__default.default(window);
         var clean = purifier.sanitize(html);
         var pasteNode = createPasteNode();
         if (pasteNode) {
@@ -261,4 +265,4 @@ exports.nodeListToArray = nodeListToArray;
 exports.renderToString = renderToString;
 exports.sanitizeString = sanitizeString;
 exports.usePaste = usePaste;
-//# sourceMappingURL=bundle-ixFTDNk4.js.map
+//# sourceMappingURL=bundle-Due_kqIz.js.map

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

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

package/cjs/chunks/{bundle-yj3EsKw0.js → bundle-DwclHLWU.js}

@@ -33,4 +33,4 @@ var generateDefaultAvatar = function (channel) {
 exports.generateDefaultAvatar = generateDefaultAvatar;
 exports.getChannelAvatarSource = getChannelAvatarSource;
 exports.getOpenChannelAvatar = getOpenChannelAvatar;
-//# sourceMappingURL=bundle-yj3EsKw0.js.map
+//# sourceMappingURL=bundle-DwclHLWU.js.map

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

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

package/cjs/chunks/{bundle-DITjC1Le.js → bundle-Jev4e8GC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('./bundle-CJ4C_lQr.js');
+var _tslib = require('./bundle-DmCOU0rJ.js');
 
 var USER_MENTION_PREFIX = '@';
 
@@ -226,4 +226,4 @@ exports.USER_MENTION_PREFIX = USER_MENTION_PREFIX;
 exports.getWhiteSpacePreservedText = getWhiteSpacePreservedText;
 exports.tokenizeMarkdown = tokenizeMarkdown;
 exports.tokenizeMessage = tokenizeMessage;
-//# sourceMappingURL=bundle-DITjC1Le.js.map
+//# sourceMappingURL=bundle-Jev4e8GC.js.map

package/cjs/chunks/{bundle-DITjC1Le.js.map → bundle-Jev4e8GC.js.map}

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

package/cjs/chunks/{bundle-BThLM1G6.js → bundle-Sp2G1sf1.js}

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

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

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

package/cjs/chunks/{bundle-zuGzPHQP.js → bundle-_BQ69s5I.js}

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

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

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

package/cjs/chunks/bundle-_Fi26N-m.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+var ui_Avatar = require('./bundle-Dqp9uxau.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-Cmim7RkF.js');
+var index = require('./bundle-CRHrNWJp.js');
+var ui_Modal = require('./bundle-B2dRfy75.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var FileViewerView = function (_a) {
+    var message = _a.message, onCancel = _a.onCancel, deleteMessage = _a.deleteMessage, onDownloadClick = _a.onDownloadClick;
+    var sender = message.sender, type = message.type, url = message.url, _b = message.name, name = _b === void 0 ? '' : _b, threadInfo = message.threadInfo;
+    var profileUrl = sender.profileUrl, nickname = sender.nickname, userId = sender.userId;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    return reactDom.createPortal(React__default.default.createElement(FileViewerComponent, { profileUrl: profileUrl, nickname: nickname, type: type, url: url, name: name, onCancel: onCancel, onDelete: function () { return deleteMessage(message).then(function () { return onCancel(); }); }, isByMe: config.userId === userId, disableDelete: (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) ? threadInfo.replyCount > 0 : false, onDownloadClick: onDownloadClick }), document.getElementById(ui_Modal.MODAL_ROOT));
+};
+var FileViewerComponent = function (_a) {
+    var 
+    // sender
+    profileUrl = _a.profileUrl, nickname = _a.nickname, 
+    // file
+    name = _a.name, type = _a.type, url = _a.url, 
+    // others
+    isByMe = _a.isByMe, onCancel = _a.onCancel, onDelete = _a.onDelete, disableDelete = _a.disableDelete, onDownloadClick = _a.onDownloadClick;
+    return (React__default.default.createElement(ui_Modal.Modal, { onClose: onCancel },
+        React__default.default.createElement("div", { className: "sendbird-fileviewer", "data-testid": "sendbird-fileviewer" },
+            React__default.default.createElement("div", { className: "sendbird-fileviewer__header" },
+                React__default.default.createElement("div", { className: "sendbird-fileviewer__header__left" },
+                    React__default.default.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
+                        React__default.default.createElement(ui_Avatar.Avatar, { height: "32px", width: "32px", src: profileUrl })),
+                    React__default.default.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__filename", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, name),
+                    React__default.default.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__sender-name", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, nickname)),
+                React__default.default.createElement("div", { className: "sendbird-fileviewer__header__right" },
+                    index.isSupportedFileView(type) && (React__default.default.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
+                        React__default.default.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
+                            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DOWNLOAD, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
+                        onDelete && isByMe && (React__default.default.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete" },
+                            React__default.default.createElement(ui_Icon.default, { className: disableDelete ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function () {
+                                    if (!disableDelete) {
+                                        onDelete();
+                                    }
+                                } }))))),
+                    React__default.default.createElement("div", { className: "sendbird-fileviewer__header__right__actions__close" },
+                        React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: onCancel })))),
+            React__default.default.createElement("div", { className: "sendbird-fileviewer__content" },
+                index.isVideo(type) && (React__default.default.createElement("video", { controls: true, className: "sendbird-fileviewer__content__video" },
+                    React__default.default.createElement("source", { src: url, type: type }))),
+                index.isImage(type) && React__default.default.createElement("img", { src: url, alt: name, className: "sendbird-fileviewer__content__img" }),
+                !index.isSupportedFileView(type) && (React__default.default.createElement("div", { className: "sendbird-fileviewer__content__unsupported" },
+                    React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ui_Label.LabelStringSet.UI__FILE_VIEWER__UNSUPPORT)))))));
+};
+
+exports.FileViewerView = FileViewerView;
+//# sourceMappingURL=bundle-_Fi26N-m.js.map

package/cjs/chunks/bundle-_Fi26N-m.js.map

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

package/cjs/chunks/{bundle-DsMSm69r.js → bundle-dHdWQSgD.js}

@@ -27,4 +27,4 @@ var copyToClipboard = function (text) {
 };
 
 exports.copyToClipboard = copyToClipboard;
-//# sourceMappingURL=bundle-DsMSm69r.js.map
+//# sourceMappingURL=bundle-dHdWQSgD.js.map

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

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

package/cjs/chunks/{bundle-DroX83jz.js → bundle-k2YcpSmh.js}

@@ -1,12 +1,16 @@
 'use strict';
 
 var React = require('react');
-var index = require('./bundle-C5OtWVnd.js');
-var tokenize = require('./bundle-DITjC1Le.js');
+var index = require('./bundle-CRHrNWJp.js');
+var tokenize = require('./bundle-Jev4e8GC.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-Dq9xVvbD.js');
+var ui_Label = require('./bundle-Cmim7RkF.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-DroX83jz.js.map
+//# sourceMappingURL=bundle-k2YcpSmh.js.map

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

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

package/cjs/chunks/{bundle-CRUQT_mR.js → bundle-lUMAR4iA.js}

@@ -5,10 +5,14 @@ var ui_PlaybackTime = require('../ui/PlaybackTime.js');
 var ui_ProgressBar = require('../ui/ProgressBar.js');
 var ui_TextButton = require('../ui/TextButton.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-Dq9xVvbD.js');
-var LocalizationContext = require('./bundle-DnchMcYp.js');
-var consts = require('./bundle-UZTd4E_b.js');
-var utils = require('./bundle-CxcGHjPH.js');
+var ui_Label = require('./bundle-Cmim7RkF.js');
+var LocalizationContext = require('./bundle-CiMvvzt_.js');
+var consts = require('./bundle-BdulnACZ.js');
+var utils = require('./bundle-CfMyWzdL.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /* eslint-disable no-redeclare */
 var VoiceMessageInputStatus = {
@@ -22,21 +26,21 @@ var ControlerIcon = function (_a) {
     var inputState = _a.inputState;
     switch (inputState) {
         case VoiceMessageInputStatus.READY_TO_RECORD: {
-            return (React.createElement("div", { className: "sendbird-controler-icon record-icon" }));
+            return (React__default.default.createElement("div", { className: "sendbird-controler-icon record-icon" }));
         }
         case VoiceMessageInputStatus.RECORDING: {
-            return (React.createElement("div", { className: "sendbird-controler-icon stop-icon" }));
+            return (React__default.default.createElement("div", { className: "sendbird-controler-icon stop-icon" }));
         }
         case VoiceMessageInputStatus.READY_TO_PLAY: {
-            return (React.createElement(ui_Icon.default, { className: "sendbird-controler-icon play-icon", width: "20px", height: "20px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1 }));
+            return (React__default.default.createElement(ui_Icon.default, { className: "sendbird-controler-icon play-icon", width: "20px", height: "20px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1 }));
         }
         case VoiceMessageInputStatus.PLAYING: {
-            return (React.createElement("div", { className: "sendbird-controler-icon pause-icon" },
-                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" }),
-                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" })));
+            return (React__default.default.createElement("div", { className: "sendbird-controler-icon pause-icon" },
+                React__default.default.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" }),
+                React__default.default.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" })));
         }
         default:
-            return React.createElement(React.Fragment, null);
+            return React__default.default.createElement(React__default.default.Fragment, null);
     }
 };
 
@@ -80,21 +84,21 @@ var VoiceMessageInput = function (_a) {
             setLastClickTime(currentTime);
         }
     };
-    return (React.createElement("div", { className: "sendbird-voice-message-input" },
-        React.createElement("div", { className: "sendbird-voice-message-input__indicator" },
-            React.createElement("div", { className: "sendbird-voice-message-input__indicator__progress-bar" },
-                React.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-input__indicator__progress-bar__bar", disabled: isReadyToRecord, maxSize: maximumValue, currentSize: currentValue })),
-            (isRecording) ? (React.createElement("div", { className: "sendbird-voice-message-input__indicator__on-rec" })) : null,
-            React.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-input__indicator__playback-time", time: isPlayMode ? maximumValue - currentValue : currentValue, labelColor: isReadyToRecord ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONCONTENT_1 })),
-        React.createElement("div", { className: "sendbird-voice-message-input__controler" },
-            (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || (React.createElement(ui_TextButton, { className: "sendbird-voice-message-input__controler__cancel", onClick: handleOnCancelClick, disableUnderline: true },
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.BUTTON__CANCEL))),
-            (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__main", onClick: handleOnControlClick },
-                React.createElement(ControlerIcon, { inputState: currentType }))),
-            (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || (React.createElement("div", { className: utils.classnames('sendbird-voice-message-input__controler__submit', isSendButtonDisabled && 'voice-message--disabled'), onClick: handleOnSubmitClick },
-                React.createElement(ui_Icon.default, { width: "19px", height: "19px", type: ui_Icon.IconTypes.SEND, fillColor: isSendButtonDisabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT }))))));
+    return (React__default.default.createElement("div", { className: "sendbird-voice-message-input" },
+        React__default.default.createElement("div", { className: "sendbird-voice-message-input__indicator" },
+            React__default.default.createElement("div", { className: "sendbird-voice-message-input__indicator__progress-bar" },
+                React__default.default.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-input__indicator__progress-bar__bar", disabled: isReadyToRecord, maxSize: maximumValue, currentSize: currentValue })),
+            (isRecording) ? (React__default.default.createElement("div", { className: "sendbird-voice-message-input__indicator__on-rec" })) : null,
+            React__default.default.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-input__indicator__playback-time", time: isPlayMode ? maximumValue - currentValue : currentValue, labelColor: isReadyToRecord ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONCONTENT_1 })),
+        React__default.default.createElement("div", { className: "sendbird-voice-message-input__controler" },
+            (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || (React__default.default.createElement(ui_TextButton, { className: "sendbird-voice-message-input__controler__cancel", onClick: handleOnCancelClick, disableUnderline: true },
+                React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.BUTTON__CANCEL))),
+            (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || (React__default.default.createElement("div", { className: "sendbird-voice-message-input__controler__main", onClick: handleOnControlClick },
+                React__default.default.createElement(ControlerIcon, { inputState: currentType }))),
+            (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || (React__default.default.createElement("div", { className: utils.classnames('sendbird-voice-message-input__controler__submit', isSendButtonDisabled && 'voice-message--disabled'), onClick: handleOnSubmitClick },
+                React__default.default.createElement(ui_Icon.default, { width: "19px", height: "19px", type: ui_Icon.IconTypes.SEND, fillColor: isSendButtonDisabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT }))))));
 };
 
 exports.VoiceMessageInput = VoiceMessageInput;
 exports.VoiceMessageInputStatus = VoiceMessageInputStatus;
-//# sourceMappingURL=bundle-CRUQT_mR.js.map
+//# sourceMappingURL=bundle-lUMAR4iA.js.map

package/{chunks/bundle-DCKISMg6.js.map → cjs/chunks/bundle-lUMAR4iA.js.map}

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

package/cjs/chunks/{bundle-BIkirlfD.js → bundle-m4DYiLZS.js}

@@ -1,19 +1,23 @@
 'use strict';
 
-var _tslib = require('./bundle-CJ4C_lQr.js');
+var _tslib = require('./bundle-DmCOU0rJ.js');
 var React = require('react');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
-var ui_ContextMenu = require('./bundle-6P-e5JVH.js');
+var ui_ContextMenu = require('./bundle-BeTneyYL.js');
 require('react-dom');
 var ui_IconButton = require('../ui/IconButton.js');
-require('./bundle-C5OtWVnd.js');
-var LocalizationContext = require('./bundle-DnchMcYp.js');
-var utils = require('./bundle-CxcGHjPH.js');
+require('./bundle-CRHrNWJp.js');
+var LocalizationContext = require('./bundle-CiMvvzt_.js');
+var utils = require('./bundle-CfMyWzdL.js');
 var ui_Icon = require('../ui/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 // Utility function to handle processing state and promise execution
 var processToggleAction = function (isProcessing, action, errorHandler) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
     var error_1;
@@ -174,7 +178,7 @@ var UserListItemMenuProvider = function (_a) {
     var operatorState = useToggleOperator(values);
     var muteState = useToggleMute(values);
     var banState = useToggleBan(values);
-    return (React.createElement(UserListItemMenuContext.Provider, { value: _tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign({}, values), operatorState), muteState), banState), { isCurrentUser: isCurrentUser, isCurrentUserOperator: isCurrentUserOperator }) }, children));
+    return (React__default.default.createElement(UserListItemMenuContext.Provider, { value: _tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign({}, values), operatorState), muteState), banState), { isCurrentUser: isCurrentUser, isCurrentUserOperator: isCurrentUserOperator }) }, children));
 };
 var useUserListItemMenuContext = function () {
     var context = React.useContext(UserListItemMenuContext);
@@ -189,8 +193,8 @@ var OperatorToggleMenuItem = function (props) {
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = useUserListItemMenuContext(), isOperator = _b.isOperator, toggleOperator = _b.toggleOperator, isCurrentUser = _b.isCurrentUser, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu;
     if (!isCurrentUserOperator)
-        return React.createElement(React.Fragment, null);
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
             toggleOperator();
@@ -204,8 +208,8 @@ var MuteToggleMenuItem = function (props) {
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = useUserListItemMenuContext(), isMuted = _b.isMuted, toggleMute = _b.toggleMute, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu, channel = _b.channel;
     if (!isCurrentUserOperator || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast))
-        return React.createElement(React.Fragment, null);
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
             toggleMute();
@@ -219,8 +223,8 @@ var BanToggleMenuItem = function (props) {
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var _b = useUserListItemMenuContext(), isBanned = _b.isBanned, toggleBan = _b.toggleBan, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu;
     if (!isCurrentUserOperator)
-        return React.createElement(React.Fragment, null);
-    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    return (React__default.default.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
             var _a;
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
             toggleBan();
@@ -232,16 +236,16 @@ var BanToggleMenuItem = function (props) {
 
 var TriggerIcon = function (_a) {
     var toggleMenu = _a.toggleMenu, ref = _a.ref;
-    return (React.createElement(ui_IconButton, { ref: ref, className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleMenu },
-        React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE })));
+    return (React__default.default.createElement(ui_IconButton, { ref: ref, className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleMenu },
+        React__default.default.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE })));
 };
 var DefaultMenuItems = function (_a) {
     var items = _a.items;
     var OperatorToggleMenuItem = items.OperatorToggleMenuItem, MuteToggleMenuItem = items.MuteToggleMenuItem, BanToggleMenuItem = items.BanToggleMenuItem;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(OperatorToggleMenuItem, null),
-        React.createElement(MuteToggleMenuItem, null),
-        React.createElement(BanToggleMenuItem, null)));
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(OperatorToggleMenuItem, null),
+        React__default.default.createElement(MuteToggleMenuItem, null),
+        React__default.default.createElement(BanToggleMenuItem, null)));
 };
 
 var UserListItemMenu = function (props) {
@@ -260,10 +264,10 @@ var UserListItemMenu = function (props) {
     if (user.userId === currentUserId) {
         return null;
     }
-    return (React.createElement("div", { className: utils.classnames('sendbird-user-list-item-menu', className), ref: containerRef },
-        React.createElement(UserListItemMenuProvider, _tslib.__assign({}, props, { hideMenu: hideMenu, toggleMenu: toggleMenu }),
+    return (React__default.default.createElement("div", { className: utils.classnames('sendbird-user-list-item-menu', className), ref: containerRef },
+        React__default.default.createElement(UserListItemMenuProvider, _tslib.__assign({}, props, { hideMenu: hideMenu, toggleMenu: toggleMenu }),
             renderTrigger({ ref: triggerRef, toggleMenu: toggleMenu }),
-            isMenuVisible && (React.createElement(ui_ContextMenu.MenuItems
+            isMenuVisible && (React__default.default.createElement(ui_ContextMenu.MenuItems
             // TODO: Add id using getObservingId for useElementObserver
             , { 
                 // TODO: Add id using getObservingId for useElementObserver
@@ -279,4 +283,4 @@ var UserListItemMenu = function (props) {
 exports.UserListItemMenu = UserListItemMenu;
 exports.UserListItemMenuProvider = UserListItemMenuProvider;
 exports.useUserListItemMenuContext = useUserListItemMenuContext;
-//# sourceMappingURL=bundle-BIkirlfD.js.map
+//# sourceMappingURL=bundle-m4DYiLZS.js.map

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

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

package/cjs/chunks/{bundle-B_fVOxPS.js → bundle-mHr4_GQW.js}

@@ -29,4 +29,4 @@ function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
 
 exports.getCaseResolvedReplyType = getCaseResolvedReplyType;
 exports.getCaseResolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType;
-//# sourceMappingURL=bundle-B_fVOxPS.js.map
+//# sourceMappingURL=bundle-mHr4_GQW.js.map

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

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

package/cjs/chunks/{bundle-RonggNhW.js → bundle-pcWgzSTZ.js}

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

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

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

package/cjs/chunks/{bundle-CTGjIAK4.js → bundle-rgSWvbRw.js}

@@ -70,4 +70,4 @@ function toDate(argument) {
 exports._typeof = _typeof;
 exports.requiredArgs = requiredArgs;
 exports.toDate = toDate;
-//# sourceMappingURL=bundle-CTGjIAK4.js.map
+//# sourceMappingURL=bundle-rgSWvbRw.js.map

package/cjs/chunks/{bundle-CTGjIAK4.js.map → bundle-rgSWvbRw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-CTGjIAK4.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}"],"names":[],"mappings":";;AAAe,SAAS,OAAO,CAAC,CAAC,EAAE;AACnC,EAAE,yBAAyB,CAAC;AAC5B;AACA,EAAE,OAAO,OAAO,GAAG,UAAU,IAAI,OAAO,MAAM,IAAI,QAAQ,IAAI,OAAO,MAAM,CAAC,QAAQ,GAAG,UAAU,CAAC,EAAE;AACpG,IAAI,OAAO,OAAO,CAAC,CAAC;AACpB,GAAG,GAAG,UAAU,CAAC,EAAE;AACnB,IAAI,OAAO,CAAC,IAAI,UAAU,IAAI,OAAO,MAAM,IAAI,CAAC,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,KAAK,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AACxH,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAChB;;ACRe,SAAS,YAAY,CAAC,QAAQ,EAAE,IAAI,EAAE;AACrD,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE;AAC9B,IAAI,MAAM,IAAI,SAAS,CAAC,QAAQ,GAAG,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC;AAChI,GAAG;AACH;;ACFA;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;AACA;AACA;AACe,SAAS,MAAM,CAAC,QAAQ,EAAE;AACzC,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACxD;AACA;AACA,EAAE,IAAI,QAAQ,YAAY,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,QAAQ,IAAI,MAAM,KAAK,eAAe,EAAE;AAChG;AACA,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;AACxC,GAAG,MAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAC3E,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9B,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,KAAK,iBAAiB,KAAK,OAAO,OAAO,KAAK,WAAW,EAAE;AAC1G;AACA,MAAM,OAAO,CAAC,IAAI,CAAC,oNAAoN,CAAC,CAAC;AACzO;AACA,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AACtC,KAAK;AACL,IAAI,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,GAAG;AACH;;;;;;","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"bundle-rgSWvbRw.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}"],"names":[],"mappings":";;AAAe,SAAS,OAAO,CAAC,CAAC,EAAE;AACnC,EAAE,yBAAyB,CAAC;AAC5B;AACA,EAAE,OAAO,OAAO,GAAG,UAAU,IAAI,OAAO,MAAM,IAAI,QAAQ,IAAI,OAAO,MAAM,CAAC,QAAQ,GAAG,UAAU,CAAC,EAAE;AACpG,IAAI,OAAO,OAAO,CAAC,CAAC;AACpB,GAAG,GAAG,UAAU,CAAC,EAAE;AACnB,IAAI,OAAO,CAAC,IAAI,UAAU,IAAI,OAAO,MAAM,IAAI,CAAC,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,KAAK,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AACxH,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAChB;;ACRe,SAAS,YAAY,CAAC,QAAQ,EAAE,IAAI,EAAE;AACrD,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE;AAC9B,IAAI,MAAM,IAAI,SAAS,CAAC,QAAQ,GAAG,WAAW,IAAI,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC;AAChI,GAAG;AACH;;ACFA;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;AACA;AACA;AACe,SAAS,MAAM,CAAC,QAAQ,EAAE;AACzC,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACxD;AACA;AACA,EAAE,IAAI,QAAQ,YAAY,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,QAAQ,IAAI,MAAM,KAAK,eAAe,EAAE;AAChG;AACA,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;AACxC,GAAG,MAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAC3E,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9B,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,KAAK,iBAAiB,KAAK,OAAO,OAAO,KAAK,WAAW,EAAE;AAC1G;AACA,MAAM,OAAO,CAAC,IAAI,CAAC,oNAAoN,CAAC,CAAC;AACzO;AACA,MAAM,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AACtC,KAAK;AACL,IAAI,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,GAAG;AACH;;;;;;","x_google_ignoreList":[0,1,2]}

package/cjs/chunks/{bundle-DGw9jx3D.js → bundle-vOQVXNiV.js}

@@ -6,17 +6,21 @@ var ui_Icon = require('../ui/Icon.js');
 var CreateChannel = require('../CreateChannel.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var AddGroupChannelView = function (_a) {
     var createChannelVisible = _a.createChannelVisible, onChangeCreateChannelVisible = _a.onChangeCreateChannelVisible, onBeforeCreateChannel = _a.onBeforeCreateChannel, onCreateChannelClick = _a.onCreateChannelClick, onChannelCreated = _a.onChannelCreated;
     var config = useSendbirdStateContext.useSendbirdStateContext().config;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ui_IconButton, { height: '32px', width: '32px', disabled: !config.isOnline, onClick: function () { return onChangeCreateChannelVisible(true); } },
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: '24px', height: '24px' })),
-        createChannelVisible && (React.createElement(CreateChannel, { onCancel: function () { return onChangeCreateChannelVisible(false); }, onChannelCreated: function (channel) {
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(ui_IconButton, { height: '32px', width: '32px', disabled: !config.isOnline, onClick: function () { return onChangeCreateChannelVisible(true); } },
+            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: '24px', height: '24px' })),
+        createChannelVisible && (React__default.default.createElement(CreateChannel, { onCancel: function () { return onChangeCreateChannelVisible(false); }, onChannelCreated: function (channel) {
                 onChannelCreated === null || onChannelCreated === void 0 ? void 0 : onChannelCreated(channel);
                 onChangeCreateChannelVisible(false);
             }, onBeforeCreateChannel: onBeforeCreateChannel, onCreateChannelClick: onCreateChannelClick }))));
 };
 
 exports.AddGroupChannelView = AddGroupChannelView;
-//# sourceMappingURL=bundle-DGw9jx3D.js.map
+//# sourceMappingURL=bundle-vOQVXNiV.js.map

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

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

package/cjs/chunks/{bundle-B6bMPH7-.js → bundle-wVbT1fu8.js}

@@ -19,4 +19,4 @@ var NodeNames = {
 exports.MessageInputKeys = MessageInputKeys;
 exports.NodeNames = NodeNames;
 exports.NodeTypes = NodeTypes;
-//# sourceMappingURL=bundle-B6bMPH7-.js.map
+//# sourceMappingURL=bundle-wVbT1fu8.js.map

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

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