@selfcommunity/react-ui 0.11.0-mui7.16 → 0.11.0-mui7.18

package/lib/cjs/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
@@ -13,13 +12,12 @@ const stripe_js_1 = require("@stripe/stripe-js");
 const material_1 = require("@mui/material");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const payment_1 = require("../../utils/payment");
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     address: `${constants_1.PREFIX}-loading`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({
@@ -138,6 +136,6 @@ function UserAddPaymentMethodForm(inProps) {
                                 }, options: {
                                     mode: 'billing',
                                     defaultValues: addressState
-                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && (0, jsx_runtime_1.jsx)("div", { children: errorMessage })] })) })));
+                                } }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && (0, jsx_runtime_1.jsx)("div", { children: errorMessage })] })) })));
 }
 exports.default = UserAddPaymentMethodForm;

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

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

package/lib/cjs/components/UserBillingInfo/UserBillingInfo.js

@@ -14,7 +14,6 @@ const reducer_1 = require("./reducer");
 const Country_1 = require("../../constants/Country");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 // import {getCountryOption} from '../../utils/address';
 const react_core_1 = require("@selfcommunity/react-core");
@@ -446,7 +445,7 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.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) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.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) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
                                         const { key } = props, rest = tslib_1.__rest(props, ["key"]);
                                         return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [(0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), slotProps: {
@@ -455,22 +454,22 @@ const UserBillingInfo = (inProps, ref) => {
                                             })),
                                             htmlInput: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
                                              })
-                                        } }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: {
+                                        } }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }) })))
                                         }
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "person" }) })))
                                         }
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
+                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }), onChange: handleSetBusiness })), label: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }) }, { children: intl.formatMessage({
                                                 id: 'component.billingInfo.accountBusiness',
                                                 defaultMessage: 'component.billingInfo.accountBusiness'
-                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 && Billing_1.VAT_EXAMPLE[state.address_country.code]
+                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 && Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.requiredFormat',
                                                             defaultMessage: 'component.billingInfo.requiredFormat'
@@ -481,12 +480,12 @@ const UserBillingInfo = (inProps, ref) => {
                                                         input: {
                                                             endAdornment: state.taxIdVerificationStatus !== null && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
                                                         }
-                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.COUNTRY_CODES.IT
+                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.COUNTRY_CODES.IT
+                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
@@ -496,6 +495,6 @@ const UserBillingInfo = (inProps, ref) => {
                                                             type: 'email',
                                                             startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })))
                                                         }
-                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
+                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
 };
 exports.default = (0, react_1.forwardRef)(UserBillingInfo);

package/lib/cjs/components/UserChangeAddressDialog/UserChangeAddressDialog.js

@@ -11,7 +11,6 @@ const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const react_intl_1 = require("react-intl");
-const lab_1 = require("@mui/lab");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const stripe_js_1 = require("@stripe/stripe-js");
 const payment_1 = require("../../utils/payment");
@@ -77,7 +76,7 @@ function UserChangeAddressDialog(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
                     mode: 'billing',
                     defaultValues: addressState
                 } }) })) })));

package/lib/cjs/components/UserProfileBlocked/UserProfileBlocked.js

@@ -8,7 +8,6 @@ const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -79,6 +78,6 @@ function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }
 exports.default = UserProfileBlocked;

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

@@ -12,7 +12,6 @@ const utils_1 = require("@selfcommunity/utils");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
 const PasswordTextField_1 = tslib_1.__importDefault(require("../../../shared/PasswordTextField"));
 const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailTextField"));
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -170,6 +169,6 @@ function AccountCredentials(props) {
                                 }, transformOrigin: {
                                     vertical: 'center',
                                     horizontal: 'right'
-                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.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 })] })), (0, jsx_runtime_1.jsx)(lab_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
+                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.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 })] })), (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }
 exports.default = AccountCredentials;

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

@@ -18,9 +18,8 @@ const types_1 = require("../../../types");
 const MetadataField_1 = tslib_1.__importDefault(require("../../../shared/MetadataField"));
 const Errors_1 = require("../../../constants/Errors");
 const date_fns_1 = require("date-fns");
-const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
-const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
-const lab_1 = require("@mui/lab");
+const it_1 = require("date-fns/locale/it");
+const en_US_1 = require("date-fns/locale/en-US");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -159,7 +158,7 @@ function PublicInfo(props) {
             case types_1.SCUserProfileFields.DATE_JOINED:
                 return null;
             case types_1.SCUserProfileFields.DATE_OF_BIRTH:
-                return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
+                return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.it : en_US_1.enUS }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${(0, utils_1.camelCase)(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
                         }), defaultValue: user[field] ? (0, date_fns_1.parseISO)(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
@@ -233,6 +232,6 @@ function PublicInfo(props) {
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
                 return renderField(field);
-            }), (0, jsx_runtime_1.jsx)(lab_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
+            }), (0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
 }
 exports.default = PublicInfo;

package/lib/cjs/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/cjs/components/VoteAudienceButton/VoteAudienceButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -21,7 +20,7 @@ const classes = {
     dialogTabs: `${PREFIX}-dialog-tabs`,
     dialogVoteBadge: `${PREFIX}-dialog-vote-badge`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -69,10 +68,10 @@ function VoteAudienceButton(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // HANDLERS
-    const handleOpen = (_event) => {
+    const handleOpen = () => {
         setOpen(true);
     };
-    const handleClose = (_event) => {
+    const handleClose = () => {
         setOpen(false);
     };
     const handleChangeTab = (_event, newValue) => {
@@ -105,7 +104,7 @@ function VoteAudienceButton(inProps) {
     const audienceIcon = (0, react_1.useMemo)(() => {
         if (reactions.default && !isLoading && !error) {
             return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
-                    contributionReactionsCount.slice(0, 3).map((count, _i) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
+                    contributionReactionsCount.slice(0, 3).map((count) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
         }
         return scUserContext.user && contributionVoted ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" });
     }, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);

package/lib/cjs/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/cjs/components/VoteButton/VoteButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -19,7 +18,7 @@ const classes = {
     reactionList: `${PREFIX}-reaction-list`,
     reaction: `${PREFIX}-reaction`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => [styles.root, styles.voted]
@@ -72,7 +71,7 @@ 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/cjs/shared/AddUsersButton/AddUsersButton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
@@ -129,7 +128,7 @@ function AddUsersButton(inProps) {
     const handleDelete = (0, react_1.useCallback)((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.contrastColor, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, classes.contrastColor, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
                                     input: Object.assign({}, params.InputProps)
                                 } }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);

package/lib/cjs/shared/ConfirmDialog/ConfirmDialog.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const PREFIX = 'SCConfirmDialog';
@@ -38,6 +37,6 @@ function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && ((0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, Object.assign({ component: "div" }, { children: content })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClose }, { children: btnCancel || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return ((0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: title || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && ((0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, Object.assign({ component: "div" }, { children: content })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleClose }, { children: btnCancel || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }
 exports.default = ConfirmDialog;

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

@@ -4,7 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const lab_1 = require("@mui/lab");
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -48,7 +47,7 @@ function ChangeUserStatus(props) {
             });
         });
     }, [course, user, setLoading, setValue]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                     padding: 0,
                     ':hover': {
                         backgroundColor: 'unset'

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js

@@ -6,7 +6,6 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
 const RowSkeleton_1 = tslib_1.__importDefault(require("./RowSkeleton"));
-const lab_1 = require("@mui/lab");
 const types_1 = require("@selfcommunity/types");
 const constants_1 = require("./constants");
 const EmptyStatus_1 = tslib_1.__importDefault(require("../EmptyStatus"));
@@ -142,7 +141,7 @@ function CourseUsersTable(inProps) {
                 }), slotProps: {
                     input: {
                         startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))),
-                        endAdornment: value.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })), (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) }))] }))) : undefined
+                        endAdornment: value.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) })), (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })) }))] }))) : undefined
                     }
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: headerCells.map((cell, i, array) => {
                                     if (i === array.length - 1) {
@@ -152,6 +151,6 @@ function CourseUsersTable(inProps) {
                                 }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
                                     users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === course_1.SCCourseUsersTableModeType.EDIT &&
                                                 user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
-                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && ((0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 exports.default = (0, react_1.memo)(CourseUsersTable);

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_1 = require("react");
@@ -46,6 +45,6 @@ function RemoveButton(props, ref) {
     (0, react_1.useImperativeHandle)(ref, () => ({
         handleManageUser: (userToRemove) => handleSubmit(userToRemove)
     }), [handleSubmit]);
-    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })));
 }
 exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RemoveButton));

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_1 = require("react");
@@ -74,6 +73,6 @@ function RequestButton(props, ref) {
     (0, react_1.useImperativeHandle)(ref, () => ({
         handleManageUser: (userToReject) => handleReject(userToReject)
     }), [handleReject]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
 }
 exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RequestButton));

package/lib/cjs/shared/HiddenPurchasableContent/HiddenPurchasableContent.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../../components/Widget"));
 const system_1 = require("@mui/system");
@@ -13,11 +12,11 @@ const classes = {
     root: `${PREFIX}-root`,
     header: `${PREFIX}-header`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     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.
 

package/lib/cjs/shared/Media/File/DisplayComponent.js

@@ -87,7 +87,7 @@ exports.default = (props) => {
         const overlay = images.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
         const isGif = images[0]['image_mimetype'] ? images[0]['image_mimetype'].includes('image/gif') : false;
         const isLandscape = images[0].image_height < images[0].image_width;
-        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ ref: ref, className: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: images.length > 1 })), onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", style: Object.assign({}, (images[0].image_thumbnail && images[0].image_thumbnail.color ? { backgroundColor: images[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ ref: ref, size: 12, className: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: images.length > 1 })), onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(images[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * images[0].image_height) / images[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(images[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = images.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
@@ -99,7 +99,7 @@ exports.default = (props) => {
         const overlay = !maxVisible || maxVisible > 5 || (images.length > maxVisible && [4, 5].includes(+maxVisible))
             ? renderCountOverlay(true)
             : renderOverlay(conditionalRender ? 3 : 4);
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 4, md: 4 }, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? images[1] : images[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(images[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 4, md: 4 }, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? images[2] : images[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(images[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { xs: 4, md: 4 }, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? images[3] : images[4])})` } }, { children: [overlay, renderTitle(images[3])] }))] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 4, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? images[1] : images[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(images[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 4, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? images[2] : images[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(images[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 4, className: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }), onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? images[3] : images[4])})` } }, { children: [overlay, renderTitle(images[3])] }))] })));
     };
     const renderOverlay = (id) => {
         if (!gallery) {

package/lib/cjs/shared/ScrollContainer/index.js

@@ -4,13 +4,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2");
+const react_custom_scrollbars_4_1 = require("react-custom-scrollbars-4");
 const ScrollContainer_1 = require("../../constants/ScrollContainer");
 const PREFIX = 'SCScrollContainer';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, material_1.styled)(react_custom_scrollbars_2_1.Scrollbars, {
+const Root = (0, material_1.styled)(react_custom_scrollbars_4_1.Scrollbars, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root]

package/lib/cjs/shared/VirtualizedScroller/VirtualizedScroller.d.ts

@@ -31,7 +31,7 @@ export interface VirtualizedScrollerProps extends VirtualizedScrollerCommonProps
     /**
      * The initial state for VirtualScroller
      */
-    initialScrollerState?: object;
+    initialScrollerState?: Record<string, unknown>;
     /**
      * Callback when virtual scroller state change
      * @default null