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

package/lib/esm/components/FeedObject/Poll/Choice/Choice.js

@@ -8,50 +8,25 @@ import Icon from '@mui/material/Icon';
 import LinearProgress from '@mui/material/LinearProgress';
 import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCChoices';
+import { PREFIX } from '../../constants';
 const classes = {
-    root: `${PREFIX}-root`,
-    label: `${PREFIX}-label`,
-    vote: `${PREFIX}-vote`,
-    progress: `${PREFIX}-progress`
+    root: `${PREFIX}-poll-object-choices-root`,
+    label: `${PREFIX}-poll-object-choices-label`,
+    vote: `${PREFIX}-poll-object-choices-vote`,
+    progress: `${PREFIX}-poll-object-choices-progress`
 };
 const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    background: theme.palette.grey['A200'],
-    marginBottom: theme.spacing(2),
-    padding: theme.spacing(2),
-    width: '100%',
-    [`& .${classes.label}, & .${classes.vote}`]: {
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.progress}`]: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: theme.spacing(),
-        '& .MuiLinearProgress-root': {
-            flexGrow: 2,
-            marginRight: theme.spacing(2),
-            backgroundColor: theme.palette.common.white
-        }
-    }
-}));
+    slot: 'PollObjectChoicesRoot'
+})(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (React.createElement(Box, { className: className },
         React.createElement(LinearProgress, Object.assign({ variant: "determinate" }, props)),
         React.createElement(Typography, { variant: "body2", color: "text.secondary" }, `${Math.round(props.value)}%`)));
 }
-export default function Choice(inProps) {
+export default function Choice(props) {
     //PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { className = null, choiceObj = null, feedObject = null, vote = null, votes = null, isVoting = null, votable = null } = props, rest = __rest(props, ["className", "choiceObj", "feedObject", "vote", "votes", "isVoting", "votable"]);
     const disabled = !feedObject;
     // CONTEXT

package/lib/esm/components/FeedObject/Poll/Poll.d.ts

@@ -38,4 +38,4 @@ export interface PollObjectProps {
      */
     [p: string]: any;
 }
-export default function PollObject(inProps: PollObjectProps): JSX.Element;
+export default function PollObject(props: PollObjectProps): JSX.Element;

package/lib/esm/components/FeedObject/Poll/Poll.js

@@ -11,7 +11,7 @@ import Choice from './Choice';
 import Icon from '@mui/material/Icon';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     showPoll: {
         id: 'ui.feedObject.poll.showPoll',
@@ -34,29 +34,23 @@ const messages = defineMessages({
         defaultMessage: 'ui.feedObject.poll.votes'
     }
 });
-const PREFIX = 'SCPollObject';
 const classes = {
-    root: `${PREFIX}-root`,
-    voters: `${PREFIX}-voters`,
-    votes: `${PREFIX}-votes`,
-    toggleButton: `${PREFIX}-toggle-button`,
-    title: `${PREFIX}-title`,
-    expiration: `${PREFIX}-expiration`,
-    closed: `${PREFIX}-closed`,
-    expandIcon: `${PREFIX}-expand-icon`,
-    collapsedIcon: `${PREFIX}-collapsed-icon`
+    root: `${PREFIX}-poll-object-root`,
+    voters: `${PREFIX}-poll-object-voters`,
+    votes: `${PREFIX}-poll-object-votes`,
+    toggleButton: `${PREFIX}-poll-object-toggle-button`,
+    title: `${PREFIX}-poll-object-title`,
+    expiration: `${PREFIX}-poll-object-expiration`,
+    closed: `${PREFIX}-poll-object-closed`,
+    expandIcon: `${PREFIX}-poll-object-expand-icon`,
+    collapsedIcon: `${PREFIX}-poll-object-collapsed-icon`
 };
 const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-export default function PollObject(inProps) {
+    slot: 'PollObjectRoot'
+})(() => ({}));
+export default function PollObject(props) {
     //  PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { className, feedObject, pollObject, disabled, visible = true, onChange, onToggleVisibility } = props, rest = __rest(props, ["className", "feedObject", "pollObject", "disabled", "visible", "onChange", "onToggleVisibility"]);
     // INTL
     const intl = useIntl();

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

@@ -22,14 +22,14 @@ export interface FeedObjectSkeletonProps extends CardProps {
 
  #### Component Name
 
- The name `SCFeedObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeedObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedObjectSkeleton-root|Styles applied to the root element.|
- |media|.SCFeedObjectSkeleton-media|Styles applied to the media element.|
+ |root|.SCFeedObject-skeleton-root|Styles applied to the root element.|
+ |media|.SCFeedObject-media|Styles applied to the media element.|
  *
  */
 export default function FeedObjectSkeleton(props: {

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

@@ -6,15 +6,14 @@ import Skeleton from '@mui/material/Skeleton';
 import { SCFeedObjectTemplateType } from '../../types/feedObject';
 import { CardContent, CardHeader, useTheme } from '@mui/material';
 import classNames from 'classnames';
-const PREFIX = 'SCFeedObjectSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     media: `${PREFIX}-media`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Feed Object Skeleton component. Learn about the available props and the CSS API.
@@ -27,14 +26,14 @@ const Root = styled(Widget, {
 
  #### Component Name
 
- The name `SCFeedObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeedObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedObjectSkeleton-root|Styles applied to the root element.|
- |media|.SCFeedObjectSkeleton-media|Styles applied to the media element.|
+ |root|.SCFeedObject-skeleton-root|Styles applied to the root element.|
+ |media|.SCFeedObject-media|Styles applied to the media element.|
  *
  */
 export default function FeedObjectSkeleton(props) {

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

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

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

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

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

@@ -23,13 +23,13 @@ export interface FeedObjectMediaPreviewProps extends BoxProps {
  import {FeedObjectMediaPreview} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCFeedObjectMediaPreview` can be used when providing style overrides in the theme.
+ The name `SCFeedObject-media-preview-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedObjectMediaPreview-root|Styles applied to the root element.|
+ |root|.SCFeedObject-media-preview-root|Styles applied to the root element.|
 
 
  * @param inProps

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -6,14 +6,14 @@ import { useSCMediaClick } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import { File, Link, Share } from '../../shared/Media';
 import classNames from 'classnames';
-const PREFIX = 'SCFeedObjectMediaPreview';
+import { PREFIX } from '../FeedObject/constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-media-preview-root`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root'
-})(({ theme }) => ({}));
+    slot: 'MediaPreviewRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS FeedObjectMediaPreview component. Learn about the available props and the CSS API.
  *
@@ -25,13 +25,13 @@ const Root = styled(Box, {
  import {FeedObjectMediaPreview} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCFeedObjectMediaPreview` can be used when providing style overrides in the theme.
+ The name `SCFeedObject-media-preview-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedObjectMediaPreview-root|Styles applied to the root element.|
+ |root|.SCFeedObject-media-preview-root|Styles applied to the root element.|
 
 
  * @param inProps

package/lib/esm/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -8,15 +8,14 @@ import classNames from 'classnames';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-const PREFIX = 'SCFeedUpdatesWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     buttonLoadMore: `${PREFIX}-button-load-more`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'Root'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Feed Updates Widget component. Learn about the available props and the CSS API.

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

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

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import GenericSkeleton from '../Skeleton/GenericSkeleton';
-const PREFIX = 'SCFeedUpdatesWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(GenericSkeleton)(() => ({}));
+const Root = styled(GenericSkeleton, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Feed Updates Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -18,14 +21,14 @@ const Root = styled(GenericSkeleton)(() => ({}));
 
  #### Component Name
 
- The name `SCFeedUpdatesWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeedUpdatesWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedUpdatesWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCFeedUpdatesWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCFeedUpdatesWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCFeedUpdatesWidget-list|Styles applied to the list element.|
  *
  */
 export default function FeedUpdatesWidgetSkeleton(props) {

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

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

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

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

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

@@ -46,7 +46,8 @@ export interface FooterProps {
  |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

package/lib/esm/components/Footer/Footer.js

@@ -9,7 +9,7 @@ import { Logger } from '@selfcommunity/utils';
 import { Link, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import FooterSkeleton from './Skeleton';
-const PREFIX = 'SCFooter';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     itemList: `${PREFIX}-item-list`,
@@ -18,8 +18,7 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'Root'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Footer component. Learn about the available props and the CSS API.
@@ -41,7 +40,8 @@ const Root = styled(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

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

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

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

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

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

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

package/lib/esm/components/Incubator/Incubator.js

@@ -13,7 +13,7 @@ import Widget from '../Widget';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import IncubatorSubscribeButton from '../IncubatorSubscribeButton';
 import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
-const PREFIX = 'SCIncubator';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     name: `${PREFIX}-name`,
@@ -22,9 +22,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (React.createElement(Box, { className: className },

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

@@ -3,9 +3,9 @@ import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import Widget from '../Widget';
 import { Button, CardActions, CardContent, Grid, Typography } from '@mui/material';
-const PREFIX = 'SCIncubatorSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     primary: `${PREFIX}-primary`,
     secondary: `${PREFIX}-secondary`,
     progressBar: `${PREFIX}-progress-bar`,
@@ -13,9 +13,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator Skeleton component. Learn about the available props and the CSS API.
 
@@ -27,17 +26,17 @@ const Root = styled(Widget, {
 
  #### 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) {

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

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

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

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

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

@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { LoadingButton } from '@mui/lab';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     name: {
         id: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.name',
@@ -21,9 +22,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.incubatorListWidget.createIncubatorDialog.formPlaceholder.slogan'
     }
 });
-const PREFIX = 'SCCreateIncubatorDialog';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-create-dialog-root`,
     form: `${PREFIX}-form`,
     name: `${PREFIX}-name`,
     slogan: `${PREFIX}-slogan`,
@@ -32,31 +32,8 @@ const classes = {
 };
 const Root = styled(BaseDialog, {
     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'
-    }
-}));
+    slot: 'CreateDialogRoot'
+})(() => ({}));
 export default function CreateIncubatorDialog(inProps) {
     // PROPS
     const props = useThemeProps({

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

@@ -21,7 +21,7 @@ import IncubatorDetail from '../IncubatorDetail';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import { SCCache, SCPreferences, SCPreferencesContext, SCUserContext } from '@selfcommunity/react-core';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-const PREFIX = 'SCIncubatorListWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     header: `${PREFIX}-header`,
@@ -31,7 +31,8 @@ const classes = {
     actions: `${PREFIX}-actions`,
     helpPopover: `${PREFIX}-help-popover`,
     dialogRoot: `${PREFIX}-dialog-root`,
-    endMessage: `${PREFIX}-end-message`
+    endMessage: `${PREFIX}-end-message`,
+    createDialog: `${PREFIX}-create-dialog`
 };
 const Root = styled(Widget, {
     name: PREFIX,
@@ -40,8 +41,7 @@ const Root = styled(Widget, {
 })(({ theme }) => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    slot: 'DialogRoot'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Incubator List Widget component. Learn about the available props and the CSS API.
@@ -71,6 +71,7 @@ const DialogRoot = styled(BaseDialog, {
  |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
  */
@@ -246,7 +247,7 @@ export default function IncubatorListWidget(inProps) {
                     React.createElement(FormattedMessage, { id: "ui.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" })) },
                 React.createElement(List, null, state.results.map((incubator) => (React.createElement(ListItem, { key: incubator.id },
                     React.createElement(Incubator, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps))))))))),
-        openCreateIncubatorDialog && React.createElement(CreateIncubatorDialog, { open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose }),
+        openCreateIncubatorDialog && (React.createElement(CreateIncubatorDialog, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })),
         openIncubatorDetailDialog && (React.createElement(IncubatorDetail, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }

package/lib/esm/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;