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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -32,10 +32,6 @@ const Root = styled(Box, {
  *
  */
 function UserProfileInfoSkeleton() {
-    return (React.createElement(Root, { className: classes.root }, Array.from({ length: 3 }).map((v, i) => (React.createElement(Box, { className: classes.field, key: i },
-        React.createElement(Typography, { variant: "h6" },
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '50%' } })),
-        React.createElement(Typography, { variant: "body2" },
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '80%' } })))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: Array.from({ length: 3 }).map((v, i) => (_jsxs(Box, Object.assign({ className: classes.field }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '50%' } }) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '80%' } }) }))] }), i))) })));
 }
 export default UserProfileInfoSkeleton;

package/lib/esm/components/UserInfo/UserInfo.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, Typography } from '@mui/material';
 import { defineMessages, useIntl } from 'react-intl';
@@ -120,28 +121,26 @@ export default function UserInfo(inProps) {
             case SCUserProfileFields.DATE_OF_BIRTH:
                 return `${intl.formatDate(user[field], { year: 'numeric', month: 'numeric', day: 'numeric' })}`;
             case SCUserProfileFields.TAGS:
-                return (React.createElement(Tags, { tags: user.tags.filter((t) => t.visible), type: TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
+                return (_jsx(Tags, { tags: user.tags.filter((t) => t.visible), type: TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
             case SCUserProfileFields.WEBSITE:
-                return (React.createElement("a", { href: user[field], target: '_blank' }, user[field]));
+                return (_jsx("a", Object.assign({ href: user[field], target: '_blank' }, { children: user[field] })));
             default:
                 return user[field];
         }
     };
     if (!scUser || !metadataDefinitions) {
-        return React.createElement(UserInfoSkeleton, null);
+        return _jsx(UserInfoSkeleton, {});
     }
     if (_fields.length === 0) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), _fields.map((field) => {
-        if (scUser[field]) {
-            if (field === SCUserProfileFields.TAGS) {
-                return scUser[field].length > 0 ? (React.createElement(Box, { key: field, className: classes.field }, renderField(scUser, field))) : null;
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _fields.map((field) => {
+            if (scUser[field]) {
+                if (field === SCUserProfileFields.TAGS) {
+                    return scUser[field].length > 0 ? (_jsx(Box, Object.assign({ className: classes.field }, { children: renderField(scUser, field) }), field)) : null;
+                }
+                return (_jsxs(Box, Object.assign({ className: classes.field }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: metadataDefinitions[field] ? metadataDefinitions[field].label : intl.formatMessage(messages[camelCase(field)]) })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: renderField(scUser, field) }))] }), field));
             }
-            return (React.createElement(Box, { key: field, className: classes.field },
-                React.createElement(Typography, { variant: "h6" }, metadataDefinitions[field] ? metadataDefinitions[field].label : intl.formatMessage(messages[camelCase(field)])),
-                React.createElement(Typography, { variant: "body2" }, renderField(scUser, field))));
-        }
-        return null;
-    })));
+            return null;
+        }) })));
 }

package/lib/esm/components/UserInfoDialog/UserInfoDialog.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, styled, Typography } from '@mui/material';
-import React from 'react';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import UserInfo, { UserInfoSkeleton } from '../UserInfo';
@@ -28,8 +28,6 @@ export default function UserInfoDialog(inProps) {
     // HOOKS
     const { scUser } = useSCFetchUser({ id: userId, user });
     // RENDER
-    const subtitle = (React.createElement(Box, { className: classes.caption },
-        React.createElement(Avatar, { className: classes.avatar, src: scUser === null || scUser === void 0 ? void 0 : scUser.avatar }),
-        React.createElement(Typography, { className: classes.username, variant: "h6" }, (scUser === null || scUser === void 0 ? void 0 : scUser.real_name) ? scUser === null || scUser === void 0 ? void 0 : scUser.real_name : scUser === null || scUser === void 0 ? void 0 : scUser.username)));
-    return (React.createElement(Root, Object.assign({ title: React.createElement(FormattedMessage, { id: "ui.userInfoDialog.title", defaultMessage: "ui.userInfoDialog.title" }), subtitle: subtitle, className: classNames(classes.root, className) }, rest), scUser ? React.createElement(UserInfo, Object.assign({}, UserInfoProps, { userId: userId, user: scUser })) : React.createElement(UserInfoSkeleton, null)));
+    const subtitle = (_jsxs(Box, Object.assign({ className: classes.caption }, { children: [_jsx(Avatar, { className: classes.avatar, src: scUser === null || scUser === void 0 ? void 0 : scUser.avatar }), _jsx(Typography, Object.assign({ className: classes.username, variant: "h6" }, { children: (scUser === null || scUser === void 0 ? void 0 : scUser.real_name) ? scUser === null || scUser === void 0 ? void 0 : scUser.real_name : scUser === null || scUser === void 0 ? void 0 : scUser.username }))] })));
+    return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.userInfoDialog.title", defaultMessage: "ui.userInfoDialog.title" }), subtitle: subtitle, className: classNames(classes.root, className) }, rest, { children: scUser ? _jsx(UserInfo, Object.assign({}, UserInfoProps, { userId: userId, user: scUser })) : _jsx(UserInfoSkeleton, {}) })));
 }

package/lib/esm/components/UserProfileBlocked/UserProfileBlocked.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Divider, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -68,7 +69,7 @@ export default function UserProfileBlocked(inProps) {
     const handleBlock = useMemo(() => () => {
         scUserContext.managers.blockedUsers.block(scUser).catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                 variant: 'error',
                 autoHideDuration: 3000
             });
@@ -77,13 +78,5 @@ export default function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Divider, null),
-        !isMe && blockedBy && (React.createElement(Typography, { variant: "body1", className: classes.info },
-            React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }))),
-        !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (React.createElement(React.Fragment, null,
-            React.createElement(Typography, { variant: "body1", className: classes.info },
-                React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" })),
-            React.createElement(LoadingButton, { variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock },
-                React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Divider, {}), !isMe && blockedBy && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/Account.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Typography } from '@mui/material';
 import classNames from 'classnames';
@@ -69,16 +70,5 @@ export default function Account(props) {
     if (!scUserContext.user) {
         return;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        startActions,
-        showCredentialsSection && React.createElement(AccountCredentials, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)),
-        showLanguageSwitcher && React.createElement(LanguageSwitcher, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)),
-        showSocialAccountSection && (React.createElement(UserSocialAssociation, { children: React.createElement(Typography, { variant: "body1", mb: 1, sx: { fontWeight: 'bold' } },
-                ' ',
-                intl.formatMessage(messages.socialTitle)), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })),
-        openDeleteDialog && (React.createElement(ConfirmDialog, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })),
-        endActions,
-        React.createElement(Box, { className: classes.dangerZone },
-            React.createElement(AccountDataPortabilityButton, { fullWidth: true, variant: "outlined", color: "primary" }),
-            React.createElement(AccountDeleteButton, Object.assign({ fullWidth: true, variant: "contained", color: "secondary" }, AccountDeleteButtonProps)))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [startActions, showCredentialsSection && _jsx(AccountCredentials, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)), showLanguageSwitcher && _jsx(LanguageSwitcher, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)), showSocialAccountSection && (_jsx(UserSocialAssociation, { children: _jsxs(Typography, Object.assign({ variant: "body1", mb: 1, sx: { fontWeight: 'bold' } }, { children: [' ', intl.formatMessage(messages.socialTitle)] })), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })), endActions, _jsxs(Box, Object.assign({ className: classes.dangerZone }, { children: [_jsx(AccountDataPortabilityButton, { fullWidth: true, variant: "outlined", color: "primary" }), _jsx(AccountDeleteButton, Object.assign({ fullWidth: true, variant: "contained", color: "secondary" }, AccountDeleteButtonProps))] }))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/AccountCredentials.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Button, CircularProgress, FormGroup, IconButton, InputAdornment, Popover, Typography } from '@mui/material';
 import classNames from 'classnames';
@@ -134,13 +135,13 @@ export default function AccountCredentials(props) {
             setIsEditing(false);
             setIsSubmitting(false);
             if (skipEmailValidation) {
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.success", defaultMessage: "ui.userProfileEditAccountCredentials.email.success" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.success", defaultMessage: "ui.userProfileEditAccountCredentials.email.success" }), {
                     variant: 'success',
                     autoHideDuration: 3000
                 });
             }
             else {
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.successConfirm", defaultMessage: "ui.userProfileEditAccountCredentials.email.successConfirm" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.successConfirm", defaultMessage: "ui.userProfileEditAccountCredentials.email.successConfirm" }), {
                     variant: 'warning',
                     autoHideDuration: 5000
                 });
@@ -155,38 +156,15 @@ export default function AccountCredentials(props) {
     if (!user) {
         return;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(React.Fragment, null,
-            React.createElement(Typography, { variant: "body1", className: classes.email },
-                React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" })),
-            React.createElement(React.Fragment, null, isSubmitting ? (React.createElement(CircularProgress, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
-                        endAdornment: (React.createElement(InputAdornment, { position: "end" }, !isEditing ? (React.createElement(IconButton, { onClick: () => setIsEditing(true), edge: "end" },
-                            React.createElement(Icon, null, "edit"))) : error.email ? (React.createElement(Icon, { color: "error" }, "error")) : (React.createElement(IconButton, { onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email },
-                            React.createElement(Icon, null, "check")))))
-                    } })))),
-            React.createElement(Typography, { variant: "body1", className: classes.password },
-                React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" })),
-            React.createElement(Button, { size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } },
-                React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }))),
-        openChangePasswordDialog && (React.createElement(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest),
-            React.createElement(FormGroup, { className: classes.form },
-                React.createElement(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }),
-                React.createElement(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
-                        endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                            React.createElement(IconButton, { "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, React.createElement(Icon, null, "info"))))
-                    } }),
-                React.createElement(Popover, { open: open, anchorEl: anchorEl, anchorOrigin: {
-                        vertical: 'center',
-                        horizontal: 'left'
-                    }, transformOrigin: {
-                        vertical: 'center',
-                        horizontal: 'right'
-                    }, onClose: handlePopoverClose },
-                    React.createElement(Box, { sx: { p: '10px' } },
-                        React.createElement(Typography, { component: 'span', sx: { whiteSpace: 'pre-line' } },
-                            React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" })))),
-                React.createElement(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })),
-            React.createElement(LoadingButton, { className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword },
-                React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.email }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), _jsx(_Fragment, { children: isSubmitting ? (_jsx(CircularProgress, {})) : (_jsx(_Fragment, { children: _jsx(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? (_jsx(IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: _jsx(Icon, { children: "edit" }) }))) : error.email ? (_jsx(Icon, Object.assign({ color: "error" }, { children: "error" }))) : (_jsx(IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: _jsx(Icon, { children: "check" }) }))) })))
+                                } }) })) }), _jsx(Typography, Object.assign({ variant: "body1", className: classes.password }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), _jsx(Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && (_jsxs(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [_jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), _jsx(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && (_jsx(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: _jsx(Icon, { children: "info" }) })) })))
+                                } }), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
+                                    vertical: 'center',
+                                    horizontal: 'left'
+                                }, transformOrigin: {
+                                    vertical: 'center',
+                                    horizontal: 'right'
+                                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { p: '10px' } }, { children: _jsx(Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), _jsx(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), _jsx(LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -103,7 +104,7 @@ export default function PublicInfo(props) {
             scUserContext.updateUser(res.data);
             setEditing([]);
             setSaving([]);
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userInfo.save.success", defaultMessage: "ui.userInfo.save.success" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userInfo.save.success", defaultMessage: "ui.userInfo.save.success" }), {
                 variant: 'success',
                 autoHideDuration: 3000
             });
@@ -112,7 +113,7 @@ export default function PublicInfo(props) {
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));
             setSaving([]);
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                 variant: 'error',
                 autoHideDuration: 3000
             });
@@ -147,7 +148,7 @@ export default function PublicInfo(props) {
             });
         let props = {
             InputProps: {
-                endAdornment: React.createElement(InputAdornment, { position: "end" }, isSaving && React.createElement(CircularProgress, { size: 10 }))
+                endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: isSaving && _jsx(CircularProgress, { size: 10 }) }))
             }
         };
         let content = null;
@@ -158,8 +159,7 @@ export default function PublicInfo(props) {
             case SCUserProfileFields.DATE_JOINED:
                 return null;
             case SCUserProfileFields.DATE_OF_BIRTH:
-                return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, key: field, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale },
-                    React.createElement(DatePicker, { label: intl.formatMessage({
+                return (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: _jsx(DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${camelCase(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
                         }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
@@ -189,9 +189,7 @@ export default function PublicInfo(props) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                 // @ts-ignore
                                 const _a = params.children.props, { children } = _a, rest = __rest(_a, ["children"]);
-                                return (React.createElement(InputAdornment, { position: 'end' },
-                                    React.createElement(IconButton, Object.assign({}, rest), children),
-                                    isSaving && React.createElement(CircularProgress, { size: 10 })));
+                                return (_jsxs(InputAdornment, Object.assign({ position: 'end' }, { children: [_jsx(IconButton, Object.assign({}, rest, { children: children })), isSaving && _jsx(CircularProgress, { size: 10 })] })));
                             }
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
@@ -202,13 +200,10 @@ export default function PublicInfo(props) {
                                 variant: 'outlined',
                                 helperText: _error || null,
                                 InputProps: {
-                                    endAdornment: isMobile && (React.createElement(React.Fragment, null,
-                                        React.createElement(IconButton, { disabled: !isEditing },
-                                            React.createElement(Icon, null, "CalendarIcon")),
-                                        isSaving ? React.createElement(CircularProgress, { size: 10 }) : null))
+                                    endAdornment: isMobile && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ disabled: !isEditing }, { children: _jsx(Icon, { children: "CalendarIcon" }) })), isSaving ? _jsx(CircularProgress, { size: 10 }) : null] }))
                                 }
                             }
-                        } })));
+                        } }) }), field));
             case SCUserProfileFields.BIO:
                 props.multiline = true;
                 break;
@@ -219,29 +214,24 @@ export default function PublicInfo(props) {
                 break;
             case SCUserProfileFields.GENDER:
                 props.select = true;
-                content = GENDERS.map((gender) => (React.createElement(MenuItem, { key: gender, value: gender }, intl.formatMessage(messages[`gender${gender}`]))));
+                content = GENDERS.map((gender) => (_jsx(MenuItem, Object.assign({ value: gender }, { children: intl.formatMessage(messages[`gender${gender}`]) }), gender)));
                 break;
             case SCUserProfileFields.TAGS:
                 return null;
             default:
                 if (metadataDefinitions && metadataDefinitions[field]) {
-                    return (React.createElement(MetadataField, Object.assign({ id: field, key: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props)));
+                    return (_jsx(MetadataField, Object.assign({ id: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props), field));
                 }
                 break;
         }
-        return (React.createElement(component.element, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.${camelField}.error.${_error}`, defaultMessage: `ui.userInfo.${camelField}.error.${_error}` }) }), content));
+        return (_jsx(component.element, Object.assign({ id: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && _jsx(FormattedMessage, { id: `ui.userInfo.${camelField}.error.${_error}`, defaultMessage: `ui.userInfo.${camelField}.error.${_error}` }) }, { children: content }), field));
     };
     // FIELDS
     const _fields = [...fields, ...Object.keys(metadataDefinitions)];
     if (_fields.length === 0 || !user) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        startActions,
-        _fields.map((field) => {
-            return renderField(field);
-        }),
-        React.createElement(LoadingButton, { className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 },
-            React.createElement(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' })),
-        endActions));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
+                return renderField(field);
+            }), _jsx(LoadingButton, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: _jsx(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
 }

package/lib/esm/components/UserProfileEdit/Section/Settings.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 { styled } from '@mui/material/styles';
 import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography } from '@mui/material';
@@ -43,7 +44,7 @@ export default function Settings(props) {
                 onEditSuccess();
             }
             else {
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.saved", defaultMessage: "ui.userProfileEditSettings.saved" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.userProfileEditSettings.saved", defaultMessage: "ui.userProfileEditSettings.saved" }), {
                     variant: 'success',
                     autoHideDuration: 3000
                 });
@@ -58,50 +59,19 @@ export default function Settings(props) {
         return null;
     }
     if (_settings === null) {
-        return React.createElement(SettingsSkeleton, null);
+        return _jsx(SettingsSkeleton, {});
     }
     const renderSetting = (setting) => {
         switch (setting) {
             case SCUserProfileSettings.NOTIFICATION:
-                return (React.createElement(React.Fragment, { key: setting },
-                    React.createElement(Typography, { gutterBottom: true, variant: "body1" },
-                        React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.notification.title", defaultMessage: "ui.userProfileEditSettings.notification.title" })),
-                    React.createElement(Box, { className: classes.control },
-                        React.createElement(FormControl, null,
-                            React.createElement(FormLabel, null,
-                                React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.notification.label", defaultMessage: "ui.userProfileEditSettings.notification.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST, onChange: handleChange },
-                                React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.common.yes", defaultMessage: "ui.common.yes" }) }),
-                                React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.common.no", defaultMessage: "ui.common.no" }) }))))));
+                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.title", defaultMessage: "ui.userProfileEditSettings.notification.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.notification.label", defaultMessage: "ui.userProfileEditSettings.notification.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.yes", defaultMessage: "ui.common.yes" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.common.no", defaultMessage: "ui.common.no" }) })] }))] }) }))] }, setting));
             case SCUserProfileSettings.INTERACTION:
-                return (React.createElement(React.Fragment, { key: setting },
-                    React.createElement(Typography, { gutterBottom: true, variant: "body1" },
-                        React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.title", defaultMessage: "ui.userProfileEditSettings.interaction.title" })),
-                    React.createElement(Box, { className: classes.control },
-                        React.createElement(FormControl, null,
-                            React.createElement(FormLabel, null,
-                                React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange },
-                                React.createElement(FormControlLabel, { value: -1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }),
-                                React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }),
-                                React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) }))))));
+                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.title", defaultMessage: "ui.userProfileEditSettings.interaction.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: -1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }), _jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) })] }))] }) }))] }, setting));
             case SCUserProfileSettings.PRIVATE_MESSAGE:
-                return (React.createElement(React.Fragment, { key: setting },
-                    React.createElement(Typography, { gutterBottom: true, variant: "body1" },
-                        React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.title", defaultMessage: "ui.userProfileEditSettings.privateMessage.title" })),
-                    React.createElement(Box, { className: classes.control },
-                        React.createElement(FormControl, null,
-                            React.createElement(FormLabel, null,
-                                React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange },
-                                React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }),
-                                React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) }))))));
+                return (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.title", defaultMessage: "ui.userProfileEditSettings.privateMessage.title" }) })), _jsx(Box, Object.assign({ className: classes.control }, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" }) }), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange }, { children: [_jsx(FormControlLabel, { value: 1, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }), _jsx(FormControlLabel, { value: 0, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) })] }))] }) }))] }, setting));
             default:
                 return null;
         }
     };
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        startActions,
-        settings.map((setting) => renderSetting(setting)),
-        endActions));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [startActions, settings.map((setting) => renderSetting(setting)), endActions] })));
 }

package/lib/esm/components/UserProfileEdit/Section/SettingsSkeleton.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,8 +32,5 @@ const Root = styled(Box, {
  *
  */
 export default function SettingsSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, null),
-        React.createElement(Skeleton, null),
-        React.createElement(Skeleton, null)));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -31,9 +31,5 @@ const Root = styled(Box, {
  *
  */
 export default function UserProfileEditSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Grid, { container: true },
-            React.createElement(Grid, { item: true, md: 12, sm: 12 },
-                React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }),
-                React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsx(Grid, Object.assign({ container: true }, { children: _jsxs(Grid, Object.assign({ item: true, md: 12, sm: 12 }, { children: [_jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
 }

package/lib/esm/components/UserProfileEdit/UserProfileEdit.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Tab, Tabs } from '@mui/material';
@@ -66,13 +67,5 @@ export default function UserProfileEdit(inProps) {
         setTab(newValue);
     };
     // RENDER
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(Tabs, { className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true },
-            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }),
-            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }),
-            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })),
-        React.createElement(Box, { className: classes.tabContent },
-            tab === 0 && React.createElement(PublicInfo, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)),
-            tab === 1 && React.createElement(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)),
-            tab === 2 && React.createElement(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps)))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [tab === 0 && _jsx(PublicInfo, Object.assign({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)), tab === 1 && _jsx(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)), tab === 2 && _jsx(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps))] }))] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, Icon, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -42,17 +42,6 @@ const Root = styled(Box, {
  */
 function UserProfileHeaderSkeleton() {
     const theme = useTheme();
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }),
-        React.createElement(Box, { className: classes.avatar },
-            React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
-        React.createElement(Box, { className: classes.section },
-            React.createElement(Typography, { variant: "h5", className: classes.username },
-                React.createElement(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
-            React.createElement(Stack, { direction: "row", className: classes.actions },
-                React.createElement(Button, { variant: "contained", disabled: true },
-                    React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } })),
-                React.createElement(IconButton, { disabled: true },
-                    React.createElement(Icon, null, "more_vert"))))));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), _jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge }) })), _jsxs(Box, Object.assign({ className: classes.section }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.username }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } }) })), _jsxs(Stack, Object.assign({ direction: "row", className: classes.actions }, { children: [_jsx(Button, Object.assign({ variant: "contained", disabled: true }, { children: _jsx(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } }) })), _jsx(IconButton, Object.assign({ disabled: true }, { children: _jsx(Icon, { children: "more_vert" }) }))] }))] }))] })));
 }
 export default UserProfileHeaderSkeleton;

package/lib/esm/components/UserProfileHeader/UserProfileHeader.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, 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 ChangeCover from '../ChangeCover';
@@ -103,30 +104,12 @@ export default function UserProfileHeader(inProps) {
     }
     // RENDER
     if (!scUser) {
-        return React.createElement(UserProfileHeaderSkeleton, null);
+        return _jsx(UserProfileHeaderSkeleton, {});
     }
     const _backgroundCover = Object.assign({}, (scUser.cover
         ? { background: `url('${scUser.cover}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
     const realName = (isMe && scUserContext.user.real_name) || scUser.real_name;
     const hasBadge = scUser && scUser.community_badge;
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-            React.createElement(Box, { className: classes.avatar },
-                React.createElement(UserAvatar, { hide: !hasBadge },
-                    React.createElement("img", { src: scUser.avatar ? scUser.avatar : '' }))),
-            isMe && (React.createElement(React.Fragment, null,
-                React.createElement(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
-                React.createElement("div", { className: classes.changeCover },
-                    React.createElement(ChangeCover, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)))))),
-        React.createElement(Box, { className: classes.infOpsSection },
-            React.createElement(Box, { className: classes.info },
-                React.createElement(Typography, { variant: "h5", className: classes.username },
-                    "@",
-                    isMe ? scUserContext.user.username : scUser.username),
-                realName && (React.createElement(Typography, { variant: "subtitle1", className: classes.realname }, realName)),
-                scUser.bio && (React.createElement(Typography, { variant: "subtitle2", className: classes.bio }, scUser.bio)),
-                scUser.website && (React.createElement(Link, { className: classes.website, target: "blank", to: scUser.website },
-                    React.createElement(Typography, { variant: "body2" }, scUser.website)))),
-            actions && actions)));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge }, { children: _jsx("img", { src: scUser.avatar ? scUser.avatar : '' }) })) })), isMe && (_jsxs(_Fragment, { children: [_jsx(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeCover, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.infOpsSection }, { children: [_jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsxs(Typography, Object.assign({ variant: "h5", className: classes.username }, { children: ["@", isMe ? scUserContext.user.username : scUser.username] })), realName && (_jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.realname }, { children: realName }))), scUser.bio && (_jsx(Typography, Object.assign({ variant: "subtitle2", className: classes.bio }, { children: scUser.bio }))), scUser.website && (_jsx(Link, Object.assign({ className: classes.website, target: "blank", to: scUser.website }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: scUser.website })) })))] })), actions && actions] }))] })));
 }

package/lib/esm/components/UserSocialAssociation/UserSocialAssociation.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, IconButton, Stack, Typography } from '@mui/material';
@@ -100,20 +101,5 @@ export default function UserSocialAssociation(inProps) {
     if (!providersEnabled) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { direction: "column" }),
-        providersLinked.length !== 0 || (providersToLink.length !== 0 && onCreateAssociation) ? children : null,
-        providersToLink.length !== 0 && onCreateAssociation && (React.createElement(Box, null,
-            React.createElement(Typography, { variant: "body2" },
-                " ",
-                intl.formatMessage(messages.socialAdd)),
-            providersToLink.map((p, index) => (React.createElement(React.Fragment, { key: index },
-                React.createElement(IconButton, { onClick: onCreateAssociation ? () => onCreateAssociation(p) : null },
-                    React.createElement(Icon, null, p))))))),
-        providersLinked.length !== 0 && (React.createElement(Box, null,
-            React.createElement(Typography, { variant: "body2" },
-                " ",
-                intl.formatMessage(messages.socialRemove)),
-            providersLinked.map((p, index) => (React.createElement(React.Fragment, { key: index },
-                React.createElement(IconButton, { color: "primary", onClick: () => onDeleteAssociation(p) },
-                    React.createElement(Icon, null, p.provider)))))))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { direction: "column" }, { children: [providersLinked.length !== 0 || (providersToLink.length !== 0 && onCreateAssociation) ? children : null, providersToLink.length !== 0 && onCreateAssociation && (_jsxs(Box, { children: [_jsxs(Typography, Object.assign({ variant: "body2" }, { children: [" ", intl.formatMessage(messages.socialAdd)] })), providersToLink.map((p, index) => (_jsx(React.Fragment, { children: _jsx(IconButton, Object.assign({ onClick: onCreateAssociation ? () => onCreateAssociation(p) : null }, { children: _jsx(Icon, { children: p }) })) }, index)))] })), providersLinked.length !== 0 && (_jsxs(Box, { children: [_jsxs(Typography, Object.assign({ variant: "body2" }, { children: [" ", intl.formatMessage(messages.socialRemove)] })), providersLinked.map((p, index) => (_jsx(React.Fragment, { children: _jsx(IconButton, Object.assign({ color: "primary", onClick: () => onDeleteAssociation(p) }, { children: _jsx(Icon, { children: p.provider }) })) }, index)))] }))] })));
 }