@selfcommunity/react-ui 0.8.0-live.40 → 0.8.0-live.41

package/lib/cjs/shared/InfiniteScroll/stories/ScrolleableTop.js

@@ -19,9 +19,9 @@ function ScrolleableTop() {
             setItems(items.concat(Array.from({ length: 20 })));
         }, 500);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll on top" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", { id: "scrollableDiv", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll on top" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
                     height: 300,
                     overflow: 'auto'
-                }, children: (0, jsx_runtime_1.jsx)(index_1.default, { dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px', children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["div - #", index] }, index))) }) })] }));
+                } }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, previous: fetchMoreData, hasMorePrevious: true, loaderPrevious: (0, jsx_runtime_1.jsx)("h4", { children: "Loading prev..." }), scrollableTarget: "scrollableDiv", scrollThreshold: '0px' }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
 }
 exports.default = ScrolleableTop;

package/lib/cjs/shared/InfiniteScroll/stories/WindowInfiniteScrollComponent.js

@@ -25,6 +25,6 @@ function WindowInfiniteScrollComponent() {
             setData(newData);
         }, 500);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(index_1.default, { hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: (0, jsx_runtime_1.jsx)("h1", { children: "Loading next..." }), loaderPrevious: (0, jsx_runtime_1.jsx)("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1, children: data.map((e) => ((0, jsx_runtime_1.jsxs)("div", { style: { height: 200, margin: 4, border: '1px solid hotpink' }, children: ["#", e, " row"] }, e))) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: (0, jsx_runtime_1.jsx)("h1", { children: "Loading next..." }), loaderPrevious: (0, jsx_runtime_1.jsx)("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1 }, { children: data.map((e) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: 200, margin: 4, border: '1px solid hotpink' } }, { children: ["#", e, " row"] }), e))) })) }));
 }
 exports.default = WindowInfiniteScrollComponent;

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

@@ -77,6 +77,6 @@ function LanguageSwitcher(inProps) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps, { children: languages.map((l) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: l, children: minimized ? l.toUpperCase() : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` }) }, l))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.label }, LabelComponentProps, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.languageSwitcher.selectLanguage", defaultMessage: "ui.languageSwitcher.selectLanguage" }) })), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: updating, labelId: "language", id: "language", value: intl.locale, onChange: handleChange, size: "small" }, SelectComponentProps, { children: languages.map((l) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: l }, { children: minimized ? l.toUpperCase() : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.languageSwitcher.language.${l}`, defaultMessage: `ui.languageSwitcher.language.${l}` }) }), l))) }))] })));
 }
 exports.default = LanguageSwitcher;

package/lib/cjs/shared/MarkRead/MarkRead.js

@@ -36,5 +36,5 @@ const MarkRead = (props) => {
     return null;
 };
 exports.default = (props) => {
-    return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, { once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT, children: (0, jsx_runtime_1.jsx)(MarkRead, Object.assign({}, props)) }));
+    return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ once: true, offset: LazyLoad_1.MIN_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(MarkRead, Object.assign({}, props)) })));
 };

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

@@ -72,34 +72,34 @@ exports.default = (props) => {
         if (o.type) {
             switch (o.type) {
                 case 'doc':
-                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, { className: classes.iconFile, children: "picture_as_pdf" });
+                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
                     break;
                 default:
-                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, { className: classes.iconFile, children: "insert_drive_file" });
+                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
                     break;
             }
         }
-        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", { className: classes.title, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "subtitle2", children: [startAdornment, " ", o.title] }) })) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
     };
     const renderOne = () => {
         const overlay = _medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
         const isGif = _medias[0].image_mimetype ? _medias[0].image_mimetype.includes('image/gif') : false;
         const isLandscape = _medias[0].image_height < _medias[0].image_width;
-        return ((0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})), children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, ref: ref, xs: 12, classes: {
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
                     root: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: _medias.length > 1 }))
-                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})), children: [overlay, renderTitle(_medias[0])] }) }));
+                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(_medias[0])] })) })));
     };
     const renderTwo = () => {
         const overlay = _medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
         const conditionalRender = [3, 4].includes(_medias.length) || (_medias.length > +maxVisible && [3, 4].includes(+maxVisible));
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` }, children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` }, children: [overlay, renderTitle(_medias[1])] })] }));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } }, { children: [overlay, renderTitle(_medias[1])] }))] })));
     };
     const renderThree = () => {
         const conditionalRender = _medias.length == 4 || (_medias.length > +maxVisible && +maxVisible == 4);
         const overlay = !maxVisible || maxVisible > 5 || (_medias.length > maxVisible && [4, 5].includes(+maxVisible))
             ? renderCountOverlay(true)
             : renderOverlay(conditionalRender ? 3 : 4);
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` }, children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` }, children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` }, children: [overlay, renderTitle(_medias[3])] })] }));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } }, { children: [overlay, renderTitle(_medias[3])] }))] })));
     };
     const renderOverlay = (id) => {
         if (!gallery) {
@@ -107,19 +107,19 @@ 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", { 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)(Icon_1.default, { children: "zoom_out_map" }) }), `cover-text-${id}`)
         ];
     };
     const renderCountOverlay = (more) => {
         const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
         return [
             more && (0, jsx_runtime_1.jsx)("div", { className: classes.cover }, "count"),
-            more && ((0, jsx_runtime_1.jsx)("div", { className: classes.coverText, style: { fontSize: '200%' }, children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }, "count-sub"))
+            more && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }), "count-sub"))
         ];
     };
     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, { 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)(Icon_1.default, { children: "download" }) })));
         }
         else {
             setToolbarButtons(undefined);
@@ -137,5 +137,5 @@ exports.default = (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, { className: (0, classnames_1.default)(classes.displayRoot, className), children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
 };

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

@@ -46,9 +46,9 @@ 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, { 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, { 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, { 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)(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]);
     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, { id: SORTABLE_ID, children: mediaElements }) :
-            (0, jsx_runtime_1.jsx)(react_sortablejs_1.ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort, children: mediaElements })) }));
+            (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({ id: SORTABLE_ID, list: medias, setList: handleSort }, { children: mediaElements }))) }));
 });
 exports.default = PreviewComponent;

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

@@ -82,20 +82,20 @@ exports.default = (_a) => {
     const list = (0, react_1.useMemo)(() => {
         if (isMobile) {
             return [
-                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(PhotoUploadListItemButton, { inputFieldName: "image", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) }) }, "photo"),
-                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(GalleryUploadListItemButton, { inputFieldName: "image", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }) }, "gallery"),
-                (0, jsx_runtime_1.jsx)(material_1.ListItem, { className: classes.item, children: (0, jsx_runtime_1.jsx)(DocumentUploadListItemButton, { inputFieldName: "document", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }) }, "document")
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(PhotoUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) })) }), "photo"),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(GalleryUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) })) }), "gallery"),
+                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(DocumentUploadListItemButton, Object.assign({ inputFieldName: "document" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) })) }), "document")
             ];
         }
         else {
             return [
-                (0, jsx_runtime_1.jsx)(GalleryUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "image", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }, "gallery"),
-                (0, jsx_runtime_1.jsx)(DocumentUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "document", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }, "document")
+                (0, jsx_runtime_1.jsx)(GalleryUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "image" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }), "gallery"),
+                (0, jsx_runtime_1.jsx)(DocumentUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "document" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }), "document")
             ];
         }
     }, [isMobile, handleFilterByMime, handleSuccess, handleProgress, handleError]);
-    return ((0, jsx_runtime_1.jsxs)(chunked_uploady_1.default, { destination: {
+    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, { 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, { 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)(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 })))] })));
 };

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

@@ -53,7 +53,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, { 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, { className: classes.snippet, children: [(0, jsx_runtime_1.jsx)("b", { className: classes.snippetTitle, children: media.embed.metadata.title }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", { className: classes.snippetDescription, children: media.embed.metadata.description }), (0, jsx_runtime_1.jsx)("a", { 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)(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));
     };
     /**
      * Render html embed
@@ -61,7 +61,7 @@ exports.default = (props) => {
      * @param key
      */
     const renderHtml = (media, key) => {
-        return ((0, jsx_runtime_1.jsxs)(Box_1.default, { 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", { 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)(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));
     };
     /**
      * Renders component
@@ -71,7 +71,7 @@ exports.default = (props) => {
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
             if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
-                return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, { className: classes.displayVideo, placeholder: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT, children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }, i));
+                return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ className: classes.displayVideo, placeholder: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
             }
             return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderPreview(l, i) }, i);
         }) })));

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

@@ -32,6 +32,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, { className: classes.title, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { 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, { 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, { 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)(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 })] }))] }));
 });
 exports.default = LayerComponent;

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

@@ -32,6 +32,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, { list: medias, setList: handleSort, children: medias.map((media) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { 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, { 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)(Icon_1.default, { children: "delete" }) }))] }), media.id))) }))) })));
 });
 exports.default = PreviewComponent;

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

@@ -16,5 +16,5 @@ const Root = (0, styles_1.styled)(material_1.IconButton, {
 })(() => ({}));
 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)(Icon_1.default, { children: "link" }) })));
 };

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

@@ -74,8 +74,8 @@ exports.default = (props) => {
     /**
      * Renders url text field
      */
-    return ((0, jsx_runtime_1.jsx)("form", { 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 ||
+    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: {
-                endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Fade, { in: urlError === null && url !== '', children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { 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" }) }) }) }))
-            } })) }));
+                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" }) })) })) })))
+            } })) })));
 };

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

@@ -30,5 +30,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, { 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)(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))) })));
 };

package/lib/cjs/shared/MetadataField/MetadataField.js

@@ -25,7 +25,7 @@ const MetadataField = (props) => {
             component = (0, jsx_runtime_1.jsx)(PhoneTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.ENUM:
-            component = ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true, children: metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option, children: option }, option))) })));
+            component = ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }, { children: metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: option }), option))) })));
             break;
         case types_1.SCMetadataTypeFieldType.CHECKBOX:
             const { value } = rest;

package/lib/cjs/shared/NotificationItem/NotificationItem.js

@@ -72,6 +72,6 @@ function NotificationItem(inProps) {
     // RENDER
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id }, rest, { className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`, {
             [classes.new]: isNew
-        }), elevation: elevation, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.header, children: [image && (0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.image), children: image }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.title, children: [primary && ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.primary, children: [template === notification_1.SCNotificationObjectTemplateType.DETAIL && isNew && (0, jsx_runtime_1.jsx)(NewChip_1.default, { className: classes.newChip }), disableTypography ? primary : (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({}, primaryTypographyProps, { children: primary }))] })), secondary && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.secondary, children: disableTypography ? secondary : (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({}, secondaryTypographyProps, { children: secondary })) }))] })] }), actions && (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.actions, children: actions }), footer && (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.footer, children: footer })] })));
+        }), elevation: elevation }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { children: [image && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.image) }, { children: image })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title }, { children: [primary && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.primary }, { children: [template === notification_1.SCNotificationObjectTemplateType.DETAIL && isNew && (0, jsx_runtime_1.jsx)(NewChip_1.default, { className: classes.newChip }), disableTypography ? primary : (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({}, primaryTypographyProps, { children: primary }))] }))), secondary && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.secondary }, { children: disableTypography ? secondary : (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({}, secondaryTypographyProps, { children: secondary })) })))] }))] })), actions && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: actions })), footer && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.footer }, { children: footer }))] })));
 }
 exports.default = NotificationItem;

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

@@ -22,7 +22,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, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "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)(Icon_1.default, { children: "visibility_off" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "visibility" }) })) }))] }))
         } })));
 }
 exports.default = PasswordTextField;

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

@@ -20,6 +20,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 })(() => ({}));
 function ProgressBar(props) {
     const { className, value, loadingMessage = null, hideBar = false } = props, rest = tslib_1.__rest(props, ["className", "value", "loadingMessage", "hideBar"]);
-    return ((0, jsx_runtime_1.jsxs)(Root, { className: (0, classnames_1.default)(classes.root, className), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.message, children: loadingMessage }), !hideBar && (0, jsx_runtime_1.jsx)(LinearProgress_1.default, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.progress, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", color: "secondary", children: `${Math.round(value)}%` }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.message }, { children: loadingMessage })), !hideBar && (0, jsx_runtime_1.jsx)(LinearProgress_1.default, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.progress }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", color: "secondary" }, { children: `${Math.round(value)}%` })) }))] })));
 }
 exports.default = ProgressBar;

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

@@ -355,6 +355,6 @@ exports.useStickyBox = useStickyBox;
  */
 const StickyBox = ({ offsetTop, offsetBottom, bottom, children, className, style }) => {
     const ref = (0, exports.useStickyBox)({ offsetTop, offsetBottom, bottom });
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, ref: ref, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className, style: style, ref: ref }, { children: children })));
 };
 exports.default = StickyBox;

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

@@ -69,7 +69,7 @@ var TagsComponentType;
 (function (TagsComponentType) {
     TagsComponentType["LIST"] = "list";
     TagsComponentType["POPPER"] = "popper";
-})(TagsComponentType || (exports.TagsComponentType = TagsComponentType = {}));
+})(TagsComponentType = exports.TagsComponentType || (exports.TagsComponentType = {}));
 function Tags(props) {
     // PROPS
     const { tags = [], title = null, type = TagsComponentType.POPPER, onOpen = null, onClose = null, onClickTag = null, TagChipProps = {} } = props, rest = tslib_1.__rest(props, ["tags", "title", "type", "onOpen", "onClose", "onClickTag", "TagChipProps"]);
@@ -96,7 +96,7 @@ function Tags(props) {
      * Renders tag title
      */
     function renderTitle() {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { padding: 1, fontWeight: 600 }, children: title }), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { padding: 1, fontWeight: 600 } }, { children: title })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })) }));
     }
     /**
      * Returns focus to the button when we transitioned from !open -> open
@@ -111,14 +111,14 @@ function Tags(props) {
     /**
      * Renders component
      */
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tags.length && ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: type === TagsComponentType.POPPER ? ((0, jsx_runtime_1.jsxs)(TagsPopperRoot, Object.assign({}, rest, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true", children: "label" }), (0, jsx_runtime_1.jsx)(TagsPopper, { open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tags.length && ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: type === TagsComponentType.POPPER ? ((0, jsx_runtime_1.jsxs)(TagsPopperRoot, Object.assign({}, rest, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ ref: popperRef, fontSize: "small", onClick: handleToggle, "aria-haspopup": "true" }, { children: "label" })), (0, jsx_runtime_1.jsx)(TagsPopper, Object.assign({ open: open, anchorEl: popperRef.current, transition: true, placement: "bottom-start", modifiers: [
                             {
                                 name: 'preventOverflow',
                                 enabled: true
                             }
-                        ], children: (_a) => {
+                        ] }, { children: (_a) => {
                             var { TransitionProps, placement } = _a, rest = tslib_1.__rest(_a, ["TransitionProps", "placement"]);
-                            return ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }, children: (0, jsx_runtime_1.jsx)(Paper_1.default, { variant: 'outlined', className: classes.paper, children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 2 }, rest, { children: tags.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) }) }) })));
-                        } })] }))) : ((0, jsx_runtime_1.jsxs)(ListRoot, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, { spacing: 1, direction: rest.direction ? rest.direction : 'column', children: tags.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) })] })) })) }));
+                            return ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: (0, jsx_runtime_1.jsx)(Paper_1.default, Object.assign({ variant: 'outlined', className: classes.paper }, { children: (0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, Object.assign({ onClickAway: handleClose }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 2 }, rest, { children: tags.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] }) })) })) })));
+                        } }))] }))) : ((0, jsx_runtime_1.jsxs)(ListRoot, { children: [renderTitle(), (0, jsx_runtime_1.jsx)(StackList, Object.assign({ spacing: 1, direction: rest.direction ? rest.direction : 'column' }, { children: tags.map((tag) => ((0, jsx_runtime_1.jsx)(ItemList, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: tag, onClick: onClickTag }, TagChipProps)) }, tag.id))) }))] })) })) }));
 }
 exports.default = Tags;

package/lib/cjs/shared/UserDeletedSnackBar/UserDeletedSnackBar.js

@@ -26,6 +26,6 @@ function UserDeletedSnackBar(inProps) {
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root), open: open, autoHideDuration: 3000, onClose: handleClose, anchorOrigin: {
             vertical: 'top',
             horizontal: 'center'
-        } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", onClose: handleClose, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }) }) })));
+        } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "info", onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }) })) })));
 }
 exports.default = UserDeletedSnackBar;

package/lib/cjs/shared/VirtualizedScroller/VirtualScrollerChild.js

@@ -26,6 +26,6 @@ const VirtualScrollChild = ({ children, onHeightChange }) => {
             }
         }
     });
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: children });
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, { children: children }));
 };
 exports.default = VirtualScrollChild;

package/lib/cjs/types/broadcastMessage.js

@@ -9,4 +9,4 @@ var SCBroadcastMessageTemplateType;
     SCBroadcastMessageTemplateType["SNIPPET"] = "snippet";
     SCBroadcastMessageTemplateType["DETAIL"] = "detail";
     SCBroadcastMessageTemplateType["TOAST"] = "toast";
-})(SCBroadcastMessageTemplateType || (exports.SCBroadcastMessageTemplateType = SCBroadcastMessageTemplateType = {}));
+})(SCBroadcastMessageTemplateType = exports.SCBroadcastMessageTemplateType || (exports.SCBroadcastMessageTemplateType = {}));

package/lib/cjs/types/comments.js

@@ -10,4 +10,4 @@ var SCCommentsOrderBy;
     SCCommentsOrderBy["ADDED_AT_ASC"] = "added_at";
     SCCommentsOrderBy["CONNECTION_DESC"] = "-connection";
     SCCommentsOrderBy["CONNECTION_ASC"] = "connection";
-})(SCCommentsOrderBy || (exports.SCCommentsOrderBy = SCCommentsOrderBy = {}));
+})(SCCommentsOrderBy = exports.SCCommentsOrderBy || (exports.SCCommentsOrderBy = {}));

package/lib/cjs/types/event.js

@@ -6,4 +6,4 @@ var SCEventTemplateType;
     SCEventTemplateType["DETAIL"] = "detail";
     SCEventTemplateType["SNIPPET"] = "snippet";
     SCEventTemplateType["PREVIEW"] = "preview";
-})(SCEventTemplateType || (exports.SCEventTemplateType = SCEventTemplateType = {}));
+})(SCEventTemplateType = exports.SCEventTemplateType || (exports.SCEventTemplateType = {}));

package/lib/cjs/types/feedObject.js

@@ -11,7 +11,7 @@ var SCFeedObjectTemplateType;
     SCFeedObjectTemplateType["DETAIL"] = "detail";
     SCFeedObjectTemplateType["SEARCH"] = "search";
     SCFeedObjectTemplateType["SHARE"] = "share";
-})(SCFeedObjectTemplateType || (exports.SCFeedObjectTemplateType = SCFeedObjectTemplateType = {}));
+})(SCFeedObjectTemplateType = exports.SCFeedObjectTemplateType || (exports.SCFeedObjectTemplateType = {}));
 /**
  * FeedObject activities type
  */
@@ -21,4 +21,4 @@ var SCFeedObjectActivitiesType;
     SCFeedObjectActivitiesType["RECENT_COMMENTS"] = "recent_comments";
     SCFeedObjectActivitiesType["FIRST_COMMENTS"] = "first_comments";
     SCFeedObjectActivitiesType["CONNECTIONS_COMMENTS"] = "connections_comments";
-})(SCFeedObjectActivitiesType || (exports.SCFeedObjectActivitiesType = SCFeedObjectActivitiesType = {}));
+})(SCFeedObjectActivitiesType = exports.SCFeedObjectActivitiesType || (exports.SCFeedObjectActivitiesType = {}));

package/lib/cjs/types/notification.js

@@ -9,4 +9,4 @@ var SCNotificationObjectTemplateType;
     SCNotificationObjectTemplateType["SNIPPET"] = "snippet";
     SCNotificationObjectTemplateType["DETAIL"] = "detail";
     SCNotificationObjectTemplateType["TOAST"] = "toast";
-})(SCNotificationObjectTemplateType || (exports.SCNotificationObjectTemplateType = SCNotificationObjectTemplateType = {}));
+})(SCNotificationObjectTemplateType = exports.SCNotificationObjectTemplateType || (exports.SCNotificationObjectTemplateType = {}));

package/lib/cjs/types/user.js

@@ -17,7 +17,7 @@ var SCUserProfileFields;
     SCUserProfileFields["WEBSITE"] = "website";
     SCUserProfileFields["TAGS"] = "tags";
     SCUserProfileFields["SOCIAL_ASSOCIATIONS"] = "social_associations";
-})(SCUserProfileFields || (exports.SCUserProfileFields = SCUserProfileFields = {}));
+})(SCUserProfileFields = exports.SCUserProfileFields || (exports.SCUserProfileFields = {}));
 /**
  * User Profile Settings
  */
@@ -26,7 +26,7 @@ var SCUserProfileSettings;
     SCUserProfileSettings["NOTIFICATION"] = "notification";
     SCUserProfileSettings["INTERACTION"] = "interaction";
     SCUserProfileSettings["PRIVATE_MESSAGE"] = "private_message";
-})(SCUserProfileSettings || (exports.SCUserProfileSettings = SCUserProfileSettings = {}));
+})(SCUserProfileSettings = exports.SCUserProfileSettings || (exports.SCUserProfileSettings = {}));
 /**
  * User Profile Settings
  */
@@ -36,4 +36,4 @@ var SCUserSocialAssociations;
     SCUserSocialAssociations["FACEBOOK"] = "facebook";
     SCUserSocialAssociations["TWITTER"] = "twitter";
     SCUserSocialAssociations["LINKEDIN"] = "linkedin";
-})(SCUserSocialAssociations || (exports.SCUserSocialAssociations = SCUserSocialAssociations = {}));
+})(SCUserSocialAssociations = exports.SCUserSocialAssociations || (exports.SCUserSocialAssociations = {}));

package/lib/esm/components/AccountChangeMailValidation/AccountChangeMailValidation.js

@@ -83,5 +83,5 @@ export default function AccountChangeMailValidation(inProps) {
         return null;
     }
     // RENDER
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, { severity: "success", className: classes.success, children: [typeof succeed === 'string' ? (succeed) : (_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] })) : error ? (_jsxs(Alert, { severity: "error", className: classes.error, children: [_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] })) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? (succeed) : (_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
 }

package/lib/esm/components/AccountDataPortability/AccountDataPortability.js

@@ -151,18 +151,18 @@ export default function AccountDataPortability(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, { variant: "h6", children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } }) }), _jsx(Typography, { variant: "body2", component: "div", children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.title", defaultMessage: "ui.accountDataPortability.title", values: { username: capitalize(scUserContext.user.username) } }) })), _jsx(Typography, Object.assign({ variant: "body2", component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.info", defaultMessage: "ui.accountDataPortability.info", values: {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         li: (chunks) => _jsx("li", { children: chunks }),
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         ul: (chunks) => _jsx("ul", { children: chunks })
-                    } }) }), _jsx(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                    } }) })), _jsx(LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
                     (dataPortability &&
                         (dataPortability.computing ||
-                            (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: _jsx(Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile, children: (dataPortability && dataPortability.computing) || loading ? (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) }), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: _jsx(Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile, children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) })), _jsx("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Typography, { className: classes.generationInfo, variant: "body2", children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                            (dataPortability.requested_at && differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: _jsx(Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (_jsx(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: _jsx(Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), _jsx("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && (_jsx(Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
                         date: _jsx(FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
                         time: _jsx(FormattedTime, { value: dataPortability.requested_at })
-                    } }) }))] })));
+                    } }) })))] })));
 }

package/lib/esm/components/AccountDataPortabilityButton/AccountDataPortabilityButton.js

@@ -71,5 +71,5 @@ export default function AccountDataPortabilityButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" }) })), open && (_jsx(DialogRoot, { title: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {}, children: _jsx(AccountDataPortability, {}) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.buttonLabel", defaultMessage: "ui.accountDataPortabilityButton.buttonLabel" }) })), open && (_jsx(DialogRoot, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.accountDataPortabilityButton.dialogTitle", defaultMessage: "ui.accountDataPortabilityButton.dialogTitle", values: { username: scUserContext.user.username } }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: _jsx(AccountDataPortability, {}) })))] }));
 }

package/lib/esm/components/AccountDelete/AccountDelete.js

@@ -108,7 +108,7 @@ export default function AccountDelete(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, { className: classes.message, component: Box, children: _jsx(FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.message, component: Box }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.message", defaultMessage: "ui.accountDelete.message", values: {
                         communityName,
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
@@ -116,10 +116,10 @@ export default function AccountDelete(inProps) {
                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                         // @ts-ignore
                         ul: (chunks) => _jsx("ul", { children: chunks })
-                    } }) }), _jsxs(Typography, { className: classes.confirm, component: Box, children: [_jsx(FormattedMessage, { id: "ui.accountDelete.confirmMessage", defaultMessage: "ui.accountDelete.confirmMessage", values: {
+                    } }) })), _jsxs(Typography, Object.assign({ className: classes.confirm, component: Box }, { children: [_jsx(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) => _jsx("b", { children: chunks })
-                        } }), _jsx(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] }), error && _jsx(Typography, { color: "error", children: error }), _jsx(LoadingButton, { className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete, children: _jsx(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) })] })));
+                        } }), _jsx(TextField, { name: "confirm", value: confirm, onChange: handleChange, autoComplete: "off", size: "small" })] })), error && _jsx(Typography, Object.assign({ color: "error" }, { children: error })), _jsx(LoadingButton, Object.assign({ className: classes.button, size: "small", disabled: isDeleting || confirm !== scUserContext.user.username, variant: "outlined", onClick: handleDelete }, { children: _jsx(FormattedMessage, { id: "ui.accountDelete.buttonLabel", defaultMessage: "ui.accountDelete.buttonLabel" }) }))] })));
 }

package/lib/esm/components/AccountDeleteButton/AccountDeleteButton.js

@@ -75,5 +75,5 @@ export default function AccountDeleteButton(inProps) {
     if (!scUserContext.user) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" }) })), open && (_jsx(DialogRoot, { title: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {}, children: _jsx(AccountDelete, { onDeleteAccount: handleDelete }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleOpen, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.buttonLabel", defaultMessage: "ui.accountDeleteButton.buttonLabel" }) })), open && (_jsx(DialogRoot, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.accountDeleteButton.dialogTitle", defaultMessage: "ui.accountDeleteButton.dialogTitle" }), onClose: handleClose, open: open, DialogContentProps: {} }, { children: _jsx(AccountDelete, { onDeleteAccount: handleDelete }) })))] }));
 }