@selfcommunity/react-ui 0.7.50-events.71 → 0.7.50-events.77

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

@@ -20,7 +20,7 @@ export interface EventInviteButtonProps extends ButtonProps {
      * Functions to handle invitations sending in event creation mode
      * @default null
      */
-    handleInvitations?: (data: any) => any;
+    handleInvitations?: ((invited: boolean) => void) | null;
     /**
      * Any other properties
      */

package/lib/cjs/components/EventInviteButton/EventInviteButton.js

@@ -103,13 +103,6 @@ function EventInviteButton(inProps) {
             pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.INVITE_MEMBER}`, usersInvited);
         }
     }
-    function convertToInvitedUsersObject(data) {
-        const invite_users = {};
-        data.forEach((user, index) => {
-            invite_users[`invite_users[${index}]`] = user.id;
-        });
-        return invite_users;
-    }
     /**
      * Memoized users invited ids
      */
@@ -185,26 +178,22 @@ function EventInviteButton(inProps) {
      * Handles invitation sending
      */
     const handleSendInvitations = () => {
-        if (handleInvitations) {
-            handleInvitations(convertToInvitedUsersObject(invited));
+        const data = { users: ids };
+        setIsSending(true);
+        api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, data)
+            .then(() => {
+            setIsSending(false);
             setOpen(false);
-        }
-        else {
-            const data = { users: ids };
-            setIsSending(true);
-            api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, data)
-                .then(() => {
-                setIsSending(false);
-                setOpen(false);
-                setInvited([]);
-                notifyChanges(scEvent, invited);
-            })
-                .catch((error) => {
-                setOpen(false);
-                setLoading(false);
-                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            });
-        }
+            setInvited([]);
+            notifyChanges(scEvent, invited);
+            handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(true);
+        })
+            .catch((error) => {
+            setOpen(false);
+            setLoading(false);
+            handleInvitations === null || handleInvitations === void 0 ? void 0 : handleInvitations(false);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
     };
     // Autocomplete Handlers
     const handleInputChange = (event, value, reason) => {
@@ -249,8 +238,8 @@ function EventInviteButton(inProps) {
         });
     };
     /**
-     * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
-    //  */
+   * If in event edit mode and logged-in user is not also the event manager, the component is hidden.
+  //  */
     if (event && !isEventAdmin) {
         return null;
     }

package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js

@@ -56,6 +56,7 @@ function EventMembersWidget(inProps) {
     }, widget_1.stateWidgetInitializer);
     const [invitedNumber, setInvitedNumber] = (0, react_1.useState)(0);
     const [tabValue, setTabValue] = (0, react_1.useState)('1');
+    const [refresh, setRefresh] = (0, react_1.useState)(false);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
@@ -93,14 +94,20 @@ function EventMembersWidget(inProps) {
         let _t;
         if (scUserContext.user && scEvent) {
             _t = setTimeout(() => {
-                _initParticipants();
-                _initInvited();
+                if (refresh) {
+                    _initInvited();
+                    setRefresh(false);
+                }
+                else {
+                    _initParticipants();
+                    _initInvited();
+                }
             });
             return () => {
                 clearTimeout(_t);
             };
         }
-    }, [scUserContext.user, scEvent]);
+    }, [scUserContext.user, scEvent, refresh]);
     // HANDLERS
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
         setTabValue(newTabValue);
@@ -115,6 +122,6 @@ function EventMembersWidget(inProps) {
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participants.count })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setInvitedNumber
-                                } }) })))] }))] })) })));
+                                }, setRefresh: setRefresh }) })))] }))] })) })));
 }
 exports.default = EventMembersWidget;

package/lib/cjs/components/EventMembersWidget/TabContentComponent.d.ts

@@ -19,6 +19,7 @@ interface TabComponentProps {
         scEvent?: SCEventType;
         setInvitedNumber: Dispatch<SetStateAction<number>>;
     };
+    setRefresh?: Dispatch<SetStateAction<boolean>>;
 }
 export default function TabContentComponent(props: TabComponentProps): JSX.Element;
 export {};

package/lib/cjs/components/EventMembersWidget/TabContentComponent.js

@@ -4,16 +4,20 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
+const Errors_1 = require("../../constants/Errors");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const widget_1 = require("../../utils/widget");
+const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
 const InviteUserEventButton_1 = tslib_1.__importDefault(require("../InviteUserEventButton"));
 const User_1 = tslib_1.__importStar(require("../User"));
 const constants_1 = require("./constants");
 const classes = {
     actionButton: `${constants_1.PREFIX}-action-button`,
+    eventButton: `${constants_1.PREFIX}-event-button`,
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
     endMessage: `${constants_1.PREFIX}-end-message`
@@ -25,7 +29,7 @@ const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
 })(() => ({}));
 function TabContentComponent(props) {
     // PROPS
-    const { state, dispatch, userProps, dialogProps, actionProps } = props;
+    const { state, dispatch, userProps, dialogProps, actionProps, setRefresh } = props;
     // STATE
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     // HANDLERS
@@ -41,12 +45,21 @@ function TabContentComponent(props) {
         })
             .then((res) => {
             dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
     }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
     const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
         setOpenDialog((prev) => !prev);
     }, []);
     const getActionsComponent = (0, react_1.useCallback)((userId) => actionProps ? (0, jsx_runtime_1.jsx)(InviteUserEventButton_1.default, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
+    const handleInvitations = (0, react_1.useCallback)((invited) => {
+        if (invited) {
+            dispatch({ type: widget_1.actionWidgetTypes.RESET });
+            setRefresh(true);
+        }
+    }, [dispatch, setRefresh]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count === 0 && actionProps && ((0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
 }
 exports.default = TabContentComponent;

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

@@ -16,6 +16,7 @@ export declare type FeedSidebarProps = StickyBoxProps;
 export declare type FeedRef = {
     addFeedData: (obj: any, syncPagination?: boolean) => void;
     refresh: () => void;
+    getCurrentFeedObjectIds: () => number[];
 };
 export interface FeedProps {
     /**

package/lib/cjs/components/Feed/Feed.js

@@ -392,6 +392,9 @@ const Feed = (inProps, ref) => {
         },
         refresh: () => {
             refresh();
+        },
+        getCurrentFeedObjectIds: () => {
+            return feedDataObject.results.map((o) => o[o.type].id);
         }
     }));
     const InnerItem = (0, react_1.useMemo)(() => ({ state: savedState, onHeightChange, onStateChange, children: item }) => {

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

@@ -0,0 +1,19 @@
+import { CategoryProps } from './Steps/Category';
+import { AppearanceProps } from './Steps/Appearance';
+import { ProfileProps } from './Steps/Profile';
+import { InviteProps } from './Steps/Invite';
+import { AppProps } from './Steps/App';
+import { ContentProps } from './Steps/Content';
+import { StartStepParams } from '@selfcommunity/api-services';
+export interface OnBoardingWidgetProps {
+    className?: string;
+    CategoryProps?: CategoryProps;
+    ContentProps?: ContentProps;
+    AppearanceProps?: AppearanceProps;
+    ProfileProps?: ProfileProps;
+    InviteProps?: InviteProps;
+    AppProps: AppProps;
+    generateContentsParams?: StartStepParams;
+}
+declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
+export default OnBoardingWidget;

package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const styles_1 = require("@mui/material/styles");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const Category_1 = tslib_1.__importDefault(require("./Steps/Category"));
+const constants_1 = require("./constants");
+const react_core_1 = require("@selfcommunity/react-core");
+const Appearance_1 = tslib_1.__importDefault(require("./Steps/Appearance"));
+const Profile_1 = tslib_1.__importDefault(require("./Steps/Profile"));
+const Invite_1 = tslib_1.__importDefault(require("./Steps/Invite"));
+const App_1 = tslib_1.__importDefault(require("./Steps/App"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const Content_1 = tslib_1.__importDefault(require("./Steps/Content"));
+const Header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/Header"));
+const Errors_1 = require("../../constants/Errors");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const types_1 = require("@selfcommunity/types");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const notistack_1 = require("notistack");
+const constants_2 = require("../PlatformWidget/constants");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    accordionRoot: `${constants_1.PREFIX}-accordion-root`,
+    logo: `${constants_1.PREFIX}-logo`,
+    intro: `${constants_1.PREFIX}-intro`,
+    steps: `${constants_1.PREFIX}-steps`,
+    stepsMobile: `${constants_1.PREFIX}-steps-mobile`,
+    stepContent: `${constants_1.PREFIX}-step-content`
+};
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+const AccordionRoot = (0, styles_1.styled)(material_1.Accordion, {
+    name: constants_1.PREFIX,
+    slot: 'AccordionRoot',
+    overridesResolver: (props, styles) => styles.accordionRoot
+})(() => ({}));
+const OnBoardingWidget = (inProps) => {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, AppearanceProps = {}, ProfileProps = {}, CategoryProps = {}, InviteProps = {}, AppProps = {}, ContentProps = {}, generateContentsParams = {} } = props, rest = tslib_1.__rest(props, ["className", "AppearanceProps", "ProfileProps", "CategoryProps", "InviteProps", "AppProps", "ContentProps", "generateContentsParams"]);
+    // STATE
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [steps, setSteps] = (0, react_1.useState)([]);
+    const currentStep = (0, react_1.useMemo)(() => {
+        const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => step.status === 'in_progress' || step.status === 'not_started');
+        return step || (steps === null || steps === void 0 ? void 0 : steps[0]);
+    }, [steps]);
+    const allStepsDone = (0, react_1.useMemo)(() => {
+        return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === types_1.SCOnBoardingStepStatusType.COMPLETED);
+    }, [steps]);
+    const [expanded, setExpanded] = (0, react_1.useState)(!allStepsDone);
+    const [_step, setStep] = (0, react_1.useState)(currentStep);
+    const prevStep = (0, react_core_1.usePreviousValue)(_step);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scContext = (0, react_core_1.useSCContext)();
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const isStage = scContext.settings.portal.includes('stage');
+    const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // HANDLERS
+    const completeStep = (s) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (s.status !== types_1.SCOnBoardingStepStatusType.COMPLETED) {
+            yield api_services_1.OnBoardingService.completeAStep(s.id)
+                .then(() => {
+                setSteps((prev) => prev.map((item) => {
+                    if (item.id === s.id) {
+                        return Object.assign(Object.assign({}, item), { status: types_1.SCOnBoardingStepStatusType.COMPLETED, completion_percentage: 100 });
+                    }
+                    return item;
+                }));
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+    });
+    const showSuccessAlert = (step) => {
+        setIsGenerating(false);
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.step.${step.step}.success`, defaultMessage: `ui.onBoardingWidget.step.${step.step}.success` }), {
+            action: (snackbarId) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [step.step === types_1.SCOnBoardingStepType.CATEGORIES && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { textTransform: 'uppercase', color: 'white' }, size: "small", variant: "text", href: isStage ? constants_2.CONSOLE_STAGE : constants_2.CONSOLE_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success.link", defaultMessage: "ui.onBoardingWidget.step.categories.success.link" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ sx: { color: 'white' }, onClick: () => (0, notistack_1.closeSnackbar)(snackbarId) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })),
+            variant: 'success',
+            autoHideDuration: 7000
+        });
+    };
+    const getSteps = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        yield api_services_1.OnBoardingService.getAllSteps()
+            .then((res) => {
+            setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
+            setSteps(res.results);
+            setIsLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setIsLoading(false);
+        });
+    });
+    const handleChange = (newStep) => {
+        setStep(newStep);
+    };
+    const handleExpand = () => {
+        setExpanded(!expanded);
+    };
+    const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        yield api_services_1.OnBoardingService.startAStep(stepId, generateContentsParams)
+            .then(() => {
+            setIsGenerating(true);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    });
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        if ((prevStep === null || prevStep === void 0 ? void 0 : prevStep.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && (_step === null || _step === void 0 ? void 0 : _step.status) === types_1.SCOnBoardingStepStatusType.NOT_STARTED) {
+            showSuccessAlert(prevStep);
+        }
+    }, [_step, prevStep]);
+    (0, react_1.useEffect)(() => {
+        setStep(currentStep);
+    }, [currentStep, steps]);
+    (0, react_1.useEffect)(() => {
+        setExpanded(!allStepsDone);
+    }, [allStepsDone]);
+    (0, react_1.useEffect)(() => {
+        getSteps();
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        const intervalId = setInterval(getSteps, isGenerating ? 3000 : 3 * 60 * 1000);
+        return () => clearInterval(intervalId);
+    }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, isGenerating]);
+    /**
+     * Render _step content section
+     */
+    const getStepContent = () => {
+        const stepObj = _step;
+        let content;
+        switch (stepObj === null || stepObj === void 0 ? void 0 : stepObj.step) {
+            case types_1.SCOnBoardingStepType.CONTENTS:
+                content = (0, jsx_runtime_1.jsx)(Content_1.default, Object.assign({ step: stepObj, handleContentCreation: () => generateContent(stepObj.id) }, ContentProps));
+                break;
+            case types_1.SCOnBoardingStepType.CATEGORIES:
+                content = (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ step: stepObj, handleCategoriesCreation: () => generateContent(stepObj.id) }, CategoryProps));
+                break;
+            case types_1.SCOnBoardingStepType.APPEARANCE:
+                content = (0, jsx_runtime_1.jsx)(Appearance_1.default, Object.assign({ onCompleteAction: () => completeStep(stepObj) }, AppearanceProps));
+                break;
+            case types_1.SCOnBoardingStepType.PROFILE:
+                content = (0, jsx_runtime_1.jsx)(Profile_1.default, Object.assign({ onCompleteAction: () => completeStep(stepObj) }, ProfileProps));
+                break;
+            case types_1.SCOnBoardingStepType.INVITE:
+                content = (0, jsx_runtime_1.jsx)(Invite_1.default, Object.assign({ onCompleteAction: () => completeStep(stepObj) }, InviteProps));
+                break;
+            case types_1.SCOnBoardingStepType.APP:
+                content = (0, jsx_runtime_1.jsx)(App_1.default, Object.assign({ step: stepObj, onCompleteAction: () => completeStep(stepObj) }, AppProps));
+                break;
+            default:
+                break;
+        }
+        return content;
+    };
+    if (!(scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user)) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: expanded ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile ? ((0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.logo, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Header_1.default, {}) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
+                                    } }) }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.intro }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title" }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: !isMobile ? 'h5' : 'subtitle1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.subtitle", defaultMessage: "ui.onBoardingWidget.accordion.expanded.subtitle" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.summary", defaultMessage: "ui.onBoardingWidget.accordion.expanded.summary", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks })
+                                            } }) })] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.collapsed", defaultMessage: "ui.onBoardingWidget.accordion.collapsed", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
+                            } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { elevation: 0 }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", disabled: isGenerating && ((_step === null || _step === void 0 ? void 0 : _step.step) === types_1.SCOnBoardingStepType.CATEGORIES || (_step === null || _step === void 0 ? void 0 : _step.step) === types_1.SCOnBoardingStepType.CONTENTS), label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && step.step !== _step.step ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === _step.step ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step), disabled: isGenerating && ((_step === null || _step === void 0 ? void 0 : _step.step) === types_1.SCOnBoardingStepType.CATEGORIES || (_step === null || _step === void 0 ? void 0 : _step.step) === types_1.SCOnBoardingStepType.CONTENTS) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })) }))] })) })) })] })));
+};
+exports.default = OnBoardingWidget;

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

@@ -0,0 +1 @@
+export default function OnBoardingWidgetSkeleton(): JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    menu: `${constants_1.PREFIX}-skeleton-menu`,
+    content: `${constants_1.PREFIX}-skeleton-content`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+function OnBoardingWidgetSkeleton() {
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const steps = Array(isMobile ? 3 : 5).fill(null);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.menu }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'space-evenly' } }, { children: steps.map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: 80 }), variant: "outlined" }, index))) }))) : ((0, jsx_runtime_1.jsx)(material_1.List, { children: steps.map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: 20, height: 20 }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: 100 }) })] }) }, index))) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: '20%', height: 40 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: '80%', height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: '70%', height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "text", width: '60%', height: 20 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
+}
+exports.default = OnBoardingWidgetSkeleton;

package/lib/cjs/components/OnBoardingWidget/Steps/App/App.d.ts

@@ -0,0 +1,18 @@
+import { SCStepType } from '@selfcommunity/types';
+export interface AppProps {
+    /**
+     * The content step
+     */
+    step: SCStepType;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback triggered on complete action click
+     * @default null
+     */
+    onCompleteAction: () => void;
+}
+export default function App(inProps: AppProps): JSX.Element;

package/lib/cjs/components/OnBoardingWidget/Steps/App/App.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const Ios_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/Ios"));
+const Android_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/Android"));
+const types_1 = require("@selfcommunity/types");
+const classes = {
+    root: `${constants_1.PREFIX}-app-root`,
+    title: `${constants_1.PREFIX}-app-title`,
+    tabs: `${constants_1.PREFIX}-app-tabs`,
+    tabContent: `${constants_1.PREFIX}-app-tab-content`,
+    summary: `${constants_1.PREFIX}-app-summary`,
+    image: `${constants_1.PREFIX}-app-image`,
+    action: `${constants_1.PREFIX}-app-action`,
+    button: `${constants_1.PREFIX}-app-button`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'AppRoot'
+})(() => ({}));
+function App(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    //PROPS
+    const { className, step, onCompleteAction } = props;
+    // STATE
+    const [tab, setTab] = (0, react_1.useState)(0);
+    // HANDLERS
+    const handleChange = (event, newValue) => {
+        setTab(newValue);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) })] })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Ios_1.default, {}) }))] })), tab === 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                        // @ts-ignore
+                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Android_1.default, {}) }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
+}
+exports.default = App;

package/lib/cjs/components/OnBoardingWidget/Steps/App/index.d.ts

@@ -0,0 +1,3 @@
+import App, { AppProps } from './App';
+export default App;
+export { AppProps };

package/lib/cjs/components/OnBoardingWidget/Steps/App/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const App_1 = tslib_1.__importDefault(require("./App"));
+exports.default = App_1.default;

package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.d.ts

@@ -0,0 +1,13 @@
+export interface AppearanceProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback triggered on complete action click
+     * @default null
+     */
+    onCompleteAction: () => void;
+}
+export default function Appearance(inProps: AppearanceProps): JSX.Element;