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

package/lib/esm/components/Groups/Groups.js

@@ -172,21 +172,21 @@ export default function Groups(inProps) {
     /**
      * Renders groups list
      */
-    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ size: { md: 6 } }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                             e.preventDefault();
                             if (e.key === 'Enter') {
                                 fetchGroups();
                             }
-                        }, InputProps: {
-                            endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
-                                            setSearch('');
-                                            fetchGroups('');
-                                        }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
+                        }, slotProps: {
+                            input: {
+                                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                                setSearch('');
+                                                fetchGroups('');
+                                            }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
+                            }
                         } }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ size: { sm: 8, md: 6 }, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});

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

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-;
 import { PREFIX } from './constants';
 import { Box, Grid, styled } from '@mui/material';
 import classNames from 'classnames';
@@ -36,5 +35,5 @@ const Root = styled(Box, {
  */
 export default function GroupsSkeleton(inProps) {
     const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6 }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }), 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.groups }, { children: [...Array(groupsNumber)].map((_category, index) => (_jsx(Grid, Object.assign({ size: { sm: 8, md: 6 } }, { children: _jsx(GroupSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, GroupSkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/Incubator/Incubator.js

@@ -24,7 +24,7 @@ const Root = styled(Widget, {
 })(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(LinearProgress, Object.assign({ variant: "determinate" }, props)), _jsx(Box, Object.assign({ sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' } }, { children: props.subscribers !== 0 && (_jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: props.subscribers }))) })), _jsxs(Grid, Object.assign({ container: true, spacing: 2, className: className }, { children: [_jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Typography, Object.assign({ align: "right" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
+    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(LinearProgress, Object.assign({ variant: "determinate" }, props)), _jsx(Box, Object.assign({ sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' } }, { children: props.subscribers !== 0 && (_jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: props.subscribers }))) })), _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: className }, { children: [_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Typography, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Typography, Object.assign({ align: "right" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
 }
 /**
  * > API documentation for the Community-JS Incubator component. Learn about the available props and the CSS API.
@@ -59,7 +59,7 @@ export default function Incubator(inProps) {
     });
     const { incubatorId = null, incubator = null, className = null, autoHide = false, subscribeButtonProps = {}, ButtonProps = {}, detailView = false } = props, rest = __rest(props, ["incubatorId", "incubator", "className", "autoHide", "subscribeButtonProps", "ButtonProps", "detailView"]);
     // STATE
-    const { scIncubator, setSCIncubator } = useSCFetchIncubator({ id: incubatorId, incubator });
+    const { scIncubator } = useSCFetchIncubator({ id: incubatorId, incubator });
     // CONTEXT
     const scRoutingContext = useSCRouting();
     const [openAlert, setOpenAlert] = useState(false);

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

@@ -38,5 +38,5 @@ const Root = styled(Widget, {
  *
  */
 export default function IncubatorSkeleton(props) {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.primary }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" }) })), _jsxs(Typography, Object.assign({ className: classes.secondary }, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" })] })), _jsxs(Grid, Object.assign({ container: true, spacing: 1, className: classes.progressBar }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 12 }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), _jsx(CardActions, Object.assign({ className: classes.action }, { children: _jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.primary }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" }) })), _jsxs(Typography, Object.assign({ className: classes.secondary }, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "50%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" })] })), _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 1, className: classes.progressBar }, { children: [_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), _jsx(CardActions, Object.assign({ className: classes.action }, { children: _jsx(Button, Object.assign({ disabled: true, variant: "outlined", size: "small" }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
 }

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -140,7 +140,9 @@ export default function LessonReleaseMenu(inProps) {
             } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, slots: {
                     //actionBar: PickerActionBar,
                     tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
-                    textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) }))) }) })))
+                    textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, slotProps: {
+                            input: Object.assign(Object.assign({}, params.slotProps.input), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) }))) })
+                        } })))
                 }, slotProps: {
                     tabs: {
                         hidden: false
@@ -153,17 +155,21 @@ export default function LessonReleaseMenu(inProps) {
                     actionBar: {
                         actions: ['cancel', 'clear', 'accept']
                     }
-                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, InputProps: {
-                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, slotProps: {
+                        input: {
+                            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
+                        }
                     }, disabled: isDisabled }), _jsxs(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
                         vertical: 'bottom',
                         horizontal: 'left'
                     }, transformOrigin: {
                         vertical: 'top',
                         horizontal: 'left'
-                    } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), _jsxs(Box, Object.assign({ className: classes.popoverContent }, { children: [_jsxs(Box, Object.assign({ className: classes.popoverSelection }, { children: [_jsx(TextField, { type: "number", value: dripDelay, onChange: handleValueChange, InputProps: {
-                                                inputProps: {
-                                                    min: 0
+                    } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), _jsxs(Box, Object.assign({ className: classes.popoverContent }, { children: [_jsxs(Box, Object.assign({ className: classes.popoverSelection }, { children: [_jsx(TextField, { type: "number", value: dripDelay, onChange: handleValueChange, slotProps: {
+                                                input: {
+                                                    inputProps: {
+                                                        min: 0
+                                                    }
                                                 }
                                             } }), _jsx(FormControl, { children: _jsxs(RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [_jsx(FormControlLabel, { value: unitType.DAYS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), _jsx(FormControlLabel, { value: unitType.WEEKS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: dripDelay > 0 ? (_jsx(FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), _jsx(Button, Object.assign({ className: classes.popoverAction, variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
 }

package/lib/esm/components/LiveStreamForm/LiveStreamForm.js

@@ -34,7 +34,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 const messages = defineMessages({
     title: {
         id: 'ui.liveStreamForm.title.placeholder',
@@ -198,8 +198,6 @@ export default function LiveStreamForm(inProps) {
         let _message;
         if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
                     link: (...chunks) => (_jsx(Link, Object.assign({ target: "_blank", to: `${isStage ? HUB_STAGE : HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
@@ -231,12 +229,18 @@ export default function LiveStreamForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [warning, _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.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, InputProps: {
-                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
-                        }, error: Boolean(field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), _jsx(TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, InputProps: {
-                            endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
-                        }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), _jsx(TextField, { multiline: true, rows: 4, 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: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [warning, _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.title, placeholder: `${intl.formatMessage(messages.title)}`, margin: "normal", value: field.title, name: "title", onChange: handleChange, slotProps: {
+                            input: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_TITLE_MAX_LENGTH - field.title.length }))
+                            }
+                        }, error: Boolean(field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH) || Boolean(error['titleError']), helperText: field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.title.error.maxLength", defaultMessage: "ui.liveStreamForm.title.error.maxLength" })) : error['titleError'] ? (error['titleError']) : null }), _jsx(TextField, { required: true, className: classes.slug, placeholder: `${intl.formatMessage(messages.slug)}`, margin: "normal", value: field.slug, name: "slug", onChange: handleChange, slotProps: {
+                            input: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: LIVE_STREAM_SLUG_MAX_LENGTH - field.slug.length }))
+                            }
+                        }, error: Boolean(field.slug.length > LIVE_STREAM_SLUG_MAX_LENGTH) || Boolean(error['slugError']), helperText: field.title.length > LIVE_STREAM_SLUG_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.slug.error.maxLength", defaultMessage: "ui.liveStreamForm.slug.error.maxLength" })) : error['slugError'] ? (error['slugError']) : null }), _jsx(TextField, { multiline: true, rows: 4, 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: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
+                            }
                         }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(LiveStreamSettingsForm, { settings: field.settings, onChange: handleChangeSettings }), 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.title ||
                                 field.isSubmitting ||
                                 field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||

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

@@ -1,4 +1,4 @@
-export declare type InitialFieldState = {
+export type InitialFieldState = {
     title: string;
     description: string;
     slug?: string;
@@ -7,5 +7,5 @@ export declare type InitialFieldState = {
     coverFile?: string | Blob;
     isSubmitting: boolean;
 };
-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/LiveStreamRoom/LiveStreamVideoConference/ControlBar.d.ts

@@ -1,7 +1,7 @@
 import { Track } from 'livekit-client';
 import * as React from 'react';
 /** @public */
-export declare type ControlBarControls = {
+export type ControlBarControls = {
     microphone?: boolean;
     camera?: boolean;
     chat?: boolean;
@@ -26,4 +26,4 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
  * The `ControlBar` prefab gives the user the basic user interface to control their
  * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
  */
-export declare function ControlBar({ variation, controls, saveUserChoices, onDeviceError, ...props }: ControlBarProps): JSX.Element;
+export declare function ControlBar({ variation, controls, saveUserChoices, onDeviceError, ...props }: ControlBarProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/DisconnectButton.js

@@ -69,5 +69,9 @@ export const DisconnectButton =
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ ref: ref }, rest, { onClick: handleOnLeave }, { children: props.children })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(_Fragment, {}), content: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminate", defaultMessage: "ui.liveStreamRoom.live.terminate" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: closeLive, onChange: handleChangeCloseLive, slotProps: {
+                                        input: {
+                                            'aria-label': 'controlled'
+                                        }
+                                    } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.live.terminatePermanently", defaultMessage: "ui.liveStreamRoom.live.terminatePermanently" }) }) })] }), onConfirm: handleLeaveAction, isUpdating: isUpdating, onClose: () => setOpenConfirmDialog(false) }))] }));
 });

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/FocusLayout.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
 import type { ParticipantClickEvent } from '@livekit/components-core';
-export declare type FocusLayoutContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export type FocusLayoutContainerProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * The `FocusLayoutContainer` is a layout component that expects two children:
  * A small side component: In a video conference, this is usually a carousel of participants
  * who are not in focus. And a larger main component to display the focused participant.
  * For example, with the `FocusLayout` component.
  */
-export declare function FocusLayoutContainer(props: FocusLayoutContainerProps): JSX.Element;
-export declare function FocusLayoutContainerNoParticipants(props: FocusLayoutContainerProps): JSX.Element;
+export declare function FocusLayoutContainer(props: FocusLayoutContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FocusLayoutContainerNoParticipants(props: FocusLayoutContainerProps): import("react/jsx-runtime").JSX.Element;
 export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
     /** The track to display in the focus layout. */
     trackRef?: TrackReferenceOrPlaceholder;
@@ -19,4 +19,4 @@ export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * The `FocusLayout` component is just a light wrapper around the `ParticipantTile` to display a single participant.
  */
-export declare function FocusLayout({ trackRef, disableTileFocusToggle, ...htmlProps }: FocusLayoutProps): JSX.Element;
+export declare function FocusLayout({ trackRef, disableTileFocusToggle, ...htmlProps }: FocusLayoutProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/LiveStreamSettingsMenu.js

@@ -15,7 +15,7 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     borderRadius: 7,
     color: theme.palette.common.white,
@@ -26,7 +26,7 @@ const Root = styled(Button, {
 const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
+    overridesResolver: (_props, styles) => styles.menuRoot
 })(({ theme }) => ({
     '& .MuiPaper-root': {
         minWidth: 120,
@@ -90,7 +90,11 @@ export default function LiveStreamSettingsMenu(inProps) {
           }
     };
       */
-    const MenuContent = useMemo(() => (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), _jsx(FormControlLabel, { labelPlacement: "start", control: _jsx(Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, inputProps: { 'aria-label': 'controlled' } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
+    const MenuContent = useMemo(() => (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1", component: "div" }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect" }) }) })), _jsx(FormControlLabel, { labelPlacement: "start", control: _jsx(Switch, { checked: blurEnabled, disabled: actionBlurDisabled, onChange: handleBlur, slotProps: {
+                        input: {
+                            'aria-label': 'controlled'
+                        }
+                    } }), label: _jsx(FormattedMessage, { id: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect", defaultMessage: "ui.liveStreamRoom.settingsMenu.visualEffect.blurEffect" }) })] })), [blurEnabled, actionBlurDisabled, handleBlur]);
     if (onlyContentMenu) {
         return MenuContent;
     }

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantPlaceholder.d.ts

@@ -2,5 +2,5 @@ import type { SVGProps } from 'react';
 /**
  * @internal
  */
-declare const SvgParticipantPlaceholder: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgParticipantPlaceholder: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgParticipantPlaceholder;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.d.ts

@@ -7,13 +7,13 @@ import type { ParticipantClickEvent, TrackReferenceOrPlaceholder } from '@liveki
  */
 export declare function ParticipantContextIfNeeded(props: React.PropsWithChildren<{
     participant?: Participant;
-}>): JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 /**
  * Only create a `TrackRefContext` if there is no `TrackRefContext` already.
  */
 export declare function TrackRefContextIfNeeded(props: React.PropsWithChildren<{
     trackRef?: TrackReferenceOrPlaceholder;
-}>): JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export interface ParticipantTileProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The track reference to display. */
     trackRef?: TrackReferenceOrPlaceholder;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/PreJoin.d.ts

@@ -56,4 +56,4 @@ export declare function usePreviewDevice<T extends LocalVideoTrack | LocalAudioT
  * ```
  * @public
  */
-export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): JSX.Element;
+export declare function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/RecordingIndicator.d.ts

@@ -2,4 +2,4 @@
  * RecordingIndicator
  * @alpha
  */
-export default function RecordingIndicator(): JSX.Element;
+export default function RecordingIndicator(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/SettingsMenuToggle.d.ts

@@ -12,7 +12,7 @@ export declare function useSettingsToggle({ props }: UseSettingsToggleProps): {
         'aria-pressed': string;
     };
 };
-export declare type SettingsMenuToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type SettingsMenuToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * The `SettingsMenuToggle` component is a button that toggles the visibility of the `SettingsMenu` component.
  */

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/TrackToggle.d.ts

@@ -1,7 +1,7 @@
 import type { CaptureOptionsBySource, ToggleSource } from '@livekit/components-core';
 import * as React from 'react';
 import { Track, TrackPublishOptions } from 'livekit-client';
-export declare function getSourceIcon(source: Track.Source, enabled: boolean): JSX.Element;
+export declare function getSourceIcon(source: Track.Source, enabled: boolean): import("react/jsx-runtime").JSX.Element;
 export interface TrackToggleProps<T extends ToggleSource> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     source: T;
     showIcon?: boolean;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/VideoConference.d.ts

@@ -23,4 +23,4 @@ export interface VideoConferenceProps {
  * of participants, basic non-persistent chat, screen sharing, and more.
  *
  */
-export declare function VideoConference(inProps: VideoConferenceProps): JSX.Element;
+export declare function VideoConference(inProps: VideoConferenceProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/utils.d.ts

@@ -7,12 +7,12 @@ export declare function chain(...callbacks: any[]): (...args: any[]) => void;
 interface Props {
     [key: string]: any;
 }
-declare type TupleTypes<T> = {
+type TupleTypes<T> = {
     [P in keyof T]: T[P];
 } extends {
     [key: number]: infer V;
 } ? V : never;
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids

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

@@ -14,7 +14,7 @@ export interface TokenResult {
     accessToken: string;
 }
 export declare function isVideoCodec(codec: string): codec is VideoCodec;
-export declare type ConnectionDetails = {
+export type ConnectionDetails = {
     serverUrl: string;
     roomName: string;
     participantName: string;

package/lib/esm/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Autocomplete, TextField, CircularProgress, styled } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -14,7 +14,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({
     minWidth: 120
 }));
@@ -83,11 +83,11 @@ export default function LocationAutocomplete(inProps) {
         }
     }, [value]);
     // Handlers
-    const handleChange = (event, value) => {
+    const handleChange = (_event, value) => {
         setValue(value ? { location: value.full_address, lat: value.lat, lng: value.lng } : null);
         onChange && onChange(value);
     };
-    const handleSearch = (event, _search) => {
+    const handleSearch = (_event, _search) => {
         setSearch(_search);
     };
     // Render
@@ -97,10 +97,10 @@ export default function LocationAutocomplete(inProps) {
         }
         return [...locations, { lat: value.lat, lng: value.lng, full_address: value.location }];
     }, [value, locations]);
-    return (_jsx(Root, Object.assign({ className: classes.root, options: options || [], 
-        // @ts-ignore
-        getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.full_address) || (option === null || option === void 0 ? void 0 : option.location) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: _jsx(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+    return (_jsx(Root, Object.assign({ className: classes.root, options: options || [], getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option['full_address']) || (option === null || option === void 0 ? void 0 : option['location']) || '', filterOptions: (x) => x, autoComplete: true, includeInputInList: true, value: value || null, selectOnFocus: true, handleHomeEndKeys: true, disabled: disabled, noOptionsText: _jsx(FormattedMessage, { id: "ui.locationAutocomplete.empty", defaultMessage: "ui.locationAutocomplete.empty" }), onChange: handleChange, onInputChange: handleSearch, isOptionEqualToValue: (option, value) => value.lat === option.lat && value.lng === option.lng, renderInput: (params) => {
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'location', endAdornment: (_jsxs(_Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })
+                } })));
         }, renderOption: (props, option, { inputValue }) => {
             const matches = match(option.full_address, inputValue);
             const parts = parse(option.full_address, matches);

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

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

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

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

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

@@ -1,4 +1,4 @@
 import MyEventsWidget, { MyEventsWidgetProps } from './MyEventsWidget';
 import MyEventsWidgetSkeleton from './Skeleton';
 export default MyEventsWidget;
-export { MyEventsWidgetSkeleton, type MyEventsWidgetProps };
+export { MyEventsWidgetSkeleton, MyEventsWidgetProps };

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts

@@ -6,4 +6,4 @@ export interface DefaultDrawerContentProps extends BoxProps {
     onClose?: () => void;
     onClickHome?: () => void;
 }
-export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
+export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerSkeleton.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@mui/material';
 export declare const PREFIX = "SCDefaultDrawerSkeleton";
-export declare type DefaultDrawerSkeletonProps = BoxProps;
+export type DefaultDrawerSkeletonProps = BoxProps;
 /**
  * > API documentation for the Community-JS Default Drawer Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/NavigationMenuIconButton/DefaultHeaderContent.d.ts

@@ -1,3 +1,3 @@
 import { BoxProps } from '@mui/material';
-export declare type DefaultHeaderContentProps = BoxProps;
-export default function DefaultHeaderContent(inProps: DefaultHeaderContentProps): JSX.Element;
+export type DefaultHeaderContentProps = BoxProps;
+export default function DefaultHeaderContent(inProps: DefaultHeaderContentProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -31,7 +31,7 @@ export default function NavigationMenuDrawer(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, Object.assign({ onClose: () => onClose({}, 'backdropClick') }, defaultDrawerContentProps)), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
+    const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, Object.assign({ onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose({}, 'backdropClick') }, defaultDrawerContentProps)), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const footerContent = (() => {
         if (typeof drawerFooterContent === 'function') {
             return drawerFooterContent({ handleCloseMenuDrawer: onClose });

package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -245,5 +245,13 @@ export default function NavigationSettingsIconButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    } }, { children: renderList() }))) }))] }));
 }

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

@@ -108,4 +108,4 @@ export interface NavigationToolbarProps extends ToolbarProps {
  *
  * @param inProps
  */
-export default function NavigationToolbar(inProps: NavigationToolbarProps): JSX.Element;
+export default function NavigationToolbar(inProps: NavigationToolbarProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationToolbar/NotificationMenu.d.ts

@@ -7,4 +7,4 @@ export interface NotificationsMenuProps extends MenuProps {
      */
     SnippetNotificationsProps?: SnippetNotificationsProps;
 }
-export default function NotificationMenu(inProps: NotificationsMenuProps): JSX.Element;
+export default function NotificationMenu(inProps: NotificationsMenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/NavigationToolbar/NotificationMenu.js

@@ -22,11 +22,8 @@ export default function NotificationMenu(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { PaperProps = { className: classes.paper }, MenuListProps = { component: Box }, SnippetNotificationsProps = {} } = props, rest = __rest(props, ["PaperProps", "MenuListProps", "SnippetNotificationsProps"]);
+    const { slotProps = { paper: { className: classes.paper }, list: { component: Box } }, SnippetNotificationsProps = {} } = props, rest = __rest(props, ["slotProps", "SnippetNotificationsProps"]);
     // HOOKS
     const scRoutingContext = useSCRouting();
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    _jsxs(Root, Object.assign({ className: classes.root, PaperProps: PaperProps, MenuListProps: MenuListProps }, rest, { children: [_jsx(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), _jsx(Button, Object.assign({ className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: _jsx(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root, slotProps: slotProps }, rest, { children: [_jsx(SnippetNotifications, Object.assign({ className: classes.notifications }, SnippetNotificationsProps)), _jsx(Button, Object.assign({ className: classes.link, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), variant: "text" }, { children: _jsx(FormattedMessage, { id: "ui.header.notifications.button.seeMore", defaultMessage: "ui.header.notifications.button.seeMore" }) }))] })));
 }

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

@@ -76,4 +76,4 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
  *
  * @param inProps
  */
-export default function NavigationToolbarMobile(inProps: NavigationToolbarMobileProps): JSX.Element;
+export default function NavigationToolbarMobile(inProps: NavigationToolbarMobileProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/OnBoardingWidget/ActionsButton.js

@@ -20,17 +20,17 @@ const classes = {
 const Root = styled(IconButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const SwipeableDrawerRoot = styled(SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
+    overridesResolver: (_props, styles) => styles.drawerRoot
 })(() => ({}));
 const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
+    overridesResolver: (_props, styles) => styles.menuRoot
 })(() => ({}));
 export default function OnBoardingActionsButton(inProps) {
     // PROPS
@@ -76,5 +76,13 @@ export default function OnBoardingActionsButton(inProps) {
             ];
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    } }, { children: renderList() }))) }))] }));
 }