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

package/lib/cjs/components/BroadcastMessages/BroadcastMessages.js

@@ -14,35 +14,17 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
 const Skeleton_1 = require("./Skeleton");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCBroadcastMessages';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    boxLoadMore: `${PREFIX}-box-load-more`,
-    avatarLoadMore: `${PREFIX}-avatar-load-more`,
-    buttonLoadMore: `${PREFIX}-button-load-more`
+    root: `${constants_1.PREFIX}-root`,
+    boxLoadMore: `${constants_1.PREFIX}-box-load-more`,
+    avatarLoadMore: `${constants_1.PREFIX}-avatar-load-more`,
+    buttonLoadMore: `${constants_1.PREFIX}-button-load-more`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.boxLoadMore}`]: {
-        textAlign: 'center',
-        '& > div': {
-            paddingBottom: theme.spacing(2)
-        },
-        marginBottom: theme.spacing(2)
-    },
-    [`& .${classes.avatarLoadMore}`]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-        marginRight: theme.spacing()
-    },
-    [`& .${classes.buttonLoadMore}`]: {
-        textTransform: 'capitalize',
-        marginLeft: -10
-    }
-}));
+    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 Broadcast Messages component. Learn about the available props and the CSS API.
@@ -73,7 +55,7 @@ function BroadcastMessages(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = 'broadcast_messages', className = null, MessageProps = {}, subscriptionChannel = `${types_1.SCNotificationTopicType.INTERACTION}.${types_1.SCNotificationTypologyType.NOTIFICATION_BANNER}`, disableLoader = false, viewAllMessages = false, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onStateChange, onHeightChange } = props, rest = tslib_1.__rest(props, ["id", "className", "MessageProps", "subscriptionChannel", "disableLoader", "viewAllMessages", "cacheStrategy", "onStateChange", "onHeightChange"]);
     // CONTEXT

package/lib/cjs/components/BroadcastMessages/Message.js

@@ -11,61 +11,25 @@ const MarkRead_1 = tslib_1.__importDefault(require("../../shared/MarkRead"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const types_1 = require("../../types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const colors_1 = require("@mui/material/colors");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
-const PREFIX = 'SCBroadcastMessage';
+const constants_1 = require("./constants");
 const classes = {
-    header: `${PREFIX}-header`,
-    title: `${PREFIX}-title`,
-    media: `${PREFIX}-media`,
-    content: `${PREFIX}-content`,
-    listItemSnippet: `${PREFIX}-list-item-snippet`,
-    listItemSnippetNew: `${PREFIX}-list-item-snippet-new`,
-    messageIconWrap: `${PREFIX}-flag-icon-wrap`,
-    messageIconSnippet: `${PREFIX}-flag-icon-snippet`
+    root: `${constants_1.PREFIX}-message-root`,
+    header: `${constants_1.PREFIX}-header`,
+    title: `${constants_1.PREFIX}-title`,
+    media: `${constants_1.PREFIX}-media`,
+    content: `${constants_1.PREFIX}-content`,
+    listItemSnippet: `${constants_1.PREFIX}-list-item-snippet`,
+    listItemSnippetNew: `${constants_1.PREFIX}-list-item-snippet-new`,
+    messageIconWrap: `${constants_1.PREFIX}-flag-icon-wrap`,
+    messageIconSnippet: `${constants_1.PREFIX}-flag-icon-snippet`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    [`& .${classes.header} .MuiAvatar-img`]: {
-        objectFit: 'fill'
-    },
-    [`& .${classes.title}`]: {
-        padding: `${theme.spacing(2)}`,
-        paddingBottom: `${theme.spacing()}`,
-        paddingTop: 0
-    },
-    [`& .${classes.media}`]: {
-        paddingBottom: `${theme.spacing(2)}`
-    },
-    [`& .${classes.content}`]: {
-        padding: theme.spacing(2),
-        paddingTop: 0
-    },
-    [`& .${classes.listItemSnippet}`]: {
-        padding: '0px 5px',
-        alignItems: 'center'
-    },
-    [`& .${classes.listItemSnippetNew}`]: {
-        borderLeft: '2px solid red'
-    },
-    [`& .${classes.messageIconWrap}`]: {
-        minWidth: 'auto',
-        paddingRight: 10
-    },
-    [`& .${classes.messageIconSnippet}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF',
-        width: 30,
-        height: 30
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'MessageRoot'
+})(() => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, react_core_1.SCPreferences.TEXT_APPLICATION_NAME];
 function Message(props) {
     // PROPS
@@ -86,7 +50,6 @@ function Message(props) {
     // HANDLERS
     /**
      * Handle dispose message
-     * @param res
      */
     const handleClose = () => {
         setClosing(true);
@@ -137,7 +100,7 @@ function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return (react_1.default.createElement(Root, Object.assign({ id: id, className: className }, rest),
+        return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
             react_1.default.createElement(material_1.Fade, { in: open, unmountOnExit: true },
                 react_1.default.createElement(material_1.Box, null,
                     message.viewed_at === null && !disableMarkRead && (react_1.default.createElement(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })),

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

@@ -9,17 +9,17 @@
 
  #### Component Name
 
- The name `SCBroadcastMessageSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-message-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessageSkeleton-root|Styles applied to the root element.|
- |header|.SCBroadcastMessageSkeleton-header|Styles applied to the header element.|
- |title|.SCBroadcastMessageSkeleton-title|Styles applied to the title element.|
- |media|.SCBroadcastMessageSkeleton-media|Styles applied to the media element.|
- |content|.SCBroadcastMessageSkeleton-content|Styles applied to the content section.|
+ |root|.SCBroadcastMessages-message-skeleton-root|Styles applied to the root element.|
+ |header|.SCBroadcastMessages-header|Styles applied to the header element.|
+ |title|.SCBroadcastMessages-title|Styles applied to the title element.|
+ |media|.SCBroadcastMessages-media|Styles applied to the media element.|
+ |content|.SCBroadcastMessages-content|Styles applied to the content section.|
  *
  */
 export declare function MessageSkeleton(props: any): JSX.Element;
@@ -34,13 +34,13 @@ export declare function MessageSkeleton(props: any): JSX.Element;
 
  #### Component Name
 
- The name `SCBroadcastMessagesSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessagesSkeleton-root|Styles applied to the root element.|
+ |root|.SCBroadcastMessages-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function BroadcastMessagesSkeleton(props: any): JSX.Element;

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

@@ -6,21 +6,18 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const MESSAGE_PREFIX = 'SCBroadcastMessageSkeleton';
+const constants_1 = require("./constants");
 const messageClasses = {
-    root: `${MESSAGE_PREFIX}-root`,
-    header: `${MESSAGE_PREFIX}-header`,
-    title: `${MESSAGE_PREFIX}-title`,
-    media: `${MESSAGE_PREFIX}-media`,
-    content: `${MESSAGE_PREFIX}-content`
+    root: `${constants_1.PREFIX}-message-skeleton-root`,
+    header: `${constants_1.PREFIX}-header`,
+    title: `${constants_1.PREFIX}-title`,
+    media: `${constants_1.PREFIX}-media`,
+    content: `${constants_1.PREFIX}-content`
 };
-const MessageRoot = (0, styles_1.styled)(Widget_1.default, {
-    name: MESSAGE_PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const MessageSkeletonRoot = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'MessageSkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Broadcast Message Skeleton component. Learn about the available props and the CSS API.
 
@@ -32,22 +29,22 @@ const MessageRoot = (0, styles_1.styled)(Widget_1.default, {
 
  #### Component Name
 
- The name `SCBroadcastMessageSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-message-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessageSkeleton-root|Styles applied to the root element.|
- |header|.SCBroadcastMessageSkeleton-header|Styles applied to the header element.|
- |title|.SCBroadcastMessageSkeleton-title|Styles applied to the title element.|
- |media|.SCBroadcastMessageSkeleton-media|Styles applied to the media element.|
- |content|.SCBroadcastMessageSkeleton-content|Styles applied to the content section.|
+ |root|.SCBroadcastMessages-message-skeleton-root|Styles applied to the root element.|
+ |header|.SCBroadcastMessages-header|Styles applied to the header element.|
+ |title|.SCBroadcastMessages-title|Styles applied to the title element.|
+ |media|.SCBroadcastMessages-media|Styles applied to the media element.|
+ |content|.SCBroadcastMessages-content|Styles applied to the content section.|
  *
  */
 function MessageSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(MessageRoot, { className: classes.root },
+    return (react_1.default.createElement(MessageSkeletonRoot, { className: messageClasses.root },
         react_1.default.createElement(material_1.CardHeader, { className: messageClasses.header, avatar: react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: react_1.default.createElement(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }),
         react_1.default.createElement(material_1.CardContent, { className: messageClasses.title },
             react_1.default.createElement(react_1.default.Fragment, null,
@@ -60,15 +57,13 @@ function MessageSkeleton(props) {
                 react_1.default.createElement(material_1.Skeleton, { animation: "wave", height: 10, width: 60 })))));
 }
 exports.MessageSkeleton = MessageSkeleton;
-const PREFIX = 'SCBroadcastMessagesSkeleton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Broadcast Messages Skeleton component. Learn about the available props and the CSS API.
 
@@ -80,13 +75,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCBroadcastMessagesSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessagesSkeleton-root|Styles applied to the root element.|
+ |root|.SCBroadcastMessages-skeleton-root|Styles applied to the root element.|
  *
  */
 function BroadcastMessagesSkeleton(props) {

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

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

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

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

package/lib/cjs/components/CategoryHeader/CategoryHeader.js

@@ -10,22 +10,21 @@ const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
-const PREFIX = 'SCCategoryHeader';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    cover: `${PREFIX}-cover`,
-    name: `${PREFIX}-name`,
-    slogan: `${PREFIX}-slogan`,
-    info: `${PREFIX}-info`,
-    followedCounter: `${PREFIX}-followed-counter`,
-    followed: `${PREFIX}-followed`,
-    action: `${PREFIX}-action`
+    root: `${constants_1.PREFIX}-root`,
+    cover: `${constants_1.PREFIX}-cover`,
+    name: `${constants_1.PREFIX}-name`,
+    slogan: `${constants_1.PREFIX}-slogan`,
+    info: `${constants_1.PREFIX}-info`,
+    followedCounter: `${constants_1.PREFIX}-followed-counter`,
+    followed: `${constants_1.PREFIX}-followed`,
+    action: `${constants_1.PREFIX}-action`
 };
 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 Category AppBar component. Learn about the available props and the CSS API.
  *
@@ -60,7 +59,7 @@ function CategoryHeader(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
     // STATE

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

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

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

@@ -5,32 +5,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const PREFIX = 'SCCategoryHeaderSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({
-    position: 'relative',
-    [`& .${classes.avatar}`]: {
-        position: 'absolute',
-        top: 190,
-        width: '100%',
-        [`& .MuiSkeleton-root`]: {
-            border: '#FFF solid 5px',
-            margin: '0 auto'
-        }
-    },
-    [`& .${classes.username}`]: {
-        marginTop: 50,
-        textAlign: 'center'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Category AppBar Skeleton component. Learn about the available props and the CSS API.
 
@@ -42,15 +24,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCCategoryHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCCategoryHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCCategoryHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCCategoryHeader-skeleton-root|Styles applied to the root element.|
  *
  */
 function CategoryHeaderSkeleton() {

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

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

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

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

package/lib/cjs/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -20,24 +20,22 @@ const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const react_core_1 = require("@selfcommunity/react-core");
 const widget_1 = require("../../utils/widget");
-const PREFIX = 'SCCategoryTrendingFeedWidget';
+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
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Trending Feed Widget component. Learn about the available props and the CSS API.
@@ -74,7 +72,7 @@ function CategoryTrendingFeedWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className = null, categoryId = null, autoHide = null, limit = 3, FeedObjectProps = {
         template: feedObject_1.SCFeedObjectTemplateType.SNIPPET

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

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

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

@@ -7,14 +7,15 @@ const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../FeedObject/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCCategoryTrendingFeedWidgetSkeleton';
+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)(Widget_1.default)(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Trending Feed Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -26,13 +27,14 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCategoryTrendingFeedWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryTrendingFeedWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryTrendingFeedWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCCategoryTrendingFeedWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCCategoryTrendingFeedWidget-list|Styles applied to the list element.|
  *
  */
 function CategoryTrendingFeedWidgetSkeleton(props) {

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

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

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

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

package/lib/cjs/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -19,25 +19,23 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
 const utils_1 = require("@selfcommunity/utils");
 const widget_1 = require("../../utils/widget");
 const Errors_1 = require("../../constants/Errors");
-const PREFIX = 'SCCategoryTrendingUsersWidget';
+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'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Trending Users Widget component. Learn about the available props and the CSS API.
  *
@@ -73,7 +71,7 @@ function CategoryTrendingUsersWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className = null, categoryId = null, autoHide = null, limit = 3, UserProps = {}, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "autoHide", "limit", "UserProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
     // STATE

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

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

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

@@ -7,14 +7,15 @@ const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../User/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCCategoryTrendingPeopleWidgetSkeleton';
+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)(Widget_1.default)(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Trending People Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -26,14 +27,14 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCategoryTrendingPeopleWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryTrendingPeopleWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryTrendingPeopleWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCCategoryTrendingPeopleWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCCategoryTrendingPeopleWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCCategoryTrendingPeopleWidget-list|Styles applied to the list element.|
  *
  */
 function CategoryTrendingPeopleWidgetSkeleton(props) {

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

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