@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

package/lib/esm/components/ConsentSolution/ConsentSolution.js

@@ -1,25 +1,13 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
-import { Alert, Checkbox, Button, FormControlLabel, Typography } from '@mui/material';
+import { Alert, Button, Checkbox, FormControlLabel, Typography } from '@mui/material';
 import classNames from 'classnames';
 import Icon from '@mui/material/Icon';
-import { LoadingButton } from '@mui/lab';
-import moment from 'moment';
-import { DataPortabilityService, LegalPageService, UserService } from '@selfcommunity/api-services';
+import { LegalPageService, UserService } from '@selfcommunity/api-services';
 import { arraysEqual, capitalize, Logger } from '@selfcommunity/utils';
-import { useSCPreferences, SCUserContext, SCPreferences } from '@selfcommunity/react-core';
+import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
 import ConsentSolutionSwitch from '../../shared/ConsentSolutionSwitch';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import Dialog from '@mui/material/Dialog';
@@ -30,9 +18,10 @@ import Slide from '@mui/material/Slide';
 import { LEGAL_POLICIES } from './../../constants/LegalPolicies';
 import ConsentSolutionSkeleton from './Skeleton';
 import { getDocumentBody, isDocumentApproved, isEmptyDocumentBody } from '../../utils/legalPages';
-import { FormattedMessage, FormattedDate, FormattedTime, defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { elementScrollTo } from 'seamless-scroll-polyfill';
-const PREFIX = 'SCConsentSolution';
+import AccountDataPortability from '../AccountDataPortability';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -47,126 +36,23 @@ const classes = {
     confirmDeleteAccountButton: `${PREFIX}-confirm-delete-account-button`,
     logoutAccountButton: `${PREFIX}-logout-account-button`,
     deleteAccountButton: `${PREFIX}-delete-account-button`,
-    createDataPortabilityButton: `${PREFIX}-create-data-portability-button`,
-    downloadDataPortabilityButton: `${PREFIX}-download-data-portability-button`,
+    dataPortability: `${PREFIX}-data-portability`,
     dataPortabilityCheck: `${PREFIX}-download-data-portability-check`,
     alertAcceptDocument: `${PREFIX}-alert-accept-document`,
     acceptConditions: `${PREFIX}-accept-conditions`
 };
 const Root = styled(Dialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.title}`]: {
-        display: 'flex',
-        justifyContent: 'center',
-        fontWeight: 800,
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.9rem'
-        }
-    },
-    [`& .${classes.titleBack}`]: {
-        display: 'flex',
-        justifyContent: 'left'
-    },
-    [`& .${classes.content}`]: {
-        padding: theme.spacing(2),
-        overflowX: 'hidden',
-        fontSize: '0.8rem',
-        [theme.breakpoints.down('sm')]: {
-            padding: 12,
-            '& h6': {
-                fontSize: '0.8rem'
-            },
-            '& span, p, li': {
-                fontSize: '0.7rem'
-            },
-            '& li': {
-                fontSize: '0.7rem'
-            },
-            '& button': {
-                fontSize: '0.6rem'
-            }
-        }
-    },
-    [`& .${classes.consent}`]: {
-        borderTop: 0,
-        overflowY: 'visible',
-        [theme.breakpoints.down('sm')]: {
-            paddingTop: 5,
-            paddingBottom: 5
-        }
-    },
-    [`& .${classes.consentSwitch}`]: {
-        margin: `${theme.spacing()} 3px`,
-        '& > span:first-of-type': {
-            marginRight: 10
-        },
-        [theme.breakpoints.down('sm')]: {
-            '.MuiFormControlLabel-label': {
-                fontSize: '0.7rem'
-            }
-        }
-    },
-    [`& .${classes.deleteAccountButton}`]: {
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.confirmDeleteAccountButton}`]: {
-        color: '#FFF !important',
-        marginRight: theme.spacing(2),
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.logoutAccountButton}`]: {
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.createDataPortabilityButton}`]: {
-        marginRight: theme.spacing(2),
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.downloadDataPortabilityButton}`]: {
-        marginBottom: theme.spacing()
-    },
-    [`& .${classes.alertAcceptDocument}`]: {
-        padding: theme.spacing(),
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.7rem',
-            padding: 5
-        }
-    },
-    [`& .${classes.acceptConditions}`]: {
-        fontSize: '0.8rem',
-        fontWeight: 300,
-        color: theme.palette.grey['A700'],
-        padding: `${theme.spacing()} ${theme.spacing()}`,
-        [theme.breakpoints.down('sm')]: {
-            fontSize: '0.6rem'
-        }
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * Translations
  */
 const messages = defineMessages({
-    createDpSectionInfo: {
-        id: 'ui.consentSolution.createDpSectionInfo',
-        defaultMessage: 'ui.consentSolution.createDpSectionInfo'
-    },
     deleteAccountDpSectionInfo: {
         id: 'ui.consentSolution.deleteAccountDpSectionInfo',
         defaultMessage: 'ui.consentSolution.deleteAccountDpSectionInfo'
     },
-    createDpSectionTitle: {
-        id: 'ui.consentSolution.createDpSectionTitle',
-        defaultMessage: 'ui.consentSolution.createDpSectionTitle'
-    },
-    createDpSectionGeneratedAt: {
-        id: 'ui.consentSolution.createDpSectionGeneratedAt',
-        defaultMessage: 'ui.consentSolution.createDpSectionGeneratedAt'
-    },
     deleteAccountDpSectionTitle: {
         id: 'ui.consentSolution.deleteAccountDpSectionTitle',
         defaultMessage: 'ui.consentSolution.deleteAccountDpSectionTitle'
@@ -185,7 +71,7 @@ export const ACCEPT_VIEW = 'accept';
 export const REJECTION_VIEW = 'rejection';
 export const CONFIRM_DELETE_ACCOUNT = 'delete_account';
 /**
- *> API documentation for the Community-JS ConsentSolution component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS ConsentSolution component. Learn about the available props and the CSS API.
  *
  #### Import
  ```jsx
@@ -213,8 +99,7 @@ export const CONFIRM_DELETE_ACCOUNT = 'delete_account';
  |confirmDeleteAccountButton|.SCConsentSolution-confirm-delete-account-button|Styles applied to the confirm delete account button in the rejection section.|
  |logoutAccountButton|.SCConsentSolution-logout-account-button|Styles applied to the exit account button in the rejection section.|
  |deleteAccountButton|.SCConsentSolution-delete-account-button|Styles applied to the delete account button in the rejection section.|
- |createDataPortabilityButton|.SCConsentSolution-create-data-portability-button|Styles applied to the create data portability button in the rejection section.|
- |downloadDataPortabilityButton|.SCConsentSolution-download-data-portability-button|Styles applied to the download data portability button in the rejection section.|
+ |dataPortability|.SCConsentSolution-data-portability|Styles applied to the data portability component in the rejection section.|
  |dataPortabilityCheck|.SCConsentSolution-data-portability-check|Styles applied to the checkbox in the rejection section.|
 
  * @param inProps
@@ -245,8 +130,6 @@ export default function ConsentSolution(inProps) {
     const [rejected, setRejected] = useState(false);
     const [dataPortability, setDataPortability] = useState(null);
     const [dataPortabilityChecked, setDataPortabilityChecked] = useState(false);
-    const [loadingDataPortability, setLoadingDataPortability] = useState(false);
-    const [downloadingDataPortability, setDownloadingDataPortability] = useState(false);
     const [loadingDeleteAccount, setLoadingDeleteAccount] = useState(false);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
@@ -301,43 +184,6 @@ export default function ConsentSolution(inProps) {
             Logger.error(SCOPE_SC_UI, _error);
         });
     };
-    /**
-     * Handle create data portability
-     */
-    const handleCreateDataPortabilityFile = () => {
-        setLoadingDataPortability(true);
-        DataPortabilityService.generateDataPortability()
-            .then((res) => {
-            if (res) {
-                setDataPortability(dataPortability);
-            }
-        })
-            .catch((_error) => {
-            Logger.error(SCOPE_SC_UI, _error);
-        });
-    };
-    /**
-     * Handle download data portability
-     */
-    const handleDownloadDataPortabilityFile = () => {
-        setDownloadingDataPortability(true);
-        DataPortabilityService.downloadDataPortability()
-            .then((res) => {
-            const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
-            const link = document.createElement('a');
-            link.href = url;
-            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(moment().format(), { year: 'numeric', month: 'numeric', day: 'numeric' })}.zip`);
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-            setDownloadingDataPortability(false);
-        })
-            .catch((_error) => {
-            setDownloadingDataPortability(false);
-            Logger.error(SCOPE_SC_UI, _error);
-        });
-    };
     /**
      * Handle confirm delete account
      */
@@ -368,7 +214,8 @@ export default function ConsentSolution(inProps) {
         setLoading(true);
         return LegalPageService.getAllLastRevisionsOfLegalPages()
             .then((documents) => {
-            let docs = documents.filter((lp) => legalPolicies.filter((p) => lp.name_and_version.startsWith(p)).length > 0);
+            // filter documents (show only privacy and tec)
+            let docs = documents.filter((lp) => legalPolicies.filter((p) => lp.slug.startsWith(p)).length > 0);
             // if initial legalPolicies !== LEGAL_POLICIES
             if (arraysEqual(legalPolicies, LEGAL_POLICIES)) {
                 docs = docs.filter((d) => !isEmptyDocumentBody(d) && !isDocumentApproved(d));
@@ -385,23 +232,6 @@ export default function ConsentSolution(inProps) {
             Logger.error(SCOPE_SC_UI, _error);
         });
     };
-    /**
-     * Fetch data portability status
-     */
-    const fetchDataPortabilityStatus = () => {
-        DataPortabilityService.dataPortabilityStatus()
-            .then((res) => {
-            if (res) {
-                if (!res.computing && res.generated_at) {
-                    setLoadingDataPortability(false);
-                }
-                setDataPortability(res);
-            }
-        })
-            .catch((_error) => {
-            Logger.error(SCOPE_SC_UI, _error);
-        });
-    };
     /**
      * On mount, fetches legal and custom documents
      */
@@ -411,21 +241,6 @@ export default function ConsentSolution(inProps) {
         }
         fetchLegalPages();
     }, [authUserId]);
-    /**
-     * Sync data portability status
-     */
-    useEffect(() => {
-        let interval;
-        if (authUserId !== null && ready) {
-            fetchDataPortabilityStatus();
-            if (_view === REJECTION_VIEW) {
-                interval = setInterval(() => {
-                    fetchDataPortabilityStatus();
-                }, 5000);
-            }
-        }
-        return () => interval && clearInterval(interval);
-    }, [authUserId, ready, _view]);
     /**
      * Render main view
      */
@@ -436,7 +251,7 @@ export default function ConsentSolution(inProps) {
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.label } })),
+                React.createElement(FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } })),
             React.createElement(DialogContent, { className: classes.content, dividers: true, ref: contentDialog },
                 React.createElement(Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                         __html: getDocumentBody(doc)
@@ -471,24 +286,7 @@ export default function ConsentSolution(inProps) {
                 React.createElement(Button, { size: "small", variant: 'outlined', onClick: () => setView(ACCEPT_VIEW), className: classes.backButton, startIcon: React.createElement(Icon, null, "arrow_back") },
                     React.createElement(FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }))),
             React.createElement(DialogContent, { className: classes.content, dividers: true },
-                React.createElement(Typography, { variant: "h6" },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.createDpSectionTitle", defaultMessage: "ui.consentSolution.createDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } })),
-                React.createElement("br", null),
-                React.createElement(Typography, { variant: "body2" },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccountTitle", defaultMessage: "ui.consentSolution.deleteAccountTitle" })),
-                React.createElement("ul", null, intl.formatMessage(messages.createDpSectionInfo, {
-                    li: (chunks) => React.createElement("li", null, chunks)
-                })),
-                React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loadingDataPortability, disabled: dataPortability && (dataPortability.computing || moment().diff(moment(dataPortability.requested_at), 'hours') < 24), loadingPosition: "start", startIcon: React.createElement(Icon, null, "copy_all_outlined"), variant: "outlined", className: classes.createDataPortabilityButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loadingDataPortability ? (React.createElement(FormattedMessage, { id: "ui.consentSolution.createFileLoadingButton", defaultMessage: "ui.consentSolution.createFileLoadingButton" })) : (React.createElement(FormattedMessage, { id: "ui.consentSolution.createFileButton", defaultMessage: "ui.consentSolution.createFileButton" }))),
-                dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: React.createElement(Icon, null, "cloud_download_outlined"), variant: 'outlined', className: classes.downloadDataPortabilityButton, onClick: handleDownloadDataPortabilityFile },
-                    React.createElement(FormattedMessage, { id: "ui.consentSolution.downloadFileButton", defaultMessage: "ui.consentSolution.downloadFileButton" }))),
-                React.createElement("br", null),
-                dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(Typography, { variant: "body2" },
-                    React.createElement("b", null, intl.formatMessage(messages.createDpSectionGeneratedAt, {
-                        date: React.createElement(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
-                        time: React.createElement(FormattedTime, { value: dataPortability.requested_at })
-                    })))),
-                React.createElement("br", null),
+                React.createElement(AccountDataPortability, { className: classes.dataPortability }),
                 React.createElement(Typography, { variant: "h6" },
                     React.createElement(FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: capitalize(scUserContext.user.username) } })),
                 React.createElement("ul", null, intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => React.createElement("li", null, chunks) })),
@@ -496,7 +294,7 @@ export default function ConsentSolution(inProps) {
                 React.createElement("br", null),
                 React.createElement(Button, { size: "small", startIcon: React.createElement(Icon, null, "delete_outlined"), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(CONFIRM_DELETE_ACCOUNT) },
                     React.createElement(FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" })),
-                React.createElement(Button, { size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: React.createElement(Icon, null, "door_back_outlined"), onClick: handleLogout },
+                React.createElement(Button, { size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: React.createElement(Icon, null, "upload"), onClick: handleLogout },
                     React.createElement(FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" })))));
     };
     /**
@@ -555,4 +353,3 @@ export default function ConsentSolution(inProps) {
      */
     return (React.createElement(React.Fragment, null, open && (React.createElement(Root, Object.assign({ "aria-describedby": "consent--solution-dialog", className: classNames(classes.root, className), TransitionComponent: DialogTransition, maxWidth: 'md', fullWidth: true, open: ready, disableEscapeKeyDown: true, onClose: handleClose, scroll: 'paper' }, rest), content()))));
 }
-//# sourceMappingURL=ConsentSolution.js.map

package/lib/esm/components/ConsentSolution/Skeleton.d.ts

@@ -9,19 +9,18 @@
 
  #### Component Name
 
- The name `SCConsentSolutionSkeleton` can be used when providing style overrides in the theme.
+ The name `SCConsentSolution-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCConsentSolutionSkeleton-root|Styles applied to the root element.|
- |title|.SCConsentSolutionSkeleton-title|Styles applied to the title element.|
- |content|.SCConsentSolutionSkeleton-content|Styles applied to the content element.|
- |consent|.SCConsentSolutionSkeleton-consent|Styles applied to the consent element.|
- |consentSwitch|.SCConsentSolutionSkeleton-consent-switch|Styles applied to the switch skeleton element.|
- |actions|.SCConsentSolutionSkeleton-actions|Styles applied to the actions section.|
+ |root|.SCConsentSolution-skeleton-root|Styles applied to the root element.|
+ |title|.SCConsentSolution-title|Styles applied to the title element.|
+ |content|.SCConsentSolution-content|Styles applied to the content element.|
+ |consent|.SCConsentSolution-consent|Styles applied to the consent element.|
+ |consentSwitch|.SCConsentSolution-consent-switch|Styles applied to the switch skeleton element.|
+ |actions|.SCConsentSolution-actions|Styles applied to the actions section.|
  *
  */
 export default function ConsentSolutionSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/esm/components/ConsentSolution/Skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import { Box, DialogActions, DialogContent, DialogTitle } from '@mui/material';
-const PREFIX = 'SCConsentSolutionSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     title: `${PREFIX}-title`,
     content: `${PREFIX}-content`,
     consent: `${PREFIX}-consent`,
@@ -14,33 +14,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.title}`]: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    [`& .${classes.content}`]: {
-        paddingTop: theme.spacing(3),
-        paddingBottom: theme.spacing(5)
-    },
-    [`& .${classes.consent}`]: {
-        borderTop: 0,
-        overflowY: 'visible',
-        display: 'flex'
-    },
-    [`& .${classes.consentSwitch}`]: {
-        width: 64,
-        height: 31,
-        borderRadius: 22,
-        marginRight: theme.spacing()
-    },
-    [`& .${classes.consentSwitchLabel}`]: {
-        marginTop: 23
-    }
-}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS ConsentSolution Skeleton component. Learn about the available props and the CSS API.
 
@@ -52,18 +27,18 @@ const Root = styled(Box, {
 
  #### Component Name
 
- The name `SCConsentSolutionSkeleton` can be used when providing style overrides in the theme.
+ The name `SCConsentSolution-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCConsentSolutionSkeleton-root|Styles applied to the root element.|
- |title|.SCConsentSolutionSkeleton-title|Styles applied to the title element.|
- |content|.SCConsentSolutionSkeleton-content|Styles applied to the content element.|
- |consent|.SCConsentSolutionSkeleton-consent|Styles applied to the consent element.|
- |consentSwitch|.SCConsentSolutionSkeleton-consent-switch|Styles applied to the switch skeleton element.|
- |actions|.SCConsentSolutionSkeleton-actions|Styles applied to the actions section.|
+ |root|.SCConsentSolution-skeleton-root|Styles applied to the root element.|
+ |title|.SCConsentSolution-title|Styles applied to the title element.|
+ |content|.SCConsentSolution-content|Styles applied to the content element.|
+ |consent|.SCConsentSolution-consent|Styles applied to the consent element.|
+ |consentSwitch|.SCConsentSolution-consent-switch|Styles applied to the switch skeleton element.|
+ |actions|.SCConsentSolution-actions|Styles applied to the actions section.|
  *
  */
 export default function ConsentSolutionSkeleton() {
@@ -83,4 +58,3 @@ export default function ConsentSolutionSkeleton() {
         React.createElement(DialogActions, { className: classes.actions },
             React.createElement(Skeleton, { animation: "wave", height: 40, width: "20%" }))));
 }
-//# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/ConsentSolution/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCConsentSolution";

package/lib/esm/components/ConsentSolution/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCConsentSolution';

package/lib/esm/components/ConsentSolution/index.d.ts

@@ -2,4 +2,3 @@ import ConsentSolution, { ConsentSolutionProps } from './ConsentSolution';
 import ConsentSolutionSkeleton from './Skeleton';
 export default ConsentSolution;
 export { ConsentSolutionProps, ConsentSolutionSkeleton };
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/ConsentSolution/index.js

@@ -2,4 +2,3 @@ import ConsentSolution from './ConsentSolution';
 import ConsentSolutionSkeleton from './Skeleton';
 export default ConsentSolution;
 export { ConsentSolutionSkeleton };
-//# sourceMappingURL=index.js.map

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

@@ -36,4 +36,3 @@ export interface ConsentSolutionButtonProps extends ButtonProps {
  * @param inProps
  */
 export default function ConsentSolutionButton(inProps: ConsentSolutionButtonProps): JSX.Element;
-//# sourceMappingURL=ConsentSolutionButton.d.ts.map

package/lib/esm/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useContext } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
@@ -78,4 +68,3 @@ export default function ConsentSolutionButton(inProps) {
             React.createElement(FormattedMessage, { id: "ui.consentSolutionButton.viewStateButton", defaultMessage: "ui.consentSolutionButton.viewStateButton" })),
         open && React.createElement(ConsentSolution, Object.assign({}, ConsentSolutionProps, { open: true, onClose: handleClick }))));
 }
-//# sourceMappingURL=ConsentSolutionButton.js.map

package/lib/esm/components/ConsentSolutionButton/index.d.ts

@@ -1,4 +1,3 @@
 import ConsentSolutionButton, { ConsentSolutionButtonProps } from './ConsentSolutionButton';
 export default ConsentSolutionButton;
 export { ConsentSolutionButtonProps };
-//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/ConsentSolutionButton/index.js

@@ -1,3 +1,2 @@
 import ConsentSolutionButton from './ConsentSolutionButton';
 export default ConsentSolutionButton;
-//# sourceMappingURL=index.js.map

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

@@ -29,8 +29,12 @@ export interface CustomAdvProps extends VirtualScrollerItemProps {
     prefixedHeight?: number;
 }
 /**
- > API documentation for the Community-JS CustomAdv component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS CustomAdv component. Learn about the available props and the CSS API.
  *
+ *
+ * This component renders custom adv banners.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CustomAdv)
+
  #### Import
  ```jsx
  import {CustomAdv} from '@selfcommunity/react-ui';
@@ -43,9 +47,11 @@ export interface CustomAdvProps extends VirtualScrollerItemProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCCustomAdv-root|Styles applied to the root element.|
+ |wrap|.SCCustomAdv-wrap|Styles applied to wrap an element.|
  |image|.SCCustomAdv-image|Styles applied to the image element.|
+ |embedCode|.SCCustomAdv-embed-code|Styles applied to the embed code section.|
+ |prefixedHeight|.SCCustomAdv-prefixed-height|Styles applied to handle a prefixed height.|
 
  * @param inProps
  */
 export default function CustomAdv(inProps: CustomAdvProps): JSX.Element;
-//# sourceMappingURL=CustomAdv.d.ts.map

package/lib/esm/components/CustomAdv/CustomAdv.js

@@ -7,7 +7,7 @@ import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
 import useResizeObserver from 'use-resize-observer';
-const PREFIX = 'SCCustomAdv';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     wrap: `${PREFIX}-wrap`,
@@ -17,31 +17,15 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    marginBottom: theme.spacing(2),
-    [`& .${classes.wrap}`]: {
-        width: '100%',
-        position: 'relative'
-    },
-    [`& .${classes.image}`]: {
-        width: '100%'
-    },
-    [`& .${classes.embedCode}`]: {
-        width: '100%'
-    },
-    [`& .${classes.prefixedHeight}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 /**
- > API documentation for the Community-JS CustomAdv component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS CustomAdv component. Learn about the available props and the CSS API.
+ *
  *
+ * This component renders custom adv banners.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CustomAdv)
+
  #### Import
  ```jsx
  import {CustomAdv} from '@selfcommunity/react-ui';
@@ -54,7 +38,10 @@ const Root = styled(Box, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCCustomAdv-root|Styles applied to the root element.|
+ |wrap|.SCCustomAdv-wrap|Styles applied to wrap an element.|
  |image|.SCCustomAdv-image|Styles applied to the image element.|
+ |embedCode|.SCCustomAdv-embed-code|Styles applied to the embed code section.|
+ |prefixedHeight|.SCCustomAdv-prefixed-height|Styles applied to handle a prefixed height.|
 
  * @param inProps
  */
@@ -103,4 +90,3 @@ export default function CustomAdv(inProps) {
         scCustomAdv.embed_code && (React.createElement(Box, { className: classNames(classes.embedCode, { [classes.prefixedHeight]: Boolean(prefixedHeight) }), dangerouslySetInnerHTML: { __html: scCustomAdv.embed_code } }))));
     return (React.createElement(Root, { id: id, className: classNames(classes.root, className), ref: ref, style: Object.assign({}, (prefixedHeight ? { paddingBottom: prefixedHeight } : { width: '100%' })) }, scCustomAdv.link ? (React.createElement("a", { href: scCustomAdv.link, title: scCustomAdv.title }, adv)) : (adv)));
 }
-//# sourceMappingURL=CustomAdv.js.map

package/lib/esm/components/CustomAdv/Skeleton.d.ts

@@ -9,14 +9,13 @@
 
  #### Component Name
 
- The name `SCCustomAdvSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCustomAdv-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCustomAdvSkeleton-root|Styles applied to the root element.|
+ |root|.SCCustomAdv-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CustomAdvSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/esm/components/CustomAdv/Skeleton.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { GenericSkeleton } from '../Skeleton';
 import { styled } from '@mui/material/styles';
-const PREFIX = 'SCCustomAdvSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(GenericSkeleton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'SkeletonRoot'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Custom Adv Skeleton component. Learn about the available props and the CSS API.
@@ -21,16 +20,15 @@ const Root = styled(GenericSkeleton, {
 
  #### Component Name
 
- The name `SCCustomAdvSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCustomAdv-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCustomAdvSkeleton-root|Styles applied to the root element.|
+ |root|.SCCustomAdv-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CustomAdvSkeleton() {
     return React.createElement(Root, { className: classes.root });
 }
-//# sourceMappingURL=Skeleton.js.map