@selfcommunity/react-ui 0.11.0-alpha.99 → 0.11.0-mui7.13

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

@@ -15,4 +15,4 @@ export interface AppProps {
      */
     onCompleteAction: () => void;
 }
-export default function App(inProps: AppProps): JSX.Element;
+export default function App(inProps: AppProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,4 +10,4 @@ export interface AppearanceProps {
      */
     onCompleteAction: () => void;
 }
-export default function Appearance(inProps: AppearanceProps): JSX.Element;
+export default function Appearance(inProps: AppearanceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -53,8 +53,8 @@ const Root = styled(Box, {
 const DrawerRoot = styled(Drawer, {
     name: PREFIX,
     slot: 'AppearanceDrawerRoot',
-    overridesResolver: (props, styles) => styles.appearanceDrawerRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.appearanceDrawerRoot
+})(() => ({}));
 export default function Appearance(inProps) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     // PROPS
@@ -75,7 +75,7 @@ export default function Appearance(inProps) {
     // INTL
     const intl = useIntl();
     // HANDLERS
-    const handleTabChange = (event, newValue) => {
+    const handleTabChange = (_event, newValue) => {
         setTab(newValue);
         setData({});
     };
@@ -180,13 +180,17 @@ export default function Appearance(inProps) {
                                             .filter((item) => item.section === SCPreferenceSection.COLORS)
                                             .map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(Box, { children: _jsx(MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), _jsx(LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && (_jsx(_Fragment, { children: preferences
                                         .filter((item) => item.section === SCPreferenceSection.LOGO)
-                                        .map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, InputProps: {
-                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
-                                                        ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
-                                                        : 50 })))
-                                            }, error: Boolean(((_f = (_e = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length) > 50) }), _jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: ((_g = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _g === void 0 ? void 0 : _g.value) || '', name: "application_slogan2", onChange: handleChange, InputProps: {
-                                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_j = (_h = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.length)
-                                                        ? 150 - ((_k = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _k === void 0 ? void 0 : _k.value.length)
-                                                        : 150 })))
+                                        .map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, slotProps: {
+                                                input: {
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
+                                                            ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
+                                                            : 50 })))
+                                                }
+                                            }, error: Boolean(((_f = (_e = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length) > 50) }), _jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.sloganField)}`, margin: "normal", value: ((_g = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _g === void 0 ? void 0 : _g.value) || '', name: "application_slogan2", onChange: handleChange, slotProps: {
+                                                input: {
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_j = (_h = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.length)
+                                                            ? 150 - ((_k = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _k === void 0 ? void 0 : _k.value.length)
+                                                            : 150 })))
+                                                }
                                             }, error: Boolean(((_m = (_l = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 150) }), _jsx(LoadingButton, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
 }

package/lib/esm/components/OnBoardingWidget/Steps/Category/Category.d.ts

@@ -15,4 +15,4 @@ export interface CategoryProps {
      */
     handleCategoriesCreation?: () => void;
 }
-export default function Category(inProps: CategoryProps): JSX.Element;
+export default function Category(inProps: CategoryProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/OnBoardingWidget/Steps/Content/Content.d.ts

@@ -15,4 +15,4 @@ export interface ContentProps {
      */
     handleContentCreation?: () => void;
 }
-export default function Content(inProps: ContentProps): JSX.Element;
+export default function Content(inProps: ContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.d.ts

@@ -10,4 +10,4 @@ export interface InviteProps {
      */
     onCompleteAction: () => void;
 }
-export default function Invite(inProps: InviteProps): JSX.Element;
+export default function Invite(inProps: InviteProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/OnBoardingWidget/Steps/Profile/Profile.d.ts

@@ -22,4 +22,4 @@ export interface ProfileProps {
      */
     onCompleteAction: () => void;
 }
-export default function Profile(inProps: ProfileProps): JSX.Element;
+export default function Profile(inProps: ProfileProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,4 @@ export interface PaymentDetailDialogProps extends BaseDialogProps {
     className?: string;
     disableInitialTransition?: boolean;
 }
-export default function PaymentDetailDialog(inProps: PaymentDetailDialogProps): JSX.Element;
+export default function PaymentDetailDialog(inProps: PaymentDetailDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -14,11 +14,11 @@ const classes = {
 const Root = styled(BaseDialog, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+const NoTransition = React.forwardRef(function NoTransition(props) {
     return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
 });
 export default function PaymentDetailDialog(inProps) {
@@ -33,5 +33,7 @@ export default function PaymentDetailDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
+    return (_jsx(Root, Object.assign({ maxWidth: "sm", fullWidth: true, title: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
+            transition: Transition
+        } }, rest, { children: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
 }

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

@@ -7,4 +7,4 @@ export interface PaymentOrderProps {
     hidePaymentOrderPdfButton?: boolean;
     PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
 }
-export default function PaymentOrder(inProps: PaymentOrderProps): JSX.Element;
+export default function PaymentOrder(inProps: PaymentOrderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,4 +14,4 @@ export interface PaymentOrdersProps {
      */
     contentType?: SCContentType;
 }
-export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;
+export default function PaymentOrders(inProps: PaymentOrdersProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/PaymentOrders/PaymentOrders.js

@@ -207,21 +207,25 @@ export default function PaymentOrders(inProps) {
     const skeleton = () => {
         return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 20 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 30 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 80, width: 250 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
     };
-    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ size: { md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
                                 e.preventDefault();
                                 if (e.key === 'Enter') {
                                     fetchInvoices();
                                 }
-                            }, InputProps: {
-                                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
-                                                setQuery('');
-                                                fetchInvoices('');
-                                            }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
-                            } }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                            }, slotProps: {
+                                input: {
+                                    endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                                    setQuery('');
+                                                    fetchInvoices('');
+                                                }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
+                                }
+                            } }) })), _jsx(Grid, Object.assign({ size: { md: 3 } }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ size: { sm: 8, md: 4 } }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
                                 cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
                                 clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
-                            } }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
-                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                            } }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
+                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", slotProps: {
+                                                        input: Object.assign(Object.assign({}, params.slotProps.input), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) })
+                                                    } })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
@@ -231,8 +235,10 @@ export default function PaymentOrders(inProps) {
                                                     // @ts-ignore
                                                     toolbarTitle: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
                                                 }
-                                            }, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
-                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                            }, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
+                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", slotProps: {
+                                                        input: Object.assign(Object.assign({}, params.slotProps.input), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) })
+                                                    } })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']

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

@@ -1,7 +1,7 @@
 import { SCPaymentProduct, SCContentType, SCPurchasableContent, SCPaymentOrder, SCPaymentPrice, SCPaymentProductTemplateType } from '@selfcommunity/types';
 import { PaymentProductPriceProps } from '../PaymentProductPrice';
 import { WidgetProps } from '../Widget';
-export interface PaymentProductProps extends WidgetProps {
+export interface PaymentProductProps extends Omit<WidgetProps, 'content'> {
     className?: string;
     paymentProductId?: number;
     paymentProduct?: SCPaymentProduct;
@@ -15,4 +15,4 @@ export interface PaymentProductProps extends WidgetProps {
     hidePaymentProductPrices?: boolean;
     PaymentProductPriceComponentProps?: PaymentProductPriceProps;
 }
-export default function PaymentProduct(inProps: PaymentProductProps): JSX.Element;
+export default function PaymentProduct(inProps: PaymentProductProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/PaymentProduct/PaymentProduct.js

@@ -15,7 +15,7 @@ const classes = {
 const Root = styled(Widget, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 export default function PaymentProduct(inProps) {
     // PROPS
     const props = useThemeProps({

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

@@ -44,7 +44,7 @@ export default function PaymentProductSkeleton(inProps) {
         props: inProps,
         name: `${PREFIX}Skeleton`
     });
-    const { className } = props, rest = __rest(props, ["className"]);
+    const rest = __rest(props, []);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));

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

@@ -12,4 +12,4 @@ export interface PaymentProductPriceProps {
     onHandleActionBuy?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
     returnUrlParams?: Record<string, string>;
 }
-export default function PaymentProductPrice(inProps: PaymentProductPriceProps): JSX.Element;
+export default function PaymentProductPrice(inProps: PaymentProductPriceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,4 +8,4 @@ export interface PaymentProductsProps {
     paymentOrder?: SCPaymentOrder;
     onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
 }
-export default function PaymentProducts(inProps: PaymentProductsProps): JSX.Element;
+export default function PaymentProducts(inProps: PaymentProductsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -39,5 +39,5 @@ export default function PaymentProductsSkeleton(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, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { 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, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
 }

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

@@ -7,4 +7,4 @@ export interface PaywallsProps {
     prefetchedPaymentContentStatus?: SCPurchasableContent;
     onUpdatePaymentOrder?: (price: SCPaymentPrice, contentType?: SCContentType, contentId?: string | number) => void;
 }
-export default function Paywalls(inProps: PaywallsProps): JSX.Element;
+export default function Paywalls(inProps: PaywallsProps): import("react/jsx-runtime").JSX.Element;

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, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { 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, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
 }

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

@@ -10,4 +10,4 @@ export interface PaywallsConfiguratorProps {
     onChangeContentAccessType?: (type: string) => void;
     disabled?: boolean;
 }
-export default function PaywallsConfigurator(inProps: PaywallsConfiguratorProps): JSX.Element;
+export default function PaywallsConfigurator(inProps: PaywallsConfiguratorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Avatar, Box, Button, Icon, InputBase, ListItem, ListItemAvatar, ListItemText, Radio, Stack, Typography, Zoom, styled, CircularProgress } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Avatar, Box, Button, Icon, InputBase, ListItem, ListItemAvatar, ListItemText, Radio, Stack, Typography, Zoom, styled, CircularProgress, List, Popper } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -13,8 +13,6 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getConvertedAmount } from '../../utils/payment';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Popper from '@mui/material/Popper';
-import List from '@mui/material/List';
 import CreatePaymentProductForm from '../CreatePaymentProductForm';
 const classes = {
     root: `${PREFIX}-root`,
@@ -242,7 +240,9 @@ export default function PaywallsConfigurator(inProps) {
                                                             return;
                                                         }
                                                         setPendingValue(newValue);
-                                                    }, disableCloseOnSelect: true, PopperComponent: PopperComponent, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
+                                                    }, disableCloseOnSelect: true, slots: {
+                                                        popper: PopperComponent
+                                                    }, renderTags: () => null, noOptionsText: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.noProducts", defaultMessage: "ui.paywallsConfigurator.noProducts" }), renderOption: renderOption, options: getOptions, isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: (option) => option.name.toString(), renderInput: (params) => (_jsx(FilterInputRoot, { disabled: loadingProducts || loading, ref: params.InputProps.ref, inputProps: params.inputProps, autoFocus: true, placeholder: intl.formatMessage({
                                                             id: 'ui.paywallsConfigurator.filterByName',
                                                             defaultMessage: 'ui.paywallsConfigurator.filterByName'
                                                         }) })) }), _jsx(Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: _jsx(Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: _jsx(Icon, { children: "check" }) }, { children: _jsx(FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));

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, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { 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, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
 }

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

@@ -5,4 +5,4 @@ export interface PaywallsDialogProps extends BaseDialogProps {
     PaywallsComponentProps: PaywallsProps;
     disableInitialTransition?: boolean;
 }
-export default function PaywallsDialog(inProps: PaywallsDialogProps): JSX.Element;
+export default function PaywallsDialog(inProps: PaywallsDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -15,11 +15,11 @@ const classes = {
 const Root = styled(BaseDialog, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+const NoTransition = React.forwardRef(function NoTransition(props) {
     return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
 });
 export default function PaywallsDialog(inProps) {
@@ -35,6 +35,8 @@ export default function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
-            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
+    return (_jsx(Root, Object.assign({ maxWidth: "sm", fullWidth: true, title: (PaywallsComponentProps && ((_a = PaywallsComponentProps.prefetchedPaymentContentStatus) === null || _a === void 0 ? void 0 : _a.payment_order)) ||
+            (PaywallsComponentProps.content && PaywallsComponentProps.content.payment_order) ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), slots: {
+            transition: Transition
+        }, DialogContentProps: { dividers: false } }, rest, { children: _jsx(Paywalls, Object.assign({}, PaywallsComponentProps)) })));
 }

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

@@ -8,4 +8,4 @@ export interface PdfPreviewDialogProps extends BaseDialogProps {
     pdfUrl: string;
     disableInitialTransition?: boolean;
 }
-export default function PdfPreviewDialog(inProps: PdfPreviewDialogProps): JSX.Element;
+export default function PdfPreviewDialog(inProps: PdfPreviewDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -56,5 +56,7 @@ export default function PdfPreviewDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ fullScreen: true, scroll: "paper", open: true, maxWidth: "md" }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: 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, className: classes.content }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignContent: "center" }, { children: _jsx(PdfPreview, Object.assign({}, PdfPreviewComponentProps, { pdfUrl: pdfUrl })) })) }))] })));
+    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 })) })) }))] })));
 }

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

@@ -291,13 +291,13 @@ export default function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ item: true, xs: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && (_jsx(Grid, Object.assign({ size: "auto", alignItems: "center", justifyContent: "center" }, { children: _jsx(IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: _jsx(Icon, { children: "info" }) })) }))), _jsx(Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && (_jsxs(Grid, Object.assign({ size: "auto" }, { children: [_jsxs(Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [_jsx(Grow, Object.assign({ in: true, timeout: 1000 }, { children: _jsx("span", { children: actions[tutorialIndex].title }) })), _jsx(IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Grow, Object.assign({ in: true, timeout: 1200 }, { children: _jsx(Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), _jsx(Divider, { className: classes.divider }), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: classNames(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), _jsxs(Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), _jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: classNames(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (_jsx(FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */
-    const content = (_jsxs(Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [_jsx(Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
-                        return (_jsx(Grid, Object.assign({ item: true, xs: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
-                    }), _jsx(Grid, { item: true, xs: 1, className: classes.action })] }))] })));
+    const content = (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ size: "grow" }, { children: title ? (title) : (_jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: _jsx("img", { src: LogoPlaceholder, alt: "logo" }) })) }))) })), _jsxs(Grid, Object.assign({ className: classes.actions }, { children: [_jsx(Grid, { size: 1, className: classes.action }), actions.map((a, i) => {
+                        return (_jsx(Grid, Object.assign({ size: "auto", className: classNames(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), _jsx(Grid, { size: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */

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, justifyContent: "center", className: classes.content }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: _jsx(Skeleton, { animation: "wave", height: 25, width: 170 }) })), _jsxs(Grid, Object.assign({ item: true, xs: 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({ item: true, xs: 12, 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({ 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 }) }))] })) })));
 }

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({ item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
+        return (_jsx(Grid, Object.assign({ size: { 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({ item: true, 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 }) })));
+        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 }) })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
@@ -169,5 +169,5 @@ export default function PrivateMessageComponent(inProps) {
     if (!authUserId || !privateMessagingEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
+    return (_jsxs(Root, Object.assign({ container: true, width: "100%" }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
 }

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

@@ -6,7 +6,7 @@ interface PrivateMessageComponentSkeletonMap {
      */
     className?: string;
 }
-export declare type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
+export type PrivateMessageComponentProps = React.PropsWithChildren<PrivateMessageComponentSkeletonMap>;
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
 

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, className: classNames(classes.root, className) }, { children: [!isMobile && (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ item: true, xs: 12, 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: { md: 5 }, className: classes.snippetsSection }, { children: _jsx(PrivateMessageSnippetsSkeleton, {}) }))), _jsx(Grid, Object.assign({ size: { md: 7 }, className: classes.threadSection }, { children: _jsx(PrivateMessageThreadSkeleton, {}) }))] })));
 }

package/lib/esm/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -94,7 +94,7 @@ export default function PrivateMessageEditor(inProps) {
     const handleMessageInput = (event) => {
         setMessage(event.target.value);
     };
-    const handleEmojiClick = (emojiData, event) => {
+    const handleEmojiClick = (emojiData) => {
         const cursorPosition = ref.current.selectionEnd;
         const start = ref.current.value.substring(0, ref.current.selectionStart);
         const end = ref.current.value.substring(ref.current.selectionStart);
@@ -124,9 +124,11 @@ export default function PrivateMessageEditor(inProps) {
         return (_jsx(Alert, Object.assign({ severity: "error", action: _jsx(IconButton, Object.assign({ color: "inherit", size: "small", onClick: onErrorRemove }, { children: _jsx(Icon, { children: "close" }) })) }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" }) })));
     }
     function renderContent() {
-        return (_jsx(_Fragment, { children: openMediaSection ? (_jsx(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: _jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })) })) : (_jsxs(_Fragment, { children: [openEmojiSection && _jsx(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), _jsx(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {
-                            startAdornment: (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: _jsx(Icon, { children: "attach_file" }) }))] })),
-                            endAdornment: (_jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })))
+        return (_jsx(_Fragment, { children: openMediaSection ? (_jsx(MessageMediaUploader, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: _jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })) })) : (_jsxs(_Fragment, { children: [openEmojiSection && _jsx(EmojiPicker, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }), _jsx(TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), slotProps: {
+                            input: {
+                                startAdornment: (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: openMediaSection, onClick: () => setOpenEmojiSection(!openEmojiSection) }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(IconButton, Object.assign({ disabled: message !== '' || openEmojiSection, onClick: () => setOpenMediaSection(true) }, { children: _jsx(Icon, { children: "attach_file" }) }))] })),
+                                endAdornment: (_jsx(IconButton, Object.assign({ disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend }, { children: _jsx(Icon, { children: "send" }) })))
+                            }
                         } })] })) }));
     }
     return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className, { [classes.ios]: isIOS }) }, { children: renderContent() })));

package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -120,5 +120,13 @@ export default function PrivateMessageSettingsIconButton(inProps) {
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.msg", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.dialog.confirm", defaultMessage: "ui.privateMessageSettingsIconButton.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
 }

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -186,7 +186,7 @@ export default function PrivateMessageSnippets(inProps) {
     /**
      * Notification subscriber
      */
-    const subscriber = (msg, data) => {
+    const subscriber = (_msg, data) => {
         const res = data.data;
         updateSnippetsParams(res.thread_id, res.notification_obj.snippet.thread_status, res.notification_obj.snippet.headline);
     };
@@ -207,13 +207,13 @@ export default function PrivateMessageSnippets(inProps) {
      * Thread/ Private Message Component subscriptions handlers
      */
     useEffect(() => {
-        const threadSubscriber = PubSub.subscribe('snippetsChannel', (msg, data) => {
+        const threadSubscriber = PubSub.subscribe('snippetsChannel', (_msg, data) => {
             handleSnippetsUpdate(data);
         });
-        const snippetsSubscriber = PubSub.subscribe('snippetsChannelDelete', (msg, data) => {
+        const snippetsSubscriber = PubSub.subscribe('snippetsChannelDelete', (_msg, data) => {
             handleSnippetsUpdate(data, true, SCPrivateMessageType.USER);
         });
-        const snippetsGroupSubscriber = PubSub.subscribe('snippetsChannelDeleteGroup', (msg, data) => {
+        const snippetsGroupSubscriber = PubSub.subscribe('snippetsChannelDeleteGroup', (_msg, data) => {
             handleSnippetsUpdate(data, true, SCPrivateMessageType.GROUP);
         });
         return () => {
@@ -232,9 +232,11 @@ export default function PrivateMessageSnippets(inProps) {
     /**
      * Renders the component
      */
-    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
-                                className: classes.input,
-                                startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),
-                                endAdornment: (_jsx(IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })))
+    return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: _jsxs(CardContent, { children: [_jsx(Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: _jsx(FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && (_jsxs(_Fragment, { children: [_jsx(TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, slotProps: {
+                                input: {
+                                    className: classes.input,
+                                    startAdornment: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })),
+                                    endAdornment: (_jsx(IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })))
+                                }
                             } }), _jsx(List, { children: filteredSnippets.map((message) => (_jsx(PrivateMessageSnippetItem, { message: message, onItemClick: () => handleOpenThread(message), secondaryAction: _jsxs(_Fragment, { children: [message.thread_status === SCPrivateMessageStatusType.NEW && _jsx(Icon, Object.assign({ color: "secondary" }, { children: "fiber_manual_record" })), !isMobile && (_jsx(PrivateMessageSettingsIconButton, { threadToDelete: (message === null || message === void 0 ? void 0 : message.group) ? message.group.id : messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true), group: message === null || message === void 0 ? void 0 : message.group }))] }), selected: isSelected(message) }, message.id))) })] }))] }) })));
 }