@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.0

package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -173,24 +174,11 @@ export default function CategoriesSuggestionWidget(inProps) {
     };
     // RENDER
     if ((autoHide && !state.count && state.initialized) || !scUserContext.user) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoriesSuggestionWidget.title", defaultMessage: "ui.categoriesSuggestionWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoriesSuggestionWidget.noResults", defaultMessage: "ui.categoriesSuggestionWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((category) => (React.createElement(ListItem, { key: category.id },
-                React.createElement(Category, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollow } }, CategoryProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
-                React.createElement(FormattedMessage, { id: "ui.categoriesSuggestionWidget.button.showAll", defaultMessage: "ui.categoriesSuggestionWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoriesSuggestionWidget.title", id: "ui.categoriesSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoriesSuggestionWidget.noMoreResults", defaultMessage: "ui.categoriesSuggestionWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((c) => (React.createElement(ListItem, { key: c.id },
-                    React.createElement(Category, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollow } })))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoriesSuggestionWidget.title", defaultMessage: "ui.categoriesSuggestionWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoriesSuggestionWidget.noResults", defaultMessage: "ui.categoriesSuggestionWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((category) => (_jsx(ListItem, { children: _jsx(Category, Object.assign({ elevation: 0, category: category, categoryFollowButtonProps: { onFollow: handleFollow } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.categoriesSuggestionWidget.button.showAll", defaultMessage: "ui.categoriesSuggestionWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoriesSuggestionWidget.title", id: "ui.categoriesSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(CategorySkeleton, Object.assign({ elevation: 0 }, CategoryProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoriesSuggestionWidget.noMoreResults", defaultMessage: "ui.categoriesSuggestionWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((c) => (_jsx(ListItem, { children: _jsx(Category, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollow } })) }, c.id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
 import CategorySkeleton from '../Category/Skeleton';
@@ -35,8 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function CategoriesSuggestionWidgetSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(4)].map((category, index) => (React.createElement(ListItem, { key: index },
-                React.createElement(CategorySkeleton, { elevation: 0 }))))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsx(CardContent, { children: _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => (_jsx(ListItem, { children: _jsx(CategorySkeleton, { elevation: 0 }) }, index))) })) }) })));
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Tooltip, Typography } from '@mui/material';
 import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
@@ -76,12 +77,11 @@ export default function Category(inProps) {
     // HOOKS
     const intl = useIntl();
     if (!scCategory) {
-        return React.createElement(CategorySkeleton, { elevation: elevation });
+        return _jsx(CategorySkeleton, { elevation: elevation });
     }
     // RENDER
     if (!autoHide) {
-        return (React.createElement(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: React.createElement(React.Fragment, null, showTooltip ? (React.createElement(Tooltip, { title: scCategory.name },
-                React.createElement(Typography, { className: classes.primary, component: "span", variant: "body1" }, scCategory.name))) : (scCategory.name)), secondary: React.createElement(React.Fragment, null, showTooltip ? (React.createElement(Typography, { className: classes.secondary, component: "p", variant: "body2" }, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan)) : (React.createElement(React.Fragment, null, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan))), actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : (_jsx(_Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { Button, useTheme } from '@mui/material';
@@ -38,6 +38,5 @@ const Root = styled(BaseItem, {
  */
 export default function CategorySkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true, className: classes.button },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: 50, className: classes.action })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { image: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: _jsx(Skeleton, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: _jsx(Skeleton, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: _jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 50, className: classes.action }) })) })));
 }

package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Autocomplete from '@mui/material/Autocomplete';
@@ -50,7 +51,7 @@ const CategoryAutocomplete = (inProps) => {
     // Props
     const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
         variant: 'outlined',
-        label: React.createElement(FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
+        label: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
     } } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = useState(false);
@@ -89,18 +90,14 @@ const CategoryAutocomplete = (inProps) => {
         setValue(newValue);
     };
     // Render
-    return (React.createElement(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: React.createElement(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
-            return value.map((option, index) => (React.createElement(Chip, Object.assign({ key: option.id, id: option.id, label: option.name, color: option.color }, getTagProps({ index })))));
+    return (_jsx(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
+            return value.map((option, index) => (_jsx(Chip, Object.assign({ id: option.id, label: option.name, color: option.color }, getTagProps({ index })), option.id)));
         }, renderOption: (props, option, { selected, inputValue }) => {
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (React.createElement("li", Object.assign({}, props),
-                checkboxSelect && React.createElement(Checkbox, { style: { marginRight: 8 }, checked: selected }),
-                React.createElement(Chip, { label: React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement("span", { key: index, style: { fontWeight: part.highlight ? 700 : 400 } }, part.text)))) })));
+            return (_jsxs("li", Object.assign({}, props, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
         }, renderInput: (params) => {
-            return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (React.createElement(React.Fragment, null,
-                        isLoading ? React.createElement(CircularProgress, { color: "inherit", size: 20 }) : null,
-                        params.InputProps.endAdornment)) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 export default CategoryAutocomplete;

package/lib/esm/components/CategoryFollowButton/CategoryFollowButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { useSCContext, useSCFetchCategory, useSCUser } from '@selfcommunity/react-core';
@@ -89,5 +90,5 @@ export default function CategoryFollowButton(inProps) {
     if (!scCategory || (scCategory && followed && scCategory.auto_follow === SCCategoryAutoFollowType.FORCED)) {
         return null;
     }
-    return (React.createElement(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: classNames(classes.root, className) }, rest), followed && scUserContext.user ? (React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" }))));
+    return (_jsx(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: classNames(classes.root, className) }, rest, { children: followed && scUserContext.user ? (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));
 }

package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-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 { styled } from '@mui/material/styles';
 import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
 import BaseDialog from '../../shared/BaseDialog';
@@ -122,11 +123,5 @@ export default function CategoryFollowersButton(inProps) {
     // RENDER
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest), loading || !scCategory ? (React.createElement(AvatarGroupSkeleton, Object.assign({}, rest))) : (React.createElement(AvatarGroup, { total: scCategory.followers_counter }, followers.map((c) => (React.createElement(Avatar, { key: c.id, alt: c.username, src: c.avatar })))))),
-        open && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: React.createElement(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" })) },
-                React.createElement(List, null, followers.map((follower) => (React.createElement(ListItem, { key: follower.id },
-                    React.createElement(User, { elevation: 0, user: follower }))))))))));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scCategory.followers_counter }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }

package/lib/esm/components/CategoryHeader/CategoryHeader.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Paper, Typography } from '@mui/material';
 import CategoryFollowButton from '../CategoryFollowButton';
@@ -73,15 +74,5 @@ export default function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } }),
-        React.createElement(Box, { className: classes.info },
-            React.createElement(Typography, { variant: "h3", className: classes.name, gutterBottom: true }, scCategory.name),
-            scCategory.slogan && (React.createElement(Typography, { variant: "h5", className: classes.slogan }, scCategory.slogan)),
-            React.createElement(Box, { className: classes.followed },
-                React.createElement(Typography, { className: classes.followedCounter, component: "div" },
-                    React.createElement(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } })),
-                React.createElement(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))),
-            React.createElement(Box, { className: classes.action },
-                React.createElement(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), _jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), _jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -32,10 +32,5 @@ const Root = styled(Box, {
  *
  */
 export default function CategoryHeaderSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }),
-        React.createElement(Box, null,
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } })),
-        React.createElement(Box, null,
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }))));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }), _jsx(Box, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) }), _jsx(Box, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) })] })));
 }

package/lib/esm/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
@@ -174,26 +175,13 @@ export default function CategoryTrendingFeedWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((obj) => (React.createElement(ListItem, { key: obj[obj.type].id },
-                React.createElement(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, Object.assign({ className: classes.showMore }, (isMobile
-                ? { onClick: handleToggleDialogOpen }
-                : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) })),
-                React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((obj) => (React.createElement(ListItem, { key: obj[obj.type].id },
-                    React.createElement(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((obj) => (_jsx(ListItem, { children: _jsx(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore }, (isMobile
+                        ? { onClick: handleToggleDialogOpen }
+                        : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((obj) => (_jsx(ListItem, { children: _jsx(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Widget from '../Widget';
 import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
@@ -35,7 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function CategoryTrendingFeedWidgetSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(4)].map((post, index) => (React.createElement(FeedObjectSkeleton, { key: index, elevation: 0 })))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsx(CardContent, { children: _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((post, index) => (_jsx(FeedObjectSkeleton, { elevation: 0 }, index))) })) }) })));
 }

package/lib/esm/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
@@ -166,24 +167,11 @@ export default function CategoryTrendingUsersWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => (React.createElement(ListItem, { key: user.id },
-                React.createElement(User, Object.assign({ elevation: 0, user: user }, UserProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
-                React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
-                    React.createElement(User, Object.assign({ elevation: 0, user: user }, UserProps)))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Widget from '../Widget';
 import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
@@ -35,8 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function CategoryTrendingPeopleWidgetSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(4)].map((person, index) => (React.createElement(ListItem, { key: index },
-                React.createElement(UserSkeleton, { elevation: 0 }))))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsx(CardContent, { children: _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((person, index) => (_jsx(ListItem, { children: _jsx(UserSkeleton, { elevation: 0 }) }, index))) })) }) })));
 }

package/lib/esm/components/ChangeCover/ChangeCover.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert, Box, Button, Divider, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -166,60 +167,36 @@ export default function ChangeCover(inProps) {
      * Renders change cover menu items
      */
     function renderMenuItems() {
-        return (React.createElement(Box, null, loading ? (React.createElement(MenuItem, { sx: { justifyContent: 'center' } },
-            React.createElement(CircularProgress, { size: 15 }))) : (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(MenuItem, { disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(Icon, null, "add_circle_outline")),
-                React.createElement(FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })),
-            hasCover && (React.createElement(MenuItem, { className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(Icon, null, "delete")),
-                React.createElement(FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })))))));
+        return (_jsx(Box, { children: loading ? (_jsx(MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: _jsx(CircularProgress, { size: 15 }) }))) : (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsxs(MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "add_circle_outline" }) }), _jsx(FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && (_jsxs(MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "delete" }) }), _jsx(FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
     }
     /**
      * Renders change cover menu
      */
-    const cc = (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest),
-            React.createElement(Icon, null, "photo_camera")),
-        React.createElement(React.Fragment, null, isMobile ? (React.createElement(SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
-        !isMobile && (React.createElement(React.Fragment, null,
-            React.createElement(Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton },
-                React.createElement(Icon, null, "help_outline")),
-            isOpen && (React.createElement(Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                } },
-                React.createElement(Box, { sx: { p: '10px' } },
-                    React.createElement(Typography, { component: "h3" },
-                        React.createElement(FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" })),
-                    React.createElement(Divider, null),
-                    React.createElement(Typography, { component: "span" },
-                        React.createElement(FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                li: (chunks) => React.createElement("li", null, chunks),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                ul: (chunks) => React.createElement("ul", null, chunks)
-                            } }))))))),
-        openDeleteCoverDialog && (React.createElement(ConfirmDialog, { open: openDeleteCoverDialog, title: React.createElement(FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
-                setOpenDeleteCoverDialog(false);
-                setAnchorEl(null);
-            } }))));
+    const cc = (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: _jsx(Icon, { children: "photo_camera" }) })), _jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() }))) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: _jsx(Icon, { children: "help_outline" }) })), isOpen && (_jsx(Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right'
+                        } }, { children: _jsxs(Box, Object.assign({ sx: { p: '10px' } }, { children: [_jsx(Typography, Object.assign({ component: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            li: (chunks) => _jsx("li", { children: chunks }),
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            ul: (chunks) => _jsx("ul", { children: chunks })
+                                        } }) }))] })) })))] })), openDeleteCoverDialog && (_jsx(ConfirmDialog, { open: openDeleteCoverDialog, title: _jsx(FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
+                    setOpenDeleteCoverDialog(false);
+                    setAnchorEl(null);
+                } }))] }));
     /**
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }), cc));
+        return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: cc })));
     }
     return null;
 }

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
@@ -122,16 +123,13 @@ export default function ChangeGroupCover(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                React.createElement(Icon, null, "image"))));
+        return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: _jsx(Icon, { children: "image" }) }))] }));
     }
     return null;
 }

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -120,16 +121,13 @@ export default function ChangeGroupPicture(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                React.createElement(Icon, null, "photo_camera"))));
+        return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: _jsx(Icon, { children: "photo_camera" }) }))] }));
     }
     return null;
 }

package/lib/esm/components/ChangePicture/ChangePicture.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button } from '@mui/material';
 import ChangePictureDialog from './ChangePictureDialog/ChangePictureDialog';
@@ -62,9 +63,7 @@ export default function ChangePicture(inProps) {
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest), iconButton ? (React.createElement(Icon, null, "photo_camera")) : (React.createElement(FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" }))),
-            openChangePictureDialog && (React.createElement(ChangePictureDialog, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
+        return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest, { children: iconButton ? (_jsx(Icon, { children: "photo_camera" })) : (_jsx(FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" })) })), openChangePictureDialog && (_jsx(ChangePictureDialog, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))] }));
     }
     return null;
 }

package/lib/esm/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -1,5 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -178,25 +179,12 @@ export default function ChangePictureDialog(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.dialogRoot, className), title: React.createElement(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
-        React.createElement(Box, { className: classes.upload },
-            alert ? (React.createElement(Alert, { color: "error", onClose: () => setAlert(false) },
-                React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }))) : (React.createElement(React.Fragment, null,
-                React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-                React.createElement(Button, { disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : React.createElement(Icon, null, "folder_open") }, loading ? (React.createElement(CircularProgress, { size: 15 })) : (React.createElement(React.Fragment, null, error ? (React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" }))))))),
-            React.createElement(Typography, { component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true },
-                React.createElement(FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        li: (chunks) => React.createElement("li", null, chunks),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        ul: (chunks) => React.createElement("ul", null, chunks)
-                    } }))),
-        React.createElement(ImageList, { cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, avatars.map((avatar) => (React.createElement(Box, { className: classes.imageItem, key: avatar.id },
-            React.createElement(ImageListItem, { className: primary === avatar.id ? classes.primary : '', key: avatar.id, onClick: () => selectPrimaryAvatar(avatar) },
-                React.createElement("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }),
-                React.createElement(ImageListItemBar, { position: "top", actionIcon: React.createElement(IconButton, { onClick: () => handleOpen(avatar.id), size: "small" },
-                        React.createElement(Icon, null, "delete")) })))))),
-        openDeleteAvatarDialog && (React.createElement(ConfirmDialog, { open: openDeleteAvatarDialog, title: React.createElement(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.dialogRoot, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.upload }, { children: [alert ? (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Button, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : _jsx(Icon, { children: "folder_open" }) }, { children: loading ? (_jsx(CircularProgress, { size: 15 })) : (_jsx(_Fragment, { children: error ? (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), _jsx(Typography, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                li: (chunks) => _jsx("li", { children: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                ul: (chunks) => _jsx("ul", { children: chunks })
+                            } }) }))] })), _jsx(ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => (_jsx(Box, Object.assign({ className: classes.imageItem }, { children: _jsxs(ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [_jsx("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), _jsx(ImageListItemBar, { position: "top", actionIcon: _jsx(IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && (_jsx(ConfirmDialog, { open: openDeleteAvatarDialog, title: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
 }