@selfcommunity/react-ui 1.2.0-alpha.0 → 1.2.0-alpha.1

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

@@ -95,11 +95,11 @@ function Comments(props) {
                 map.set(name, [...map.get(name), comment]);
             }
         });
-        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: comment.created_at }) }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html } })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME, getUrlLesson(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "outlined", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
+        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: name })), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [comments.map((comment) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Avatar, { src: comment.created_by.avatar, alt: comment.created_by.username, className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedDate, { value: comment.created_at }) }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html }, className: classes.contrastColor })] })] }), comment.id))), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME, getUrlLesson(comments[0].extras.course, comments[0].extras.lesson, comments[0].extras.section)), size: "small", variant: "contained", color: "inherit", className: classes.button }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.lessons.btn.label" }) })) }))] }))] }), name)));
     }, [state.results]);
     if (!state.initialized) {
         return _jsx(CommentsSkeleton, {});
     }
-    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && _jsx(CommentSkeleton, { id: 1 }), _jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
+    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.number", defaultMessage: "ui.course.dashboard.teacher.tab.comments.number", values: { commentsNumber: state.count } }) })), renderComments, isLoading && _jsx(CommentSkeleton, { id: 1 }), _jsx(Button, Object.assign({ size: "small", variant: "contained", color: "inherit", loading: isLoading, disabled: !state.next, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.btn.label", defaultMessage: "ui.course.dashboard.teacher.tab.comments.btn.label" }) })) }))] })) : (_jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.tab.comments.empty", defaultMessage: "ui.course.dashboard.teacher.tab.comments.empty" }) }))) })));
 }
 export default memo(Comments);

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

@@ -6,11 +6,12 @@ import CourseParticipantsButton from '../../CourseParticipantsButton';
 import { memo } from 'react';
 import { InfoPositionType } from '../types';
 const classes = {
-    info: `${PREFIX}-info`
+    info: `${PREFIX}-info`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function InfoCourseDashboard(props) {
     // PROPS
     const { title, course, position } = props;
-    return (_jsxs(Stack, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), position === InfoPositionType.FIRST && _jsx(CourseParticipantsButton, { course: course }), position === InfoPositionType.SECOND && _jsxs(Typography, Object.assign({ variant: "h5" }, { children: [course.avg_completion_rate, "%"] }))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), position === InfoPositionType.FIRST && _jsx(CourseParticipantsButton, { course: course }), position === InfoPositionType.SECOND && (_jsxs(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: [course.avg_completion_rate, "%"] })))] })));
 }
 export default memo(InfoCourseDashboard);

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

@@ -280,13 +280,14 @@ export default function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, slotProps: {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL &&
+                            Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classNames(classes.cardTitle, classes.contrastColor) }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, slotProps: {
                                                 input: {
-                                                    endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length })))
                                                 }
                                             }, error: Boolean((!!course && !field.name) || field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: !!course && !field.name ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
                                                 input: {
-                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2", className: classes.contrastColor }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
                                                 }
                                             }, error: Boolean((!!field.privacy && !field.description) || ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: !!field.privacy && !field.description ? (_jsx(FormattedMessage, { id: "ui.courseForm.required", defaultMessage: "ui.courseForm.required" })) : (((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > COURSE_DESCRIPTION_MAX_LENGTH && (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" }))) }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (course && { contentId: course.id }), { contentType: SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(Button, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
@@ -299,5 +300,5 @@ export default function CourseForm(inProps) {
                                     ? () => handleChangeStep(SCCourseFormStepType.CUSTOMIZATION)
                                     : field.privacy !== SCCoursePrivacyType.DRAFT && course.privacy === SCCoursePrivacyType.DRAFT
                                         ? () => setOpenDialog(true)
-                                        : handleSubmit, color: "primary" }, { children: course ? (_jsx(FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" })) : _step === SCCourseFormStepType.GENERAL ? (_jsx(FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" })) : (_jsx(FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" })) })) }))] })) })), openDialog && _jsx(CoursePublicationDialog, { onSubmit: handleSubmit, onClose: handleClose })] }));
+                                        : handleSubmit, color: "primary" }, { children: course ? (_jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.action.save", defaultMessage: "ui.courseForm.edit.action.save" }) }))) : _step === SCCourseFormStepType.GENERAL ? (_jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.button.next", defaultMessage: "ui.courseForm.button.next" }) }))) : (_jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.button.create", defaultMessage: "ui.courseForm.button.create" }) }))) })) }))] })) })), openDialog && _jsx(CoursePublicationDialog, { onSubmit: handleSubmit, onClose: handleClose })] }));
 }

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

@@ -3,6 +3,10 @@ import { Button, Typography } from '@mui/material';
 import BaseDialog from '../../shared/BaseDialog';
 import { FormattedMessage } from 'react-intl';
 import { memo, useCallback } from 'react';
+import { PREFIX } from './constants';
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 function CoursePublicationDialog(props) {
     // PROPS
     const { onSubmit, onClose } = props;
@@ -11,6 +15,6 @@ function CoursePublicationDialog(props) {
         onSubmit();
         onClose();
     }, [onSubmit, onClose]);
-    return (_jsx(BaseDialog, Object.assign({ open: true, DialogContentProps: { dividers: false }, onClose: onClose, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.title", defaultMessage: "ui.courseForm.edit.dialog.title" }) })), actions: _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleSubmit }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.btn", defaultMessage: "ui.courseForm.edit.dialog.btn" }) })) })) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.description", defaultMessage: "ui.courseForm.edit.dialog.description" }) })) })));
+    return (_jsx(BaseDialog, Object.assign({ open: true, DialogContentProps: { dividers: false }, onClose: onClose, title: _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.title", defaultMessage: "ui.courseForm.edit.dialog.title" }) })), actions: _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleSubmit }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.btn", defaultMessage: "ui.courseForm.edit.dialog.btn" }) })) })) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.dialog.description", defaultMessage: "ui.courseForm.edit.dialog.description" }) })) })));
 }
 export default memo(CoursePublicationDialog);

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

@@ -17,7 +17,8 @@ const classes = {
     publishInfo: `${PREFIX}-edit-publish-info`,
     privacyItem: `${PREFIX}-edit-privacy-item`,
     privacyItemInfo: `${PREFIX}-edit-privacy-item-info`,
-    disabled: `${PREFIX}-disabled`
+    disabled: `${PREFIX}-disabled`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -43,11 +44,11 @@ export default function CourseEdit(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.courseForm.edit.access.info.access.icon") } }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.courseForm.edit.access.info.visibility.icon") } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), notPublishable ? (_jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle.info", defaultMessage: "ui.courseForm.edit.publication.subtitle.info" }) })] }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.publishInfo }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) }))), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [course.privacy === SCCoursePrivacyType.DRAFT && (_jsxs(Box, Object.assign({ className: classes.access }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.section.title", defaultMessage: "ui.courseForm.edit.access.section.title" }) })), _jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.title", defaultMessage: "ui.courseForm.edit.access.info.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.subtitle", defaultMessage: "ui.courseForm.edit.access.info.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.accessInfo }, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.access", defaultMessage: "ui.courseForm.edit.access.info.access", values: { icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.courseForm.edit.access.info.access.icon") } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.access.info.visibility", defaultMessage: "ui.courseForm.edit.access.info.visibility", values: { icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.courseForm.edit.access.info.visibility.icon") } }) }))] }))] })] }))] }))), _jsxs(Box, Object.assign({ className: classes.publish }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.title", defaultMessage: "ui.courseForm.edit.publication.title" }) })), notPublishable ? (_jsxs(Widget, Object.assign({ className: classes.card }, { children: [_jsx(Icon, Object.assign({ fontSize: "medium", color: "warning" }, { children: "error" })), _jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle.info", defaultMessage: "ui.courseForm.edit.publication.subtitle.info" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.publishInfo, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.publication.subtitle", defaultMessage: "ui.courseForm.edit.publication.subtitle" }) }))), _jsx(RadioGroup, { children: Object.values(SCCoursePrivacyType)
                             .filter((option) => option !== SCCoursePrivacyType.DRAFT)
-                            .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem, disabled: notPublishable }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange, disabled: notPublishable }), label: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: {
+                            .map((option, index) => (_jsxs(FormControl, Object.assign({ className: classes.privacyItem, disabled: notPublishable }, { children: [_jsx(FormControlLabel, { control: _jsx(Radio, { size: "small", value: option, checked: option === privacy, onChange: handleChange, disabled: notPublishable }), label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.title`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.title` }) })) }), _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.contrastColor, classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.access`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.access`, values: {
                                                     icon: (chunks) => (_jsx(Icon, { children: chunks }, `ui.courseForm.edit.publication.option.${option}.access.icon`))
-                                                } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable }) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: {
+                                                } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: (classes.contrastColor, classNames(classes.privacyItemInfo, { [classes.disabled]: notPublishable })) }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.edit.publication.option.${option}.visibility`, defaultMessage: `ui.courseForm.edit.publication.option.${option}.visibility`, values: {
                                                     icon: (chunks) => (_jsx(Icon, { children: chunks }, `ui.courseForm.edit.publication.option.${option}.visibility.icon`))
                                                 } }) }))] })] }), index))) })] }))] })));
 }

package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, AvatarGroup, Button, Icon, List, ListItem, Typography, styled } from '@mui/material';
-import { useThemeProps } from '@mui/system';
+import { Avatar, AvatarGroup, Button, Icon, List, ListItem, Typography, styled, useThemeProps } from '@mui/material';
 import { CourseService, Endpoints, http } from '@selfcommunity/api-services';
 import { useSCFetchCourse } from '@selfcommunity/react-core';
 import { SCCourseJoinStatusType } from '@selfcommunity/types';
@@ -23,7 +22,8 @@ const classes = {
     dialogRoot: `${PREFIX}-dialog-root`,
     endMessage: `${PREFIX}-end-message`,
     infiniteScroll: `${PREFIX}-infinite-scroll`,
-    participants: `${PREFIX}-participants`
+    participants: `${PREFIX}-participants`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Button, {
     name: PREFIX,
@@ -142,5 +142,5 @@ export default function CourseParticipantsButton(inProps) {
     }
     return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || count === 0, 
                 // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
-                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classes.participants }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : (_jsx(AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: enrolled.map((e) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classNames(classes.participants, classes.contrastColor) }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : (_jsx(AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus, className: classes.contrastColor }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classNames(classes.endMessage, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: enrolled.map((e) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
 }

package/lib/esm/components/EditCourse/Lessons/AddButton.js

@@ -9,7 +9,8 @@ import { SCGroupEventType, SCTopicType } from '../../../constants/PubSub';
 import { Fragment, memo, useCallback } from 'react';
 const classes = {
     sectionButton: `${PREFIX}-section-button`,
-    sectionButtonTypography: `${PREFIX}-section-button-typography`
+    sectionButtonTypography: `${PREFIX}-section-button-typography`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function AddButton(props) {
     // PROPS
@@ -22,6 +23,6 @@ function AddButton(props) {
         handleAddRow();
         PubSub.publish(`${SCTopicType.COURSE}.${SCGroupEventType.UPDATE}`, true);
     }, [handleAddRow]);
-    return (_jsx(Fragment, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: handleClick }, { children: _jsx(Icon, { children: "add_circle_outline" }) }))) : (_jsx(Button, Object.assign({ className: classNames(classes.sectionButton, className), size: "small", startIcon: _jsx(Icon, { children: "add_circle_outline" }), onClick: handleClick }, rest, { children: _jsx(Typography, Object.assign({ className: classes.sectionButtonTypography, variant: "body1" }, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })) }))) }));
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: handleClick }, { children: _jsx(Icon, { children: "add_circle_outline" }) }))) : (_jsx(Button, Object.assign({ className: classNames(classes.sectionButton, className), size: "small", startIcon: _jsx(Icon, { children: "add_circle_outline" }), onClick: handleClick }, rest, { children: _jsx(Typography, Object.assign({ className: classNames(classes.sectionButtonTypography, classes.contrastColor), variant: "body1" }, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })) }))) }));
 }
 export default memo(AddButton);

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

@@ -10,6 +10,7 @@ import { useSnackbar } from 'notistack';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
 import { CourseService } from '@selfcommunity/api-services';
 import { ActionLessonType } from '../types';
+import classNames from 'classnames';
 const OPTIONS = [
     {
         id: 'ui.editCourse.tab.lessons.table.select.draft',
@@ -22,7 +23,8 @@ const OPTIONS = [
 ];
 const classes = {
     changeLessonStatusPublishedWrapper: `${PREFIX}-change-lesson-status-published-wrapper`,
-    changeLessonStatusIconDraft: `${PREFIX}-change-lesson-status-icon-draft`
+    changeLessonStatusIconDraft: `${PREFIX}-change-lesson-status-icon-draft`,
+    contrastColor: `${PREFIX}-constrast-color`
 };
 function ChangeLessonStatus(props) {
     // PROPS
@@ -73,16 +75,16 @@ function ChangeLessonStatus(props) {
             handleAction(newValue);
         }
     }, [handleAction, value]);
-    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: classNames(classes.contrastColor, hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined), icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'
                         }
-                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: classNames(classes.contrastColor, hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined), size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'
                         }
-                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
 }
 export default memo(ChangeLessonStatus);

package/lib/esm/components/EditCourse/Lessons/FieldName.js

@@ -14,7 +14,8 @@ import { SCGroupEventType, SCTopicType } from '../../../constants/PubSub';
 const classes = {
     editModeWrapper: `${PREFIX}-edit-mode-wrapper`,
     editModeSaveButton: `${PREFIX}-edit-mode-save-button`,
-    editModeCloseButton: `${PREFIX}-edit-mode-close-button`
+    editModeCloseButton: `${PREFIX}-edit-mode-close-button`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function FieldName(props) {
     // PROPS
@@ -74,6 +75,6 @@ function FieldName(props) {
             handleDisableEditMode();
         }
     }, [row, isNewRow, handleManageRow, setName, handleDisableEditMode]);
-    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
+    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "contained", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: row.name }))) }));
 }
 export default memo(FieldName);

package/lib/esm/components/EditCourse/Lessons/LessonRow.js

@@ -20,7 +20,8 @@ const classes = {
     cellAlignRight: `${PREFIX}-cell-align-right`,
     cellPadding: `${PREFIX}-cell-padding`,
     tableBodyIconWrapper: `${PREFIX}-table-body-icon-wrapper`,
-    actionsWrapper: `${PREFIX}-actions-wrapper`
+    actionsWrapper: `${PREFIX}-actions-wrapper`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function LessonRow(props, ref) {
     // PROPS
@@ -60,6 +61,6 @@ function LessonRow(props, ref) {
                             ? Endpoints.CreateCourseLesson.url({ id: course.id, section_id: section.id })
                             : Endpoints.PatchCourseLesson.url({ id: course.id, section_id: section.id, lesson_id: lesson.id }),
                         method: isNewRow ? Endpoints.CreateCourseLesson.method : Endpoints.PatchCourseLesson.method
-                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, {}), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(ChangeLessonStatus, { course: course, section: section, lesson: lesson, onChange: handleManageLesson, disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), _jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
+                    }, row: lesson, isNewRow: isNewRow, handleManageRow: handleManageLesson, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, {}), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(ChangeLessonStatus, { course: course, section: section, lesson: lesson, onChange: handleManageLesson, disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_EDIT_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.edit", defaultMessage: "ui.editCourse.tab.lessons.table.menu.edit" }) })) })), _jsx(MenuItem, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_PREVIEW_ROUTE_NAME, getUrlLesson(course, lesson, section)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.preview", defaultMessage: "ui.editCourse.tab.lessons.table.menu.preview" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })));
 }
 export default memo(forwardRef(LessonRow));

package/lib/esm/components/EditCourse/Lessons/SectionRow.js

@@ -25,7 +25,8 @@ const classes = {
     cellWidth: `${PREFIX}-cell-width`,
     cellAlignRight: `${PREFIX}-cell-align-right`,
     cellAlignCenter: `${PREFIX}-cell-align-center`,
-    cellPadding: `${PREFIX}-cell-padding`
+    cellPadding: `${PREFIX}-cell-padding`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 function SectionRow(props, ref) {
     // PROPS
@@ -150,6 +151,6 @@ function SectionRow(props, ref) {
                                     ? Endpoints.CreateCourseSection.url({ id: course.id })
                                     : Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== SCCourseTypologyType.SELF && (_jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _jsx(LessonReleaseMenu, { course: course, section: section }) }))), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: RowType.SECTION, section }) }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsx(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: _jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), course.type !== SCCourseTypologyType.SELF && (_jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: _jsx(LessonReleaseMenu, { course: course, section: section }) }))), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "contained", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: () => handleOpenDialog({ row: RowType.SECTION, section }) }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsx(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: _jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson, handleOpenDialog: () => handleOpenDialog({ row: RowType.LESSON, section, lesson }), ref: innerRef }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })) })) })] }));
 }
 export default memo(forwardRef(SectionRow));

package/lib/esm/components/EditCourse/Lessons.js

@@ -184,10 +184,10 @@ function Lessons(props) {
         }
         handleOpenDialog(null);
     }, [dialog, handleOpenDialog]);
-    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
+    return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ className: classNames(classes.lessonTitle, classes.contrastColor), variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons", defaultMessage: "ui.editCourse.tab.lessons" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonInfoWrapper }, { children: [_jsx(CourseTypePopover, { course: course }), _jsx(Status, { course: course, handleTabChange: handleTabChange })] })), sections.length === 0 && (_jsx(EmptyStatus, { icon: "courses", title: "ui.editCourse.tab.lessons.table.empty.title", description: "ui.editCourse.tab.lessons.table.empty.description", actions: _jsx(AddButton, { className: classes.emptyStatusButton, label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "inherit", variant: "outlined" }), className: classes.lessonEmptyStatus })), sections.length > 0 && (_jsxs(Box, Object.assign({ className: classes.lessonsInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSectionsWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
                                                 sectionsNumber: course.num_sections
-                                            } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                            } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                                 lessonsNumber: course.num_lessons
-                                            } }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classes.tableHeaderTypography, variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
+                                            } }) }))] })), _jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.section", handleAddRow: handleAddTempSection, color: "primary", variant: "contained", disabled: isDisabled })] })), _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(TableContainer, Object.assign({ className: classes.tableContainer }, { children: _jsxs(Table, Object.assign({ className: classes.table }, { children: [_jsx(TableHead, Object.assign({ className: classes.tableHeader }, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.cellWidth }), headerCells.map((cell, i) => (_jsx(TableCell, Object.assign({ className: cell.className }, { children: _jsx(Typography, Object.assign({ className: classNames(classes.tableHeaderTypography, classes.contrastColor), variant: "overline" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i)))] }) })), _jsx(Droppable, Object.assign({ droppableId: "droppable-1" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { className: classes.tableBody }, { children: [sections.map((section, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(SectionRow, { course: course, provider: innerProvider, section: section, isNewRow: isNewRow && i + 1 === array.length, handleManageSection: handleManageSection, handleOpenDialog: handleOpenDialog, ref: ref }, i)) }), i))), outerProvider.placeholder] }))) }))] })) })) })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleDeleteRow })] })))] }));
 }
 export default memo(Lessons);

package/lib/esm/components/EditCourse/Options/SwitchForm.js

@@ -2,6 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, FormControlLabel, FormLabel, Switch, Typography } from '@mui/material';
 import { memo, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { PREFIX } from '../constants';
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 function SwitchForm(props) {
     // PROPS
     const { name, title, description, checked, handleChangeOptions } = props;
@@ -13,6 +17,6 @@ function SwitchForm(props) {
         setValue(_checked);
         handleChangeOptions(name, _checked);
     }, [setValue]);
-    return (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })) })), _jsx(FormControlLabel, { control: _jsx(Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) })) })] })));
+    return (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })) })), _jsx(FormControlLabel, { control: _jsx(Switch, { color: "primary", checked: value, name: name, onChange: handleChange }), label: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: description, defaultMessage: description }) })) })] })));
 }
 export default memo(SwitchForm);

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

@@ -13,7 +13,8 @@ const classes = {
     optionsContainer: `${PREFIX}-options-container`,
     optionsWrapper: `${PREFIX}-options-wrapper`,
     optionsDivider: `${PREFIX}-options-divider`,
-    optionsButtonWrapper: `${PREFIX}-options-button-wrapper`
+    optionsButtonWrapper: `${PREFIX}-options-button-wrapper`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const OPTIONS = {
     enforce_lessons_order: {
@@ -87,6 +88,6 @@ function Options(props) {
             });
         });
     }, [course, tempOptions, setCanSave, setLoading]);
-    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
+    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
 }
 export default memo(Options);

package/lib/esm/components/LessonDrawer/LessonDrawer.js

@@ -15,7 +15,8 @@ const classes = {
     header: `${PREFIX}-header`,
     headerAction: `${PREFIX}-header-action`,
     headerContent: `${PREFIX}-header-content`,
-    headerEdit: `${PREFIX}-header-edit`
+    headerEdit: `${PREFIX}-header-edit`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Drawer, {
     name: PREFIX,
@@ -29,5 +30,5 @@ export default function LessonDrawer(inProps) {
         name: PREFIX
     });
     const { className = null, lesson, course, editMode = false, previewMode = false, activePanel = null, LessonCommentObjectsProps = {}, LessonEditFormProps, handleClose, handleChangeLesson } = props, rest = __rest(props, ["className", "lesson", "course", "editMode", "previewMode", "activePanel", "LessonCommentObjectsProps", "LessonEditFormProps", "handleClose", "handleChangeLesson"]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [_jsx(Box, Object.assign({ className: classNames(classes.header, { [classes.headerEdit]: editMode }) }, { children: _jsxs(Box, Object.assign({ className: classes.headerContent }, { children: [_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: editMode ? (_jsx(FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : (_jsx(FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), _jsx(IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })) })), _jsx(Divider, {}), editMode ? (_jsx(LessonEditForm, Object.assign({}, LessonEditFormProps))) : activePanel === SCLessonActionsType.COMMENTS ? (_jsx(LessonCommentObjects, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : (_jsx(ScrollContainer, { children: _jsx(CourseContentMenu, { course: course, lesson: lesson, onLessonClick: handleChangeLesson, previewMode: previewMode }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), anchor: "right", open: Boolean(activePanel) || editMode, variant: "persistent" }, rest, { children: [_jsx(Box, Object.assign({ className: classNames(classes.header, { [classes.headerEdit]: editMode }) }, { children: _jsxs(Box, Object.assign({ className: classes.headerContent }, { children: [_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center", className: classes.contrastColor }, { children: editMode ? (_jsx(FormattedMessage, { id: "ui.lessonDrawer.settings", defaultMessage: "ui.lessonDrawer.settings" })) : (_jsx(FormattedMessage, { id: `ui.lessonDrawer.${activePanel}`, defaultMessage: `ui.lessonDrawer.${activePanel}` })) })), _jsx(IconButton, Object.assign({ className: classes.headerAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })) })), _jsx(Divider, {}), editMode ? (_jsx(LessonEditForm, Object.assign({}, LessonEditFormProps))) : activePanel === SCLessonActionsType.COMMENTS ? (_jsx(LessonCommentObjects, Object.assign({ lessonObject: lesson }, LessonCommentObjectsProps))) : (_jsx(ScrollContainer, { children: _jsx(CourseContentMenu, { course: course, lesson: lesson, onLessonClick: handleChangeLesson, previewMode: previewMode }) }))] })));
 }

package/lib/esm/components/LessonEditForm/LessonEditForm.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { Box, Button, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
+import { Box, Button, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled, Typography } from '@mui/material';
 import { PREFIX } from './constants';
 import { FormattedMessage } from 'react-intl';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
@@ -11,7 +11,8 @@ const classes = {
     root: `${PREFIX}-root`,
     form: `${PREFIX}-form`,
     settings: `${PREFIX}-settings`,
-    button: `${PREFIX}-button`
+    button: `${PREFIX}-button`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -36,5 +37,5 @@ export default function LessonEditForm(inProps) {
     /**
      * Rendering
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(Button, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) })) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })) })] }))] })), _jsx(Button, Object.assign({ className: classNames(classes.button, classes.contrastColor), variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
 }

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -43,7 +43,8 @@ const classes = {
     popoverRoot: `${PREFIX}-popover-root`,
     popoverContent: `${PREFIX}-popover-content`,
     popoverSelection: `${PREFIX}-popover-selection`,
-    popoverAction: `${PREFIX}-popover-action`
+    popoverAction: `${PREFIX}-popover-action`,
+    popoverContrastColor: `${PREFIX}-popover-contrast-color`
 };
 const Root = styled(FormControl, {
     name: PREFIX,
@@ -167,11 +168,11 @@ export default function LessonReleaseMenu(inProps) {
                     }, transformOrigin: {
                         vertical: 'top',
                         horizontal: 'left'
-                    } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), _jsxs(Box, Object.assign({ className: classes.popoverContent }, { children: [_jsxs(Box, Object.assign({ className: classes.popoverSelection }, { children: [_jsx(TextField, { type: "number", value: dripDelay, onChange: handleValueChange, slotProps: {
+                    } }, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.popoverContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), _jsxs(Box, Object.assign({ className: classes.popoverContent }, { children: [_jsxs(Box, Object.assign({ className: classes.popoverSelection }, { children: [_jsx(TextField, { type: "number", value: dripDelay, onChange: handleValueChange, slotProps: {
                                                 input: {
                                                     inputProps: {
                                                         min: 0
                                                     }
                                                 }
-                                            } }), _jsx(FormControl, { children: _jsxs(RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [_jsx(FormControlLabel, { value: unitType.DAYS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), _jsx(FormControlLabel, { value: unitType.WEEKS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: dripDelay > 0 ? (_jsx(FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), _jsx(Button, Object.assign({ className: classes.popoverAction, variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
+                                            } }), _jsx(FormControl, { children: _jsxs(RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [_jsx(FormControlLabel, { value: unitType.DAYS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), _jsx(FormControlLabel, { value: unitType.WEEKS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.popoverContrastColor }, { children: dripDelay > 0 ? (_jsx(FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), _jsx(Button, Object.assign({ className: classNames(classes.popoverAction, classes.popoverContrastColor), variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
 }

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -18,7 +18,8 @@ const classes = {
     nameWrapper: `${PREFIX}-name-wrapper`,
     details: `${PREFIX}-details`,
     circle: `${PREFIX}-circle`,
-    link: `${PREFIX}-link`
+    link: `${PREFIX}-link`,
+    contrastColor: `${PREFIX}-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -49,13 +50,13 @@ export default function AccordionLessons(inProps) {
     if (!course) {
         return _jsx(AccordionLessonSkeleton, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: [_jsxs(Stack, Object.assign({ className: classes.nameWrapper }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: section.name })), viewerJoinStatus !== SCCourseJoinStatusType.CREATOR && viewerJoinStatus !== SCCourseJoinStatusType.MANAGER && section.locked && (_jsxs(Fragment, { children: [_jsx(Bullet, {}), _jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.date", defaultMessage: "ui.course.accordionLessons.date", values: {
                                                     date: intl.formatDate(section.available_date, { day: 'numeric', month: 'numeric', year: 'numeric' }),
                                                     hour: intl.formatDate(section.available_date, { hour: 'numeric', minute: 'numeric' })
-                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
+                                                } }) }))] }))] })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                     lessonsNumber: section.lessons.length
                                 } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), course.join_status === null ||
                             viewerJoinStatus === SCCourseJoinStatusType.CREATOR ||
                             viewerJoinStatus === SCCourseJoinStatusType.MANAGER ||
-                            lesson.locked ? (_jsx(Typography, { children: lesson.name })) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
+                            lesson.locked ? (_jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name }))) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, lesson, section)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, Object.assign({ className: classes.contrastColor }, { children: lesson.name })) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.empty, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }

package/lib/esm/shared/ConfirmDialog/ConfirmDialog.js

@@ -1,15 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card } from '@mui/material';
+import { styled, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Card, lighten, darken, getContrastRatio } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 const PREFIX = 'SCConfirmDialog';
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 const Root = styled(Card, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     maxWidth: 800,
-    marginBottom: theme.spacing(2)
+    marginBottom: theme.spacing(2),
+    [`& .${PREFIX}-contrast-color`]: {
+        color: getContrastRatio(theme.palette.background.paper, theme.palette.common.white) > 4.5
+            ? lighten(theme.palette.common.white, 0.5)
+            : darken(theme.palette.common.white, 0.5)
+    }
 }));
 export default function ConfirmDialog(props) {
     // PROPS
@@ -35,5 +43,5 @@ export default function ConfirmDialog(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) }), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div" }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
+    return (_jsx(Root, { children: _jsxs(Dialog, Object.assign({ open: open, onClose: handleClose }, rest, { children: [_jsx(DialogTitle, Object.assign({ className: classes.contrastColor }, { children: title || _jsx(FormattedMessage, { id: "ui.confirmDialog.title", defaultMessage: "ui.confirmDialog.title" }) })), content && (_jsx(DialogContent, { children: _jsx(DialogContentText, Object.assign({ component: "div", className: classes.contrastColor }, { children: content })) })), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: handleClose, className: classes.contrastColor }, { children: btnCancel || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnCancel", defaultMessage: "ui.confirmDialog.btnCancel" }) })), _jsx(Button, Object.assign({ onClick: handleConfirm, variant: "contained", autoFocus: true, loading: isUpdating, className: classes.contrastColor }, { children: btnConfirm || _jsx(FormattedMessage, { id: "ui.confirmDialog.btnConfirm", defaultMessage: "ui.confirmDialog.btnConfirm" }) }))] })] })) }));
 }

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.js

@@ -7,7 +7,11 @@ import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
+import { PREFIX } from './constants';
 const OPTIONS = ['ui.editCourse.tab.users.table.select.joined', 'ui.editCourse.tab.users.table.select.manager'];
+const classes = {
+    contrastColor: `${PREFIX}-contrast-color`
+};
 function ChangeUserStatus(props) {
     // PROPS
     const { course, user } = props;
@@ -50,6 +54,6 @@ function ChangeUserStatus(props) {
                     ':hover': {
                         backgroundColor: 'unset'
                     }
-                } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
+                } }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
 }
 export default memo(ChangeUserStatus);