@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.1-alpha.0

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

@@ -1,15 +1,5 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
+import { __rest } from "tslib";
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Stack, Typography } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
@@ -18,17 +8,18 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import { getContributionSnippet, getContributionType, getRouteData } from '../../../utils/contribution';
-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({
     contributionFollow: {
         id: 'ui.notification.contributionFollow.follow',
         defaultMessage: 'ui.notification.contributionFollow.follow'
     }
 });
-const PREFIX = 'SCContributionFollowNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-contribution-follow-root`,
     avatar: `${PREFIX}-avatar`,
     username: `${PREFIX}-username`,
     followText: `${PREFIX}-follow-text`,
@@ -37,69 +28,44 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.followText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        },
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    '& .MuiIcon-root': {
-        fontSize: '18px',
-        marginBottom: '0.5px'
-    }
-}));
+    slot: 'ContributionFollowRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type follow (contribution)
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function ContributionFollowNotification(inProps) {
+export default function ContributionFollowNotification(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     // CONST
     const contributionType = getContributionType(notificationObject);
+    // STATE
+    const [openAlert, setOpenAlert] = useState(false);
     // INTL
     const intl = useIntl();
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) },
-            React.createElement(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } })), primary: React.createElement(Typography, { component: "span", color: "inherit", className: classes.followText },
-            React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user), className: classes.username }, notificationObject.user.username),
-            ' ',
-            intl.formatMessage(messages.contributionFollow, {
-                b: (...chunks) => React.createElement("strong", null, chunks)
-            })), secondary: React.createElement(React.Fragment, null,
-            template === SCNotificationObjectTemplateType.SNIPPET && (React.createElement(React.Fragment, null,
-                ":",
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
+                React.createElement(UserAvatar, { hide: !notificationObject.user.community_badge, smaller: true },
+                    React.createElement(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }))), primary: React.createElement(Typography, { component: "span", color: "inherit", className: classes.followText },
+                React.createElement(Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.user.username),
                 ' ',
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                    React.createElement(Typography, { variant: "body2", className: classes.contributionText }, getContributionSnippet(notificationObject[contributionType]))))),
-            (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement("div", null,
-                React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })))), footer: template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
-            React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
-            React.createElement(Typography, { color: "primary", component: 'div' },
-                React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
-                    React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) }, rest)));
+                intl.formatMessage(messages.contributionFollow, {
+                    b: (...chunks) => React.createElement("strong", null, chunks)
+                })), secondary: React.createElement(React.Fragment, null,
+                template === SCNotificationObjectTemplateType.SNIPPET && (React.createElement(React.Fragment, null,
+                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
+                        React.createElement(Typography, { variant: "body2", className: classes.contributionText }, getContributionSnippet(notificationObject[contributionType]))))),
+                (template === SCNotificationObjectTemplateType.DETAIL || template === SCNotificationObjectTemplateType.SNIPPET) && (React.createElement("div", null,
+                    React.createElement(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt })))), footer: template === SCNotificationObjectTemplateType.TOAST && (React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 },
+                React.createElement(DateTimeAgo, { date: notificationObject.active_at }),
+                React.createElement(Typography, { color: "primary", component: 'div' },
+                    React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
+                        React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))) }, rest)),
+        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
-//# sourceMappingURL=ContributionFollow.js.map

package/lib/esm/components/Notification/ContributionFollow/index.d.ts

@@ -1,4 +1,3 @@
 import ContributionFollowNotification, { ContributionFollowProps } from './ContributionFollow';
 export default ContributionFollowNotification;
 export { ContributionFollowProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import ContributionFollowNotification from './ContributionFollow';
 export default ContributionFollowNotification;
-//# sourceMappingURL=index.js.map

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

@@ -9,8 +9,7 @@ export interface NotificationDeletedForProps extends Pick<NotificationItemProps,
 }
 /**
  * This component render the content of the notification of type deleted for
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function DeletedForNotification(inProps: NotificationDeletedForProps): JSX.Element;
-//# sourceMappingURL=DeletedFor.d.ts.map
+export default function DeletedForNotification(props: NotificationDeletedForProps): JSX.Element;

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
@@ -21,9 +11,8 @@ import { camelCase } from '@selfcommunity/utils';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
 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({
     deletedForAdvertising: {
         id: 'ui.notification.deletedFor.deletedForAdvertising',
@@ -46,9 +35,8 @@ const messages = defineMessages({
         defaultMessage: 'ui.notification.deletedFor.deletedForOfftopic'
     }
 });
-const PREFIX = 'SCDeletedForNotification';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-deleted-for-root`,
     flagIcon: `${PREFIX}-flag-icon`,
     flagText: `${PREFIX}-flag-text`,
     activeAt: `${PREFIX}-active-at`,
@@ -58,40 +46,16 @@ const classes = {
 };
 const Root = styled(NotificationItem, {
     name: PREFIX,
-    slot: 'Root',
+    slot: 'DeletedForRoot',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.flagIcon}`]: {
-        backgroundColor: red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.flagText}`]: {
-        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'
-        }
-    }
-}));
+})(() => ({}));
 /**
  * This component render the content of the notification of type deleted for
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function DeletedForNotification(inProps) {
+export default function DeletedForNotification(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { notificationObject = null, id = `n_${props.notificationObject['feed_serialization_id']}`, template = SCNotificationObjectTemplateType.DETAIL, className } = props, rest = __rest(props, ["notificationObject", "id", "template", "className"]);
     // ROUTING
     const scRoutingContext = useSCRouting();
@@ -103,7 +67,7 @@ export default function DeletedForNotification(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(NotificationItem, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: React.createElement(Avatar, { variant: "circular", classes: { root: classes.flagIcon } },
             React.createElement(Icon, null, "outlined_flag")), primary: React.createElement(React.Fragment, null, isSnippetTemplate ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
             React.createElement(Typography, { component: "div", color: "inherit", className: classes.flagText },
                 React.createElement(FormattedMessage, { id: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${camelCase(notificationObject.type)}Snippet` })))) : (React.createElement(React.Fragment, null,
@@ -120,4 +84,3 @@ export default function DeletedForNotification(inProps) {
                     React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
                         React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))))) }, rest)));
 }
-//# sourceMappingURL=DeletedFor.js.map

package/lib/esm/components/Notification/DeletedFor/index.d.ts

@@ -1,4 +1,3 @@
 import DeletedForNotification, { NotificationDeletedForProps } from './DeletedFor';
 export default DeletedForNotification;
 export { NotificationDeletedForProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import DeletedForNotification from './DeletedFor';
 export default DeletedForNotification;
-//# sourceMappingURL=index.js.map

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

@@ -7,5 +7,4 @@ export interface NotificationIncubatorApprovedProps extends Pick<NotificationIte
      */
     notificationObject: SCNotificationIncubatorType;
 }
-export default function IncubatorApprovedNotification(inProps: NotificationIncubatorApprovedProps): JSX.Element;
-//# sourceMappingURL=IncubatorApproved.d.ts.map
+export default function IncubatorApprovedNotification(props: NotificationIncubatorApprovedProps): JSX.Element;

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Button, Stack, Typography } from '@mui/material';
@@ -18,17 +8,16 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import NewChip from '../../../shared/NewChip/NewChip';
 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`,
@@ -36,25 +25,10 @@ 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
-    }
-}));
-export default function IncubatorApprovedNotification(inProps) {
+    slot: 'IncubatorApprovedRoot'
+})(() => ({}));
+export default function IncubatorApprovedNotification(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { notificationObject = null, id = `n_${props.notificationObject['feed_serialization_id']}`, template = SCNotificationObjectTemplateType.DETAIL, className } = props, rest = __rest(props, ["notificationObject", "id", "template", "className"]);
     // ROUTING
     const scRoutingContext = useSCRouting();
@@ -81,4 +55,3 @@ export default function IncubatorApprovedNotification(inProps) {
                 React.createElement(Link, { to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, notificationObject.incubator) },
                     React.createElement(FormattedMessage, { id: "ui.userToastNotifications.incubatorApproved.viewIncubator", defaultMessage: 'ui.userToastNotifications.incubatorApproved.viewIncubator' }))))) : null }, rest)));
 }
-//# sourceMappingURL=IncubatorApproved.js.map

package/lib/esm/components/Notification/IncubatorApproved/index.d.ts

@@ -1,4 +1,3 @@
 import IncubatorApprovedNotification, { NotificationIncubatorApprovedProps } from './IncubatorApproved';
 export default IncubatorApprovedNotification;
 export { NotificationIncubatorApprovedProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import IncubatorApprovedNotification from './IncubatorApproved';
 export default IncubatorApprovedNotification;
-//# sourceMappingURL=index.js.map

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

@@ -9,8 +9,7 @@ export interface NotificationKindlyNoticeFlagProps extends Pick<NotificationItem
 }
 /**
  * This component render the content of the notification of type kindly notice flag
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function KindlyNoticeFlagNotification(inProps: NotificationKindlyNoticeFlagProps): JSX.Element;
-//# sourceMappingURL=KindlyNoticeFlag.d.ts.map
+export default function KindlyNoticeFlagNotification(props: NotificationKindlyNoticeFlagProps): JSX.Element;

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Typography } from '@mui/material';
@@ -20,18 +10,16 @@ import { getContributionType, getContributionSnippet, getRouteData } from '../..
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 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`,
@@ -41,39 +29,15 @@ 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
  * @constructor
+ * @param props
  */
-export default function KindlyNoticeFlagNotification(inProps) {
+export default function KindlyNoticeFlagNotification(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
     // ROUTING
     const scRoutingContext = useSCRouting();
@@ -94,4 +58,3 @@ export default function KindlyNoticeFlagNotification(inProps) {
             React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])), className: classes.contributionText },
                 React.createElement(Typography, { component: 'span', variant: "body2" }, getContributionSnippet(notificationObject[contributionType]))))) }, rest)));
 }
-//# sourceMappingURL=KindlyNoticeFlag.js.map

package/lib/esm/components/Notification/KindlyNoticeFlag/index.d.ts

@@ -1,4 +1,3 @@
 import KindlyNoticeFlagNotification, { NotificationKindlyNoticeFlagProps } from './KindlyNoticeFlag';
 export default KindlyNoticeFlagNotification;
 export { NotificationKindlyNoticeFlagProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import KindlyNoticeFlagNotification from './KindlyNoticeFlag';
 export default KindlyNoticeFlagNotification;
-//# sourceMappingURL=index.js.map

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

@@ -9,8 +9,7 @@ export interface NotificationKindlyNoticeForProps extends Pick<NotificationItemP
 }
 /**
  * This component render the content of the notification of type kindly notice for
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function KindlyNoticeForNotification(inProps: NotificationKindlyNoticeForProps): JSX.Element;
-//# sourceMappingURL=KindlyNoticeFor.d.ts.map
+export default function KindlyNoticeForNotification(props: NotificationKindlyNoticeForProps): JSX.Element;

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Stack, Typography } from '@mui/material';
@@ -20,9 +10,8 @@ import { getContributionType, getContributionSnippet, getRouteData } from '../..
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 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',
@@ -49,9 +38,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`,
@@ -61,40 +49,15 @@ 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
  * @constructor
+ * @param props
  */
-export default function KindlyNoticeForNotification(inProps) {
+export default function KindlyNoticeForNotification(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
     // ROUTING
     const scRoutingContext = useSCRouting();
@@ -122,4 +85,3 @@ export default function KindlyNoticeForNotification(inProps) {
                     React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], getRouteData(notificationObject[contributionType])) },
                         React.createElement(FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }))))))) }, rest)));
 }
-//# sourceMappingURL=KindlyNoticeFor.js.map

package/lib/esm/components/Notification/KindlyNoticeFor/index.d.ts

@@ -1,4 +1,3 @@
 import KindlyNoticeForNotification, { NotificationKindlyNoticeForProps } from './KindlyNoticeFor';
 export default KindlyNoticeForNotification;
 export { NotificationKindlyNoticeForProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import KindlyNoticeForNotification from './KindlyNoticeFor';
 export default KindlyNoticeForNotification;
-//# sourceMappingURL=index.js.map

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

@@ -9,8 +9,7 @@ export interface MentionNotificationProps extends Pick<NotificationItemProps, Ex
 }
 /**
  * This component render the content of the notification of type mention
- * @param inProps
  * @constructor
+ * @param props
  */
-export default function MentionNotification(inProps: MentionNotificationProps): JSX.Element;
-//# sourceMappingURL=Mention.d.ts.map
+export default function MentionNotification(props: MentionNotificationProps): JSX.Element;