@sendbird/uikit-react 3.4.6 → 3.4.7-0

package/ui/UserListItem.js

@@ -1,95 +1,96 @@
-import { a as __spreadArray } from '../tslib.es6-d6e50ec3.js';
 import React__default, { useContext } from 'react';
-import { a as UserProfileContext } from '../UserProfileContext-41938ddc.js';
-import { a as LocalizationContext } from '../LocalizationContext-3d8c0b24.js';
+import { a as UserProfileContext } from '../UserProfileContext-a8aa4c0f.js';
+import { a as LocalizationContext } from '../LocalizationContext-9c54e783.js';
 import Avatar from './Avatar.js';
 import MutedAvatarOverlay from './MutedAvatarOverlay.js';
 import Checkbox from './Checkbox.js';
 import UserProfile from './UserProfile.js';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
 import 'prop-types';
-import '../stringSet-9d579825.js';
-import '../index-aaa9b9f8.js';
+import '../stringSet-1f18348a.js';
+import '../index-a9ddd0f5.js';
 import './ImageRenderer.js';
 import './Icon.js';
-import '../uuid-86cb48e0.js';
+import '../uuid-48baadaf.js';
 import '../sendbirdSelectors.js';
-import '../topics-f9301447.js';
-import '../utils-86d65b96.js';
+import '../_rollupPluginBabelHelpers-b2d9bfc5.js';
+import '../topics-d8d10f83.js';
+import '../utils-0c09801e.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../index-e378ca4e.js';
+import '../index-dbe0e004.js';
 import '../utils/message/getOutgoingMessageState.js';
 
-function UserListItem(_a) {
-  var user = _a.user,
-    className = _a.className,
-    checked = _a.checked,
-    checkBox = _a.checkBox,
-    isOperator = _a.isOperator,
-    disabled = _a.disabled,
-    disableMessaging = _a.disableMessaging,
-    currentUser = _a.currentUser,
-    action = _a.action,
-    onChange = _a.onChange;
-  var uniqueKey = user.userId;
-  var actionRef = React__default.useRef(null);
-  var parentRef = React__default.useRef(null);
-  var avatarRef = React__default.useRef(null);
-  var _b = useContext(UserProfileContext),
-    disableUserProfile = _b.disableUserProfile,
-    renderUserProfile = _b.renderUserProfile;
-  var stringSet = useContext(LocalizationContext).stringSet;
+function UserListItem(_ref) {
+  let {
+    user,
+    className,
+    checked,
+    checkBox,
+    isOperator,
+    disabled,
+    disableMessaging,
+    currentUser,
+    action,
+    onChange
+  } = _ref;
+  const uniqueKey = user.userId;
+  const actionRef = React__default.useRef(null);
+  const parentRef = React__default.useRef(null);
+  const avatarRef = React__default.useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = useContext(UserProfileContext);
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-user-list-item'], false).join(' '),
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-user-list-item'].join(' '),
     ref: parentRef
   }, (user === null || user === void 0 ? void 0 : user.isMuted) && /*#__PURE__*/React__default.createElement(MutedAvatarOverlay, {
     height: 40,
     width: 40
   }), /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default.createElement(Avatar, {
-        className: "sendbird-user-list-item__avatar",
-        ref: avatarRef,
-        src: user.profileUrl,
-        width: "40px",
-        height: "40px",
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown();
-          }
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(Avatar, {
+      className: "sendbird-user-list-item__avatar",
+      ref: avatarRef,
+      src: user.profileUrl,
+      width: "40px",
+      height: "40px",
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
         }
-      });
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(MenuItems, {
-        openLeft: true,
-        parentRef: avatarRef
-        // for catching location(x, y) of MenuItems
-        ,
-        parentContainRef: avatarRef
-        // for toggling more options(menus & reactions)
-        ,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
-        }
-      }, renderUserProfile ? renderUserProfile({
-        user: user,
-        currentUserId: currentUser,
-        close: closeDropdown
-      }) : /*#__PURE__*/React__default.createElement(UserProfile, {
-        disableMessaging: disableMessaging,
-        user: user,
-        currentUserId: currentUser,
-        onSuccess: closeDropdown
-      }));
-    }
+      }
+    }),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+      openLeft: true,
+      parentRef: avatarRef
+      // for catching location(x, y) of MenuItems
+      ,
+      parentContainRef: avatarRef
+      // for toggling more options(menus & reactions)
+      ,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user,
+      currentUserId: currentUser,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+      disableMessaging: disableMessaging,
+      user: user,
+      currentUserId: currentUser,
+      onSuccess: closeDropdown
+    }))
   }), /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-user-list-item__title",
     type: LabelTypography.SUBTITLE_1,
@@ -107,9 +108,7 @@ function UserListItem(_a) {
     id: uniqueKey,
     checked: checked,
     disabled: disabled,
-    onChange: function (event) {
-      return onChange(event);
-    }
+    onChange: event => onChange(event)
   })), isOperator && /*#__PURE__*/React__default.createElement(Label, {
     className: ['sendbird-user-list-item__operator', checkBox ? 'checkbox' : ''].join(' '),
     type: LabelTypography.SUBTITLE_2,
@@ -118,8 +117,8 @@ function UserListItem(_a) {
     className: "sendbird-user-list-item__action",
     ref: actionRef
   }, action({
-    actionRef: actionRef,
-    parentRef: parentRef
+    actionRef,
+    parentRef
   })));
 }
 

package/ui/UserListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserListItem.js","sources":["../../src/ui/UserListItem/index.tsx"],"sourcesContent":["import React, { ChangeEvent, MutableRefObject, ReactElement, useContext } from 'react';\nimport { User } from '@sendbird/chat';\nimport { Member } from '@sendbird/chat/groupChannel';\nimport './index.scss';\n\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Avatar from '../Avatar/index';\nimport MutedAvatarOverlay from '../Avatar/MutedAvatarOverlay';\nimport Checkbox from '../Checkbox';\nimport UserProfile from '../UserProfile';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface UserListItemProps {\n  user: User;\n  className?: string;\n  checked?: boolean;\n  checkBox?: boolean;\n  isOperator?: boolean;\n  disabled?: boolean;\n  disableMessaging?: boolean;\n  currentUser?: string;\n  action?({ actionRef, parentRef }: {\n    actionRef: MutableRefObject<any>,\n    parentRef?: MutableRefObject<any>,\n  }): ReactElement;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport default function UserListItem({\n  user,\n  className,\n  checked,\n  checkBox,\n  isOperator,\n  disabled,\n  disableMessaging,\n  currentUser,\n  action,\n  onChange,\n}: UserListItemProps): ReactElement {\n  const uniqueKey = user.userId;\n  const actionRef = React.useRef(null);\n  const parentRef = React.useRef(null);\n  const avatarRef = React.useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-user-list-item',\n      ].join(' ')}\n      ref={parentRef}\n    >\n      {\n        (user as Member)?.isMuted && (\n          <MutedAvatarOverlay height={40} width={40} />\n        )\n      }\n      <ContextMenu\n        menuTrigger={(toggleDropdown) => (\n          <Avatar\n            className=\"sendbird-user-list-item__avatar\"\n            ref={avatarRef}\n            src={user.profileUrl}\n            width=\"40px\"\n            height=\"40px\"\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\n              }\n            }}\n          />\n        )}\n        menuItems={(closeDropdown) => (\n          <MenuItems\n            openLeft\n            parentRef={avatarRef}\n            // for catching location(x, y) of MenuItems\n            parentContainRef={avatarRef}\n            // for toggling more options(menus & reactions)\n            closeDropdown={closeDropdown}\n            style={{ paddingTop: '0px', paddingBottom: '0px' }}\n          >\n            {\n              renderUserProfile\n                ? renderUserProfile({\n                  user,\n                  currentUserId: currentUser,\n                  close: closeDropdown,\n                })\n                : (\n                  <UserProfile\n                    disableMessaging={disableMessaging}\n                    user={user}\n                    currentUserId={currentUser}\n                    onSuccess={closeDropdown}\n                  />\n                )\n            }\n          </MenuItems>\n        )}\n      />\n      <Label\n        className=\"sendbird-user-list-item__title\"\n        type={LabelTypography.SUBTITLE_1}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {user.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === user.userId) && (\n            ' (You)'\n          )\n        }\n      </Label>\n      { // if there is now nickname, display userId\n        !user.nickname && (\n          <Label\n            className=\"sendbird-user-list-item__subtitle\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {user.userId}\n          </Label>\n        )\n      }\n      {\n        checkBox && (\n          <label\n            className=\"sendbird-user-list-item__checkbox\"\n            htmlFor={uniqueKey}\n          >\n            <Checkbox\n              id={uniqueKey}\n              checked={checked}\n              disabled={disabled}\n              onChange={(event) => onChange(event)}\n            />\n          </label>\n        )\n      }\n      {\n        isOperator && (\n          <Label\n            className={[\n              'sendbird-user-list-item__operator',\n              checkBox ? 'checkbox' : '',\n            ].join(' ')}\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            Operator\n          </Label>\n        )\n      }\n      {\n        action && (\n          <div\n            className=\"sendbird-user-list-item__action\"\n            ref={actionRef}\n          >\n            { action({ actionRef, parentRef })}\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["UserListItem","_a","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","_b","useContext","UserProfileContext","disableUserProfile","renderUserProfile","stringSet","LocalizationContext","createElement","__spreadArray","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","onClick","menuItems","closeDropdown","MenuItems","openLeft","parentContainRef","style","paddingTop","paddingBottom","currentUserId","close","UserProfile","onSuccess","Label","type","LabelTypography","SUBTITLE_1","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","htmlFor","Checkbox","id","event","SUBTITLE_2"],"mappings":"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"}
+{"version":3,"file":"UserListItem.js","sources":["../../src/ui/UserListItem/index.tsx"],"sourcesContent":["import React, { ChangeEvent, MutableRefObject, ReactElement, useContext } from 'react';\nimport { User } from '@sendbird/chat';\nimport { Member } from '@sendbird/chat/groupChannel';\nimport './index.scss';\n\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Avatar from '../Avatar/index';\nimport MutedAvatarOverlay from '../Avatar/MutedAvatarOverlay';\nimport Checkbox from '../Checkbox';\nimport UserProfile from '../UserProfile';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\n\nexport interface UserListItemProps {\n  user: User;\n  className?: string;\n  checked?: boolean;\n  checkBox?: boolean;\n  isOperator?: boolean;\n  disabled?: boolean;\n  disableMessaging?: boolean;\n  currentUser?: string;\n  action?({ actionRef, parentRef }: {\n    actionRef: MutableRefObject<any>,\n    parentRef?: MutableRefObject<any>,\n  }): ReactElement;\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport default function UserListItem({\n  user,\n  className,\n  checked,\n  checkBox,\n  isOperator,\n  disabled,\n  disableMessaging,\n  currentUser,\n  action,\n  onChange,\n}: UserListItemProps): ReactElement {\n  const uniqueKey = user.userId;\n  const actionRef = React.useRef(null);\n  const parentRef = React.useRef(null);\n  const avatarRef = React.useRef(null);\n  const {\n    disableUserProfile,\n    renderUserProfile,\n  } = useContext<UserProfileContext>(UserProfileContext);\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-user-list-item',\n      ].join(' ')}\n      ref={parentRef}\n    >\n      {\n        (user as Member)?.isMuted && (\n          <MutedAvatarOverlay height={40} width={40} />\n        )\n      }\n      <ContextMenu\n        menuTrigger={(toggleDropdown) => (\n          <Avatar\n            className=\"sendbird-user-list-item__avatar\"\n            ref={avatarRef}\n            src={user.profileUrl}\n            width=\"40px\"\n            height=\"40px\"\n            onClick={() => {\n              if (!disableUserProfile) {\n                toggleDropdown();\n              }\n            }}\n          />\n        )}\n        menuItems={(closeDropdown) => (\n          <MenuItems\n            openLeft\n            parentRef={avatarRef}\n            // for catching location(x, y) of MenuItems\n            parentContainRef={avatarRef}\n            // for toggling more options(menus & reactions)\n            closeDropdown={closeDropdown}\n            style={{ paddingTop: '0px', paddingBottom: '0px' }}\n          >\n            {\n              renderUserProfile\n                ? renderUserProfile({\n                  user,\n                  currentUserId: currentUser,\n                  close: closeDropdown,\n                })\n                : (\n                  <UserProfile\n                    disableMessaging={disableMessaging}\n                    user={user}\n                    currentUserId={currentUser}\n                    onSuccess={closeDropdown}\n                  />\n                )\n            }\n          </MenuItems>\n        )}\n      />\n      <Label\n        className=\"sendbird-user-list-item__title\"\n        type={LabelTypography.SUBTITLE_1}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {user.nickname || stringSet.NO_NAME}\n        {\n          (currentUser === user.userId) && (\n            ' (You)'\n          )\n        }\n      </Label>\n      { // if there is now nickname, display userId\n        !user.nickname && (\n          <Label\n            className=\"sendbird-user-list-item__subtitle\"\n            type={LabelTypography.CAPTION_3}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {user.userId}\n          </Label>\n        )\n      }\n      {\n        checkBox && (\n          <label\n            className=\"sendbird-user-list-item__checkbox\"\n            htmlFor={uniqueKey}\n          >\n            <Checkbox\n              id={uniqueKey}\n              checked={checked}\n              disabled={disabled}\n              onChange={(event) => onChange(event)}\n            />\n          </label>\n        )\n      }\n      {\n        isOperator && (\n          <Label\n            className={[\n              'sendbird-user-list-item__operator',\n              checkBox ? 'checkbox' : '',\n            ].join(' ')}\n            type={LabelTypography.SUBTITLE_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            Operator\n          </Label>\n        )\n      }\n      {\n        action && (\n          <div\n            className=\"sendbird-user-list-item__action\"\n            ref={actionRef}\n          >\n            {action({ actionRef, parentRef })}\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["UserListItem","_ref","user","className","checked","checkBox","isOperator","disabled","disableMessaging","currentUser","action","onChange","uniqueKey","userId","actionRef","React","useRef","parentRef","avatarRef","disableUserProfile","renderUserProfile","useContext","UserProfileContext","stringSet","LocalizationContext","createElement","Array","isArray","join","ref","isMuted","MutedAvatarOverlay","height","width","ContextMenu","menuTrigger","toggleDropdown","Avatar","src","profileUrl","onClick","menuItems","closeDropdown","MenuItems","openLeft","parentContainRef","style","paddingTop","paddingBottom","currentUserId","close","UserProfile","onSuccess","Label","type","LabelTypography","SUBTITLE_1","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","CAPTION_3","ONBACKGROUND_2","htmlFor","Checkbox","id","event","SUBTITLE_2"],"mappings":"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"}

package/ui/UserProfile.js

@@ -1,36 +1,41 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../LocalizationContext-3d8c0b24.js';
-import { a as UserProfileContext } from '../UserProfileContext-41938ddc.js';
+import { a as LocalizationContext } from '../LocalizationContext-9c54e783.js';
+import { a as UserProfileContext } from '../UserProfileContext-a8aa4c0f.js';
 import { getCreateGroupChannel } from '../sendbirdSelectors.js';
 import Avatar from './Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
 import Button, { ButtonTypes } from './Button.js';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import '../stringSet-9d579825.js';
-import '../index-aaa9b9f8.js';
+import '../stringSet-1f18348a.js';
+import '../index-a9ddd0f5.js';
 import 'prop-types';
-import '../topics-f9301447.js';
-import '../utils-86d65b96.js';
-import '../tslib.es6-d6e50ec3.js';
+import '../_rollupPluginBabelHelpers-b2d9bfc5.js';
+import '../topics-d8d10f83.js';
+import '../utils-0c09801e.js';
 import './ImageRenderer.js';
 import './Icon.js';
-import '../uuid-86cb48e0.js';
+import '../uuid-48baadaf.js';
 import '../withSendbird.js';
 
-function UserProfile(_a) {
-  var _b, _c;
-  var user = _a.user,
-    currentUserId = _a.currentUserId,
-    _d = _a.disableMessaging,
-    disableMessaging = _d === void 0 ? false : _d,
-    onSuccess = _a.onSuccess;
-  var store = useSendbirdStateContext();
-  var createChannel = getCreateGroupChannel(store);
-  var logger = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.logger;
-  var stringSet = useContext(LocalizationContext).stringSet;
-  var currentUserId_ = currentUserId || ((_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId);
+function UserProfile(_ref) {
+  var _store$config, _store$config2;
+  let {
+    user,
+    currentUserId,
+    disableMessaging = false,
+    onSuccess
+  } = _ref;
+  const store = useSendbirdStateContext();
+  const createChannel = getCreateGroupChannel(store);
+  const logger = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.logger;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const currentUserId_ = currentUserId || (store === null || store === void 0 ? void 0 : (_store$config2 = store.config) === null || _store$config2 === void 0 ? void 0 : _store$config2.userId);
   // @ts-ignore
-  var onUserProfileMessage = useContext(UserProfileContext).onUserProfileMessage;
+  const {
+    onUserProfileMessage
+  } = useContext(UserProfileContext);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird__user-profile"
   }, /*#__PURE__*/React__default.createElement("section", {
@@ -48,15 +53,15 @@ function UserProfile(_a) {
     className: "sendbird__user-profile-message"
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: ButtonTypes.SECONDARY,
-    onClick: function () {
+    onClick: () => {
       // Create 1:1 channel
-      var params = {
+      const params = {
         isDistinct: false,
         invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
         operatorUserIds: [currentUserId_]
       };
       onSuccess();
-      createChannel(params).then(function (groupChannel) {
+      createChannel(params).then(groupChannel => {
         logger.info('UserProfile, channel create', groupChannel);
         if (typeof onUserProfileMessage === 'function') {
           onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);

package/ui/UserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.js","sources":["../../src/ui/UserProfile/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext } from 'react';\nimport type { GroupChannel, GroupChannelCreateParams } from '@sendbird/chat/groupChannel';\nimport type { User } from '@sendbird/chat';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { getCreateGroupChannel } from '../../lib/selectors';\nimport Avatar from '../Avatar/index';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Button, { ButtonTypes } from '../Button';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface Logger {\n  info?(message: string, channel: GroupChannel): void;\n}\n\ninterface Props {\n  user: User;\n  currentUserId?: string;\n  logger?: Logger;\n  disableMessaging?: boolean;\n  createChannel?(params: GroupChannelCreateParams): Promise<GroupChannel>;\n  onSuccess?: () => void;\n}\n\nfunction UserProfile({\n  user,\n  currentUserId,\n  disableMessaging = false,\n  onSuccess,\n}: Props): ReactElement {\n  const store = useSendbirdStateContext();\n  const createChannel = getCreateGroupChannel(store);\n  const logger = store?.config?.logger;\n  const { stringSet } = useContext(LocalizationContext);\n  const currentUserId_ = currentUserId || store?.config?.userId;\n  // @ts-ignore\n  const { onUserProfileMessage } = useContext(UserProfileContext);\n  return (\n    <div className=\"sendbird__user-profile\">\n      <section className=\"sendbird__user-profile-avatar\">\n        <Avatar\n          height=\"80px\"\n          width=\"80px\"\n          src={user?.profileUrl}\n        />\n      </section>\n      <section className=\"sendbird__user-profile-name\">\n        <Label\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.nickname || stringSet.NO_NAME}\n        </Label>\n      </section>\n      {\n        (user?.userId !== currentUserId_) && !disableMessaging && (\n          <section className=\"sendbird__user-profile-message\">\n            <Button\n              type={ButtonTypes.SECONDARY}\n              onClick={() => {\n                // Create 1:1 channel\n                const params: GroupChannelCreateParams = {\n                  isDistinct: false,\n                  invitedUserIds: [user?.userId],\n                  operatorUserIds: [currentUserId_],\n                };\n                onSuccess();\n                createChannel(params)\n                  .then((groupChannel) => {\n                    logger.info('UserProfile, channel create', groupChannel);\n                    if (typeof onUserProfileMessage === 'function') {\n                      onUserProfileMessage?.(groupChannel);\n                    }\n                  });\n              }}\n            >\n              {stringSet.USER_PROFILE__MESSAGE}\n            </Button>\n          </section>\n        )\n      }\n      <div className=\"sendbird__user-profile-separator\" />\n      <section className=\"sendbird__user-profile-userId\">\n        <Label\n          className=\"sendbird__user-profile-userId--label\"\n          type={LabelTypography.CAPTION_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {stringSet.USER_PROFILE__USER_ID}\n        </Label>\n        <Label\n          className=\"sendbird__user-profile-userId--value\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.userId}\n        </Label>\n      </section>\n    </div>\n  );\n}\n\nexport default UserProfile;\n"],"names":["UserProfile","_a","user","currentUserId","_d","disableMessaging","onSuccess","store","useSendbirdStateContext","createChannel","getCreateGroupChannel","logger","_b","config","stringSet","useContext","LocalizationContext","currentUserId_","_c","userId","onUserProfileMessage","UserProfileContext","React","createElement","className","Avatar","height","width","src","profileUrl","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","Button","ButtonTypes","SECONDARY","onClick","params","isDistinct","invitedUserIds","operatorUserIds","then","groupChannel","info","USER_PROFILE__MESSAGE","CAPTION_2","ONBACKGROUND_2","USER_PROFILE__USER_ID","BODY_1"],"mappings":"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"}
+{"version":3,"file":"UserProfile.js","sources":["../../src/ui/UserProfile/index.tsx"],"sourcesContent":["import './index.scss';\nimport React, { ReactElement, useContext } from 'react';\nimport type { GroupChannel, GroupChannelCreateParams } from '@sendbird/chat/groupChannel';\nimport type { User } from '@sendbird/chat';\n\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { getCreateGroupChannel } from '../../lib/selectors';\nimport Avatar from '../Avatar/index';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Button, { ButtonTypes } from '../Button';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface Logger {\n  info?(message: string, channel: GroupChannel): void;\n}\n\ninterface Props {\n  user: User;\n  currentUserId?: string;\n  logger?: Logger;\n  disableMessaging?: boolean;\n  createChannel?(params: GroupChannelCreateParams): Promise<GroupChannel>;\n  onSuccess?: () => void;\n}\n\nfunction UserProfile({\n  user,\n  currentUserId,\n  disableMessaging = false,\n  onSuccess,\n}: Props): ReactElement {\n  const store = useSendbirdStateContext();\n  const createChannel = getCreateGroupChannel(store);\n  const logger = store?.config?.logger;\n  const { stringSet } = useContext(LocalizationContext);\n  const currentUserId_ = currentUserId || store?.config?.userId;\n  // @ts-ignore\n  const { onUserProfileMessage } = useContext(UserProfileContext);\n  return (\n    <div className=\"sendbird__user-profile\">\n      <section className=\"sendbird__user-profile-avatar\">\n        <Avatar\n          height=\"80px\"\n          width=\"80px\"\n          src={user?.profileUrl}\n        />\n      </section>\n      <section className=\"sendbird__user-profile-name\">\n        <Label\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.nickname || stringSet.NO_NAME}\n        </Label>\n      </section>\n      {\n        (user?.userId !== currentUserId_) && !disableMessaging && (\n          <section className=\"sendbird__user-profile-message\">\n            <Button\n              type={ButtonTypes.SECONDARY}\n              onClick={() => {\n                // Create 1:1 channel\n                const params: GroupChannelCreateParams = {\n                  isDistinct: false,\n                  invitedUserIds: [user?.userId],\n                  operatorUserIds: [currentUserId_],\n                };\n                onSuccess();\n                createChannel(params)\n                  .then((groupChannel) => {\n                    logger.info('UserProfile, channel create', groupChannel);\n                    if (typeof onUserProfileMessage === 'function') {\n                      onUserProfileMessage?.(groupChannel);\n                    }\n                  });\n              }}\n            >\n              {stringSet.USER_PROFILE__MESSAGE}\n            </Button>\n          </section>\n        )\n      }\n      <div className=\"sendbird__user-profile-separator\" />\n      <section className=\"sendbird__user-profile-userId\">\n        <Label\n          className=\"sendbird__user-profile-userId--label\"\n          type={LabelTypography.CAPTION_2}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {stringSet.USER_PROFILE__USER_ID}\n        </Label>\n        <Label\n          className=\"sendbird__user-profile-userId--value\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {user?.userId}\n        </Label>\n      </section>\n    </div>\n  );\n}\n\nexport default UserProfile;\n"],"names":["UserProfile","_ref","_store$config","_store$config2","user","currentUserId","disableMessaging","onSuccess","store","useSendbirdStateContext","createChannel","getCreateGroupChannel","logger","config","stringSet","useContext","LocalizationContext","currentUserId_","userId","onUserProfileMessage","UserProfileContext","React","createElement","className","Avatar","height","width","src","profileUrl","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","nickname","NO_NAME","Button","ButtonTypes","SECONDARY","onClick","params","isDistinct","invitedUserIds","operatorUserIds","then","groupChannel","info","USER_PROFILE__MESSAGE","CAPTION_2","ONBACKGROUND_2","USER_PROFILE__USER_ID","BODY_1"],"mappings":"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"}

package/ui/VoiceMessageItemBody.js

@@ -4,60 +4,55 @@ import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
 import { PlaybackTime } from './PlaybackTime.js';
 import Loader from './Loader.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
-import { a as VoicePlayerStatus } from '../index-fd4fc9f0.js';
-import '../consts-966c9540.js';
+import { a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
+import { a as VoicePlayerStatus } from '../index-38a78d99.js';
+import '../consts-c9746f2b.js';
 import '../VoiceRecorder/context.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
-import '../tslib.es6-d6e50ec3.js';
+import '../_rollupPluginBabelHelpers-b2d9bfc5.js';
 import 'prop-types';
-import '../stringSet-9d579825.js';
+import '../stringSet-1f18348a.js';
 
-var VoiceMessageItemBody = function (_a) {
-  var _b;
-  var className = _a.className,
-    message = _a.message,
-    channelUrl = _a.channelUrl,
-    _c = _a.isByMe,
-    isByMe = _c === void 0 ? false : _c,
-    _d = _a.isReactionEnabled,
-    isReactionEnabled = _d === void 0 ? false : _d;
-  var _e = useState(false),
-    usingReaction = _e[0],
-    setUsingReaction = _e[1];
-  var _f = useVoicePlayer({
-      channelUrl: channelUrl,
-      key: "".concat(message === null || message === void 0 ? void 0 : message.messageId),
-      audioFileUrl: message === null || message === void 0 ? void 0 : message.url
-    }),
-    play = _f.play,
-    pause = _f.pause,
-    _g = _f.playbackTime,
-    playbackTime = _g === void 0 ? 0 : _g,
-    duration = _f.duration,
-    _h = _f.playingStatus,
-    playingStatus = _h === void 0 ? VoicePlayerStatus.IDLE : _h;
-  useEffect(function () {
-    var _a;
-    if (isReactionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+const VoiceMessageItemBody = _ref => {
+  var _message$reactions2;
+  let {
+    className,
+    message,
+    channelUrl,
+    isByMe = false,
+    isReactionEnabled = false
+  } = _ref;
+  const [usingReaction, setUsingReaction] = useState(false);
+  const {
+    play,
+    pause,
+    playbackTime = 0,
+    duration,
+    playingStatus = VoicePlayerStatus.IDLE
+  } = useVoicePlayer({
+    channelUrl,
+    key: `${message === null || message === void 0 ? void 0 : message.messageId}`,
+    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
+  });
+  useEffect(() => {
+    var _message$reactions;
+    if (isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0) {
       setUsingReaction(true);
     } else {
       setUsingReaction(false);
     }
-  }, [isReactionEnabled, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
-  var progresBarMaxSize = useMemo(function () {
-    var _a;
-    if (message === null || message === void 0 ? void 0 : message.metaArrays) {
-      var duration_1 = (_a = message === null || message === void 0 ? void 0 : message.metaArrays.find(function (metaArray) {
-        return metaArray.key === 'KEY_VOICE_MESSAGE_DURATION';
-      })) === null || _a === void 0 ? void 0 : _a.value[0];
-      return duration_1 && parseInt(duration_1);
+  }, [isReactionEnabled, message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length]);
+  const progresBarMaxSize = useMemo(() => {
+    if (message !== null && message !== void 0 && message.metaArrays) {
+      var _message$metaArrays$f;
+      const duration = message === null || message === void 0 ? void 0 : (_message$metaArrays$f = message.metaArrays.find(metaArray => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')) === null || _message$metaArrays$f === void 0 ? void 0 : _message$metaArrays$f.value[0];
+      return duration && parseInt(duration);
     }
     return 1;
   }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '')
+    className: `sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`
   }, /*#__PURE__*/React__default.createElement(ProgressBar, {
     className: "sendbird-voice-message-item-body__progress-bar",
     maxSize: duration || progresBarMaxSize,
@@ -83,7 +78,7 @@ var VoiceMessageItemBody = function (_a) {
     fillColor: IconColors.PRIMARY_2
   })), playingStatus === VoicePlayerStatus.PLAYING && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-voice-message-item-body__status-button__button",
-    onClick: function () {
+    onClick: () => {
       pause();
     }
   }, /*#__PURE__*/React__default.createElement("div", {

package/ui/VoiceMessageItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceMessageItemBody.js","sources":["../../src/ui/VoiceMessageItemBody/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { FileMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\n\nimport ProgressBar, { ProgressBarColorTypes } from '../ProgressBar';\nimport { useVoicePlayer } from '../../hooks/VoicePlayer/useVoicePlayer';\nimport PlaybackTime from '../PlaybackTime';\nimport Loader from '../Loader';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport { LabelTypography, LabelColors } from '../Label';\nimport { VoicePlayerStatus } from '../../hooks/VoicePlayer/dux/initialState';\n\nexport interface VoiceMessageItemBodyProps {\n  className?: string;\n  message: FileMessage;\n  channelUrl: string;\n  isByMe?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport const VoiceMessageItemBody = ({\n  className,\n  message,\n  channelUrl,\n  isByMe = false,\n  isReactionEnabled = false,\n}: VoiceMessageItemBodyProps): React.ReactElement => {\n  const [usingReaction, setUsingReaction] = useState(false);\n  const {\n    play,\n    pause,\n    playbackTime = 0,\n    duration,\n    playingStatus = VoicePlayerStatus.IDLE,\n  } = useVoicePlayer({\n    channelUrl,\n    key: `${message?.messageId}`,\n    audioFileUrl: message?.url,\n  });\n\n  useEffect(() => {\n    if (isReactionEnabled && message?.reactions?.length > 0) {\n      setUsingReaction(true);\n    } else {\n      setUsingReaction(false);\n    }\n  }, [isReactionEnabled, message?.reactions?.length]);\n  const progresBarMaxSize = useMemo(() => {\n    if (message?.metaArrays) {\n      const duration = message?.metaArrays.find((metaArray) => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')?.value[0];\n      return duration && parseInt(duration);\n    }\n    return 1;\n  }, [message?.metaArrays]);\n\n  return (\n    <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>\n      <ProgressBar\n        className=\"sendbird-voice-message-item-body__progress-bar\"\n        maxSize={duration || progresBarMaxSize}\n        currentSize={playbackTime}\n        colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}\n      />\n      <div className=\"sendbird-voice-message-item-body__status-button\">\n        {(playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={play}\n          >\n            <Icon\n              width=\"18px\"\n              height=\"18px\"\n              type={IconTypes.PLAY}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )}\n        {playingStatus === VoicePlayerStatus.PREPARING && (\n          <Loader width=\"22.2px\" height=\"22.2px\">\n            <Icon\n              width=\"22.2px\"\n              height=\"22.2px\"\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY_2}\n            />\n          </Loader>\n        )}\n        {playingStatus === VoicePlayerStatus.PLAYING && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={() => { pause() }}\n          >\n            <div className=\"sendbird-voice-message-item-body__status-button__button__pause\">\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n            </div>\n          </div>\n        )}\n      </div>\n      <PlaybackTime\n        className=\"sendbird-voice-message-item-body__playback-time\"\n        time={progresBarMaxSize - playbackTime}\n        labelType={LabelTypography.BODY_1}\n        labelColor={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      />\n    </div>\n  );\n};\n\nexport default VoiceMessageItemBody;\n"],"names":["VoiceMessageItemBody","_a","className","message","channelUrl","_c","isByMe","_d","isReactionEnabled","_e","useState","usingReaction","setUsingReaction","_f","useVoicePlayer","key","messageId","audioFileUrl","url","play","pause","_g","playbackTime","duration","_h","playingStatus","VoicePlayerStatus","IDLE","useEffect","reactions","length","_b","progresBarMaxSize","useMemo","metaArrays","duration_1","find","metaArray","value","parseInt","React","createElement","concat","ProgressBar","maxSize","currentSize","colorType","ProgressBarColorTypes","PRIMARY","GRAY","PAUSED","onClick","Icon","width","height","type","IconTypes","PLAY","fillColor","IconColors","PREPARING","Loader","SPINNER","PRIMARY_2","PLAYING","PlaybackTime","time","labelType","LabelTypography","BODY_1","labelColor","LabelColors","ONCONTENT_1","ONBACKGROUND_1"],"mappings":"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"}
+{"version":3,"file":"VoiceMessageItemBody.js","sources":["../../src/ui/VoiceMessageItemBody/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { FileMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\n\nimport ProgressBar, { ProgressBarColorTypes } from '../ProgressBar';\nimport { useVoicePlayer } from '../../hooks/VoicePlayer/useVoicePlayer';\nimport PlaybackTime from '../PlaybackTime';\nimport Loader from '../Loader';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport { LabelTypography, LabelColors } from '../Label';\nimport { VoicePlayerStatus } from '../../hooks/VoicePlayer/dux/initialState';\n\nexport interface VoiceMessageItemBodyProps {\n  className?: string;\n  message: FileMessage;\n  channelUrl: string;\n  isByMe?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport const VoiceMessageItemBody = ({\n  className,\n  message,\n  channelUrl,\n  isByMe = false,\n  isReactionEnabled = false,\n}: VoiceMessageItemBodyProps): React.ReactElement => {\n  const [usingReaction, setUsingReaction] = useState(false);\n  const {\n    play,\n    pause,\n    playbackTime = 0,\n    duration,\n    playingStatus = VoicePlayerStatus.IDLE,\n  } = useVoicePlayer({\n    channelUrl,\n    key: `${message?.messageId}`,\n    audioFileUrl: message?.url,\n  });\n\n  useEffect(() => {\n    if (isReactionEnabled && message?.reactions?.length > 0) {\n      setUsingReaction(true);\n    } else {\n      setUsingReaction(false);\n    }\n  }, [isReactionEnabled, message?.reactions?.length]);\n  const progresBarMaxSize = useMemo(() => {\n    if (message?.metaArrays) {\n      const duration = message?.metaArrays.find((metaArray) => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')?.value[0];\n      return duration && parseInt(duration);\n    }\n    return 1;\n  }, [message?.metaArrays]);\n\n  return (\n    <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>\n      <ProgressBar\n        className=\"sendbird-voice-message-item-body__progress-bar\"\n        maxSize={duration || progresBarMaxSize}\n        currentSize={playbackTime}\n        colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}\n      />\n      <div className=\"sendbird-voice-message-item-body__status-button\">\n        {(playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={play}\n          >\n            <Icon\n              width=\"18px\"\n              height=\"18px\"\n              type={IconTypes.PLAY}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )}\n        {playingStatus === VoicePlayerStatus.PREPARING && (\n          <Loader width=\"22.2px\" height=\"22.2px\">\n            <Icon\n              width=\"22.2px\"\n              height=\"22.2px\"\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY_2}\n            />\n          </Loader>\n        )}\n        {playingStatus === VoicePlayerStatus.PLAYING && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={() => { pause() }}\n          >\n            <div className=\"sendbird-voice-message-item-body__status-button__button__pause\">\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n            </div>\n          </div>\n        )}\n      </div>\n      <PlaybackTime\n        className=\"sendbird-voice-message-item-body__playback-time\"\n        time={progresBarMaxSize - playbackTime}\n        labelType={LabelTypography.BODY_1}\n        labelColor={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      />\n    </div>\n  );\n};\n\nexport default VoiceMessageItemBody;\n"],"names":["VoiceMessageItemBody","_ref","_message$reactions2","className","message","channelUrl","isByMe","isReactionEnabled","usingReaction","setUsingReaction","useState","play","pause","playbackTime","duration","playingStatus","VoicePlayerStatus","IDLE","useVoicePlayer","key","messageId","audioFileUrl","url","useEffect","_message$reactions","reactions","length","progresBarMaxSize","useMemo","metaArrays","_message$metaArrays$f","find","metaArray","value","parseInt","React","createElement","ProgressBar","maxSize","currentSize","colorType","ProgressBarColorTypes","PRIMARY","GRAY","PAUSED","onClick","Icon","width","height","type","IconTypes","PLAY","fillColor","IconColors","PREPARING","Loader","SPINNER","PRIMARY_2","PLAYING","PlaybackTime","time","labelType","LabelTypography","BODY_1","labelColor","LabelColors","ONCONTENT_1","ONBACKGROUND_1"],"mappings":"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"}

package/ui/VoiceMessgeInput.js

@@ -3,13 +3,12 @@ import './PlaybackTime.js';
 import './ProgressBar.js';
 import './TextButton.js';
 import './Icon.js';
-import '../index-cce0e324.js';
-import '../LocalizationContext-3d8c0b24.js';
-export { a as VoiceMessageInput } from '../index-a9183365.js';
-import '../consts-966c9540.js';
+import '../index-4111594a.js';
+import '../LocalizationContext-9c54e783.js';
+export { a as VoiceMessageInput } from '../index-83600696.js';
+import '../consts-c9746f2b.js';
 import 'prop-types';
-import '../stringSet-9d579825.js';
-import '../tslib.es6-d6e50ec3.js';
-import '../color-73049158.js';
-import '../index-aaa9b9f8.js';
+import '../stringSet-1f18348a.js';
+import '../color-3bac434a.js';
+import '../index-a9ddd0f5.js';
 //# sourceMappingURL=VoiceMessgeInput.js.map

package/ui/VoiceMessgeInput.js.map

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