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

package/lib/cjs/shared/LanguageSwitcher/index.d.ts

@@ -1,6 +1,5 @@
+import { SelectProps, TypographyProps } from '@mui/material';
 import { SCLanguageType } from '@selfcommunity/types';
-import { SelectProps } from '@mui/material/Select/Select';
-import { TypographyProps } from '@mui/material/Typography/Typography';
 export interface LanguageSwitcherProps {
     /**
      * Overrides or extends the styles applied to the component.

package/lib/cjs/shared/LanguageSwitcher/index.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 = require("react");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
@@ -16,7 +15,7 @@ const classes = {
     root: `${PREFIX}-root`,
     label: `${PREFIX}-label`
 };
-const Root = (0, styles_1.styled)(material_1.FormControl, {
+const Root = (0, material_1.styled)(material_1.FormControl, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root]

package/lib/cjs/shared/LessonCommentActionsMenu/index.js

@@ -3,10 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
-const Popper_1 = tslib_1.__importDefault(require("@mui/material/Popper"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const CentralProgress_1 = tslib_1.__importDefault(require("../CentralProgress"));
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -28,12 +25,12 @@ const classes = {
     itemText: `${PREFIX}-item-text`,
     subItem: `${PREFIX}-sub-item`
 };
-const PopperRoot = (0, styles_1.styled)(Popper_1.default, {
+const PopperRoot = (0, material_1.styled)(material_1.Popper, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.popperRoot
 })(() => ({}));
-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
@@ -179,7 +176,7 @@ function LessonCommentActionsMenu(props) {
      * Renders comment menu content
      */
     function renderContent() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: !commentObj ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 })) : ((0, jsx_runtime_1.jsxs)(material_1.MenuList, { children: [canModifyContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonCommentActionMenu.edit", defaultMessage: "ui.lessonCommentActionMenu.edit" }), onClick: () => handleAction(EDIT_COMMENT), classes: { root: classes.itemText } })] }))), canDeleteContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === DELETE_COMMENT ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonCommentActionMenu.delete", defaultMessage: "ui.lessonCommentActionMenu.delete" }), onClick: () => handleAction(DELETE_COMMENT), classes: { root: classes.itemText } })] })))] })) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: !commentObj ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 })) : ((0, jsx_runtime_1.jsxs)(material_1.MenuList, { children: [canModifyContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonCommentActionMenu.edit", defaultMessage: "ui.lessonCommentActionMenu.edit" }), onClick: () => handleAction(EDIT_COMMENT), classes: { root: classes.itemText } })] }))), canDeleteContribution() && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.subItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: currentActionLoading === DELETE_COMMENT ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonCommentActionMenu.delete", defaultMessage: "ui.lessonCommentActionMenu.delete" }), onClick: () => handleAction(DELETE_COMMENT), classes: { root: classes.itemText } })] })))] })) }));
     }
     /**
      * Renders component
@@ -192,6 +189,6 @@ function LessonCommentActionsMenu(props) {
                 // @ts-ignore
                 ref: (ref) => {
                     popperRef.current = ref;
-                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
+                }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) }))] })));
 }
 exports.default = LessonCommentActionsMenu;

package/lib/cjs/shared/LessonFilePreview/index.js

@@ -2,10 +2,8 @@
 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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const Media_1 = require("../../constants/Media");
 const PREFIX = 'SCLessonFilePreview';
 const classes = {
@@ -13,7 +11,7 @@ const classes = {
     item: `${PREFIX}-item`,
     title: `${PREFIX}-title`
 };
-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
@@ -24,6 +22,6 @@ function LessonFilePreview(props) {
     /**
      * Renders component
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: media.title && ((0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: media.url, target: "_blank", rel: "noopener noreferrer" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "picture_as_pdf" }), media.title] })) }))) }), media.id));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: media.title && ((0, jsx_runtime_1.jsx)(material_1.Link, Object.assign({ href: media.url, target: "_blank", rel: "noopener noreferrer" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "picture_as_pdf" }), media.title] })) }))) }), media.id));
 }
 exports.default = LessonFilePreview;

package/lib/cjs/shared/Lightbox/BaseLightbox.js

@@ -3,14 +3,13 @@ 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 react_1 = require("react");
 const react_photo_view_1 = require("react-photo-view");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(react_photo_view_1.PhotoSlider, {
+const Root = (0, material_1.styled)(react_photo_view_1.PhotoSlider, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/cjs/shared/Lightbox/Lightbox.js

@@ -2,14 +2,14 @@
 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 BaseLightbox_1 = tslib_1.__importDefault(require("./BaseLightbox"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-lightbox-root`
 };
-const Root = (0, styles_1.styled)(BaseLightbox_1.default, {
+const Root = (0, material_1.styled)(BaseLightbox_1.default, {
     name: constants_1.PREFIX,
     slot: 'LightboxRoot'
 })(() => ({}));

package/lib/cjs/shared/Media/File/DisplayComponent.js

@@ -3,8 +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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Media_1 = require("../../../constants/Media");
@@ -29,7 +27,7 @@ const classes = {
     title: `${constants_1.PREFIX}-title`,
     iconFile: `${constants_1.PREFIX}-icon-file`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DisplayRoot'
 })(({}) => ({}));
@@ -72,10 +70,10 @@ exports.default = (props) => {
         if (o.type) {
             switch (o.type) {
                 case 'doc':
-                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
+                    startAdornment = (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
                     break;
                 default:
-                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
+                    startAdornment = (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
                     break;
             }
         }
@@ -107,7 +105,7 @@ exports.default = (props) => {
         }
         return [
             (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(classes.cover, classes.slide) }, `cover-${id}`),
-            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "zoom_out_map" }) }), `cover-text-${id}`)
+            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "zoom_out_map" }) }), `cover-text-${id}`)
         ];
     };
     const renderCountOverlay = (more) => {
@@ -119,7 +117,7 @@ exports.default = (props) => {
     };
     const handleIndexChange = (0, react_1.useCallback)((index) => {
         if (_medias[index].type === Media_1.MEDIA_TYPE_DOCUMENT) {
-            setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) })));
+            setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "download" }) })));
         }
         else {
             setToolbarButtons(undefined);

package/lib/cjs/shared/Media/File/PreviewComponent.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 material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_sortablejs_1 = require("react-sortablejs");
 const constants_1 = require("./constants");
@@ -17,7 +15,7 @@ const classes = {
     delete: `${constants_1.PREFIX}-delete`,
     title: `${constants_1.PREFIX}-title`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot'
 })(() => ({}));
@@ -46,7 +44,7 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
     }, [onChange, value]);
     const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
-    const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })), media.title && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "picture_as_pdf" }), media.title] })))] }), media.id))), [medias]);
+    const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) })), media.title && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [media.type === Media_1.MEDIA_TYPE_DOCUMENT && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "picture_as_pdf" }), media.title] })))] }), media.id))), [medias]);
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 &&
             (isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements }))) : ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort, scroll: true, animation: 200, scrollSensitivity: 50 }, { children: mediaElements })))) })));
 });

package/lib/cjs/shared/Media/File/TriggerButton.js

@@ -4,9 +4,7 @@ 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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("./constants");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -20,25 +18,25 @@ const classes = {
     triggerDrawerRoot: `${constants_1.PREFIX}-trigger-drawer-root`,
     triggerMenuRoot: `${constants_1.PREFIX}-trigger-menu-root`,
     paper: `${constants_1.PREFIX}-paper`,
-    item: `${constants_1.PREFIX}-item`,
+    item: `${constants_1.PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: constants_1.PREFIX,
     slot: 'TriggerRoot'
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: constants_1.PREFIX,
     slot: 'TriggerDrawerRoot'
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: constants_1.PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const PhotoUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*', capture: 'camera' });
+const GalleryUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
+const DocumentUploadListItemButton = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
+const GalleryUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'image/*' });
+const DocumentUploadMenuItem = (0, asUploadButton_1.default)((0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref }))), { accept: 'application/pdf' });
 exports.default = (_a) => {
     var { className, onAdd = null } = _a, rest = tslib_1.__rest(_a, ["className", "onAdd"]);
     // STATE
@@ -97,5 +95,5 @@ exports.default = (_a) => {
     return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, Object.assign({ destination: {
             url: `${scContext.settings.portal}${api_services_1.Endpoints.ComposerChunkUploadMedia.url()}`,
             method: api_services_1.Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }, { children: isUploading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_file" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: list }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerMenuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: list })))] })));
+        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true }, { children: [(0, jsx_runtime_1.jsx)(MediaChunkUploader_1.default, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }, { children: isUploading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_file" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: list }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.triggerMenuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: list })))] })));
 };

package/lib/cjs/shared/Media/Link/DisplayComponent.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { BoxProps } from '@mui/material';
-import { SCMediaType } from '@selfcommunity/types/src/types';
+import { SCMediaType } from '@selfcommunity/types';
 export interface DisplayComponentProps extends BoxProps {
     /**
      * Medias

package/lib/cjs/shared/Media/Link/DisplayComponent.js

@@ -3,10 +3,8 @@ 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 Media_1 = require("../../../constants/Media");
 const AutoPlayer_1 = tslib_1.__importDefault(require("../../AutoPlayer"));
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("./constants");
 const material_1 = require("@mui/material");
@@ -26,7 +24,7 @@ const classes = {
     snippetTitle: `${constants_1.PREFIX}-snippet-title`,
     snippetDescription: `${constants_1.PREFIX}-snippet-description`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DisplayRoot'
 })(({ theme }) => ({}));
@@ -50,7 +48,7 @@ exports.default = (props) => {
         // 	return renderHtml(media, key);
         // }
         const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
-        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
     };
     /**
      * Render html embed
@@ -58,7 +56,7 @@ exports.default = (props) => {
      * @param key
      */
     const renderHtml = (media, key) => {
-        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
     };
     /**
      * Renders component

package/lib/cjs/shared/Media/Link/LayerComponent.js

@@ -5,9 +5,6 @@ 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 DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("./constants");
 const PreviewComponent_1 = tslib_1.__importDefault(require("./PreviewComponent"));
@@ -19,7 +16,7 @@ const classes = {
     media: `${constants_1.PREFIX}-media`,
     delete: `${constants_1.PREFIX}-delete`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'LayerRoot'
 })(() => ({}));
@@ -32,6 +29,6 @@ const LayerComponent = react_1.default.forwardRef((props, ref) => {
     const handleSave = (0, react_1.useCallback)(() => onSave(value), [value]);
     const handleAdd = (0, react_1.useCallback)((media) => setValue([...value, media]), [value]);
     const handleChange = (0, react_1.useCallback)((medias) => setValue(medias), []);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.layerRoot) }, 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.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.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.jsx)(UrlTextField_1.default, { id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), (0, jsx_runtime_1.jsx)(PreviewComponent_1.default, { onChange: handleChange, value: value })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.layerRoot) }, 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.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.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.jsx)(UrlTextField_1.default, { id: "page", name: "page", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), (0, jsx_runtime_1.jsx)(PreviewComponent_1.default, { onChange: handleChange, value: value })] }))] })));
 });
 exports.default = LayerComponent;

package/lib/cjs/shared/Media/Link/PreviewComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '@mui/material';
-import { SCMediaType } from '@selfcommunity/types/src/index';
+import { SCMediaType } from '@selfcommunity/types';
 export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
     onChange: (value: SCMediaType[]) => void;
     value: SCMediaType[];

package/lib/cjs/shared/Media/Link/PreviewComponent.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 material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_sortablejs_1 = require("react-sortablejs");
 const DisplayComponent_1 = tslib_1.__importDefault(require("./DisplayComponent"));
@@ -18,7 +16,7 @@ const classes = {
     video: `${constants_1.PREFIX}-media-video`,
     delete: `${constants_1.PREFIX}-delete`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PreviewRoot'
 })(() => ({}));
@@ -32,6 +30,6 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) }, { children: [(0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }))] }), media.id))) }))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest, { children: medias.length > 0 && ((0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO }) }, { children: [(0, jsx_runtime_1.jsx)(DisplayComponent_1.default, { medias: [media] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }))] }), media.id))) }))) })));
 });
 exports.default = PreviewComponent;

package/lib/cjs/shared/Media/Link/TriggerButton.js

@@ -3,18 +3,16 @@ 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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const constants_1 = require("./constants");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const classes = {
     triggerRoot: `${constants_1.PREFIX}-trigger-root`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: constants_1.PREFIX,
     slot: 'TriggerRoot'
 })(() => ({}));
 exports.default = (_a) => {
     var { className } = _a, rest = tslib_1.__rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "link" }) })));
 };

package/lib/cjs/shared/Media/Link/UrlTextField/index.d.ts

@@ -1,8 +1,5 @@
+import { BaseTextFieldProps, InputProps as StandardInputProps, FilledInputProps, OutlinedInputProps } from '@mui/material';
 import { SCMediaType } from '@selfcommunity/types';
-import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
-import { InputProps as StandardInputProps } from '@mui/material/Input/Input';
-import { FilledInputProps } from '@mui/material/FilledInput';
-import { OutlinedInputProps } from '@mui/material/OutlinedInput';
 export interface BaseUrlTextFieldProps extends BaseTextFieldProps {
     /**
      * Callback fired when the media is created.

package/lib/cjs/shared/Media/Link/UrlTextField/index.js

@@ -3,14 +3,11 @@ 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 InputAdornment_1 = tslib_1.__importDefault(require("@mui/material/InputAdornment"));
-const IconButton_1 = tslib_1.__importDefault(require("@mui/material/IconButton"));
-const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
+const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const Media_1 = require("../../../../constants/Media");
 const react_intl_1 = require("react-intl");
-const material_1 = require("@mui/material");
 const INITIAL_STATE = {
     url: '',
     urlError: null
@@ -75,6 +72,6 @@ exports.default = (props) => {
     /**
      * Renders url text field
      */
-    return ((0, jsx_runtime_1.jsx)("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.endAdornment) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: urlError === null && url !== '' }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", size: 20 })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })) })) })) }))) })) }) })) })));
+    return ((0, jsx_runtime_1.jsx)("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
+                (urlError && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: Object.assign(Object.assign({}, rest.InputProps), { endAdornment: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: url === '' && ((_a = rest.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment) ? ((_b = rest.InputProps) === null || _b === void 0 ? void 0 : _b.endAdornment) : ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: urlError === null && url !== '' }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "primary", size: 20 })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })) })) })) }))) })) }) })) })));
 };

package/lib/cjs/shared/Media/Share/DisplayComponent.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const FeedObject_1 = tslib_1.__importDefault(require("../../../components/FeedObject"));
 const feedObject_1 = require("../../../types/feedObject");
 const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
 const filter_1 = tslib_1.__importDefault(require("./filter"));
 const constants_1 = require("./constants");
 const Media_1 = require("../../../constants/Media");
@@ -19,7 +18,7 @@ const classes = {
     sharePreview: `${constants_1.PREFIX}-share-preview`,
     sharePlaceholder: `${constants_1.PREFIX}-share-placeholder`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'DisplayRoot'
 })(({ theme }) => ({}));
@@ -30,5 +29,5 @@ exports.default = (_a) => {
     if (_medias.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => ((0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === Media_1.MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_SHARED_EVENT) ? ((0, jsx_runtime_1.jsx)(Event_1.default, { event: media.embed.metadata, template: event_1.SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })) : ((0, jsx_runtime_1.jsx)(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST })) }), i))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === Media_1.MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === Media_1.MEDIA_EMBED_SC_SHARED_EVENT) ? ((0, jsx_runtime_1.jsx)(Event_1.default, { event: media.embed.metadata, template: event_1.SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) })) : ((0, jsx_runtime_1.jsx)(FeedObject_1.default, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: feedObject_1.SCFeedObjectTemplateType.SHARE, cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST })) }), i))) })));
 };

package/lib/cjs/shared/NewChip/NewChip.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_intl_1 = require("react-intl");
 const system_1 = require("@mui/system");
@@ -11,7 +10,7 @@ const PREFIX = 'SCNotificationNewChip';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Chip, {
+const Root = (0, material_1.styled)(material_1.Chip, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root]

package/lib/cjs/shared/NotificationItem/NotificationItem.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 classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Widget_1 = tslib_1.__importDefault(require("../../components/Widget"));
@@ -24,7 +23,7 @@ const classes = {
     new: `${PREFIX}-new`,
     newChip: `${PREFIX}-new-chip`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/shared/PasswordTextField/index.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const PREFIX = 'SCPasswordTextField';
-const Root = (0, styles_1.styled)(material_1.TextField, {
+const Root = (0, material_1.styled)(material_1.TextField, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -22,7 +19,7 @@ function PasswordTextField(props) {
     };
     // RENDER
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { InputProps: {
-            endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, { children: showPassword ? (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "visibility_off" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "visibility" }) })) }))] }))
+            endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, { children: showPassword ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }) })) }))] }))
         } })));
 }
 exports.default = PasswordTextField;

package/lib/cjs/shared/PhoneTextField/index.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 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const libphonenumber_js_1 = require("libphonenumber-js");
@@ -14,7 +13,7 @@ const messages = (0, react_intl_1.defineMessages)({
     }
 });
 const PREFIX = 'SCPhoneTextField';
-const Root = (0, styles_1.styled)(material_1.TextField, {
+const Root = (0, material_1.styled)(material_1.TextField, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/shared/ProgressBar/index.d.ts

@@ -1,4 +1,4 @@
-import { LinearProgressProps } from '@mui/material/LinearProgress';
+import { LinearProgressProps } from '@mui/material';
 import React from 'react';
 export interface ProgressBarProps extends LinearProgressProps {
     /**