@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.1

package/lib/esm/shared/Media/File/Lightbox/index.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { styled } from '@mui/material/styles';
 import BaseLightbox from '../../../Lightbox';
 import { PREFIX } from '../constants';
@@ -22,13 +23,12 @@ export default function Lightbox(props) {
     }, []);
     const toolbarRender = useCallback((props) => {
         if (medias[props.index].type === MEDIA_TYPE_DOCUMENT) {
-            return React.createElement(IconButton, { component: Link, to: medias[props.index].url, target: "_blank", color: "inherit" },
-                React.createElement(Icon, null, "download"));
+            return _jsx(IconButton, Object.assign({ component: Link, to: medias[props.index].url, target: "_blank", color: "inherit" }, { children: _jsx(Icon, { children: "download" }) }));
         }
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }, [medias]);
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
+    return (_jsx(Root, Object.assign({}, rest, { className: classes.root, images: medias.map(mediaToDataTypeMap), visible: index !== -1, onClose: onClose, index: index, onIndexChange: onIndexChange, toolbarRender: toolbarRender })));
 }

package/lib/esm/shared/Media/File/PreviewComponent.d.ts

@@ -5,5 +5,5 @@ export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChang
     onChange: (value: SCMediaType[]) => void;
     value: SCMediaType[];
 }
-declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "value"> & React.RefAttributes<unknown>>;
+declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "id" | "role" | "className" | "style" | "classes" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "value"> & React.RefAttributes<unknown>>;
 export default PreviewComponent;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { Box, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -43,14 +44,9 @@ const PreviewComponent = React.forwardRef((props, ref) => {
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
     // RENDER
-    const mediaElements = useMemo(() => medias.map((media) => (React.createElement(Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
-        React.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
-            React.createElement(Icon, null, "delete")),
-        media.title && React.createElement(Typography, { className: classes.title },
-            media.type === MEDIA_TYPE_DOCUMENT && React.createElement(Icon, null, "picture_as_pdf"),
-            media.title)))), [medias]);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (isMobile ?
-        React.createElement(Box, { id: SORTABLE_ID }, mediaElements) :
-        React.createElement(ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, mediaElements)));
+    const mediaElements = useMemo(() => medias.map((media) => (_jsxs(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: [_jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })), media.title && _jsxs(Typography, Object.assign({ className: classes.title }, { children: [media.type === MEDIA_TYPE_DOCUMENT && _jsx(Icon, { children: "picture_as_pdf" }), media.title] }))] }), media.id))), [medias]);
+    return _jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (isMobile ?
+            _jsx(Box, Object.assign({ id: SORTABLE_ID }, { children: mediaElements })) :
+            _jsx(ReactSortable, Object.assign({ id: SORTABLE_ID, list: medias, setList: handleSort }, { children: mediaElements }))) }));
 });
 export default PreviewComponent;

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { CircularProgress, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, } from '@mui/material';
 import Icon from '@mui/material/Icon';
 import { PREFIX } from './constants';
@@ -31,11 +32,11 @@ const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'TriggerMenuRoot'
 })(() => ({}));
-const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
-const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => (React.createElement(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
-const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => (React.createElement(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
-const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => (React.createElement(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const PhotoUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*', capture: 'camera' });
+const GalleryUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadListItemButton = asUploadButton(forwardRef((props, ref) => (_jsx(ListItemButton, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
+const GalleryUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'image/*' });
+const DocumentUploadMenuItem = asUploadButton(forwardRef((props, ref) => (_jsx(MenuItem, Object.assign({}, props, { "aria-label": "upload", ref: ref })))), { accept: 'application/pdf' });
 export default (_a) => {
     var { className, onAdd = null } = _a, rest = __rest(_a, ["className", "onAdd"]);
     // STATE
@@ -79,32 +80,20 @@ export default (_a) => {
     const list = useMemo(() => {
         if (isMobile) {
             return [
-                React.createElement(ListItem, { className: classes.item, key: "photo" },
-                    React.createElement(PhotoUploadListItemButton, { inputFieldName: "image" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }))),
-                React.createElement(ListItem, { className: classes.item, key: "gallery" },
-                    React.createElement(GalleryUploadListItemButton, { inputFieldName: "image" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }))),
-                React.createElement(ListItem, { className: classes.item, key: "document" },
-                    React.createElement(DocumentUploadListItemButton, { inputFieldName: "document" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" })))
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(PhotoUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.photo", defaultMessage: "ui.composer.media.file.photo" }) })) }), "photo"),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(GalleryUploadListItemButton, Object.assign({ inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) })) }), "gallery"),
+                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(DocumentUploadListItemButton, Object.assign({ inputFieldName: "document" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) })) }), "document")
             ];
         }
         else {
             return [
-                React.createElement(GalleryUploadMenuItem, { extraProps: { className: classes.item }, inputFieldName: "image", key: "gallery" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" })),
-                React.createElement(DocumentUploadMenuItem, { extraProps: { className: classes.item }, key: "document", inputFieldName: "document" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }))
+                _jsx(GalleryUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "image" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.gallery", defaultMessage: "ui.composer.media.file.gallery" }) }), "gallery"),
+                _jsx(DocumentUploadMenuItem, Object.assign({ extraProps: { className: classes.item }, inputFieldName: "document" }, { children: _jsx(FormattedMessage, { id: "ui.composer.media.file.document", defaultMessage: "ui.composer.media.file.document" }) }), "document")
             ];
         }
     }, [isMobile, handleFilterByMime, handleSuccess, handleProgress, handleError]);
-    return (React.createElement(ChunkedUploady, { destination: {
+    return (_jsxs(ChunkedUploady, Object.assign({ destination: {
             url: `${scContext.settings.portal}${Endpoints.ComposerChunkUploadMedia.url()}`,
             method: Endpoints.ComposerChunkUploadMedia.method
-        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true },
-        React.createElement(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-        React.createElement(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }), isUploading ? React.createElement(CircularProgress, { size: 20 }) : React.createElement(Icon, null, "photo_file")),
-        isMobile ? (React.createElement(SwipeableDrawerRoot, { onClick: () => setAnchorEl(null), className: classes.triggerDrawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true },
-            React.createElement(List, null, list))) : (React.createElement(MenuRoot, { onClick: () => setAnchorEl(null), className: classes.triggerMenuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, list))));
+        }, fileFilter: handleFilterByMime, chunkSize: 204800, multiple: true }, { children: [_jsx(MediaChunkUploader, { onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }), _jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add media", disabled: isUploading, onClick: handleOpen }, { children: isUploading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Icon, { children: "photo_file" }) })), isMobile ? (_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: _jsx(List, { children: list }) }))) : (_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/esm/shared/Media/File/asUploadButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from "react";
 import { markAsUploadOptionsComponent, useUploadyContext } from "@rpldy/shared-ui";
 const asUploadButton = (Component, InputProps) => {
     const AsUploadButton = (props, ref) => {
@@ -20,7 +21,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return React.createElement(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
+        return _jsx(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
     };
     markAsUploadOptionsComponent(AsUploadButton);
     return forwardRef(AsUploadButton);

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import LazyLoad from 'react-lazyload';
@@ -42,14 +43,7 @@ export default (props) => {
      */
     const renderPreview = (link, key) => {
         const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return (React.createElement(Box, { className: classes.displayLink, key: key },
-            link.embed.metadata.images && link.embed.metadata.images.length > 0 && (React.createElement(React.Fragment, null, fullWidth ? (React.createElement(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (React.createElement(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })))),
-            React.createElement(Box, { className: classes.snippet },
-                React.createElement("b", { className: classes.snippetTitle }, link.embed.metadata.title),
-                React.createElement("br", null),
-                React.createElement("p", { className: classes.snippetDescription }, link.embed.metadata.description),
-                React.createElement("a", { href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, domain)),
-            React.createElement("div", { style: { clear: 'both' } })));
+        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [link.embed.metadata.images && link.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: link.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: link.embed.metadata.description })), _jsx("a", Object.assign({ href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
     };
     /**
      * Renders component
@@ -57,11 +51,10 @@ export default (props) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest), _medias.map((l, i) => {
-        if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
-            return (React.createElement(LazyLoad, { className: classes.displayVideo, placeholder: React.createElement(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-                React.createElement(AutoPlayer, { url: l.url, width: '100%', key: i, onVideoWatch: () => handleLinkClick(l) })));
-        }
-        return React.createElement(React.Fragment, { key: i }, renderPreview(l, i));
-    })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
+            if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
+                return (_jsx(LazyLoad, Object.assign({ className: classes.displayVideo, placeholder: _jsx(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(AutoPlayer, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
+            }
+            return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
+        }) })));
 };

package/lib/esm/shared/Media/Link/LayerComponent.d.ts

@@ -5,5 +5,5 @@ import { ComposerLayerProps } from '../../../types/composer';
 export interface LayerComponentProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
     defaultValue: SCMediaType[];
 }
-declare const LayerComponent: React.ForwardRefExoticComponent<Pick<LayerComponentProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "onClose" | "onSave"> & React.RefAttributes<unknown>>;
+declare const LayerComponent: React.ForwardRefExoticComponent<Pick<LayerComponentProps, "id" | "role" | "className" | "style" | "classes" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "onClose" | "onSave"> & React.RefAttributes<unknown>>;
 export default LayerComponent;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
@@ -29,16 +30,6 @@ const LayerComponent = React.forwardRef((props, ref) => {
     const handleSave = useCallback(() => onSave(value), [value]);
     const handleAdd = useCallback((media) => setValue([...value, media]), [value]);
     const handleChange = useCallback((medias) => setValue(medias), []);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest),
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(IconButton, { onClick: onClose },
-                React.createElement(Icon, null, "arrow_back")),
-            React.createElement(Typography, null,
-                React.createElement(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" })),
-            React.createElement(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
-                React.createElement(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(UrlTextField, { id: "page", name: "page", label: React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }),
-            React.createElement(PreviewComponent, { onChange: handleChange, value: value })));
+    return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(UrlTextField, { id: "page", name: "page", label: _jsx(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }), _jsx(PreviewComponent, { onChange: handleChange, value: value })] }))] }));
 });
 export default LayerComponent;

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

@@ -5,5 +5,5 @@ export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChang
     onChange: (value: SCMediaType[]) => void;
     value: SCMediaType[];
 }
-declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "value"> & React.RefAttributes<unknown>>;
+declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "id" | "role" | "className" | "style" | "classes" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "component" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "value"> & React.RefAttributes<unknown>>;
 export default PreviewComponent;

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useMemo } from 'react';
 import { Box, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -29,9 +30,6 @@ const PreviewComponent = React.forwardRef((props, ref) => {
         onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
     }, [onChange, value]);
     const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
-    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (React.createElement(ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (React.createElement(Box, { key: media.id, className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) },
-        React.createElement(DisplayComponent, { medias: [media] }),
-        React.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
-            React.createElement(Icon, null, "delete"))))))));
+    return (_jsx(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest, { children: medias.length > 0 && (_jsx(ReactSortable, Object.assign({ list: medias, setList: handleSort }, { children: medias.map((media) => (_jsxs(Box, Object.assign({ className: classNames(classes.media, { [classes.video]: media.embed.metadata && media.embed.metadata.type === MEDIA_TYPE_VIDEO }) }, { children: [_jsx(DisplayComponent, { medias: [media] }), _jsx(IconButton, Object.assign({ className: classes.delete, onClick: handleDelete(media.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) }))] }), media.id))) }))) })));
 });
 export default PreviewComponent;

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { IconButton } from '@mui/material';
 import Icon from '@mui/material/Icon';
 import { PREFIX } from './constants';
@@ -14,6 +14,5 @@ const Root = styled(IconButton, {
 })(() => ({}));
 export default (_a) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }),
-        React.createElement(Icon, null, "link")));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }, { children: _jsx(Icon, { children: "link" }) })));
 };

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
@@ -71,11 +72,8 @@ export default (props) => {
     /**
      * Renders url text field
      */
-    return (React.createElement("form", { method: "post", onSubmit: handleSubmit },
-        React.createElement(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
-                (urlError && (React.createElement(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
-                endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Fade, { in: urlError === null && url !== '' },
-                        React.createElement(IconButton, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? React.createElement(CircularProgress, { color: "primary", size: 20 }) : React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })))))
-            } }))));
+    return (_jsx("form", Object.assign({ method: "post", onSubmit: handleSubmit }, { children: _jsx(TextField, Object.assign({ value: url, type: "url", onChange: handleChange, onPaste: handlePaste, error: error || Boolean(urlError), helperText: helperText ||
+                (urlError && (_jsx(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || _jsx(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
+                endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Fade, Object.assign({ in: urlError === null && url !== '' }, { children: _jsx(IconButton, Object.assign({ size: "small", disabled: isCreating, type: "submit" }, { children: isCreating ? _jsx(CircularProgress, { color: "primary", size: 20 }) : _jsx(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" }) })) })) })))
+            } })) })));
 };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import FeedObject from '../../../components/FeedObject';
@@ -8,6 +9,9 @@ import { CacheStrategies } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import filter from './filter';
 import { PREFIX } from './constants';
+import { MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_TYPE_EVENT } from '../../../constants/Media';
+import { SCEventTemplateType } from '../../../types/event';
+import Event from '../../../components/Event';
 const classes = {
     displayRoot: `${PREFIX}-display-root`,
     sharePreview: `${PREFIX}-share-preview`,
@@ -24,6 +28,5 @@ export default (_a) => {
     if (_medias.length === 0) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest), _medias.map((media, i) => (React.createElement(Box, { className: classes.sharePreview, key: i, onClick: onMediaClick },
-        React.createElement(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST }))))));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
 };

package/lib/esm/shared/Media/Share/filter.js

@@ -1,2 +1,2 @@
-import { MEDIA_TYPE_SHARE } from '../../../constants/Media';
-export default (media) => media.type === MEDIA_TYPE_SHARE;
+import { MEDIA_TYPE_EVENT, MEDIA_TYPE_SHARE } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_SHARE || media.type === MEDIA_TYPE_EVENT;

package/lib/esm/shared/MetadataField/MetadataField.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { FormControlLabel, MenuItem, TextField, Checkbox } from '@mui/material';
 import { SCMetadataTypeFieldType } from '@selfcommunity/types';
@@ -13,25 +14,25 @@ const MetadataField = (props) => {
     const _label = label !== null && label !== void 0 ? label : metadata.label;
     switch (metadata === null || metadata === void 0 ? void 0 : metadata.type) {
         case SCMetadataTypeFieldType.EMAIL:
-            component = React.createElement(EmailTextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = _jsx(EmailTextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case SCMetadataTypeFieldType.URL:
-            component = React.createElement(UrlTextField, Object.assign({}, rest, { type: "url", className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = _jsx(UrlTextField, Object.assign({}, rest, { type: "url", className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case SCMetadataTypeFieldType.PHONE_NUMBER:
-            component = React.createElement(PhoneTextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = _jsx(PhoneTextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case SCMetadataTypeFieldType.ENUM:
-            component = (React.createElement(TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }), metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (React.createElement(MenuItem, { key: option, value: option }, option)))));
+            component = (_jsx(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) => (_jsx(MenuItem, Object.assign({ value: option }, { children: option }), option))) })));
             break;
         case SCMetadataTypeFieldType.CHECKBOX:
             const { value } = rest;
-            component = (React.createElement(FormControlLabel, { className: className, control: React.createElement(Checkbox, { required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, checked: Boolean(value) }), label: _label }));
+            component = (_jsx(FormControlLabel, { className: className, control: _jsx(Checkbox, { required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, checked: Boolean(value) }), label: _label }));
             break;
         default:
-            component = React.createElement(TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = _jsx(TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
     }
-    return React.createElement(React.Fragment, null, component);
+    return _jsx(React.Fragment, { children: component });
 };
 export default MetadataField;

package/lib/esm/shared/NewChip/NewChip.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Chip } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -30,5 +30,5 @@ export default function NewChip(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className), label: React.createElement(FormattedMessage, { id: "ui.notification.notificationNewChip.label", defaultMessage: "ui.notification.notificationNewChip.label" }), size: "small", color: "error" }, props)));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), label: _jsx(FormattedMessage, { id: "ui.notification.notificationNewChip.label", defaultMessage: "ui.notification.notificationNewChip.label" }), size: "small", color: "error" }, props)));
 }

package/lib/esm/shared/NotificationItem/NotificationItem.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box, Typography } from '@mui/material';
 import classNames from 'classnames';
@@ -68,16 +68,7 @@ export default function NotificationItem(inProps) {
     });
     const { id = null, className = null, image = null, disableTypography = false, primary = null, primaryTypographyProps = { component: 'span', variant: 'body1' }, secondary = null, secondaryTypographyProps = { component: 'p', variant: 'body2' }, actions = null, footer = null, template = SCNotificationObjectTemplateType.DETAIL, isNew = false, elevation = 0 } = props, rest = __rest(props, ["id", "className", "image", "disableTypography", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps", "actions", "footer", "template", "isNew", "elevation"]);
     // RENDER
-    return (React.createElement(Root, Object.assign({ id: id }, rest, { className: classNames(classes.root, className, `${PREFIX}-${template}`, {
+    return (_jsxs(Root, Object.assign({ id: id }, rest, { className: classNames(classes.root, className, `${PREFIX}-${template}`, {
             [classes.new]: isNew
-        }), elevation: elevation }),
-        React.createElement(Box, { className: classes.header },
-            image && React.createElement(Box, { className: classNames(classes.image) }, image),
-            React.createElement(Box, { className: classes.title },
-                primary && (React.createElement(Box, { className: classes.primary },
-                    template === SCNotificationObjectTemplateType.DETAIL && isNew && React.createElement(NewChip, { className: classes.newChip }),
-                    disableTypography ? primary : React.createElement(Typography, Object.assign({}, primaryTypographyProps), primary))),
-                secondary && (React.createElement(Box, { className: classes.secondary }, disableTypography ? secondary : React.createElement(Typography, Object.assign({}, secondaryTypographyProps), secondary))))),
-        actions && React.createElement(Box, { className: classes.actions }, actions),
-        footer && React.createElement(Box, { className: classes.footer }, footer)));
+        }), elevation: elevation }, { children: [_jsxs(Box, Object.assign({ className: classes.header }, { children: [image && _jsx(Box, Object.assign({ className: classNames(classes.image) }, { children: image })), _jsxs(Box, Object.assign({ className: classes.title }, { children: [primary && (_jsxs(Box, Object.assign({ className: classes.primary }, { children: [template === SCNotificationObjectTemplateType.DETAIL && isNew && _jsx(NewChip, { className: classes.newChip }), disableTypography ? primary : _jsx(Typography, Object.assign({}, primaryTypographyProps, { children: primary }))] }))), secondary && (_jsx(Box, Object.assign({ className: classes.secondary }, { children: disableTypography ? secondary : _jsx(Typography, Object.assign({}, secondaryTypographyProps, { children: secondary })) })))] }))] })), actions && _jsx(Box, Object.assign({ className: classes.actions }, { children: actions })), footer && _jsx(Box, Object.assign({ className: classes.footer }, { children: footer }))] })));
 }

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { IconButton, InputAdornment, TextField } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -17,10 +18,7 @@ export default function PasswordTextField(props) {
         setShowPassword(!showPassword);
     };
     // RENDER
-    return (React.createElement(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { InputProps: {
-            endAdornment: (React.createElement(React.Fragment, null, (_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 :
-                _a.endAdornment,
-                React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(IconButton, { "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, showPassword ? React.createElement(Icon, null, "visibility_off") : React.createElement(Icon, null, "visibility")))))
+    return (_jsx(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { InputProps: {
+            endAdornment: (_jsxs(_Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, { children: showPassword ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "visibility" }) })) }))] }))
         } })));
 }