@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

package/lib/esm/components/PollSuggestionWidget/PollSnippet/PollSnippet.d.ts

@@ -30,16 +30,17 @@ export interface PollSnippetProps {
  import {PollSnippet} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCPollSnippet` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-poll-snippet-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSnippet-root|Styles applied to the root element.|
- |title|.SCPollSnippet-title|Styles applied to the title element.|
- |action|.SCPollSnippet-actions|Styles applied to action section.|
- |seeItem|.SCPollSnippet-see-item|Styles applied to the see item button element.|
+ |root|.SCPollSuggestionWidget-poll-snippet-root|Styles applied to the root element.|
+ |avatar|.SCPollSuggestionWidget-avatar|Styles applied to the avatar element.|
+ |username|.SCPollSuggestionWidget-username|Styles applied to the username element.|
+ |title|.SCPollSuggestionWidget-title|Styles applied to the title element.|
+ |activityAt|.SCPollSuggestionWidget-activity-at|Styles applied to activity section.|
 
  * @param inProps
  */

package/lib/esm/components/PollSuggestionWidget/PollSnippet/PollSnippet.js

@@ -11,9 +11,9 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import BaseItem from '../../../shared/BaseItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
-const PREFIX = 'SCPollSnippet';
+import { PREFIX } from '../constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-poll-snippet-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     title: `${PREFIX}-title`,
@@ -21,32 +21,8 @@ const classes = {
 };
 const Root = styled(BaseItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`&.${classes.root} > div`]: {
-        alignItems: 'flex-start',
-        paddingTop: theme.spacing(1)
-    },
-    '& .SCBaseItem-text': {
-        marginTop: 0
-    },
-    [`& .${classes.username}`]: {
-        color: theme.palette.text.primary,
-        fontWeight: theme.typography.fontWeightBold,
-        textDecoration: 'none'
-    },
-    [`& .${classes.title}`]: {},
-    [`& .${classes.avatar}`]: {
-        width: theme.selfcommunity.user.avatar.sizeMedium,
-        height: theme.selfcommunity.user.avatar.sizeMedium
-    },
-    [`& .${classes.activityAt}`]: {
-        textDecoration: 'none',
-        color: 'inherit',
-        marginTop: 3
-    }
-}));
+    slot: 'PollSnippetRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PollSnippet component. Learn about the available props and the CSS API.
  *
@@ -57,16 +33,17 @@ const Root = styled(BaseItem, {
  import {PollSnippet} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCPollSnippet` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-poll-snippet-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSnippet-root|Styles applied to the root element.|
- |title|.SCPollSnippet-title|Styles applied to the title element.|
- |action|.SCPollSnippet-actions|Styles applied to action section.|
- |seeItem|.SCPollSnippet-see-item|Styles applied to the see item button element.|
+ |root|.SCPollSuggestionWidget-poll-snippet-root|Styles applied to the root element.|
+ |avatar|.SCPollSuggestionWidget-avatar|Styles applied to the avatar element.|
+ |username|.SCPollSuggestionWidget-username|Styles applied to the username element.|
+ |title|.SCPollSuggestionWidget-title|Styles applied to the title element.|
+ |activityAt|.SCPollSuggestionWidget-activity-at|Styles applied to activity section.|
 
  * @param inProps
  */

package/lib/esm/components/PollSuggestionWidget/PollSuggestionWidget.d.ts

@@ -61,6 +61,7 @@ export interface PollSuggestionWidgetProps extends VirtualScrollerItemProps, Wid
  |showMore|.SCPollSuggestionWidget-show-more|Styles applied to show more button element.|
  |dialogRoot|.SCPollSuggestionWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCPollSuggestionWidget-end-message|Styles applied to the end message element.|
+ |pollSnippet|.SCPollSuggestionWidget-poll-snippet|Styles applied to the poll snippet element.|
 
  *
  * @param inProps

package/lib/esm/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -17,25 +17,24 @@ import { useThemeProps } from '@mui/system';
 import PollSnippet, { PollSnippetSkeleton } from './PollSnippet';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
-const PREFIX = 'SCPollSuggestionWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
     noResults: `${PREFIX}-no-results`,
     showMore: `${PREFIX}-show-more`,
     dialogRoot: `${PREFIX}-dialog-root`,
-    endMessage: `${PREFIX}-end-message`
+    endMessage: `${PREFIX}-end-message`,
+    pollSnippet: `${PREFIX}-poll-snippet`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    slot: 'DialogRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Poll Suggestion Widget component. Learn about the available props and the CSS API.
  *
@@ -63,6 +62,7 @@ const DialogRoot = styled(BaseDialog, {
  |showMore|.SCPollSuggestionWidget-show-more|Styles applied to show more button element.|
  |dialogRoot|.SCPollSuggestionWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCPollSuggestionWidget-end-message|Styles applied to the end message element.|
+ |pollSnippet|.SCPollSuggestionWidget-poll-snippet|Styles applied to the poll snippet element.|
 
  *
  * @param inProps
@@ -167,13 +167,13 @@ export default function PollSuggestionWidget(inProps) {
         !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
             React.createElement(FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }))) : (React.createElement(React.Fragment, null,
             React.createElement(List, null, state.results.slice(0, state.visibleItems).map((obj) => (React.createElement(ListItem, { key: obj.id },
-                React.createElement(PollSnippet, Object.assign({ elevation: 0, feedObj: obj }, PollSnippetProps)))))),
+                React.createElement(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)))))),
             state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 React.createElement(FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }))))),
         openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
             React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
                     React.createElement(FormattedMessage, { id: "ui.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" })) },
                 React.createElement(List, null, state.results.map((obj) => (React.createElement(ListItem, { key: obj.id },
-                    React.createElement(PollSnippet, Object.assign({ elevation: 0, feedObj: obj }, PollSnippetProps)))))))))));
+                    React.createElement(PollSnippet, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)))))))))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }

package/lib/esm/components/PollSuggestionWidget/Skeleton.d.ts

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCPollSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCPollSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCPollSuggestionWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCPollSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 export default function PollSuggestionWidgetSkeleton(props: any): JSX.Element;

package/lib/esm/components/PollSuggestionWidget/Skeleton.js

@@ -4,12 +4,15 @@ import Widget from '../Widget';
 import { CardContent, List, ListItem } from '@mui/material';
 import { PollSnippetSkeleton } from './PollSnippet';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCPollSuggestionWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Poll Suggestion Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,14 +24,14 @@ const Root = styled(Widget)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCPollSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCPollSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCPollSuggestionWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCPollSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 export default function PollSuggestionWidgetSkeleton(props) {

package/lib/esm/components/PollSuggestionWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPollSuggestionWidget";

package/lib/esm/components/PollSuggestionWidget/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPollSuggestionWidget';

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -8,7 +8,7 @@ import { useThemeProps } from '@mui/system';
 import { SCFeatureName, SCPrivateMessageStatusType } from '@selfcommunity/types';
 import PrivateMessageThread from '../PrivateMessageThread';
 import PrivateMessageSnippets from '../PrivateMessageSnippets';
-const PREFIX = 'SCPrivateMessageComponent';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     snippetsBox: `${PREFIX}-snippets-box`,
@@ -17,9 +17,8 @@ const classes = {
 };
 const Root = styled(Grid, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  *
  * > API documentation for the Community-JS Private Messages component. Learn about the available props and the CSS API.

package/lib/esm/components/PrivateMessageComponent/Skeleton.d.ts

@@ -24,9 +24,9 @@ export declare type PrivateMessageComponentProps = React.PropsWithChildren<Priva
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageComponentSkeleton-root|Styles applied to the root element.|
- |snippetsSection|.SCPrivateMessageComponentSkeleton-snippets-section|Styles applied to the snippets section|
- |threadSection|.SCPrivateMessageComponentSkeleton-thread-section|Styles applied to the thread section|
+ |root|.SCPrivateMessageComponent-skeleton-root|Styles applied to the root element.|
+ |snippetsSection|.SCPrivateMessageComponent-snippets-section|Styles applied to the snippets section|
+ |threadSection|.SCPrivateMessageComponent-thread-section|Styles applied to the thread section|
  *
  */
 export default function PrivateMessageComponentSkeleton(props: PrivateMessageComponentProps): JSX.Element;

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

@@ -4,16 +4,15 @@ import { Grid, useMediaQuery, useTheme } from '@mui/material';
 import PrivateMessageSnippetsSkeleton from '../PrivateMessageSnippets/Skeleton';
 import PrivateMessageThreadSkeleton from '../PrivateMessageThread/Skeleton';
 import classNames from 'classnames';
-const PREFIX = 'SCPrivateMessageComponentSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     snippetsSection: `${PREFIX}-snippets-section`,
     threadSection: `${PREFIX}-thread-section`
 };
 const Root = styled(Grid, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
@@ -32,9 +31,9 @@ const Root = styled(Grid, {
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageComponentSkeleton-root|Styles applied to the root element.|
- |snippetsSection|.SCPrivateMessageComponentSkeleton-snippets-section|Styles applied to the snippets section|
- |threadSection|.SCPrivateMessageComponentSkeleton-thread-section|Styles applied to the thread section|
+ |root|.SCPrivateMessageComponent-skeleton-root|Styles applied to the root element.|
+ |snippetsSection|.SCPrivateMessageComponent-snippets-section|Styles applied to the snippets section|
+ |threadSection|.SCPrivateMessageComponent-thread-section|Styles applied to the thread section|
  *
  */
 export default function PrivateMessageComponentSkeleton(props) {

package/lib/esm/components/PrivateMessageComponent/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageComponent";

package/lib/esm/components/PrivateMessageComponent/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPrivateMessageComponent';

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

@@ -14,12 +14,12 @@ import { FormattedMessage } from 'react-intl';
 import { pdfImagePlaceholder } from '../../../utils/thumbnailCoverter';
 import classNames from 'classnames';
 import { bytesToSize } from '../../../utils/sizeCoverter';
+import { PREFIX } from '../constants';
 const MAX_FILE_SIZE = 10485760;
 const UploadButton = asUploadButton(forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }),
     React.createElement(Icon, null, "upload")))));
-const PREFIX = 'SCMessageMediaUploader';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-message-media-uploader-root`,
     uploadSection: `${PREFIX}-upload-section`,
     uploadButton: `${PREFIX}-upload-button`,
     closeButton: `${PREFIX}-close-button`,
@@ -31,9 +31,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'MessageMediaUploader'
+})(() => ({}));
 export default function MessageMediaUploader(props) {
     //PROPS
     const { className, forwardMessageFile, onClose, isUploading, action } = props;

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.d.ts

@@ -48,7 +48,7 @@ export interface PrivateMessageEditorProps {
  |---|---|---|
  |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
  |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
- |uploadMediaSection|.SCPrivateMessageEditor-upload-media-section|Styles applied to the upload media section.|
+ |mediaUploader|.SCPrivateMessageEditor-media-uploader|Styles applied to the message media uploader section.|
  |emojiSection|.SCPrivateMessageEditor-emoji-section|Styles applied to the emoji section.|
 
  * @param inProps

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -9,25 +9,24 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useThemeProps } from '@mui/system';
 import EmojiPicker from '../../shared/EmojiPicker';
 import { iOS } from '@selfcommunity/utils';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     placeholder: {
         id: 'ui.privateMessage.editor.placeholder',
         defaultMessage: 'ui.privateMessage.editor.placeholder'
     }
 });
-const PREFIX = 'SCPrivateMessageEditor';
 const classes = {
     root: `${PREFIX}-root`,
     ios: `${PREFIX}-ios`,
     messageInput: `${PREFIX}-message-input`,
-    uploadMediaSection: `${PREFIX}-upload-media-section`,
+    mediaUploader: `${PREFIX}-media-uploader`,
     emojiSection: `${PREFIX}-emoji-section`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Private Message Editor component. Learn about the available props and the CSS API.
 
@@ -48,7 +47,7 @@ const Root = styled(Box, {
  |---|---|---|
  |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
  |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
- |uploadMediaSection|.SCPrivateMessageEditor-upload-media-section|Styles applied to the upload media section.|
+ |mediaUploader|.SCPrivateMessageEditor-media-uploader|Styles applied to the message media uploader section.|
  |emojiSection|.SCPrivateMessageEditor-emoji-section|Styles applied to the emoji section.|
 
  * @param inProps
@@ -128,7 +127,7 @@ export default function PrivateMessageEditor(inProps) {
             React.createElement(FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" })));
     }
     function renderContent() {
-        return (React.createElement(React.Fragment, null, openMediaSection ? (React.createElement(MessageMediaUploader, { className: classes.uploadMediaSection, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: React.createElement(IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
+        return (React.createElement(React.Fragment, null, openMediaSection ? (React.createElement(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: React.createElement(IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
                 React.createElement(Icon, null, "send")) })) : (React.createElement(React.Fragment, null,
             openEmojiSection && React.createElement(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }),
             React.createElement(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: {

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import { GenericSkeleton } from '../Skeleton';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCMessageEditorSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(GenericSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Message Editor Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/PrivateMessageEditor/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageEditor";

package/lib/esm/components/PrivateMessageEditor/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPrivateMessageEditor';

package/lib/esm/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -9,7 +9,7 @@ import { SCUserContext, SCPreferences, useSCPreferences } from '@selfcommunity/r
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import UserAvatar from '../../shared/UserAvatar';
-const PREFIX = 'SCPrivateMessageSnippetItem';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     username: `${PREFIX}-username`,
@@ -20,9 +20,8 @@ const classes = {
 };
 const Root = styled(ListItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
 /**
  * > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.

package/lib/esm/components/PrivateMessageSnippetItem/Skeleton.d.ts

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippetItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageSnippetItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippetItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageSnippetItem-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetItemSkeleton(props: any): JSX.Element;

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

@@ -5,14 +5,15 @@ import ListItemText from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { useTheme } from '@mui/material';
-const PREFIX = 'SCPrivateMessageSnippetItemSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(ListItem)(({ theme }) => ({
-    maxWidth: 700
-}));
+const Root = styled(ListItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippetItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,14 +25,14 @@ const Root = styled(ListItem)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippetItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageSnippetItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippetItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageSnippetItem-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetItemSkeleton(props) {

package/lib/esm/components/PrivateMessageSnippetItem/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageSnippetItem";

package/lib/esm/components/PrivateMessageSnippetItem/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPrivateMessageSnippetItem';

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -13,13 +13,13 @@ import { SCUserContext, useSCFetchPrivateMessageSnippets } from '@selfcommunity/
 import { CacheStrategies } from '@selfcommunity/utils';
 import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     placeholder: {
         id: 'ui.privateMessage.snippets.searchBar.placeholder',
         defaultMessage: 'ui.privateMessage.snippets.searchBar.placeholder'
     }
 });
-const PREFIX = 'SCPrivateMessageSnippets';
 const classes = {
     root: `${PREFIX}-root`,
     searchBar: `${PREFIX}-search-bar`,
@@ -30,9 +30,8 @@ const classes = {
 };
 const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
  *

package/lib/esm/components/PrivateMessageSnippets/Skeleton.d.ts

@@ -9,16 +9,16 @@
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippets-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetsSkeleton-root|Styles applied to the root element.|
- |searchBar|.SCPrivateMessageSnippetsSkeleton-search-bar|Styles applied to the search bar element.|
- |button|.SCPrivateMessageSnippetsSkeleton-button|Styles applied to the button element.|
- |list|.SCPrivateMessageSnippetsSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippets-skeleton-root|Styles applied to the root element.|
+ |searchBar|.SCPrivateMessageSnippets-search-bar|Styles applied to the search bar element.|
+ |button|.SCPrivateMessageSnippets-button|Styles applied to the button element.|
+ |list|.SCPrivateMessageSnippets-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetsSkeleton(props: any): JSX.Element;

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

@@ -3,14 +3,17 @@ import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
 import PrivateMessageSnippetItemSkeleton from '../PrivateMessageSnippetItem/Skeleton';
 import { Button, Card, CardContent, Skeleton, Stack } from '@mui/material';
-const PREFIX = 'SCPrivateMessageSnippetsSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     searchBar: `${PREFIX}-search-bar`,
     button: `${PREFIX}-button`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Card)(({ theme }) => ({}));
+const Root = styled(Card, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippets Skeleton component. Learn about the available props and the CSS API.
 
@@ -22,16 +25,16 @@ const Root = styled(Card)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippets-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetsSkeleton-root|Styles applied to the root element.|
- |searchBar|.SCPrivateMessageSnippetsSkeleton-search-bar|Styles applied to the search bar element.|
- |button|.SCPrivateMessageSnippetsSkeleton-button|Styles applied to the button element.|
- |list|.SCPrivateMessageSnippetsSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippets-skeleton-root|Styles applied to the root element.|
+ |searchBar|.SCPrivateMessageSnippets-search-bar|Styles applied to the search bar element.|
+ |button|.SCPrivateMessageSnippets-button|Styles applied to the button element.|
+ |list|.SCPrivateMessageSnippets-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetsSkeleton(props) {

package/lib/esm/components/PrivateMessageSnippets/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageSnippets";

package/lib/esm/components/PrivateMessageSnippets/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPrivateMessageSnippets';

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -19,6 +19,7 @@ import { groupBy, Logger } from '@selfcommunity/utils';
 import { useSnackbar } from 'notistack';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import InfiniteScroll from '../../shared/InfiniteScroll';
+import { PREFIX } from './constants';
 const translMessages = defineMessages({
     placeholder: {
         id: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder',
@@ -29,7 +30,6 @@ const translMessages = defineMessages({
         defaultMessage: 'ui.privateMessage.thread.message.deleted'
     }
 });
-const PREFIX = 'SCPrivateMessageThread';
 const classes = {
     root: `${PREFIX}-root`,
     subHeader: `${PREFIX}-subheader`,
@@ -47,9 +47,8 @@ const classes = {
 };
 const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread component. Learn about the available props and the CSS API.
  *