@selfcommunity/react-ui 0.7.50-events.40 → 0.7.50-events.43

package/lib/esm/components/AccountReset/AccountReset.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Alert, Box, Button, CircularProgress } from '@mui/material';
@@ -140,15 +141,5 @@ export default function AccountReset(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), isSucceed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }),
-        successAction)) : validationCodeError ? (React.createElement(Alert, { severity: "error", className: classes.error },
-        React.createElement(FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }),
-        errorAction)) : isLoading ? (React.createElement(Box, { className: classes.validating },
-        React.createElement(CircularProgress, null),
-        React.createElement("p", null,
-            React.createElement(FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" })))) : (React.createElement("form", { className: classes.form, onSubmit: handleSubmit },
-        React.createElement(PasswordTextField, Object.assign({ className: classes.password, disabled: isSubmitting, label: React.createElement(FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && (React.createElement(FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })),
-        React.createElement(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }),
-            React.createElement(FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }))))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: isSucceed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }), successAction] }))) : validationCodeError ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }), errorAction] }))) : isLoading ? (_jsxs(Box, Object.assign({ className: classes.validating }, { children: [_jsx(CircularProgress, {}), _jsx("p", { children: _jsx(FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" }) })] }))) : (_jsxs("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [_jsx(PasswordTextField, Object.assign({ className: classes.password, disabled: isSubmitting, label: _jsx(FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && (_jsx(FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })), _jsx(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }) }))] }))) })));
 }

package/lib/esm/components/AccountVerify/AccountVerify.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
 import { Alert, Box, CircularProgress } from '@mui/material';
@@ -83,11 +84,5 @@ export default function AccountVerify(inProps) {
         return null;
     }
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), succeed ? (React.createElement(Alert, { severity: "success", className: classes.success },
-        typeof succeed === 'string' ? succeed : React.createElement(FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }),
-        successAction)) : error ? (React.createElement(Alert, { severity: "error", className: classes.error },
-        React.createElement(FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }),
-        errorAction)) : (React.createElement(React.Fragment, null,
-        React.createElement(CircularProgress, null),
-        React.createElement(FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? succeed : _jsx(FormattedMessage, { id: "ui.accountVerify.success", defaultMessage: "ui.accountVerify.success" }), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountVerify.error", defaultMessage: "ui.accountVerify.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountVerify.verifying", defaultMessage: "ui.accountVerify.verifying" })] })) })));
 }

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge, BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Icon, styled } from '@mui/material';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -67,23 +68,21 @@ export default function BottomNavigation(inProps) {
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     const isIOS = useMemo(() => iOS(), []);
     // RENDER
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
-        ? children
-        : [
-            React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
-            (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
-            (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
-                ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
-                !exploreStreamEnabled ? (React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true })) : null,
-            groupsEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "groups", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "groups") })) : null,
-            (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
-                groupsEnabled &&
-                eventsEnabled &&
-                !exploreStreamEnabled ? (React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true })) : null,
-            eventsEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "events", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "CalendarIcon") })) : null,
-            scUserContext.user && !groupsEnabled && !eventsEnabled ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
-                    React.createElement(Icon, null, "notifications_active")) })) : null,
-            privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },
-                    React.createElement(Icon, null, "email")) })) : null
-        ]));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
+            ? children
+            : [
+                _jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, "home"),
+                (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "explore" }) }, "explore")) : null,
+                (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                    ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
+                    !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
+                groupsEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "groups" }) }, "groups")) : null,
+                (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                    groupsEnabled &&
+                    eventsEnabled &&
+                    !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
+                eventsEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "CalendarIcon" }) }, "events")) : null,
+                scUserContext.user && !groupsEnabled && !eventsEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
+                privateMessagingEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: _jsx(Icon, { children: "email" }) })) }, "messages")) : null
+            ] })));
 }

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Button, CardContent } from '@mui/material';
 import PubSub from 'pubsub-js';
@@ -145,13 +146,5 @@ export default function BroadcastMessages(inProps) {
         onHeightChange && onHeightChange();
     }, [data.results.length, loading, viewAll, cacheStrategy]);
     const messagesToShow = [...unViewedMessages, ...data.results.slice(unViewedMessages.length, viewAll ? viewedMessageCounter : 1)];
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        messagesToShow.map((message, index) => (React.createElement(Box, { key: index },
-            React.createElement(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead }))))),
-        loading && !disableLoader && React.createElement(MessageSkeleton, null),
-        loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (React.createElement(Widget, { className: classes.boxLoadMore },
-            React.createElement(CardContent, null,
-                React.createElement(Button, { variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } },
-                    React.createElement(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }),
-                    React.createElement(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })))))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [messagesToShow.map((message, index) => (_jsx(Box, { children: _jsx(Message, Object.assign({ message: message }, MessageProps, { onClose: handleDisposeMessage, onRead: handleMarkRead })) }, index))), loading && !disableLoader && _jsx(MessageSkeleton, {}), loading !== null && !loading && (data.next || (data.count > 1 && viewedMessageCounter > 0 && !viewAll)) && (_jsx(Widget, Object.assign({ className: classes.boxLoadMore }, { children: _jsx(CardContent, { children: _jsxs(Button, Object.assign({ variant: "text", onClick: fetchOtherMessages, disabled: loading, color: "inherit", classes: { root: classes.buttonLoadMore } }, { children: [_jsx(Avatar, { component: "span", className: classes.avatarLoadMore, alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), _jsx(FormattedMessage, { id: "ui.broadcastMessages.loadMore", defaultMessage: "ui.broadcastMessages.loadMore" })] })) }) })))] })));
 }

package/lib/esm/components/BroadcastMessages/Message.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { Avatar, Box, CardContent, CardHeader, CardMedia, Chip, CircularProgress, Fade, IconButton, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
@@ -82,14 +83,7 @@ export default function Message(props) {
     }, [message]);
     // RENDER
     const renderContent = (banner) => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(CardContent, { className: classes.title },
-                React.createElement(Typography, { variant: "h6" }, banner.title)),
-            banner.image && React.createElement(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
-            (banner.body_text || banner.link_text) && (React.createElement(CardContent, { className: classes.content },
-                banner.body_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
-                banner.link_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" },
-                    React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
+        return (_jsxs(_Fragment, { children: [_jsx(CardContent, Object.assign({ className: classes.title }, { children: _jsx(Typography, Object.assign({ variant: "h6" }, { children: banner.title })) })), banner.image && _jsx(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }), (banner.body_text || banner.link_text) && (_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [banner.body_text && (_jsx(Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: banner.body_text }))), banner.link_text && (_jsx(Typography, Object.assign({ variant: "body1", color: "text.secondary" }, { children: _jsx("a", Object.assign({ href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, { children: banner.link_text })) })))] })))] }));
     };
     // Banner
     const { banner } = message;
@@ -98,21 +92,10 @@ export default function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-            React.createElement(Fade, { in: open, unmountOnExit: true },
-                React.createElement(Box, null,
-                    message.viewed_at === null && !disableMarkRead && (React.createElement(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })),
-                    React.createElement(CardHeader, { className: classes.header, avatar: React.createElement(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === SCBroadcastMessageTemplateType.DETAIL && (React.createElement(IconButton, { "aria-label": "close", onClick: handleClose, disabled: closing }, closing ? React.createElement(CircularProgress, { size: 20 }) : React.createElement(Icon, null, "close"))), title: React.createElement(Chip, { color: "secondary", size: "small", label: React.createElement(FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }),
-                    renderContent(banner)))));
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Fade, Object.assign({ in: open, unmountOnExit: true }, { children: _jsxs(Box, { children: [message.viewed_at === null && !disableMarkRead && (_jsx(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === SCBroadcastMessageTemplateType.DETAIL && (_jsx(IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? _jsx(CircularProgress, { size: 20 }) : _jsx(Icon, { children: "close" }) }))), title: _jsx(Chip, { color: "secondary", size: "small", label: _jsx(FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
     }
     // SCBroadcastMessageTemplateType.SNIPPET
-    return (React.createElement(Root, Object.assign({ id: id, className: className }, rest),
-        React.createElement(ListItem, { alignItems: 'center', component: 'div', classes: {
+    return (_jsx(Root, Object.assign({ id: id, className: className }, rest, { children: _jsxs(ListItem, Object.assign({ alignItems: 'center', component: 'div', classes: {
                 root: classNames(classes.listItemSnippet, classes.listItemSnippetNew)
-            } },
-            React.createElement(ListItemAvatar, { classes: { root: classes.messageIconWrap } },
-                React.createElement(Avatar, { variant: "circular", classes: { root: classes.messageIconSnippet } },
-                    React.createElement(Icon, null, "info"))),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
-                    React.createElement(Typography, { component: "span", color: "inherit" }, banner.title)) }))));
+            } }, { children: [_jsx(ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: _jsx(Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: _jsx(Icon, { children: "info" }) })) })), _jsx(ListItemText, { disableTypography: true, primary: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
 }

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, CardContent, CardHeader, Skeleton, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -40,17 +41,7 @@ const MessageSkeletonRoot = styled(Widget, {
  */
 export function MessageSkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(MessageSkeletonRoot, { className: messageClasses.root },
-        React.createElement(CardHeader, { className: messageClasses.header, avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }),
-        React.createElement(CardContent, { className: messageClasses.title },
-            React.createElement(React.Fragment, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%" }))),
-        React.createElement(Box, { className: messageClasses.media },
-            React.createElement(Skeleton, { height: 190, animation: "wave", variant: "rectangular" })),
-        React.createElement(CardContent, { className: messageClasses.content },
-            React.createElement(React.Fragment, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%" }),
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: 60 })))));
+    return (_jsxs(MessageSkeletonRoot, Object.assign({ className: messageClasses.root }, { children: [_jsx(CardHeader, { className: messageClasses.header, avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }), _jsx(CardContent, Object.assign({ className: messageClasses.title }, { children: _jsx(React.Fragment, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%" }) }) })), _jsx(Box, Object.assign({ className: messageClasses.media }, { children: _jsx(Skeleton, { height: 190, animation: "wave", variant: "rectangular" }) })), _jsx(CardContent, Object.assign({ className: messageClasses.content }, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "80%" }), _jsx(Skeleton, { animation: "wave", height: 10, width: 60 })] }) }))] })));
 }
 const classes = {
     root: `${PREFIX}-skeleton-root`
@@ -80,8 +71,5 @@ const Root = styled(Box, {
  *
  */
 export default function BroadcastMessagesSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(MessageSkeleton, null),
-        React.createElement(MessageSkeleton, null),
-        React.createElement(MessageSkeleton, null)));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsx(MessageSkeleton, {}), _jsx(MessageSkeleton, {}), _jsx(MessageSkeleton, {})] })));
 }

package/lib/esm/components/Categories/Categories.js

@@ -1,5 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Grid, TextField, Typography } from '@mui/material';
 import { CategoryService, Endpoints } from '@selfcommunity/api-services';
@@ -124,18 +125,12 @@ export default function Categories(inProps) {
      * Renders categories list
      */
     const filteredCategories = sortByAttr(getFilteredCategories(), 'order');
-    const c = (React.createElement(React.Fragment, null,
-        showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
-            React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
-        loading ? (React.createElement(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, !filteredCategories.length ? (React.createElement(Grid, { item: true },
-            React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-                React.createElement(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (React.createElement(React.Fragment, null, filteredCategories.map((category) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, key: category.id },
-            React.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })))))))))));
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_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, { fullWidth: true, value: filterName, label: _jsx(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), loading ? (_jsx(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (_jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) })) }))) : (_jsx(_Fragment, { children: filteredCategories.map((category) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 6, lg: 4 }, { children: _jsx(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */
     if (!contentAvailability && !scUserContext.user) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), c));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box, Grid } from '@mui/material';
 import CategorySkeleton from '../Category/Skeleton';
@@ -36,7 +36,5 @@ const Root = styled(Box, {
  */
 export default function CategoriesSkeleton(inProps) {
     const { className, CategorySkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "CategorySkeletonProps"]);
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, [...Array(15)].map((category, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4, key: index },
-            React.createElement(CategorySkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps))))))));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((category, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: _jsx(CategorySkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -179,24 +180,11 @@ export default function CategoriesPopularWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (state.initialized && autoHide && !state.count)) {
-        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.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.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: handleFollowersUpdate } }, CategoryProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
-                React.createElement(FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.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.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.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: handleFollowersUpdate } })))))))))));
-    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.categoriesPopularWidget.title", defaultMessage: "ui.categoriesPopularWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.noResults", defaultMessage: "ui.categoriesPopularWidget.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: handleFollowersUpdate } }, CategoryProps)) }, category.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.categoriesPopularWidget.button.showAll", defaultMessage: "ui.categoriesPopularWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoriesPopularWidget.title", id: "ui.categoriesPopularWidget.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.categoriesPopularWidget.noMoreResults", defaultMessage: "ui.categoriesPopularWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((c) => (_jsx(ListItem, { children: _jsx(Category, Object.assign({ elevation: 0, category: c }, CategoryProps, { categoryFollowButtonProps: { onFollow: handleFollowersUpdate } })) }, c.id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import CategoriesSuggestionWidgetSkeleton from '../CategoriesSuggestionWidget/Skeleton';
 import { styled } from '@mui/material/styles';
 import { PREFIX } from './constants';
@@ -30,5 +30,5 @@ const Root = styled(CategoriesSuggestionWidgetSkeleton, {
  *
  */
 export default function CategoriesPopularSkeleton(props) {
-    return React.createElement(Root, Object.assign({ className: classes.root }, props));
+    return _jsx(Root, Object.assign({ className: classes.root }, props));
 }

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' } }) })] })));
 }