@selfcommunity/react-ui 0.11.0-mui7.29 → 0.11.0-react-17.0.1.2

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { Alert, styled, Icon, Button } from '@mui/material';
+import { Alert, styled, Icon } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -10,6 +10,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { GroupService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { defineMessages, useIntl } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
 const messages = defineMessages({
     errorLoadImage: {
         id: 'ui.changeGroupPicture.alert',
@@ -19,7 +20,7 @@ const messages = defineMessages({
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/esm/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -30,7 +30,7 @@ export default function ChangePictureDialog(props) {
     const scUserContext = useContext(SCUserContext);
     const scContext = useContext(SCContext);
     //STATE
-    const [, setFile] = useState(scUserContext.user['avatar']);
+    const [file, setFile] = useState(scUserContext.user['avatar']);
     const [error, setError] = useState(false);
     const [alert, setAlert] = useState(false);
     const [primary, setPrimary] = useState(null);
@@ -175,7 +175,11 @@ export default function ChangePictureDialog(props) {
      * Renders root object
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.dialogRoot, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.upload }, { children: [alert ? (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Button, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : _jsx(Icon, { children: "folder_open" }) }, { children: loading ? (_jsx(CircularProgress, { size: 15 })) : (_jsx(_Fragment, { children: error ? (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), _jsx(Typography, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
-                                li: (chunks) => _jsx("li", { children: chunks }, "ui.changePicture.info.li"),
-                                ul: (chunks) => _jsx("ul", { children: chunks }, "ui.changePicture.info.ul")
-                            } }) }))] })), _jsx(ImageList, Object.assign({ cols: 3, rowHeight: "auto", id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => (_jsx(Box, Object.assign({ className: classes.imageItem }, { children: _jsxs(ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [_jsx("img", { src: avatar.avatar, loading: "lazy", alt: "img" }), _jsx(ImageListItemBar, { position: "top", actionIcon: _jsx(IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && (_jsx(ConfirmDialog, { open: openDeleteAvatarDialog, title: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                li: (chunks) => _jsx("li", { children: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                ul: (chunks) => _jsx("ul", { children: chunks })
+                            } }) }))] })), _jsx(ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => (_jsx(Box, Object.assign({ className: classes.imageItem }, { children: _jsxs(ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [_jsx("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), _jsx(ImageListItemBar, { position: "top", actionIcon: _jsx(IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && (_jsx(ConfirmDialog, { open: openDeleteAvatarDialog, title: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
 }

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid, Stack, Skeleton, styled } from '@mui/material';
+import { Box, Grid, Hidden, Stack, useTheme, Skeleton, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import classNames from 'classnames';
 const classes = {
@@ -78,5 +78,7 @@ const Root = styled(Grid, {
  */
 export default function CheckoutSkeleton(inProps) {
     const { className = {} } = inProps, rest = __rest(inProps, ["className"]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%" }, rest, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: "100%" }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.right, classes.header) }, { children: _jsxs(Stack, Object.assign({ sx: { display: { xs: 'none', md: 'flex' } }, direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: "100%" })] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
+    // HOOKS
+    const theme = useTheme();
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true }, rest, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: '100%' }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.right, classes.header) }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsxs(Stack, Object.assign({ direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: '100%' })] })) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
 }

package/lib/esm/components/CheckoutReturnDialog/CheckoutReturnDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Button, CircularProgress, Dialog, DialogContent, DialogTitle, Slide, Stack, styled, Typography } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -27,9 +27,9 @@ const Root = styled(Dialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = function NoTransition(props) {
-    return _jsx(React.Fragment, { children: props.children });
-};
+const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
+});
 export default function CheckoutReturnDialog(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -40,7 +40,7 @@ export default function CheckoutReturnDialog(inProps) {
     // STATE
     const [loading, setLoading] = useState(true);
     const [contentType, setContentType] = useState(null);
-    const [, setContentId] = useState(null);
+    const [contentId, setContentId] = useState(null);
     const [content, setContent] = useState(null);
     const [paymentPrice, setPaymentPrice] = useState(null);
     // HOOKS
@@ -136,25 +136,25 @@ export default function CheckoutReturnDialog(inProps) {
         if (contentType === SCContentType.EVENT) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.event", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.event", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.event", defaultMessage: "ui.checkoutReturnDialog.buy.event" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.event", defaultMessage: "ui.checkoutReturnDialog.buy.event" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
         }
         else if (contentType === SCContentType.CATEGORY) {
-            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
         }
         else if (contentType === SCContentType.COURSE) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.course", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.course", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.course", defaultMessage: "ui.checkoutReturnDialog.buy.course" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.course", defaultMessage: "ui.checkoutReturnDialog.buy.course" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
         }
         else if (contentType === SCContentType.GROUP) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.group", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.group", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.group", defaultMessage: "ui.checkoutReturnDialog.buy.group" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.group.button", defaultMessage: "ui.checkoutReturnDialog.group.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.group", defaultMessage: "ui.checkoutReturnDialog.buy.group" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.group.button", defaultMessage: "ui.checkoutReturnDialog.group.button" }) }))] }));
         }
         else if (contentType === SCContentType.COMMUNITY) {
             footer = (_jsxs(_Fragment, { children: [paymentPrice && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.community", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.community", values: {
                                         frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                                    } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.community", defaultMessage: "ui.checkoutReturnDialog.buy.community" })) }))] })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.community.button", defaultMessage: "ui.checkoutReturnDialog.community.button" }) }))] }));
+                                    } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.community", defaultMessage: "ui.checkoutReturnDialog.buy.community" })) }))] })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.community.button", defaultMessage: "ui.checkoutReturnDialog.community.button" }) }))] }));
         }
         return (_jsxs(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [_jsx(Grow, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: _jsx("img", { src: SuccessPlaceholder, className: classes.img, alt: intl.formatMessage({
                             id: 'ui.checkoutReturnDialog.buy',
@@ -164,5 +164,5 @@ export default function CheckoutReturnDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ maxWidth: "sm", fullWidth: true, scroll: "paper", open: true }, (disableInitialTransition ? { slots: { transition: NoTransition } } : { slots: { transition: Transition } }), { className: classNames(classes.root, className) }, rest, { children: [_jsx(DialogTitle, { children: renderTitle() }), _jsx(DialogContent, { children: loading ? _jsx(CircularProgress, {}) : renderContent() })] })));
+    return (_jsxs(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: [_jsx(DialogTitle, { children: renderTitle() }), _jsx(DialogContent, { children: loading ? _jsx(CircularProgress, {}) : renderContent() })] })));
 }

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled, Button } from '@mui/material';
+import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled } from '@mui/material';
 import { useSCUser } from '@selfcommunity/react-core';
 import Editor from '../Editor';
 import classNames from 'classnames';
+import { LoadingButton } from '@mui/lab';
 import BaseItem from '../../shared/BaseItem';
 import UserAvatar from '../../shared/UserAvatar';
 import { useThemeProps } from '@mui/system';
@@ -74,7 +75,7 @@ export default function CommentObjectReply(inProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // REFS
-    let editor = useRef(null);
+    let editor = useRef();
     /**
      * When CommentObjectReply is mount
      * if autoFocus === true focus on editor
@@ -130,5 +131,5 @@ export default function CommentObjectReply(inProps) {
     // RENDER
     return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: showAvatar &&
             (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && _jsx(PreviewComponent, { value: media, onChange: handleChangeMedias, className: classes.media }), _jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
-                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

package/lib/esm/components/CommentsFeedObject/CommentsFeedObject.js

@@ -78,7 +78,7 @@ export default function CommentsFeedObject(inProps) {
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
     const commentObjId = commentObj ? commentObj.id : null;
     // REFS
-    const commentsContainerRef = useRef(null);
+    const commentsContainerRef = useRef();
     /**
      * Total number of comments
      */
@@ -88,7 +88,7 @@ export default function CommentsFeedObject(inProps) {
      */
     const renderTitle = useMemo(() => () => {
         if (showTitle) {
-            return (_jsx(Typography, Object.assign({ variant: "h6", gutterBottom: true, color: "inherit" }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
+            return (_jsx(Typography, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
         }
         return null;
     }, [total, isLoading]);

package/lib/esm/components/CommunityPaywalls/CommunityPaywalls.js

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { styled, Grid } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { CommunityApiClient } from '@selfcommunity/api-services';
@@ -18,7 +19,7 @@ const classes = {
 const Root = styled(Grid, {
     slot: 'Root',
     name: PREFIX
-})(() => ({}));
+})(({ theme }) => ({}));
 export default function CommunityPaywalls(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -61,5 +62,5 @@ export default function CommunityPaywalls(inProps) {
     if (loading) {
         return _jsx(CommunityPaywallSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%", spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 4 } }, { children: _jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ xs: 12, sm: 12, md: 4 }, { children: _jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
 }

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

@@ -1,6 +1,6 @@
-import { GridProps } from '@mui/material';
 import { PaymentProductSkeletonProps } from '../PaymentProduct/Skeleton';
-export interface CommunityPaywallsSkeletonProps extends GridProps {
+import { Grid2Props } from '@mui/material/Unstable_Grid2';
+export interface CommunityPaywallsSkeletonProps extends Grid2Props {
     className?: string;
     PaymentProductSkeletonComponentProps?: PaymentProductSkeletonProps;
 }
@@ -24,4 +24,4 @@ export interface CommunityPaywallsSkeletonProps extends GridProps {
  |root|.SCCommunityPaywallSkeleton-skeleton-root|Styles applied to the root element.|
  *
  */
-export default function CommunityPaywallsSkeleton(inProps: CommunityPaywallsSkeletonProps): JSX.Element;
+export default function CommunityPaywallsSkeleton(inProps: any): JSX.Element;

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

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMediaQuery, useTheme, styled, Grid } from '@mui/material';
+import { useMediaQuery, useTheme, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import classNames from 'classnames';
 import PaymentProductSkeleton from '../PaymentProduct/Skeleton';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useThemeProps } from '@mui/system';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
@@ -45,5 +46,5 @@ export default function CommunityPaywallsSkeleton(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%", spacing: 4 }, rest, { children: [...Array(isMobile ? 2 : 3)].map((_product, index) => (_jsx(Grid, Object.assign({ size: 4 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ variant: "outlined" }, PaymentProductSkeletonComponentProps)) }), index))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 4 }, rest, { children: [...Array(isMobile ? 2 : 3)].map((product, index) => (_jsx(Grid, Object.assign({ xs: 4 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ variant: 'outlined' }, PaymentProductSkeletonComponentProps)) }), index))) })));
 }

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

@@ -5,9 +5,10 @@ import { SCContributionType, SCFeatureName, SCFeedTypologyType } from '@selfcomm
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, Icon, styled, useTheme, Button } from '@mui/material';
+import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, Icon, styled, useTheme } from '@mui/material';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POLL } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
+import LoadingButton from '@mui/lab/LoadingButton';
 import AudienceLayer from './Layer/AudienceLayer';
 import { iOS, isClientSideRendering, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
@@ -201,7 +202,7 @@ export default function Composer(inProps) {
     const [isLoading, setIsLoading] = useState(editMode);
     const [loadError, setLoadError] = useState(false);
     // REFS
-    const dialogRef = useRef(null);
+    const dialogRef = useRef();
     const unloadRef = useRef(false);
     const pointerStartY = useRef(null);
     // Create a ref for medias because of state update error on chunk upload
@@ -458,7 +459,7 @@ export default function Composer(inProps) {
         });
         mediasRef.current.medias = _medias;
     }, []);
-    const handleMediaTriggerClick = useCallback((mediaObjectType) => () => {
+    const handleMediaTriggerClick = useCallback((mediaObjectType) => (e) => {
         if (mediaObjectType.layerComponent) {
             handleAddLayer({
                 name: mediaObjectType.name,
@@ -692,7 +693,7 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ ref: dialogRef, slots: { backdrop: BackdropScrollDisabled, transition: DialogTransition }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(Button, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? (_jsx(FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : (_jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, recipients, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+    return (_jsxs(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, slots: { backdrop: BackdropScrollDisabled }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? (_jsx(FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : (_jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, recipients, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
                                     if (mediaObjectType.previewComponent) {
                                         return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
                                     }

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

@@ -18,7 +18,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'ContentDiscussionRoot'
-})(() => ({}));
+})(({ theme }) => ({}));
 /**
  * Default post
  */
@@ -79,9 +79,7 @@ export default (props) => {
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && (_jsxs(Typography, Object.assign({ className: classes.generalError }, { children: [generalError && _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }), categoriesError && categoriesError, _jsx("br", {}), addressingError && addressingError] }))), _jsx(TextField, { className: classes.title, ref: titleRef, placeholder: intl.formatMessage({
                     id: 'ui.composer.content.discussion.title.label',
                     defaultMessage: 'ui.composer.content.discussion.title.label'
-                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, slotProps: {
-                    input: {
-                        endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
-                    }
+                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, onChange: handleChangeTitle, onKeyDown: handleKeyDownTitle, multiline: true, InputProps: {
+                    endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
                 }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), _jsx(Box, Object.assign({ sx: { [`& .${SCEDITOR_PREFIX}-content`]: { maxHeight: `${editorMaxHeight} !important` } } }, { children: _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html })) }))] })));
 };

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

@@ -18,14 +18,14 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'ContentLessonRoot'
-})(() => ({}));
+})(({ theme }) => ({}));
 export default (props) => {
     // PROPS
     const { className = null, value, error = {}, disabled = false, onChange, onMediaChange, EditorProps = {} } = props;
     const { error: generalError = null } = Object.assign({}, error);
     const mediaObjectTypes = [File, Link];
     const [medias, setMedias] = useState((value === null || value === void 0 ? void 0 : value.medias) || []);
-    const [openLink, setOpenLink] = useState(false);
+    const [openLink, setOpenLink] = useState();
     const linkInputRef = useRef(null);
     // HANDLERS
     const handleChangeHtml = useCallback((html) => {

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

@@ -7,15 +7,15 @@ import { ReactSortable } from 'react-sortablejs';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH } from '../../../../constants/Composer';
-import { it } from 'date-fns/locale/it';
-import { enUS } from 'date-fns/locale/en-US';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { parseISO } from 'date-fns';
 import { PREFIX } from '../../constants';
 const localeMap = {
-    en: it,
-    it: enUS
+    en: enLocale,
+    it: itLocale
 };
 const classes = {
     root: `${PREFIX}-content-poll-root`,
@@ -97,14 +97,10 @@ export default (inProps) => {
         minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && (_jsxs(Typography, Object.assign({ className: classes.generalError }, { children: [generalError && (_jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })), categoriesError && categoriesError, _jsx("br", {}), addressingError && addressingError] }))), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, slotProps: {
-                        input: {
-                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
-                        }
-                    } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, slotProps: {
-                            input: {
-                                startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),
-                                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Tooltip, Object.assign({ title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: _jsx(Icon, { children: "delete" }) })) }) })) })))
-                            }
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [(generalError || categoriesError || addressingError) && (_jsxs(Typography, Object.assign({ className: classes.generalError }, { children: [generalError && (_jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })), categoriesError && categoriesError, _jsx("br", {}), addressingError && addressingError] }))), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
+                        endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
+                    } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
+                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),
+                            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Tooltip, Object.assign({ title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: _jsx(Icon, { children: "delete" }) })) }) })) })))
                         } }, index))) })) })), _jsx(Box, Object.assign({ className: classes.choiceNew }, { children: _jsxs(Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [_jsx(Icon, { children: "add" }), _jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), _jsx(Divider, {}), _jsxs(FormGroup, Object.assign({ className: classes.metadata }, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: _jsx(DatePicker, { disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
 };

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

@@ -14,7 +14,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'ContentPostRoot'
-})(() => ({}));
+})(({ theme }) => ({}));
 /**
  * Default post
  */
@@ -32,7 +32,7 @@ export default (props) => {
     const { className = null, value = Object.assign({}, DEFAULT_POST), error = {}, disabled = false, onChange, EditorProps = {} } = props;
     const { categoriesError = null, addressingError = null, error: generalError = null } = Object.assign({}, error);
     // REF
-    const editorRef = useRef(null);
+    const editorRef = useRef();
     // EFFECTS
     useEffect(() => {
         editorRef && editorRef.current && editorRef.current.focus();

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
@@ -125,14 +125,12 @@ const AudienceLayer = React.forwardRef((props, ref) => {
     };
     return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsxs(Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [!taggingRequiredEnabled && (_jsx(Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: _jsx(Icon, { children: "public" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) })), eventsEnabled && (_jsx(Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_EVENT), value: AudienceTypes.AUDIENCE_EVENT, icon: _jsx(Icon, { children: "CalendarIcon" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && (_jsx(Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_GROUP), value: AudienceTypes.AUDIENCE_GROUP, icon: _jsx(Icon, { children: "groups" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), _jsx(Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_TAG), value: AudienceTypes.AUDIENCE_TAG, icon: _jsx(Icon, { children: "label" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) }), usersTaggingEnabled && (_jsx(Tab, { disabled: isAudienceTypeSelected(AudienceTypes.AUDIENCE_USERS), value: AudienceTypes.AUDIENCE_USERS, icon: _jsx(Icon, { children: "people_alt" }), label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.users", defaultMessage: "ui.composer.layer.audience.users" }) }))] })), _jsxs(Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && !taggingRequiredEnabled && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.layer.audience.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.layer.audience.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.layer.audience.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.layer.audience.tag.message" })), audience === AudienceTypes.AUDIENCE_USERS && (_jsx(FormattedMessage, { id: "ui.composer.layer.audience.users.message", defaultMessage: "ui.composer.layer.audience.users.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && (_jsx(Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
                             return value.map((option, index) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index }), { showDescription: true }), option.id));
-                        }, renderOption: (props, option, { inputValue }) => {
+                        }, renderOption: (props, option, { selected, inputValue }) => {
                             const matches = match(option.name, inputValue);
                             const parts = parse(option.name, matches);
                             return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, { showDescription: true, disposable: false, tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
                         }, renderInput: (params) => {
-                            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { slotProps: {
-                                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(_Fragment, { children: params.InputProps.endAdornment }) })
-                                } })));
+                            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(React.Fragment, { children: params.InputProps.endAdornment }) }) })));
                         } })), audience === AudienceTypes.AUDIENCE_USERS && _jsx(UserAutocomplete, { onChange: handleUsersChange, defaultValue: value }), audience === AudienceTypes.AUDIENCE_GROUP && _jsx(GroupAutocomplete, { onChange: handleGroupChange, defaultValue: value }), audience === AudienceTypes.AUDIENCE_EVENT && _jsx(EventAutocomplete, { onChange: handleEventChange, defaultValue: value })] }))] })));
 });
 export default AudienceLayer;

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

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Button, DialogTitle, IconButton, Typography, DialogContent, Icon, styled } from '@mui/material';
-import { LocalizationProvider, StaticDateTimePicker, DateTimePickerTabs, usePickerContext } from '@mui/x-date-pickers';
+import { LocalizationProvider, StaticDateTimePicker, DateTimePickerTabs } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { it } from 'date-fns/locale/it';
-import { enUS } from 'date-fns/locale/en-US';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
 import { useSCContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { format, parseISO } from 'date-fns';
@@ -29,7 +29,7 @@ const ScheduledLayer = React.forwardRef((props, ref) => {
     const { className, onClose, onSave, defaultValue = null } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
     //CONTEXT
     const scContext = useSCContext();
-    const locale = scContext.settings.locale.default === 'it' ? it : enUS;
+    const locale = scContext.settings.locale.default === 'it' ? itLocale : enLocale;
     // STATE
     const [scheduledAt, setScheduledAt] = useState(defaultValue ? (typeof defaultValue === 'string' ? parseISO(defaultValue) : defaultValue) : null);
     const handleUpdate = useCallback((value) => {
@@ -38,15 +38,15 @@ const ScheduledLayer = React.forwardRef((props, ref) => {
             onSave(value);
         }
     }, [onSave]);
-    const CustomToolbar = () => {
-        const { value } = usePickerContext();
+    const CustomToolbar = (props) => {
+        const { value } = props;
         if (!value)
             return null;
         const dayName = capitalize(format(value, 'EEEE', { locale }));
         const restOfDate = format(value, 'd MMMM yyyy • HH:mm', { locale });
         return _jsx(Typography, Object.assign({ variant: "h4" }, { children: `${dayName} ${restOfDate}` }));
     };
-    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.title", defaultMessage: "Programma la Pubblicazione" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: () => onSave(scheduledAt), disabled: !scheduledAt }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.submit", defaultMessage: "Attiva Programmazione" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ className: classes.message }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.message", defaultMessage: "ui.composer.audience.scheduled.message" }) })), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: locale }, { children: _jsx(StaticDateTimePicker, { className: classes.picker, disablePast: true, value: scheduledAt, onChange: setScheduledAt, onAccept: handleUpdate, slots: {
+    return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.title", defaultMessage: "Programma la Pubblicazione" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: () => onSave(scheduledAt), disabled: !scheduledAt }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.submit", defaultMessage: "Attiva Programmazione" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ className: classes.message }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.scheduled.message", defaultMessage: "ui.composer.audience.scheduled.message" }) })), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: locale }, { children: _jsx(StaticDateTimePicker, { className: classes.picker, disablePast: true, value: scheduledAt, onChange: (value) => setScheduledAt(value), onAccept: handleUpdate, slots: {
                                 toolbar: CustomToolbar,
                                 tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
                                 actionBar: () => null

package/lib/esm/components/ConsentSolution/ConsentSolution.js

@@ -122,6 +122,7 @@ export default function ConsentSolution(inProps) {
     const [loading, setLoading] = useState(true);
     const [loadingAck, setLoadingAck] = useState(false);
     const [rejected, setRejected] = useState(false);
+    const [dataPortability, setDataPortability] = useState(null);
     const [dataPortabilityChecked, setDataPortabilityChecked] = useState(false);
     const [loadingDeleteAccount, setLoadingDeleteAccount] = useState(false);
     // CONST
@@ -244,7 +245,7 @@ export default function ConsentSolution(inProps) {
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
         return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), _jsx(DialogContent, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: _jsx(Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: getDocumentBody(doc)
-                        } }) })), _jsxs(DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [_jsx(FormControlLabel, { className: classes.consentSwitch, control: _jsx(ConsentSolutionSwitch, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [_jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), _jsx("a", Object.assign({ onClick: () => setView(REJECTION_VIEW), className: classes.deleteAccountButton }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && (_jsx(Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
+                        } }) })), _jsxs(DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [_jsx(FormControlLabel, { className: classes.consentSwitch, control: _jsx(ConsentSolutionSwitch, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [_jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), _jsx("a", Object.assign({ onClick: () => setView(REJECTION_VIEW), className: classes.deleteAccountButton }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && (_jsx(Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? (_jsx(Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : (_jsx(Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
     };
     /**
      * Render document detail view
@@ -254,19 +255,13 @@ export default function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setView(ACCEPT_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(AccountDataPortability, { className: classes.dataPortability }), _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, {
-                                communityName,
-                                li: (chunks) => _jsx("li", { children: chunks }, "ui.consentSolution.deleteAccountDpSectionInfo.li.1")
-                            }) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), _jsx("br", {}), _jsx(Button, Object.assign({ size: "small", startIcon: _jsx(Icon, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: "contained", className: classes.confirmDeleteAccountButton, onClick: () => setView(CONFIRM_DELETE_ACCOUNT) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.logoutAccountButton, startIcon: _jsx(Icon, { children: "upload" }), onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
+        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(ACCEPT_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(AccountDataPortability, { className: classes.dataPortability }), _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => _jsx("li", { children: chunks }) }) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: _jsx(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), _jsx("br", {}), _jsx(Button, Object.assign({ size: "small", startIcon: _jsx(Icon, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(CONFIRM_DELETE_ACCOUNT) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), _jsx(Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: _jsx(Icon, { children: "upload" }), onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: "outlined", onClick: () => setView(REJECTION_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, {
-                                communityName,
-                                li: (chunks) => _jsx("li", { children: chunks }, "ui.consentSolution.deleteAccountDpSectionInfo.li.2")
-                            }) }), _jsx("br", {}), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: "outlined", onClick: () => setView(REJECTION_VIEW) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: "outlined", onClick: handleConfirmDeleteAccount }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
+        return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, Object.assign({ className: classNames(classes.title, classes.titleBack) }, { children: _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW), className: classes.backButton, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), _jsxs(DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), _jsx("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => _jsx("li", { children: chunks }) }) }), _jsx("br", {}), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(REJECTION_VIEW) }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), _jsx(Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: _jsx(FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
     };
     /**
      * If there's no authUserId, component is hidden.
@@ -300,7 +295,5 @@ export default function ConsentSolution(inProps) {
     /**
      * Renders root object
      */
-    return (_jsx(_Fragment, { children: open && (_jsx(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: classNames(classes.root, className), slots: {
-                transition: DialogTransition
-            }, maxWidth: "md", fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: "paper" }, rest, { children: content() }))) }));
+    return (_jsx(_Fragment, { children: open && (_jsx(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: classNames(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest, { children: content() }))) }));
 }