@selfcommunity/react-ui 0.7.50-alpha.1 → 0.7.51-alpha.0

package/lib/cjs/types/platformWidget.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/esm/assets/index.d.ts

@@ -0,0 +1,2 @@
+import Logo from './logo';
+export { Logo };

package/lib/esm/assets/index.js

@@ -0,0 +1,3 @@
+// images
+import Logo from './logo';
+export { Logo };

package/lib/esm/assets/logo.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "data:image/png;base64,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";
+export default _default;

package/lib/esm/assets/logo.js

@@ -0,0 +1 @@
+export default 'data:image/png;base64,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';

package/lib/esm/components/Composer/Composer.js

@@ -11,7 +11,7 @@ import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POL
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
 import LoadingButton from '@mui/lab/LoadingButton';
 import AudienceLayer from './Layer/AudienceLayer';
-import { iOS, random, stripHtml } from '@selfcommunity/utils';
+import { iOS, isClientSideRendering, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import ContentPoll from './Content/ContentPoll';
 import { useSnackbar } from 'notistack';
@@ -132,7 +132,7 @@ export default function Composer(inProps) {
     const { enqueueSnackbar } = useSnackbar();
     // HOOKS
     const theme = useTheme();
-    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
+    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
     // State variables
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [layer, setLayer] = useState();
@@ -475,13 +475,15 @@ export default function Composer(inProps) {
             });
         }
         else {
+            console.log('qui');
             onClose && onClose(event);
-            setLayer(null);
+            console.log('qui2');
+            /*setLayer(null);
             feedType && feedType === SCFeedTypologyType.CATEGORY
-                ? dispatch({ type: 'resetCategoryFeed' })
-                : feedType === SCFeedTypologyType.GROUP
-                    ? dispatch({ type: 'resetGroupFeed' })
-                    : dispatch({ type: 'reset' });
+              ? dispatch({type: 'resetCategoryFeed'})
+              : feedType === SCFeedTypologyType.GROUP
+              ? dispatch({type: 'resetGroupFeed'})
+              : dispatch({type: 'reset'}); */
         }
     }, [onClose, canSubmit, handleRemoveLayer]);
     const handleClosePrompt = useCallback((event) => {

package/lib/esm/components/Feed/Feed.js

@@ -7,7 +7,7 @@ import { FormattedMessage } from 'react-intl';
 import { GenericSkeleton } from '../Skeleton';
 import CustomAdv from '../CustomAdv';
 import { SCCustomAdvPosition } from '@selfcommunity/types';
-import { CacheStrategies, getQueryStringParameter, updateQueryStringParameter } from '@selfcommunity/utils';
+import { CacheStrategies, getQueryStringParameter, isClientSideRendering, updateQueryStringParameter } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import PubSub from 'pubsub-js';
 import { useThemeProps } from '@mui/system';
@@ -101,7 +101,7 @@ const Feed = (inProps, ref) => {
     }, [scPreferences.preferences]);
     // RENDER
     const theme = useTheme();
-    const oneColLayout = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
+    const oneColLayout = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
     const advEnabled = useMemo(() => preferences &&
         preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
         ((preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PlatformWidgetActionType } from '../../types/platformWidget';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 export interface PlatformWidgetProps extends VirtualScrollerItemProps {
     /**
@@ -19,11 +20,18 @@ export interface PlatformWidgetProps extends VirtualScrollerItemProps {
     /**
      * Actions to be inserted before
      */
-    startActions?: React.ReactNode | null;
+    startActions?: PlatformWidgetActionType[];
     /**
      * Actions to be inserted after
      */
-    endActions?: React.ReactNode | null;
+    endActions?: PlatformWidgetActionType[];
+    /**
+     * Hide actions
+     */
+    hideHubAction?: boolean;
+    hideConsoleAction?: boolean;
+    hideModerationAction?: boolean;
+    hideContactUsAction?: boolean;
     /**
      * Other props
      */
@@ -53,6 +61,20 @@ export interface PlatformWidgetProps extends VirtualScrollerItemProps {
  |---|---|---|
  |root|.SCPlatformWidget-root|Styles applied to the root element.|
  |title|.SCPlatformWidget-title|Styles applied to the title element.|
+ |actions|.SCPlatformWidget-actions|Styles applied to the actions container.|
+ |action|.SCPlatformWidget-action|Styles applied to the single action element.|
+ |actionHighlighted|.SCPlatformWidget-action-highlighted|Styles applied to the action highlighted.|
+ |tutorial|.SCPlatformWidget-tutorial|Styles applied to the tutorial element.|
+ |tutorialContent|.SCPlatformWidget-tutorial-content|Styles applied to the content of the tutorial element.|
+ |tutorialTitle|.SCPlatformWidget-tutorial-title|Styles applied to the title element of the tutorial.|
+ |tutorialTitleClose|.SCPlatformWidget-tutorial-title-close|Styles applied to the close button of the title in the tutorial.|
+ |tutorialDesc|.SCPlatformWidget-tutorial-desc|Styles applied to the tutorial description element.|
+ |tutorialOpen|.SCPlatformWidget-tutorial-open|Styles applied to the tutorial element when is active.|
+ |divider|.SCPlatformWidget-divider|Styles applied to the divider element in the tutorial container.|
+ |tutorialControls|.SCPlatformWidget-tutorial-controls|Styles applied to the tutorial bottom controls.|
+ |btnStep|.SCPlatformWidget-btn-step|Styles applied to the button next/previous/skip/close of the tutorial controls.|
+ |btnPreviousStep|.SCPlatformWidget-btn-previous-step|Styles applied to the button previous element of the tutorial controls.|
+ |btnNextStep|.SCPlatformWidget-btn-next-step|Styles applied to the button next element of the tutorial controls.|
 
  *
  * @param inProps

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

@@ -1,24 +1,125 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Button, Grid, Typography } from '@mui/material';
+import { Backdrop, Box, Button, Collapse, Divider, Grid, Icon, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { http, Endpoints } from '@selfcommunity/api-services';
-import { SCUserContext, UserUtils, useSCLocale } from '@selfcommunity/react-core';
-import Icon from '@mui/material/Icon';
+import { Link, SCUserContext, UserUtils, useSCContext } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-import { PREFIX } from './constants';
+import { CONTACT_PROD, CONTACT_STAGE, HUB_PROD, HUB_STAGE, PREFIX } from './constants';
+import { Logo as LogoPlaceholder } from '../../assets';
+import Grow from '@mui/material/Grow';
 const classes = {
     root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`
+    title: `${PREFIX}-title`,
+    content: `${PREFIX}-content`,
+    actions: `${PREFIX}-actions`,
+    action: `${PREFIX}-action`,
+    actionHighlighted: `${PREFIX}-action-highlighted`,
+    tutorial: `${PREFIX}-tutorial`,
+    tutorialContent: `${PREFIX}-tutorial-content`,
+    tutorialTitle: `${PREFIX}-tutorial-title`,
+    tutorialTitleClose: `${PREFIX}-tutorial-title-close`,
+    tutorialDesc: `${PREFIX}-tutorial-desc`,
+    tutorialOpen: `${PREFIX}-tutorial-open`,
+    divider: `${PREFIX}-divider`,
+    tutorialControls: `${PREFIX}-tutorial-controls`,
+    btnStep: `${PREFIX}-btn-step`,
+    btnPreviousStep: `${PREFIX}-btn-previous-step`,
+    btnNextStep: `${PREFIX}-btn-next-step`
 };
 const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root'
-})(() => ({}));
+})(({ theme }) => ({
+    padding: '0px !important',
+    [`&.${classes.tutorialOpen}`]: {
+        position: 'relative',
+        zIndex: theme.zIndex.drawer + 2,
+        [`& .${classes.tutorial}`]: {
+            padding: 0
+        }
+    },
+    [`& .${classes.title}`]: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: theme.spacing(1)
+    },
+    [`& .${classes.content}`]: {
+        padding: `${theme.spacing(2)} 0 0 0`,
+        backgroundColor: '#EFEFEF'
+    },
+    [`& .${classes.actions}`]: {
+        display: 'flex',
+        paddingBottom: 0,
+        boxShadow: 'inset -1px -3px 7px -4px #CECECE',
+        '-webkit-overflow-scrolling': 'touch',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        scrollbarWidth: 'none' /* Firefox */,
+        '-ms-overflow-style': 'none' /* IE and Edge */,
+        '&::-webkit-scrollbar': {
+            display: 'none'
+        }
+    },
+    [`& .${classes.action}`]: {
+        padding: `0px 2px ${theme.spacing(2)} 2px`,
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'center'
+    },
+    [`& .${classes.tutorialContent}`]: {
+        width: '100%'
+    },
+    [`& .${classes.divider}`]: {
+        paddingTop: theme.spacing()
+    },
+    [`& .${classes.tutorialTitle}`]: {
+        position: 'relative',
+        fontWeight: 700,
+        fontSize: 15,
+        padding: `${theme.spacing(3)} ${theme.spacing()} ${theme.spacing()} ${theme.spacing(3)}`
+    },
+    [`& .${classes.tutorialTitleClose}`]: {
+        position: 'absolute',
+        top: theme.spacing(3),
+        right: theme.spacing(3)
+    },
+    [`& .${classes.tutorialDesc}`]: {
+        fontSize: 14,
+        fontWeight: 200,
+        color: theme.palette.grey[700],
+        padding: `0px ${theme.spacing(3)} ${theme.spacing()} ${theme.spacing(3)}`
+    },
+    [`& .${classes.tutorialControls}`]: {
+        padding: theme.spacing(2)
+    },
+    [`& .${classes.actionHighlighted}`]: {
+        position: 'relative',
+        '&:before': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            bottom: -11,
+            width: 10,
+            height: 10,
+            transform: 'translateY(-50%) rotate(45deg)',
+            boxShadow: '0px -20px 20px 0px #CECECE',
+            zIndex: 0,
+            backgroundColor: theme.palette.common.white
+        },
+        '& .MuiButton-root': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white
+        }
+    },
+    [`& .${classes.btnStep}`]: {
+        borderRadius: 3
+    }
+}));
 /**
  * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
  *
@@ -43,6 +144,20 @@ const Root = styled(Widget, {
  |---|---|---|
  |root|.SCPlatformWidget-root|Styles applied to the root element.|
  |title|.SCPlatformWidget-title|Styles applied to the title element.|
+ |actions|.SCPlatformWidget-actions|Styles applied to the actions container.|
+ |action|.SCPlatformWidget-action|Styles applied to the single action element.|
+ |actionHighlighted|.SCPlatformWidget-action-highlighted|Styles applied to the action highlighted.|
+ |tutorial|.SCPlatformWidget-tutorial|Styles applied to the tutorial element.|
+ |tutorialContent|.SCPlatformWidget-tutorial-content|Styles applied to the content of the tutorial element.|
+ |tutorialTitle|.SCPlatformWidget-tutorial-title|Styles applied to the title element of the tutorial.|
+ |tutorialTitleClose|.SCPlatformWidget-tutorial-title-close|Styles applied to the close button of the title in the tutorial.|
+ |tutorialDesc|.SCPlatformWidget-tutorial-desc|Styles applied to the tutorial description element.|
+ |tutorialOpen|.SCPlatformWidget-tutorial-open|Styles applied to the tutorial element when is active.|
+ |divider|.SCPlatformWidget-divider|Styles applied to the divider element in the tutorial container.|
+ |tutorialControls|.SCPlatformWidget-tutorial-controls|Styles applied to the tutorial bottom controls.|
+ |btnStep|.SCPlatformWidget-btn-step|Styles applied to the button next/previous/skip/close of the tutorial controls.|
+ |btnPreviousStep|.SCPlatformWidget-btn-previous-step|Styles applied to the button previous element of the tutorial controls.|
+ |btnNextStep|.SCPlatformWidget-btn-next-step|Styles applied to the button next element of the tutorial controls.|
 
  *
  * @param inProps
@@ -54,14 +169,102 @@ export default function PlatformWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { autoHide, className, title = null, startActions = null, endActions = null, onHeightChange, onStateChange } = props, rest = __rest(props, ["autoHide", "className", "title", "startActions", "endActions", "onHeightChange", "onStateChange"]);
+    const { autoHide, className, title = null, startActions = [], endActions = [], hideConsoleAction = false, hideModerationAction = false, hideHubAction = false, hideContactUsAction = false, onHeightChange } = props, rest = __rest(props, ["autoHide", "className", "title", "startActions", "endActions", "hideConsoleAction", "hideModerationAction", "hideHubAction", "hideContactUsAction", "onHeightChange"]);
     // CONTEXT
+    const scContext = useSCContext();
     const scUserContext = useContext(SCUserContext);
-    const scLocaleContext = useSCLocale();
+    // STATE
+    const [tutorialIndex, setTutorialIndex] = useState(0);
+    const [isTutorialOpen, setIsTutorialOpen] = useState(false);
     // CONST
-    const language = scLocaleContext.locale;
     const isAdmin = useMemo(() => UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
+    const isEditor = useMemo(() => UserUtils.isEditor(scUserContext.user), [scUserContext.user]);
     const isModerator = useMemo(() => UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
+    const isStage = scContext.settings.portal.includes('stage');
+    const actions = [
+        ...startActions,
+        ...((isAdmin || isEditor) && !hideConsoleAction
+            ? [
+                {
+                    render: (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('') },
+                        React.createElement(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }))),
+                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
+                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
+                }
+            ]
+            : []),
+        ...((isAdmin || isModerator) && !hideModerationAction
+            ? [
+                {
+                    render: (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') },
+                        React.createElement(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }))),
+                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
+                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
+                }
+            ]
+            : []),
+        ...(isAdmin && !hideHubAction
+            ? [
+                {
+                    render: (React.createElement(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? HUB_STAGE : HUB_PROD, target: "_blank" },
+                        React.createElement(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }))),
+                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
+                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
+                }
+            ]
+            : []),
+        ...(!hideContactUsAction
+            ? [
+                {
+                    render: (React.createElement(Button, { variant: "outlined", size: "small", component: Link, to: isStage ? CONTACT_STAGE : CONTACT_PROD, target: "_blank" },
+                        React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }))),
+                    title: React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
+                    content: React.createElement(FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
+                }
+            ]
+            : []),
+        ...endActions
+    ];
+    /**
+     * Handle open tutorial
+     */
+    const handleOpenTutorial = useCallback(() => {
+        setTutorialIndex(0);
+        setIsTutorialOpen(true);
+        onHeightChange && onHeightChange();
+    }, [setTutorialIndex, setIsTutorialOpen, onHeightChange]);
+    /**
+     * Handle close tutorial
+     */
+    const handleCloseTutorial = useCallback(() => {
+        setIsTutorialOpen(false);
+        setTutorialIndex(0);
+        onHeightChange && onHeightChange();
+    }, [setIsTutorialOpen, setTutorialIndex, onHeightChange]);
+    /**
+     * Handle next step tutorial
+     */
+    const handlePrevious = useCallback(() => {
+        if (tutorialIndex > 0) {
+            setTutorialIndex((prev) => prev - 1);
+        }
+        else {
+            handleCloseTutorial();
+        }
+        onHeightChange && onHeightChange();
+    }, [tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
+    /**
+     * Handle next step tutorial
+     */
+    const handleNext = useCallback(() => {
+        if (tutorialIndex < actions.length - 1) {
+            setTutorialIndex((prev) => prev + 1);
+        }
+        else {
+            handleCloseTutorial();
+        }
+        onHeightChange && onHeightChange();
+    }, [actions, tutorialIndex, setTutorialIndex, handleCloseTutorial, onHeightChange]);
     /**
      * Fetches platform url
      */
@@ -82,25 +285,51 @@ export default function PlatformWidget(inProps) {
             console.log(error);
         });
     }
+    /**
+     * Render tutorial
+     */
+    const tutorial = (React.createElement(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial },
+        !isTutorialOpen && (React.createElement(Grid, { item: true, xs: "auto", alignItems: "center", justifyContent: "center" },
+            React.createElement(IconButton, { size: "medium", onClick: handleOpenTutorial },
+                React.createElement(Icon, null, "info")))),
+        React.createElement(Collapse, { in: isTutorialOpen, className: classes.tutorialContent }, isTutorialOpen && (React.createElement(Grid, { item: true, xs: "auto" },
+            React.createElement(Typography, { variant: 'body2', className: classes.tutorialTitle, component: 'div' },
+                React.createElement(Grow, { in: true, timeout: 1000 },
+                    React.createElement("span", null, actions[tutorialIndex].title)),
+                React.createElement(IconButton, { size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial },
+                    React.createElement(Icon, null, "close"))),
+            React.createElement(Grow, { in: true, timeout: 1200 },
+                React.createElement(Typography, { variant: 'body2', className: classes.tutorialDesc }, actions[tutorialIndex].content)),
+            React.createElement(Divider, { className: classes.divider }),
+            React.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls },
+                React.createElement(Button, { variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, tutorialIndex === 0 ? (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" }))),
+                React.createElement(Typography, { component: 'div' },
+                    tutorialIndex + 1,
+                    "/",
+                    actions.length),
+                React.createElement(Button, { variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, tutorialIndex === actions.length - 1 ? (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (React.createElement(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })))))))));
     /**
      * Renders platform card
      */
-    const c = (React.createElement(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center" },
-        React.createElement(Grid, { item: true, xs: 12 }, title ? (title) : (React.createElement(Typography, { className: classes.title, component: "h3", align: "center" },
-            React.createElement(FormattedMessage, { id: "ui.platformWidget.title", defaultMessage: "ui.platformWidget.title" }),
-            React.createElement(Icon, { fontSize: "small" }, "lock")))),
-        startActions,
-        isAdmin && (React.createElement(Grid, { item: true, xs: "auto" },
-            React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('') },
-                React.createElement(FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" })))),
-        React.createElement(Grid, { item: true, xs: "auto" },
-            React.createElement(Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, isAdmin || isModerator ? (React.createElement(FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" })) : (React.createElement(FormattedMessage, { id: "ui.platformWidget.edt", defaultMessage: "ui.platformWidget.edt" })))),
-        endActions));
+    const content = (React.createElement(Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content },
+        React.createElement(Grid, { item: true, xs: 12 }, title ? (title) : (React.createElement(Box, { className: classes.title },
+            React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }) },
+                React.createElement("img", { src: LogoPlaceholder, alt: "logo" }))))),
+        React.createElement(Grid, { item: true, xs: 12, className: classes.actions },
+            React.createElement(Grid, { item: true, xs: 1, className: classes.action }),
+            actions.map((a, i) => {
+                return (React.createElement(Grid, { item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, a.render));
+            }),
+            React.createElement(Grid, { item: true, xs: 1, className: classes.action }))));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.role)) {
-        return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), c));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Root, Object.assign({ className: classNames(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest),
+                content,
+                tutorial),
+            React.createElement(Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })));
     }
     return React.createElement(HiddenPlaceholder, null);
 }

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

@@ -1 +1,5 @@
 export declare const PREFIX = "SCPlatformWidget";
+export declare const HUB_STAGE = "https://hub.stage.quentrix.com/";
+export declare const HUB_PROD = "https://hub.selfcommunity.com/";
+export declare const CONTACT_STAGE = "https://hub.stage.quentrix.com/dashboard/account/contact-us";
+export declare const CONTACT_PROD = "https://hub.selfcommunity.com/dashboard/account/contact-us";

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

@@ -1 +1,5 @@
 export const PREFIX = 'SCPlatformWidget';
+export const HUB_STAGE = 'https://hub.stage.quentrix.com/';
+export const HUB_PROD = 'https://hub.selfcommunity.com/';
+export const CONTACT_STAGE = 'https://hub.stage.quentrix.com/dashboard/account/contact-us';
+export const CONTACT_PROD = 'https://hub.selfcommunity.com/dashboard/account/contact-us';

package/lib/esm/index.d.ts

@@ -72,7 +72,7 @@ import AccountRecover, { AccountRecoverProps } from './components/AccountRecover
 import AccountReset, { AccountResetProps } from './components/AccountReset';
 import AccountVerify, { AccountVerifyProps } from './components/AccountVerify';
 import AccountChangeMailValidation, { AccountChangeMailValidationProps } from './components/AccountChangeMailValidation';
-import { SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, VirtualScrollerItemProps } from './types';
+import { SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, VirtualScrollerItemProps, PlatformWidgetActionType } from './types';
 import Widget, { WidgetProps } from './components/Widget';
 import ConfirmDialog from './shared/ConfirmDialog/ConfirmDialog';
 import LanguageSwitcher from './shared/LanguageSwitcher';
@@ -144,7 +144,11 @@ import { getUnseenNotification, getUnseenNotificationCounter } from './utils/fee
 import * as MessageUploaderUtils from './utils/thumbnailCoverter';
 import { getRelativeTime } from './utils/formatRelativeTime';
 import FeedObjectMediaPreview, { FeedObjectMediaPreviewProps } from './components/FeedObjectMediaPreview';
+/**
+ * Import Assets
+ */
+import { Logo } from './assets';
 /**
  * List all exports
  */
-export { AccountDataPortability, AccountDataPortabilityProps, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDelete, AccountDeleteProps, AccountDeleteButton, AccountDeleteButtonProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AccountChangeMailValidation, AccountChangeMailValidationProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbar, NavigationToolbarProps, NavigationToolbarSkeleton, NavigationMenuIconButton, NavigationMenuContent, NavigationMenuIconButtonProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, Category, CategoryProps, CategorySkeleton, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, Categories, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, ChangeCover, ChangePicture, ChangePictureProps, ChangeCoverProps, Composer, ComposerProps, ComposerIconButton, ComposerIconButtonProps, Editor, EditorProps, EditorSkeleton, FriendshipUserButton, FriendshipButtonProps, Feed, FeedRef, FeedProps, FeedSidebarProps, FeedSkeleton, CategoryFollowButton, CategoryFollowButtonProps, FollowUserButton, FollowUserButtonProps, ConnectionUserButton, FeedObject, FeedObjectProps, FeedObjectSkeleton, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, GenericSkeleton, AvatarGroupSkeleton, CommentObject, CommentsObject, CommentsObjectProps, CommentObjectProps, CommentsObjectSkeleton, CommentObjectSkeleton, CommentObjectReply, CommentObjectReplyProps, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, ReplyComment, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, Notification, NotificationProps, NotificationSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, PlatformWidget, PlatformWidgetProps, PlatformWidgetSkeleton, LocationAutocomplete, LocationAutocompleteProps, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CategoryTrendingPeopleWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectWidgetProps, RelatedFeedObjectsWidgetSkeleton, UserActionIconButton, UserActionIconButtonProps, UserCounters, UserCountersProps, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserInfoDialog, UserInfoDialogProps, UserInfo, UserInfoProps, UserInfoSkeleton, UserProfileBlocked, UserProfileBlockedProps, SCUserProfileFields, SCUserProfileSettings, UserProfileEdit, UserProfileEditProps, UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserSocialAssociation, UserSocialAssociationProps, SCUserSocialAssociations, VirtualScrollerItemProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, User, UserProps, UserSkeleton, PrivateMessageThread, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Widget, WidgetProps, SCFeedWidgetType, SCFeedObjectTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCMediaObjectType, SCMediaChunkType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupMembersButton, GroupMembersButtonProps, CreateGroupButton, CreateGroupButtonProps, EditGroupButton, EditGroupButtonProps, GroupInviteButton, GroupInviteButtonProps, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, Group, GroupProps, GroupSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupsProps, GroupsSkeleton, GroupForm, GroupFormProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, DefaultDrawerContent, DefaultDrawerContentProps, HiddenPlaceholder, UrlTextField, UsernameTextField, EmailTextField, PasswordTextField, PhoneTextField, MetadataField, InfiniteScroll, StickyBox, useStickyBox, StickyBoxProps, StickyBoxComponent, UseStickyBoxProps, TagChip, TagChipProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserAvatar, UserAvatarProps, Lightbox, CentralProgress, ConfirmDialog, LanguageSwitcher, MediaChunkUploader, MediaChunkUploaderProps, File, Link, Share, EditMediaProps, MEDIA_TYPE_EMBED, FACEBOOK_SHARE, X_SHARE, LINKEDIN_SHARE, DEFAULT_PRELOAD_OFFSET_VIEWPORT, MIN_PRELOAD_OFFSET_VIEWPORT, MAX_PRELOAD_OFFSET_VIEWPORT, ConsentSolution, ConsentSolutionProps, ConsentSolutionSkeleton, ConsentSolutionButton, ConsentSolutionButtonProps, LEGAL_POLICIES, DEFAULT_FIELDS, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, PollSuggestionWidgetProps, Incubator, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorDetail, IncubatorDetailProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterProps, FooterSkeleton, BaseItem, BaseItemProps, BaseDialog, BaseDialogProps, GroupSettingsIconButton, GroupSettingsIconButtonProps };
+export { AccountDataPortability, AccountDataPortabilityProps, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDelete, AccountDeleteProps, AccountDeleteButton, AccountDeleteButtonProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AccountChangeMailValidation, AccountChangeMailValidationProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbar, NavigationToolbarProps, NavigationToolbarSkeleton, NavigationMenuIconButton, NavigationMenuContent, NavigationMenuIconButtonProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, Category, CategoryProps, CategorySkeleton, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, Categories, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, ChangeCover, ChangePicture, ChangePictureProps, ChangeCoverProps, Composer, ComposerProps, ComposerIconButton, ComposerIconButtonProps, Editor, EditorProps, EditorSkeleton, FriendshipUserButton, FriendshipButtonProps, Feed, FeedRef, FeedProps, FeedSidebarProps, FeedSkeleton, CategoryFollowButton, CategoryFollowButtonProps, FollowUserButton, FollowUserButtonProps, ConnectionUserButton, FeedObject, FeedObjectProps, FeedObjectSkeleton, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, GenericSkeleton, AvatarGroupSkeleton, CommentObject, CommentsObject, CommentsObjectProps, CommentObjectProps, CommentsObjectSkeleton, CommentObjectSkeleton, CommentObjectReply, CommentObjectReplyProps, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, ReplyComment, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, Notification, NotificationProps, NotificationSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, PlatformWidget, PlatformWidgetProps, PlatformWidgetSkeleton, LocationAutocomplete, LocationAutocompleteProps, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CategoryTrendingPeopleWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectWidgetProps, RelatedFeedObjectsWidgetSkeleton, UserActionIconButton, UserActionIconButtonProps, UserCounters, UserCountersProps, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserInfoDialog, UserInfoDialogProps, UserInfo, UserInfoProps, UserInfoSkeleton, UserProfileBlocked, UserProfileBlockedProps, SCUserProfileFields, SCUserProfileSettings, UserProfileEdit, UserProfileEditProps, UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserSocialAssociation, UserSocialAssociationProps, SCUserSocialAssociations, VirtualScrollerItemProps, PlatformWidgetActionType, CustomAdv, CustomAdvProps, CustomAdvSkeleton, User, UserProps, UserSkeleton, PrivateMessageThread, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Widget, WidgetProps, SCFeedWidgetType, SCFeedObjectTemplateType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCMediaObjectType, SCMediaChunkType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupMembersButton, GroupMembersButtonProps, CreateGroupButton, CreateGroupButtonProps, EditGroupButton, EditGroupButtonProps, GroupInviteButton, GroupInviteButtonProps, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, Group, GroupProps, GroupSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupsProps, GroupsSkeleton, GroupForm, GroupFormProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, DefaultDrawerContent, DefaultDrawerContentProps, HiddenPlaceholder, UrlTextField, UsernameTextField, EmailTextField, PasswordTextField, PhoneTextField, MetadataField, InfiniteScroll, StickyBox, useStickyBox, StickyBoxProps, StickyBoxComponent, UseStickyBoxProps, TagChip, TagChipProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserAvatar, UserAvatarProps, Lightbox, CentralProgress, ConfirmDialog, LanguageSwitcher, MediaChunkUploader, MediaChunkUploaderProps, File, Link, Share, EditMediaProps, MEDIA_TYPE_EMBED, FACEBOOK_SHARE, X_SHARE, LINKEDIN_SHARE, DEFAULT_PRELOAD_OFFSET_VIEWPORT, MIN_PRELOAD_OFFSET_VIEWPORT, MAX_PRELOAD_OFFSET_VIEWPORT, ConsentSolution, ConsentSolutionProps, ConsentSolutionSkeleton, ConsentSolutionButton, ConsentSolutionButtonProps, LEGAL_POLICIES, DEFAULT_FIELDS, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, PollSuggestionWidgetProps, Incubator, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorDetail, IncubatorDetailProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterProps, FooterSkeleton, BaseItem, BaseItemProps, BaseDialog, BaseDialogProps, GroupSettingsIconButton, GroupSettingsIconButtonProps, Logo };

package/lib/esm/index.js

@@ -144,6 +144,10 @@ import { getUnseenNotification, getUnseenNotificationCounter } from './utils/fee
 import * as MessageUploaderUtils from './utils/thumbnailCoverter';
 import { getRelativeTime } from './utils/formatRelativeTime';
 import FeedObjectMediaPreview from './components/FeedObjectMediaPreview';
+/**
+ * Import Assets
+ */
+import { Logo } from './assets';
 /**
  * List all exports
  */
@@ -153,4 +157,6 @@ HiddenPlaceholder, UrlTextField, UsernameTextField, EmailTextField, PasswordText
 /* SC CONSENT SOLUTION */
 ConsentSolution, ConsentSolutionSkeleton, ConsentSolutionButton, LEGAL_POLICIES, DEFAULT_FIELDS, 
 /* SC UI PAGINATION */
-DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, Incubator, IncubatorSubscribeButton, IncubatorListWidget, IncubatorDetail, IncubatorSuggestionWidget, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterSkeleton, BaseItem, BaseDialog, GroupSettingsIconButton };
+DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_LIMIT, DEFAULT_WIDGETS_NUMBER, PollSuggestionWidget, Incubator, IncubatorSubscribeButton, IncubatorListWidget, IncubatorDetail, IncubatorSuggestionWidget, ContributionUtils, bytesToSize, getUnseenNotification, getUnseenNotificationCounter, MessageUploaderUtils, getRelativeTime, Footer, FooterSkeleton, BaseItem, BaseDialog, GroupSettingsIconButton, 
+/* Assets */
+Logo };

package/lib/esm/shared/BaseDialog/BaseDialog.js

@@ -10,6 +10,7 @@ import { useTheme } from '@mui/material';
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
 import Icon from '@mui/material/Icon';
+import { isClientSideRendering } from '@selfcommunity/utils';
 const PREFIX = 'SCBaseDialog';
 const classes = {
     root: `${PREFIX}-root`,
@@ -22,7 +23,7 @@ const DialogTitleRoot = styled(MuiDialogTitle, {
 })(({ theme }) => ({}));
 const DialogTitle = ({ children = null, onClose = null }) => {
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
     return (React.createElement(DialogTitleRoot, { className: classes.titleRoot },
         React.createElement("span", null, children),
         onClose ? (React.createElement(IconButton, { "aria-label": "close", onClick: onClose },
@@ -36,7 +37,7 @@ const Root = styled(Dialog, {
 export default function BaseDialog(props) {
     // OPTIONS
     const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'), { noSsr: isClientSideRendering() });
     const fullScreen = isMobile;
     // PROPS
     const { className = '', title = '', subtitle = null, DialogContentProps = { dividers: !isMobile }, open = false, onClose = null, actions = null, children, maxWidth = 'sm', scroll = 'body' } = props, rest = __rest(props, ["className", "title", "subtitle", "DialogContentProps", "open", "onClose", "actions", "children", "maxWidth", "scroll"]);

package/lib/esm/shared/EmojiPicker/EmojiPicker.js

@@ -2,10 +2,12 @@ import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
+import { EmojiStyle } from 'emoji-picker-react';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
+import { isClientSideRendering } from '@selfcommunity/utils';
 let Picker;
-typeof window !== 'undefined' &&
+isClientSideRendering() &&
     import('emoji-picker-react').then((_module) => {
         Picker = _module.default;
     });
@@ -24,6 +26,6 @@ export default function EmojiPicker(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = '', emojiStyle = 'native' } = props, rest = __rest(props, ["className", "emojiStyle"]);
+    const { className = '', emojiStyle = EmojiStyle.NATIVE } = props, rest = __rest(props, ["className", "emojiStyle"]);
     return React.createElement(Root, { className: classNames(classes.root, className) }, Picker && React.createElement(Picker, Object.assign({ emojiStyle: emojiStyle }, rest)));
 }

package/lib/esm/types/index.d.ts

@@ -6,4 +6,5 @@ import { SCNotificationObjectTemplateType } from './notification';
 import { SCBroadcastMessageTemplateType } from './broadcastMessage';
 import { VirtualScrollerItemProps } from './virtualScroller';
 import { SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations } from './user';
-export { SCFeedWidgetType, SCMediaObjectType, SCMediaChunkType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, VirtualScrollerItemProps };
+import { PlatformWidgetActionType } from './platformWidget';
+export { SCFeedWidgetType, SCMediaObjectType, SCMediaChunkType, SCCommentsOrderBy, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCNotificationObjectTemplateType, SCBroadcastMessageTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, VirtualScrollerItemProps, PlatformWidgetActionType };

package/lib/esm/types/platformWidget.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface PlatformWidgetActionType {
+    /**
+     * Render action to be inserted
+     */
+    render: React.ReactNode;
+    /**
+     * Title for tutorial
+     */
+    title: React.ReactNode | string;
+    /**
+     * Content for tutorial
+     */
+    content: React.ReactNode | string;
+}