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

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

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

package/lib/cjs/components/ChangePicture/ChangePicture.d.ts

@@ -46,6 +46,7 @@ export interface ChangePictureProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCChangePictureButton-root|Styles applied to the root element.|
+ |root|.SCChangePictureButton-dialog|Styles applied to the dialog element.|
 
  * @param inProps
  */

package/lib/cjs/components/ChangePicture/ChangePicture.js

@@ -10,15 +10,15 @@ const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const PREFIX = 'SCChangePictureButton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-root`,
+    dialog: `${constants_1.PREFIX}-dialog`
 };
 const Root = (0, styles_1.styled)(material_1.Button, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Change Picture component. Learn about the available props and the CSS API.
  *
@@ -41,6 +41,7 @@ const Root = (0, styles_1.styled)(material_1.Button, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCChangePictureButton-root|Styles applied to the root element.|
+ |root|.SCChangePictureButton-dialog|Styles applied to the dialog element.|
 
  * @param inProps
  */
@@ -48,7 +49,7 @@ function ChangePicture(inProps) {
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { iconButton, onChange, autoHide, className } = props, rest = tslib_1.__rest(props, ["iconButton", "onChange", "autoHide", "className"]);
     //STATE
@@ -65,7 +66,7 @@ function ChangePicture(inProps) {
     if (!autoHide) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest), iconButton ? (react_1.default.createElement(Icon_1.default, null, "photo_camera")) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" }))),
-            openChangePictureDialog && (react_1.default.createElement(ChangePictureDialog_1.default, { open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
+            openChangePictureDialog && (react_1.default.createElement(ChangePictureDialog_1.default, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
     }
     return null;
 }

package/lib/cjs/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -18,31 +18,23 @@ const system_1 = require("@mui/system");
 const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
 const Errors_1 = require("../../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
-const PREFIX = 'SCChangePictureDialog';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    upload: `${PREFIX}-upload`,
-    imagesList: `${PREFIX}-images-list`,
-    imageItem: `${PREFIX}-image-item`,
-    primary: `${PREFIX}-primary`
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    upload: `${constants_1.PREFIX}-upload`,
+    imagesList: `${constants_1.PREFIX}-images-list`,
+    imageItem: `${constants_1.PREFIX}-image-item`,
+    primary: `${constants_1.PREFIX}-primary`
 };
 const Root = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '& .MuiDialogContent-root': {
-        paddingLeft: theme.spacing(2)
-    },
-    [`& .${classes.imagesList}`]: {
-        maxHeight: 500
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 function ChangePictureDialog(inProps) {
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { open, onChange, onClose, className } = props, rest = tslib_1.__rest(props, ["open", "onChange", "onClose", "className"]);
     //CONTEXT
@@ -193,7 +185,7 @@ function ChangePictureDialog(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
         react_1.default.createElement(material_1.Box, { className: classes.upload },
             alert ? (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(false) },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }))) : (react_1.default.createElement(react_1.default.Fragment, null,

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

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

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

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

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -27,29 +27,28 @@ const VoteButton_1 = tslib_1.__importDefault(require("../VoteButton"));
 const VoteAudienceButton_1 = tslib_1.__importDefault(require("../VoteAudienceButton"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
-const PREFIX = 'SCCommentObject';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    comment: `${PREFIX}-comment`,
-    nestedComments: `${PREFIX}-nested-comments`,
-    avatar: `${PREFIX}-avatar`,
-    content: `${PREFIX}-content`,
-    showMoreContent: `${PREFIX}-show-more-content`,
-    author: `${PREFIX}-author`,
-    textContent: `${PREFIX}-text-content`,
-    commentActionsMenu: `${PREFIX}-comment-actions-menu`,
-    deleted: `${PREFIX}-deleted`,
-    activityAt: `${PREFIX}-activity-at`,
-    vote: `${PREFIX}-vote`,
-    voteAudience: `${PREFIX}-vote-audience`,
-    reply: `${PREFIX}-reply`,
-    contentSubSection: `${PREFIX}-comment-sub-section`
+    root: `${constants_1.PREFIX}-root`,
+    comment: `${constants_1.PREFIX}-comment`,
+    nestedComments: `${constants_1.PREFIX}-nested-comments`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    content: `${constants_1.PREFIX}-content`,
+    showMoreContent: `${constants_1.PREFIX}-show-more-content`,
+    author: `${constants_1.PREFIX}-author`,
+    textContent: `${constants_1.PREFIX}-text-content`,
+    commentActionsMenu: `${constants_1.PREFIX}-comment-actions-menu`,
+    deleted: `${constants_1.PREFIX}-deleted`,
+    activityAt: `${constants_1.PREFIX}-activity-at`,
+    vote: `${constants_1.PREFIX}-vote`,
+    voteAudience: `${constants_1.PREFIX}-vote-audience`,
+    reply: `${constants_1.PREFIX}-reply`,
+    contentSubSection: `${constants_1.PREFIX}-comment-sub-section`
 };
 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 Comment Object component. Learn about the available props and the CSS API.
  *
@@ -93,7 +92,7 @@ function CommentObject(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`, className, commentObjectId, commentObject, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentReply, onOpenReply, onDelete, onVote, elevation = 0, truncateContent = false, CommentObjectSkeletonProps = { elevation, WidgetProps: { variant: 'outlined' } }, CommentObjectReplyProps = { elevation, WidgetProps: { variant: 'outlined' } }, linkableCommentDateTime = true, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, CommentsObjectComponentProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "truncateContent", "CommentObjectSkeletonProps", "CommentObjectReplyProps", "linkableCommentDateTime", "cacheStrategy", "CommentsObjectComponentProps"]);
     // CONTEXT

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

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

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

@@ -7,31 +7,16 @@ const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
-const PREFIX = 'SCCommentObjectSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    primaryContent: `${PREFIX}-primary-content`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    primaryContent: `${constants_1.PREFIX}-primary-content`
 };
 const Root = (0, styles_1.styled)(BaseItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`&.${classes.root}`]: {
-        paddingBottom: theme.spacing(),
-        overflow: 'visible',
-        '& > div': {
-            alignItems: 'flex-start'
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        top: theme.spacing()
-    },
-    [`& .${classes.primaryContent}`]: {
-        marginBottom: theme.spacing()
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Comment Object Skeleton component. Learn about the available props and the CSS API.
 
@@ -43,13 +28,13 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
 
  #### Component Name
 
- The name `SCCommentObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentObject-skeleton-root|Styles applied to the root element.|
  *
  */
 function CommentObjectSkeleton(props) {

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

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

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

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

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.js

@@ -18,17 +18,16 @@ const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const Pagination_1 = require("../../constants/Pagination");
-const PREFIX = 'SCCommentsFeedObject';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    noComments: `${PREFIX}-no-comments`,
-    commentNotFound: `${PREFIX}-comment-not-found`
+    root: `${constants_1.PREFIX}-root`,
+    noComments: `${constants_1.PREFIX}-no-comments`,
+    commentNotFound: `${constants_1.PREFIX}-comment-not-found`
 };
 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 Comments Feed Object component. Learn about the available props and the CSS API.
  *
@@ -59,7 +58,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 function CommentsFeedObject(inProps) {
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // PROPS
     const { id = `comments_object_${props.feedObjectType ? props.feedObjectType : props.feedObject ? props.feedObject.type : ''}_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentObjectId, commentObject, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined', linkableCommentDateTime: false }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, renderNoComments, renderCommentNotFound, page = 1, commentsPageCount = Pagination_1.DEFAULT_PAGINATION_LIMIT, commentsOrderBy = comments_1.SCCommentsOrderBy.ADDED_AT_ASC, showTitle = false, infiniteScrolling = true, onChangePage, comments = [], cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "renderNoComments", "renderCommentNotFound", "page", "commentsPageCount", "commentsOrderBy", "showTitle", "infiniteScrolling", "onChangePage", "comments", "cacheStrategy"]);

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

@@ -3,7 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const CommentsObject_1 = require("../CommentsObject");
+const constants_1 = require("./constants");
+const styles_1 = require("@mui/material/styles");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`
+};
+const Root = (0, styles_1.styled)(CommentsObject_1.CommentsObjectSkeleton, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 function CommentsFeedObjectSkeleton(props) {
-    return react_1.default.createElement(CommentsObject_1.CommentsObjectSkeleton, Object.assign({}, props));
+    return react_1.default.createElement(Root, Object.assign({ className: classes.root }, props));
 }
 exports.default = CommentsFeedObjectSkeleton;

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

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

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

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

package/lib/cjs/components/CommentsObject/CommentsObject.js

@@ -17,22 +17,21 @@ const types_1 = require("@selfcommunity/types");
 const utils_1 = require("@selfcommunity/utils");
 const Pagination_1 = require("../../constants/Pagination");
 const react_core_1 = require("@selfcommunity/react-core");
-const PREFIX = 'SCCommentsObject';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    loadNextCommentsButton: `${PREFIX}-load-more-comments-button`,
-    loadPreviousCommentsButton: `${PREFIX}-load-previous-comments-button`,
-    paginationLink: `${PREFIX}-pagination-link`,
-    pagination: `${PREFIX}-pagination`,
-    commentsCounter: `${PREFIX}-comments-counter`,
-    commentNotFound: `${PREFIX}-comment-not-found`,
-    noOtherComments: `${PREFIX}-no-other-comment`
+    root: `${constants_1.PREFIX}-root`,
+    loadNextCommentsButton: `${constants_1.PREFIX}-load-more-comments-button`,
+    loadPreviousCommentsButton: `${constants_1.PREFIX}-load-previous-comments-button`,
+    paginationLink: `${constants_1.PREFIX}-pagination-link`,
+    pagination: `${constants_1.PREFIX}-pagination`,
+    commentsCounter: `${constants_1.PREFIX}-comments-counter`,
+    commentNotFound: `${constants_1.PREFIX}-comment-not-found`,
+    noOtherComments: `${constants_1.PREFIX}-no-other-comment`
 };
 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'
+})(() => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
 /**
  * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
@@ -63,7 +62,7 @@ const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED,
 function CommentsObject(inProps) {
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // PROPS
     const { id = `comments_object_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined' }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, CommentsObjectSkeletonProps = {}, next, isLoadingNext, handleNext, previous, isLoadingPrevious, handlePrevious, totalLoadedComments, totalComments, page, previousPage, nextPage, comments = [], startComments = [], endComments = [], infiniteScrolling = false, hideAdvertising = false, disablePaginationLinks = false, hidePaginationLinks = true, inPlaceLoadMoreContents = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "CommentsObjectSkeletonProps", "next", "isLoadingNext", "handleNext", "previous", "isLoadingPrevious", "handlePrevious", "totalLoadedComments", "totalComments", "page", "previousPage", "nextPage", "comments", "startComments", "endComments", "infiniteScrolling", "hideAdvertising", "disablePaginationLinks", "hidePaginationLinks", "inPlaceLoadMoreContents", "paginationLinksPageQueryParam", "PaginationLinkProps", "cacheStrategy"]);

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

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCCommentsObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentsObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentsObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentsObjectSkeleton(props: {

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

@@ -5,13 +5,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const CommentObject_1 = require("../CommentObject");
 const material_1 = require("@mui/material");
-const PREFIX = 'SCCommentsObjectSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    width: '100%'
-}));
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Comments Object Skeleton component. Learn about the available props and the CSS API.
 
@@ -23,13 +24,13 @@ const Root = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCommentsObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentsObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentsObject-skeleton-root|Styles applied to the root element.|
  *
  */
 function CommentsObjectSkeleton(props) {

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

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

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

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

package/lib/cjs/components/ConsentSolution/ConsentSolution.js

@@ -24,116 +24,30 @@ const legalPages_1 = require("../../utils/legalPages");
 const react_intl_1 = require("react-intl");
 const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
 const AccountDataPortability_1 = tslib_1.__importDefault(require("../AccountDataPortability"));
-const PREFIX = 'SCConsentSolution';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    titleBack: `${PREFIX}-title-back`,
-    content: `${PREFIX}-content`,
-    consent: `${PREFIX}-consent`,
-    consentSwitch: `${PREFIX}-consent-switch`,
-    actions: `${PREFIX}-actions`,
-    backButton: `${PREFIX}-back-button`,
-    nextButton: `${PREFIX}-next-button`,
-    closeButton: `${PREFIX}-close-button`,
-    confirmDeleteAccountButton: `${PREFIX}-confirm-delete-account-button`,
-    logoutAccountButton: `${PREFIX}-logout-account-button`,
-    deleteAccountButton: `${PREFIX}-delete-account-button`,
-    dataPortability: `${PREFIX}-data-portability`,
-    dataPortabilityCheck: `${PREFIX}-download-data-portability-check`,
-    alertAcceptDocument: `${PREFIX}-alert-accept-document`,
-    acceptConditions: `${PREFIX}-accept-conditions`
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    titleBack: `${constants_1.PREFIX}-title-back`,
+    content: `${constants_1.PREFIX}-content`,
+    consent: `${constants_1.PREFIX}-consent`,
+    consentSwitch: `${constants_1.PREFIX}-consent-switch`,
+    actions: `${constants_1.PREFIX}-actions`,
+    backButton: `${constants_1.PREFIX}-back-button`,
+    nextButton: `${constants_1.PREFIX}-next-button`,
+    closeButton: `${constants_1.PREFIX}-close-button`,
+    confirmDeleteAccountButton: `${constants_1.PREFIX}-confirm-delete-account-button`,
+    logoutAccountButton: `${constants_1.PREFIX}-logout-account-button`,
+    deleteAccountButton: `${constants_1.PREFIX}-delete-account-button`,
+    dataPortability: `${constants_1.PREFIX}-data-portability`,
+    dataPortabilityCheck: `${constants_1.PREFIX}-download-data-portability-check`,
+    alertAcceptDocument: `${constants_1.PREFIX}-alert-accept-document`,
+    acceptConditions: `${constants_1.PREFIX}-accept-conditions`
 };
 const Root = (0, styles_1.styled)(Dialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.title}`]: {
-        display: 'flex',
-        justifyContent: 'center',
-        fontWeight: 800,
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.9rem'
-        }
-    },
-    [`& .${classes.titleBack}`]: {
-        display: 'flex',
-        justifyContent: 'left'
-    },
-    [`& .${classes.content}`]: {
-        padding: theme.spacing(2),
-        overflowX: 'hidden',
-        fontSize: '0.8rem',
-        [theme.breakpoints.down('sm')]: {
-            padding: 12,
-            '& h6': {
-                fontSize: '0.8rem'
-            },
-            '& span, p, li': {
-                fontSize: '0.7rem'
-            },
-            '& li': {
-                fontSize: '0.7rem'
-            },
-            '& button': {
-                fontSize: '0.6rem'
-            }
-        }
-    },
-    [`& .${classes.consent}`]: {
-        borderTop: 0,
-        overflowY: 'visible',
-        [theme.breakpoints.down('sm')]: {
-            paddingTop: 5,
-            paddingBottom: 5
-        }
-    },
-    [`& .${classes.consentSwitch}`]: {
-        margin: `${theme.spacing()} 3px`,
-        '& > span:first-of-type': {
-            marginRight: 10
-        },
-        [theme.breakpoints.down('sm')]: {
-            '.MuiFormControlLabel-label': {
-                fontSize: '0.7rem'
-            }
-        }
-    },
-    [`& .${classes.deleteAccountButton}`]: {
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.confirmDeleteAccountButton}`]: {
-        color: '#FFF !important',
-        marginRight: theme.spacing(2),
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.logoutAccountButton}`]: {
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.dataPortability}`]: {
-        marginBottom: theme.spacing(2)
-    },
-    [`& .${classes.alertAcceptDocument}`]: {
-        padding: theme.spacing(),
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.7rem',
-            padding: 5
-        }
-    },
-    [`& .${classes.acceptConditions}`]: {
-        fontSize: '0.8rem',
-        fontWeight: 300,
-        color: theme.palette.grey['A700'],
-        padding: `${theme.spacing()} ${theme.spacing()}`,
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.6rem'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * Translations
  */
@@ -197,7 +111,7 @@ function ConsentSolution(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className, open = true, onClose, legalPolicies = LegalPolicies_1.LEGAL_POLICIES, onLogout, onDeleteAccount } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "legalPolicies", "onLogout", "onDeleteAccount"]);
     // CONTEXT

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

@@ -9,18 +9,18 @@
 
  #### Component Name
 
- The name `SCConsentSolutionSkeleton` can be used when providing style overrides in the theme.
+ The name `SCConsentSolution-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCConsentSolutionSkeleton-root|Styles applied to the root element.|
- |title|.SCConsentSolutionSkeleton-title|Styles applied to the title element.|
- |content|.SCConsentSolutionSkeleton-content|Styles applied to the content element.|
- |consent|.SCConsentSolutionSkeleton-consent|Styles applied to the consent element.|
- |consentSwitch|.SCConsentSolutionSkeleton-consent-switch|Styles applied to the switch skeleton element.|
- |actions|.SCConsentSolutionSkeleton-actions|Styles applied to the actions section.|
+ |root|.SCConsentSolution-skeleton-root|Styles applied to the root element.|
+ |title|.SCConsentSolution-title|Styles applied to the title element.|
+ |content|.SCConsentSolution-content|Styles applied to the content element.|
+ |consent|.SCConsentSolution-consent|Styles applied to the consent element.|
+ |consentSwitch|.SCConsentSolution-consent-switch|Styles applied to the switch skeleton element.|
+ |actions|.SCConsentSolution-actions|Styles applied to the actions section.|
  *
  */
 export default function ConsentSolutionSkeleton(): JSX.Element;