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

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

@@ -5,15 +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 = 'SCUserInfoSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    field: `${constants_1.PREFIX}-field`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile Info Skeleton component. Learn about the available props and the CSS API.
@@ -26,13 +25,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCUserProfileInfoSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileInfo-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileInfoSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserProfileInfo-skeleton-root|Styles applied to the root element.|
  *
  */
 function UserProfileInfoSkeleton() {

package/lib/cjs/components/UserInfo/UserInfo.js

@@ -14,6 +14,7 @@ const system_1 = require("@mui/system");
 const types_1 = require("../../types");
 const Errors_1 = require("../../constants/Errors");
 const Tags_1 = tslib_1.__importStar(require("../../shared/Tags"));
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     realName: {
         id: 'ui.userInfo.realName',
@@ -56,16 +57,14 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.userInfo.fieldLink'
     }
 });
-const PREFIX = 'SCUserInfo';
 const classes = {
-    root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    root: `${constants_1.PREFIX}-root`,
+    field: `${constants_1.PREFIX}-field`
 };
 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 User Info component. Learn about the available props and the CSS API.
 
@@ -93,7 +92,7 @@ function UserInfo(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className = null, userId = null, user = null, fields = [...UserProfile_1.DEFAULT_FIELDS] } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "fields"]);
     // STATE

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

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

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

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

package/lib/cjs/components/UserInfoDialog/UserInfoDialog.js

@@ -9,23 +9,22 @@ const UserInfo_1 = tslib_1.__importStar(require("../UserInfo"));
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
-const PREFIX = 'SCUserInfoDialog';
+const constants_1 = require("../UserInfo/constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    caption: `${PREFIX}-caption`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    root: `${constants_1.PREFIX}-dialog-root`,
+    caption: `${constants_1.PREFIX}-caption`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`
 };
 const Root = (0, material_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 function UserInfoDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className, userId = null, user = null, UserInfoProps = {} } = props, rest = tslib_1.__rest(props, ["className", "userId", "user", "UserInfoProps"]);
     // HOOKS

package/lib/cjs/components/UserProfileEdit/Section/Account.js

@@ -17,6 +17,7 @@ const AccountCredentials_1 = tslib_1.__importDefault(require("./AccountCredentia
 const AccountDataPortabilityButton_1 = tslib_1.__importDefault(require("../../AccountDataPortabilityButton"));
 const AccountDeleteButton_1 = tslib_1.__importDefault(require("../../AccountDeleteButton"));
 const LanguageSwitcher_1 = tslib_1.__importDefault(require("../../../shared/LanguageSwitcher"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     socialTitle: {
         id: 'ui.userProfileEditAccount.socialAssociations.title',
@@ -31,21 +32,21 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.userProfileEditAccount.socialAssociations.dialog.msg'
     }
 });
-const PREFIX = 'SCUserProfileEditSectionAccount';
 const classes = {
-    root: `${PREFIX}-root`,
-    dangerZone: `${PREFIX}-danger-zone`
+    root: `${constants_1.PREFIX}-account-root`,
+    credentials: `${constants_1.PREFIX}-credentials`,
+    languageSwitcher: `${constants_1.PREFIX}-language-switcher`,
+    dangerZone: `${constants_1.PREFIX}-danger-zone`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'AccountRoot'
+})(() => ({}));
 function Account(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
@@ -77,8 +78,8 @@ function Account(inProps) {
     }
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
         startActions,
-        showCredentialsSection && react_1.default.createElement(AccountCredentials_1.default, Object.assign({ user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)),
-        showLanguageSwitcher && react_1.default.createElement(LanguageSwitcher_1.default, Object.assign({}, LanguageSwitcherProps)),
+        showCredentialsSection && react_1.default.createElement(AccountCredentials_1.default, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)),
+        showLanguageSwitcher && react_1.default.createElement(LanguageSwitcher_1.default, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)),
         showSocialAccountSection && (react_1.default.createElement(UserSocialAssociation_1.default, { children: react_1.default.createElement(material_1.Typography, { variant: "body1", mb: 1, sx: { fontWeight: 'bold' } },
                 ' ',
                 intl.formatMessage(messages.socialTitle)), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })),

package/lib/cjs/components/UserProfileEdit/Section/AccountCredentials.js

@@ -16,6 +16,7 @@ const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailT
 const lab_1 = require("@mui/lab");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const notistack_1 = require("notistack");
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     changePasswordTitle: {
         id: 'ui.userProfileEditAccountCredentials.changePassword',
@@ -26,35 +27,31 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.userProfileEditAccountCredentials.confirmPassword.error'
     }
 });
-const PREFIX = 'SCUserProfileEditSectionAccountCredentials';
 const classes = {
-    root: `${PREFIX}-root`,
-    email: `${PREFIX}-email`,
-    success: `${PREFIX}-success`,
-    error: `${PREFIX}-error`,
-    dangerZone: `${PREFIX}-danger-zone`,
-    dialogRoot: `${PREFIX}-dialog-root`,
-    form: `${PREFIX}-password-form`,
-    formField: `${PREFIX}-form-field`,
-    password: `${PREFIX}-password`,
-    confirmChangeButton: `${PREFIX}-confirm-change-button`
+    root: `${constants_1.PREFIX}-account-credentials-root`,
+    email: `${constants_1.PREFIX}-email`,
+    success: `${constants_1.PREFIX}-success`,
+    error: `${constants_1.PREFIX}-error`,
+    dialogRoot: `${constants_1.PREFIX}-password-dialog-root`,
+    form: `${constants_1.PREFIX}-password-form`,
+    formField: `${constants_1.PREFIX}-form-field`,
+    password: `${constants_1.PREFIX}-password`,
+    confirmChangeButton: `${constants_1.PREFIX}-confirm-change-button`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'AccountCredentialsRoot'
 })(() => ({}));
 const PasswordDialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    name: constants_1.PREFIX,
+    slot: 'PasswordDialogRoot'
 })(() => ({}));
 function AccountCredentials(inProps) {
     var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // CONTEXT
     const { className = null, user, skipEmailValidation = false } = props, rest = tslib_1.__rest(props, ["className", "user", "skipEmailValidation"]);

package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js

@@ -24,6 +24,7 @@ const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
 const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
 const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     genderMale: {
         id: 'ui.userProfileEditPublicInfo.genderMale',
@@ -38,35 +39,22 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.userProfileEditPublicInfo.genderUnspecified'
     }
 });
-const PREFIX = 'SCUserProfileEditSectionPublicInfo';
 const classes = {
-    root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`,
-    btnSave: `${PREFIX}-btn-save`
+    root: `${constants_1.PREFIX}-public-info-root`,
+    field: `${constants_1.PREFIX}-field`,
+    btnSave: `${constants_1.PREFIX}-btn-save`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.field}`]: {
-        margin: theme.spacing(1, 0, 1, 0)
-    },
-    [`& .${classes.field} .MuiSelect-icon`]: {
-        right: theme.spacing(5)
-    },
-    [`& .${classes.btnSave}`]: {
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing()
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'PublicInfoRoot'
+})(() => ({}));
 const GENDERS = ['Male', 'Female', 'Unspecified'];
 const DATEPICKER_MINDATE = new Date(1000, 1, 1);
 function PublicInfo(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = null, className = null, fields = [...UserProfile_1.DEFAULT_FIELDS], onEditSuccess = null, onEditFailure = null, startActions = null, endActions = null } = props, rest = tslib_1.__rest(props, ["id", "className", "fields", "onEditSuccess", "onEditFailure", "startActions", "endActions"]);
     // CONTEXT

package/lib/cjs/components/UserProfileEdit/Section/Settings.js

@@ -12,28 +12,20 @@ const notistack_1 = require("notistack");
 const system_1 = require("@mui/system");
 const UserProfile_1 = require("../../../constants/UserProfile");
 const types_1 = require("../../../types");
-const PREFIX = 'SCUserProfileEditSectionSettings';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    control: `${PREFIX}-control`
+    root: `${constants_1.PREFIX}-settings-root`,
+    control: `${constants_1.PREFIX}-control`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.control}`]: {
-        margin: theme.spacing(0, 0, 2, 0),
-        ['& .MuiFormControl-root']: {
-            display: 'block'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SettingsRoot'
+})(() => ({}));
 function Settings(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = null, className = null, settings = [...UserProfile_1.DEFAULT_SETTINGS], onEditSuccess = null, startActions = null, endActions = null } = props, rest = tslib_1.__rest(props, ["id", "className", "settings", "onEditSuccess", "startActions", "endActions"]);
     // CONTEXT

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

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

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

@@ -5,14 +5,13 @@ 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 = 'SCUserProfileEditSkeleton';
+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, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile Edit Skeleton component. Learn about the available props and the CSS API.
@@ -25,13 +24,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCUserProfileEditSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileEdit-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileEditSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserProfileEdit-skeleton-root|Styles applied to the root element.|
  *
  */
 function UserProfileEditSkeleton() {

package/lib/cjs/components/UserProfileEdit/UserProfileEdit.js

@@ -11,17 +11,19 @@ const Account_1 = tslib_1.__importDefault(require("./Section/Account"));
 const Settings_1 = tslib_1.__importDefault(require("./Section/Settings"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const PREFIX = 'SCUserProfileEdit';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    tabs: `${PREFIX}-tabs`,
-    tabContent: `${PREFIX}-tab-content`
+    root: `${constants_1.PREFIX}-root`,
+    tabs: `${constants_1.PREFIX}-tabs`,
+    tabContent: `${constants_1.PREFIX}-tab-content`,
+    publicInfo: `${constants_1.PREFIX}-public-info`,
+    account: `${constants_1.PREFIX}-account`,
+    settings: `${constants_1.PREFIX}-settings`
 };
 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 User Profile Edit component. Learn about the available props and the CSS API.
  *
@@ -54,7 +56,7 @@ function UserProfileEdit(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = null, className = null, fields = [...UserProfile_1.DEFAULT_FIELDS], settings = [...UserProfile_1.DEFAULT_SETTINGS], UserProfileEditSectionPublicInfoProps = {}, UserProfileEditSectionAccountProps = {
         showCredentialsSection: true,
@@ -72,8 +74,8 @@ function UserProfileEdit(inProps) {
             react_1.default.createElement(material_1.Tab, { label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }),
             react_1.default.createElement(material_1.Tab, { label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })),
         react_1.default.createElement(material_1.Box, { className: classes.tabContent },
-            tab === 0 && react_1.default.createElement(PublicInfo_1.default, Object.assign({ fields: fields }, UserProfileEditSectionPublicInfoProps)),
-            tab === 1 && react_1.default.createElement(Account_1.default, Object.assign({}, UserProfileEditSectionAccountProps)),
-            tab === 2 && react_1.default.createElement(Settings_1.default, Object.assign({ settings: settings }, UserProfileEditSectionSettingsProps)))));
+            tab === 0 && react_1.default.createElement(PublicInfo_1.default, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)),
+            tab === 1 && react_1.default.createElement(Account_1.default, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)),
+            tab === 2 && react_1.default.createElement(Settings_1.default, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps)))));
 }
 exports.default = UserProfileEdit;

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

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

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

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

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

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

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

@@ -5,32 +5,16 @@ 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 = 'SCUserProfileHeaderSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`
 };
 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 User Profile AppBar Skeleton component. Learn about the available props and the CSS API.
 
@@ -42,15 +26,15 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCUserProfileHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCUserProfileHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCUserProfileHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
+ |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
 function UserProfileHeaderSkeleton() {

package/lib/cjs/components/UserProfileHeader/UserProfileHeader.js

@@ -10,21 +10,20 @@ const react_core_1 = require("@selfcommunity/react-core");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const PREFIX = 'SCUserProfileHeader';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    cover: `${PREFIX}-cover`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    realname: `${PREFIX}-realname`,
-    changePicture: `${PREFIX}-change-picture`,
-    changeCover: `${PREFIX}-change-cover`
+    root: `${constants_1.PREFIX}-root`,
+    cover: `${constants_1.PREFIX}-cover`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    realname: `${constants_1.PREFIX}-realname`,
+    changePicture: `${constants_1.PREFIX}-change-picture`,
+    changeCover: `${constants_1.PREFIX}-change-cover`
 };
 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 User Profile AppBar component. Learn about the available props and the CSS API.
  *
@@ -61,7 +60,7 @@ function UserProfileHeader(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = null, className = null, userId = null, user = null, ChangePictureProps = {}, ChangeCoverProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "userId", "user", "ChangePictureProps", "ChangeCoverProps"]);
     // PREFERENCES

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

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

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

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

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

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

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

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