@selfcommunity/react-ui 0.11.0-mui7.17 → 0.11.0-mui7.19

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

@@ -39,5 +39,5 @@ export default function PaywallsSkeleton(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, Object.assign({ size: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }), index))) })) })));
 }

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

@@ -39,5 +39,5 @@ export default function PaywallsConfiguratorSkeleton(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, Object.assign({ size: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/PdfPreviewDialog/PdfPreviewDialog.js

@@ -58,5 +58,5 @@ export default function PdfPreviewDialog(inProps) {
     }
     return (_jsxs(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
             transition: Transition
-        }, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [_jsx(AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: _jsxs(Toolbar, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && (_jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: _jsx(Icon, { children: "download" }) }))), _jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: _jsx(Icon, { children: "close" }) }))] }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.content }, { children: _jsx(Grid, Object.assign({ justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+        }, DialogContentProps: { sx: { overflow: 'hidden' } } }, rest, { children: [_jsx(AppBar, Object.assign({ sx: { position: 'fixed', top: 0 } }, { children: _jsxs(Toolbar, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "div", sx: { flexGrow: 1 } }, { children: title })), pdfUrl && (_jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: handleDownload, "aria-label": "close" }, { children: _jsx(Icon, { children: "download" }) }))), _jsx(IconButton, Object.assign({ edge: "end", color: "inherit", onClick: onClose, "aria-label": "close", sx: { ml: 2 } }, { children: _jsx(Icon, { children: "close" }) }))] }) })), _jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.content }, { children: _jsx(Grid, Object.assign({ size: 12, justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
 }

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

@@ -34,5 +34,5 @@ const Root = styled(Widget, {
  *
  */
 export default function PlatformWidgetSkeleton(props) {
-    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] })), _jsx(Grid, Object.assign({ justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ size: 12, className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ size: 12, className: classes.actions }, { children: [_jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 }), _jsx(Skeleton, { animation: "wave", height: 35, width: 110 })] })), _jsx(Grid, Object.assign({ size: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }

package/lib/esm/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -151,7 +151,7 @@ export default function PrivateMessageComponent(inProps) {
      * Renders snippets section
      */
     function renderSnippets() {
-        return (_jsx(Grid, Object.assign({ size: { md: 5 }, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
+        return (_jsx(Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
                     onSnippetClick: handleThreadOpening,
                     onNewMessageClick: handleOpenNewMessage,
                     onDeleteConfirm: handleDeleteThread
@@ -161,7 +161,7 @@ export default function PrivateMessageComponent(inProps) {
      * Renders thread section
      */
     function renderThread() {
-        return (_jsx(Grid, Object.assign({ size: { md: 7 }, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
+        return (_jsx(Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)

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

@@ -39,5 +39,5 @@ export default function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%", className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ size: { md: 5 }, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ size: { md: 7 }, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
+    return (_jsxs(Root, Object.assign({ container: true, width: "100%", className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
 }

package/lib/esm/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -1,17 +1,15 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { loadStripe } from '@stripe/stripe-js';
-import { Button, Paper, Stack, Typography } from '@mui/material';
+import { Button, Paper, Stack, styled, Typography } from '@mui/material';
 import { AddressElement, PaymentElement, useElements } from '@stripe/react-stripe-js';
 import { getDefaultLocale } from '../../utils/payment';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 const classes = {
     root: `${PREFIX}-root`,
@@ -136,5 +134,5 @@ export default function UserAddPaymentMethodForm(inProps) {
                                 }, options: {
                                     mode: 'billing',
                                     defaultValues: addressState
-                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
+                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
 }

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

@@ -5,5 +5,5 @@ export default function UserBillingInfoSkeleton(props) {
     if (props.mode === UserBillingInfoMode.READ) {
         return (_jsxs(Box, { children: [_jsx(Skeleton, { variant: "rectangular", height: 15, width: 200, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 250, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 220, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 190, sx: { mb: 2 } })] }));
     }
-    return (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { sm: 6 }, justifyContent: "center" }, { children: _jsx(Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
+    return (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 }, justifyContent: "center" }, { children: _jsx(Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
 }

package/lib/esm/components/UserBillingInfo/UserBillingInfo.js

@@ -12,7 +12,6 @@ import { reducer, getInitialState, actionTypes } from './reducer';
 import { countries, COUNTRY_CODES } from '../../constants/Country';
 import UserBillingInfoSkeleton from './Skeleton';
 import Grow from '@mui/material/Grow';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 // import {getCountryOption} from '../../utils/address';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
@@ -444,7 +443,7 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: 'body1' }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: 'body1' }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
                                         const { key } = props, rest = __rest(props, ["key"]);
                                         return (_jsxs(Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [_jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`, alt: "" }), option.label, " (", option.code, ")"] }), key));
                                     }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), slotProps: {
@@ -453,22 +452,22 @@ const UserBillingInfo = (inProps, ref) => {
                                             })),
                                             htmlInput: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
                                              })
-                                        } }))) }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_state", name: "address_state", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_city", name: "address_city", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, slotProps: {
+                                        } }))) }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_state", name: "address_state", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_city", name: "address_city", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, slotProps: {
                                         input: {
                                             startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "public" }) })))
                                         }
-                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "phone", name: "phone", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, slotProps: {
+                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "phone", name: "phone", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, slotProps: {
                                         input: {
                                             startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "person" }) })))
                                         }
-                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(FormGroup, { children: _jsx(FormControlLabel, { disabled: Boolean(disableButtons), control: _jsx(Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: classNames({
+                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(FormGroup, { children: _jsx(FormControlLabel, { disabled: Boolean(disableButtons), control: _jsx(Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: classNames({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }), onChange: handleSetBusiness })), label: _jsx("span", Object.assign({ className: classNames({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }) }, { children: intl.formatMessage({
                                                 id: 'component.billingInfo.accountBusiness',
                                                 defaultMessage: 'component.billingInfo.accountBusiness'
-                                            }) })) }) }) })), state.isBusiness && (_jsx(Grow, Object.assign({ in: state.isBusiness }, { children: _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && VAT_EXAMPLE[state.address_country.code]
+                                            }) })) }) }) })), state.isBusiness && (_jsx(Grow, Object.assign({ in: state.isBusiness }, { children: _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && VAT_EXAMPLE[state.address_country.code]
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.requiredFormat',
                                                             defaultMessage: 'component.billingInfo.requiredFormat'
@@ -479,12 +478,12 @@ const UserBillingInfo = (inProps, ref) => {
                                                         input: {
                                                             endAdornment: state.taxIdVerificationStatus !== null && (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? (_jsx(Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
                                                         }
-                                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === COUNTRY_CODES.IT
+                                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
                                                         })
-                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === COUNTRY_CODES.IT
+                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
@@ -494,6 +493,6 @@ const UserBillingInfo = (inProps, ref) => {
                                                             type: 'email',
                                                             startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "email" }) })))
                                                         }
-                                                    }, fullWidth: true }) }))] })) })) }))), state.error && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Typography, Object.assign({ align: "left" }, { children: [_jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
+                                                    }, fullWidth: true }) }))] })) })) }))), state.error && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Typography, Object.assign({ align: "left" }, { children: [_jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
 };
 export default forwardRef(UserBillingInfo);

package/lib/esm/components/UserChangeAddressDialog/UserChangeAddressDialog.js

@@ -9,7 +9,6 @@ import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 import { AddressElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { getDefaultAppearanceStyle, getDefaultLocale } from '../../utils/payment';
@@ -75,7 +74,7 @@ export default function UserChangeAddressDialog(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), _jsx(LoadingButton, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: _jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(AddressElement, { onChange: handleChangeAddress, options: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), _jsx(Button, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: _jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(AddressElement, { onChange: handleChangeAddress, options: {
                     mode: 'billing',
                     defaultValues: addressState
                 } }) })) })));

package/lib/esm/components/UserProfileBlocked/UserProfileBlocked.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box, Divider, Typography, styled } from '@mui/material';
+import { Box, Button, Divider, Typography, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useSCFetchUser, useSCFetchUserBlockedBy, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
@@ -77,5 +76,5 @@ export default function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Divider, {}), !isMe && blockedBy && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Divider, {}), !isMe && blockedBy && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), _jsx(Button, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/AccountCredentials.js

@@ -10,7 +10,6 @@ import { Logger } from '@selfcommunity/utils';
 import BaseDialog from '../../../shared/BaseDialog';
 import PasswordTextField from '../../../shared/PasswordTextField';
 import EmailTextField from '../../../shared/EmailTextField';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
@@ -168,5 +167,5 @@ export default function AccountCredentials(props) {
                                 }, transformOrigin: {
                                     vertical: 'center',
                                     horizontal: 'right'
-                                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), _jsx(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), _jsx(LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
+                                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), _jsx(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), _jsx(Button, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme, Icon, styled } from '@mui/material';
+import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme, Icon, styled, Button } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { camelCase, Logger } from '@selfcommunity/utils';
@@ -16,9 +16,8 @@ import { SCUserProfileFields } from '../../../types';
 import MetadataField from '../../../shared/MetadataField';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { format, isBefore, isValid, parseISO, startOfHour } from 'date-fns';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
-import { LoadingButton } from '@mui/lab';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import { useSnackbar } from 'notistack';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
@@ -157,7 +156,7 @@ export default function PublicInfo(props) {
             case SCUserProfileFields.DATE_JOINED:
                 return null;
             case SCUserProfileFields.DATE_OF_BIRTH:
-                return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: _jsx(DatePicker, { label: intl.formatMessage({
+                return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS }, { children: _jsx(DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${camelCase(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
                         }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
@@ -231,5 +230,5 @@ export default function PublicInfo(props) {
     }
     return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
                 return renderField(field);
-            }), _jsx(LoadingButton, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: _jsx(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
+            }), _jsx(Button, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: _jsx(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
 }

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

@@ -1,6 +1,6 @@
-import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-export interface VoteAudienceButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+import { ButtonProps } from '@mui/material';
+export interface VoteAudienceButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/esm/components/VoteAudienceButton/VoteAudienceButton.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { Avatar, Box, List, ListItem, Tab, Tabs, Typography, Icon, styled } from '@mui/material';
+import { Avatar, Box, List, ListItem, Tab, Tabs, Typography, Icon, styled, Button } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useSCFetchVote, useSCUser } from '@selfcommunity/react-core';
 import BaseDialog from '../../shared/BaseDialog';
@@ -19,7 +18,7 @@ const classes = {
     dialogTabs: `${PREFIX}-dialog-tabs`,
     dialogVoteBadge: `${PREFIX}-dialog-vote-badge`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -67,10 +66,10 @@ export default function VoteAudienceButton(inProps) {
     // CONTEXT
     const scUserContext = useSCUser();
     // HANDLERS
-    const handleOpen = (_event) => {
+    const handleOpen = () => {
         setOpen(true);
     };
-    const handleClose = (_event) => {
+    const handleClose = () => {
         setOpen(false);
     };
     const handleChangeTab = (_event, newValue) => {
@@ -103,7 +102,7 @@ export default function VoteAudienceButton(inProps) {
     const audienceIcon = useMemo(() => {
         if (reactions.default && !isLoading && !error) {
             return (_jsx(Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
-                    contributionReactionsCount.slice(0, 3).map((count, _i) => (_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
+                    contributionReactionsCount.slice(0, 3).map((count) => (_jsx(Icon, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
         }
         return scUserContext.user && contributionVoted ? _jsx(Icon, { children: "thumb_up" }) : _jsx(Icon, { children: "thumb_up_off_alt" });
     }, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);

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

@@ -1,6 +1,6 @@
-import { LoadingButtonProps } from '@mui/lab';
 import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
-export interface VoteButtonProps extends Pick<LoadingButtonProps, Exclude<keyof LoadingButtonProps, 'onClick' | 'disabled' | 'loading'>> {
+import { ButtonProps } from '@mui/material';
+export interface VoteButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled' | 'loading'>> {
     /**
      * Id of the contribution object to vote
      * @default null

package/lib/esm/components/VoteButton/VoteButton.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
-import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { IconButton, Paper, Popper, Tooltip, useMediaQuery, useTheme, styled, Icon } from '@mui/material';
+import { IconButton, Paper, Popper, Tooltip, useMediaQuery, useTheme, styled, Icon, Button } from '@mui/material';
 import { UserUtils, useSCContext, useSCFetchVote, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import { useSnackbar } from 'notistack';
@@ -17,7 +16,7 @@ const classes = {
     reactionList: `${PREFIX}-reaction-list`,
     reaction: `${PREFIX}-reaction`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -70,7 +69,7 @@ export default function VoteButton(inProps) {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
     };
-    const handleMouseLeave = (_event) => {
+    const handleMouseLeave = () => {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
     };

package/lib/esm/shared/AddUsersButton/AddUsersButton.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
 import { Autocomplete, Avatar, Button, Chip, Stack, styled, TextField, Typography, useThemeProps } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -127,7 +126,7 @@ function AddUsersButton(inProps) {
     const handleDelete = useCallback((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, classes.contrastColor, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, classes.contrastColor, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(Button, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
                                     input: Object.assign({}, params.InputProps)
                                 } }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);

package/lib/esm/shared/ConfirmDialog/ConfirmDialog.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
 import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCConfirmDialog';
@@ -36,5 +35,5 @@ export default function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MenuItem, Select, Typography } from '@mui/material';
+import { Button, MenuItem, Select, Typography } from '@mui/material';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
 import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -46,7 +45,7 @@ function ChangeUserStatus(props) {
             });
         });
     }, [course, user, setLoading, setValue]);
-    return (_jsx(Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+    return (_jsx(Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                     padding: 0,
                     ':hover': {
                         backgroundColor: 'unset'

package/lib/esm/shared/CourseUsersTable/CourseUsersTable.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
+import { Avatar, Box, Button, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import RowSkeleton from './RowSkeleton';
-import { LoadingButton } from '@mui/lab';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
 import { PREFIX } from './constants';
 import EmptyStatus from '../EmptyStatus';
@@ -139,7 +138,7 @@ function CourseUsersTable(inProps) {
                 }), slotProps: {
                     input: {
                         startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
-                        endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
+                        endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Button, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
                     }
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
@@ -149,6 +148,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 export default memo(CourseUsersTable);

package/lib/esm/shared/CourseUsersTable/RemoveButton.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Icon } from '@mui/material';
+import { Button, Icon } from '@mui/material';
 import { CourseService } from '@selfcommunity/api-services';
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -43,6 +42,6 @@ function RemoveButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToRemove) => handleSubmit(userToRemove)
     }), [handleSubmit]);
-    return (_jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
+    return (_jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
 }
 export default memo(forwardRef(RemoveButton));

package/lib/esm/shared/CourseUsersTable/RequestButton.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Icon, Stack } from '@mui/material';
+import { Button, Icon, Stack } from '@mui/material';
 import { CourseService } from '@selfcommunity/api-services';
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -71,6 +70,6 @@ function RequestButton(props, ref) {
     useImperativeHandle(ref, () => ({
         handleManageUser: (userToReject) => handleReject(userToReject)
     }), [handleReject]);
-    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [_jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: _jsx(Icon, { children: "check" }) })), _jsx(Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: _jsx(Icon, { children: "close" }) }))] })));
 }
 export default memo(forwardRef(RequestButton));

package/lib/esm/shared/HiddenPurchasableContent/HiddenPurchasableContent.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import Widget from '../../components/Widget';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -14,8 +13,8 @@ const classes = {
 const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS HiddenPurchasableContent component. Learn about the available props and the CSS API.