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

package/lib/esm/components/Notification/IncubatorApproved/IncubatorApproved.js

@@ -10,15 +10,15 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     incubatorApproved: {
         id: 'ui.notification.incubatorApproved.approved',
         defaultMessage: 'ui.notification.incubatorApproved.approved'
     }
 });
-const PREFIX = 'SCIncubatorApprovedNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-incubator-approved-root`,
     categoryIcon: `${PREFIX}-category-icon`,
     categoryApprovedText: `${PREFIX}-category-approved-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -26,19 +26,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.categoryIcon}`]: {
-        borderRadius: 3
-    },
-    [`& .${classes.viewIncubatorButton}`]: {
-        padding: theme.spacing(),
-        paddingBottom: 0,
-        textTransform: 'initial',
-        marginLeft: -8
-    }
-}));
+    slot: 'IncubatorApprovedRoot'
+})(() => ({}));
 export default function IncubatorApprovedNotification(inProps) {
     // PROPS
     const props = useThemeProps({

package/lib/esm/components/Notification/KindlyNoticeFlag/KindlyNoticeFlag.js

@@ -12,16 +12,15 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
-import { red } from '@mui/material/colors';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     kindlyNoticeFlag: {
         id: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag',
         defaultMessage: 'ui.notification.kindlyNoticeFlag.kindlyNoticeFlag'
     }
 });
-const PREFIX = 'SCKindlyNoticeFlagNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-kindly-notice-flag-root`,
     flagIcon: `${PREFIX}-flag-icon`,
     flagText: `${PREFIX}-flag-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -31,28 +30,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    slot: 'KindlyNoticeFlagRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type kindly notice flag
  * @param inProps

package/lib/esm/components/Notification/KindlyNoticeFor/KindlyNoticeFor.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
-import { red } from '@mui/material/colors';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     youWrote: {
         id: 'ui.notification.kindlyNoticeFor.youWrote',
@@ -39,9 +39,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.kindlyNoticeFor.kindlyNoticeOfftopic'
     }
 });
-const PREFIX = 'SCKindlyNoticeForNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-kindly-notice-for-root`,
     flagIcon: `${PREFIX}-flag-icon`,
     flagText: `${PREFIX}-flag-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -51,29 +50,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        padding: `${theme.spacing(2)} ${theme.spacing(2)}`,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    slot: 'KindlyNoticeForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type kindly notice for
  * @param inProps

package/lib/esm/components/Notification/Mention/Mention.js

@@ -12,15 +12,15 @@ import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     quotedYouOn: {
         id: 'ui.notification.mention.quotedYou',
         defaultMessage: 'ui.notification.mention.quotedYou'
     }
 });
-const PREFIX = 'SCNotificationMention';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-mention-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     mentionText: `${PREFIX}-mention-text`,
@@ -29,27 +29,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.mentionText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    }
-}));
+    slot: 'MentionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type mention
  * @param inProps

package/lib/esm/components/Notification/Notification.js

@@ -32,13 +32,13 @@ import { Logger } from '@selfcommunity/utils';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
 import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
+import { PREFIX } from './constants';
 const messages = defineMessages({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
         defaultMessage: 'ui.notification.receivePrivateMessage'
     }
 });
-const PREFIX = 'SCNotification';
 const classes = {
     root: `${PREFIX}-root`,
     header: `${PREFIX}-header`,
@@ -54,9 +54,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  *
  > API documentation for the Community-JS UserNotification component. Learn about the available props and the CSS API.

package/lib/esm/components/Notification/PrivateMessage/PrivateMessage.js

@@ -12,15 +12,15 @@ import NotificationItem from '../../../shared/NotificationItem';
 import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
         defaultMessage: 'ui.notification.receivePrivateMessage'
     }
 });
-const PREFIX = 'SCNotificationPrivateMessage';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-private-message-root`,
     avatar: `${PREFIX}-avatar`,
     actions: `${PREFIX}-actions`,
     replyButton: `${PREFIX}-reply-button`,
@@ -32,52 +32,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        display: 'inline',
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.messageLabel}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.messageWrap}`]: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        WebkitLineClamp: '2',
-        lineClamp: 2,
-        WebkitBoxOrient: 'vertical',
-        '& p': {
-            margin: 0
-        }
-    },
-    [`& .${classes.message}`]: {
-        height: 20,
-        overflowY: 'hidden',
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden',
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        '& > p': {
-            overflowY: 'hidden',
-            textOverflow: 'ellipsis',
-            display: '-webkit-box',
-            WebkitLineClamp: '2',
-            lineClamp: 2,
-            WebkitBoxOrient: 'vertical'
-        }
-    },
-    [`& .${classes.actions}`]: {
-        fontSize: '13px',
-        maxWidth: '40%'
-    }
-}));
+    slot: 'PrivateMessageRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type private message
  * @param inProps

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

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

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

@@ -4,13 +4,14 @@ import { styled } from '@mui/material/styles';
 import { CardHeader, useTheme } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import Widget from '../Widget';
-const PREFIX = 'SCNotificationSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
-const Root = styled(Widget)(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Notification Skeleton component. Learn about the available props and the CSS API.
 
@@ -22,13 +23,13 @@ const Root = styled(Widget)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCNotificationSkeleton` can be used when providing style overrides in the theme.
+ The name `SCNotification-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCNotificationSkeleton-root|Styles applied to the root element.|
+ |root|.SCNotification-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function NotificationSkeleton(props) {

package/lib/esm/components/Notification/UndeletedFor/UndeletedFor.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import { red } from '@mui/material/colors';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import { getContributionSnippet, getContributionType, getRouteData } from '../../../utils/contribution';
@@ -12,9 +11,9 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
-const PREFIX = 'SCUndeletedForNotification';
+import { PREFIX } from '../constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-undeleted-for-root`,
     undeletedIcon: `${PREFIX}-undeleted-icon`,
     undeletedText: `${PREFIX}-undeleted-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -24,29 +23,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.undeletedIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.undeletedText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionWrap}`]: {
-        marginBottom: theme.spacing(1),
-        padding: theme.spacing(2),
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    slot: 'UndeletedForRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type undeleted for
  * @param inProps

package/lib/esm/components/Notification/UserBlocked/UserBlocked.js

@@ -2,7 +2,6 @@ import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Stack, Typography } from '@mui/material';
-import { green, red } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
 import { defineMessages, useIntl } from 'react-intl';
@@ -11,6 +10,7 @@ import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     accountBlocked: {
         id: 'ui.notification.userBlocked.accountBlocked',
@@ -21,9 +21,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.userBlocked.accountReactivated'
     }
 });
-const PREFIX = 'SCUserBlockedNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-user-blocked-root`,
     unBlockedIcon: `${PREFIX}-unblocked-icon`,
     blockedIcon: `${PREFIX}-blocked-icon`,
     blockedText: `${PREFIX}-blocked-text`,
@@ -31,21 +30,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.unBlockedIcon}`]: {
-        backgroundColor: green[500],
-        color: '#FFF'
-    },
-    [`& .${classes.blockedIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.blockedText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    slot: 'UserBlockedRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type user blocked
  * @param inProps

package/lib/esm/components/Notification/UserConnection/UserConnection.js

@@ -12,6 +12,7 @@ import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     requestConnection: {
         id: 'ui.notification.userConnection.requestConnection',
@@ -22,9 +23,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.userConnection.acceptConnection'
     }
 });
-const PREFIX = 'SCUserConnectionNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-user-connection-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     connectionText: `${PREFIX}-connection-text`,
@@ -32,19 +32,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.connectionText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    slot: 'UserConnectionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of connection accept/request
  * @param inProps

package/lib/esm/components/Notification/UserFollow/UserFollow.js

@@ -11,15 +11,15 @@ import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     followUser: {
         id: 'ui.notification.userFollow.followUser',
         defaultMessage: 'ui.notification.userFollow.followUser'
     }
 });
-const PREFIX = 'SCUserFollowNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-user-follow-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     followText: `${PREFIX}-follow-text`,
@@ -27,20 +27,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.followText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    slot: 'UserFollowRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type user follow
  * @param inProps

package/lib/esm/components/Notification/VoteUp/VoteUp.js

@@ -12,15 +12,15 @@ import { useThemeProps } from '@mui/system';
 import NotificationItem from '../../../shared/NotificationItem';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     appreciated: {
         id: 'ui.notification.voteUp.appreciated',
         defaultMessage: 'ui.notification.voteUp.appreciated'
     }
 });
-const PREFIX = 'SCVoteUpNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-vote-up-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     voteUpText: `${PREFIX}-vote-up-text`,
@@ -29,25 +29,8 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.voteUpText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    slot: 'VoteUpRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type vote up
  * @param inProps

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

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

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

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

package/lib/esm/components/PlatformWidget/PlatformWidget.js

@@ -10,16 +10,15 @@ import classNames from 'classnames';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-const PREFIX = 'SCPlatformWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
  *

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

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

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

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

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

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

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

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