@selfcommunity/react-ui 0.11.0 → 1.0.0

package/lib/cjs/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.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 lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -18,7 +17,7 @@ const PREFIX = 'SCAcceptRequestUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const AcceptButton = (0, material_1.styled)(lab_1.LoadingButton, {
+const AcceptButton = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.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 lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -20,7 +19,7 @@ const PREFIX = 'SCAcceptRequestUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const AcceptButton = (0, material_1.styled)(lab_1.LoadingButton, {
+const AcceptButton = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -23,8 +22,8 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS AccountDataPortability component. Learn about the available props and the CSS API.
  *
@@ -152,16 +151,12 @@ function AccountDataPortability(inProps) {
      * Renders root object
      */
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
-                    } }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                        li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }, "ui.accountDataPortability.info.li"),
+                        ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks }, "ui.accountDataPortability.info.ul")
+                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
                     (dataPortability &&
                         (dataPortability.computing ||
-                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "cloud_download_outlined" }), variant: "outlined", className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
                         date: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
                         time: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedTime, { value: dataPortability.requested_at })
                     } }) })))] })));

package/lib/cjs/components/AccountDelete/AccountDelete.js

@@ -11,7 +11,6 @@ const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../constants/Errors");
 const react_intl_1 = require("react-intl");
-const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
 const PREFIX = 'SCAccountDelete';
 const classes = {
     root: `${PREFIX}-root`,
@@ -22,7 +21,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS AccountDelete component. Learn about the available props and the CSS API.
@@ -111,17 +110,11 @@ function AccountDelete(inProps) {
      */
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.message, component: material_1.Box }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
                         communityName,
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
+                        li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }, "ui.accountDelete.message.li"),
+                        ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks }, "ui.accountDelete.message.ul")
                     } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.confirm, component: material_1.Box }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
                             username: scUserContext.user.username,
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
-                        } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
+                            b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks }, "ui.accountDelete.confirmMessage.b")
+                        } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
 }
 exports.default = AccountDelete;

package/lib/cjs/components/AccountRecover/AccountRecover.js

@@ -20,7 +20,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(({ theme }) => ({
     [`& .${classes.form} .MuiTextField-root, &.${classes.root} .MuiButton-root`]: {
         margin: theme.spacing(1, 0, 1, 0)
@@ -104,9 +104,7 @@ function AccountRecover(inProps) {
     // RENDER
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isSucceed ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountRecover.success', defaultMessage: 'ui.accountRecover.success' }, {
                     email,
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                    // @ts-ignore
-                    b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
+                    b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks }, "ui.accountRecover.success.b")
                 }), successAction] }))) : ((0, jsx_runtime_1.jsxs)("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [(0, jsx_runtime_1.jsx)(EmailTextField_1.default, Object.assign({ className: classes.email, disabled: isSubmitting, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.email.label", defaultMessage: "ui.accountRecover.email.label" }) }, TextFieldProps, { value: email, onChange: handleChange, error: Boolean(emailError), helperText: emailError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.accountRecover.email.error.${emailError}`, defaultMessage: `ui.accountRecover.email.error.${emailError}` })) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !email || Boolean(emailError) || isSubmitting }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountRecover.submit", defaultMessage: "ui.accountRecover.submit" }) }))] }))) })));
 }
 exports.default = AccountRecover;

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

@@ -32,4 +32,4 @@ export interface BottomNavigationProps extends MuiBottomNavigationProps {
  *
  * @param inProps
  */
-export default function BottomNavigation(inProps: BottomNavigationProps): JSX.Element;
+export default function BottomNavigation(inProps: BottomNavigationProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/BroadcastMessages/Message.js

@@ -95,7 +95,7 @@ function Message(props) {
         return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: open, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [message.viewed_at === null && !disableMarkRead && ((0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === types_1.SCBroadcastMessageTemplateType.DETAIL && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), title: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
     }
     // SCBroadcastMessageTemplateType.SNIPPET
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ alignItems: 'center', component: 'div', classes: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ alignItems: "center", component: "div", classes: {
                 root: (0, classnames_1.default)(classes.listItemSnippet, classes.listItemSnippetNew)
             } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { disableTypography: true, primary: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
 }

package/lib/cjs/components/BuyButton/BuyButton.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 lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -26,7 +25,7 @@ const classes = {
     going: `${PREFIX}-going`,
     notGoing: `${PREFIX}-not-going`
 };
-const RequestRoot = (0, material_1.styled)(lab_1.LoadingButton, {
+const RequestRoot = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'RequestRoot'
 })(() => ({}));
@@ -79,7 +78,7 @@ function BuyButton(inProps) {
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, [open]);
-    const handleOpen = (0, react_1.useCallback)((e) => {
+    const handleOpen = (0, react_1.useCallback)(() => {
         if (!open) {
             if (!scUserContext.user) {
                 scContext.settings.handleAnonymousAction();
@@ -93,7 +92,7 @@ function BuyButton(inProps) {
      * Handle update order
      * Price param is the new price selected
      */
-    const handleUpdatePaymentOrder = (0, react_1.useCallback)((price) => {
+    const handleUpdatePaymentOrder = (0, react_1.useCallback)((_price) => {
         // update order/subscription when will be recurring payment
     }, [paymentOrder, purchased]);
     /**
@@ -185,7 +184,11 @@ function BuyButton(inProps) {
     if (!contentId && !content) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: (0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: (0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, slotProps: {
+                        paper: {
+                            className: classes.paper
+                        }
+                    }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
                                     paywalls: products,
                                     payment_order: paymentOrder
                                 }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PaywallsDialog_1.default, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {

package/lib/cjs/components/Categories/Categories.js

@@ -148,7 +148,7 @@ function Categories(inProps) {
      * Renders categories list
      */
     const filteredCategories = (0, utils_1.sortByAttr)(getFilteredCategories(), 'order');
-    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, value: filterName, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), loading ? ((0, jsx_runtime_1.jsx)(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredCategories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 6, lg: 4 }, { children: (0, jsx_runtime_1.jsx)(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, md: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, value: filterName, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), loading ? ((0, jsx_runtime_1.jsx)(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: !filteredCategories.length ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" }) })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredCategories.map((category) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6, lg: 4 } }, { children: (0, jsx_runtime_1.jsx)(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })) }), category.id))) })) })))] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

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

@@ -37,6 +37,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  */
 function CategoriesSkeleton(inProps) {
     const { className, CategorySkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "CategorySkeletonProps"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: 'outlined' }, CategorySkeletonProps)) }), index))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.categories }, { children: [...Array(15)].map((_category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: 6, md: 4 } }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: 0, variant: "outlined" }, CategorySkeletonProps)) }), index))) })) })));
 }
 exports.default = CategoriesSkeleton;

package/lib/cjs/components/Categories/prefetchedCategories.js

@@ -3,129 +3,129 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prefetchedCategories = void 0;
 const prefetchedCategories = [
     {
-        "id": 12,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Decimo",
-        "name_synonyms": "",
-        "slug": "decimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/decimo_6924.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/decimo_8041.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/decimo_3816.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/decimo_0379.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/decimo_2449.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/decimo_6614.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:27:54.224553+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 121
+        id: 12,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Decimo',
+        name_synonyms: '',
+        slug: 'decimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/decimo_6924.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/decimo_8041.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/decimo_3816.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/decimo_0379.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/decimo_2449.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/decimo_6614.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:27:54.224553+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 121
     },
     {
-        "id": 21,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciannovesimo",
-        "name_synonyms": "",
-        "slug": "diciannovesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciannovesimo_3711.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciannovesimo_2523.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciannovesimo_0903.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciannovesimo_8502.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciannovesimo_8366.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciannovesimo_8326.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:56.488219+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 128
+        id: 21,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciannovesimo',
+        name_synonyms: '',
+        slug: 'diciannovesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciannovesimo_3711.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciannovesimo_2523.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciannovesimo_0903.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciannovesimo_8502.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciannovesimo_8366.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciannovesimo_8326.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:56.488219+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 128
     },
     {
-        "id": 19,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciasettesimo",
-        "name_synonyms": "",
-        "slug": "diciasettesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciasettesimo_1283.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciasettesimo_5019.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciasettesimo_6746.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciasettesimo_7799.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciasettesimo_7603.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciasettesimo_0512.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:27.579942+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 117
+        id: 19,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciasettesimo',
+        name_synonyms: '',
+        slug: 'diciasettesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciasettesimo_1283.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciasettesimo_5019.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciasettesimo_6746.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciasettesimo_7799.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciasettesimo_7603.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciasettesimo_0512.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:27.579942+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 117
     },
     {
-        "id": 20,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciottesimo",
-        "name_synonyms": "",
-        "slug": "diciottesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciottesimo_7510.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciottesimo_4703.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciottesimo_7082.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciottesimo_4128.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciottesimo_9547.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciottesimo_0577.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:38.915804+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 117
+        id: 20,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciottesimo',
+        name_synonyms: '',
+        slug: 'diciottesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciottesimo_7510.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciottesimo_4703.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciottesimo_7082.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciottesimo_4128.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciottesimo_9547.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciottesimo_0577.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:38.915804+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 117
     },
     {
-        "id": 14,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Dodicesimo",
-        "name_synonyms": "",
-        "slug": "dodicesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/dodicesimo_7967.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/dodicesimo_2679.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/dodicesimo_3516.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/dodicesimo_2780.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/dodicesimo_6346.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/dodicesimo_8289.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:28:12.013730+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 122
+        id: 14,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Dodicesimo',
+        name_synonyms: '',
+        slug: 'dodicesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/dodicesimo_7967.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/dodicesimo_2679.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/dodicesimo_3516.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/dodicesimo_2780.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/dodicesimo_6346.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/dodicesimo_8289.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:28:12.013730+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 122
     }
 ];
 exports.prefetchedCategories = prefetchedCategories;

package/lib/cjs/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -83,14 +83,23 @@ const CategoryAutocomplete = (inProps) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     };
     // Render
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
-            return value.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({ id: option.id, label: option.name, color: option.color }, getTagProps({ index })), option.id)));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderValue: (value, getItemProps) => {
+            if (multiple) {
+                return value.map((option, index) => {
+                    const _a = getItemProps({ index }), { key } = _a, rest = tslib_1.__rest(_a, ["key"]);
+                    return (0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({ id: option.id, label: option.name, color: option.color }, rest), key);
+                });
+            }
+            return (0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({ id: value.id, label: value.name, color: value.color }, getItemProps));
         }, renderOption: (props, option, { selected, inputValue }) => {
+            const { key } = props, rest = tslib_1.__rest(props, ["key"]);
             const matches = (0, match_1.default)(option.name, inputValue);
             const parts = (0, parse_1.default)(option.name, matches);
-            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, props, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(material_1.Checkbox, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
+            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, rest, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(material_1.Checkbox, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] }), key));
         }, renderInput: (params) => {
-            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })
+                } })));
         } }, rest)));
 };
 exports.default = CategoryAutocomplete;

package/lib/cjs/components/CategoryFollowButton/CategoryFollowButton.js

@@ -8,7 +8,6 @@ const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const Errors_1 = require("../../constants/Errors");
-const lab_1 = require("@mui/lab");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -17,11 +16,11 @@ const PREFIX = 'SCCategoryFollowButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Follow Category Button component. Learn about the available props and the CSS API.
 

package/lib/cjs/components/ChangeCover/ChangeCover.js

@@ -175,12 +175,8 @@ function ChangeCover(inProps) {
                             vertical: 'bottom',
                             horizontal: 'right'
                         } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
+                                            li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }, "ui.changeCover.info.li"),
+                                            ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks }, "ui.changeCover.info.ul")
                                         } }) }))] })) })))] })), openDeleteCoverDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteCoverDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
                     setOpenDeleteCoverDialog(false);
                     setAnchorEl(null);

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js

@@ -9,14 +9,13 @@ const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
-const lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, material_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));