@selfcommunity/react-ui 0.11.0 → 1.0.0

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

@@ -7,7 +7,6 @@ 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");
-const lab_1 = require("@mui/lab");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -18,11 +17,11 @@ const PREFIX = 'SCCourseJoinButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.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/cjs/components/CourseParticipantsButton/CourseParticipantsButton.d.ts

@@ -50,4 +50,4 @@ export interface CourseParticipantsButtonProps extends Pick<ButtonProps, Exclude
  
  * @param inProps
  */
-export default function CourseParticipantsButton(inProps: CourseParticipantsButtonProps): JSX.Element;
+export default function CourseParticipantsButton(inProps: CourseParticipantsButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,7 @@
 import { GridProps } from '@mui/material';
-import React from 'react';
 import { CourseProps, CourseSkeletonProps } from '../Course';
 import { CoursesSkeletonProps } from '../Courses/Skeleton';
 import { CreateCourseButtonProps } from '../CreateCourseButton';
-export declare const CoursesChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-}, "avatar" | "className" | "style" | "classes" | "label" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface CoursesProps {
     /**
      * Overrides or extends the styles applied to the component.

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoursesChipRoot = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
@@ -42,7 +41,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-exports.CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
+const CoursesChipRoot = (0, material_1.styled)(material_1.Chip, {
     name: constants_1.PREFIX,
     slot: 'CoursesChipRoot',
     shouldForwardProp: (prop) => prop !== 'showMine' && prop !== 'showManagedCourses'
@@ -207,22 +206,22 @@ function Courses(inProps) {
     /**
      * Renders courses list
      */
-    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 2 }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByName", defaultMessage: "ui.courses.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchCourses();
                                     }
-                                }, InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
-                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByManagedByMe", defaultMessage: "ui.courses.filterByManagedByMe" }), onClick: () => setShowManagedCourses(!showManagedCourses), 
+                                }, slotProps: {
+                                    input: {
+                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchCourses(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchCourses(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
+                                    }
+                                } }) })), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(CoursesChipRoot, { color: showManagedCourses ? 'primary' : 'default', variant: showManagedCourses ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.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 ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: "auto" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.filterByMine", defaultMessage: "ui.courses.filterByMine" }), onClick: handleChipClick, 
+                                showManagedCourses: showManagedCourses, deleteIcon: showManagedCourses ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showManagedCourses ? () => setShowManagedCourses(false) : null, disabled: loading || showMine }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 'auto' } }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { onChange: handleOnChangeCategory, className: classes.category, size: "small", multiple: true }) })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, { children: (0, jsx_runtime_1.jsx)(CoursesChipRoot, { color: showMine ? 'primary' : 'default', variant: showMine ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.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 ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) })))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
+                                showMine: showMine, deleteIcon: showMine ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMine ? handleDeleteClick : null, disabled: loading || showManagedCourses }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !courses.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !canCreateCourse && onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.studentEmptyView }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.emptyRotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.emptyIcon, color: "disabled", fontSize: "large" }, { children: "courses" })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.title", defaultMessage: "ui.courses.empty.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.empty.info", defaultMessage: "ui.courses.empty.info" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.teacherEmptyView }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ teacherView: (onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled, coursesNumber: 1 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps })) }))) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: courses.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? ((0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, { template: course_1.SCCourseTemplateType.PREVIEW })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ coursesNumber: 4 }, CoursesSkeletonComponentProps, { CourseSkeletonProps: CourseSkeletonComponentProps }))), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courses.endMessage", defaultMessage: "ui.courses.endMessage", values: {
                                 button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
+                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [courses.map((course) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Course_1.default, Object.assign({ courseId: course.id }, CourseComponentProps)) }), course.id))), authUserId && ((onlyStaffEnabled && canCreateCourse) || !onlyStaffEnabled) && courses.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 }, className: classes.itemPlaceholder }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, { CreateCourseButtonComponentProps: CreateCourseButtonComponentProps }) }), "placeholder-item"))] }) })) }))) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

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

@@ -39,6 +39,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  */
 function CoursesSkeleton(inProps) {
     const { className, CourseSkeletonProps = {}, coursesNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {}, teacherView = false } = inProps, rest = tslib_1.__rest(inProps, ["className", "CourseSkeletonProps", "coursesNumber", "GridContainerComponentProps", "GridItemComponentProps", "teacherView"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 3 }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, {}) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.courses }, GridContainerComponentProps, { children: [...Array(coursesNumber)].map((_course, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6, lg: 3 } }, GridItemComponentProps, { className: classes.item }, { children: teacherView ? (0, jsx_runtime_1.jsx)(CreatePlaceholder_1.default, {}) : (0, jsx_runtime_1.jsx)(Course_1.CourseSkeleton, Object.assign({}, CourseSkeletonProps)) }), index))) })) })));
 }
 exports.default = CoursesSkeleton;

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

@@ -11,4 +11,4 @@ export interface CreateEventWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function CreateEventWidget(inProps: CreateEventWidgetProps): JSX.Element;
+export default function CreateEventWidget(inProps: CreateEventWidgetProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/CreateEventWidget/Skeleton.d.ts

@@ -1 +1 @@
-export default function CreateEventWidgetSkeleton(): JSX.Element;
+export default function CreateEventWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -102,6 +102,12 @@ function CreateLiveStreamDialog(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), slots: {
+            transition: Transition
+        }, slotProps: {
+            paper: {
+                elevation: 0
+            }
+        } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
 }
 exports.default = CreateLiveStreamDialog;

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

@@ -27,13 +27,13 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Container, {
     name: exports.PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 // Styled components
 const OptionCard = (0, material_1.styled)(material_1.Paper, {
     name: exports.PREFIX,
     slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
-})(({ theme, selected }) => ({
+})(() => ({
     '& h6': {
         fontWeight: 'bold',
         textTransform: 'uppercase'
@@ -42,7 +42,7 @@ const OptionCard = (0, material_1.styled)(material_1.Paper, {
 const FeatureItem = (0, material_1.styled)(material_1.Box, {
     name: exports.PREFIX,
     slot: 'featureItemRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
  *
@@ -70,7 +70,6 @@ function LiveStreamSelector(inProps) {
     });
     const { className, liveSelected, onLiveSelected, onNext } = props;
     // CONTEXT
-    const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // STATE
@@ -166,9 +165,7 @@ function LiveStreamSelector(inProps) {
         let _message;
         if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
+                    link: (chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks }), "ui.liveStreamForm.selector.warningSubscriptionRequired.link"))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
@@ -190,7 +187,7 @@ function LiveStreamSelector(inProps) {
                             e.preventDefault();
                         }
                     } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: option.title })), (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: selectedOption === option.type })] }), (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: "option-image" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
-                                return ((0, jsx_runtime_1.jsx)(FeatureItem, Object.assign({ component: "li" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
+                                return ((0, jsx_runtime_1.jsx)(FeatureItem, Object.assign({ as: "li" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
                             }) }))] }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
 }
 exports.default = LiveStreamSelector;

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

@@ -7,4 +7,4 @@ export interface CreatePaymentProductFormProps extends BoxProps {
     onError?: (e: any) => void;
     onChange?: (p: any) => void;
 }
-export default function CreatePaymentProductForm(inProps: CreatePaymentProductFormProps): JSX.Element;
+export default function CreatePaymentProductForm(inProps: CreatePaymentProductFormProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -9,7 +9,6 @@ const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("./constants");
-const lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
@@ -136,9 +135,11 @@ function CreatePaymentProductForm(inProps) {
         return null;
     }
     console.log(fieldsError);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 1 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "description", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fieldsError.unitAmount })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: Payments_1.DEFAULT_MIN_PRICE }) })), InputProps: {
-                    startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
-                    inputComponent: NumericFormatCustom
-                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ mb: 1 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ size: "small", id: "description", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fieldsError.unitAmount })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: Payments_1.DEFAULT_MIN_PRICE }) })), slotProps: {
+                    input: {
+                        startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
+                        inputComponent: NumericFormatCustom
+                    }
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
 }
 exports.default = CreatePaymentProductForm;

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

@@ -10,7 +10,7 @@ const classes = {
 const Root = (0, material_1.styled)(Skeleton_1.GenericSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Custom Adv Skeleton component. Learn about the available props and the CSS API.
 

package/lib/cjs/components/EditCourse/Customize.d.ts

@@ -4,6 +4,6 @@ interface CustomizeProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
 }
-declare function Customize(props: CustomizeProps): JSX.Element;
+declare function Customize(props: CustomizeProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Customize>;
 export default _default;

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

@@ -10,4 +10,4 @@ export interface EditCourseProps {
     className?: HTMLAttributes<HTMLDivElement>['className'];
     [p: string]: any;
 }
-export default function EditCourse(inProps: EditCourseProps): JSX.Element;
+export default function EditCourse(inProps: EditCourseProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/EditCourse/Lessons/AddButton.d.ts

@@ -4,6 +4,6 @@ interface AddButtonProps extends ButtonProps {
     label: string;
     handleAddRow: () => void;
 }
-declare function AddButton(props: AddButtonProps): JSX.Element;
+declare function AddButton(props: AddButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof AddButton>;
 export default _default;

package/lib/cjs/components/EditCourse/Lessons/ChangeLessonStatus.d.ts

@@ -8,6 +8,6 @@ interface ChangeLessonStatusProps {
     onChange: (lesson: SCCourseLessonType, type: ActionLessonType) => void;
     disabled?: boolean;
 }
-declare function ChangeLessonStatus(props: ChangeLessonStatusProps): JSX.Element;
+declare function ChangeLessonStatus(props: ChangeLessonStatusProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ChangeLessonStatus>;
 export default _default;

package/lib/cjs/components/EditCourse/Lessons/ChangeLessonStatus.js

@@ -9,7 +9,6 @@ const constants_1 = require("../constants");
 const MenuRow_1 = tslib_1.__importDefault(require("../MenuRow"));
 const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../../constants/Errors");
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -77,12 +76,12 @@ function ChangeLessonStatus(props) {
             handleAction(newValue);
         }
     }, [handleAction, value]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(MenuRow_1.default, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(MenuRow_1.default, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'
                         }
-                    } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option.value }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'

package/lib/cjs/components/EditCourse/Lessons/FieldName.d.ts

@@ -10,6 +10,6 @@ interface FieldNameProps<T> {
     editMode: boolean;
     handleDisableEditMode: () => void;
 }
-declare function FieldName<T extends SCCourseSectionType>(props: FieldNameProps<T>): JSX.Element;
+declare function FieldName<T extends SCCourseSectionType>(props: FieldNameProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof FieldName>;
 export default _default;

package/lib/cjs/components/EditCourse/Lessons/FieldName.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 lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const constants_1 = require("../constants");
@@ -78,6 +77,6 @@ function FieldName(props) {
             handleDisableEditMode();
         }
     }, [row, isNewRow, handleManageRow, setName, handleDisableEditMode]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isNewRow || editMode ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.editModeWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: isNewRow || editMode ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.editModeWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
 }
 exports.default = (0, react_1.memo)(FieldName);

package/lib/cjs/components/EditCourse/Lessons/Skeleton.d.ts

@@ -1 +1 @@
-export default function LessonsSkeleton(): JSX.Element;
+export default function LessonsSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/EditCourse/Lessons.d.ts

@@ -6,6 +6,6 @@ interface LessonsProps {
     setCourse: (course: SCCourseType) => void;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Lessons(props: LessonsProps): JSX.Element;
+declare function Lessons(props: LessonsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Lessons>;
 export default _default;

package/lib/cjs/components/EditCourse/MenuRow.d.ts

@@ -4,6 +4,6 @@ interface MenuRowProps extends PropsWithChildren {
     buttonClassName?: HTMLAttributes<HTMLButtonElement>['className'];
     disabled?: boolean;
 }
-declare function MenuRow(props: MenuRowProps): JSX.Element;
+declare function MenuRow(props: MenuRowProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MenuRow>;
 export default _default;

package/lib/cjs/components/EditCourse/Options/Skeleton.d.ts

@@ -1 +1 @@
-export default function OptionsSkeleton(): JSX.Element;
+export default function OptionsSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/EditCourse/Options/SwitchForm.d.ts

@@ -6,6 +6,6 @@ interface SwitchFormProps {
     checked: boolean;
     handleChangeOptions: (key: string, value: boolean) => void;
 }
-declare function SwitchForm(props: SwitchFormProps): JSX.Element;
+declare function SwitchForm(props: SwitchFormProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SwitchForm>;
 export default _default;

package/lib/cjs/components/EditCourse/Options.d.ts

@@ -4,6 +4,6 @@ interface OptionsProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
 }
-declare function Options(props: OptionsProps): JSX.Element;
+declare function Options(props: OptionsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Options>;
 export default _default;

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

@@ -11,7 +11,6 @@ const Errors_1 = require("../../constants/Errors");
 const notistack_1 = require("notistack");
 const SwitchForm_1 = tslib_1.__importDefault(require("./Options/SwitchForm"));
 const use_deep_compare_effect_1 = tslib_1.__importDefault(require("use-deep-compare-effect"));
-const lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
 const classes = {
     optionsContainer: `${constants_1.PREFIX}-options-container`,
@@ -91,6 +90,6 @@ function Options(props) {
             });
         });
     }, [course, tempOptions, setCanSave, setLoading]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => ((0, jsx_runtime_1.jsx)(SwitchForm_1.default, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => ((0, jsx_runtime_1.jsx)(SwitchForm_1.default, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
 }
 exports.default = (0, react_1.memo)(Options);

package/lib/cjs/components/EditCourse/Requests.d.ts

@@ -7,6 +7,6 @@ interface RequestsProps {
     endpointQueryParams?: BaseGetParams;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Requests(props: RequestsProps): JSX.Element;
+declare function Requests(props: RequestsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Requests>;
 export default _default;

package/lib/cjs/components/EditCourse/Skeleton.d.ts

@@ -3,6 +3,6 @@ import { SCCourseEditTabType } from '../../types';
 interface EditCourseSkeletonProps {
     tab?: SCCourseEditTabType;
 }
-declare function EditCourseSkeleton(props: EditCourseSkeletonProps): JSX.Element;
+declare function EditCourseSkeleton(props: EditCourseSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof EditCourseSkeleton>;
 export default _default;

package/lib/cjs/components/EditCourse/Status.d.ts

@@ -5,5 +5,5 @@ interface StatusProps {
     course: SCCourseType;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-export default function Status(props: StatusProps): JSX.Element;
+export default function Status(props: StatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -27,7 +27,7 @@ function Status(props) {
                         id: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                         defaultMessage: `ui.course.privacy.${course.privacy === types_1.SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                     }),
-                    b: (chunks) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks })))
+                    b: (chunks) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks }), "ui.editCourse.tab.lessons.status.b"))
                 }) })) })), className: (0, classnames_1.default)(classes.status, classes.contrastColor) }));
 }
 exports.default = Status;

package/lib/cjs/components/EditCourse/Users/Skeleton.d.ts

@@ -1 +1 @@
-export default function UsersSkeleton(): JSX.Element;
+export default function UsersSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/EditCourse/Users.d.ts

@@ -6,6 +6,6 @@ interface UsersProps {
     endpointQueryParams?: Record<string, string | number>;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Users(props: UsersProps): JSX.Element;
+declare function Users(props: UsersProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Users>;
 export default _default;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
 import { MediaPluginProps } from './plugins';
 import { SCMediaType } from '@selfcommunity/types';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

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

@@ -37,7 +37,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
     overridesResolver: (props, styles) => {
         return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
     }
-})(({ theme }) => ({}));
+})(() => ({}));
 const editorTheme = {
     heading: {
         h1: `${constants_1.PREFIX}-h1`,
@@ -107,7 +107,7 @@ const Editor = (inProps, ref) => {
         name: constants_1.PREFIX
     });
     const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, uploadFile = false, editable = true, onChange = null, onMediaChange = null, onFocus = null, onBlur = null, action = null, ToolBarProps = {}, MediaPluginProps = {}, placeholder = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }), isLessonCommentEditor = false } = props;
-    const apiRef = (0, react_1.useRef)();
+    const apiRef = (0, react_1.useRef)(null);
     // STATE
     const [focused, setFocused] = (0, react_1.useState)(false);
     // HANDLERS
@@ -117,7 +117,7 @@ const Editor = (inProps, ref) => {
     const handleMediaChange = (media) => {
         onMediaChange && onMediaChange(media);
     };
-    const handleError = (error, editor) => {
+    const handleError = (error) => {
         console.log(error);
     };
     const handleFocus = () => {

package/lib/cjs/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

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

@@ -12,16 +12,16 @@ function convertHashtagElement(domNode) {
     };
 }
 class HashtagNode extends lexical_1.TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

package/lib/cjs/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

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

@@ -107,18 +107,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 class ImageNode extends lexical_1.DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/cjs/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;