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

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

@@ -43,18 +43,18 @@ const classes = {
 const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const AccordionRoot = (0, material_1.styled)(material_1.Accordion, {
     name: constants_1.PREFIX,
     slot: 'AccordionRoot',
-    overridesResolver: (props, styles) => styles.accordionRoot
+    overridesResolver: (_props, styles) => styles.accordionRoot
 })(() => ({}));
 const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 const OnBoardingWidget = (inProps) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -262,8 +262,6 @@ const OnBoardingWidget = (inProps) => {
         const categoryStep = steps.find((step) => step.step === types_1.SCOnBoardingStepType.CATEGORIES);
         if ((categoryStep === null || categoryStep === void 0 ? void 0 : categoryStep.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && categoryStep.results.length !== 0) {
             categoryStep.results.forEach((c) => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
                 const isAlreadyNotified = prevCategoriesStep === null || prevCategoriesStep === void 0 ? void 0 : prevCategoriesStep.results.some((result) => result.id === c.id);
                 if (!isAlreadyNotified) {
                     notifyCategoryChanges(c);
@@ -305,27 +303,18 @@ const OnBoardingWidget = (inProps) => {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(ActionsButton_1.default, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: expanded ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile ? ((0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.logo, component: "img", src: header_1.default })) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h4" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } })] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.intro }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title" }) }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.subtitle", defaultMessage: "ui.onBoardingWidget.accordion.expanded.subtitle" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.summary", defaultMessage: "ui.onBoardingWidget.accordion.expanded.summary", values: {
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                    // @ts-ignore
                                                     b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
-                                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                    // @ts-ignore
-                                                    icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks })
+                                                    icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: chunks }) }))
                                                 } }) })] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.collapsed", defaultMessage: "ui.onBoardingWidget.accordion.collapsed", values: {
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                    // @ts-ignore
                                     b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
-                                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                    // @ts-ignore
-                                    // eslint-disable-next-line prettier/prettier
-                                    icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
-                                } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showNoCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(types_1.SCOnBoardingStepIdType.CATEGORIES), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
-                                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                            // @ts-ignore
+                                    icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
+                                } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, slotProps: {
+                                                            input: {
+                                                                'aria-labelledby': `${step.step}`
+                                                            }
+                                                        }, size: "small" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showNoCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(types_1.SCOnBoardingStepIdType.CATEGORIES), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
                                                             b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
                                                         } })] })) })))] }))] })) })) })] })) })));
 };

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

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

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

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

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

@@ -55,8 +55,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 +77,7 @@ function Appearance(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // HANDLERS
-    const handleTabChange = (event, newValue) => {
+    const handleTabChange = (_event, newValue) => {
         setTab(newValue);
         setData({});
     };
@@ -182,14 +182,18 @@ function Appearance(inProps) {
                                             .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
                                         .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 })))
+                                        .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, 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)(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" }) }))] }))] })) })] }))] })));
 }
 exports.default = Appearance;

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

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

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

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

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

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

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

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

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

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

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

@@ -16,11 +16,11 @@ 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) {
+const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
     return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
 });
 function PaymentDetailDialog(inProps) {
@@ -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.d.ts

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

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

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

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

@@ -209,21 +209,25 @@ 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: { 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: {
+                            }, 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: { 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: { 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" }) }) }))) }) })))
+                            } }, { 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, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", slotProps: {
+                                                        input: Object.assign(Object.assign({}, params.slotProps.input), { 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: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']
@@ -233,8 +237,10 @@ function PaymentOrders(inProps) {
                                                     // @ts-ignore
                                                     toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
                                                 }
-                                            }, 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: (newValue) => setStartDate(newValue) }) })), (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, slots: {
+                                                textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { size: "small", slotProps: {
+                                                        input: Object.assign(Object.assign({}, params.slotProps.input), { 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" }) }) }))) })
+                                                    } })))
                                             }, slotProps: {
                                                 actionBar: {
                                                     actions: ['cancel', 'clear', 'accept']

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

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

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

@@ -17,7 +17,7 @@ const classes = {
 const Root = (0, material_1.styled)(Widget_1.default, {
     slot: 'Root',
     name: constants_1.PREFIX
-})(({ theme }) => ({}));
+})(() => ({}));
 function PaymentProduct(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({

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/PaymentProductPrice/PaymentProductPrice.d.ts

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

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

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

package/lib/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, { 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/Paywalls.d.ts

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

package/lib/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, { 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.d.ts

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

package/lib/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, { 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.d.ts

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

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

@@ -17,11 +17,11 @@ 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) {
+const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
     return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
 });
 function PaywallsDialog(inProps) {
@@ -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.d.ts

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

package/lib/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({ 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

@@ -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({ 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)
      */