@selfcommunity/react-theme-default 0.4.5-payments.166 → 0.4.5-payments.169

package/lib/cjs/index.js

@@ -46,6 +46,7 @@ const SCCategoryHeader_1 = tslib_1.__importDefault(require("./components/SCCateg
 const SCCategoryTemplate_1 = tslib_1.__importDefault(require("./components/SCCategoryTemplate"));
 const SCCategoryTrendingFeedWidget_1 = tslib_1.__importDefault(require("./components/SCCategoryTrendingFeedWidget"));
 const SCCategoryTrendingUsersWidget_1 = tslib_1.__importDefault(require("./components/SCCategoryTrendingUsersWidget"));
+const SCCourseTypePopover_1 = tslib_1.__importDefault(require("./components/SCCourseTypePopover"));
 const SCCourseUsersTable_1 = tslib_1.__importDefault(require("./components/SCCourseUsersTable"));
 const SCChangeCoverButton_1 = tslib_1.__importDefault(require("./components/SCChangeCoverButton"));
 const SCChangeGroupCoverButton_1 = tslib_1.__importDefault(require("./components/SCChangeGroupCoverButton"));
@@ -213,6 +214,7 @@ const SCCheckout_1 = tslib_1.__importDefault(require("./components/SCCheckout"))
 const SCCheckoutReturnDialog_1 = tslib_1.__importDefault(require("./components/SCCheckoutReturnDialog"));
 const SCHiddenPurchasableContent_1 = tslib_1.__importDefault(require("./components/SCHiddenPurchasableContent"));
 const SCPaywalls_1 = tslib_1.__importDefault(require("./components/SCPaywalls"));
+const SCPaywallsConfigurator_1 = tslib_1.__importDefault(require("./components/SCPaywallsConfigurator"));
 /**
  * Style fragments - Imports - End
  */
@@ -361,6 +363,7 @@ const theme = {
         SCCourseFormDialog: SCCourseFormDialog_1.default,
         SCCourseParticipantsButton: SCCourseParticipantsButton_1.default,
         SCCourseInfoDetails: SCCourseInfoDetails_1.default,
+        SCCourseTypePopover: SCCourseTypePopover_1.default,
         SCCourseUsersTable: SCCourseUsersTable_1.default,
         SCCreateGroupButton: SCCreateGroupButton_1.default,
         SCCustomAdv: SCCustomAdv_1.default,
@@ -508,7 +511,8 @@ const theme = {
         SCCheckout: SCCheckout_1.default,
         SCCheckoutReturnDialog: SCCheckoutReturnDialog_1.default,
         SCHiddenPurchasableContent: SCHiddenPurchasableContent_1.default,
-        SCPaywalls: SCPaywalls_1.default
+        SCPaywalls: SCPaywalls_1.default,
+        SCPaywallsConfigurator: SCPaywallsConfigurator_1.default
     },
     selfcommunity: {
         user: {

package/lib/esm/components/SCAccordionLessons.d.ts

@@ -3,6 +3,7 @@ declare const Component: {
         root: ({ theme }: {
             theme: any;
         }) => {
+            backgroundColor: any;
             border: string;
             borderRadius: string;
             '& .SCAccordionLessons-empty': {
@@ -18,6 +19,11 @@ declare const Component: {
                     '& .MuiAccordionSummary-content': {
                         justifyContent: string;
                         margin: number;
+                        '& .SCAccordionLessons-name-wrapper': {
+                            flexDirection: string;
+                            alignItems: string;
+                            gap: string;
+                        };
                     };
                 };
                 '& .SCAccordionLessons-details': {
@@ -35,6 +41,15 @@ declare const Component: {
                         borderRadius: string;
                         backgroundColor: any;
                     };
+                    '& .SCAccordionLessons-link': {
+                        textDecoration: string;
+                        padding: number;
+                        justifyContent: string;
+                        '&:hover': {
+                            backgroundColor: string;
+                            textDecoration: string;
+                        };
+                    };
                 };
             };
         };

package/lib/esm/components/SCAccordionLessons.js

@@ -1,6 +1,7 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            backgroundColor: theme.palette.common.white,
             border: `1px solid ${theme.palette.grey['300']}`,
             borderRadius: '5px',
             '& .SCAccordionLessons-empty': {
@@ -15,7 +16,12 @@ const Component = {
                     backgroundColor: theme.palette.grey['200'],
                     '& .MuiAccordionSummary-content': {
                         justifyContent: 'space-between',
-                        margin: 0
+                        margin: 0,
+                        '& .SCAccordionLessons-name-wrapper': {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: '5px'
+                        }
                     }
                 },
                 '& .SCAccordionLessons-details': {
@@ -32,6 +38,15 @@ const Component = {
                         height: theme.spacing(2),
                         borderRadius: '9999px',
                         backgroundColor: theme.palette.grey['300']
+                    },
+                    '& .SCAccordionLessons-link': {
+                        textDecoration: 'underline',
+                        padding: 0,
+                        justifyContent: 'space-between',
+                        '&:hover': {
+                            backgroundColor: 'unset',
+                            textDecoration: 'underline'
+                        }
                     }
                 }
             }

package/lib/esm/components/SCAddUsersButton.d.ts

@@ -1,6 +1,12 @@
 declare const Component: {
     styleOverrides: {
-        root: () => {};
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            '&.SCAddUsersButton-contrast-color': {
+                color: any;
+            };
+        };
         dialogRoot: () => {
             '& .MuiDialogActions-root': {
                 marginTop: string;

package/lib/esm/components/SCAddUsersButton.js

@@ -1,6 +1,11 @@
+import { getContrastRatio } from '@mui/material';
 const Component = {
     styleOverrides: {
-        root: () => ({}),
+        root: ({ theme }) => ({
+            '&.SCAddUsersButton-contrast-color': {
+                color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
+            }
+        }),
         dialogRoot: () => ({
             '& .MuiDialogActions-root': {
                 marginTop: '36px'

package/lib/esm/components/SCCourse.d.ts

@@ -143,7 +143,10 @@ declare const Component: {
                         height: any;
                     };
                     '& .MuiChip-root': {
-                        marginRight: any;
+                        [x: number]: {
+                            maxWidth: any;
+                        };
+                        margin: any;
                     };
                 };
             };

package/lib/esm/components/SCCourse.js

@@ -143,7 +143,10 @@ const Component = {
                         height: theme.spacing(4)
                     },
                     '& .MuiChip-root': {
-                        marginRight: theme.spacing(0.5)
+                        margin: theme.spacing(0.5),
+                        [theme.breakpoints.up('lg')]: {
+                            maxWidth: theme.spacing(20)
+                        }
                     }
                 }
             },

package/lib/esm/components/SCCourseContentMenu.d.ts

@@ -8,6 +8,9 @@ declare const Component: {
                         backgroundColor: any;
                     };
                 };
+                '& .MuiButtonBase-root': {
+                    paddingLeft: any;
+                };
             };
             '& .SCCourseContentMenu-list-item': {
                 '&:hover, &:focus, &:active': {
@@ -19,7 +22,6 @@ declare const Component: {
                 color: any;
             };
             '& .SCCourseContentMenu-item': {
-                padding: any;
                 '& .MuiListItemText-primary': {
                     fontWeight: any;
                 };

package/lib/esm/components/SCCourseContentMenu.js

@@ -7,6 +7,9 @@ const Component = {
                     '&:hover, &:focus, &:active': {
                         backgroundColor: theme.palette.grey[300]
                     }
+                },
+                '& .MuiButtonBase-root': {
+                    paddingLeft: theme.spacing(5)
                 }
             },
             '& .SCCourseContentMenu-list-item': {
@@ -19,7 +22,6 @@ const Component = {
                 color: theme.palette.text.secondary
             },
             '& .SCCourseContentMenu-item': {
-                padding: theme.spacing(0.5, 0, 0.5, 3),
                 '& .MuiListItemText-primary': {
                     fontWeight: theme.typography.fontWeightMedium
                 },

package/lib/esm/components/SCCourseDashboard.d.ts

@@ -6,6 +6,9 @@ declare const Component: {
             [x: number]: {
                 marginBottom: string;
             };
+            '& .SCCourseDashboard-contrast-color': {
+                color: any;
+            };
             '& .SCCourseDashboard-header': {
                 [x: number]: {
                     paddingLeft: string;
@@ -21,6 +24,8 @@ declare const Component: {
                     borderBottomLeftRadius: string;
                     borderBottomRightRadius: string;
                     marginBottom: string;
+                    objectFit: string;
+                    objectPosition: string;
                 };
                 '& .SCCourseDashboard-header-outer-wrapper': {
                     [x: number]: {
@@ -70,6 +75,7 @@ declare const Component: {
                     border: string;
                     borderRadius: string;
                     padding: any;
+                    backgroundColor: any;
                     '& .SCCourseParticipantsButton-root': {
                         justifyContent: string;
                         padding: number;
@@ -97,9 +103,12 @@ declare const Component: {
             };
             '& .SCCourseDashboard-comments-container': {
                 [x: number]: {
-                    paddingLeft: string;
-                    paddingRight: string;
+                    padding: any;
                 };
+                backgroundColor: any;
+                border: string;
+                borderRadius: string;
+                padding: any;
                 '& .SCCourseDashboard-outer-wrapper': {
                     marginTop: string;
                     marginBottom: string;
@@ -133,6 +142,9 @@ declare const Component: {
                 };
             };
             '&.SCCourseDashboard-student-container': {
+                '& .SCCourseDashboard-description': {
+                    whiteSpace: string;
+                };
                 '& .SCCourseDashboard-accordion': {
                     borderTopLeftRadius: string;
                     borderTopRightRadius: string;
@@ -141,12 +153,12 @@ declare const Component: {
                     flexDirection: string;
                     alignItems: string;
                     justifyContent: string;
+                    backgroundColor: any;
+                    padding: string;
                     '& .SCCourseDashboard-user': {
                         flexDirection: string;
                         alignItems: string;
                         gap: string;
-                        marginTop: string;
-                        marginBottom: string;
                         '& .SCCourseDashboard-avatar': {
                             width: string;
                             height: string;
@@ -177,6 +189,7 @@ declare const Component: {
                     borderTopLeftRadius: string;
                     borderTopRightRadius: string;
                     padding: string;
+                    backgroundColor: any;
                     '& .SCCourseDashboard-circle': {
                         width: string;
                         height: string;
@@ -193,6 +206,7 @@ declare const Component: {
                     border: string;
                     borderRadius: string;
                     padding: string;
+                    backgroundColor: any;
                 };
                 '& .SCCourseDashboard-percentage-wrapper': {
                     [x: number]: {

package/lib/esm/components/SCCourseDashboard.js

@@ -1,9 +1,13 @@
+import { getContrastRatio } from '@mui/material';
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
             [theme.breakpoints.down('sm')]: {
                 marginBottom: '56px'
             },
+            '& .SCCourseDashboard-contrast-color': {
+                color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
+            },
             '& .SCCourseDashboard-header': {
                 [theme.breakpoints.down('sm')]: {
                     paddingLeft: '14px',
@@ -16,6 +20,8 @@ const Component = {
                     borderBottomLeftRadius: '10px',
                     borderBottomRightRadius: '10px',
                     marginBottom: '17px',
+                    objectFit: 'cover',
+                    objectPosition: 'center',
                     [theme.breakpoints.down('sm')]: {
                         display: 'none'
                     }
@@ -63,8 +69,9 @@ const Component = {
                     flex: 1,
                     gap: '6px',
                     border: `1px solid ${theme.palette.grey['300']}`,
-                    borderRadius: '10px',
+                    borderRadius: '5px',
                     padding: theme.spacing('17px', 3, '19px'),
+                    backgroundColor: theme.palette.common.white,
                     '& .SCCourseParticipantsButton-root': {
                         justifyContent: 'flex-start',
                         padding: 0
@@ -84,16 +91,19 @@ const Component = {
                 }
             },
             '& .SCCourseDashboard-tab-panel': {
-                padding: theme.spacing(3, 0, 0),
+                padding: theme.spacing(3, 0),
                 [theme.breakpoints.down('md')]: {
                     paddingLeft: '14px',
                     paddingRight: '14px'
                 }
             },
             '& .SCCourseDashboard-comments-container': {
+                backgroundColor: theme.palette.common.white,
+                border: `1px solid ${theme.palette.grey['300']}`,
+                borderRadius: '5px',
+                padding: theme.spacing(1),
                 [theme.breakpoints.up('sm')]: {
-                    paddingLeft: '36px',
-                    paddingRight: '36px'
+                    padding: theme.spacing(2)
                 },
                 '& .SCCourseDashboard-outer-wrapper': {
                     marginTop: '15px',
@@ -128,6 +138,9 @@ const Component = {
                 }
             },
             '&.SCCourseDashboard-student-container': {
+                '& .SCCourseDashboard-description': {
+                    whiteSpace: 'pre-line'
+                },
                 '& .SCCourseDashboard-accordion': {
                     borderTopLeftRadius: 'unset',
                     borderTopRightRadius: 'unset'
@@ -136,12 +149,12 @@ const Component = {
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
+                    backgroundColor: theme.palette.common.white,
+                    padding: '6px',
                     '& .SCCourseDashboard-user': {
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: '4px',
-                        marginTop: '6px',
-                        marginBottom: '6px',
                         '& .SCCourseDashboard-avatar': {
                             width: '36px',
                             height: '36px'
@@ -172,6 +185,7 @@ const Component = {
                     borderTopLeftRadius: '5px',
                     borderTopRightRadius: '5px',
                     padding: '19px 24px',
+                    backgroundColor: theme.palette.common.white,
                     '& .SCCourseDashboard-circle': {
                         width: '6px',
                         height: '6px',
@@ -187,7 +201,8 @@ const Component = {
                     gap: '13px',
                     border: `1px solid ${theme.palette.grey['300']}`,
                     borderRadius: '5px',
-                    padding: '11px 24px'
+                    padding: '11px 24px',
+                    backgroundColor: theme.palette.common.white
                 },
                 '& .SCCourseDashboard-percentage-wrapper': {
                     justifyContent: 'space-between',
@@ -268,7 +283,7 @@ const Component = {
                         flex: 1,
                         gap: '6px',
                         border: `1px solid ${theme.palette.grey['300']}`,
-                        borderRadius: '10px',
+                        borderRadius: '5px',
                         padding: theme.spacing('17px', 3, '19px'),
                         '& .SCCourseParticipantsButton-root': {
                             justifyContent: 'flex-start',

package/lib/esm/components/SCCourseForm.d.ts

@@ -1,6 +1,11 @@
 declare const Component: {
     styleOverrides: {
-        root: ({ theme }: any) => {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            '& .SCCourseForm-contrast-color': {
+                color: any;
+            };
             '& .SCCourseForm-cover': {
                 position: string;
                 height: number;
@@ -18,8 +23,20 @@ declare const Component: {
                 marginTop: any;
                 color: any;
             };
+            '& h5': {
+                padding: any;
+            };
             '& .SCCourseForm-form': {
-                '& h5': {
+                '&.SCCourseForm-step-customization': {
+                    [x: number]: {
+                        padding: any;
+                    };
+                    backgroundColor: any;
+                    border: string;
+                    borderBottom: string;
+                    borderRadius: string;
+                    borderBottomLeftRadius: string;
+                    borderBottomRightRadius: string;
                     padding: any;
                 };
                 '& .SCCourseForm-name': {
@@ -29,6 +46,7 @@ declare const Component: {
                     marginTop: any;
                 };
                 '& .SCCourseForm-edit-root': {
+                    backgroundColor: any;
                     marginTop: any;
                     '& .SCCourseForm-edit-card': {
                         display: string;
@@ -77,6 +95,13 @@ declare const Component: {
                         '& .SCCourseForm-edit-privacy-item-info': {
                             marginLeft: any;
                         };
+                        '& .SCCourseForm-disabled': {
+                            opacity: number;
+                        };
+                        '& .SCCourseForm-edit-card': {
+                            alignItems: string;
+                            margin: any;
+                        };
                     };
                 };
             };
@@ -93,6 +118,10 @@ declare const Component: {
                         backgroundColor: string;
                     };
                 };
+                '& .SCCourseForm-disabled': {
+                    pointerEvents: string;
+                    opacity: number;
+                };
                 '& .MuiCard-root': {
                     boxShadow: string;
                     border: string;
@@ -107,6 +136,13 @@ declare const Component: {
                         '& .MuiTypography-body2': {
                             whiteSpace: string;
                         };
+                        '& .SCCourseForm-card-title': {
+                            display: string;
+                            justifyContent: string;
+                            '& .MuiChip-root': {
+                                borderRadius: number;
+                            };
+                        };
                     };
                 };
             };
@@ -114,10 +150,21 @@ declare const Component: {
                 color: any;
             };
             '& .SCCourseForm-actions': {
-                marginTop: any;
                 display: string;
                 justifyContent: string;
                 gap: any;
+                '&.SCCourseForm-step-customization': {
+                    [x: number]: {
+                        padding: any;
+                    };
+                    backgroundColor: any;
+                    border: string;
+                    borderTop: string;
+                    borderRadius: string;
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
+                    padding: any;
+                };
                 '& button': {
                     width: string;
                 };

package/lib/esm/components/SCCourseForm.js

@@ -1,7 +1,10 @@
-import { alpha } from '@mui/system';
+import { alpha, getContrastRatio } from '@mui/material';
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            '& .SCCourseForm-contrast-color': {
+                color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
+            },
             '& .SCCourseForm-cover': {
                 position: 'relative',
                 height: 103,
@@ -19,9 +22,21 @@ const Component = {
                 marginTop: theme.spacing(4.5),
                 color: theme.palette.text.secondary
             },
+            '& h5': {
+                padding: theme.spacing(1)
+            },
             '& .SCCourseForm-form': {
-                '& h5': {
-                    padding: theme.spacing(1)
+                '&.SCCourseForm-step-customization': {
+                    backgroundColor: theme.palette.common.white,
+                    border: `1px solid ${theme.palette.grey['300']}`,
+                    borderBottom: 'unset',
+                    borderRadius: '5px',
+                    borderBottomLeftRadius: 'unset',
+                    borderBottomRightRadius: 'unset',
+                    padding: theme.spacing(1, 1, 0),
+                    [theme.breakpoints.up('sm')]: {
+                        padding: theme.spacing(2, 2, 0)
+                    }
                 },
                 '& .SCCourseForm-name': {
                     marginTop: theme.spacing(3)
@@ -30,6 +45,7 @@ const Component = {
                     marginTop: theme.spacing(1)
                 },
                 '& .SCCourseForm-edit-root': {
+                    backgroundColor: theme.palette.common.white,
                     marginTop: theme.spacing(1),
                     '& .SCCourseForm-edit-card': {
                         display: 'flex',
@@ -77,6 +93,13 @@ const Component = {
                         },
                         '& .SCCourseForm-edit-privacy-item-info': {
                             marginLeft: theme.spacing(2)
+                        },
+                        '& .SCCourseForm-disabled': {
+                            opacity: 0.5
+                        },
+                        '& .SCCourseForm-edit-card': {
+                            alignItems: 'center',
+                            margin: theme.spacing(1)
                         }
                     }
                 }
@@ -94,6 +117,10 @@ const Component = {
                         backgroundColor: alpha(theme.palette.success.main, theme.palette.action.selectedOpacity)
                     }
                 },
+                '& .SCCourseForm-disabled': {
+                    pointerEvents: 'none',
+                    opacity: 0.5
+                },
                 '& .MuiCard-root': {
                     boxShadow: 'none',
                     border: `1px solid ${theme.palette.grey[300]}`,
@@ -107,6 +134,13 @@ const Component = {
                         },
                         '& .MuiTypography-body2': {
                             whiteSpace: 'pre-line'
+                        },
+                        '& .SCCourseForm-card-title': {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            '& .MuiChip-root': {
+                                borderRadius: 0
+                            }
                         }
                     }
                 }
@@ -115,10 +149,21 @@ const Component = {
                 color: theme.palette.error.main
             },
             '& .SCCourseForm-actions': {
-                marginTop: theme.spacing(2),
                 display: 'flex',
                 justifyContent: 'flex-end',
                 gap: theme.spacing(2),
+                '&.SCCourseForm-step-customization': {
+                    backgroundColor: theme.palette.common.white,
+                    border: `1px solid ${theme.palette.grey['300']}`,
+                    borderTop: 'unset',
+                    borderRadius: '5px',
+                    borderTopLeftRadius: 'unset',
+                    borderTopRightRadius: 'unset',
+                    padding: theme.spacing(0, 1, 1),
+                    [theme.breakpoints.up('sm')]: {
+                        padding: theme.spacing(0, 2, 2)
+                    }
+                },
                 '& button': {
                     width: 'fit-content'
                 }

package/lib/esm/components/SCCourseTypePopover.d.ts

@@ -0,0 +1,23 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            flexDirection: string;
+            alignItems: string;
+            gap: any;
+            '&.SCCourseTypePopover-contrast-color': {
+                color: any;
+            };
+            '& .SCCourseTypePopover-button': {
+                padding: number;
+                textDecoration: string;
+                '&:hover': {
+                    backgroundColor: string;
+                    textDecoration: string;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCCourseTypePopover.js

@@ -0,0 +1,22 @@
+import { getContrastRatio } from '@mui/material';
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: theme.spacing(1),
+            '&.SCCourseTypePopover-contrast-color': {
+                color: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? theme.palette.common.white : undefined
+            },
+            '& .SCCourseTypePopover-button': {
+                padding: 0,
+                textDecoration: 'underline',
+                '&:hover': {
+                    backgroundColor: 'unset',
+                    textDecoration: 'underline'
+                }
+            }
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCCourseUsersTable.d.ts

@@ -3,11 +3,27 @@ declare const Component: {
         root: ({ theme }: {
             theme: any;
         }) => {
+            [x: number]: {
+                padding: any;
+            };
+            border: string;
+            borderRadius: string;
+            padding: any;
+            backgroundColor: any;
             '& .SCCourseUsersTable-search': {
                 '& > .MuiInputBase-root': {
                     borderBottomLeftRadius: string;
                     borderBottomRightRadius: string;
                 };
+                '& .SCCourseUsersTable-end-adornment-wrapper': {
+                    flexDirection: string;
+                    '& .SCCourseUsersTable-search-button': {
+                        minWidth: string;
+                        width: string;
+                        height: string;
+                        padding: any;
+                    };
+                };
             };
             '& .SCCourseUsersTable-avatar-wrapper': {
                 flexDirection: string;