@selfcommunity/react-ui 0.11.0-alpha.65 → 0.11.0-alpha.66

package/lib/cjs/components/Course/Skeleton.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const course_1 = require("../../types/course");
@@ -21,15 +19,15 @@ const classes = {
     skeletonSnippetImage: `${constants_1.PREFIX}-skeleton-snippet-image`,
     skeletonSnippetAction: `${constants_1.PREFIX}-skeleton-snippet-action`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
-const SkeletonPreviewRoot = (0, styles_1.styled)(material_1.Box, {
+const SkeletonPreviewRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonPreviewRoot'
 })(() => ({}));
-const SkeletonSnippetRoot = (0, styles_1.styled)(BaseItemButton_1.default, {
+const SkeletonSnippetRoot = (0, material_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonSnippetRoot'
 })(() => ({}));
@@ -67,10 +65,10 @@ function CourseSkeleton(inProps) {
      */
     let contentObj;
     if (template === course_1.SCCourseTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: 100, height: 30 }) }))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.skeletonPreviewAvatar, variant: "rounded", animation: skeletonsAnimation })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "20%", height: 14, sx: { marginTop: 1 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "40%", height: 14, sx: { marginTop: 1.5 }, variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, width: "60%", height: 14, sx: { marginTop: 4.5 }, variant: "rectangular" })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
+        contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? 60 : 100, height: 60 }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "courses" }))] })), primary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } })) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 40, style: { marginBottom: 12 } })), secondary: (CourseProps === null || CourseProps === void 0 ? void 0 : CourseProps.userProfileSnippet) ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 120, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: 60 })] })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== undefined ? (actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: skeletonsAnimation, height: 15, width: 60 }) }))) }) }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-skeleton-${template}`) }, rest, { children: contentObj })));
 }

package/lib/cjs/components/CourseContentMenu/CourseContentMenu.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
@@ -18,7 +17,7 @@ const classes = {
     iconIncomplete: `${constants_1.PREFIX}-icon-incomplete`,
     iconComplete: `${constants_1.PREFIX}-icon-complete`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root]

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -62,7 +61,7 @@ const classes = {
     title: `${constants_1.PREFIX}-title`,
     contrastColor: `${constants_1.PREFIX}-contrast-color`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/CourseForm/Edit.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -22,7 +21,7 @@ const classes = {
     privacyItemInfo: `${constants_1.PREFIX}-edit-privacy-item-info`,
     disabled: `${constants_1.PREFIX}-disabled`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
@@ -21,7 +19,7 @@ const messages = (0, react_intl_1.defineMessages)({
 const classes = {
     root: `${constants_1.PREFIX}-upload-course-cover-root`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: constants_1.PREFIX,
     slot: 'UploadCourseCoverRoot'
 })(() => ({}));
@@ -89,6 +87,6 @@ function UploadCourseCover(inProps) {
     if (alert) {
         return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: isUploading, onClick: () => fileInput.current.click(), loading: isUploading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: isUploading, onClick: () => fileInput.current.click(), loading: isUploading }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "image" }) }))] }));
 }
 exports.default = UploadCourseCover;

package/lib/cjs/components/CourseFormDialog/CourseFormDialog.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
@@ -14,7 +14,7 @@ const Course_1 = require("../../constants/Course");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/CourseJoinButton/CourseJoinButton.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -18,7 +18,7 @@ const PREFIX = 'SCCourseJoinButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCCourseType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CourseParticipantsButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -28,13 +27,13 @@ const classes = {
     infiniteScroll: `${PREFIX}-infinite-scroll`,
     participants: `${PREFIX}-participants`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root,
     shouldForwardProp: (prop) => prop !== 'enrolled'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'DialogRoot',
     overridesResolver: (_props, styles) => styles.dialogRoot

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const constants_1 = require("./constants");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -13,7 +12,7 @@ const classes = {
     courses: `${constants_1.PREFIX}-skeleton-courses`,
     item: `${constants_1.PREFIX}-skeleton-item`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/CreateCourseButton/CreateCourseButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -15,7 +14,7 @@ const PREFIX = 'SCCreateCourseButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/CreateEventButton/CreateEventButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -15,7 +14,7 @@ const PREFIX = 'SCCreateEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/components/CreateEventWidget/Skeleton.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const classes = {
@@ -15,11 +13,11 @@ const classes = {
     spacing: `${constants_1.PREFIX}-spacing`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
 function CreateEventWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spacing })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spacing })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
 }
 exports.default = CreateEventWidgetSkeleton;

package/lib/cjs/components/CreateGroupButton/CreateGroupButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { GroupFormProps } from '../GroupForm';
 export interface CreateGroupButtonProps extends ButtonProps {
     /**

package/lib/cjs/components/CreateGroupButton/CreateGroupButton.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -15,7 +14,7 @@ const PREFIX = 'SCCreateGroupButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
 export interface CreateLiveStreamButtonProps extends ButtonProps {
     /**

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -15,7 +14,7 @@ const PREFIX = 'SCCreateLivestreamButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -15,14 +14,13 @@ const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
 const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
 const types_2 = require("./types");
 const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
-const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
 const material_1 = require("@mui/material");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
     content: `${constants_1.PREFIX}-content`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({
@@ -36,7 +34,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
     }
 }));
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -4,7 +4,6 @@ exports.PREFIX = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -25,12 +24,12 @@ const classes = {
     options: `${exports.PREFIX}-options`,
     actions: `${exports.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Container, {
+const Root = (0, material_1.styled)(material_1.Container, {
     name: exports.PREFIX,
     slot: 'Root'
 })(({ theme }) => ({}));
 // Styled components
-const OptionCard = (0, styles_1.styled)(material_1.Paper, {
+const OptionCard = (0, material_1.styled)(material_1.Paper, {
     name: exports.PREFIX,
     slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
@@ -40,7 +39,7 @@ const OptionCard = (0, styles_1.styled)(material_1.Paper, {
         textTransform: 'uppercase'
     }
 }));
-const FeatureItem = (0, styles_1.styled)(material_1.Box, {
+const FeatureItem = (0, material_1.styled)(material_1.Box, {
     name: exports.PREFIX,
     slot: 'featureItemRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/CustomAdv/CustomAdv.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -19,7 +18,7 @@ const classes = {
     embedCode: `${constants_1.PREFIX}-embed-code`,
     prefixedHeight: `${constants_1.PREFIX}-prefixed-height`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/CustomAdv/Skeleton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/EditCourse/MenuRow.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Menu_1 = tslib_1.__importDefault(require("@mui/material/Menu"));
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 function MenuRow(props) {
@@ -20,6 +18,6 @@ function MenuRow(props) {
     const handleClose = (0, react_1.useCallback)(() => {
         setAnchorEl(null);
     }, [anchorEl]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: buttonClassName, onClick: handleClick, disabled: disabled }, { children: icon })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: Boolean(anchorEl), onClick: handleClose, onClose: handleClose, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: children }))) : ((0, jsx_runtime_1.jsx)(Menu_1.default, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClick: handleClose }, { children: children })))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: buttonClassName, onClick: handleClick, disabled: disabled }, { children: icon })), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: Boolean(anchorEl), onClick: handleClose, onClose: handleClose, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: children }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClick: handleClose }, { children: children })))] }));
 }
 exports.default = (0, react_1.memo)(MenuRow);

package/lib/cjs/components/EditEventButton/EditEventButton.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -12,7 +12,7 @@ const PREFIX = 'SCEditEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(CreateEventButton_1.default, {
+const Root = (0, material_1.styled)(CreateEventButton_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/components/EditGroupButton/EditGroupButton.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -12,7 +12,7 @@ const PREFIX = 'SCEditGroupButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(CreateGroupButton_1.default, {
+const Root = (0, material_1.styled)(CreateGroupButton_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/Editor/Editor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -32,7 +31,7 @@ const classes = {
     placeholder: `${constants_1.PREFIX}-placeholder`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => {

package/lib/cjs/components/Editor/Skeleton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../Skeleton");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/Editor/plugins/EmojiPlugin.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const lexical_1 = require("lexical");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const EmojiPicker_1 = tslib_1.__importDefault(require("../../../shared/EmojiPicker"));
 const constants_1 = require("../constants");
 function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
@@ -32,7 +31,7 @@ function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
 const classes = {
     root: `${constants_1.PREFIX}-emoji-plugin-root`
 };
-const Root = (0, styles_1.styled)(Emoji, {
+const Root = (0, material_1.styled)(Emoji, {
     name: constants_1.PREFIX,
     slot: 'EmojiPluginRoot'
 })(() => ({}));

package/lib/cjs/components/Editor/plugins/FloatingLinkPlugin.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const link_1 = require("@lexical/link");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
@@ -9,14 +8,12 @@ const lexical_1 = require("lexical");
 const react_1 = require("react");
 const editor_1 = require("../../../utils/editor");
 const utils_2 = require("@selfcommunity/utils");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("../constants");
 const classes = {
     root: `${constants_1.PREFIX}-floating-link-plugin-root`
 };
-const Root = (0, styles_1.styled)(material_1.Popper, {
+const Root = (0, material_1.styled)(material_1.Popper, {
     name: constants_1.PREFIX,
     slot: 'FloatingLinkPluginRoot'
 })(() => ({}));
@@ -101,7 +98,7 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
                 }, InputProps: {
                     endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
                                     setIsLink(false);
-                                } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" }) }))] })))
+                                } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))] })))
                 } }) }) })));
 }
 function useFloatingLinkEditorToolbar(editor) {

package/lib/cjs/components/Editor/plugins/HashtagPlugin.js

@@ -11,7 +11,7 @@ const react_dom_1 = require("react-dom");
 const HashtagNode_1 = require("../nodes/HashtagNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const constants_1 = require("../constants");
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
@@ -351,7 +351,7 @@ function isSelectionOnEntityBoundary(editor, offset) {
 const classes = {
     root: `${constants_1.PREFIX}-hashtag-plugin-root`
 };
-const Root = (0, styles_1.styled)(HashtagsTypeahead, {
+const Root = (0, material_1.styled)(HashtagsTypeahead, {
     name: constants_1.PREFIX,
     slot: 'HashtagPluginRoot'
 })(() => ({}));

package/lib/cjs/components/Editor/plugins/ImagePlugin.js

@@ -8,7 +8,6 @@ const lexical_1 = require("lexical");
 const utils_1 = require("@lexical/utils");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const chunked_uploady_1 = tslib_1.__importDefault(require("@rpldy/chunked-uploady"));
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -71,7 +70,7 @@ function Image({ editor, className = '' }) {
 const classes = {
     root: `${constants_1.PREFIX}-image-plugin-root`
 };
-const Root = (0, styles_1.styled)(Image, {
+const Root = (0, material_1.styled)(Image, {
     name: constants_1.PREFIX,
     slot: 'ImagePluginRoot'
 })(() => ({}));