@selfcommunity/react-theme-default 0.5.0-alpha.1 → 0.5.0-alpha.2

package/lib/cjs/components/SCMediaFile.js

@@ -7,6 +7,7 @@ const Component = {
             margin: 'auto',
             width: '100%',
             position: 'relative',
+            gap: theme.spacing(2),
             [theme.breakpoints.down('md')]: {
                 minHeight: 170
             },
@@ -92,11 +93,17 @@ const Component = {
                 fontSize: 14,
                 position: 'relative',
                 top: 2
+            },
+            '& .SCMediaFile-docs-wrapper': {
+                gap: theme.spacing(2)
             }
         }),
-        lightboxRoot: ({ theme }) => ({}),
+        lightboxRoot: () => ({}),
         previewRoot: ({ theme }) => ({
-            '& > div': {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing(2),
+            '& > div:not(.SCMediaFile-docs-wrapper)': {
                 display: 'flex',
                 flexDirection: 'row',
                 flexWrap: 'nowrap',
@@ -145,13 +152,57 @@ const Component = {
                         maxWidth: 200
                     }
                 }
+            },
+            '& .SCMediaFile-docs-wrapper': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing(2)
             }
         }),
-        triggerRoot: ({ theme }) => ({}),
-        triggerDrawerRoot: ({ theme }) => ({
+        triggerRoot: () => ({}),
+        triggerDrawerRoot: () => ({
             zIndex: 1300
         }),
-        triggerMenuRoot: ({ theme }) => ({})
+        triggerMenuRoot: () => ({}),
+        docRoot: ({ theme }) => ({
+            borderRadius: '10px',
+            border: '1px solid #DDD',
+            padding: theme.spacing(1),
+            flexDirection: 'row',
+            gap: '8px',
+            '& .SCMediaFile-image': {
+                width: '50px',
+                height: '50px',
+                flexShrink: 0
+            },
+            '& .SCMediaFile-text-wrapper': {
+                gap: '4px',
+                [theme.breakpoints.down('sm')]: {
+                    maxWidth: '57%'
+                },
+                '& .SCMediaFile-title': {
+                    textAlign: 'left',
+                    display: '-webkit-box',
+                    '-webkit-line-clamp': '1',
+                    '-webkit-box-orient': 'vertical',
+                    overflow: 'hidden'
+                },
+                '& .SCMediaFile-subtitle': {
+                    textAlign: 'left',
+                    color: theme.palette.grey['600']
+                }
+            },
+            '& .SCMediaFile-action-wrapper': {
+                flexDirection: 'row',
+                gap: '8px',
+                marginLeft: 'auto',
+                '& .SCMediaFile-action': {
+                    '&:hover': {
+                        backgroundColor: theme.palette.common.white
+                    }
+                }
+            }
+        })
     }
 };
 exports.default = Component;

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

@@ -1,6 +1,7 @@
 declare const Component: {
     styleOverrides: {
         displayRoot: ({ theme }: any) => {
+            marginTop: any;
             '& .SCMediaLink-link': {
                 position: string;
                 backgroundColor: string;
@@ -115,7 +116,7 @@ declare const Component: {
                 };
             };
         };
-        triggerRoot: ({ theme }: any) => {};
+        triggerRoot: () => {};
     };
 };
 export default Component;

package/lib/cjs/components/SCMediaLink.js

@@ -4,6 +4,7 @@ const system_1 = require("@mui/system");
 const Component = {
     styleOverrides: {
         displayRoot: ({ theme }) => ({
+            marginTop: theme.spacing(2),
             '& .SCMediaLink-link': {
                 position: 'relative',
                 backgroundColor: '#F5F5F5',
@@ -118,7 +119,7 @@ const Component = {
                 }
             }
         }),
-        triggerRoot: ({ theme }) => ({})
+        triggerRoot: () => ({})
     }
 };
 exports.default = Component;

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

@@ -0,0 +1,22 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            '& .SCPaymentOrder-details': {
+                marginTop: any;
+                marginLeft: any;
+                '& p': {
+                    marginBottom: any;
+                };
+                '& .SCPaymentOrderPdfButton-root': {
+                    marginTop: any;
+                };
+            };
+        };
+        skeletonRoot: ({ theme }: {
+            theme: any;
+        }) => {};
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentOrder.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            '& .SCPaymentOrder-details': {
+                marginTop: theme.spacing(),
+                marginLeft: theme.spacing(),
+                '& p': {
+                    marginBottom: theme.spacing()
+                },
+                '& .SCPaymentOrderPdfButton-root': {
+                    marginTop: theme.spacing()
+                }
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({})
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,16 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            paddingLeft: number;
+            paddingRight: number;
+            width: string;
+            minWidth: number;
+            marginLeft: any;
+            marginRight: any;
+            height: number;
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentOrderPdfButton.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            paddingLeft: 4,
+            paddingRight: 4,
+            width: 'auto',
+            minWidth: 31,
+            marginLeft: theme.spacing(),
+            marginRight: theme.spacing(),
+            height: 30
+        })
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,62 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {
+            '& .SCPaymentOrders-content': {
+                position: string;
+                margin: any;
+                '& table': {
+                    '& tr': {
+                        '& th': {
+                            zIndex: number;
+                        };
+                    };
+                    '& .SCGroup-root, .SCCategory-root': {
+                        borderRadius: any;
+                        maxWidth: string;
+                    };
+                    '& .SCPaymentProduct-root': {
+                        borderRadius: string;
+                        border: string;
+                        boxShadow: string;
+                        color: any;
+                        '& .MuiAccordionSummary-root': {
+                            backgroundColor: any;
+                            opacity: number;
+                            borderRadius: any;
+                        };
+                    };
+                };
+                '& .MuiCircularProgress-root': {
+                    display: string;
+                    margin: string;
+                };
+            };
+            '& .SCPaymentOrders-filters': {
+                [x: number]: {
+                    width: string;
+                };
+                alignItems: string;
+                margin: any;
+                width: string;
+                '& .SCPaymentOrders-search': {
+                    '& .MuiInputBase-root': {
+                        paddingRight: number;
+                        '& .MuiButtonBase-root': {
+                            borderRadius: string;
+                            height: string;
+                            '& .MuiButton-endIcon': {
+                                margin: number;
+                            };
+                        };
+                    };
+                };
+                '& .SCPaymentOrders-picker': {
+                    '& .MuiOutlinedInput-root': {
+                        paddingRight: any;
+                    };
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentOrders.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            '& .SCPaymentOrders-content': {
+                position: 'relative',
+                margin: theme.spacing(1, 2),
+                '& table': {
+                    '& tr': {
+                        '& th': {
+                            zIndex: 1
+                        }
+                    },
+                    '& .SCGroup-root, .SCCategory-root': {
+                        borderRadius: theme.shape.borderRadius,
+                        maxWidth: '96%'
+                    },
+                    '& .SCPaymentProduct-root': {
+                        borderRadius: `${theme.shape.borderRadius}px !important`,
+                        border: '1px solid #e5e5e5',
+                        boxShadow: 'none',
+                        color: theme.palette.text.primary,
+                        '& .MuiAccordionSummary-root': {
+                            backgroundColor: theme.palette.background.paper,
+                            opacity: 1,
+                            borderRadius: theme.shape.borderRadius
+                        }
+                    }
+                },
+                '& .MuiCircularProgress-root': {
+                    display: 'block',
+                    margin: `${theme.spacing(7)} auto`
+                }
+            },
+            '& .SCPaymentOrders-filters': {
+                alignItems: 'center',
+                margin: theme.spacing(2),
+                width: '94%',
+                [theme.breakpoints.down('sm')]: {
+                    width: '90%'
+                },
+                '& .SCPaymentOrders-search': {
+                    '& .MuiInputBase-root': {
+                        paddingRight: 0,
+                        '& .MuiButtonBase-root': {
+                            borderRadius: '0 5px 5px 0',
+                            height: '37px',
+                            '& .MuiButton-endIcon': {
+                                margin: 0
+                            }
+                        }
+                    }
+                },
+                '& .SCPaymentOrders-picker': {
+                    '& .MuiOutlinedInput-root': {
+                        paddingRight: theme.spacing(0.5)
+                    }
+                }
+            }
+        })
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,49 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            marginBottom: any;
+            borderRadius: string;
+            boxShadow: string;
+            backgroundColor: any;
+            '& .MuiCardContent-root': {
+                '& .SCBaseItem-root': {
+                    backgroundColor: string;
+                };
+                '& .MuiTypography-body1': {
+                    [x: number]: {
+                        fontSize: any;
+                    };
+                    fontWeight: number;
+                    color: any;
+                };
+            };
+            '& .SCPaymentProductPrice-root': {
+                width: string;
+                paddingLeft: string;
+            };
+        };
+        skeletonRoot: ({ theme }: {
+            theme: any;
+        }) => {
+            marginBottom: any;
+            borderRadius: string;
+            boxShadow: string;
+            backgroundColor: any;
+            '& .MuiCardContent-root': {
+                marginBottom: any;
+                '& .SCBaseItem-root': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+            '& .SCPaymentProductPrice-skeleton-root': {
+                marginTop: any;
+                width: string;
+                paddingLeft: string;
+            };
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentProduct.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            marginBottom: theme.spacing(2),
+            borderRadius: '10px',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.grey['A200'],
+            '& .MuiCardContent-root': {
+                '& .SCBaseItem-root': {
+                    backgroundColor: 'transparent'
+                },
+                '& .MuiTypography-body1': {
+                    fontWeight: 200,
+                    color: theme.palette.grey[600],
+                    [theme.breakpoints.down('sm')]: {
+                        fontSize: theme.typography.pxToRem(12)
+                    }
+                }
+            },
+            '& .SCPaymentProductPrice-root': {
+                width: 'auto',
+                paddingLeft: `${theme.spacing(0)} !important`
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            marginBottom: theme.spacing(2),
+            borderRadius: '10px',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.grey['A200'],
+            '& .MuiCardContent-root': {
+                marginBottom: theme.spacing(1),
+                '& .SCBaseItem-root': {
+                    backgroundColor: 'transparent',
+                    boxShadow: 'none'
+                }
+            },
+            '& .SCPaymentProductPrice-skeleton-root': {
+                marginTop: theme.spacing(1),
+                width: 'auto',
+                paddingLeft: `${theme.spacing(0)} !important`
+            }
+        })
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,39 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            borderRadius: number;
+            boxShadow: string;
+            '& .SCPaymentProductPrice-primary': {
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+            };
+            '& .SCPaymentProductPrice-button': {
+                textTransform: string;
+                '&:hover, &:active': {
+                    backgroundColor: any;
+                    color: any;
+                    border: string;
+                    '& .MuiIcon-root': {
+                        color: any;
+                    };
+                };
+            };
+            '& .SCPaymentProductPrice-button-purchased': {
+                backgroundColor: string;
+                color: string;
+            };
+            '& .SCPaymentProductPrice-purchased-at': {
+                textDecoration: string;
+            };
+        };
+        skeletonRoot: ({ theme }: {
+            theme: any;
+        }) => {
+            borderRadius: number;
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentProductPrice.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            borderRadius: 0,
+            boxShadow: 'none',
+            '& .SCPaymentProductPrice-primary': {
+                fontSize: '18px',
+                fontWeight: '600 !important',
+                color: `${theme.palette.primary.main} !important`
+            },
+            '& .SCPaymentProductPrice-button': {
+                textTransform: 'uppercase',
+                '&:hover, &:active': {
+                    backgroundColor: theme.palette.common.white,
+                    color: theme.palette.primary.main,
+                    border: `1px solid ${theme.palette.primary.main}`,
+                    '& .MuiIcon-root': {
+                        color: theme.palette.primary.main
+                    }
+                }
+            },
+            '& .SCPaymentProductPrice-button-purchased': {
+                backgroundColor: `${theme.palette.secondary.main} !important`,
+                color: `${theme.palette.secondary.contrastText} !important`
+            },
+            '& .SCPaymentProductPrice-purchased-at': {
+                textDecoration: 'underline'
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            borderRadius: 0
+        })
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,15 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            padding: any;
+        };
+        skeletonRoot: ({ theme }: {
+            theme: any;
+        }) => {
+            padding: any;
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaymentProducts.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            padding: theme.spacing(0.5)
+        }),
+        skeletonRoot: ({ theme }) => ({
+            padding: theme.spacing(0.5)
+        })
+    }
+};
+exports.default = Component;

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

@@ -0,0 +1,12 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: {
+            theme: any;
+        }) => {
+            '& .SCPaywalls-error': {
+                margin: any;
+            };
+        };
+    };
+};
+export default Component;

package/lib/cjs/components/SCPaywalls.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            '& .SCPaywalls-error': {
+                margin: theme.spacing(2, 0)
+            }
+        })
+    }
+};
+exports.default = Component;