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

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

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

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

@@ -3,17 +3,16 @@ import { styled } from '@mui/material/styles';
 import { Box, Card, CardContent, ListSubheader, Skeleton, useMediaQuery, useTheme } from '@mui/material';
 import List from '@mui/material/List';
 import PrivateMessageThreadItemSkeleton from '../PrivateMessageThreadItem/Skeleton';
-const PREFIX = 'SCPrivateMessageThreadSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`,
     editor: `${PREFIX}-editor`
 };
 const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,14 +24,14 @@ const Root = styled(Card, {
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageThreadSkeleton(props) {

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

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

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

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

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

@@ -62,6 +62,7 @@ export interface PrivateMessageThreadItemProps {
  |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

package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -15,8 +15,7 @@ import BaseDialog from '../../shared/BaseDialog';
 import LightBox from '../../shared/Lightbox';
 import AutoPlayer from '../../shared/AutoPlayer';
 import { useSnackbar } from 'notistack';
-const PREFIX = 'SCPrivateMessageThreadItem';
-const DIALOG_PREFIX = `${PREFIX}Dialog`;
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     text: `${PREFIX}-text`,
@@ -25,18 +24,17 @@ const classes = {
     video: `${PREFIX}-video`,
     messageTime: `${PREFIX}-message-time`,
     menuItem: `${PREFIX}-menu-item`,
-    downloadButton: `${PREFIX}-download-button`
+    downloadButton: `${PREFIX}-download-button`,
+    dialogRoot: `${PREFIX}-dialog-root`
 };
-const MediaPreviewDialog = styled(BaseDialog, {
-    name: DIALOG_PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+const DialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 const Root = styled(ListItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.
 
@@ -62,6 +60,7 @@ const Root = styled(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
@@ -160,7 +159,7 @@ export default function PrivateMessageThreadItem(inProps) {
                 hour: 'numeric',
                 minute: 'numeric'
             })}`)),
-        openDialog && (React.createElement(React.Fragment, null, (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (React.createElement(MediaPreviewDialog, { open: openDialog, onClose: () => setOpenDialog(false) },
+        openDialog && (React.createElement(React.Fragment, null, (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (React.createElement(DialogRoot, { open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot },
             React.createElement(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }))) : (React.createElement(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: [
                 React.createElement(IconButton, { key: 'download', onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton },
                     React.createElement(Icon, null, "download"))

package/lib/esm/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/esm/components/PrivateMessageThreadItem/Skeleton.js

@@ -4,12 +4,15 @@ import ListItemText from '@mui/material/ListItemText';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { useMediaQuery, useTheme } from '@mui/material';
-const PREFIX = 'SCPrivateMessageThreadItemSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(ListItem)(({ theme }) => ({}));
+const Root = styled(ListItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageThreadItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,14 +24,14 @@ const Root = styled(ListItem)(({ 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.|
  *
  */
 export default function PrivateMessageThreadItemSkeleton(props) {

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

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

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

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

package/lib/esm/components/RelatedFeedObjectsWidget/RelatedFeedObjectsWidget.js

@@ -20,7 +20,7 @@ import { SCCustomAdvPosition } from '@selfcommunity/types';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import Skeleton from './Skeleton';
-const PREFIX = 'SCRelatedFeedObjectsWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -31,14 +31,12 @@ const classes = {
 };
 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'
+})(() => ({}));
 const PREFERENCES = [
     SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED,
     SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED,

package/lib/esm/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/esm/components/RelatedFeedObjectsWidget/Skeleton.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { CategoryTrendingFeedWidgetSkeleton } from '../CategoryTrendingFeedWidget';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCRelatedFeedObjectsWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(CategoryTrendingFeedWidgetSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Related Feed Objects Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,13 +20,13 @@ const Root = styled(CategoryTrendingFeedWidgetSkeleton, {
 
  #### 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() {

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

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

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

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

package/lib/esm/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/esm/components/SnippetNotifications/Skeleton.js

@@ -4,13 +4,16 @@ import { List, ListItem, useTheme } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import NotificationItem from '../../shared/NotificationItem';
 import { SCNotificationObjectTemplateType } from '../../types/notification';
-const PREFIX = 'SCSnippetNotificationsSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`,
     item: `${PREFIX}-item`
 };
-const Root = styled(List, { name: PREFIX, slot: 'Root', overridesResolver: (props, styles) => styles.root })(({ theme }) => ({}));
+const Root = styled(List, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Snippet Notification Skeleton component. Learn about the available props and the CSS API.
 
@@ -22,14 +25,14 @@ const Root = styled(List, { name: PREFIX, slot: 'Root', overridesResolver: (prop
 
  #### 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) {

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -30,7 +30,7 @@ import { Link, SCNotification, SCPreferences, SCRoutes, useSCPreferences, useSCR
 import { useThemeProps } from '@mui/system';
 import ContributionNotification from '../Notification/Contribution';
 import NotificationItem from '../../shared/NotificationItem';
-const PREFIX = 'SCSnippetNotifications';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     notificationsWrap: `${PREFIX}-notifications-wrap`,
@@ -41,15 +41,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({
-    width: '100%',
-    [`& .${classes.notificationsWrap}`]: {
-        height: 330,
-        overflowY: 'hidden'
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
 /**
  * > API documentation for the Community-JS SnippetNotifications component. Learn about the available props and the CSS API.

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

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

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

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

package/lib/esm/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/esm/components/ToastNotifications/Skeleton.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { NotificationSkeleton } from '../Notification';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCToastNotificationsSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(NotificationSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Toast Notifications Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,13 +20,13 @@ const Root = styled(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.|
  *
  */
 export default function ToastNotificationsSkeleton() {

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -20,12 +20,11 @@ import UserBlockedNotification from '../Notification/UserBlocked';
 import Message from '../BroadcastMessages/Message';
 import { useThemeProps } from '@mui/system';
 import ContributionNotification from '../Notification/Contribution';
-const PREFIX = 'SCToastNotifications';
+import { PREFIX } from './constants';
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Toast Notifications component. Learn about the available props and the CSS API.
 

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

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

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

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

package/lib/esm/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/esm/components/User/Skeleton.js

@@ -3,11 +3,14 @@ import { Button, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import BaseItem from '../../shared/BaseItem';
-const PREFIX = 'SCUserSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
-const Root = styled(BaseItem)(({ theme }) => ({}));
+const Root = styled(BaseItem, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Skeleton component. Learn about the available props and the CSS API.
 
@@ -19,13 +22,13 @@ const Root = styled(BaseItem)(({ 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.|
  *
  */
 export default function UserSkeleton(props) {

package/lib/esm/components/User/User.js

@@ -11,13 +11,13 @@ import { useThemeProps } from '@mui/system';
 import BaseItemButton from '../../shared/BaseItemButton';
 import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     userFollowers: {
         id: 'ui.user.userFollowers',
         defaultMessage: 'ui.user.userFollowers'
     }
 });
-const PREFIX = 'SCUser';
 const classes = {
     root: `${PREFIX}-root`,
     avatar: `${PREFIX}-avatar`,

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

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

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

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

package/lib/esm/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/esm/components/UserConnectionsRequestsSentWidget/Skeleton.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { CategoryTrendingPeopleWidgetSkeleton } from '../CategoryTrendingUsersWidget';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCUserConnectionsRequestsSentWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(CategoryTrendingPeopleWidgetSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Connections Requests Sent Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -21,13 +20,13 @@ const Root = styled(CategoryTrendingPeopleWidgetSkeleton, {
 
  #### 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) {

package/lib/esm/components/UserConnectionsRequestsSentWidget/UserConnectionsRequestsSentWidget.js

@@ -17,7 +17,7 @@ import BaseDialog from '../../shared/BaseDialog';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-const PREFIX = 'SCUserConnectionsRequestsSentWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -28,14 +28,12 @@ const classes = {
 };
 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 User Connections Requests Widget component. Learn about the available props and the CSS API.
  *

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

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

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

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

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

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