@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

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

@@ -15,7 +15,6 @@ const onBoarding_1 = require("../../../../utils/onBoarding");
 const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
-const lab_1 = require("@mui/lab");
 const ScrollContainer_1 = tslib_1.__importDefault(require("../../../../shared/ScrollContainer"));
 const messages = (0, react_intl_1.defineMessages)({
     titleField: {
@@ -55,8 +54,8 @@ const Root = (0, material_1.styled)(material_1.Box, {
 const DrawerRoot = (0, material_1.styled)(material_1.Drawer, {
     name: constants_1.PREFIX,
     slot: 'AppearanceDrawerRoot',
-    overridesResolver: (props, styles) => styles.appearanceDrawerRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.appearanceDrawerRoot
+})(() => ({}));
 function Appearance(inProps) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     // PROPS
@@ -77,7 +76,7 @@ function Appearance(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // HANDLERS
-    const handleTabChange = (event, newValue) => {
+    const handleTabChange = (_event, newValue) => {
         setTab(newValue);
         setData({});
     };
@@ -180,16 +179,20 @@ function Appearance(inProps) {
     }, []);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.COLOR, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.LOGO, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: AppearanceTabType.SLOGAN, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerContent }, { children: [tab === AppearanceTabType.COLOR && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.colorContainer }, { children: [preferences
                                             .filter((item) => item.section === types_1.SCPreferenceSection.COLORS)
-                                            .map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences
+                                            .map((color) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatColorLabel)(color) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(mui_color_input_1.MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences
                                         .filter((item) => item.section === types_1.SCPreferenceSection.LOGO)
-                                        .map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, InputProps: {
-                                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
-                                                        ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
-                                                        : 50 })))
-                                            }, 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) }), (0, jsx_runtime_1.jsx)(material_1.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: ((0, jsx_runtime_1.jsx)(material_1.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) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
+                                        .map((logo) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, onBoarding_1.formatLogoLabel)(logo.name) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.logoContainer }, { children: [(0, jsx_runtime_1.jsx)("img", { src: logo.value, className: classes.logo }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, slotProps: {
+                                                input: {
+                                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
+                                                            ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
+                                                            : 50 })))
+                                                }
+                                            }, 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) }), (0, jsx_runtime_1.jsx)(material_1.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: ((0, jsx_runtime_1.jsx)(material_1.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) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
 }
 exports.default = Appearance;

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

@@ -90,15 +90,9 @@ function Category(inProps) {
         return message;
     }, [progress]);
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== types_1.SCOnBoardingStepStatusType.IN_PROGRESS && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconA: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "a", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconB: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "b", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
+                                iconA: (chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "a", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconA"),
+                                iconB: (chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "b", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconB"),
+                                iconC: (chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconC")
                             } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryA_1.default }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: categoryB_1.default })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: category_progress_json_1.default, className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }
 exports.default = Category;

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -16,13 +16,13 @@ const classes = {
 const Root = (0, material_1.styled)(BaseDialog_1.default, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function PaymentDetailDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -35,6 +35,8 @@ function PaymentDetailDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: "sm", fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), slots: {
+            transition: Transition
+        } }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
 }
 exports.default = PaymentDetailDialog;

package/lib/cjs/components/PaymentOrder/PaymentOrder.js

@@ -75,6 +75,6 @@ function PaymentOrder(inProps) {
                                     hour: 'numeric',
                                     minute: 'numeric'
                                 })
-                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: "outlined", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
 }
 exports.default = PaymentOrder;

package/lib/cjs/components/PaymentOrders/PaymentOrders.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
 const react_intersection_observer_1 = require("react-intersection-observer");
 const api_services_1 = require("@selfcommunity/api-services");
 const system_1 = require("@mui/system");
@@ -24,11 +23,15 @@ const Errors_1 = require("../../constants/Errors");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
-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 it_1 = require("date-fns/locale/it");
+const en_US_1 = require("date-fns/locale/en-US");
 const Category_1 = tslib_1.__importDefault(require("../Category"));
 const PREFIX = 'SCPaymentOrders';
 const messages = (0, react_intl_1.defineMessages)({
+    datePicker: {
+        id: 'ui.paymentOrders.picker.date',
+        defaultMessage: 'ui.paymentOrders.picker.date'
+    },
     dateFrom: {
         id: 'ui.paymentOrders.dateFrom',
         defaultMessage: 'ui.paymentOrders.dateFrom'
@@ -209,42 +212,52 @@ function PaymentOrders(inProps) {
     const skeleton = () => {
         return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, Object.assign({ ref: ref }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 20 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 30 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 80, width: 250 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
-                                                setQuery('');
-                                                fetchInvoices('');
-                                            }, disabled: isLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: isLoading }))] })))
-                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: (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, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
-                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
-                            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
-                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                            }, slotProps: {
+                                input: {
+                                    endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
+                                                    setQuery('');
+                                                    fetchInvoices('');
+                                                }, disabled: isLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: isLoading }))] })))
+                                }
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 8, md: 4 } }, { children: (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, localeText: {
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction),
+                                clearButtonLabel: intl.formatMessage(messages.pickerClearAction)
+                            } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, params, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                toolbar: {
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                    // @ts-ignore
-                                                    toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateFrom)
+                                                        }
+                                                    }
                                                 }
-                                            }, onChange: (newValue) => setStartDate(newValue) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
-                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                            }, onChange: setStartDate }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 6 }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, params, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
                                                 },
-                                                toolbar: {
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                                    // @ts-ignore
-                                                    toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateTo)
+                                                        }
+                                                    }
                                                 }
-                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "7%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "38%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "12%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "13%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, payment_1.getConvertedAmount)(order.payment_price) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                            }, onChange: setEndDate }) }))] })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.content }, { children: !isLoading ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "5%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "7%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "38%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "12%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "13%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "10%" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [orders.map((order, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)("b", { children: order.id }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, payment_1.getConvertedAmount)(order.payment_price) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
                                                     intl.formatDate(new Date(order.created_at), {
                                                         year: 'numeric',
                                                         month: 'numeric',
@@ -259,6 +272,6 @@ function PaymentOrders(inProps) {
                                                         hour: 'numeric',
                                                         minute: 'numeric'
                                                     })
-                                                    : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === types_1.SCContentType.EVENT && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { 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.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }))] })));
+                                                    : '-' })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === types_1.SCContentType.EVENT && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ align: "left", colSpan: 6 }, { 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.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: skeleton() })] })] })) }))) : ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) }))] })));
 }
 exports.default = PaymentOrders;

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

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

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

@@ -41,6 +41,6 @@ function PaymentProductsSkeleton(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, PaymentProductSkeletonProps)) }), index))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }), index))) })) })));
 }
 exports.default = PaymentProductsSkeleton;

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

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

package/lib/cjs/components/PaywallsConfigurator/PaywallsConfigurator.js

@@ -15,8 +15,6 @@ const Errors_1 = require("../../constants/Errors");
 const react_intl_1 = require("react-intl");
 const payment_1 = require("../../utils/payment");
 const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
-const Popper_1 = tslib_1.__importDefault(require("@mui/material/Popper"));
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const CreatePaymentProductForm_1 = tslib_1.__importDefault(require("../CreatePaymentProductForm"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
@@ -47,7 +45,7 @@ const PaymentProductsAutocompletePopper = (0, material_1.styled)(material_1.Box,
     slot: 'PaymentProductsAutocompletePopperRoot',
     overridesResolver: (_props, styles) => styles.paymentProductsAutocompletePopperRoot
 })(() => ({}));
-const PaymentProductsPopper = (0, material_1.styled)(Popper_1.default, {
+const PaymentProductsPopper = (0, material_1.styled)(material_1.Popper, {
     name: constants_1.PREFIX,
     slot: 'PaymentProductsPopperRoot',
     overridesResolver: (_props, styles) => styles.paymentProductsPopperRoot
@@ -217,7 +215,7 @@ function PaywallsConfigurator(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.contentAccessType }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.FREE, onChange: handleChange(constants_1.ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.PAID, onChange: handleChange(constants_1.ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [createPrice && ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: createPrice }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(CreatePaymentProductForm_1.default, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), (0, jsx_runtime_1.jsxs)(List_1.default, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: intl.formatMessage({
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.contentAccessType }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.selectAccessType", defaultMessage: "ui.paywallsConfigurator.selectAccessType" }) }), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.FREE, onChange: handleChange(constants_1.ContentAccessType.FREE), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.FREE }), "aria-controls": "free-content", id: "free-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free", defaultMessage: "ui.paywallsConfigurator.free" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.label", defaultMessage: "ui.paywallsConfigurator.free.label" })] }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.free.info", defaultMessage: "ui.paywallsConfigurator.free.info" }) }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === constants_1.ContentAccessType.PAID, onChange: handleChange(constants_1.ContentAccessType.PAID), disabled: disabled || loading, variant: "outlined" }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: expanded === constants_1.ContentAccessType.PAID }), "aria-controls": "paid-content", id: "paid-header" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid", defaultMessage: "ui.paywallsConfigurator.paid" }) }), ": ", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.label", defaultMessage: "ui.paywallsConfigurator.paid.label" })] }) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.paid.info", defaultMessage: "ui.paywallsConfigurator.paid.info" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-around", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ style: { flexGrow: 1 }, component: "div" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products", defaultMessage: "ui.paywallsConfigurator.connected.products" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleToggleCreatePaymentPrice, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), className: classes.btnAddPaymentProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.connected.products.btnNew", defaultMessage: "ui.paywallsConfigurator.connected.products.btnNew" }) }))] })), loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [createPrice && ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: createPrice }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(CreatePaymentProductForm_1.default, { className: classes.newProduct, onCreate: handleCreatePaymentPrice, onCancel: handleToggleCreatePaymentPrice }) }) }))), (0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ dense: true, className: classes.selectedPaymentProductsList }, { children: [!value.length && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.noProducts, divider: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: intl.formatMessage({
                                                             id: 'ui.paywallsConfigurator.connected.noProducts',
                                                             defaultMessage: 'ui.paywallsConfigurator.connected.noProducts'
                                                         }) }) }), -1)), value.map((p, i) => {
@@ -244,7 +242,9 @@ function PaywallsConfigurator(inProps) {
                                                             return;
                                                         }
                                                         setPendingValue(newValue);
-                                                    }, disableCloseOnSelect: true, PopperComponent: PopperComponent, renderTags: () => null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.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'
                                                         }) })) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paymentProductsPopperFooter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", disableRipple: true, onClick: handleClose, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsConfigurator.popper.btnConfirm", defaultMessage: "ui.paywallsConfigurator.popper.btnConfirm" }) })) }))] }) })) })))] })] }))] }))) })));

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

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

package/lib/cjs/components/PaywallsDialog/PaywallsDialog.js

@@ -17,13 +17,13 @@ const classes = {
 const Root = (0, material_1.styled)(BaseDialog_1.default, {
     slot: 'Root',
     name: PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function PaywallsDialog(inProps) {
     var _a;
     // PROPS
@@ -37,7 +37,9 @@ function PaywallsDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, DialogContentProps: { dividers: false } }, rest, { children: (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
+    return ((0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })), scroll: "paper", open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), slots: {
+            transition: Transition
+        }, DialogContentProps: { dividers: false } }, rest, { children: (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({}, PaywallsComponentProps)) })));
 }
 exports.default = PaywallsDialog;

package/lib/cjs/components/PdfPreviewDialog/PdfPreviewDialog.js

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

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

@@ -57,11 +57,11 @@ const Root = (0, material_1.styled)(Widget_1.default, {
         display: 'flex',
         paddingBottom: 0,
         boxShadow: 'inset -1px -3px 7px -4px #CECECE',
-        '-webkit-overflow-scrolling': 'touch',
+        WebkitOverflowScrolling: 'touch',
         overflowX: 'auto',
         overflowY: 'hidden',
         scrollbarWidth: 'none' /* Firefox */,
-        '-ms-overflow-style': 'none' /* IE and Edge */,
+        MsOverflowStyle: 'none' /* IE and Edge */,
         '&::-webkit-scrollbar': {
             display: 'none'
         }
@@ -293,13 +293,13 @@ function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
+    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body2", className: classes.tutorialTitle, component: "div" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div" }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
-                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action })] }))] })));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { size: 1, className: classes.action }), actions.map((a, i) => {
+                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { size: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */

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

@@ -37,6 +37,6 @@ const Root = (0, material_1.styled)(Widget_1.default, {
  *
  */
 function PlatformWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }
 exports.default = PlatformWidgetSkeleton;

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -153,7 +153,7 @@ function PrivateMessageComponent(inProps) {
      * Renders snippets section
      */
     function renderSnippets() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageSnippets_1.default, { snippetActions: {
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 5 }, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageSnippets_1.default, { snippetActions: {
                     onSnippetClick: handleThreadOpening,
                     onNewMessageClick: handleOpenNewMessage,
                     onDeleteConfirm: handleDeleteThread
@@ -163,7 +163,7 @@ function PrivateMessageComponent(inProps) {
      * Renders thread section
      */
     function renderThread() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 7 }, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
@@ -171,6 +171,6 @@ function PrivateMessageComponent(inProps) {
     if (!authUserId || !privateMessagingEnabled) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true }, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%" }, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
 }
 exports.default = PrivateMessageComponent;

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

@@ -42,6 +42,6 @@ function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, className: (0, classnames_1.default)(classes.root, className) }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: classes.threadSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%", className: (0, classnames_1.default)(classes.root, className) }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 5 }, className: classes.snippetsSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 7 }, className: classes.threadSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}) }))] })));
 }
 exports.default = PrivateMessageComponentSkeleton;