@selfcommunity/react-ui 0.11.0-alpha.99 → 0.11.0-mui7.14

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: { 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: { 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({ size: { xs: 12 } }, { 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
                                 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: { 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: { 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: { 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,8 +165,6 @@ 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 })))
                 } }));
         }
@@ -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

@@ -136,9 +136,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
+    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)(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" }) }))] }))] })));
 }
 exports.default = CreatePaymentProductForm;

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/EditCourse.js

@@ -105,6 +105,6 @@ function EditCourse(inProps) {
     if (!scCourse) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { tab: tab });
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ href: scRoutingContext.url(react_core_1.SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(lab_1.TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: isMobile ? 'scrollable' : 'standard', scrollButtons: isMobile, centered: !isMobile }, { children: TAB_DATA.map((data, i) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: (0, classnames_1.default)(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ sx: { className: classes.tabPanel }, value: data.value }, { children: data.children }), i)))] }))] })));
 }
 exports.default = EditCourse;

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/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/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/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/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;

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

@@ -25,16 +25,16 @@ function convertMentionElement(domNode) {
     };
 }
 class MentionNode extends lexical_1.TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);

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

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<ApiRef>>;
 export default _default;

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

@@ -17,14 +17,16 @@ function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
     const handleOpen = (event) => {
         setEmojiAnchorEl(event.currentTarget);
     };
-    const handleEmojiClick = (emojiData, event) => {
+    const handleEmojiClick = (emojiData) => {
         editor.focus();
         editor.dispatchCommand(lexical_1.CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
     };
     if (isMobile) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: material_1.Fade, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "sentiment_satisfied_alt" }) })), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), slots: {
+                    transition: material_1.Fade
+                }, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
                 } }, { children: (0, jsx_runtime_1.jsx)(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }) }))] }));
 }

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

@@ -95,10 +95,12 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
-                }, 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)(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" }) }))] })))
+                }, slotProps: {
+                    input: {
+                        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)(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/MediaPlugin.d.ts

@@ -11,4 +11,4 @@ export interface MediaPluginProps {
     onMediaAdd?: (media: SCMediaType) => void | null;
     isUploading?: (boolean: any) => void;
 }
-export default function MediaPlugin(props: MediaPluginProps): JSX.Element;
+export default function MediaPlugin(props: MediaPluginProps): import("react/jsx-runtime").JSX.Element;

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

@@ -40,8 +40,12 @@ function MediaPlugin(props) {
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const acceptedMediaMimetypes = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_ACCEPTED_MEDIA_MIMETYPES].value, [preferences]);
     (0, react_1.useEffect)(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
@@ -63,13 +67,14 @@ function MediaPlugin(props) {
     }, [editor]);
     // HANDLERS
     const handleFileUploadFilter = (file) => {
-        if (file.type.startsWith('image/')) {
+        const type = file.type;
+        if (type.startsWith('image/')) {
             setMediaType('image');
         }
         else {
             setMediaType('file');
         }
-        return file.type.startsWith('image/') || file.type.startsWith('application/');
+        return acceptedMediaMimetypes.includes(type);
     };
     const handleUploadSuccess = (media) => {
         if (media.type === 'image') {
@@ -97,7 +102,7 @@ function MediaPlugin(props) {
         setUploading(Object.assign({}, chunks));
         isUploading && isUploading(Object.keys(chunks).length !== 0);
     };
-    const handleUploadError = (chunk, error) => {
+    const handleUploadError = (_chunk, error) => {
         enqueueSnackbar(error, {
             variant: 'error',
             autoHideDuration: 3000
@@ -112,7 +117,7 @@ function MediaPlugin(props) {
                 url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
                 headers: ((_a = scContext.settings.session) === null || _a === void 0 ? void 0 : _a.authToken) ? { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` } : {},
                 method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-            }, chunkSize: 204800, accept: "image/*,application/*", fileFilter: handleFileUploadFilter, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
+            }, chunkSize: 204800, accept: acceptedMediaMimetypes, fileFilter: handleFileUploadFilter, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { type: mediaType, onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }), (0, jsx_runtime_1.jsx)(UploadButton, { className: className, extraProps: {
                         disabled: Object.keys(uploading).length !== 0,
                         progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
                     } })] })) })));

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

@@ -1,9 +1,9 @@
-declare type MentionMatch = {
+type MentionMatch = {
     leadOffset: number;
     matchingString: string;
     replaceableString: string;
 };
-declare type Resolution = {
+type Resolution = {
     match: MentionMatch;
     range: Range;
 };