@selfcommunity/react-ui 0.11.0-mui7.17 → 0.11.0-mui7.18

package/lib/esm/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { EventService } from '@selfcommunity/api-services';
 import { useSCFetchEvent, useSCFetchUser } from '@selfcommunity/react-core';
@@ -16,7 +15,7 @@ const PREFIX = 'SCAcceptRequestUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const AcceptButton = styled(LoadingButton, {
+const AcceptButton = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/esm/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { GroupService } from '@selfcommunity/api-services';
 import { useSCFetchGroup, useSCFetchUser } from '@selfcommunity/react-core';
@@ -18,7 +17,7 @@ const PREFIX = 'SCAcceptRequestUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const AcceptButton = styled(LoadingButton, {
+const AcceptButton = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/esm/components/AccountDataPortability/AccountDataPortability.js

@@ -2,9 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { Box, Typography, styled, Icon } from '@mui/material';
+import { Box, Typography, styled, Icon, Button } from '@mui/material';
 import classNames from 'classnames';
-import { LoadingButton } from '@mui/lab';
 import { DataPortabilityService } from '@selfcommunity/api-services';
 import { capitalize, Logger } from '@selfcommunity/utils';
 import { SCUserContext } from '@selfcommunity/react-core';
@@ -21,8 +20,8 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS AccountDataPortability component. Learn about the available props and the CSS API.
  *
@@ -150,16 +149,12 @@ export default function AccountDataPortability(inProps) {
      * Renders root object
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx(Typography, Object.assign({ variant: "body2", component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
                         li: (chunks) => _jsx("li", { children: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
                         ul: (chunks) => _jsx("ul", { children: chunks })
-                    } }) })), _jsx(LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                    } }) })), _jsx(Button, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
                     (dataPortability &&
                         (dataPortability.computing ||
-                            (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: _jsx(Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: _jsx(Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), _jsx("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                            (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: _jsx(Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Button, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: _jsx(Icon, { children: "cloud_download_outlined" }), variant: "outlined", className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), _jsx("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
                         date: _jsx(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
                         time: _jsx(FormattedTime, { value: dataPortability.requested_at })
                     } }) })))] })));

package/lib/esm/components/AccountDelete/AccountDelete.js

@@ -2,14 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { Box, TextField, Typography, styled } from '@mui/material';
+import { Box, Button, TextField, Typography, styled } from '@mui/material';
 import classNames from 'classnames';
 import { UserService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { FormattedMessage, useIntl } from 'react-intl';
-import LoadingButton from '@mui/lab/LoadingButton';
 const PREFIX = 'SCAccountDelete';
 const classes = {
     root: `${PREFIX}-root`,
@@ -20,7 +19,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS AccountDelete component. Learn about the available props and the CSS API.
@@ -109,16 +108,10 @@ export default function AccountDelete(inProps) {
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.message, component: Box }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
                         communityName,
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
                         li: (chunks) => _jsx("li", { children: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
                         ul: (chunks) => _jsx("ul", { children: chunks })
                     } }) })), _jsxs(Typography, Object.assign({ className: classes.confirm, component: Box }, { children: [_jsx(FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
                             username: scUserContext.user.username,
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
                             b: (chunks) => _jsx("b", { children: chunks })
-                        } }), _jsx(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && _jsx(Typography, Object.assign({ color: "error" }, { children: error })), _jsx(LoadingButton, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
+                        } }), _jsx(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && _jsx(Typography, Object.assign({ color: "error" }, { children: error })), _jsx(Button, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
 }

package/lib/esm/components/BuyButton/BuyButton.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Icon, styled, SwipeableDrawer, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, Icon, styled, SwipeableDrawer, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { useSCContext, useSCUser } from '@selfcommunity/react-core';
 import { SCContentType, SCCourseJoinStatusType, SCEventSubscriptionStatusType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
@@ -24,7 +23,7 @@ const classes = {
     going: `${PREFIX}-going`,
     notGoing: `${PREFIX}-not-going`
 };
-const RequestRoot = styled(LoadingButton, {
+const RequestRoot = styled(Button, {
     name: PREFIX,
     slot: 'RequestRoot'
 })(() => ({}));

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

@@ -146,7 +146,7 @@ export default function Categories(inProps) {
      * Renders categories list
      */
     const filteredCategories = sortByAttr(getFilteredCategories(), 'order');
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ size: { md: 6 } }, { children: _jsx(TextField, { 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, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? (_jsx(Grid, Object.assign({ size: "grow" }, { 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({ size: { sm: 6, lg: 4 } }, { children: _jsx(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ size: { 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, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? (_jsx(Grid, Object.assign({ size: "grow" }, { 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({ size: { xs: 12, sm: 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)
      */

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

@@ -35,5 +35,5 @@ const Root = styled(Box, {
  */
 export default function CategoriesSkeleton(inProps) {
     const { className, CategorySkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "CategorySkeletonProps"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((_category, index) => (_jsx(Grid, Object.assign({ size: { sm: 6, md: 4 } }, { children: _jsx(CategorySkeleton, Object.assign({ elevation: 0, variant: "outlined" }, CategorySkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((_category, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, sm: 6, md: 4 } }, { children: _jsx(CategorySkeleton, Object.assign({ elevation: 0, variant: "outlined" }, CategorySkeletonProps)) }), index))) })) })));
 }

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

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCPreferences, useSCContext, useSCFetchCategory, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCCategoryAutoFollowType, SCContentType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -15,11 +14,11 @@ const PREFIX = 'SCCategoryFollowButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Follow Category Button component. Learn about the available props and the CSS API.
 

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

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

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

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

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

@@ -78,5 +78,5 @@ const Root = styled(Grid, {
  */
 export default function CheckoutSkeleton(inProps) {
     const { className = {} } = inProps, rest = __rest(inProps, ["className"]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%" }, rest, { children: [_jsx(Grid, Object.assign({ size: { md: 6 }, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: '100%' }) })), _jsx(Grid, Object.assign({ size: { md: 6 }, className: classNames(classes.right, classes.header) }, { children: _jsxs(Stack, Object.assign({ sx: { display: { xs: 'none', md: 'flex' } }, direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: '100%' })] })) })), _jsx(Grid, Object.assign({ size: { md: 6 }, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ size: { md: 6 }, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%" }, rest, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: "100%" }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.right, classes.header) }, { children: _jsxs(Stack, Object.assign({ sx: { display: { xs: 'none', md: 'flex' } }, direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: "100%" })] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
 }

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled } from '@mui/material';
+import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled, Button } from '@mui/material';
 import { useSCUser } from '@selfcommunity/react-core';
 import Editor from '../Editor';
 import classNames from 'classnames';
-import { LoadingButton } from '@mui/lab';
 import BaseItem from '../../shared/BaseItem';
 import UserAvatar from '../../shared/UserAvatar';
 import { useThemeProps } from '@mui/system';
@@ -131,5 +130,5 @@ export default function CommentObjectReply(inProps) {
     // RENDER
     return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: showAvatar &&
             (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && _jsx(PreviewComponent, { value: media, onChange: handleChangeMedias, className: classes.media }), _jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
-                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

package/lib/esm/components/CommunityPaywalls/CommunityPaywalls.js

@@ -61,5 +61,5 @@ export default function CommunityPaywalls(inProps) {
     if (loading) {
         return _jsx(CommunityPaywallSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%", spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ size: { md: 4 } }, { children: _jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%", spacing: 4 }, rest, { children: scCommunity.paywalls.map((p, i) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 4 } }, { children: _jsx(PaymentProduct, Object.assign({ paymentProduct: p, contentType: SCContentType.COMMUNITY, contentId: scCommunity.id }, (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (scCommunity.payment_order && { paymentOrder: scCommunity.payment_order, onUpdatePaymentOrder }), (callbackUrl && { PaymentProductPriceComponentProps: { returnUrlParams: { callbackUrl } } }))) }), i))) })));
 }

package/lib/esm/components/Composer/Composer.js

@@ -5,10 +5,9 @@ import { SCContributionType, SCFeatureName, SCFeedTypologyType } from '@selfcomm
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, Icon, styled, useTheme } from '@mui/material';
+import { Alert, AlertTitle, Box, Dialog, DialogActions, DialogContent, DialogTitle, Fade, IconButton, Slide, useMediaQuery, Icon, styled, useTheme, Button } from '@mui/material';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_POLL } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
-import LoadingButton from '@mui/lab/LoadingButton';
 import AudienceLayer from './Layer/AudienceLayer';
 import { iOS, isClientSideRendering, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
@@ -693,7 +692,7 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ ref: dialogRef, slots: { backdrop: BackdropScrollDisabled, transition: DialogTransition }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? (_jsx(FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : (_jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, recipients, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+    return (_jsxs(Root, Object.assign({ ref: dialogRef, slots: { backdrop: BackdropScrollDisabled, transition: DialogTransition }, onClose: handleClose }, rest, { disableEscapeKeyDown: true, className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(Button, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: scheduledPostsEnabled && !scheduled_at ? (_jsx(FormattedMessage, { id: "ui.composer.submit.now", defaultMessage: "ui.composer.submit.now" })) : (_jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, recipients, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
                                     if (mediaObjectType.previewComponent) {
                                         return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
                                     }

package/lib/esm/components/Composer/Content/ContentPoll/ContentPoll.js

@@ -7,15 +7,15 @@ import { ReactSortable } from 'react-sortablejs';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_POLL_MIN_CLOSE_DATE_DELTA, COMPOSER_POLL_TITLE_MAX_LENGTH } from '../../../../constants/Composer';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { parseISO } from 'date-fns';
 import { PREFIX } from '../../constants';
 const localeMap = {
-    en: enLocale,
-    it: itLocale
+    en: it,
+    it: enUS
 };
 const classes = {
     root: `${PREFIX}-content-poll-root`,

package/lib/esm/components/Composer/Layer/ScheduledLayer/ScheduledLayer.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Button, DialogTitle, IconButton, Typography, DialogContent, Icon, styled } from '@mui/material';
-import { LocalizationProvider, StaticDateTimePicker, DateTimePickerTabs } from '@mui/x-date-pickers';
+import { LocalizationProvider, StaticDateTimePicker, DateTimePickerTabs, usePickerContext } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import { useSCContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { format, parseISO } from 'date-fns';
@@ -29,7 +29,7 @@ const ScheduledLayer = React.forwardRef((props, ref) => {
     const { className, onClose, onSave, defaultValue = null } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
     //CONTEXT
     const scContext = useSCContext();
-    const locale = scContext.settings.locale.default === 'it' ? itLocale : enLocale;
+    const locale = scContext.settings.locale.default === 'it' ? it : enUS;
     // STATE
     const [scheduledAt, setScheduledAt] = useState(defaultValue ? (typeof defaultValue === 'string' ? parseISO(defaultValue) : defaultValue) : null);
     const handleUpdate = useCallback((value) => {
@@ -38,8 +38,8 @@ const ScheduledLayer = React.forwardRef((props, ref) => {
             onSave(value);
         }
     }, [onSave]);
-    const CustomToolbar = (props) => {
-        const { value } = props;
+    const CustomToolbar = () => {
+        const { value } = usePickerContext();
         if (!value)
             return null;
         const dayName = capitalize(format(value, 'EEEE', { locale }));

package/lib/esm/components/CourseDashboard/Student/ActionButton.d.ts

@@ -1,6 +1,5 @@
 import { ButtonProps } from '@mui/material';
-import { LoadingButtonProps } from '@mui/lab';
-interface ActionButtonProps extends ButtonProps, Omit<LoadingButtonProps, 'classes'> {
+interface ActionButtonProps extends ButtonProps, Omit<ButtonProps, 'classes'> {
     labelId: string;
     to?: string;
 }

package/lib/esm/components/CourseDashboard/Student/ActionButton.js

@@ -3,11 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { Link } from '@selfcommunity/react-core';
-import { LoadingButton } from '@mui/lab';
 export default function ActionButton(props) {
     const { labelId, to, size = 'small', color = 'primary', variant = 'contained' } = props, rest = __rest(props, ["labelId", "to", "size", "color", "variant"]);
     if (to) {
         return (_jsx(Button, Object.assign({ component: Link, to: to, size: size, color: color, variant: variant }, rest, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: labelId, defaultMessage: labelId }) })) })));
     }
-    return (_jsx(LoadingButton, Object.assign({ size: size, color: color, variant: variant }, rest, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: labelId, defaultMessage: labelId }) })) })));
+    return (_jsx(Button, Object.assign({ size: size, color: color, variant: variant }, rest, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: labelId, defaultMessage: labelId }) })) })));
 }

package/lib/esm/components/CourseDashboard/Teacher/Comments.js

@@ -4,7 +4,6 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useReducer, useState }
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { FormattedDate, FormattedMessage } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 import { PREFIX } from '../constants';
 import { DEFAULT_PAGINATION_OFFSET } from '../../../constants/Pagination';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../../utils/widget';
@@ -101,6 +100,6 @@ function Comments(props) {
     if (!state.initialized) {
         return _jsx(CommentsSkeleton, {});
     }
-    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && _jsx(CommentSkeleton, { id: 1 }), _jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
+    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && _jsx(CommentSkeleton, { id: 1 }), _jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 export default memo(Comments);

package/lib/esm/components/CourseForm/CourseForm.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip, styled } from '@mui/material';
+import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip, styled, Button } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { CourseService, formatHttpErrorCode } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -289,7 +288,7 @@ export default function CourseForm(inProps) {
                                                 input: {
                                                     endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
                                                 }
-                                            }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > COURSE_DESCRIPTION_MAX_LENGTH && (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (course && { contentId: course.id }), { contentType: SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
+                                            }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > COURSE_DESCRIPTION_MAX_LENGTH && (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (course && { contentId: course.id }), { contentType: SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(Button, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/esm/components/CourseForm/UploadCourseCover.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { Alert, styled, Icon } from '@mui/material';
+import { Alert, styled, Icon, Button } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { defineMessages } from 'react-intl';
 const messages = defineMessages({
     errorLoadImage: {
@@ -17,7 +16,7 @@ const messages = defineMessages({
 const classes = {
     root: `${PREFIX}-upload-course-cover-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'UploadCourseCoverRoot'
 })(() => ({}));

package/lib/esm/components/CourseJoinButton/CourseJoinButton.js

@@ -1,11 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { useSCContext, useSCFetchCourse, useSCUser } from '@selfcommunity/react-core';
 import { SCCoursePrivacyType, SCCourseJoinStatusType } from '@selfcommunity/types';
-import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -16,11 +15,11 @@ const PREFIX = 'SCCourseJoinButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Course Subscribe Button component. Learn about the available props and the CSS API.
 

package/lib/esm/components/Courses/Courses.js

@@ -204,7 +204,7 @@ export default function Courses(inProps) {
     /**
      * Renders courses list
      */
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ size: { md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchCourses();
@@ -215,11 +215,11 @@ export default function Courses(inProps) {
                                     }
                                 } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
                                 // @ts-expect-error this is needed to use showMine into SCCourses
-                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ size: { md: 'auto' } }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ size: { xs: 12 } }, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? _jsx(Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), _jsx(Grid, Object.assign({ size: { xs: 12, md: 'auto' } }, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(CategoryAutocomplete, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && (_jsx(Grid, Object.assign({ size: { xs: 12 } }, { children: _jsx(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
                                 // @ts-expect-error this is needed to use showMine into SCCourses
                                 showMine: showMine, deleteIcon: showMine ? _jsx(Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), _jsx(_Fragment, { children: !courses.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? (_jsxs(Stack, Object.assign({ className: classes.studentEmptyView }, { children: [_jsx(Stack, Object.assign({ className: classes.emptyBox }, { children: _jsx(Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: _jsx(Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), _jsx(Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : (_jsx(Box, Object.assign({ className: classes.teacherEmptyView }, { children: _jsx(Skeleton, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (_jsx(CourseSkeleton, { template: SCCourseTemplateType.PREVIEW })) : (_jsx(Skeleton, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ size: { md: 6, lg: 3 }, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ size: { md: 6, lg: 3 }, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [courses.map((course) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.item }, GridItemComponentProps, { children: _jsx(Course, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.itemPlaceholder }, GridItemComponentProps, { children: _jsx(CourseCreatePlaceholder, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

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

@@ -37,5 +37,5 @@ const Root = styled(Box, {
  */
 export default function CoursesSkeleton(inProps) {
     const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = __rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((_course, index) => (_jsx(Grid, Object.assign({ size: { md: 6, lg: 3 } }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CourseCreatePlaceholder, {}) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((_course, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 } }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? _jsx(CourseCreatePlaceholder, {}) : _jsx(CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -7,7 +7,6 @@ import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { PaymentApiClient } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -139,5 +138,5 @@ export default function CreatePaymentProductForm(inProps) {
                         startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
                         inputComponent: NumericFormatCustom
                     }
-                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(Button, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
 }