@selfcommunity/react-ui 0.11.0-alpha.65 → 0.11.0-alpha.66

package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const react_intl_1 = require("react-intl");
@@ -19,7 +18,7 @@ const classes = {
     medias: `${constants_1.PREFIX}-content-discussion-medias`,
     editor: `${constants_1.PREFIX}-content-discussion-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentDiscussionRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/Composer/Content/ContentLesson/ContentLesson.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const react_intl_1 = require("react-intl");
@@ -19,7 +18,7 @@ const classes = {
     editor: `${constants_1.PREFIX}-content-lesson-editor`,
     link: `${constants_1.PREFIX}-content-lesson-link`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentLessonRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/Composer/Content/ContentPoll/ContentPoll.js

@@ -4,11 +4,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_sortablejs_1 = require("react-sortablejs");
-const InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
 const x_date_pickers_1 = require("@mui/x-date-pickers");
 const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
 const Composer_1 = require("../../../../constants/Composer");
@@ -30,7 +27,7 @@ const classes = {
     choiceNew: `${constants_1.PREFIX}-content-poll-choice-new`,
     metadata: `${constants_1.PREFIX}-content-poll-metadata`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentPollRoot'
 })(({ theme }) => ({}));
@@ -63,7 +60,7 @@ exports.default = (inProps) => {
     const { className = null, value = { poll: Object.assign({}, DEFAULT_POLL) }, error = {}, disabled, onChange } = props;
     const { titleError = null, error: generalError = null } = Object.assign({}, error);
     // MEMO
-    const poll = (0, react_1.useMemo)(() => value.poll ? value.poll : Object.assign({}, DEFAULT_POLL), [value, DEFAULT_POLL]);
+    const poll = (0, react_1.useMemo)(() => (value.poll ? value.poll : Object.assign({}, DEFAULT_POLL)), [value, DEFAULT_POLL]);
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // HANDLERS
@@ -102,10 +99,10 @@ exports.default = (inProps) => {
         minDate.setDate(minDate.getDate() + Composer_1.COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [generalError && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generalError }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
                         endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Composer_1.COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
                     } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choices }, { children: (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
-                            startAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "drag" }) }))),
-                            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) }) })) })))
-                        } }, index))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choiceNew }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.metadata }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? (0, date_fns_1.parseISO)(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
+                            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "drag" }) }))),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= Composer_1.COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) })) }) })) })))
+                        } }, index))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.choiceNew }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.metadata }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { disabled: disabled, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? (0, date_fns_1.parseISO)(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
 };

package/lib/cjs/components/Composer/Content/ContentPost/ContentPost.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
 const constants_1 = require("../../constants");
@@ -15,7 +14,7 @@ const classes = {
     medias: `${constants_1.PREFIX}-content-post-medias`,
     editor: `${constants_1.PREFIX}-content-post-editor`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'ContentPostRoot'
 })(({ theme }) => ({}));

package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { BoxProps } from '@mui/material';
-import { SCTagType } from '@selfcommunity/types/src/index';
+import { BoxProps, TextFieldProps } from '@mui/material';
+import { SCTagType } from '@selfcommunity/types';
 import { ComposerLayerProps } from '../../../../types/composer';
 import { SCGroupType } from '@selfcommunity/types';
 export declare enum AudienceTypes {

package/lib/cjs/components/Composer/Layer/AudienceLayer/AudienceLayer.js

@@ -5,15 +5,11 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const TagChip_1 = tslib_1.__importDefault(require("../../../../shared/TagChip"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("../../constants");
 const GroupAutocomplete_1 = tslib_1.__importDefault(require("../../../GroupAutocomplete"));
@@ -33,7 +29,7 @@ const classes = {
     message: `${constants_1.PREFIX}-layer-audience-message`,
     autocomplete: `${constants_1.PREFIX}-layer-audience-autocomplete`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerAudienceRoot'
 })(() => ({}));
@@ -85,18 +81,18 @@ const AudienceLayer = react_1.default.forwardRef((props, ref) => {
     const handleChangeAudience = (0, react_1.useCallback)((_event, data) => setAudience(data), []);
     const handleAutocompleteOpen = (0, react_1.useCallback)(() => setAutocompleteOpen(true), []);
     const handleAutocompleteClose = (0, react_1.useCallback)(() => setAutocompleteOpen(false), []);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "public" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'recurring')) ||
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.title", defaultMessage: "ui.composer.layer.audience.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ value: audience, onChange: handleChangeAudience, "aria-label": "audience type" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: AudienceTypes.AUDIENCE_ALL, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all", defaultMessage: "ui.composer.layer.audience.all" }) }), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'recurring')) ||
                                     (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
-                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_EVENT, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
+                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_EVENT, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event", defaultMessage: "ui.composer.layer.audience.event" }) })), groupsEnabled && ((0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: (Boolean(value === null || value === void 0 ? void 0 : value.length) && !Object.prototype.hasOwnProperty.call(value, 'managed_by')) ||
                                     (value !== undefined && Boolean(!(value === null || value === void 0 ? void 0 : value.length)) && audience !== AudienceTypes.AUDIENCE_ALL) ||
-                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_GROUP, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), (0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "label" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.audience.layer.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
+                                    (Boolean((value === null || value === void 0 ? void 0 : value.length) === 0) && audience === AudienceTypes.AUDIENCE_ALL && Boolean((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== 0)), value: AudienceTypes.AUDIENCE_GROUP, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group", defaultMessage: "ui.composer.layer.audience.group" }) })), (0, jsx_runtime_1.jsx)(material_1.Tab, { disabled: value && Object.prototype.hasOwnProperty.call(value, 'managed_by'), value: AudienceTypes.AUDIENCE_TAG, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "label" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag", defaultMessage: "ui.composer.layer.audience.tag" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.message }, { children: [audience === AudienceTypes.AUDIENCE_ALL && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.all.message", defaultMessage: "ui.composer.audience.layer.all.message" })), audience === AudienceTypes.AUDIENCE_EVENT && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.event.message", defaultMessage: "ui.composer.audience.layer.event.message" })), audience === AudienceTypes.AUDIENCE_GROUP && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.group.message", defaultMessage: "ui.composer.audience.layer.group.message" })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tag.message", defaultMessage: "ui.composer.audience.layer.tag.message" }))] })), audience === AudienceTypes.AUDIENCE_TAG && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, open: autocompleteOpen, onOpen: handleAutocompleteOpen, onClose: handleAutocompleteClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
                             return value.map((option, index) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id));
                         }, renderOption: (props, option, { selected, inputValue }) => {
                             const matches = (0, match_1.default)(option.name, inputValue);
                             const parts = (0, parse_1.default)(option.name, matches);
                             return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, option.id) })));
                         }, renderInput: (params) => {
-                            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
+                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: params.InputProps.endAdornment }) }) })));
                         } })), audience === AudienceTypes.AUDIENCE_GROUP && (0, jsx_runtime_1.jsx)(GroupAutocomplete_1.default, { onChange: handleGroupChange, defaultValue: defaultValue }), audience === AudienceTypes.AUDIENCE_EVENT && (0, jsx_runtime_1.jsx)(EventAutocomplete_1.default, { onChange: handleEventChange, defaultValue: defaultValue })] }))] })));
 });
 exports.default = AudienceLayer;

package/lib/cjs/components/Composer/Layer/CategoryLayer/CategoryLayer.js

@@ -5,11 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../../../CategoryAutocomplete"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -17,7 +14,7 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerCategoryRoot'
 })(() => ({}));
@@ -31,6 +28,6 @@ const CategoryLayer = react_1.default.forwardRef((props, ref) => {
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
     const handleChange = (0, react_1.useCallback)((categories) => setValue(categories), []);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, Object.assign({ multiple: true, onChange: handleChange, defaultValue: defaultValue }, (!react_core_1.UserUtils.isStaff(scUserContext.user) && { endpointQueryParams: { can_create_content: true } }))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, Object.assign({ multiple: true, onChange: handleChange, defaultValue: defaultValue }, (!react_core_1.UserUtils.isStaff(scUserContext.user) && { endpointQueryParams: { can_create_content: true } }))) }))] })));
 });
 exports.default = CategoryLayer;

package/lib/cjs/components/Composer/Layer/CloseLayer/CloseLayer.js

@@ -5,9 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -15,13 +12,13 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerCloseRoot'
 })(() => ({}));
 const CloseLayer = react_1.default.forwardRef((props, ref) => {
     // Props
     const { className, onClose, onSave, defaultValue = [] } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue"]);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }) })] })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" }) }), (0, jsx_runtime_1.jsxs)(material_1.List, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }) })) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onSave }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }) })) })] })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" }) }), (0, jsx_runtime_1.jsxs)(material_1.List, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }) })) }), (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: onSave }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }) })) })] })] }))] })));
 });
 exports.default = CloseLayer;

package/lib/cjs/components/Composer/Layer/LocationLayer/LocationLayer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@mui/material';
-import { SCContributionLocation } from '@selfcommunity/types/src/index';
+import { SCContributionLocation } from '@selfcommunity/types';
 import { ComposerLayerProps } from '../../../../types/composer';
 export interface LocationLayerProps extends Omit<BoxProps, 'defaultValue'>, Omit<ComposerLayerProps, 'defaultValue'> {
     defaultValue: SCContributionLocation;

package/lib/cjs/components/Composer/Layer/LocationLayer/LocationLayer.js

@@ -5,10 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const LocationAutocomplete_1 = tslib_1.__importDefault(require("../../../LocationAutocomplete"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const classes = {
@@ -16,7 +13,7 @@ const classes = {
     title: `${constants_1.PREFIX}-layer-title`,
     content: `${constants_1.PREFIX}-layer-content`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerLocationRoot'
 })(() => ({}));
@@ -28,6 +25,6 @@ const LocationLayer = react_1.default.forwardRef((props, ref) => {
     // HANDLERS
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
     const handleChange = (0, react_1.useCallback)((location) => setValue(location), []);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' }) }))] })));
 });
 exports.default = LocationLayer;

package/lib/cjs/components/Composer/Skeleton.js

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
@@ -13,7 +10,7 @@ const classes = {
     content: `${constants_1.PREFIX}-content`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +35,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function ComposerSkeleton() {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { sx: { height: 190 }, animation: "wave", variant: "rectangular" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { sx: { height: 190 }, animation: "wave", variant: "rectangular" }) })));
 }
 exports.default = ComposerSkeleton;

package/lib/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -13,7 +12,7 @@ const constants_1 = require("../constants");
 const classes = {
     root: `${constants_1.PREFIX}-typeswitch-root`
 };
-const Root = (0, styles_1.styled)(material_1.ToggleButtonGroup, {
+const Root = (0, material_1.styled)(material_1.ToggleButtonGroup, {
     name: constants_1.PREFIX,
     slot: 'TypeSwitchButtonGroupRoot'
 })(() => ({}));

package/lib/cjs/components/ConnectionUserButton/ConnectionUserButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const FollowUserButton_1 = tslib_1.__importDefault(require("../FollowUserButton"));
@@ -13,7 +12,7 @@ const PREFIX = 'SCConnectionUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/ConsentSolution/ConsentSolution.js

@@ -5,20 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const ConsentSolutionSwitch_1 = tslib_1.__importDefault(require("../../shared/ConsentSolutionSwitch"));
 const Errors_1 = require("../../constants/Errors");
-const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
-const DialogActions_1 = tslib_1.__importDefault(require("@mui/material/DialogActions"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
-const DialogTitle_1 = tslib_1.__importDefault(require("@mui/material/DialogTitle"));
-const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
 const LegalPolicies_1 = require("./../../constants/LegalPolicies");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const legalPages_1 = require("../../utils/legalPages");
@@ -45,7 +38,7 @@ const classes = {
     alertAcceptDocument: `${constants_1.PREFIX}-alert-accept-document`,
     acceptConditions: `${constants_1.PREFIX}-accept-conditions`
 };
-const Root = (0, styles_1.styled)(Dialog_1.default, {
+const Root = (0, material_1.styled)(material_1.Dialog, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -66,7 +59,7 @@ const messages = (0, react_intl_1.defineMessages)({
  * Dialog default transition
  */
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  * Dialog views
@@ -253,9 +246,9 @@ function ConsentSolution(inProps) {
             return null;
         }
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: (0, legalPages_1.getDocumentBody)(doc)
-                        } }) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
+                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
     };
     /**
      * Render document detail view
@@ -265,13 +258,13 @@ function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
     };
     /**
      * If there's no authUserId, component is hidden.

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

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
@@ -15,7 +12,7 @@ const classes = {
     consentSwitchLabel: `${constants_1.PREFIX}-consent-switch-label`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -45,7 +42,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function ConsentSolutionSkeleton() {
-    const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }) }))] })));
+    const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 40, width: "20%" }) }))] })));
 }
 exports.default = ConsentSolutionSkeleton;

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

@@ -1,5 +1,5 @@
 import { ConsentSolutionProps } from '../ConsentSolution';
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 export interface ConsentSolutionButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.

package/lib/cjs/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -4,8 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
-const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
 const ConsentSolution_1 = tslib_1.__importDefault(require("../ConsentSolution"));
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
@@ -14,7 +12,7 @@ const PREFIX = 'SCConsentSolutionButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(Dialog_1.default, {
+const Root = (0, material_1.styled)(material_1.Dialog, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/Course/Course.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -40,17 +39,17 @@ const classes = {
     snippetAvatarUserProfile: `${constants_1.PREFIX}-snippet-avatar-user-profile-view`,
     snippetImage: `${constants_1.PREFIX}-snippet-image`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
-const PreviewRoot = (0, styles_1.styled)(material_1.Box, {
+const PreviewRoot = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot',
     overridesResolver: (_props, styles) => styles.previewRoot
 })(() => ({}));
-const SnippetRoot = (0, styles_1.styled)(BaseItemButton_1.default, {
+const SnippetRoot = (0, material_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'SnippetRoot',
     overridesResolver: (_props, styles) => styles.snippetRoot

package/lib/cjs/components/Course/CreatePlaceholder.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
@@ -17,7 +16,7 @@ const classes = {
     icon: `${constants_1.PREFIX}-create-placeholder-icon`,
     actions: `${constants_1.PREFIX}-create-placeholder-actions`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'CreatePlaceholderRoot'
 })(() => ({}));