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

package/lib/cjs/components/Footer/Footer.js

@@ -11,17 +11,16 @@ const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../constants/Errors");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-const PREFIX = 'SCFooter';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    itemList: `${PREFIX}-item-list`,
-    item: `${PREFIX}-item`,
-    copyright: `${PREFIX}-copyright`
+    root: `${constants_1.PREFIX}-root`,
+    itemList: `${constants_1.PREFIX}-item-list`,
+    item: `${constants_1.PREFIX}-item`,
+    copyright: `${constants_1.PREFIX}-copyright`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Footer component. Learn about the available props and the CSS API.
@@ -43,7 +42,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCFooter-root|Styles applied to the root element.|
- |link|.SCFooter-link-item|Styles applied to the link item element.|
+ |item|.SCFooter-item|Styles applied to the item element.|
+ |itemList|.SCFooter-item-list|Styles applied to the item list element.|
  |copyright|.SCFooter-copyright|Styles applied to the copyright section.|
 
  * @param inProps
@@ -52,7 +52,7 @@ function Footer(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className, menu = null, startActions = null, endActions = null } = props, rest = tslib_1.__rest(props, ["className", "menu", "startActions", "endActions"]);
     // PREFERENCES

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

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

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

@@ -5,15 +5,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const PREFIX = 'SCFooterSkeleton';
+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
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Footer 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 `SCFooterSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFooter-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFooterSkeleton-root|Styles applied to the root element.|
+ |root|.SCFooter-skeleton-root|Styles applied to the root element.|
  *
  */
 function FooterSkeleton(props) {

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

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

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

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

package/lib/cjs/components/Incubator/Incubator.js

@@ -15,18 +15,17 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const IncubatorSubscribeButton_1 = tslib_1.__importDefault(require("../IncubatorSubscribeButton"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
-const PREFIX = 'SCIncubator';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    name: `${PREFIX}-name`,
-    slogan: `${PREFIX}-slogan`,
-    progressBar: `${PREFIX}-progress-bar`
+    root: `${constants_1.PREFIX}-root`,
+    name: `${constants_1.PREFIX}-name`,
+    slogan: `${constants_1.PREFIX}-slogan`,
+    progressBar: `${constants_1.PREFIX}-progress-bar`
 };
 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'
+})(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
     return (react_1.default.createElement(material_1.Box, { className: className },
@@ -71,7 +70,7 @@ function Incubator(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { incubatorId = null, incubator = null, className = null, autoHide = false, subscribeButtonProps = {}, ButtonProps = {}, detailView = false } = props, rest = tslib_1.__rest(props, ["incubatorId", "incubator", "className", "autoHide", "subscribeButtonProps", "ButtonProps", "detailView"]);
     // STATE

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

@@ -9,17 +9,17 @@
 
  #### Component Name
 
- The name `SCIncubatorSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubator-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorSkeleton-root|Styles applied to the root element.|
- |primary|.SCIncubatorSkeleton-primary|Styles applied to the primary text element.|
- |secondary|.SCIncubatorSkeleton-secondary|Styles applied to the secondary text element.|
- |progressBar|.SCIncubatorSkeleton-progress-bar|Styles applied to the progress bar section.|
- |action|.SCIncubatorSkeleton-action|Styles applied to the action button element.|
+ |root|.SCIncubator-skeleton-root|Styles applied to the root element.|
+ |primary|.SCIncubator-primary|Styles applied to the primary text element.|
+ |secondary|.SCIncubator-secondary|Styles applied to the secondary text element.|
+ |progressBar|.SCIncubator-progress-bar|Styles applied to the progress bar section.|
+ |action|.SCIncubator-action|Styles applied to the action button element.|
  *
  */
 export default function IncubatorSkeleton(props: any): JSX.Element;

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

@@ -6,19 +6,18 @@ const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCIncubatorSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    primary: `${PREFIX}-primary`,
-    secondary: `${PREFIX}-secondary`,
-    progressBar: `${PREFIX}-progress-bar`,
-    action: `${PREFIX}-action`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    primary: `${constants_1.PREFIX}-primary`,
+    secondary: `${constants_1.PREFIX}-secondary`,
+    progressBar: `${constants_1.PREFIX}-progress-bar`,
+    action: `${constants_1.PREFIX}-action`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator Skeleton component. Learn about the available props and the CSS API.
 
@@ -30,17 +29,17 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
 
  #### Component Name
 
- The name `SCIncubatorSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubator-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorSkeleton-root|Styles applied to the root element.|
- |primary|.SCIncubatorSkeleton-primary|Styles applied to the primary text element.|
- |secondary|.SCIncubatorSkeleton-secondary|Styles applied to the secondary text element.|
- |progressBar|.SCIncubatorSkeleton-progress-bar|Styles applied to the progress bar section.|
- |action|.SCIncubatorSkeleton-action|Styles applied to the action button element.|
+ |root|.SCIncubator-skeleton-root|Styles applied to the root element.|
+ |primary|.SCIncubator-primary|Styles applied to the primary text element.|
+ |secondary|.SCIncubator-secondary|Styles applied to the secondary text element.|
+ |progressBar|.SCIncubator-progress-bar|Styles applied to the progress bar section.|
+ |action|.SCIncubator-action|Styles applied to the action button element.|
  *
  */
 function IncubatorSkeleton(props) {

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

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

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

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

package/lib/cjs/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.js

@@ -13,6 +13,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const Errors_1 = require("../../../constants/Errors");
 const lab_1 = require("@mui/lab");
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name',
@@ -23,47 +24,23 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan'
     }
 });
-const PREFIX = 'SCCreateIncubatorDialog';
 const classes = {
-    root: `${PREFIX}-root`,
-    form: `${PREFIX}-form`,
-    name: `${PREFIX}-name`,
-    slogan: `${PREFIX}-slogan`,
-    intro: `${PREFIX}-intro`,
-    submittedMessage: `${PREFIX}-submitted-message`
+    root: `${constants_1.PREFIX}-create-dialog-root`,
+    form: `${constants_1.PREFIX}-form`,
+    name: `${constants_1.PREFIX}-name`,
+    slogan: `${constants_1.PREFIX}-slogan`,
+    intro: `${constants_1.PREFIX}-intro`,
+    submittedMessage: `${constants_1.PREFIX}-submitted-message`
 };
 const Root = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    margin: 2,
-    [theme.breakpoints.down(500)]: {
-        minWidth: 300
-    },
-    [`& .${classes.intro}`]: {
-        whiteSpace: 'pre-line'
-    },
-    [`& .${classes.form}`]: {
-        marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1)
-    },
-    [`& .${classes.name}`]: {
-        '& .MuiInputBase-root': {
-            height: '40px'
-        }
-    },
-    [`& .${classes.submittedMessage}`]: {
-        padding: theme.spacing(1),
-        borderRadius: '8px',
-        backgroundColor: '#bdd5bd'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'CreateDialogRoot'
+})(() => ({}));
 function CreateIncubatorDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose"]);
     // CONTEXT

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

@@ -66,6 +66,7 @@ export interface IncubatorListWidgetProps extends VirtualScrollerItemProps {
  |helpPopover|.SCIncubatorListWidget-help-popover|Styles applied to the help popover element.|
  |dialogRoot|.SCIncubatorListWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCIncubatorListWidget-end-message|Styles applied to the end message element.|
+ |createDialog|.SCIncubatorListWidget-create-dialog|Styles applied to the create dialog element.|
 
  * @param inProps
  */

package/lib/cjs/components/IncubatorListWidget/IncubatorListWidget.js

@@ -23,27 +23,27 @@ const IncubatorDetail_1 = tslib_1.__importDefault(require("../IncubatorDetail"))
 const widget_1 = require("../../utils/widget");
 const react_core_1 = require("@selfcommunity/react-core");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const PREFIX = 'SCIncubatorListWidget';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    header: `${PREFIX}-header`,
-    title: `${PREFIX}-title`,
-    noResults: `${PREFIX}-no-results`,
-    showMore: `${PREFIX}-show-more`,
-    actions: `${PREFIX}-actions`,
-    helpPopover: `${PREFIX}-help-popover`,
-    dialogRoot: `${PREFIX}-dialog-root`,
-    endMessage: `${PREFIX}-end-message`
+    root: `${constants_1.PREFIX}-root`,
+    header: `${constants_1.PREFIX}-header`,
+    title: `${constants_1.PREFIX}-title`,
+    noResults: `${constants_1.PREFIX}-no-results`,
+    showMore: `${constants_1.PREFIX}-show-more`,
+    actions: `${constants_1.PREFIX}-actions`,
+    helpPopover: `${constants_1.PREFIX}-help-popover`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    endMessage: `${constants_1.PREFIX}-end-message`,
+    createDialog: `${constants_1.PREFIX}-create-dialog`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
+    name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Incubator List Widget component. Learn about the available props and the CSS API.
@@ -73,6 +73,7 @@ const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
  |helpPopover|.SCIncubatorListWidget-help-popover|Styles applied to the help popover element.|
  |dialogRoot|.SCIncubatorListWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCIncubatorListWidget-end-message|Styles applied to the end message element.|
+ |createDialog|.SCIncubatorListWidget-create-dialog|Styles applied to the create dialog element.|
 
  * @param inProps
  */
@@ -80,7 +81,7 @@ function IncubatorListWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide = true, limit = 3, className, IncubatorProps = {}, cacheStrategy = utils_1.CacheStrategies.CACHE_FIRST, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["autoHide", "limit", "className", "IncubatorProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
     // CONTEXT
@@ -248,7 +249,7 @@ function IncubatorListWidget(inProps) {
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" })) },
                 react_1.default.createElement(material_1.List, null, state.results.map((incubator) => (react_1.default.createElement(material_1.ListItem, { key: incubator.id },
                     react_1.default.createElement(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps))))))))),
-        openCreateIncubatorDialog && react_1.default.createElement(CreateIncubatorDialog_1.default, { open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose }),
+        openCreateIncubatorDialog && (react_1.default.createElement(CreateIncubatorDialog_1.default, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })),
         openIncubatorDetailDialog && (react_1.default.createElement(IncubatorDetail_1.default, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }

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

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

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

@@ -7,12 +7,15 @@ const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const styles_1 = require("@mui/material/styles");
 const Incubator_1 = require("../Incubator");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCIncubatorListWidgetSkeleton';
+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 Incubator List Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,14 +27,14 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCIncubatorListWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubatorListWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorListWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCIncubatorListWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCIncubatorListWidget-skeleton-root-root|Styles applied to the root element.|
+ |list|.SCIncubatorListWidget-list|Styles applied to the list element.|
  *
  */
 function IncubatorListWidgetSkeleton(props) {

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

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

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

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

package/lib/cjs/components/IncubatorSuggestionWidget/IncubatorSuggestionWidget.js

@@ -20,25 +20,23 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const IncubatorDetail_1 = tslib_1.__importDefault(require("../IncubatorDetail"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const widget_1 = require("../../utils/widget");
-const PREFIX = 'SCIncubatorSuggestionWidget';
+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 Incubator Suggestion component. Learn about the available props and the CSS API.
  *
@@ -71,7 +69,7 @@ function IncubatorSuggestionWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide = true, limit = 3, className, IncubatorProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["autoHide", "limit", "className", "IncubatorProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
     // CONTEXT

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

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

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

@@ -7,12 +7,15 @@ const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const styles_1 = require("@mui/material/styles");
 const Incubator_1 = require("../Incubator");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const PREFIX = 'SCIncubatorSuggestionWidgetSkeleton';
+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 Incubator Suggestion Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,14 +27,14 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCIncubatorSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCIncubatorSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCIncubatorSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCIncubatorSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCIncubatorSuggestionWidget-skeleton-root-root|Styles applied to the root element.|
+ |list|.SCIncubatorSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 function IncubatorSuggestionWidgetSkeleton(props) {

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

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

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

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

package/lib/cjs/components/LoyaltyProgramWidget/LoyaltyProgramWidget.js

@@ -16,19 +16,18 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
-const PREFIX = 'SCLoyaltyProgramWidget';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    actions: `${PREFIX}-actions`,
-    points: `${PREFIX}-points`,
-    discoverMore: `${PREFIX}-discover-more`
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    actions: `${constants_1.PREFIX}-actions`,
+    points: `${constants_1.PREFIX}-points`,
+    discoverMore: `${constants_1.PREFIX}-discover-more`
 };
 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'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Loyalty Program Widget component. Learn about the available props and the CSS API.
  *
@@ -62,7 +61,7 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
 function LoyaltyProgramWidget(inProps) {
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // PROPS
     const { className, userId = null } = props, rest = tslib_1.__rest(props, ["className", "userId"]);

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

@@ -9,18 +9,18 @@
 
  #### Component Name
 
- The name `SCLoyaltyProgramWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCLoyaltyProgramWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCLoyaltyProgramWidgetSkeleton-root|Styles applied to the root element.|
- |title|.SCLoyaltyProgramWidgetSkeleton-title|Styles applied to the title element.|
- |content|.SCLoyaltyProgramWidgetSkeleton-content|Styles applied to the card content section.|
- |chip|.SCLoyaltyProgramWidgetSkeleton-chip|Styles applied to the card chip element.|
- |points|.SCLoyaltyProgramWidgetSkeleton-points|Styles applied to the card actions points element.|
- |actions|.SCLoyaltyProgramWidgetSkeleton-actions|Styles applied to the action section.|
+ |root|.SCLoyaltyProgramWidget-skeleton-root|Styles applied to the root element.|
+ |title|.SCLoyaltyProgramWidget-title|Styles applied to the title element.|
+ |content|.SCLoyaltyProgramWidget-content|Styles applied to the card content section.|
+ |chip|.SCLoyaltyProgramWidget-chip|Styles applied to the card chip element.|
+ |points|.SCLoyaltyProgramWidget-points|Styles applied to the card actions points element.|
+ |actions|.SCLoyaltyProgramWidget-actions|Styles applied to the action section.|
  *
  */
 export default function LoyaltyProgramWidgetSkeleton(): JSX.Element;