@selfcommunity/react-ui 0.11.0-alpha.65 → 0.11.0-alpha.67

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

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -27,7 +26,7 @@ const classes = {
     followText: `${constants_1.PREFIX}-follow-text`,
     activeAt: `${constants_1.PREFIX}-active-at`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'UserFollowRoot'
 })(() => ({}));

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

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -29,7 +28,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'VoteUpRoot'
 })(() => ({}));

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

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -20,17 +19,17 @@ const classes = {
     paper: `${constants_1.PREFIX}-actions-paper`,
     item: `${constants_1.PREFIX}-actions-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.drawerRoot
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.menuRoot

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

@@ -5,7 +5,6 @@ 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"));
@@ -41,17 +40,17 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     dialogContent: `${constants_1.PREFIX}-dialog-content`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_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, {
+const AccordionRoot = (0, material_1.styled)(material_1.Accordion, {
     name: constants_1.PREFIX,
     slot: 'AccordionRoot',
     overridesResolver: (props, styles) => styles.accordionRoot
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.dialogRoot

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

@@ -1,17 +1,14 @@
 "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, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -19,6 +16,6 @@ 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 } })] }))] })));
+    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)(material_1.Skeleton, { 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)(material_1.Skeleton, { variant: "rectangular", width: 20, height: 20 }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 100 }) })] }) }, index))) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '20%', height: 40 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '80%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '70%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: '60%', height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 100, height: 36, style: { borderRadius: '20px', alignSelf: 'center', marginTop: 24 } })] }))] })));
 }
 exports.default = OnBoardingWidgetSkeleton;

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

@@ -3,8 +3,6 @@ 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");
@@ -25,7 +23,7 @@ const classes = {
     action: `${constants_1.PREFIX}-app-action`,
     button: `${constants_1.PREFIX}-app-button`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'AppRoot'
 })(() => ({}));
@@ -43,7 +41,7 @@ function App(inProps) {
     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({ 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.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), (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.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({ 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({ className: classes.step }, { 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: {
+    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({ 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.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), (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.jsxs)(material_1.Box, 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({ 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({ className: classes.step }, { 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 })),

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(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 react_core_1 = require("@selfcommunity/react-core");
@@ -15,7 +13,6 @@ const api_services_1 = require("@selfcommunity/api-services");
 const types_1 = require("@selfcommunity/types");
 const onBoarding_1 = require("../../../../utils/onBoarding");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const Errors_1 = require("../../../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const lab_1 = require("@mui/lab");
@@ -51,11 +48,11 @@ var AppearanceTabType;
     AppearanceTabType["LOGO"] = "logo";
     AppearanceTabType["SLOGAN"] = "slogan";
 })(AppearanceTabType || (AppearanceTabType = {}));
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'AppearanceRoot'
 })(() => ({}));
-const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
+const DrawerRoot = (0, material_1.styled)(material_1.Drawer, {
     name: constants_1.PREFIX,
     slot: 'AppearanceDrawerRoot',
     overridesResolver: (props, styles) => styles.appearanceDrawerRoot
@@ -177,11 +174,11 @@ function Appearance(inProps) {
     (0, react_1.useEffect)(() => {
         fetchPreferences();
     }, []);
-    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, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.COLOR, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.LOGO, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.SLOGAN, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.drawerContent }, { children: [tab === AppearanceTabType.COLOR && ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.colorContainer }, { children: [preferences
+    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, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.COLOR, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.LOGO, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.SLOGAN, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerContent }, { children: [tab === AppearanceTabType.COLOR && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.colorContainer }, { children: [preferences
                                             .filter((item) => item.section === types_1.SCPreferenceSection.COLORS)
-                                            .map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences
+                                            .map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences
                                         .filter((item) => item.section === types_1.SCPreferenceSection.LOGO)
-                                        .map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && ((0, jsx_runtime_1.jsxs)(Box_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, InputProps: {
+                                        .map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, InputProps: {
                                                 endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
                                                         ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
                                                         : 50 })))

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-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 react_1 = require("react");
@@ -28,7 +26,7 @@ const classes = {
     animationProgress: `${constants_1.PREFIX}-category-animation-progress`
 };
 function CircledLetter({ letter, statement }) {
-    return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", sx: {
                     width: 22,
                     height: 22,
                     borderRadius: '50%',
@@ -42,7 +40,7 @@ function CircledLetter({ letter, statement }) {
                         fontWeight: 'bold'
                     } }, { children: letter })) })), statement] })));
 }
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'CategoryRoot'
 })(() => ({}));
@@ -101,6 +99,6 @@ function Category(inProps) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
-                            } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+                            } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }
 exports.default = Category;

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-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 react_1 = require("react");
@@ -22,7 +20,7 @@ const classes = {
     progress: `${constants_1.PREFIX}-content-progress`,
     animationProgress: `${constants_1.PREFIX}-content-animation-progress`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentRoot'
 })(() => ({}));
@@ -71,6 +69,6 @@ function Content(inProps) {
         }
         return message;
     }, [progress]);
-    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.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: content_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+    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.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: content_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
 }
 exports.default = Content;

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

@@ -3,8 +3,6 @@ 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");
@@ -25,7 +23,7 @@ const classes = {
     icon: `${constants_1.PREFIX}-invite-social-icon`,
     action: `${constants_1.PREFIX}-invite-action`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'InviteRoot'
 })(() => ({}));
@@ -93,6 +91,6 @@ function Invite(inProps) {
         onCompleteAction();
         fetchPlatform('/marketing/invitation');
     };
-    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.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.social }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.iconContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.email }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
+    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.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.social }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.iconContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleShare(SocialShare_1.LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.email }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
 }
 exports.default = Invite;

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

@@ -3,8 +3,6 @@ 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");
@@ -16,7 +14,6 @@ const UserAvatar_1 = tslib_1.__importDefault(require("../../../../shared/UserAva
 const ChangePicture_1 = tslib_1.__importDefault(require("../../../ChangePicture"));
 const ChangeCover_1 = tslib_1.__importDefault(require("../../../ChangeCover"));
 const UserProfile_1 = require("../../../../constants/UserProfile");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classes = {
     root: `${constants_1.PREFIX}-profile-root`,
     title: `${constants_1.PREFIX}-profile-title`,
@@ -27,11 +24,11 @@ const classes = {
     changeCover: `${constants_1.PREFIX}-profile-change-cover`,
     publicInfo: `${constants_1.PREFIX}-profile-public-info`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ProfileRoot'
 })(() => ({}));
-const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
+const DrawerRoot = (0, material_1.styled)(material_1.Drawer, {
     name: constants_1.PREFIX,
     slot: 'ProfileDrawerRoot'
 })(() => ({}));
@@ -86,6 +83,6 @@ function Profile(inProps) {
         setSCUser(Object.assign({}, scUser, { cover: cover }));
         onCompleteAction();
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
 }
 exports.default = Profile;

package/lib/cjs/components/PlatformWidget/PlatformWidget.js

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -14,7 +13,6 @@ const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
 const logo_1 = tslib_1.__importDefault(require("../../assets/logo"));
-const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -34,7 +32,7 @@ const classes = {
     btnPreviousStep: `${constants_1.PREFIX}-btn-previous-step`,
     btnNextStep: `${constants_1.PREFIX}-btn-next-step`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(({ theme }) => ({
@@ -296,7 +294,7 @@ function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */

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

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const constants_1 = require("./constants");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     title: `${constants_1.PREFIX}-skeleton-title`,
@@ -14,7 +12,7 @@ const classes = {
     actions: `${constants_1.PREFIX}-skeleton-actions`,
     tutorial: `${constants_1.PREFIX}-skeleton-tutorial`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -39,6 +37,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function PlatformWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }
 exports.default = PlatformWidgetSkeleton;

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/PollSnippet.js

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -21,7 +20,7 @@ const classes = {
     title: `${constants_1.PREFIX}-title`,
     activityAt: `${constants_1.PREFIX}-activity-at`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'PollSnippetRoot'
 })(() => ({}));

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/Skeleton.js

@@ -3,14 +3,12 @@ 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 BaseItem_1 = tslib_1.__importDefault(require("../../../shared/BaseItem"));
 const PREFIX = 'SCPollSnippetSkeleton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
+const Root = (0, material_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Poll Snippet Skeleton component. Learn about the available props and the CSS API.
 
@@ -33,6 +31,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
  */
 function PollSnippetSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
 }
 exports.default = PollSnippetSkeleton;

package/lib/cjs/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -30,11 +28,11 @@ const classes = {
     endMessage: `${constants_1.PREFIX}-end-message`,
     pollSnippet: `${constants_1.PREFIX}-poll-snippet`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -164,7 +162,7 @@ function PollSuggestionWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.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.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.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)(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, 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.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.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.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.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)(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, 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.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = PollSuggestionWidget;

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

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
 const PollSnippet_1 = require("./PollSnippet");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function PollSuggestionWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120 }), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120 }), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
 }
 exports.default = PollSuggestionWidgetSkeleton;