@selfcommunity/react-ui 1.2.0-alpha.3 → 1.2.0-alpha.5

package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -4,13 +4,13 @@ import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { Autocomplete, Chip, TextField, Checkbox, CircularProgress, styled, Typography } from '@mui/material';
+import { Autocomplete, Chip, TextField, Checkbox, CircularProgress, styled, Typography, useTheme } from '@mui/material';
 import { useSCFetchCategories } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(Autocomplete, {
     name: PREFIX,
@@ -54,6 +54,7 @@ const CategoryAutocomplete = (inProps) => {
     const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
     // HOOKS
     const { categories, isLoading } = useSCFetchCategories({ endpointQueryParams });
+    const theme = useTheme();
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [value]);
@@ -82,19 +83,19 @@ const CategoryAutocomplete = (inProps) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     };
     // Render
-    return (_jsx(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderValue: (value, getItemProps) => {
+    return (_jsx(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }) })), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderValue: (value, getItemProps) => {
             if (multiple) {
                 return value.map((option, index) => {
                     const _a = getItemProps({ index }), { key } = _a, rest = __rest(_a, ["key"]);
-                    return (_jsx(Chip, Object.assign({ id: option.id, label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: option.name })), color: option.color }, rest), key));
+                    return (_jsx(Chip, Object.assign({ id: option.id, label: _jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: option.name })), color: option.color }, rest), key));
                 });
             }
-            return (_jsx(Chip, Object.assign({ id: value.id, label: _jsx(Typography, Object.assign({ component: "span", className: classes.contrastColor }, { children: value.name })), color: value.color }, getItemProps)));
+            return (_jsx(Chip, Object.assign({ id: value.id, label: _jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: value.name })), color: value.color }, getItemProps)));
         }, renderOption: (props, option, { selected, inputValue }) => {
             const { key } = props, rest = __rest(props, ["key"]);
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsxs("li", Object.assign({}, rest, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: parts.map((part, index) => (_jsx(Typography, Object.assign({ component: "span", style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) })] }), key));
+            return (_jsxs("li", Object.assign({}, rest, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: parts.map((part, index) => (_jsx(Typography, Object.assign({ component: "span", sx: { fontWeight: part.highlight ? 700 : 400, color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: part.text }), index))) })] }), key));
         }, renderInput: (params) => {
             return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
                     input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(_Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })

package/lib/esm/components/CourseDashboard/Header.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="react" />
 import { SCCourseType } from '@selfcommunity/types';
-import React from 'react';
 interface HeaderCourseDashboardProps {
     course: SCCourseType;
     hasAction?: boolean;
 }
 declare function HeaderCourseDashboard(props: HeaderCourseDashboardProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof HeaderCourseDashboard>;
+declare const _default: import("react").MemoExoticComponent<typeof HeaderCourseDashboard>;
 export default _default;

package/lib/esm/components/CourseDashboard/Header.js

@@ -9,6 +9,7 @@ import { SCCourseEditTabType } from '../../types';
 import classNames from 'classnames';
 import CourseTypePopover from '../../shared/CourseTypePopover';
 import BuyButton from '../BuyButton';
+import { getUrlEditDashboard } from '../../utils/course';
 const classes = {
     header: `${PREFIX}-header`,
     img: `${PREFIX}-header-img`,
@@ -16,15 +17,8 @@ const classes = {
     innerWrapper: `${PREFIX}-header-inner-wrapper`,
     iconWrapper: `${PREFIX}-header-icon-wrapper`,
     buttonPopover: `${PREFIX}-header-button-popover`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`
 };
-function getUrlEditDashboard(course) {
-    return {
-        id: course.id,
-        slug: course.slug,
-        tab: SCCourseEditTabType.LESSONS
-    };
-}
 function HeaderCourseDashboard(props) {
     var _a;
     // PROPS
@@ -35,7 +29,7 @@ function HeaderCourseDashboard(props) {
     const intl = useIntl();
     // PAYMENTS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
-    return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
+    return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.defaultContrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.defaultContrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                 privacy: intl.formatMessage({
                                                     id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                     defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
@@ -43,6 +37,6 @@ function HeaderCourseDashboard(props) {
                                             } }) }))] })), _jsx(CourseTypePopover, { course: course }), isPaymentsEnabled &&
                                 ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                                 (course.privacy === SCCoursePrivacyType.OPEN ||
-                                    (course.privacy === SCCoursePrivacyType.PRIVATE && course.join_status && course.join_status !== SCCourseJoinStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "dredit-card" }), contentType: SCContentType.COURSE, content: course, label: _jsx(FormattedMessage, { id: "ui.course.paid", defaultMessage: "ui.course.paid" }) }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
+                                    (course.privacy === SCCoursePrivacyType.PRIVATE && course.join_status && course.join_status !== SCCourseJoinStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "dredit-card" }), contentType: SCContentType.COURSE, content: course, label: _jsx(FormattedMessage, { id: "ui.course.paid", defaultMessage: "ui.course.paid" }) }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course, SCCourseEditTabType.LESSONS)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
 }
 export default memo(HeaderCourseDashboard);

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

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

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

@@ -48,7 +48,8 @@ const classes = {
     box: `${PREFIX}-box`,
     percentageWrapper: `${PREFIX}-percentage-wrapper`,
     completedWrapper: `${PREFIX}-completed-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`,
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 function getUrlNextLesson(course) {
     var _a, _b, _c;
@@ -195,17 +196,17 @@ function Student(inProps) {
                                 to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
                             }), { children: _jsx(UserAvatar, Object.assign({ hide: !scCourse.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: scCourse.created_by.avatar, alt: scCourse.created_by.username }) })) })), _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!scCourse.created_by.deleted && {
                                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scCourse.created_by)
-                                    }), { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: scCourse.created_by.username })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), _jsx(Divider, {}), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
+                                    }), { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: scCourse.created_by.username })) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.header.user.creator", defaultMessage: "ui.course.dashboard.header.user.creator" }) }))] })] })), actionButton] })), _jsx(Divider, {}), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
                 (scCourse.join_status === SCCourseJoinStatusType.CREATOR ||
                     scCourse.join_status === SCCourseJoinStatusType.MANAGER ||
                     scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
                 scCourse.privacy === SCCoursePrivacyType.OPEN ||
                 scCourse.privacy === SCCoursePrivacyType.DRAFT) &&
-                scCourse.description && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.description, classes.contrastColor) }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
+                scCourse.description && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.defaultContrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.description", defaultMessage: "ui.course.dashboard.student.description" }) })), _jsx(Stack, Object.assign({ className: classes.box }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classNames(classes.description, classes.paperContrastColor) }, { children: scCourse.description })) }))] })), (((scCourse.privacy === SCCoursePrivacyType.PRIVATE || scCourse.privacy === SCCoursePrivacyType.SECRET) &&
                 (scCourse.join_status === SCCourseJoinStatusType.MANAGER || scCourse.join_status === SCCourseJoinStatusType.JOINED)) ||
-                (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsxs(Fragment, { children: [scCourse.join_status !== null && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.progress" }) })), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse.user_completion_rate })] }))] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: clapping, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.contrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _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: {
+                (scCourse.privacy === SCCoursePrivacyType.OPEN && scCourse.join_status !== SCCourseJoinStatusType.CREATOR)) && (_jsxs(Fragment, { children: [scCourse.join_status !== null && (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.defaultContrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress", defaultMessage: "ui.course.dashboard.student.progress" }) })), _jsxs(Stack, Object.assign({ className: classes.box }, { children: [_jsxs(Stack, Object.assign({ className: classes.percentageWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.described", defaultMessage: "ui.course.dashboard.student.progress.described", values: { progress: scCourse.num_lessons_completed, end: scCourse.num_lessons } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.progress.percentage", defaultMessage: "ui.course.dashboard.student.progress.percentage", values: { percentage: scCourse.user_completion_rate } }) }))] })), _jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: scCourse.user_completion_rate })] }))] })), scCourse.user_completion_rate === 100 && (_jsxs(Stack, Object.assign({ className: classNames(classes.completedWrapper, classes.margin) }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.defaultContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.completed", defaultMessage: "ui.course.dashboard.student.completed" }) })), _jsx("img", { src: clapping, alt: intl.formatMessage({ id: 'ui.course.dashboard.student.completed', defaultMessage: 'ui.course.dashboard.student.completed' }), width: 32, height: 32 })] }))), _jsx(Typography, Object.assign({ variant: "h6", className: classNames(classes.margin, classes.defaultContrastColor) }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.student.contents", defaultMessage: "ui.course.dashboard.student.contents" }) })), _jsxs(Stack, Object.assign({ className: classes.lessonsSections }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.sections.title", defaultMessage: "ui.course.table.sections.title", values: {
                                         sectionsNumber: scCourse.num_sections
-                                    } }) })), _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: {
+                                    } }) })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                         lessonsNumber: scCourse.num_lessons
                                     } }) }))] })), _jsx(AccordionLessons, { course: scCourse, className: classes.accordion })] }))] })));
 }

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

@@ -19,7 +19,7 @@ const classes = {
     userInfo: `${PREFIX}-user-info`,
     circle: `${PREFIX}-circle`,
     button: `${PREFIX}-button`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 function CommentSkeleton({ id }) {
     return (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), _jsx(Divider, {}), _jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [Array.from(new Array(id)).map((_, i) => (_jsxs(Stack, Object.assign({ className: classes.userWrapper }, { children: [_jsx(Skeleton, { animation: "wave", variant: "circular", className: classes.avatar }), _jsxs(Box, { children: [_jsxs(Stack, Object.assign({ className: classes.userInfo }, { children: [_jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" }), _jsx(Box, { className: classes.circle }), _jsx(Skeleton, { animation: "wave", variant: "text", width: "90px", height: "21px" })] })), _jsx(Skeleton, { animation: "wave", variant: "text", width: "180px", height: "21px" })] })] }), i))), _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "112px", height: "36px", className: classes.button })] }))] })));
@@ -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", 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)));
+        return Array.from(map.entries()).map(([name, comments]) => (_jsxs(Box, Object.assign({ className: classes.outerWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.paperContrastColor }, { 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.paperContrastColor }, { children: comment.created_by.username })), _jsx(Box, { className: classes.circle }), _jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: _jsx(FormattedDate, { value: comment.created_at }) }))] })), _jsx(Typography, { variant: "body1", component: "div", dangerouslySetInnerHTML: { __html: comment.html }, className: classes.paperContrastColor })] })] }), 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.paperContrastColor }, { 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", 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" }) }))) })));
+    return (_jsx(Box, Object.assign({ className: classes.container }, { children: state.count > 0 ? (_jsxs(Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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

@@ -7,11 +7,11 @@ import { memo } from 'react';
 import { InfoPositionType } from '../types';
 const classes = {
     info: `${PREFIX}-info`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-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", 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, "%"] })))] })));
+    return (_jsxs(Stack, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.paperContrastColor }, { 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.paperContrastColor }, { children: [course.avg_completion_rate, "%"] })))] })));
 }
 export default memo(InfoCourseDashboard);

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

@@ -20,7 +20,7 @@ const classes = {
     tabList: `${PREFIX}-tab-list`,
     tab: `${PREFIX}-tab`,
     tabPanel: `${PREFIX}-tab-panel`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`
 };
 const TAB_DATA = [
     {
@@ -55,6 +55,6 @@ function Teacher(inProps) {
     if (!scCourse) {
         return _jsx(TeacherSkeleton, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse, hasAction: true }), _jsxs(Stack, Object.assign({ className: classes.infoWrapper }, { children: [_jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: InfoPositionType.FIRST }), _jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: InfoPositionType.SECOND })] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.STUDENTS }, { children: _jsx(Students, { course: scCourse }) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.COMMENTS }, { children: _jsx(Comments, { course: scCourse }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(HeaderCourseDashboard, { course: scCourse, hasAction: true }), _jsxs(Stack, Object.assign({ className: classes.infoWrapper }, { children: [_jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.students", course: scCourse, position: InfoPositionType.FIRST }), _jsx(InfoCourseDashboard, { title: "ui.course.dashboard.teacher.info.completion", course: scCourse, position: InfoPositionType.SECOND })] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(TabList, Object.assign({ className: classes.tabList, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "standard", centered: true }, { children: TAB_DATA.map((data, i) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.defaultContrastColor) }, i))) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.STUDENTS }, { children: _jsx(Students, { course: scCourse }) })), _jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: TabContentType.COMMENTS }, { children: _jsx(Comments, { course: scCourse }) }))] }))] })));
 }
 export default memo(Teacher);

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip, styled, Button } from '@mui/material';
+import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip, styled, Button, useTheme } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { CourseService, formatHttpErrorCode } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -58,7 +58,8 @@ const classes = {
     stepCustomization: `${PREFIX}-step-customization`,
     cardTitle: `${PREFIX}-card-title`,
     title: `${PREFIX}-title`,
-    contrastColor: `${PREFIX}-contrast-color`,
+    defaultContrastColor: `${PREFIX}-default-contrast-color`,
+    paperContrastColor: `${PREFIX}-paper-contrast-color`,
     paywallsConfiguratorWrap: `${PREFIX}-paywalls-configurator-wrap`
 };
 const Root = styled(Box, {
@@ -132,6 +133,8 @@ export default function CourseForm(inProps) {
     const { preferences } = useSCPreferences();
     // PAYMENTS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    // HOOKS
+    const theme = useTheme();
     const isStaff = useMemo(() => scUserContext.user && UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
     const courseAdvancedEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_COURSES_ADVANCED_ENABLED].value, [preferences]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
@@ -281,15 +284,17 @@ 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 &&
-                            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: {
+                            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.paperContrastColor) }, { 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.paperContrastColor }, { 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.defaultContrastColor }, { 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", className: classes.contrastColor }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length })))
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { 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", 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 })))
+                                                    endAdornment: (_jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { 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
+                                            }, 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: (_jsx(Typography, Object.assign({ component: "span", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { children: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) })))
+                                            }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) }), isPaymentsEnabled && isStaff && !hidePaywalls && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (course && { contentId: course.id }), { contentType: SCContentType.COURSE, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) })))] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(Button, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||
@@ -300,5 +305,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(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 })] }));
+                                        : 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 })] }));
 }

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

@@ -18,7 +18,7 @@ const classes = {
     privacyItem: `${PREFIX}-edit-privacy-item`,
     privacyItemInfo: `${PREFIX}-edit-privacy-item-info`,
     disabled: `${PREFIX}-disabled`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -44,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", 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)
+    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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor }, { 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.paperContrastColor) }, { 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(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: {
+                            .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.paperContrastColor }, { 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.paperContrastColor, 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: (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: {
+                                                } }) })), _jsx(Typography, Object.assign({ variant: "body1", className: (classes.paperContrastColor, 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

@@ -23,7 +23,8 @@ const classes = {
     endMessage: `${PREFIX}-end-message`,
     infiniteScroll: `${PREFIX}-infinite-scroll`,
     participants: `${PREFIX}-participants`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`,
+    dialogPaperContrastColor: `${PREFIX}-dialog-paper-contrast-color`
 };
 const Root = styled(Button, {
     name: PREFIX,
@@ -142,5 +143,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: 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))) }) })) })))] }));
+                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classNames(classes.participants, classes.paperContrastColor) }, { 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.paperContrastColor }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(Typography, Object.assign({ component: "span", className: classes.dialogPaperContrastColor }, { children: _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.dialogPaperContrastColor) }, { 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/EditCourse.js

@@ -21,7 +21,7 @@ const classes = {
     tabList: `${PREFIX}-tab-list`,
     tab: `${PREFIX}-tab`,
     tabPanel: `${PREFIX}-tab-panel`,
-    contrastColor: `${PREFIX}-contrast-color`
+    defaultContrastColor: `${PREFIX}-default-contrast-color`
 };
 const TAB_DATA = [
     {
@@ -103,5 +103,5 @@ export default function EditCourse(inProps) {
     if (!scCourse) {
         return _jsx(EditCourseSkeleton, { tab: tab });
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.contrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(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) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.contrastColor) }, i))) })), panelData.map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(IconButton, Object.assign({ href: scRoutingContext.url(SCRoutes.COURSE_DASHBOARD_ROUTE_NAME, scCourse), size: "small" }, { children: _jsx(Icon, Object.assign({ className: classes.defaultContrastColor }, { children: "arrow_back" })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.defaultContrastColor }, { children: scCourse.name }))] })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(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) => (_jsx(Tab, { label: _jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: data.label, defaultMessage: data.label }) })), value: data.value, className: classNames(classes.tab, classes.defaultContrastColor) }, i))) })), panelData.map((data, i) => (_jsx(TabPanel, Object.assign({ className: classes.tabPanel, value: data.value }, { children: data.children }), i)))] }))] })));
 }

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

@@ -24,15 +24,16 @@ const OPTIONS = [
 const classes = {
     changeLessonStatusPublishedWrapper: `${PREFIX}-change-lesson-status-published-wrapper`,
     changeLessonStatusIconDraft: `${PREFIX}-change-lesson-status-icon-draft`,
-    contrastColor: `${PREFIX}-constrast-color`
+    paperContrastColor: `${PREFIX}-paper-constrast-color`
 };
 function ChangeLessonStatus(props) {
     // PROPS
     const { course, section, lesson, onChange, disabled } = props;
+    // CONTEXTS
+    const { enqueueSnackbar } = useSnackbar();
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    const { enqueueSnackbar } = useSnackbar();
     // STATES
     const [value, setValue] = useState('');
     const [loading, setLoading] = useState(false);
@@ -75,16 +76,20 @@ function ChangeLessonStatus(props) {
             handleAction(newValue);
         }
     }, [handleAction, value]);
-    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: {
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: classNames(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", 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: {
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1", sx: {
+                            color: theme.palette.getContrastText(theme.palette.background.paper)
+                        } }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: classNames(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", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1", sx: {
+                            color: theme.palette.getContrastText(theme.palette.background.paper)
+                        } }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }), i))) }))) }));
 }
 export default memo(ChangeLessonStatus);

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

@@ -15,7 +15,7 @@ const classes = {
     editModeWrapper: `${PREFIX}-edit-mode-wrapper`,
     editModeSaveButton: `${PREFIX}-edit-mode-save-button`,
     editModeCloseButton: `${PREFIX}-edit-mode-close-button`,
-    contrastColor: `${PREFIX}-contrast-color`
+    paperContrastColor: `${PREFIX}-paper-contrast-color`
 };
 function FieldName(props) {
     // PROPS
@@ -75,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: "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 }))) }));
+    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.paperContrastColor }, { children: row.name }))) }));
 }
 export default memo(FieldName);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, MenuItem, Stack, TableCell, TableRow, Typography } from '@mui/material';
+import { Icon, MenuItem, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from '../constants';
 import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
@@ -20,8 +20,7 @@ const classes = {
     cellAlignRight: `${PREFIX}-cell-align-right`,
     cellPadding: `${PREFIX}-cell-padding`,
     tableBodyIconWrapper: `${PREFIX}-table-body-icon-wrapper`,
-    actionsWrapper: `${PREFIX}-actions-wrapper`,
-    contrastColor: `${PREFIX}-contrast-color`
+    actionsWrapper: `${PREFIX}-actions-wrapper`
 };
 function LessonRow(props, ref) {
     // PROPS
@@ -33,6 +32,7 @@ function LessonRow(props, ref) {
     // HOOKS
     const { isDisabled } = useIsDisabled();
     const { enqueueSnackbar } = useSnackbar();
+    const theme = useTheme();
     // HANDLERS
     const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true)), [setEditMode]);
     const handleDisableEditMode = useCallback(() => setEditMode(false), [setEditMode]);
@@ -61,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", 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" }) })) }))] }))] })) }))] })));
+                    }, 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Collapse, Icon, IconButton, MenuItem, Stack, Table, TableBody, TableCell, TableRow, Typography } from '@mui/material';
+import { Collapse, Icon, IconButton, MenuItem, Stack, Table, TableBody, TableCell, TableRow, Typography, useTheme } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from '../constants';
 import LessonRow from './LessonRow';
@@ -25,8 +25,7 @@ const classes = {
     cellWidth: `${PREFIX}-cell-width`,
     cellAlignRight: `${PREFIX}-cell-align-right`,
     cellAlignCenter: `${PREFIX}-cell-align-center`,
-    cellPadding: `${PREFIX}-cell-padding`,
-    contrastColor: `${PREFIX}-contrast-color`
+    cellPadding: `${PREFIX}-cell-padding`
 };
 function SectionRow(props, ref) {
     // PROPS
@@ -41,6 +40,7 @@ function SectionRow(props, ref) {
     const { isDisabled } = useIsDisabled();
     const intl = useIntl();
     const { enqueueSnackbar } = useSnackbar();
+    const theme = useTheme();
     // EFFECTS
     useEffect(() => {
         if (section.lessons) {
@@ -151,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: "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] }))) })) }) })) })) })) })] }));
+                            }, 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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", sx: { color: theme.palette.getContrastText(theme.palette.background.paper) } }, { 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));