@selfcommunity/react-ui 0.7.55 → 0.8.0-alpha.0

package/lib/esm/components/Composer/Composer.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { SCContributionType, SCFeatureName, SCFeedTypologyType } from '@selfcommunity/types';
 import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { SCPreferences, UserUtils, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -28,7 +29,7 @@ import { PREFIX } from './constants';
 import ComposerSkeleton from './Skeleton';
 import CloseLayer from './Layer/CloseLayer';
 const DialogTransition = forwardRef(function Transition(props, ref) {
-    return React.createElement(Fade, Object.assign({ ref: ref }, props));
+    return _jsx(Fade, Object.assign({ ref: ref }, props));
 });
 const classes = {
     root: `${PREFIX}-root`,
@@ -58,6 +59,7 @@ const COMPOSER_INITIAL_STATE = {
     htmlError: null,
     categories: [],
     group: null,
+    event: null,
     categoriesError: null,
     groupsError: null,
     addressing: null,
@@ -71,6 +73,8 @@ const reducer = (state, action) => {
     switch (action.type) {
         case 'reset':
             return Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), { key: random() });
+        case 'resetEventFeed':
+            return Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), { event: state.event, key: random() });
         case 'resetGroupFeed':
             return Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), { group: state.group, key: random() });
         case 'resetCategoryFeed':
@@ -137,7 +141,7 @@ export default function Composer(inProps) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [layer, setLayer] = useState();
     const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: random() }));
-    const { key, id, type, title, titleError, html, categories, group, addressing, audience, medias, poll, pollError, location, error } = state;
+    const { key, id, type, title, titleError, html, categories, event, group, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
         if (_feedObject.type === SCContributionType.POST) {
             _feedObject = _feedObject;
@@ -157,6 +161,7 @@ export default function Composer(inProps) {
                     title: _feedObject.title,
                     html: _feedObject.html,
                     categories: _feedObject.categories,
+                    event: _feedObject.event,
                     group: _feedObject.group,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
@@ -219,8 +224,8 @@ export default function Composer(inProps) {
     useEffect(() => {
         if (!unloadRef.current && canSubmit) {
             unloadRef.current = true;
-            const onUnload = (event) => {
-                event.preventDefault();
+            const onUnload = (e) => {
+                e.preventDefault();
                 return '';
             };
             window.onbeforeunload = onUnload;
@@ -241,17 +246,17 @@ export default function Composer(inProps) {
         }
         /**
          * On touchStart event save the initial Y
-         * @param event
+         * @param e
          */
-        const handleTouchStart = (event) => {
-            pointerStartY.current = event.touches[0].clientY;
+        const handleTouchStart = (e) => {
+            pointerStartY.current = e.touches[0].clientY;
         };
         /**
          * Perform blur only if gesture is a pan (bottom direction)
-         * @param event
+         * @param e
          */
-        const handleTouchmove = (event) => {
-            const currentY = event.touches[0].clientY;
+        const handleTouchmove = (e) => {
+            const currentY = e.touches[0].clientY;
             const deltaY = currentY - pointerStartY.current;
             pointerStartY.current = currentY;
             if (deltaY > 0) {
@@ -279,14 +284,14 @@ export default function Composer(inProps) {
         dispatch({
             type: 'multiple',
             value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > COMPOSER_TITLE_MAX_LENGTH
-                    ? { titleError: React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
+                    ? { titleError: _jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
                     : null })
         });
     }, []);
     const handleChangeDiscussion = useCallback((content) => {
         dispatch({
             type: 'multiple',
-            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > COMPOSER_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
         });
     }, []);
     const handleChangePost = useCallback((content) => {
@@ -309,9 +314,12 @@ export default function Composer(inProps) {
         }
     }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
     const handleChangeAudience = useCallback((value) => {
-        if (group || (value && Object.prototype.hasOwnProperty.call(value, 'managed_by'))) {
+        if (group || (value && Object.prototype.hasOwnProperty.call(value, 'emotional_image_position'))) {
             dispatch({ type: 'group', value });
         }
+        else if (event || (value && Object.prototype.hasOwnProperty.call(value, 'recurring'))) {
+            dispatch({ type: 'event', value });
+        }
         else {
             dispatch({ type: 'addressing', value });
         }
@@ -323,9 +331,13 @@ export default function Composer(inProps) {
         ComponentProps: {
             onClose: handleRemoveLayer,
             onSave: handleChangeAudience,
-            defaultValue: group || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'managed_by')) ? group : addressing
+            defaultValue: group || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'emotional_image_position'))
+                ? group
+                : event || (addressing && Object.prototype.hasOwnProperty.call(addressing, 'recurring'))
+                    ? event
+                    : addressing
         }
-    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, group]);
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing, event, group]);
     const handleChangeLocation = useCallback((value) => {
         dispatch({ type: 'location', value });
         setLayer(null);
@@ -356,7 +368,7 @@ export default function Composer(inProps) {
         });
         mediasRef.current.medias = _medias;
     }, []);
-    const handleMediaTriggerClick = useCallback((mediaObjectType) => (event) => {
+    const handleMediaTriggerClick = useCallback((mediaObjectType) => (e) => {
         if (mediaObjectType.layerComponent) {
             handleAddLayer({
                 name: mediaObjectType.name,
@@ -388,12 +400,12 @@ export default function Composer(inProps) {
                 break;
         }
     }, [handleAddCategoryLayer, handleAddAudienceLayer, handleAddLocationLayer]);
-    const handleSubmit = useCallback((event) => {
-        event.preventDefault();
-        event.stopPropagation();
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
         if (UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -419,6 +431,9 @@ export default function Composer(inProps) {
         if (features.includes(SCFeatureName.GROUPING) && group !== null) {
             data.group = group.id;
         }
+        if (features.includes(SCFeatureName.EVENT) && event !== null) {
+            data.event = event.id;
+        }
         setIsSubmitting(true);
         // Finding right url
         const _type = type === COMPOSER_TYPE_POLL ? SCContributionType.POST : type;
@@ -442,17 +457,19 @@ export default function Composer(inProps) {
             }
             feedType && feedType === SCFeedTypologyType.CATEGORY
                 ? dispatch({ type: 'resetCategoryFeed' })
-                : feedType === SCFeedTypologyType.GROUP
-                    ? dispatch({ type: 'resetGroupFeed' })
-                    : dispatch({ type: 'reset' });
+                : feedType === SCFeedTypologyType.EVENT
+                    ? dispatch({ type: 'resetEventFeed' })
+                    : feedType === SCFeedTypologyType.GROUP
+                        ? dispatch({ type: 'resetGroupFeed' })
+                        : dispatch({ type: 'reset' });
         })
             .catch((error) => {
             dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
-    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, group, addressing, audience, medias, poll, location, hasPoll]);
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, event, group, addressing, audience, medias, poll, location, hasPoll]);
     //edited here
-    const handleClose = useCallback((event, reason) => {
+    const handleClose = useCallback((e, reason) => {
         if (unloadRef.current) {
             window.onbeforeunload = null;
         }
@@ -463,21 +480,21 @@ export default function Composer(inProps) {
                 ComponentProps: {
                     onClose: handleRemoveLayer,
                     onSave: () => {
-                        onClose && onClose(event);
+                        onClose && onClose(e);
                         setLayer(null);
                         feedType && feedType === SCFeedTypologyType.CATEGORY
                             ? dispatch({ type: 'resetCategoryFeed' })
-                            : feedType === SCFeedTypologyType.GROUP
-                                ? dispatch({ type: 'resetGroupFeed' })
-                                : dispatch({ type: 'reset' });
+                            : feedType === SCFeedTypologyType.EVENT
+                                ? dispatch({ type: 'resetEventFeed' })
+                                : feedType === SCFeedTypologyType.GROUP
+                                    ? dispatch({ type: 'resetGroupFeed' })
+                                    : dispatch({ type: 'reset' });
                     }
                 }
             });
         }
         else {
-            console.log('qui');
-            onClose && onClose(event);
-            console.log('qui2');
+            onClose && onClose(e);
             /*setLayer(null);
             feedType && feedType === SCFeedTypologyType.CATEGORY
               ? dispatch({type: 'resetCategoryFeed'})
@@ -486,7 +503,7 @@ export default function Composer(inProps) {
               : dispatch({type: 'reset'}); */
         }
     }, [onClose, canSubmit, handleRemoveLayer]);
-    const handleClosePrompt = useCallback((event) => {
+    const handleClosePrompt = useCallback((e) => {
         if (canSubmit) {
             handleAddLayer({
                 name: 'close',
@@ -498,28 +515,25 @@ export default function Composer(inProps) {
             });
         }
         else {
-            handleClose(event);
+            handleClose(e);
         }
     }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
     // RENDER
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
     const content = useMemo(() => {
         if (editMode && isLoading) {
-            return React.createElement(ComposerSkeleton, null);
+            return _jsx(ComposerSkeleton, {});
         }
         else if (editMode && loadError) {
-            return (React.createElement(Alert, { severity: "error", onClose: handleClose },
-                React.createElement(AlertTitle, null,
-                    React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
-                React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
+            return (_jsxs(Alert, Object.assign({ severity: "error", onClose: handleClose }, { children: [_jsx(AlertTitle, { children: _jsx(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" }) }), _jsx(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })] })));
         }
         switch (type) {
             case COMPOSER_TYPE_POLL:
-                return (React.createElement(ContentPoll, { key: key, onChange: handleChangePoll, value: { html, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }));
+                return (_jsx(ContentPoll, { onChange: handleChangePoll, value: { html, event, group, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting }, key));
             case SCContributionType.DISCUSSION:
-                return (React.createElement(ContentDiscussion, { key: key, value: { title, html, categories, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }));
+                return (_jsx(ContentDiscussion, { value: { title, html, categories, event, group, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) }, key));
             default:
-                return (React.createElement(ContentPost, { key: key, value: { html, categories, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }));
+                return (_jsx(ContentPost, { value: { html, categories, event, group, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) }, key));
         }
     }, [
         key,
@@ -527,6 +541,7 @@ export default function Composer(inProps) {
         title,
         html,
         categories,
+        event,
         group,
         addressing,
         medias,
@@ -541,37 +556,17 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
-        React.createElement("form", { onSubmit: handleSubmit, method: "post" },
-            React.createElement(DialogTitle, { className: classes.title },
-                React.createElement(IconButton, { onClick: handleClosePrompt },
-                    React.createElement(Icon, null, "close")),
-                React.createElement(LoadingButton, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
-                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
-            React.createElement(DialogContent, { className: classes.content },
-                React.createElement(Attributes, { value: { categories, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
-                content,
-                medias && medias.length > 0 && (React.createElement(Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
-                    if (mediaObjectType.previewComponent) {
-                        return React.createElement(mediaObjectType.previewComponent, { key: mediaObjectType.name, value: medias, onChange: handleChangeMedias });
-                    }
-                    else if (mediaObjectType.displayComponent) {
-                        return React.createElement(mediaObjectType.displayComponent, { key: mediaObjectType.name, medias: medias });
-                    }
-                })))),
-            !canSubmit && !editMode && React.createElement(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }),
-            React.createElement(DialogActions, { className: classes.actions },
-                mediaObjectTypes
-                    .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
-                    .map((mediaObjectType) => {
-                    const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
-                    return (React.createElement(mediaObjectType.triggerButton, Object.assign({ key: mediaObjectType.name, disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props)));
-                }),
-                React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
-                    React.createElement(Icon, null, "category")),
-                React.createElement(IconButton, { disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group), onClick: handleAddAudienceLayer }, (!group && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? React.createElement(Icon, null, "public") : group ? React.createElement(Icon, null, "groups") : React.createElement(Icon, null, "label")),
-                preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
-                    React.createElement(Icon, null, "add_location_alt"))))),
-        layer && (React.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
-            React.createElement(layer.Component, Object.assign({}, layer.ComponentProps))))));
+    return (_jsxs(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }, { children: [_jsxs("form", Object.assign({ onSubmit: handleSubmit, method: "post" }, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: handleClosePrompt }, { children: _jsx(Icon, { children: "close" }) })), _jsx(LoadingButton, Object.assign({ size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }) }))] })), _jsxs(DialogContent, Object.assign({ className: classes.content }, { children: [_jsx(Attributes, { value: { categories, event, group, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }), content, medias && medias.length > 0 && (_jsx(Box, Object.assign({ className: classes.medias }, { children: mediaObjectTypes.map((mediaObjectType) => {
+                                    if (mediaObjectType.previewComponent) {
+                                        return _jsx(mediaObjectType.previewComponent, { value: medias, onChange: handleChangeMedias }, mediaObjectType.name);
+                                    }
+                                    else if (mediaObjectType.displayComponent) {
+                                        return _jsx(mediaObjectType.displayComponent, { medias: medias }, mediaObjectType.name);
+                                    }
+                                }) })))] })), !canSubmit && !editMode && _jsx(TypeSwitchButtonGroup, { className: classes.types, onChange: handleChangeType, size: "small", value: type }), _jsxs(DialogActions, Object.assign({ className: classes.actions }, { children: [mediaObjectTypes
+                                .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
+                                .map((mediaObjectType) => {
+                                const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
+                                return (_jsx(mediaObjectType.triggerButton, Object.assign({ disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props), mediaObjectType.name));
+                            }), _jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddCategoryLayer }, { children: _jsx(Icon, { children: "category" }) })), _jsx(IconButton, Object.assign({ disabled: isSubmitting || !features.includes(SCFeatureName.TAGGING) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.group) || Boolean(feedObject === null || feedObject === void 0 ? void 0 : feedObject.event), onClick: handleAddAudienceLayer }, { children: (!group && addressing === null) || (!event && addressing === null) || (addressing === null || addressing === void 0 ? void 0 : addressing.length) === 0 ? (_jsx(Icon, { children: "public" })) : group ? (_jsx(Icon, { children: "groups" })) : event ? (_jsx(Icon, { children: "CalendarIcon" })) : (_jsx(Icon, { children: "label" })) })), preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && (_jsx(IconButton, Object.assign({ disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' }, { children: _jsx(Icon, { children: "add_location_alt" }) })))] }))] })), layer && (_jsx(LayerTransitionRoot, Object.assign({ className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" }, { children: _jsx(layer.Component, Object.assign({}, layer.ComponentProps)) })))] })));
 }

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Box, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
@@ -24,6 +25,7 @@ const DEFAULT_DISCUSSION = {
     title: '',
     categories: [],
     group: null,
+    event: null,
     medias: [],
     html: '',
     addressing: []
@@ -42,14 +44,10 @@ export default (props) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
     // RENDER
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && (React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }))),
-        React.createElement(TextField, { className: classes.title, placeholder: intl.formatMessage({
-                id: 'ui.composer.content.discussion.title.label',
-                defaultMessage: 'ui.composer.content.discussion.title.label'
-            }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
-                endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - value.title.length)
-            }, error: Boolean(titleError), helperText: titleError, disabled: disabled }),
-        React.createElement(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(TextField, { className: classes.title, placeholder: intl.formatMessage({
+                    id: 'ui.composer.content.discussion.title.label',
+                    defaultMessage: 'ui.composer.content.discussion.title.label'
+                }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
+                    endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_TITLE_MAX_LENGTH - value.title.length }))
+                }, error: Boolean(titleError), helperText: titleError, disabled: disabled }), _jsx(Editor, Object.assign({}, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
 };

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo } from 'react';
 import { Box, Button, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, TextField, Tooltip, Typography, } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -39,7 +40,7 @@ const messages = defineMessages({
 });
 const SortableComponent = forwardRef((_a, ref) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(FormGroup, Object.assign({ direction: "column", ref: ref }, props), children));
+    return (_jsx(FormGroup, Object.assign({ direction: "column", ref: ref }, props, { children: children })));
 });
 /**
  * Default poll
@@ -99,30 +100,10 @@ export default (inProps) => {
         minDate.setDate(minDate.getDate() + COMPOSER_POLL_MIN_CLOSE_DATE_DELTA);
         return minDate;
     }, []);
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })),
-        React.createElement(Box, { className: classes.title },
-            React.createElement(TextField, { autoFocus: true, disabled: disabled, label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
-                    endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length)
-                } })),
-        React.createElement(Box, { className: classes.choices },
-            React.createElement(ReactSortable, { list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, poll.choices.map((choice, index) => (React.createElement(TextField, { key: index, placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
-                    startAdornment: (React.createElement(InputAdornment, { position: "start" },
-                        React.createElement(Icon, null, "drag"))),
-                    endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                        React.createElement(Tooltip, { title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) },
-                            React.createElement("span", null,
-                                React.createElement(IconButton, { onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" },
-                                    React.createElement(Icon, null, "delete"))))))
-                } }))))),
-        React.createElement(Box, { className: classes.choiceNew },
-            React.createElement(Button, { color: "inherit", variant: "text", onClick: handleAddChoice },
-                React.createElement(Icon, null, "add"),
-                React.createElement(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" }))),
-        React.createElement(Divider, null),
-        React.createElement(FormGroup, { className: classes.metadata },
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }),
-            React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] },
-                React.createElement(DatePicker, { disabled: disabled, label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate })))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && _jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` }) })), _jsx(Box, Object.assign({ className: classes.title }, { children: _jsx(TextField, { autoFocus: true, disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
+                        endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length }))
+                    } }) })), _jsx(Box, Object.assign({ className: classes.choices }, { children: _jsx(ReactSortable, Object.assign({ list: [...poll.choices], setList: handleSortChoices, tag: SortableComponent }, { children: poll.choices.map((choice, index) => (_jsx(TextField, { placeholder: intl.formatMessage(messages.choicePlaceholder), value: choice.choice, onChange: handleChangeChoice(index), variant: "outlined", disabled: disabled, InputProps: {
+                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "drag" }) }))),
+                            endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(Tooltip, Object.assign({ title: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES ? (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete.disabled", defaultMessage: "ui.composer.content.poll.choice.delete.disabled" })) : (_jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.delete", defaultMessage: "ui.composer.content.poll.choice.delete" })) }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ onClick: handleDeleteChoice(index), disabled: poll.choices.length <= COMPOSER_POLL_MIN_CHOICES, edge: "end" }, { children: _jsx(Icon, { children: "delete" }) })) }) })) })))
+                        } }, index))) })) })), _jsx(Box, Object.assign({ className: classes.choiceNew }, { children: _jsxs(Button, Object.assign({ color: "inherit", variant: "text", onClick: handleAddChoice }, { children: [_jsx(Icon, { children: "add" }), _jsx(FormattedMessage, { id: "ui.composer.content.poll.choice.add", defaultMessage: "ui.composer.choice.add" })] })) })), _jsx(Divider, {}), _jsxs(FormGroup, Object.assign({ className: classes.metadata }, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: poll.multiple_choices, onChange: handleChangeMultiple }), label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.multiple", defaultMessage: "ui.composer.content.poll.multiple" }) }), _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: localeMap[intl.locale] }, { children: _jsx(DatePicker, { disabled: disabled, label: _jsx(FormattedMessage, { id: "ui.composer.content.poll.expiration", defaultMessage: "ui.composer.content.poll.expiration" }), value: typeof poll.expiration_at === 'string' ? parseISO(poll.expiration_at) : poll.expiration_at, onChange: handleChangeExpiration, slotProps: { textField: { variant: 'outlined' } }, minDate: minDate }) }))] }))] })));
 };

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

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
@@ -23,6 +24,7 @@ const DEFAULT_POST = {
     medias: [],
     html: '',
     addressing: [],
+    event: null,
     group: null
 };
 export default (props) => {
@@ -40,8 +42,5 @@ export default (props) => {
         onChange(Object.assign(Object.assign({}, value), { html }));
     }, [value]);
     // RENDER
-    return (React.createElement(Root, { className: classNames(classes.root, className) },
-        generalError && (React.createElement(Typography, { className: classes.generalError },
-            React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }))),
-        React.createElement(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [generalError && (_jsx(Typography, Object.assign({ className: classes.generalError }, { children: _jsx(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` }) }))), _jsx(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))] })));
 };

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

@@ -7,11 +7,12 @@ import { SCGroupType } from '@selfcommunity/types';
 export declare enum AudienceTypes {
     AUDIENCE_ALL = "all",
     AUDIENCE_TAG = "tag",
-    AUDIENCE_GROUP = "group"
+    AUDIENCE_GROUP = "group",
+    AUDIENCE_EVENT = "event"
 }
 export interface AudienceLayerProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
     defaultValue: SCTagType[] | SCGroupType | any;
     TextFieldProps?: TextFieldProps;
 }
-declare const AudienceLayer: React.ForwardRefExoticComponent<Pick<AudienceLayerProps, "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" | "TextFieldProps" | "onSave"> & React.RefAttributes<unknown>>;
+declare const AudienceLayer: React.ForwardRefExoticComponent<Pick<AudienceLayerProps, "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" | "TextFieldProps" | "onSave"> & React.RefAttributes<unknown>>;
 export default AudienceLayer;