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

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

@@ -17,28 +17,26 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"))
 const Lightbox_1 = tslib_1.__importDefault(require("../../shared/Lightbox"));
 const AutoPlayer_1 = tslib_1.__importDefault(require("../../shared/AutoPlayer"));
 const notistack_1 = require("notistack");
-const PREFIX = 'SCPrivateMessageThreadItem';
-const DIALOG_PREFIX = `${PREFIX}Dialog`;
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    text: `${PREFIX}-text`,
-    img: `${PREFIX}-img`,
-    document: `${PREFIX}-document`,
-    video: `${PREFIX}-video`,
-    messageTime: `${PREFIX}-message-time`,
-    menuItem: `${PREFIX}-menu-item`,
-    downloadButton: `${PREFIX}-download-button`
+    root: `${constants_1.PREFIX}-root`,
+    text: `${constants_1.PREFIX}-text`,
+    img: `${constants_1.PREFIX}-img`,
+    document: `${constants_1.PREFIX}-document`,
+    video: `${constants_1.PREFIX}-video`,
+    messageTime: `${constants_1.PREFIX}-message-time`,
+    menuItem: `${constants_1.PREFIX}-menu-item`,
+    downloadButton: `${constants_1.PREFIX}-download-button`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`
 };
-const MediaPreviewDialog = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: DIALOG_PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 const Root = (0, styles_1.styled)(material_1.ListItem, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
 
@@ -64,6 +62,7 @@ const Root = (0, styles_1.styled)(material_1.ListItem, {
  |video|.SCPrivateMessageThreadItem-video|Styles applied to the message video element.|
  |messageTime|.SCPrivateMessageThreadItem-message-time|Styles applied to the thread message time element.|
  |menuItem|.SCPrivateMessageThreadItem-menu-item|Styles applied to the thread message menu item element.|
+ |dialogRoot|.SCPrivateMessageThreadItem-dialog-root|Styles applied to dialog root element.|
 
 
  * @param inProps
@@ -72,7 +71,7 @@ function PrivateMessageThreadItem(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = tslib_1.__rest(props, ["message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
     // INTL
@@ -162,7 +161,7 @@ function PrivateMessageThreadItem(inProps) {
                 hour: 'numeric',
                 minute: 'numeric'
             })}`)),
-        openDialog && (react_1.default.createElement(react_1.default.Fragment, null, (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? (react_1.default.createElement(MediaPreviewDialog, { open: openDialog, onClose: () => setOpenDialog(false) },
+        openDialog && (react_1.default.createElement(react_1.default.Fragment, null, (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(types_1.SCMessageFileType.VIDEO)) ? (react_1.default.createElement(DialogRoot, { open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot },
             react_1.default.createElement(AutoPlayer_1.default, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }))) : (react_1.default.createElement(Lightbox_1.default, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: [
                 react_1.default.createElement(material_1.IconButton, { key: 'download', onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton },
                     react_1.default.createElement(Icon_1.default, null, "download"))

package/lib/cjs/components/PrivateMessageThreadItem/Skeleton.d.ts

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

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

@@ -7,12 +7,15 @@ const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemTe
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCPrivateMessageThreadItemSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(ListItem_1.default)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(ListItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageThreadItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,14 +27,14 @@ const Root = (0, styles_1.styled)(ListItem_1.default)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCPrivateMessageThreadItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThreadItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThreadItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThreadItem-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageThreadItemSkeleton(props) {

package/lib/cjs/components/PrivateMessageThreadItem/constants.d.ts

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageThreadItem';

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

@@ -22,25 +22,23 @@ const types_1 = require("@selfcommunity/types");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const widget_1 = require("../../utils/widget");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-const PREFIX = 'SCRelatedFeedObjectsWidget';
+const constants_1 = require("./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`
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    noResults: `${constants_1.PREFIX}-no-results`,
+    showMore: `${constants_1.PREFIX}-show-more`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    endMessage: `${constants_1.PREFIX}-end-message`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 const PREFERENCES = [
     react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED,
     react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED,
@@ -81,7 +79,7 @@ function RelatedFeedObjectWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { feedObject, feedObjectId, feedObjectType, template = feedObject_1.SCFeedObjectTemplateType.SNIPPET, className = null, autoHide = null, limit = 5, FeedObjectProps = {
         template: feedObject_1.SCFeedObjectTemplateType.SNIPPET

package/lib/cjs/components/RelatedFeedObjectsWidget/Skeleton.d.ts

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCRelatedFeedObjectsWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCRelatedFeedObjects-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCRelatedFeedObjectsWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCRelatedFeedObjectsWidget-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function RelatedFeedObjectsWidgetSkeleton(): JSX.Element;

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

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const CategoryTrendingFeedWidget_1 = require("../CategoryTrendingFeedWidget");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCRelatedFeedObjectsWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(CategoryTrendingFeedWidget_1.CategoryTrendingFeedWidgetSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Related Feed Objects Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(CategoryTrendingFeedWidget_1.CategoryTrendingF
 
  #### Component Name
 
- The name `SCRelatedFeedObjectsWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCRelatedFeedObjects-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCRelatedFeedObjectsWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCRelatedFeedObjectsWidget-skeleton-root|Styles applied to the root element.|
  *
  */
 function RelatedFeedObjectsWidgetSkeleton() {

package/lib/cjs/components/RelatedFeedObjectsWidget/constants.d.ts

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCRelatedFeedObjectsWidget';

package/lib/cjs/components/SnippetNotifications/Skeleton.d.ts

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

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

@@ -7,13 +7,16 @@ const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const NotificationItem_1 = tslib_1.__importDefault(require("../../shared/NotificationItem"));
 const notification_1 = require("../../types/notification");
-const PREFIX = 'SCSnippetNotificationsSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`,
-    item: `${PREFIX}-item`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`,
+    item: `${constants_1.PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.List, { name: PREFIX, slot: 'Root', overridesResolver: (props, styles) => styles.root })(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(material_1.List, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Snippet Notification Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,14 +28,14 @@ const Root = (0, styles_1.styled)(material_1.List, { name: PREFIX, slot: 'Root',
 
  #### Component Name
 
- The name `SCSnippetNotificationSkeleton` can be used when providing style overrides in the theme.
+ The name `SCSnippetNotification-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCSnippetNotificationSkeleton-root|Styles applied to the root element.|
- |item|.SCSnippetNotificationSkeleton-item|Styles applied to the item element.|
+ |root|.SCSnippetNotification-skeleton-root|Styles applied to the root element.|
+ |item|.SCSnippetNotification-item|Styles applied to the item element.|
  *
  */
 function SnippetNotificationSkeleton(props) {

package/lib/cjs/components/SnippetNotifications/SnippetNotifications.js

@@ -32,26 +32,19 @@ const react_core_1 = require("@selfcommunity/react-core");
 const system_1 = require("@mui/system");
 const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
 const NotificationItem_1 = tslib_1.__importDefault(require("../../shared/NotificationItem"));
-const PREFIX = 'SCSnippetNotifications';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    notificationsWrap: `${PREFIX}-notifications-wrap`,
-    emptyBoxNotifications: `${PREFIX}-empty-box-notifications`,
-    list: `${PREFIX}-list`,
-    broadcastMessagesBanner: `${PREFIX}-broadcast-messages-banner`,
-    item: `${PREFIX}-item`
+    root: `${constants_1.PREFIX}-root`,
+    notificationsWrap: `${constants_1.PREFIX}-notifications-wrap`,
+    emptyBoxNotifications: `${constants_1.PREFIX}-empty-box-notifications`,
+    list: `${constants_1.PREFIX}-list`,
+    broadcastMessagesBanner: `${constants_1.PREFIX}-broadcast-messages-banner`,
+    item: `${constants_1.PREFIX}-item`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({
-    width: '100%',
-    [`& .${classes.notificationsWrap}`]: {
-        height: 330,
-        overflowY: 'hidden'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, react_core_1.SCPreferences.TEXT_APPLICATION_NAME];
 /**
  * > API documentation for the Community-JS SnippetNotifications component. Learn about the available props and the CSS API.
@@ -88,7 +81,7 @@ function SnippetNotifications(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = `snippetNotifications`, className, showMax = 20, handleCustomNotification, handleNotification, ScrollContainerProps = {}, onNotificationClick, onFetchNotifications } = props, rest = tslib_1.__rest(props, ["id", "className", "showMax", "handleCustomNotification", "handleNotification", "ScrollContainerProps", "onNotificationClick", "onFetchNotifications"]);
     // CONTEXT

package/lib/cjs/components/SnippetNotifications/constants.d.ts

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

package/lib/cjs/components/SnippetNotifications/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCSnippetNotifications';

package/lib/cjs/components/ToastNotifications/Skeleton.d.ts

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

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

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Notification_1 = require("../Notification");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCToastNotificationsSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(Notification_1.NotificationSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Toast Notifications Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(Notification_1.NotificationSkeleton, {
 
  #### Component Name
 
- The name `SCToastNotificationsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCToastNotifications-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCToastNotificationsSkeleton-root|Styles applied to the root element.|
+ |root|.SCToastNotifications-skeleton-root|Styles applied to the root element.|
  *
  */
 function ToastNotificationsSkeleton() {

package/lib/cjs/components/ToastNotifications/ToastNotifications.js

@@ -23,12 +23,11 @@ const UserBlocked_1 = tslib_1.__importDefault(require("../Notification/UserBlock
 const Message_1 = tslib_1.__importDefault(require("../BroadcastMessages/Message"));
 const system_1 = require("@mui/system");
 const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
-const PREFIX = 'SCToastNotifications';
+const constants_1 = require("./constants");
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 
@@ -58,7 +57,7 @@ function UserToastNotifications(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { handleNotification, disableToastNotification = false } = props;
     // CONTEXT

package/lib/cjs/components/ToastNotifications/constants.d.ts

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

package/lib/cjs/components/ToastNotifications/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCToastNotifications';

package/lib/cjs/components/User/Skeleton.d.ts

@@ -10,13 +10,13 @@ import { WidgetProps } from '../Widget';
 
  #### Component Name
 
- The name `SCUserSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUser-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSkeleton-root|Styles applied to the root element.|
+ |root|.SCUser-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserSkeleton(props: WidgetProps): JSX.Element;

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

@@ -6,11 +6,14 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
-const PREFIX = 'SCUserSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(BaseItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Skeleton component. Learn about the available props and the CSS API.
 
@@ -22,13 +25,13 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCUserSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUser-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSkeleton-root|Styles applied to the root element.|
+ |root|.SCUser-skeleton-root|Styles applied to the root element.|
  *
  */
 function UserSkeleton(props) {

package/lib/cjs/components/User/User.js

@@ -13,20 +13,20 @@ const system_1 = require("@mui/system");
 const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     userFollowers: {
         id: 'ui.user.userFollowers',
         defaultMessage: 'ui.user.userFollowers'
     }
 });
-const PREFIX = 'SCUser';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    staffBadgeLabel: `${PREFIX}-staff-badge-label`
+    root: `${constants_1.PREFIX}-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    staffBadgeLabel: `${constants_1.PREFIX}-staff-badge-label`
 };
 const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
-    name: PREFIX,
+    name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
@@ -64,7 +64,7 @@ function User(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent"]);
     // STATE

package/lib/cjs/components/User/constants.d.ts

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

package/lib/cjs/components/User/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCUser';

package/lib/cjs/components/UserConnectionsRequestsSentWidget/Skeleton.d.ts

@@ -10,13 +10,13 @@ import { WidgetProps } from '../Widget';
 
  #### Component Name
 
- The name `SCUserConnectionsRequestsSentWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserConnectionsRequestsSentWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserConnectionsRequestsSentWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserConnectionsRequestsSentWidget-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserConnectionsRequestsSentSkeleton(props: WidgetProps): JSX.Element;

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

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const CategoryTrendingUsersWidget_1 = require("../CategoryTrendingUsersWidget");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCUserConnectionsRequestsSentWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrendingPeopleWidgetSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Connections Requests Sent Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(CategoryTrendingUsersWidget_1.CategoryTrending
 
  #### Component Name
 
- The name `SCUserConnectionsRequestsSentWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserConnectionsRequestsSentWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserConnectionsRequestsSentWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserConnectionsRequestsSentWidget-skeleton-root|Styles applied to the root element.|
  *
  */
 function UserConnectionsRequestsSentSkeleton(props) {