@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/cjs/ui/Accordion.js

@@ -5,32 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 var ui_AccordionGroup = require('./AccordionGroup.js');
-require('../chunks/bundle-BwzMNAFs.js');
-require('../chunks/bundle-_VH8bxGE.js');
+require('../chunks/bundle-HGbi-rCv.js');
+require('../chunks/bundle-BoLhr7Ko.js');
 
-var Accordion = function (_a) {
-    var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;
-    var _b = ui_AccordionGroup.useAccordionGroupContext(), openedListKeys = _b.openedListKeys, addOpenedListKey = _b.addOpenedListKey, removeOpenedListKey = _b.removeOpenedListKey;
-    var isOpened = React.useMemo(function () { return openedListKeys.includes(id); }, [openedListKeys]);
-    var handleClick = function () {
-        if (isOpened) {
-            removeOpenedListKey(id);
-        }
-        else {
-            addOpenedListKey(id);
-        }
-    };
-    return (React.createElement("div", { className: "sendbird-accordion ".concat(className, " ").concat(isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed') },
-        React.createElement("div", { className: "sendbird-accordion__panel-header", id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
-            renderTitle(),
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CHEVRON_RIGHT, className: [
-                    'sendbird-accordion__panel-icon-right',
-                    'sendbird-accordion__panel-icon--chevron',
-                    (isOpened ? 'sendbird-accordion__panel-icon--open' : ''),
-                ].join(' '), height: "24px", width: "24px" })),
-        isOpened && (React.createElement("div", { className: "sendbird-accordion-opened-list" },
-            React.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
-            renderFooter && (React.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
+var Accordion = function (_a) {
+    var className = _a.className, id = _a.id, renderTitle = _a.renderTitle, renderContent = _a.renderContent, renderFooter = _a.renderFooter;
+    var _b = ui_AccordionGroup.useAccordionGroupContext(), openedListKeys = _b.openedListKeys, addOpenedListKey = _b.addOpenedListKey, removeOpenedListKey = _b.removeOpenedListKey;
+    var isOpened = React.useMemo(function () { return openedListKeys.includes(id); }, [openedListKeys]);
+    var handleClick = function () {
+        if (isOpened) {
+            removeOpenedListKey(id);
+        }
+        else {
+            addOpenedListKey(id);
+        }
+    };
+    return (React.createElement("div", { className: "sendbird-accordion ".concat(className, " ").concat(isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed') },
+        React.createElement("div", { className: "sendbird-accordion__panel-header", id: id, role: "switch", "aria-checked": false, onClick: handleClick, onKeyDown: handleClick, tabIndex: 0 },
+            renderTitle(),
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CHEVRON_RIGHT, className: [
+                    'sendbird-accordion__panel-icon-right',
+                    'sendbird-accordion__panel-icon--chevron',
+                    (isOpened ? 'sendbird-accordion__panel-icon--open' : ''),
+                ].join(' '), height: "24px", width: "24px" })),
+        isOpened && (React.createElement("div", { className: "sendbird-accordion-opened-list" },
+            React.createElement("div", { className: "sendbird-accordion__list" }, renderContent()),
+            renderFooter && (React.createElement("div", { className: "sendbird-accordion__footer" }, renderFooter()))))));
 };
 
 var AccordionGroup = ui_AccordionGroup.AccordionGroupProvider;

package/cjs/ui/AccordionGroup.js

@@ -3,47 +3,47 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utils = require('../chunks/bundle-_VH8bxGE.js');
+var utils = require('../chunks/bundle-BoLhr7Ko.js');
 
-var AccordionGroupContext = React.createContext({
-    openedListKeys: [],
-    addOpenedListKey: utils.noop,
-    removeOpenedListKey: utils.noop,
-    clearOpenedListKeys: utils.noop,
-    allowMultipleOpen: false,
-});
-var AccordionGroupProvider = function (_a) {
-    var className = _a.className, children = _a.children, _b = _a.allowMultipleOpen, allowMultipleOpen = _b === void 0 ? false : _b;
-    var _c = React.useState([]), openedListKeys = _c[0], setOpenedListKeys = _c[1];
-    var addOpenedListKey = function (key) {
-        setOpenedListKeys(function (prevList) {
-            if (!allowMultipleOpen) {
-                return [key];
-            }
-            prevList.push(key);
-            return prevList;
-        });
-    };
-    var removeOpenedListKey = function (key) {
-        setOpenedListKeys(function (prevList) { return prevList.filter(function (k) { return k !== key; }); });
-    };
-    var clearOpenedListKeys = function () {
-        setOpenedListKeys([]);
-    };
-    return (React.createElement("div", { className: "sendbird-accordion-group-provider ".concat(className) },
-        React.createElement(AccordionGroupContext.Provider, { value: {
-                openedListKeys: openedListKeys,
-                addOpenedListKey: addOpenedListKey,
-                removeOpenedListKey: removeOpenedListKey,
-                clearOpenedListKeys: clearOpenedListKeys,
-                allowMultipleOpen: allowMultipleOpen,
-            } }, children)));
-};
-var useAccordionGroupContext = function () {
-    var context = React.useContext(AccordionGroupContext);
-    if (!context)
-        throw new Error('No accordion group context available. Make sure you are rending <AccordionGroupContext />.');
-    return context;
+var AccordionGroupContext = React.createContext({
+    openedListKeys: [],
+    addOpenedListKey: utils.noop,
+    removeOpenedListKey: utils.noop,
+    clearOpenedListKeys: utils.noop,
+    allowMultipleOpen: false,
+});
+var AccordionGroupProvider = function (_a) {
+    var className = _a.className, children = _a.children, _b = _a.allowMultipleOpen, allowMultipleOpen = _b === void 0 ? false : _b;
+    var _c = React.useState([]), openedListKeys = _c[0], setOpenedListKeys = _c[1];
+    var addOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) {
+            if (!allowMultipleOpen) {
+                return [key];
+            }
+            prevList.push(key);
+            return prevList;
+        });
+    };
+    var removeOpenedListKey = function (key) {
+        setOpenedListKeys(function (prevList) { return prevList.filter(function (k) { return k !== key; }); });
+    };
+    var clearOpenedListKeys = function () {
+        setOpenedListKeys([]);
+    };
+    return (React.createElement("div", { className: "sendbird-accordion-group-provider ".concat(className) },
+        React.createElement(AccordionGroupContext.Provider, { value: {
+                openedListKeys: openedListKeys,
+                addOpenedListKey: addOpenedListKey,
+                removeOpenedListKey: removeOpenedListKey,
+                clearOpenedListKeys: clearOpenedListKeys,
+                allowMultipleOpen: allowMultipleOpen,
+            } }, children)));
+};
+var useAccordionGroupContext = function () {
+    var context = React.useContext(AccordionGroupContext);
+    if (!context)
+        throw new Error('No accordion group context available. Make sure you are rending <AccordionGroupContext />.');
+    return context;
 };
 
 exports.AccordionGroupContext = AccordionGroupContext;

package/cjs/ui/AdminMessage.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-require('../chunks/bundle-DXrpp6AJ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+require('../chunks/bundle-gtkPlUrw.js');
 
-function AdminMessage(_a) {
-    var _b;
-    var _c = _a.className, className = _c === void 0 ? '' : _c, message = _a.message;
-    if (!((message === null || message === void 0 ? void 0 : message.isAdminMessage) || (message === null || message === void 0 ? void 0 : message.messageType)) || !((_b = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _b === void 0 ? void 0 : _b.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
-        return null;
-    }
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-admin-message',
-        ], false).join(' ') },
-        React.createElement(ui_Label.Label, { className: "sendbird-admin-message__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, message === null || message === void 0 ? void 0 : message.message)));
+function AdminMessage(_a) {
+    var _b;
+    var _c = _a.className, className = _c === void 0 ? '' : _c, message = _a.message;
+    if (!((message === null || message === void 0 ? void 0 : message.isAdminMessage) || (message === null || message === void 0 ? void 0 : message.messageType)) || !((_b = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _b === void 0 ? void 0 : _b.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
+        return null;
+    }
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-admin-message',
+        ], false).join(' ') },
+        React.createElement(ui_Label.Label, { className: "sendbird-admin-message__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, message === null || message === void 0 ? void 0 : message.message)));
 }
 
 module.exports = AdminMessage;

package/cjs/ui/Avatar.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-BwzMNAFs.js');
+require('../chunks/bundle-HGbi-rCv.js');
 require('react');
 require('./ImageRenderer.js');
-var ui_Avatar = require('../chunks/bundle-BjHWj0YM.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-D1gE5kRR.js');
+var ui_Avatar = require('../chunks/bundle-DxSB9NRz.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-C93-onMF.js');
 require('./Icon.js');
 
 

package/cjs/ui/Badge.js

@@ -1,25 +1,25 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-var LocalizationContext = require('../chunks/bundle-Cg6exdly.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-XPPVGabQ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+var LocalizationContext = require('../chunks/bundle-oeWNUdCB.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-BWGOXLHb.js');
 
-function Badge(_a) {
-    var count = _a.count, _b = _a.maxLevel, maxLevel = _b === void 0 ? 2 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    var maximumNumber = parseInt('9'.repeat(maxLevel > 6 ? 6 : maxLevel), 10);
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-badge',
-        ], false).join(' ') },
-        React.createElement("div", { className: "sendbird-badge__text" },
-            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONCONTENT_1 }, typeof count === 'string'
-                ? count
-                : count > maximumNumber
-                    ? "".concat(maximumNumber).concat(stringSet.BADGE__OVER)
-                    : count))));
+function Badge(_a) {
+    var count = _a.count, _b = _a.maxLevel, maxLevel = _b === void 0 ? 2 : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var maximumNumber = parseInt('9'.repeat(maxLevel > 6 ? 6 : maxLevel), 10);
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-badge',
+        ], false).join(' ') },
+        React.createElement("div", { className: "sendbird-badge__text" },
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONCONTENT_1 }, typeof count === 'string'
+                ? count
+                : count > maximumNumber
+                    ? "".concat(maximumNumber).concat(stringSet.BADGE__OVER)
+                    : count))));
 }
 
 module.exports = Badge;

package/cjs/ui/BottomSheet.js

@@ -2,36 +2,50 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
-require('../hooks/useModal.js');
-var ui_Modal = require('../chunks/bundle-BhbVr0qd.js');
-require('../chunks/bundle-BwzMNAFs.js');
-require('../chunks/bundle-CN-HA7zS.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-Cg6exdly.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-XPPVGabQ.js');
-require('../chunks/bundle-xpQ8gY1k.js');
+var ui_Modal = require('../chunks/bundle-CZfcXYaX.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../chunks/bundle-HGbi-rCv.js');
+require('../chunks/bundle-wl1uuzU7.js');
+require('@sendbird/chat/groupChannel');
+require('../utils/message/getOutgoingMessageState.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-oeWNUdCB.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-BWGOXLHb.js');
+require('../chunks/bundle-BwQ4BJif.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-Cm_quRwQ.js');
+require('../chunks/bundle-5_kPn4wU.js');
 require('./Icon.js');
+require('@sendbird/uikit-tools');
+require('../withSendbird.js');
+require('css-vars-ponyfill');
+require('@sendbird/chat');
+require('../chunks/bundle-1XtsxT8L.js');
+require('@sendbird/chat/openChannel');
+require('../chunks/bundle-L3FEqZsK.js');
+require('../chunks/bundle-DfcEln0Z.js');
+require('../chunks/bundle-BTU876jx.js');
 
-var BottomSheet = function (props) {
-    var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, onBackdropClick = props.onBackdropClick;
-    // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348
-    var portalRoot = React.useRef();
-    portalRoot.current = document.getElementById(ui_Modal.MODAL_ROOT);
-    if (!portalRoot.current) {
-        portalRoot.current = document.createElement('div');
-        portalRoot.current.setAttribute('id', ui_Modal.MODAL_ROOT);
-        document.body.appendChild(portalRoot.current);
-    }
-    return reactDom.createPortal(React.createElement("div", { className: "".concat(className, " sendbird-bottomsheet") },
-        React.createElement("div", { className: 'sendbird-bottomsheet__content', role: 'dialog', "aria-modal": 'true', "aria-expanded": 'true' }, children),
-        React.createElement("div", { className: "\n          sendbird-bottomsheet__backdrop\n        ", onClick: function (e) {
-                e === null || e === void 0 ? void 0 : e.stopPropagation();
-                onBackdropClick();
-            } })), portalRoot.current);
+var BottomSheet = function (props) {
+    var _a, _b, _c;
+    var _d = props.className, className = _d === void 0 ? '' : _d, children = props.children, onBackdropClick = props.onBackdropClick;
+    var logger = (_b = (_a = useSendbirdStateContext.useSendbirdStateContext()) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.logger;
+    // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348
+    var portalRoot = React.useRef();
+    portalRoot.current = document.getElementById(ui_Modal.MODAL_ROOT);
+    if (!portalRoot.current) {
+        portalRoot.current = document.createElement('div');
+        portalRoot.current.setAttribute('id', ui_Modal.MODAL_ROOT);
+        document.body.appendChild(portalRoot.current);
+        (_c = logger === null || logger === void 0 ? void 0 : logger.warning) === null || _c === void 0 ? void 0 : _c.call(logger, '@sendbird/uikit-react/ui/BottomSheet | Should put a ModalRoot to use the BottomSheet.');
+    }
+    return reactDom.createPortal(React.createElement("div", { className: "".concat(className, " sendbird-bottomsheet") },
+        React.createElement("div", { className: 'sendbird-bottomsheet__content', role: 'dialog', "aria-modal": 'true', "aria-expanded": 'true' }, children),
+        React.createElement("div", { className: "\n          sendbird-bottomsheet__backdrop\n        ", onClick: function (e) {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                onBackdropClick();
+            } })), portalRoot.current);
 };
 
 module.exports = BottomSheet;

package/cjs/ui/BottomSheet.js.map

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

package/cjs/ui/Button.js

@@ -2,53 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-require('../chunks/bundle-DXrpp6AJ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+require('../chunks/bundle-gtkPlUrw.js');
 
-exports.ButtonTypes = void 0;
-(function (ButtonTypes) {
-    ButtonTypes["PRIMARY"] = "PRIMARY";
-    ButtonTypes["SECONDARY"] = "SECONDARY";
-    ButtonTypes["DANGER"] = "DANGER";
-    ButtonTypes["DISABLED"] = "DISABLED";
-    ButtonTypes["WARNING"] = "WARNING";
-})(exports.ButtonTypes || (exports.ButtonTypes = {}));
-exports.ButtonSizes = void 0;
-(function (ButtonSizes) {
-    ButtonSizes["BIG"] = "BIG";
-    ButtonSizes["SMALL"] = "SMALL";
+exports.ButtonTypes = void 0;
+(function (ButtonTypes) {
+    ButtonTypes["PRIMARY"] = "PRIMARY";
+    ButtonTypes["SECONDARY"] = "SECONDARY";
+    ButtonTypes["DANGER"] = "DANGER";
+    ButtonTypes["DISABLED"] = "DISABLED";
+    ButtonTypes["WARNING"] = "WARNING";
+})(exports.ButtonTypes || (exports.ButtonTypes = {}));
+exports.ButtonSizes = void 0;
+(function (ButtonSizes) {
+    ButtonSizes["BIG"] = "BIG";
+    ButtonSizes["SMALL"] = "SMALL";
 })(exports.ButtonSizes || (exports.ButtonSizes = {}));
 
-function changeTypeToClassName(type) {
-    switch (type) {
-        case exports.ButtonTypes.PRIMARY: return 'sendbird-button--primary';
-        case exports.ButtonTypes.SECONDARY: return 'sendbird-button--secondary';
-        case exports.ButtonTypes.DANGER: return 'sendbird-button--danger';
-        case exports.ButtonTypes.DISABLED: return 'sendbird-button--disabled';
-        case exports.ButtonTypes.WARNING: return 'sendbird-button--warning';
-        default: return null;
-    }
-}
-function changeSizeToClassName(size) {
-    switch (size) {
-        case exports.ButtonSizes.BIG: return 'sendbird-button--big';
-        case exports.ButtonSizes.SMALL: return 'sendbird-button--small';
-        default: return null;
-    }
+function changeTypeToClassName(type) {
+    switch (type) {
+        case exports.ButtonTypes.PRIMARY: return 'sendbird-button--primary';
+        case exports.ButtonTypes.SECONDARY: return 'sendbird-button--secondary';
+        case exports.ButtonTypes.DANGER: return 'sendbird-button--danger';
+        case exports.ButtonTypes.DISABLED: return 'sendbird-button--disabled';
+        case exports.ButtonTypes.WARNING: return 'sendbird-button--warning';
+        default: return null;
+    }
+}
+function changeSizeToClassName(size) {
+    switch (size) {
+        case exports.ButtonSizes.BIG: return 'sendbird-button--big';
+        case exports.ButtonSizes.SMALL: return 'sendbird-button--small';
+        default: return null;
+    }
 }
 
-function Button(_a) {
-    var className = _a.className, _b = _a.type, type = _b === void 0 ? exports.ButtonTypes.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? exports.ButtonSizes.BIG : _c, _d = _a.children, children = _d === void 0 ? 'Button' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f, _g = _a.labelType, labelType = _g === void 0 ? ui_Label.LabelTypography.BUTTON_1 : _g, _h = _a.labelColor, labelColor = _h === void 0 ? ui_Label.LabelColors.ONCONTENT_1 : _h;
-    var injectingClassNames = _tslib.__spreadArray(_tslib.__spreadArray([], ((Array.isArray(className)) ? className : [className]), true), [
-        'sendbird-button',
-        (disabled ? 'sendbird-button__disabled' : ''),
-        changeTypeToClassName(type),
-        changeSizeToClassName(size),
-    ], false).join(' ');
-    return (React.createElement("button", { className: injectingClassNames, type: "button", onClick: onClick, disabled: disabled },
-        React.createElement(ui_Label.Label, { className: "sendbird-button__text", type: labelType, color: labelColor }, children)));
+function Button(_a) {
+    var className = _a.className, _b = _a.type, type = _b === void 0 ? exports.ButtonTypes.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? exports.ButtonSizes.BIG : _c, _d = _a.children, children = _d === void 0 ? 'Button' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f, _g = _a.labelType, labelType = _g === void 0 ? ui_Label.LabelTypography.BUTTON_1 : _g, _h = _a.labelColor, labelColor = _h === void 0 ? ui_Label.LabelColors.ONCONTENT_1 : _h;
+    var injectingClassNames = _tslib.__spreadArray(_tslib.__spreadArray([], ((Array.isArray(className)) ? className : [className]), true), [
+        'sendbird-button',
+        (disabled ? 'sendbird-button__disabled' : ''),
+        changeTypeToClassName(type),
+        changeSizeToClassName(size),
+    ], false).join(' ');
+    return (React.createElement("button", { className: injectingClassNames, type: "button", onClick: onClick, disabled: disabled },
+        React.createElement(ui_Label.Label, { className: "sendbird-button__text", type: labelType, color: labelColor }, children)));
 }
 
 exports.default = Button;

package/cjs/ui/ChannelAvatar.js

@@ -1,30 +1,30 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-BjHWj0YM.js');
+var ui_Avatar = require('../chunks/bundle-DxSB9NRz.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-CGNRfqfQ.js');
-require('../chunks/bundle-BwzMNAFs.js');
+var utils = require('../chunks/bundle-DRp9IuV2.js');
+require('../chunks/bundle-HGbi-rCv.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-D1gE5kRR.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-C93-onMF.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;
-    var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
-    var memoizedAvatar = React.useMemo(function () { return (isBroadcast
-        ? (utils.generateDefaultAvatar(channel)
-            ? (React.createElement("div", { className: "sendbird-chat-header--default-avatar", style: {
-                    width: width,
-                    height: height,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                } },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
-            : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: utils.getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
-        : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [utils.getChannelAvatarSource(channel, userId), theme]);
-    return (React.createElement(React.Fragment, null, memoizedAvatar));
+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;
+    var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
+    var memoizedAvatar = React.useMemo(function () { return (isBroadcast
+        ? (utils.generateDefaultAvatar(channel)
+            ? (React.createElement("div", { className: "sendbird-chat-header--default-avatar", style: {
+                    width: width,
+                    height: height,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
+            : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: utils.getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
+        : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [utils.getChannelAvatarSource(channel, userId), theme]);
+    return (React.createElement(React.Fragment, null, memoizedAvatar));
 }
 
 module.exports = ChannelAvatar;

package/cjs/ui/Checkbox.js

@@ -2,21 +2,21 @@
 
 var React = require('react');
 
-function Checkbox(_a) {
-    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, disabled = _a.disabled, onChange = _a.onChange;
-    var _c = React.useState(checked), isChecked = _c[0], setIsCheck = _c[1];
-    return (React.createElement("label", { className: [
-            'sendbird-checkbox',
-            disabled ? 'disabled' : '',
-        ].join(' '), htmlFor: id },
-        React.createElement("input", { disabled: disabled, id: id, type: "checkbox", checked: isChecked, onClick: function () {
-                if (!disabled)
-                    setIsCheck(!isChecked);
-            }, onChange: onChange }),
-        React.createElement("span", { className: [
-                'sendbird-checkbox--checkmark',
-                disabled ? 'disabled' : '',
-            ].join(' ') })));
+function Checkbox(_a) {
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, disabled = _a.disabled, onChange = _a.onChange;
+    var _c = React.useState(checked), isChecked = _c[0], setIsCheck = _c[1];
+    return (React.createElement("label", { className: [
+            'sendbird-checkbox',
+            disabled ? 'disabled' : '',
+        ].join(' '), htmlFor: id },
+        React.createElement("input", { disabled: disabled, id: id, type: "checkbox", checked: isChecked, onClick: function () {
+                if (!disabled)
+                    setIsCheck(!isChecked);
+            }, onChange: onChange }),
+        React.createElement("span", { className: [
+                'sendbird-checkbox--checkmark',
+                disabled ? 'disabled' : '',
+            ].join(' ') })));
 }
 
 module.exports = Checkbox;

package/cjs/ui/ConnectionStatus.js

@@ -2,18 +2,18 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Cm_quRwQ.js');
-var LocalizationContext = require('../chunks/bundle-Cg6exdly.js');
-require('../chunks/bundle-BwzMNAFs.js');
-require('../chunks/bundle-_VH8bxGE.js');
-require('../chunks/bundle-DXrpp6AJ.js');
-require('../chunks/bundle-XPPVGabQ.js');
+var ui_Label = require('../chunks/bundle-5_kPn4wU.js');
+var LocalizationContext = require('../chunks/bundle-oeWNUdCB.js');
+require('../chunks/bundle-HGbi-rCv.js');
+require('../chunks/bundle-BoLhr7Ko.js');
+require('../chunks/bundle-gtkPlUrw.js');
+require('../chunks/bundle-BWGOXLHb.js');
 
-function ConnectionStatus() {
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement("div", { className: "sendbird-connection-status" },
-        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.TRYING_TO_CONNECT),
-        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DISCONNECTED, fillColor: ui_Icon.IconColors.SENT, width: "14px", height: "14px" })));
+function ConnectionStatus() {
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-connection-status" },
+        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.TRYING_TO_CONNECT),
+        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DISCONNECTED, fillColor: ui_Icon.IconColors.SENT, width: "14px", height: "14px" })));
 }
 
 module.exports = ConnectionStatus;