@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/ui/FileViewer.js

@@ -2,39 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
-var ui_Modal = require('../chunks/bundle-1dGjBLMq.js');
-var index = require('../chunks/bundle-VyDwmxN4.js');
-var utils = require('../chunks/bundle-CO52Wsr3.js');
-var ui_Avatar = require('../chunks/bundle-B56LqPOh.js');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
+var LocalizationContext = require('../chunks/bundle-BZCLEq3c.js');
+var ui_Modal = require('../chunks/bundle-BCx4TP9R.js');
+var index = require('../chunks/bundle-E1Tkj9Pc.js');
+var utils = require('../chunks/bundle-BsUVmQmx.js');
+var ui_Avatar = require('../chunks/bundle-Cq7gxYWj.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
 var ui_Icon = require('./Icon.js');
-var consts = require('../chunks/bundle-DsscLs3k.js');
-var useKeyDown = require('../chunks/bundle-QTX1PYil.js');
-require('../chunks/bundle-CrkUdg03.js');
-require('../chunks/bundle-DQG6eG4l.js');
-require('../chunks/bundle-D0U-xAFE.js');
+var consts = require('../chunks/bundle-COzM5cWS.js');
+var useKeyDown = require('../chunks/bundle-BTdldoB1.js');
+require('../chunks/bundle-CqS517qU.js');
+require('../chunks/bundle-B9Jxp8fA.js');
+require('../chunks/bundle-DW5WyVEg.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
 require('../withSendbird.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
-require('../chunks/bundle-BkKs2HEQ.js');
+require('../chunks/bundle-DAzWBBxC.js');
 require('@sendbird/chat/openChannel');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-D60dip73.js');
+require('../chunks/bundle-BimZhXdJ.js');
 require('../useSendbirdStateContext.js');
-require('../chunks/bundle-CTW4jbtw.js');
-require('../chunks/bundle-B_eF_lLw.js');
+require('../chunks/bundle-BafSf9GJ.js');
+require('../chunks/bundle-5SGoePaQ.js');
 require('./SortByRow.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-_xb0mhf9.js');
+require('../chunks/bundle-C6bh_Eny.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-CQbuVhqz.js');
+require('../chunks/bundle-CGBazQAC.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 var ViewerTypes = {
@@ -60,33 +64,33 @@ function DeleteButton(props) {
     if (props.viewerType !== ViewerTypes.MULTI) {
         var onDelete_1 = props.onDelete, isByMe = props.isByMe, disableDelete_1 = props.disableDelete, className = props.className;
         return (isByMe)
-            ? (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete ".concat(className) },
-                React.createElement(ui_Icon.default, { className: disableDelete_1 ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete_1 ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function (e) { if (!disableDelete_1) {
+            ? (React__default.default.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete ".concat(className) },
+                React__default.default.createElement(ui_Icon.default, { className: disableDelete_1 ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete_1 ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function (e) { if (!disableDelete_1) {
                         onDelete_1 === null || onDelete_1 === void 0 ? void 0 : onDelete_1(e);
                     } } })))
-            : React.createElement(React.Fragment, null);
+            : React__default.default.createElement(React__default.default.Fragment, null);
     }
-    return React.createElement(React.Fragment, null);
+    return React__default.default.createElement(React__default.default.Fragment, null);
 }
 
 // this is a slider component that is used to navigate between images
 function Slider(props) {
     if (props.viewerType === ViewerTypes.MULTI) {
         var onClickLeft_1 = props.onClickLeft, onClickRight_1 = props.onClickRight;
-        return (React.createElement("div", { className: "sendbird-file-viewer-slider" },
-            React.createElement("div", { className: "sendbird-file-viewer-arrow--left" },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SLIDE_LEFT, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
+        return (React__default.default.createElement("div", { className: "sendbird-file-viewer-slider" },
+            React__default.default.createElement("div", { className: "sendbird-file-viewer-arrow--left" },
+                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SLIDE_LEFT, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
                         onClickLeft_1 === null || onClickLeft_1 === void 0 ? void 0 : onClickLeft_1();
                         e.stopPropagation();
                     } })),
-            React.createElement("div", { className: "sendbird-file-viewer-arrow--right" },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SLIDE_LEFT, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
+            React__default.default.createElement("div", { className: "sendbird-file-viewer-arrow--right" },
+                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SLIDE_LEFT, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH, onClick: function (e) {
                         e.stopPropagation();
                         onClickRight_1 === null || onClickRight_1 === void 0 ? void 0 : onClickRight_1();
                     } }))));
     }
     // return empty fragment if viewerType is not ViewerTypes.MULTI
-    return React.createElement(React.Fragment, null);
+    return React__default.default.createElement(React__default.default.Fragment, null);
 }
 
 var FileViewerComponent = function (props) {
@@ -100,39 +104,39 @@ var FileViewerComponent = function (props) {
     });
     var _b = mapFileViewerComponentProps({ props: props }), name = _b.name, type = _b.type, url = _b.url;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement(ui_Modal.Modal, { onClose: onClose },
-        React.createElement("div", { className: "sendbird-fileviewer", "data-testid": "sendbird-fileviewer", onKeyDown: onKeyDown, 
+    return (React__default.default.createElement(ui_Modal.Modal, { onClose: onClose },
+        React__default.default.createElement("div", { className: "sendbird-fileviewer", "data-testid": "sendbird-fileviewer", onKeyDown: onKeyDown, 
             // to focus
             tabIndex: 1, ref: ref },
-            React.createElement("div", { className: "sendbird-fileviewer__header" },
-                React.createElement("div", { className: "sendbird-fileviewer__header__left" },
-                    React.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
-                        React.createElement(ui_Avatar.Avatar, { height: "32px", width: "32px", src: profileUrl })),
-                    React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__filename", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, name),
-                    React.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.createElement("div", { className: "sendbird-fileviewer__header__right" },
-                    index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
-                        React.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
-                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DOWNLOAD, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
-                        React.createElement(DeleteButton, _tslib.__assign({ className: 'sendbird-fileviewer__header__right__actions__delete' }, props)))),
-                    React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__close" },
-                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function (e) { return onClose === null || onClose === void 0 ? void 0 : onClose(e); } })))),
-            React.createElement("div", { className: "sendbird-fileviewer__content" },
-                index.isVideo(type) && (React.createElement("video", { controls: true, className: "sendbird-fileviewer__content__video" },
-                    React.createElement("source", { src: url, type: type }))),
-                index.isImage(type) && (React.createElement("img", { src: url, alt: name, className: props.viewerType === ViewerTypes.MULTI
+            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" })),
+                        React__default.default.createElement(DeleteButton, _tslib.__assign({ className: 'sendbird-fileviewer__header__right__actions__delete' }, props)))),
+                    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: function (e) { return onClose === null || onClose === void 0 ? void 0 : onClose(e); } })))),
+            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: props.viewerType === ViewerTypes.MULTI
                         ? 'sendbird-fileviewer__content__img__multi'
                         : 'sendbird-fileviewer__content__img' })),
-                !index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__content__unsupported" },
-                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))),
-                React.createElement(Slider, _tslib.__assign({}, props))))));
+                !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 }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message'))),
+                React__default.default.createElement(Slider, _tslib.__assign({}, props))))));
 };
 function FileViewer(_a) {
     var _b, _c, _d;
     var message = _a.message, _e = _a.statefulFileInfoList, statefulFileInfoList = _e === void 0 ? [] : _e, onClose = _a.onClose, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, onDelete = _a.onDelete, currentIndex = _a.currentIndex, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onDownloadClick = _a.onDownloadClick;
     if (index.isMultipleFilesMessage(message)) {
         var castedMessage = message;
-        return (React.createElement(FileViewerComponent, { profileUrl: castedMessage.sender.profileUrl, nickname: castedMessage.sender.nickname, viewerType: ViewerTypes.MULTI, fileInfoList: statefulFileInfoList.filter(function (fileInfo) {
+        return (React__default.default.createElement(FileViewerComponent, { profileUrl: castedMessage.sender.profileUrl, nickname: castedMessage.sender.nickname, viewerType: ViewerTypes.MULTI, fileInfoList: statefulFileInfoList.filter(function (fileInfo) {
                 return fileInfo.url; // Caution: This assumes that defined url means file upload has completed.
             }).map(function (fileInfo) {
                 return {
@@ -144,9 +148,9 @@ function FileViewer(_a) {
     }
     else if (index.isFileMessage(message)) {
         var castedMessage = message;
-        return reactDom.createPortal((React.createElement(FileViewerComponent, { profileUrl: (_b = castedMessage.sender) === null || _b === void 0 ? void 0 : _b.profileUrl, nickname: (_c = castedMessage.sender) === null || _c === void 0 ? void 0 : _c.nickname, name: castedMessage.name, type: castedMessage.type, url: castedMessage === null || castedMessage === void 0 ? void 0 : castedMessage.url, isByMe: isByMe, disableDelete: (((_d = castedMessage.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) || 0) > 0, onClose: onClose, onDelete: onDelete || utils.noop, onDownloadClick: onDownloadClick })), document.getElementById(ui_Modal.MODAL_ROOT));
+        return reactDom.createPortal((React__default.default.createElement(FileViewerComponent, { profileUrl: (_b = castedMessage.sender) === null || _b === void 0 ? void 0 : _b.profileUrl, nickname: (_c = castedMessage.sender) === null || _c === void 0 ? void 0 : _c.nickname, name: castedMessage.name, type: castedMessage.type, url: castedMessage === null || castedMessage === void 0 ? void 0 : castedMessage.url, isByMe: isByMe, disableDelete: (((_d = castedMessage.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) || 0) > 0, onClose: onClose, onDelete: onDelete || utils.noop, onDownloadClick: onDownloadClick })), document.getElementById(ui_Modal.MODAL_ROOT));
     }
-    return React.createElement(React.Fragment, null);
+    return React__default.default.createElement(React__default.default.Fragment, null);
 }
 
 exports.FileViewerComponent = FileViewerComponent;

package/cjs/ui/FileViewer.js.map

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

package/cjs/ui/Header.js

@@ -2,16 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
-var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
+var MediaQueryContext = require('../chunks/bundle-DW5WyVEg.js');
 var ui_TextButton = require('./TextButton.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var utils = require('../chunks/bundle-CO52Wsr3.js');
-require('../chunks/bundle-CrkUdg03.js');
-require('../chunks/bundle-8gOOVKMq.js');
+var utils = require('../chunks/bundle-BsUVmQmx.js');
+require('../chunks/bundle-CqS517qU.js');
+require('../chunks/bundle-ikSCkayP.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Header = function (_a) {
     var _b;
@@ -23,25 +27,25 @@ var Header = function (_a) {
     catch (err) {
         // TODO: handle it
     }
-    return (React.createElement("div", { className: utils.classnames('sendbird-ui-header', className), "data-testid": "sendbird-ui-header" },
-        renderLeft ? (React.createElement("div", { className: utils.classnames('sendbird-ui-header__left', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderLeft === null || renderLeft === void 0 ? void 0 : renderLeft())) : null,
-        React.createElement("div", { className: "sendbird-ui-header__middle" }, renderMiddle === null || renderMiddle === void 0 ? void 0 : renderMiddle()),
-        renderRight ? (React.createElement("div", { className: utils.classnames('sendbird-ui-header__right', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderRight === null || renderRight === void 0 ? void 0 : renderRight())) : null));
+    return (React__default.default.createElement("div", { className: utils.classnames('sendbird-ui-header', className), "data-testid": "sendbird-ui-header" },
+        renderLeft ? (React__default.default.createElement("div", { className: utils.classnames('sendbird-ui-header__left', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderLeft === null || renderLeft === void 0 ? void 0 : renderLeft())) : null,
+        React__default.default.createElement("div", { className: "sendbird-ui-header__middle" }, renderMiddle === null || renderMiddle === void 0 ? void 0 : renderMiddle()),
+        renderRight ? (React__default.default.createElement("div", { className: utils.classnames('sendbird-ui-header__right', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderRight === null || renderRight === void 0 ? void 0 : renderRight())) : null));
 };
 var Title = function (_a) {
     var title = _a.title, subtitle = _a.subtitle, onClickSubtitle = _a.onClickSubtitle;
-    return (React.createElement("div", { className: "sendbird-ui-header__middle" },
-        title && (React.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, title)),
-        subtitle && (onClickSubtitle ? (React.createElement(ui_TextButton, { className: "sendbird-ui-header__middle__subtitle__container", onClick: onClickSubtitle, disableUnderline: true },
-            React.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__subtitle", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subtitle))) : (React.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__subtitle", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subtitle)))));
+    return (React__default.default.createElement("div", { className: "sendbird-ui-header__middle" },
+        title && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, title)),
+        subtitle && (onClickSubtitle ? (React__default.default.createElement(ui_TextButton, { className: "sendbird-ui-header__middle__subtitle__container", onClick: onClickSubtitle, disableUnderline: true },
+            React__default.default.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__subtitle", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subtitle))) : (React__default.default.createElement(ui_Label.Label, { className: "sendbird-ui-header__middle__subtitle", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, subtitle)))));
 };
 var IconButton = function (_a) {
-    var className = _a.className, onClick = _a.onClick, type = _a.type, color = _a.color, _b = _a.width, width = _b === void 0 ? '32px' : _b, _c = _a.height, height = _c === void 0 ? '32px' : _c, _d = _a.renderIcon, renderIcon = _d === void 0 ? function (props) { return React.createElement(Icon, _tslib.__assign({}, props)); } : _d;
-    return (React.createElement(ui_IconButton, { className: className, width: width, height: height, onClick: onClick }, renderIcon({ type: type, color: color })));
+    var className = _a.className, onClick = _a.onClick, type = _a.type, color = _a.color, _b = _a.width, width = _b === void 0 ? '32px' : _b, _c = _a.height, height = _c === void 0 ? '32px' : _c, _d = _a.renderIcon, renderIcon = _d === void 0 ? function (props) { return React__default.default.createElement(Icon, _tslib.__assign({}, props)); } : _d;
+    return (React__default.default.createElement(ui_IconButton, { className: className, width: width, height: height, onClick: onClick }, renderIcon({ type: type, color: color })));
 };
 var Icon = function (_a) {
     var className = _a.className, type = _a.type, color = _a.color, _b = _a.width, width = _b === void 0 ? '22px' : _b, _c = _a.height, height = _c === void 0 ? '22px' : _c, _d = _a.onClick, onClick = _d === void 0 ? utils.noop : _d;
-    return (React.createElement(ui_Icon.default, { className: className, type: type, fillColor: color, width: width, height: height, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }));
+    return (React__default.default.createElement(ui_Icon.default, { className: className, type: type, fillColor: color, width: width, height: height, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }));
 };
 var Header$1 = Object.assign(Header, { Title: Title, IconButton: IconButton, Icon: Icon });
 

package/cjs/ui/Header.js.map

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

package/cjs/ui/Icon.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var React = require('react');
-var utils = require('../chunks/bundle-CO52Wsr3.js');
+var utils = require('../chunks/bundle-BsUVmQmx.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -23,7 +24,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 /* eslint-disable no-redeclare */
 var Types = {
@@ -974,66 +975,66 @@ const SvgIconFeedbackDislike = props => /*#__PURE__*/React__namespace.createElem
 
 function changeTypeToIconComponent(type) {
     switch (type) {
-        case Types.ADD: return React.createElement(SvgIconAdd, null);
-        case Types.ARROW_LEFT: return React.createElement(SvgIconArrowLeft, null);
-        case Types.ATTACH: return React.createElement(SvgIconAttach, null);
-        case Types.AUDIO_ON_LINED: return React.createElement(SvgIconAudioOnLined, null);
-        case Types.BAN: return React.createElement(SvgIconBan, null);
-        case Types.BROADCAST: return React.createElement(SvgIconBroadcast, null);
-        case Types.CAMERA: return React.createElement(SvgIconCamera, null);
-        case Types.CHANNELS: return React.createElement(SvgIconChannels, null);
-        case Types.CHAT: return React.createElement(SvgIconChat, null);
-        case Types.CHAT_FILLED: return React.createElement(SvgIconChatFilled, null);
-        case Types.CHEVRON_DOWN: return React.createElement(SvgIconChevronDown, null);
-        case Types.CHEVRON_RIGHT: return React.createElement(SvgIconChevronRight, null);
-        case Types.CLOSE: return React.createElement(SvgIconClose, null);
-        case Types.COLLAPSE: return React.createElement(SvgIconCollapse, null);
-        case Types.COPY: return React.createElement(SvgIconCopy, null);
-        case Types.CREATE: return React.createElement(SvgIconCreate, null);
-        case Types.DELETE: return React.createElement(SvgIconDelete, null);
-        case Types.DISCONNECTED: return React.createElement(SvgIconDisconnected, null);
-        case Types.DOCUMENT: return React.createElement(SvgIconDocument, null);
-        case Types.DONE: return React.createElement(SvgIconDone, null);
-        case Types.DONE_ALL: return React.createElement(SvgIconDoneAll, null);
-        case Types.DOWNLOAD: return React.createElement(SvgIconDownload, null);
-        case Types.EDIT: return React.createElement(SvgIconEdit, null);
-        case Types.EMOJI_MORE: return React.createElement(SvgIconEmojiMore, null);
-        case Types.ERROR: return React.createElement(SvgIconError, null);
-        case Types.EXPAND: return React.createElement(SvgIconExpand, null);
-        case Types.FILE_AUDIO: return React.createElement(SvgIconFileAudio, null);
-        case Types.FILE_DOCUMENT: return React.createElement(SvgIconFileDocument, null);
-        case Types.FREEZE: return React.createElement(SvgIconFreeze, null);
-        case Types.GIF: return React.createElement(SvgIconGif, null);
-        case Types.INFO: return React.createElement(SvgIconInfo, null);
-        case Types.LEAVE: return React.createElement(SvgIconLeave, null);
-        case Types.MEMBERS: return React.createElement(SvgIconMembers, null);
-        case Types.MESSAGE: return React.createElement(SvgIconMessage, null);
-        case Types.MODERATIONS: return React.createElement(SvgIconModerations, null);
-        case Types.MORE: return React.createElement(SvgIconMore, null);
-        case Types.MUTE: return React.createElement(SvgIconMute, null);
-        case Types.NOTIFICATIONS: return React.createElement(SvgIconNotifications, null);
-        case Types.NOTIFICATIONS_OFF_FILLED: return React.createElement(SvgIconNotificationsOffFilled, null);
-        case Types.OPERATOR: return React.createElement(SvgIconOperator, null);
-        case Types.PHOTO: return React.createElement(SvgIconPhoto, null);
-        case Types.PLAY: return React.createElement(SvgIconPlay, null);
-        case Types.PLUS: return React.createElement(SvgIconPlus, null);
-        case Types.QUESTION: return React.createElement(SvgIconQuestion, null);
-        case Types.REFRESH: return React.createElement(SvgIconRefresh, null);
-        case Types.REMOVE: return React.createElement(SvgIconRemove, null);
-        case Types.REPLY: return React.createElement(SvgIconReplyFilled, null);
-        case Types.SEARCH: return React.createElement(SvgIconSearch, null);
-        case Types.SEND: return React.createElement(SvgIconSend, null);
-        case Types.SETTINGS_FILLED: return React.createElement(SvgIconSettingsFilled, null);
-        case Types.SLIDE_LEFT: return React.createElement(SvgIconSlideLeft, null);
-        case Types.SPINNER: return React.createElement(SvgIconSpinner, null);
-        case Types.SUPERGROUP: return React.createElement(SvgIconSupergroup, null);
-        case Types.THREAD: return React.createElement(SvgIconThread, null);
-        case Types.THUMBNAIL_NONE: return React.createElement(SvgIconThumbnailNone, null);
-        case Types.TOGGLE_OFF: return React.createElement(SvgIconToggleoff, null);
-        case Types.TOGGLE_ON: return React.createElement(SvgIconToggleon, null);
-        case Types.USER: return React.createElement(SvgIconUser, null);
-        case Types.FEEDBACK_LIKE: return React.createElement(SvgIconFeedbackLike, null);
-        case Types.FEEDBACK_DISLIKE: return React.createElement(SvgIconFeedbackDislike, null);
+        case Types.ADD: return React__namespace.default.createElement(SvgIconAdd, null);
+        case Types.ARROW_LEFT: return React__namespace.default.createElement(SvgIconArrowLeft, null);
+        case Types.ATTACH: return React__namespace.default.createElement(SvgIconAttach, null);
+        case Types.AUDIO_ON_LINED: return React__namespace.default.createElement(SvgIconAudioOnLined, null);
+        case Types.BAN: return React__namespace.default.createElement(SvgIconBan, null);
+        case Types.BROADCAST: return React__namespace.default.createElement(SvgIconBroadcast, null);
+        case Types.CAMERA: return React__namespace.default.createElement(SvgIconCamera, null);
+        case Types.CHANNELS: return React__namespace.default.createElement(SvgIconChannels, null);
+        case Types.CHAT: return React__namespace.default.createElement(SvgIconChat, null);
+        case Types.CHAT_FILLED: return React__namespace.default.createElement(SvgIconChatFilled, null);
+        case Types.CHEVRON_DOWN: return React__namespace.default.createElement(SvgIconChevronDown, null);
+        case Types.CHEVRON_RIGHT: return React__namespace.default.createElement(SvgIconChevronRight, null);
+        case Types.CLOSE: return React__namespace.default.createElement(SvgIconClose, null);
+        case Types.COLLAPSE: return React__namespace.default.createElement(SvgIconCollapse, null);
+        case Types.COPY: return React__namespace.default.createElement(SvgIconCopy, null);
+        case Types.CREATE: return React__namespace.default.createElement(SvgIconCreate, null);
+        case Types.DELETE: return React__namespace.default.createElement(SvgIconDelete, null);
+        case Types.DISCONNECTED: return React__namespace.default.createElement(SvgIconDisconnected, null);
+        case Types.DOCUMENT: return React__namespace.default.createElement(SvgIconDocument, null);
+        case Types.DONE: return React__namespace.default.createElement(SvgIconDone, null);
+        case Types.DONE_ALL: return React__namespace.default.createElement(SvgIconDoneAll, null);
+        case Types.DOWNLOAD: return React__namespace.default.createElement(SvgIconDownload, null);
+        case Types.EDIT: return React__namespace.default.createElement(SvgIconEdit, null);
+        case Types.EMOJI_MORE: return React__namespace.default.createElement(SvgIconEmojiMore, null);
+        case Types.ERROR: return React__namespace.default.createElement(SvgIconError, null);
+        case Types.EXPAND: return React__namespace.default.createElement(SvgIconExpand, null);
+        case Types.FILE_AUDIO: return React__namespace.default.createElement(SvgIconFileAudio, null);
+        case Types.FILE_DOCUMENT: return React__namespace.default.createElement(SvgIconFileDocument, null);
+        case Types.FREEZE: return React__namespace.default.createElement(SvgIconFreeze, null);
+        case Types.GIF: return React__namespace.default.createElement(SvgIconGif, null);
+        case Types.INFO: return React__namespace.default.createElement(SvgIconInfo, null);
+        case Types.LEAVE: return React__namespace.default.createElement(SvgIconLeave, null);
+        case Types.MEMBERS: return React__namespace.default.createElement(SvgIconMembers, null);
+        case Types.MESSAGE: return React__namespace.default.createElement(SvgIconMessage, null);
+        case Types.MODERATIONS: return React__namespace.default.createElement(SvgIconModerations, null);
+        case Types.MORE: return React__namespace.default.createElement(SvgIconMore, null);
+        case Types.MUTE: return React__namespace.default.createElement(SvgIconMute, null);
+        case Types.NOTIFICATIONS: return React__namespace.default.createElement(SvgIconNotifications, null);
+        case Types.NOTIFICATIONS_OFF_FILLED: return React__namespace.default.createElement(SvgIconNotificationsOffFilled, null);
+        case Types.OPERATOR: return React__namespace.default.createElement(SvgIconOperator, null);
+        case Types.PHOTO: return React__namespace.default.createElement(SvgIconPhoto, null);
+        case Types.PLAY: return React__namespace.default.createElement(SvgIconPlay, null);
+        case Types.PLUS: return React__namespace.default.createElement(SvgIconPlus, null);
+        case Types.QUESTION: return React__namespace.default.createElement(SvgIconQuestion, null);
+        case Types.REFRESH: return React__namespace.default.createElement(SvgIconRefresh, null);
+        case Types.REMOVE: return React__namespace.default.createElement(SvgIconRemove, null);
+        case Types.REPLY: return React__namespace.default.createElement(SvgIconReplyFilled, null);
+        case Types.SEARCH: return React__namespace.default.createElement(SvgIconSearch, null);
+        case Types.SEND: return React__namespace.default.createElement(SvgIconSend, null);
+        case Types.SETTINGS_FILLED: return React__namespace.default.createElement(SvgIconSettingsFilled, null);
+        case Types.SLIDE_LEFT: return React__namespace.default.createElement(SvgIconSlideLeft, null);
+        case Types.SPINNER: return React__namespace.default.createElement(SvgIconSpinner, null);
+        case Types.SUPERGROUP: return React__namespace.default.createElement(SvgIconSupergroup, null);
+        case Types.THREAD: return React__namespace.default.createElement(SvgIconThread, null);
+        case Types.THUMBNAIL_NONE: return React__namespace.default.createElement(SvgIconThumbnailNone, null);
+        case Types.TOGGLE_OFF: return React__namespace.default.createElement(SvgIconToggleoff, null);
+        case Types.TOGGLE_ON: return React__namespace.default.createElement(SvgIconToggleon, null);
+        case Types.USER: return React__namespace.default.createElement(SvgIconUser, null);
+        case Types.FEEDBACK_LIKE: return React__namespace.default.createElement(SvgIconFeedbackLike, null);
+        case Types.FEEDBACK_DISLIKE: return React__namespace.default.createElement(SvgIconFeedbackDislike, null);
         default: return 'icon'; // If you see this text 'icon' replace icon for it
     }
 }
@@ -1045,7 +1046,7 @@ function Icon(_a) {
         height: typeof height === 'string' ? height : "".concat(height, "px"),
         minHeight: typeof height === 'string' ? height : "".concat(height, "px"),
     };
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+    return (React__namespace.default.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-icon',
             changeTypeToIconClassName(type),
             changeColorToClassName(fillColor),