@selfcommunity/react-ui 0.11.0-alpha.64 → 0.11.0-alpha.66

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -18,7 +17,7 @@ const classes = {
     threadBox: `${constants_1.PREFIX}-thread-box`,
     hide: `${constants_1.PREFIX}-hide`
 };
-const Root = (0, styles_1.styled)(material_1.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/PrivateMessageComponent/Skeleton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets/Skeleton"));
 const Skeleton_2 = tslib_1.__importDefault(require("../PrivateMessageThread/Skeleton"));
@@ -13,7 +12,7 @@ const classes = {
     snippetsSection: `${constants_1.PREFIX}-snippets-section`,
     threadSection: `${constants_1.PREFIX}-thread-section`
 };
-const Root = (0, styles_1.styled)(material_1.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -5,12 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const upload_button_1 = require("@rpldy/upload-button");
 const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../../Widget"));
 const MessageChunkUploader_1 = tslib_1.__importDefault(require("../../../shared/MessageChunkUploader"));
 const upload_drop_zone_1 = tslib_1.__importDefault(require("@rpldy/upload-drop-zone"));
@@ -20,7 +18,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const sizeCoverter_1 = require("../../../utils/sizeCoverter");
 const constants_1 = require("../constants");
 const MAX_FILE_SIZE = 10485760;
-const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) })))));
+const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) })))));
 const classes = {
     root: `${constants_1.PREFIX}-message-media-uploader-root`,
     uploadSection: `${constants_1.PREFIX}-upload-section`,
@@ -32,7 +30,7 @@ const classes = {
     progress: `${constants_1.PREFIX}-progress`,
     previewInfo: `${constants_1.PREFIX}-preview-info`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'MessageMediaUploader'
 })(() => ({}));
@@ -107,7 +105,7 @@ function MessageMediaUploader(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { action: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ onClick: onClose, className: classes.closeButton }, { children: "close" })) }), Object.keys(errors).map((id) => ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", onClose: handleRemoveErrors(id) }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: errors[id].name }), errors[id].error] })) }), id))), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { action: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ onClick: onClose, className: classes.closeButton }, { children: "close" })) }), Object.keys(errors).map((id) => ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", onClose: handleRemoveErrors(id) }, { children: [(0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: errors[id].name }), errors[id].error] })) }), id))), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
                         url: `${scContext.settings.portal}${api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
                         headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                         method: api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.method
@@ -119,7 +117,7 @@ function MessageMediaUploader(props) {
                                                             : !item.file_url
                                                                 ? thumbnailCoverter_1.documentPlaceholder
                                                                 : item.file_url })), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { className: (0, classnames_1.default)(classes.previewActions, { [classes.progress]: item.completed }), title: typeof item.completed !== 'undefined' &&
-                                                            item.completed !== 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: (0, sizeCoverter_1.bytesToSize)(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
+                                                            item.completed !== 0 && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: "center" }, { children: `${Math.round(item.completed)}%` })), actionIcon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isHovered[item.file_uuid] && Object.keys(uploading).length === 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleClear(item.file_uuid), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))) }) }), isHovered[item.file_uuid] && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: 'span', className: classes.previewInfo }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ noWrap: true, textAlign: 'center' }, { children: item.file.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ textAlign: 'center', fontWeight: 'light' }, { children: (0, sizeCoverter_1.bytesToSize)(item.file.size) }))] })))] }), (_a = item.id) !== null && _a !== void 0 ? _a : item.file_uuid)) }, index));
                                     }), previews.length !== 0 && action] }))] })) })] })));
 }
 exports.default = MessageMediaUploader;

package/lib/cjs/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const MessageMediaUploader_1 = tslib_1.__importDefault(require("./MessageMediaUploader"));
 const react_intl_1 = require("react-intl");
@@ -26,7 +24,7 @@ const classes = {
     mediaUploader: `${constants_1.PREFIX}-media-uploader`,
     emojiSection: `${constants_1.PREFIX}-emoji-section`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -125,12 +123,12 @@ function PrivateMessageEditor(inProps) {
         return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: autoHideDeletion ? 'warning' : 'info' }, { children: autoHideDeletion ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.disabled.deleted.msg", defaultMessage: "ui.privateMessage.editor.disabled.deleted.msg" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.disabled.msg", defaultMessage: "ui.privateMessage.editor.disabled.msg" })) })));
     }
     else if (error) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "error", action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
     }
     function renderContent() {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
-                            startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "attach_file" }) }))] })),
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "send" }) })))
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: openMediaSection ? ((0, jsx_runtime_1.jsx)(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [openEmojiSection && (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
+                            startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "attach_file" }) }))] })),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "send" }) })))
                         } })] })) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));

package/lib/cjs/components/PrivateMessageEditor/Skeleton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -21,15 +19,15 @@ const classes = {
     paper: `${PREFIX}-paper`,
     item: `${PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'DrawerRoot'
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'MenuRoot'
 })(() => ({}));
@@ -111,19 +109,19 @@ function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
-                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
-                (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
+                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
+                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
+                (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
             ];
         }
         else {
             return [
-                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
-                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
-                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
+                user && !group && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })] }), "profile")),
+                group && !user && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, group), onClick: handleCloseDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.group", defaultMessage: "ui.privateMessageSettingsIconButton.item.group" })] }), "group")),
+                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })] }), "delete")
             ];
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
 }
 exports.default = PrivateMessageSettingsIconButton;

package/lib/cjs/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
@@ -21,7 +20,7 @@ const classes = {
     menuItem: `${constants_1.PREFIX}-menu-item`,
     unread: `${constants_1.PREFIX}-unread`
 };
-const Root = (0, styles_1.styled)(material_1.ListItem, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/PrivateMessageSnippetItem/Skeleton.js

@@ -1,19 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ListItem_1 = tslib_1.__importDefault(require("@mui/material/ListItem"));
-const ListItemAvatar_1 = tslib_1.__importDefault(require("@mui/material/ListItemAvatar"));
-const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemText"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(ListItem_1.default, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +34,6 @@ const Root = (0, styles_1.styled)(ListItem_1.default, {
  */
 function PrivateMessageSnippetItemSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { secondaryAction: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 30, width: 5 }) }, { children: [(0, jsx_runtime_1.jsx)(ListItemAvatar_1.default, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { secondaryAction: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 5 }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })] })));
 }
 exports.default = PrivateMessageSnippetItemSkeleton;

package/lib/cjs/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const types_1 = require("@selfcommunity/types");
@@ -15,7 +14,6 @@ const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
@@ -31,7 +29,7 @@ const classes = {
     clear: `${constants_1.PREFIX}-clear`,
     newMessageButton: `${constants_1.PREFIX}-new-message-button`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -75,7 +73,7 @@ function PrivateMessageSnippets(inProps) {
     const { className = null, threadObj = null, type = null, snippetActions, clearSearch } = props, rest = tslib_1.__rest(props, ["className", "threadObj", "type", "snippetActions", "clearSearch"]);
     // STATE
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const { data, updateSnippets } = (0, react_core_1.useSCFetchPrivateMessageSnippets)({ cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST });
     const [search, setSearch] = (0, react_1.useState)('');
     const isObj = typeof threadObj === 'object';

package/lib/cjs/components/PrivateMessageSnippets/Skeleton.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippetItem/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
@@ -13,7 +11,7 @@ const classes = {
     button: `${constants_1.PREFIX}-button`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -41,6 +39,6 @@ const Root = (0, styles_1.styled)(material_1.Card, {
  *
  */
 function PrivateMessageSnippetsSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", justifyContent: "center", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 20, width: 100, variant: 'rectangular' }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 25, width: '100%', variant: 'rounded', className: classes.searchBar })] })), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(6)].map((category, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) }))] }) })));
 }
 exports.default = PrivateMessageSnippetsSkeleton;

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -12,10 +11,8 @@ const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const PrivateMessageEditor_1 = tslib_1.__importDefault(require("../PrivateMessageEditor"));
-const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -50,7 +47,7 @@ const classes = {
     autocompleteDialog: `${constants_1.PREFIX}-autocomplete-dialog`,
     editor: `${constants_1.PREFIX}-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -478,7 +475,7 @@ function PrivateMessageThread(inProps) {
      * @return {JSX.Element}
      */
     function renderNewOrNoMessageBox() {
-        return ((0, jsx_runtime_1.jsx)(material_1.CardContent, { children: isNew || singleMessageThread ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.newMessageHeader }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.List, { className: classes.newMessageContent }), (0, jsx_runtime_1.jsx)(PrivateMessageEditor_1.default, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.emptyMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.CardContent, { children: isNew || singleMessageThread ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.newMessageHeader }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.newMessageHeaderContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.newMessageHeaderIcon }, { children: "person" })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" }) }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", onClick: handleNewMessageClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.List, { className: classes.newMessageContent }), (0, jsx_runtime_1.jsx)(PrivateMessageEditor_1.default, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.emptyMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" }) }))) }));
     }
     // Anonymous
     if (!authUserId) {

package/lib/cjs/components/PrivateMessageThread/Skeleton.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageThreadItem/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
@@ -12,7 +10,7 @@ const classes = {
     list: `${constants_1.PREFIX}-list`,
     editor: `${constants_1.PREFIX}-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +38,6 @@ const Root = (0, styles_1.styled)(material_1.Card, {
 function PrivateMessageThreadSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(List_1.default, Object.assign({ className: classes.list }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { index: index }, index)))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.editor }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' }) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.list }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListSubheader, Object.assign({ sx: { display: 'flex', justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } }) })), [...Array(isMobile ? 6 : 8)].map((item, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { index: index }, index)))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.editor }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' }) }))] }) })));
 }
 exports.default = PrivateMessageThreadSkeleton;

package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -3,16 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
 const sizeCoverter_1 = require("../../utils/sizeCoverter");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
@@ -35,11 +32,11 @@ const classes = {
     downloadButton: `${constants_1.PREFIX}-download-button`,
     dialogRoot: `${constants_1.PREFIX}-dialog-root`
 };
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
-const Root = (0, styles_1.styled)(material_1.ListItem, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -88,7 +85,7 @@ function PrivateMessageThreadItem(inProps) {
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // STATE
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const hasFile = message ? message.file : null;
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
@@ -127,7 +124,7 @@ function PrivateMessageThreadItem(inProps) {
             return null;
         }
         let section = null;
-        const defaultSection = ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.other }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] })) })));
+        const defaultSection = ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.other }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] })) })));
         if (m.file) {
             let type = m.file.mimetype;
             switch (true) {
@@ -139,11 +136,11 @@ function PrivateMessageThreadItem(inProps) {
                         section = defaultSection;
                     }
                     else {
-                        section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.img, classes.video) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }) }))] })));
+                        section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.img, classes.video) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "play_circle_outline" }) }))] })));
                     }
                     break;
                 case type.startsWith(types_1.SCMessageFileType.DOCUMENT):
-                    section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] }))] })));
+                    section = ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && (0, jsx_runtime_1.jsx)("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: m.file.filename }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, sizeCoverter_1.bytesToSize)(m.file.filesize) })] }))] })));
                     break;
                 default:
                     // section = <Icon>hide_image</Icon>;
@@ -164,6 +161,6 @@ function PrivateMessageThreadItem(inProps) {
             message.status !== types_1.SCPrivateMessageStatusType.HIDDEN && (0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasFile && message.status !== types_1.SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.text }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                             hour: 'numeric',
                             minute: 'numeric'
-                        })}` }))] }), openDialog && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : ((0, jsx_runtime_1.jsx)(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) }), 'download') })) }))] })));
+                        })}` }))] }), openDialog && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : ((0, jsx_runtime_1.jsx)(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) }), 'download') })) }))] })));
 }
 exports.default = PrivateMessageThreadItem;

package/lib/cjs/components/PrivateMessageThreadItem/Skeleton.js

@@ -1,18 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ListItem_1 = tslib_1.__importDefault(require("@mui/material/ListItem"));
-const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemText"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(ListItem_1.default, {
+const Root = (0, material_1.styled)(material_1.ListItem, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -40,6 +35,6 @@ const Root = (0, styles_1.styled)(ListItem_1.default, {
 function PrivateMessageThreadItemSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(ListItemText_1.default, { sx: { display: 'flex', justifyContent: props.index % 2 === 0 ? 'flex-start' : 'flex-end' }, primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 100, width: isMobile ? 200 : 300, style: { borderRadius: theme.shape.borderRadius } }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { display: 'flex', justifyContent: props.index % 2 === 0 ? 'flex-start' : 'flex-end' }, primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 100, width: isMobile ? 200 : 300, style: { borderRadius: theme.shape.borderRadius } }) }) })));
 }
 exports.default = PrivateMessageThreadItemSkeleton;

package/lib/cjs/components/RelatedFeedObjectsWidget/RelatedFeedObjectsWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const Errors_1 = require("../../constants/Errors");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -32,11 +30,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -199,7 +197,7 @@ function RelatedFeedObjectWidget(inProps) {
         return null;
     };
     const advPosition = Math.floor(Math.random() * (Math.min(state.count, 5) - 1 + 1) + 1);
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedFeedObjectsWidget.title", defaultMessage: "ui.relatedFeedObjectsWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedFeedObjectsWidget.noResults", defaultMessage: "ui.relatedFeedObjectsWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj, template: template }, FeedObjectProps)) }, obj.id), advPosition === index && renderAdvertising()] }, index))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj }, FeedObjectProps)) }, obj.id))) }) })) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedFeedObjectsWidget.title", defaultMessage: "ui.relatedFeedObjectsWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedFeedObjectsWidget.noResults", defaultMessage: "ui.relatedFeedObjectsWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((obj, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj, template: template }, FeedObjectProps)) }, obj.id), advPosition === index && renderAdvertising()] }, index))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj }, FeedObjectProps)) }, obj.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = RelatedFeedObjectWidget;

package/lib/cjs/components/RelatedFeedObjectsWidget/Skeleton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CategoryTrendingFeedWidget_1 = require("../CategoryTrendingFeedWidget");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(CategoryTrendingFeedWidget_1.CategoryTrendingFeedWidgetSkeleton, {
+const Root = (0, material_1.styled)(CategoryTrendingFeedWidget_1.CategoryTrendingFeedWidgetSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -130,6 +129,6 @@ function SearchAutocomplete(inProps) {
             return optionLabel(option);
         }, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: getOptionData(option).name, src: getOptionData(option).image, variant: getOptionData(option).variant }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: getOptionData(option).name }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
                 community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
-            })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.icon }, { children: "search" })), endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })) }))) }) }))) }, rest)));
+            })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })), endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: value.length > 0 || Boolean(onClear), appear: false }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }))) }) }))) }, rest)));
 }
 exports.default = SearchAutocomplete;