@selfcommunity/react-ui 0.11.0 → 1.0.0

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

@@ -35,36 +35,20 @@ export default function App(inProps) {
     // STATE
     const [tab, setTab] = useState(0);
     // HANDLERS
-    const handleChange = (event, newValue) => {
+    const handleChange = (_event, newValue) => {
         setTab(newValue);
     };
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.title", defaultMessage: "ui.onBoardingWidget.step.app.title" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.summary", defaultMessage: "ui.onBoardingWidget.step.app.summary" }) })), _jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, centered: true, variant: "fullWidth", indicatorColor: "primary" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.android", defaultMessage: "ui.onBoardingWidget.step.app.tab.android" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.tab.ios", defaultMessage: "ui.onBoardingWidget.step.app.tab.ios" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.android.a.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.android.a.b")
                                     } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.b", defaultMessage: "ui.onBoardingWidget.step.app.android.b", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.android.b.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.android.b.b")
                                     } }) })), _jsx(CardMedia, { className: classes.imageAndroid, component: "img", src: AndroidPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios", defaultMessage: "ui.onBoardingWidget.step.app.ios" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.a", defaultMessage: "ui.onBoardingWidget.step.app.ios.a", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.ios.a.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.ios.a.b")
                                     } }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.ios.b", defaultMessage: "ui.onBoardingWidget.step.app.ios.b", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        icon: (...chunks) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (...chunks) => _jsx("strong", { children: chunks })
+                                        icon: (chunks) => (_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks }), "ui.onBoardingWidget.step.app.ios.b.icon")),
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.onBoardingWidget.step.app.ios.b.b")
                                     } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
 }

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

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

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

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

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

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

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

@@ -87,14 +87,8 @@ export default function Category(inProps) {
         return message;
     }, [progress]);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(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) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconB: (...chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
+                                iconA: (chunks) => _jsx(CircledLetter, { letter: "a", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconA"),
+                                iconB: (chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconB"),
+                                iconC: (chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks }, "ui.onBoardingWidget.step.category.generation.steps.iconC")
                             } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: getLoadingMessage })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/esm/components/PaymentOrder/PaymentOrder.js

@@ -73,5 +73,5 @@ export default function PaymentOrder(inProps) {
                                     hour: 'numeric',
                                     minute: 'numeric'
                                 })
-                            } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+                            } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: "outlined", label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
 }

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

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

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

@@ -3,7 +3,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useState } from 'react';
 import { Box, Chip, Paper, Table, TableBody, Skeleton, TableCell, TableContainer, TableHead, TableRow, Typography, Stack, CircularProgress, styled, Grid, TextField, InputAdornment, IconButton, Icon, Button, useTheme, useMediaQuery, MenuItem } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import LoadingButton from '@mui/lab/LoadingButton';
 import { useInView } from 'react-intersection-observer';
 import { PaymentService } from '@selfcommunity/api-services';
 import { useThemeProps } from '@mui/system';
@@ -22,11 +21,15 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import Category from '../Category';
 const PREFIX = 'SCPaymentOrders';
 const messages = defineMessages({
+    datePicker: {
+        id: 'ui.paymentOrders.picker.date',
+        defaultMessage: 'ui.paymentOrders.picker.date'
+    },
     dateFrom: {
         id: 'ui.paymentOrders.dateFrom',
         defaultMessage: 'ui.paymentOrders.dateFrom'
@@ -207,42 +210,52 @@ export default function PaymentOrders(inProps) {
     const skeleton = () => {
         return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 20 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 30 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 80, width: 250 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
     };
-    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
                                 e.preventDefault();
                                 if (e.key === 'Enter') {
                                     fetchInvoices();
                                 }
-                            }, InputProps: {
-                                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
-                                                setQuery('');
-                                                fetchInvoices('');
-                                            }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
-                            } }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 3, lg: 3 }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 4 }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
-                                clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
-                            } }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
-                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateFrom)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                            }, slotProps: {
+                                input: {
+                                    endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [query.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                                    setQuery('');
+                                                    fetchInvoices('');
+                                                }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
+                                }
+                            } }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 8, md: 4 } }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction),
+                                clearButtonLabel: intl.formatMessage(messages.pickerClearAction)
+                            } }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { children: _jsx(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: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateFrom)
+                                                        }
+                                                    }
                                                 }
-                                            }, onChange: (newValue) => setStartDate(newValue) }) })), _jsx(Grid, Object.assign({ item: true, xs: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, slots: {
-                                                textField: (params) => (_jsx(TextField, Object.assign({}, params, { size: "small", InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.dateTo)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+                                            }, onChange: setStartDate }) })), _jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateTo", defaultMessage: "ui.paymentOrders.dateTo" }), value: endDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                                toolbarTitle: intl.formatMessage(messages.datePicker)
+                                            }, slots: {
+                                                openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { children: _jsx(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: _jsx(FormattedMessage, { id: "ui.paymentOrders.picker.date", defaultMessage: "ui.paymentOrders.picker.date" })
+                                                textField: {
+                                                    slotProps: {
+                                                        input: {
+                                                            placeholder: intl.formatMessage(messages.dateTo)
+                                                        }
+                                                    }
                                                 }
-                                            }, onChange: (newValue) => setEndDate(newValue) }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
+                                            }, onChange: setEndDate }) }))] })) })) }))] })), _jsx(Box, Object.assign({ className: classes.content }, { children: !isLoading ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ width: "5%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.number", defaultMessage: "ui.paymentOrders.number" }) })), _jsx(TableCell, Object.assign({ width: "7%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentType", defaultMessage: "ui.paymentOrders.contentType" }) })), _jsx(TableCell, Object.assign({ width: "38%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.content", defaultMessage: "ui.paymentOrders.content" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.price", defaultMessage: "ui.paymentOrders.price" }) })), _jsx(TableCell, Object.assign({ width: "12%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.createdAt", defaultMessage: "ui.paymentOrders.createdAt" }) })), _jsx(TableCell, Object.assign({ width: "13%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.expired_at", defaultMessage: "ui.paymentOrders.expired_at" }) })), _jsx(TableCell, Object.assign({ width: "10%" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.status", defaultMessage: "ui.paymentOrders.status" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.actions", defaultMessage: "ui.paymentOrders.actions" }) })] }) }), _jsxs(TableBody, { children: [orders.map((order, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx("b", { children: order.id }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(FormattedMessage, { id: `ui.paymentOrders.contentType.${order.content_type}`, defaultMessage: `ui.paymentOrders.contentType.${order.content_type}` }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: renderContent(order) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: getConvertedAmount(order.payment_price) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: order.created_at &&
                                                     intl.formatDate(new Date(order.created_at), {
                                                         year: 'numeric',
                                                         month: 'numeric',
@@ -257,5 +270,5 @@ export default function PaymentOrders(inProps) {
                                                         hour: 'numeric',
                                                         minute: 'numeric'
                                                     })
-                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
+                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: "outlined", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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