@selfcommunity/react-ui 0.11.0 → 1.0.0

package/lib/esm/components/EventForm/EventForm.js

@@ -1,17 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Alert, Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography, styled } from '@mui/material';
+import { Alert, Box, Button, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
-import { SCPreferences, UserUtils, useSCContext, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, UserUtils, useSCContext, useSCGoogleApiLoader, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCContentType, SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import enLocale from 'date-fns/locale/en-US';
-import itLocale from 'date-fns/locale/it';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import PubSub from 'pubsub-js';
 import { useCallback, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -26,7 +25,16 @@ import { LIVESTREAM_DEFAULT_SETTINGS } from '../LiveStreamForm/constants';
 import CoverPlaceholder from '../../assets/deafultCover';
 import PaywallsConfigurator from '../PaywallsConfigurator';
 import { ContentAccessType } from '../PaywallsConfigurator/constants';
+import { APIProvider } from '@vis.gl/react-google-maps';
 const messages = defineMessages({
+    titleDate: {
+        id: 'ui.eventForm.date.title',
+        defaultMessage: 'ui.eventForm.date.title'
+    },
+    titleTime: {
+        id: 'ui.eventForm.time.title',
+        defaultMessage: 'ui.eventForm.time.title'
+    },
     name: {
         id: 'ui.eventForm.name.placeholder',
         defaultMessage: 'ui.eventForm.name.placeholder'
@@ -171,6 +179,8 @@ export default function EventForm(inProps) {
     const [field, setField] = useState(initialFieldState);
     const [error, setError] = useState({});
     const [genericError, setGenericError] = useState(null);
+    // HOOKS
+    const { geocodingApiKey, libraries } = useSCGoogleApiLoader();
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const liveStreamEnabled = useMemo(() => scPreferences.preferences &&
@@ -370,78 +380,106 @@ export default function EventForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
-                        }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
-                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: !event, minDate: minStartDate, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
-                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, slotProps: {
+                            input: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
+                            }
+                        }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction)
+                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: !event, minDate: minStartDate, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleDate)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))
                                     }, slotProps: {
-                                        toolbar: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                            // @ts-ignore
-                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.startDate)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'startDate');
                                         handleChangeDateTime(value, 'startTime');
-                                    } }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, minTime: minStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, slots: {
-                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }) })))
+                                    } }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastStartTime, minTime: minStartTime, label: field.startTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.placeholder", defaultMessage: "ui.eventForm.time.placeholder" }), value: field.startTime, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleTime)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "access_time" }) })))
                                     }, slotProps: {
-                                        toolbar: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                            // @ts-ignore
-                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.startTime)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'startDate');
                                         handleChangeDateTime(value, 'startTime');
-                                    } })] })) })), _jsxs(FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== SCEventRecurrenceType.NEVER && _jsx(InputLabel, Object.assign({ id: "recurring" }, { children: `${intl.formatMessage(messages.frequency)}` })), _jsx(Select, Object.assign({ name: "recurring", label: field.recurring !== SCEventRecurrenceType.NEVER && `${intl.formatMessage(messages.frequency)}`, labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
+                                    } })] })) })), _jsxs(FormControl, Object.assign({ className: classes.frequency }, { children: [field.recurring !== SCEventRecurrenceType.NEVER && _jsx(InputLabel, Object.assign({ id: "recurring" }, { children: intl.formatMessage(messages.frequency) })), _jsx(Select, Object.assign({ name: "recurring", label: field.recurring !== SCEventRecurrenceType.NEVER && intl.formatMessage(messages.frequency), labelId: "recurring", value: field.recurring, onChange: handleChange, displayEmpty: true, renderValue: (selected) => {
                                     if (!selected) {
-                                        return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
+                                        return _jsx("em", { children: intl.formatMessage(messages.frequencyPlaceholder) });
                                     }
                                     return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
-                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
-                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
-                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
+                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
+                                cancelButtonLabel: intl.formatMessage(messages.pickerCancelAction)
+                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleDate)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "calendar_off" }) })))
                                     }, slotProps: {
-                                        toolbar: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                            // @ts-ignore
-                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.date.title", defaultMessage: "ui.eventForm.date.title" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.endDate)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'endDate');
                                         handleChangeDateTime(value, 'endTime');
-                                    }, shouldDisableDate: shouldDisableDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, slots: {
-                                        textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endTime)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "access_time" }) }) }))) }) })))
+                                    }, shouldDisableDate: shouldDisableDate }), _jsx(MobileTimePicker, { className: classes.picker, disablePast: disablePastEndTime, label: field.endTime && _jsx(FormattedMessage, { id: "ui.eventForm.time.end.placeholder", defaultMessage: "ui.eventForm.time.end.placeholder" }), value: field.endTime, enableAccessibleFieldDOMStructure: false, localeText: {
+                                        toolbarTitle: intl.formatMessage(messages.titleTime)
+                                    }, slots: {
+                                        openPickerButton: (params) => (_jsx(IconButton, Object.assign({}, params, { sx: { marginLeft: 0 } }, { children: _jsx(Icon, { children: "access_time" }) })))
                                     }, slotProps: {
-                                        toolbar: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                            // @ts-ignore
-                                            toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
+                                        field: {
+                                            openPickerButtonPosition: 'start'
+                                        },
+                                        textField: {
+                                            slotProps: {
+                                                input: {
+                                                    placeholder: intl.formatMessage(messages.endTime)
+                                                }
+                                            }
                                         }
                                     }, onChange: (value) => {
                                         handleChangeDateTime(value, 'endDate');
                                         handleChangeDateTime(value, 'endTime');
-                                    }, shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
-                            name: field.name,
-                            start_date: field.startDate,
-                            location: field.location,
-                            geolocation: field.geolocation,
-                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_e = event.live_stream) === null || _e === void 0 ? void 0 : _e.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
-                        }) }, EventAddressComponentProps)), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                        // @ts-ignores
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                    }, shouldDisableTime: shouldDisableTime })] })) })), _jsx(APIProvider, Object.assign({ apiKey: geocodingApiKey, libraries: libraries }, { children: _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
+                                name: field.name,
+                                start_date: field.startDate,
+                                location: field.location,
+                                geolocation: field.geolocation,
+                                live_stream: Object.assign(Object.assign({ title: field.name || intl.formatMessage(messages.name) }, (event && ((_e = event.live_stream) === null || _e === void 0 ? void 0 : _e.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
+                            }) }, EventAddressComponentProps)) })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.eventForm.privacy.public.info.b")
                                     } })) : (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.private.info", defaultMessage: "ui.eventForm.private.public.info", values: {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
-                                    } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_h = field.description) === null || _h === void 0 ? void 0 : _h.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), isPaymentsEnabled && isStaff && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (event && { contentId: event.id }), { contentType: SCContentType.EVENT, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                                        b: (chunks) => _jsx("strong", { children: chunks }, "ui.eventForm.privacy.private.info.b")
+                                    } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: intl.formatMessage(messages.description), margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
+                            input: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                            }
+                        }, error: Boolean(((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_h = field.description) === null || _h === void 0 ? void 0 : _h.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), isPaymentsEnabled && isStaff && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (event && { contentId: event.id }), { contentType: SCContentType.EVENT, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||

package/lib/esm/components/EventForm/UploadEventCover.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { Alert, styled, Icon } from '@mui/material';
+import { Alert, styled, Icon, Button } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { EventService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -20,7 +19,7 @@ const messages = defineMessages({
 const classes = {
     root: `${PREFIX}-upload-event-cover-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'UploadEventCoverRoot'
 })(() => ({}));

package/lib/esm/components/EventForm/types.d.ts

@@ -1,10 +1,10 @@
 import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
 import { ContentAccessType } from '../PaywallsConfigurator/constants';
-export declare type Place = {
+export type Place = {
     description: string;
     id?: string;
 };
-export declare type Geolocation = {
+export type Geolocation = {
     location: SCEventLocationType;
     geolocation?: string;
     lat?: number;
@@ -12,7 +12,7 @@ export declare type Geolocation = {
     link?: string;
     liveStreamSettings?: SCLiveStreamSettingsType;
 };
-export declare type InitialFieldState = Geolocation & {
+export type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;
     imageOriginalFile: string | Blob;
     startDate: Date | null;
@@ -27,5 +27,5 @@ export declare type InitialFieldState = Geolocation & {
     products: number[];
     contentAccessType: ContentAccessType;
 };
-export declare type FieldStateKeys = keyof InitialFieldState;
-export declare type FieldStateValues = InitialFieldState[FieldStateKeys];
+export type FieldStateKeys = keyof InitialFieldState;
+export type FieldStateValues = InitialFieldState[FieldStateKeys];

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

@@ -21,4 +21,4 @@ export interface EventInfoWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function EventInfoWidget(inProps: EventInfoWidgetProps): JSX.Element;
+export default function EventInfoWidget(inProps: EventInfoWidgetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export default function EventInfoWigetSkeleton(): JSX.Element;
+export default function EventInfoWigetSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EventInfoWidget/index.d.ts

@@ -1,4 +1,4 @@
 import EventInfoWidget, { EventInfoWidgetProps } from './EventInfoWidget';
 import EventInfoWidgetSkeleton from './Skeleton';
 export default EventInfoWidget;
-export { EventInfoWidgetSkeleton, type EventInfoWidgetProps };
+export { EventInfoWidgetSkeleton, EventInfoWidgetProps };

package/lib/esm/components/EventInviteButton/EventInviteButton.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
 import { Avatar, Box, Button, Chip, Icon, IconButton, InputAdornment, TextField, Typography, styled, Autocomplete } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { EventService } from '@selfcommunity/api-services';
@@ -242,7 +241,9 @@ export default function EventInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
+                                    input: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) })
+                                } }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), _jsxs(Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && (_jsx(Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.content.list", defaultMessage: "ui.eventInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => (_jsx(User, { elevation: 0, actions: _jsx(_Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

package/lib/esm/components/EventLocationWidget/EventLocationWidget.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CardContent, Typography, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
-import { GoogleMap, MarkerF } from '@react-google-maps/api';
+import { APIProvider } from '@vis.gl/react-google-maps';
 import { useSCGoogleApiLoader, useSCFetchEvent } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { formatEventLocationGeolocation } from '../../utils/string';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventLocationWidgetSkeleton from './Skeleton';
+import EventMap from './EventMap';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -64,30 +65,18 @@ export default function EventLocationWidget(inProps) {
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
-    const mapOptions = {
-        fullscreenControl: false,
-        mapTypeControl: false,
-        streetViewControl: false,
-        zoomControl: false // Disables the zoom control (+/- buttons)
-    };
+    const { geocodingApiKey, libraries } = useSCGoogleApiLoader();
     if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === SCEventLocationType.ONLINE) {
         return _jsx(HiddenPlaceholder, {});
     }
     /**
      * Loading event
      */
-    if (!isLoaded || !scEvent) {
+    if (!scEvent) {
         return _jsx(EventLocationWidgetSkeleton, {});
     }
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(GoogleMap, Object.assign({ mapContainerClassName: classes.map, center: {
-                            lat: scEvent.geolocation_lat,
-                            lng: scEvent.geolocation_lng
-                        }, options: mapOptions, zoom: 15 }, { children: _jsx(MarkerF, { position: {
-                                lat: scEvent.geolocation_lat,
-                                lng: scEvent.geolocation_lng
-                            } }) })) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: formatEventLocationGeolocation(scEvent.geolocation, true) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.address }, { children: formatEventLocationGeolocation(scEvent.geolocation) }))] }) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(APIProvider, Object.assign({ apiKey: geocodingApiKey, libraries: libraries }, { children: _jsx(EventMap, { event: scEvent, className: classes.map }) })) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: formatEventLocationGeolocation(scEvent.geolocation, true) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.address }, { children: formatEventLocationGeolocation(scEvent.geolocation) }))] }) })));
 }

package/lib/esm/components/EventLocationWidget/EventMap.d.ts

@@ -0,0 +1,8 @@
+import { SCEventType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
+interface EventMapProps {
+    event: SCEventType;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+}
+export default function EventMap(props: EventMapProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/esm/components/EventLocationWidget/EventMap.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSCGoogleApiLoader } from '@selfcommunity/react-core';
+import { Map, AdvancedMarker } from '@vis.gl/react-google-maps';
+export default function EventMap(props) {
+    // PROPS
+    const { event, className } = props;
+    // HOOKS
+    const { isLoaded } = useSCGoogleApiLoader();
+    if (!isLoaded) {
+        return null;
+    }
+    /**
+     * Valid mapId for AdvancedMarker
+     * https://visgl.github.io/react-google-maps/docs/guides/ssr-and-frameworks
+     * https://developers.google.com/maps/deprecations
+     * https://developers.google.com/maps/documentation/javascript/advanced-markers/migration
+     */
+    return (_jsx(Map, Object.assign({ className: className, mapId: "aef14f6caa750c5616b23934", defaultCenter: {
+            lat: event.geolocation_lat,
+            lng: event.geolocation_lng
+        }, zoom: 15, gestureHandling: "greedy", fullscreenControl: false, mapTypeControl: false, streetViewControl: false, zoomControl: false }, { children: _jsx(AdvancedMarker, { position: {
+                lat: event.geolocation_lat,
+                lng: event.geolocation_lng
+            } }) })));
+}

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

@@ -32,5 +32,5 @@ const Root = styled(Widget, {
  *
  */
 export default function EventLocationWidgetSkeleton() {
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 30, width: "20%", variant: 'text' }), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(Skeleton, { variant: "rectangular", animation: "wave", height: '100%', width: '100%' }) })), _jsx(Skeleton, { animation: "wave", height: 20, width: "30%", variant: 'text' }), _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: 'text' })] }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 30, width: "20%", variant: "text" }), _jsx(Box, Object.assign({ className: classes.map }, { children: _jsx(Skeleton, { variant: "rectangular", animation: "wave", height: "100%", width: "100%" }) })), _jsx(Skeleton, { animation: "wave", height: 20, width: "30%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" })] }) })));
 }

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

@@ -38,4 +38,4 @@ export interface EventMediaWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function EventMediaWidget(inProps: EventMediaWidgetProps): JSX.Element;
+export default function EventMediaWidget(inProps: EventMediaWidgetProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EventMediaWidget/EventMediaWidget.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
 import { Button, CardActions, CardContent, CardHeader, Divider, Icon, Stack, Tooltip, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { Box, useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
@@ -246,7 +245,7 @@ export default function EventMediaWidget(inProps) {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: true }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
                                     background: `url(${media.image}) no-repeat center`
-                                }, className: classes.dialogMediaWrapper }, { children: _jsx(Stack, Object.assign({ className: classes.dialogButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ className: classes.dialogLoadingButton, loading: mediaId === media.id, size: "large", onClick: () => handleRemoveMedia(media.id), sx: {
+                                }, className: classes.dialogMediaWrapper }, { children: _jsx(Stack, Object.assign({ className: classes.dialogButtonWrapper }, { children: _jsx(Button, Object.assign({ className: classes.dialogLoadingButton, loading: mediaId === media.id, size: "large", onClick: () => handleRemoveMedia(media.id), sx: {
                                             color: (theme) => (mediaId === media.id ? 'transparent' : theme.palette.common.white)
                                         } }, { children: _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => _jsx(EventMediaSkeleton, {}, i))] })) })) }))), openDialogConfirm && (_jsx(ConfirmDialog, { open: true, title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction }))] })));
 }

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

@@ -1,2 +1,2 @@
-export default function EventMediaWidgetSkeleton(): JSX.Element;
-export declare function EventMediaSkeleton(): JSX.Element;
+export default function EventMediaWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function EventMediaSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EventMediaWidget/TriggerButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { LoadingButtonProps } from '@mui/lab';
+import { ButtonProps } from '@mui/material';
 import { SCMediaType } from '@selfcommunity/types';
-export interface TriggerIconButtonProps extends LoadingButtonProps {
+export interface TriggerIconButtonProps extends ButtonProps {
     /**
      * Callback triggered when a media is added
      * @param media
@@ -13,5 +13,5 @@ export interface TriggerIconButtonProps extends LoadingButtonProps {
      */
     isSquare?: boolean;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Pick<TriggerIconButtonProps, "id" | "role" | "className" | "style" | "classes" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "name" | "type" | "href" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loadingIndicator" | "loadingPosition" | "onAdd" | "isSquare"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<TriggerIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;

package/lib/esm/components/EventMediaWidget/TriggerButton.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Stack, Typography, Icon, styled } from '@mui/material';
+import { Stack, Typography, Icon, styled, Button } from '@mui/material';
 import ChunkedUploady from '@rpldy/chunked-uploady';
 import { Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';
@@ -16,7 +15,7 @@ const classes = {
     triggerContent: `${PREFIX}-trigger-content`,
     triggerIcon: `${PREFIX}-trigger-icon`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'TriggerRoot',
     overridesResolver: (_props, styles) => styles.triggerRoot,

package/lib/esm/components/EventMediaWidget/asUploadButton.d.ts

@@ -1,7 +1,7 @@
 import { UploadButtonProps } from '@rpldy/upload-button';
 import type { ComponentType } from 'react';
-declare type FileInputProps = {
+type FileInputProps = {
     accept: string;
 };
-declare const asUploadButton: (Component: ComponentType<any>, inputProps: FileInputProps) => import("react").ForwardRefExoticComponent<Pick<UploadButtonProps<Element>, "id" | "className" | "text" | "children" | "onClick" | "method" | "headers" | "paramName" | "params" | "forceJsonResponse" | "withCredentials" | "formatGroupParamName" | "sendWithFormData" | "formDataAllowUndefined" | "formatServerResponse" | "isSuccessfulCall" | "destination" | "fileFilter" | "autoUpload" | "clearPendingOnAdd" | "grouped" | "maxGroupSize" | "inputFieldName" | "fastAbortThreshold" | "userData" | "extraProps"> & import("react").RefAttributes<any>>;
+declare const asUploadButton: (Component: ComponentType<any>, inputProps: FileInputProps) => import("react").ForwardRefExoticComponent<Omit<UploadButtonProps<Element>, "ref"> & import("react").RefAttributes<any>>;
 export default asUploadButton;

package/lib/esm/components/EventMediaWidget/index.d.ts

@@ -1,4 +1,5 @@
 import EventMediaWidget, { EventMediaWidgetProps } from './EventMediaWidget';
 import EventMediaWidgetSkeleton from './Skeleton';
 export default EventMediaWidget;
-export { EventMediaWidgetSkeleton, type EventMediaWidgetProps };
+export { EventMediaWidgetSkeleton };
+export { EventMediaWidgetProps };

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

@@ -44,4 +44,4 @@ export interface EventMembersWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function EventMembersWidget(inProps: EventMembersWidgetProps): JSX.Element;
+export default function EventMembersWidget(inProps: EventMembersWidgetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import 'swiper/css';
-export default function EventMembersWidgetSkeleton(): JSX.Element;
+export default function EventMembersWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts

@@ -26,5 +26,5 @@ interface TabComponentProps {
     };
     handleRefresh?: (tabValue: TabContentType) => void;
 }
-export default function TabContentComponent(props: TabComponentProps): JSX.Element;
+export default function TabContentComponent(props: TabComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/esm/components/EventMembersWidget/index.d.ts

@@ -1,4 +1,4 @@
 import EventMembersWidget, { EventMembersWidgetProps } from './EventMembersWidget';
 import EventMembersWidgetSkeleton from './Skeleton';
 export default EventMembersWidget;
-export { EventMembersWidgetSkeleton, type EventMembersWidgetProps };
+export { EventMembersWidgetSkeleton, EventMembersWidgetProps };

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

@@ -48,4 +48,4 @@ export interface EventParticipantsButtonProps extends Pick<ButtonProps, Exclude<
 
  * @param inProps
  */
-export default function EventParticipantsButton(inProps: EventParticipantsButtonProps): JSX.Element;
+export default function EventParticipantsButton(inProps: EventParticipantsButtonProps): import("react/jsx-runtime").JSX.Element;