@selfcommunity/react-ui 0.11.0 → 1.0.0

package/lib/esm/components/CreatePaymentProductForm/CreatePaymentProductForm.js

@@ -7,7 +7,6 @@ import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { PaymentApiClient } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -134,8 +133,10 @@ export default function CreatePaymentProductForm(inProps) {
         return null;
     }
     console.log(fieldsError);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ mb: 1 }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), _jsx(TextField, Object.assign({ size: "small", id: "name", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), _jsx(TextField, Object.assign({ size: "small", id: "description", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? (_jsx(_Fragment, { children: fieldsError.unitAmount })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: DEFAULT_MIN_PRICE }) })), InputProps: {
-                    startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
-                    inputComponent: NumericFormatCustom
-                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(LoadingButton, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ mb: 1 }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.title", defaultMessage: "ui.createPaymentProductForm.title" }) })), _jsx(TextField, Object.assign({ size: "small", id: "name", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.name", defaultMessage: "ui.createPaymentProductForm.name" }), variant: "outlined", fullWidth: true, value: name, error: Boolean(fieldsError && fieldsError.name) }, (Boolean(fieldsError && fieldsError.name) && { helperText: fieldsError.name }), { onChange: (e) => handleChange('name', e) })), _jsx(TextField, Object.assign({ size: "small", id: "description", label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.description", defaultMessage: "ui.createPaymentProductForm.description" }), variant: "outlined", fullWidth: true, value: description, onChange: (e) => handleChange('description', e), multiline: true, maxRows: 2, error: Boolean(fieldsError && fieldsError.description) }, (Boolean(fieldsError && fieldsError.description) && { helperText: fieldsError.description }))), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.price", defaultMessage: "ui.createPaymentProductForm.price" }), variant: "outlined", value: unitAmount, onChange: (e) => handleChange('unitAmount', e), name: "unitAmount", id: "unitAmount", helperText: fieldsError && fieldsError.unitAmount ? (_jsx(_Fragment, { children: fieldsError.unitAmount })) : (_jsx(_Fragment, { children: intl.formatMessage({ id: 'ui.createPaymentProductForm.minPrice', defaultMessage: 'ui.createPaymentProductForm.minPrice' }, { min: DEFAULT_MIN_PRICE }) })), slotProps: {
+                    input: {
+                        startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: "\u20AC" })),
+                        inputComponent: NumericFormatCustom
+                    }
+                }, fullWidth: true, error: Boolean(fieldsError && fieldsError.unitAmount) }), error && (_jsx(Typography, Object.assign({ component: "div", className: classes.error, variant: "body2" }, { children: error }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "flex-end", spacing: 1 }, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", color: "inherit", onClick: onCancel }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.cancel", defaultMessage: "ui.createPaymentProductForm.btn.cancel" }) }))), _jsx(Button, Object.assign({ loading: loading, variant: "contained", size: "small", color: "error", onClick: handleCreateProduct }, { children: _jsx(FormattedMessage, { id: "ui.createPaymentProductForm.btn.create", defaultMessage: "ui.createPaymentProductForm.btn.create" }) }))] }))] })));
 }

package/lib/esm/components/CustomAdv/Skeleton.js

@@ -8,7 +8,7 @@ const classes = {
 const Root = styled(GenericSkeleton, {
     name: PREFIX,
     slot: 'SkeletonRoot'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Custom Adv Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/EditCourse/Customize.d.ts

@@ -4,6 +4,6 @@ interface CustomizeProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
 }
-declare function Customize(props: CustomizeProps): JSX.Element;
+declare function Customize(props: CustomizeProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Customize>;
 export default _default;

package/lib/esm/components/EditCourse/EditCourse.d.ts

@@ -10,4 +10,4 @@ export interface EditCourseProps {
     className?: HTMLAttributes<HTMLDivElement>['className'];
     [p: string]: any;
 }
-export default function EditCourse(inProps: EditCourseProps): JSX.Element;
+export default function EditCourse(inProps: EditCourseProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EditCourse/Lessons/AddButton.d.ts

@@ -4,6 +4,6 @@ interface AddButtonProps extends ButtonProps {
     label: string;
     handleAddRow: () => void;
 }
-declare function AddButton(props: AddButtonProps): JSX.Element;
+declare function AddButton(props: AddButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof AddButton>;
 export default _default;

package/lib/esm/components/EditCourse/Lessons/ChangeLessonStatus.d.ts

@@ -8,6 +8,6 @@ interface ChangeLessonStatusProps {
     onChange: (lesson: SCCourseLessonType, type: ActionLessonType) => void;
     disabled?: boolean;
 }
-declare function ChangeLessonStatus(props: ChangeLessonStatusProps): JSX.Element;
+declare function ChangeLessonStatus(props: ChangeLessonStatusProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ChangeLessonStatus>;
 export default _default;

package/lib/esm/components/EditCourse/Lessons/ChangeLessonStatus.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Icon, MenuItem, Select, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../constants';
 import MenuRow from '../MenuRow';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
 import { CourseService } from '@selfcommunity/api-services';
@@ -74,12 +73,12 @@ function ChangeLessonStatus(props) {
             handleAction(newValue);
         }
     }, [handleAction, value]);
-    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
+    return (_jsx(Fragment, { children: isMobile ? (_jsx(MenuRow, Object.assign({ buttonClassName: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, icon: icon }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", onClick: handleClick, loading: loading, disabled: loading, "data-value": option.value, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'
                         }
-                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option.id, defaultMessage: option.id }) })) })) }, i))) }))) : (_jsx(Select, Object.assign({ className: hasPublished ? classes.changeLessonStatusPublishedWrapper : undefined, size: "small", value: value, onChange: handleChange, disabled: disabled }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: _jsx(Button, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
                         padding: 0,
                         ':hover': {
                             backgroundColor: 'unset'

package/lib/esm/components/EditCourse/Lessons/FieldName.d.ts

@@ -10,6 +10,6 @@ interface FieldNameProps<T> {
     editMode: boolean;
     handleDisableEditMode: () => void;
 }
-declare function FieldName<T extends SCCourseSectionType>(props: FieldNameProps<T>): JSX.Element;
+declare function FieldName<T extends SCCourseSectionType>(props: FieldNameProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof FieldName>;
 export default _default;

package/lib/esm/components/EditCourse/Lessons/FieldName.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { debounce, Icon, IconButton, Stack, TextField, Typography } from '@mui/material';
+import { Button, debounce, Icon, IconButton, Stack, TextField, Typography } from '@mui/material';
 import { Fragment, memo, useCallback, useState } from 'react';
 import { PREFIX } from '../constants';
 import { Logger } from '@selfcommunity/utils';
@@ -75,6 +74,6 @@ function FieldName(props) {
             handleDisableEditMode();
         }
     }, [row, isNewRow, handleManageRow, setName, handleDisableEditMode]);
-    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
+    return (_jsx(Fragment, { children: isNewRow || editMode ? (_jsxs(Stack, Object.assign({ className: classes.editModeWrapper }, { children: [_jsx(TextField, { type: "text", variant: "outlined", size: "small", focused: true, autoFocus: true, defaultValue: row.name, onChange: handleChange }), _jsx(Button, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleSubmit, loading: loading, disabled: loading, className: classes.editModeSaveButton }, { children: _jsx(Icon, { children: "check" }) })), _jsx(IconButton, Object.assign({ color: "default", size: "small", onClick: handleClose, className: classes.editModeCloseButton }, { children: _jsx(Icon, { children: "close" }) }))] }))) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: row.name }))) }));
 }
 export default memo(FieldName);

package/lib/esm/components/EditCourse/Lessons/Skeleton.d.ts

@@ -1 +1 @@
-export default function LessonsSkeleton(): JSX.Element;
+export default function LessonsSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EditCourse/Lessons.d.ts

@@ -6,6 +6,6 @@ interface LessonsProps {
     setCourse: (course: SCCourseType) => void;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Lessons(props: LessonsProps): JSX.Element;
+declare function Lessons(props: LessonsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Lessons>;
 export default _default;

package/lib/esm/components/EditCourse/MenuRow.d.ts

@@ -4,6 +4,6 @@ interface MenuRowProps extends PropsWithChildren {
     buttonClassName?: HTMLAttributes<HTMLButtonElement>['className'];
     disabled?: boolean;
 }
-declare function MenuRow(props: MenuRowProps): JSX.Element;
+declare function MenuRow(props: MenuRowProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MenuRow>;
 export default _default;

package/lib/esm/components/EditCourse/Options/Skeleton.d.ts

@@ -1 +1 @@
-export default function OptionsSkeleton(): JSX.Element;
+export default function OptionsSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EditCourse/Options/SwitchForm.d.ts

@@ -6,6 +6,6 @@ interface SwitchFormProps {
     checked: boolean;
     handleChangeOptions: (key: string, value: boolean) => void;
 }
-declare function SwitchForm(props: SwitchFormProps): JSX.Element;
+declare function SwitchForm(props: SwitchFormProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SwitchForm>;
 export default _default;

package/lib/esm/components/EditCourse/Options.d.ts

@@ -4,6 +4,6 @@ interface OptionsProps {
     course: SCCourseType;
     setCourse: (course: SCCourseType) => void;
 }
-declare function Options(props: OptionsProps): JSX.Element;
+declare function Options(props: OptionsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Options>;
 export default _default;

package/lib/esm/components/EditCourse/Options.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
 import { memo, useCallback, useState } from 'react';
@@ -8,7 +8,6 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useSnackbar } from 'notistack';
 import SwitchForm from './Options/SwitchForm';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { LoadingButton } from '@mui/lab';
 import { CourseService } from '@selfcommunity/api-services';
 const classes = {
     optionsContainer: `${PREFIX}-options-container`,
@@ -88,6 +87,6 @@ function Options(props) {
             });
         });
     }, [course, tempOptions, setCanSave, setLoading]);
-    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
+    return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Object.entries(OPTIONS).map(([key, value], i) => (_jsx(SwitchForm, { name: key, title: value.title, description: value.description, checked: course[key], handleChangeOptions: handleChange }, i))) })), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: !canSave, onClick: handleSubmit, loading: loading }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.options.button.save", defaultMessage: "ui.editCourse.tab.options.button.save" }) })) })) }))] })));
 }
 export default memo(Options);

package/lib/esm/components/EditCourse/Requests.d.ts

@@ -7,6 +7,6 @@ interface RequestsProps {
     endpointQueryParams?: BaseGetParams;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Requests(props: RequestsProps): JSX.Element;
+declare function Requests(props: RequestsProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Requests>;
 export default _default;

package/lib/esm/components/EditCourse/Skeleton.d.ts

@@ -3,6 +3,6 @@ import { SCCourseEditTabType } from '../../types';
 interface EditCourseSkeletonProps {
     tab?: SCCourseEditTabType;
 }
-declare function EditCourseSkeleton(props: EditCourseSkeletonProps): JSX.Element;
+declare function EditCourseSkeleton(props: EditCourseSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof EditCourseSkeleton>;
 export default _default;

package/lib/esm/components/EditCourse/Status.d.ts

@@ -5,5 +5,5 @@ interface StatusProps {
     course: SCCourseType;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-export default function Status(props: StatusProps): JSX.Element;
+export default function Status(props: StatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/esm/components/EditCourse/Status.js

@@ -24,6 +24,6 @@ export default function Status(props) {
                         id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                         defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                     }),
-                    b: (chunks) => (_jsx(Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks })))
+                    b: (chunks) => (_jsx(Typography, Object.assign({ component: "b", fontWeight: "bold" }, { children: chunks }), "ui.editCourse.tab.lessons.status.b"))
                 }) })) })), className: classNames(classes.status, classes.contrastColor) }));
 }

package/lib/esm/components/EditCourse/Users/Skeleton.d.ts

@@ -1 +1 @@
-export default function UsersSkeleton(): JSX.Element;
+export default function UsersSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/EditCourse/Users.d.ts

@@ -6,6 +6,6 @@ interface UsersProps {
     endpointQueryParams?: Record<string, string | number>;
     handleTabChange: (_e: SyntheticEvent, newTabValue: SCCourseEditTabType) => void;
 }
-declare function Users(props: UsersProps): JSX.Element;
+declare function Users(props: UsersProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Users>;
 export default _default;

package/lib/esm/components/Editor/Editor.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarPluginProps } from './plugins/ToolbarPlugin';
 import { MediaPluginProps } from './plugins';
 import { SCMediaType } from '@selfcommunity/types';
-export declare type EditorRef = {
+export type EditorRef = {
     focus: () => void;
 };
 export interface EditorProps {

package/lib/esm/components/Editor/Editor.js

@@ -34,7 +34,7 @@ const Root = styled(Box, {
     overridesResolver: (props, styles) => {
         return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
     }
-})(({ theme }) => ({}));
+})(() => ({}));
 const editorTheme = {
     heading: {
         h1: `${PREFIX}-h1`,
@@ -104,7 +104,7 @@ const Editor = (inProps, ref) => {
         name: PREFIX
     });
     const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, uploadFile = false, editable = true, onChange = null, onMediaChange = null, onFocus = null, onBlur = null, action = null, ToolBarProps = {}, MediaPluginProps = {}, placeholder = _jsx(FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }), isLessonCommentEditor = false } = props;
-    const apiRef = useRef();
+    const apiRef = useRef(null);
     // STATE
     const [focused, setFocused] = useState(false);
     // HANDLERS
@@ -114,7 +114,7 @@ const Editor = (inProps, ref) => {
     const handleMediaChange = (media) => {
         onMediaChange && onMediaChange(media);
     };
-    const handleError = (error, editor) => {
+    const handleError = (error) => {
         console.log(error);
     };
     const handleFocus = () => {

package/lib/esm/components/Editor/nodes/HashtagNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCCategoryType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedHashtagNode = Spread<{
+export type SerializedHashtagNode = Spread<{
     category: SCCategoryType;
     type: 'hashtag';
     version: 1;

package/lib/esm/components/Editor/nodes/HashtagNode.js

@@ -9,16 +9,16 @@ function convertHashtagElement(domNode) {
     };
 }
 export class HashtagNode extends TextNode {
-    constructor(category, text, key) {
-        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
-        this.__category = category;
-    }
     static getType() {
         return 'hashtag';
     }
     static clone(node) {
         return new HashtagNode(node.__category, node.__text, node.__key);
     }
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
     createDOM(config) {
         const tag = 'hashtag';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/nodes/ImageNode.d.ts

@@ -12,7 +12,7 @@ export interface ImagePayload {
 declare function convertImageElement(domNode: any): {
     node: ImageNode;
 };
-export declare type SerializedImageNode = Spread<{
+export type SerializedImageNode = Spread<{
     altText: string;
     maxWidth: number | string;
     src: string;

package/lib/esm/components/Editor/nodes/ImageNode.js

@@ -104,18 +104,18 @@ function convertImageElement(domNode) {
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 export class ImageNode extends DecoratorNode {
-    constructor(src, altText, maxWidth, key) {
-        super(key);
-        this.__src = src;
-        this.__altText = altText;
-        this.__maxWidth = maxWidth;
-    }
     static getType() {
         return 'image';
     }
     static clone(node) {
         return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__key);
     }
+    constructor(src, altText, maxWidth, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+    }
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/esm/components/Editor/nodes/MentionNode.d.ts

@@ -1,7 +1,7 @@
 import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
 import { SCUserType } from '@selfcommunity/types';
 import { DOMConversionMap } from 'lexical/LexicalNode';
-export declare type SerializedMentionNode = Spread<{
+export type SerializedMentionNode = Spread<{
     user: SCUserType;
     type: 'mention';
     version: 1;

package/lib/esm/components/Editor/nodes/MentionNode.js

@@ -22,16 +22,16 @@ function convertMentionElement(domNode) {
     };
 }
 export class MentionNode extends TextNode {
-    constructor(user, text, key) {
-        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
-        this.__user = user;
-    }
     static getType() {
         return 'mention';
     }
     static clone(node) {
         return new MentionNode(node.__user, node.__text, node.__key);
     }
+    constructor(user, text, key) {
+        super(text !== null && text !== void 0 ? text : `@${user.username}`, key);
+        this.__user = user;
+    }
     createDOM(config) {
         const tag = 'mention';
         const dom = document.createElement(tag);

package/lib/esm/components/Editor/plugins/ApiPlugin.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type ApiRef = {
+export type ApiRef = {
     focus: () => void;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ApiRef>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<ApiRef>>;
 export default _default;

package/lib/esm/components/Editor/plugins/EmojiPlugin.js

@@ -14,14 +14,16 @@ function Emoji({ editor, className = '', isLessonCommentEditor = false }) {
     const handleOpen = (event) => {
         setEmojiAnchorEl(event.currentTarget);
     };
-    const handleEmojiClick = (emojiData, event) => {
+    const handleEmojiClick = (emojiData) => {
         editor.focus();
         editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
     };
     if (isMobile) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), slots: {
+                    transition: Fade
+                }, anchorOrigin: isLessonCommentEditor ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'top', horizontal: 'right' }, transformOrigin: isLessonCommentEditor ? { vertical: 'top', horizontal: 'right' } : { vertical: 'bottom', horizontal: 'left' }, sx: (theme) => {
                     return { zIndex: theme.zIndex.tooltip };
                 } }, { children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) }))] }));
 }

package/lib/esm/components/Editor/plugins/FloatingLinkPlugin.js

@@ -93,10 +93,12 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     }
     return (_jsx(Root, Object.assign({ className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" }, { children: _jsx(Paper, { children: _jsx(TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
-                }, InputProps: {
-                    endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
-                                    setIsLink(false);
-                                } }, { children: _jsx(Icon, { children: "close" }) })), _jsx(IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: _jsx(Icon, { children: "check" }) }))] })))
+                }, slotProps: {
+                    input: {
+                        endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(IconButton, Object.assign({ size: "small", tabIndex: 0, onClick: () => {
+                                        setIsLink(false);
+                                    } }, { children: _jsx(Icon, { children: "close" }) })), _jsx(IconButton, Object.assign({ size: "small", tabIndex: 1, onClick: handleLinkSubmission }, { children: _jsx(Icon, { children: "check" }) }))] })))
+                    }
                 } }) }) })));
 }
 function useFloatingLinkEditorToolbar(editor) {

package/lib/esm/components/Editor/plugins/MediaPlugin.d.ts

@@ -11,4 +11,4 @@ export interface MediaPluginProps {
     onMediaAdd?: (media: SCMediaType) => void | null;
     isUploading?: (boolean: any) => void;
 }
-export default function MediaPlugin(props: MediaPluginProps): JSX.Element;
+export default function MediaPlugin(props: MediaPluginProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/Editor/plugins/MentionsPlugin.d.ts

@@ -1,9 +1,9 @@
-declare type MentionMatch = {
+type MentionMatch = {
     leadOffset: number;
     matchingString: string;
     replaceableString: string;
 };
-declare type Resolution = {
+type Resolution = {
     match: MentionMatch;
     range: Range;
 };

package/lib/esm/components/Editor/shared/useDecorators.d.ts

@@ -7,10 +7,10 @@
  */
 import type { LexicalEditor } from 'lexical';
 import * as React from 'react';
-declare type ErrorBoundaryProps = {
+type ErrorBoundaryProps = {
     children: JSX.Element;
     onError: (error: Error) => void;
 };
-export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
 export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
 export {};

package/lib/esm/components/Event/Skeleton.js

@@ -19,7 +19,6 @@ const classes = {
     skeletonDetailFirstDivider: `${PREFIX}-skeleton-detail-first-divider`,
     skeletonDetailSecondDivider: `${PREFIX}-skeleton-detail-second-divider`,
     skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
-    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
     skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`,
     skeletonSnippetImage: `${PREFIX}-skeleton-snippet-image`,
     skeletonSnippetAction: `${PREFIX}-skeleton-snippet-action`
@@ -78,7 +77,7 @@ export default function EventSkeleton(inProps) {
         contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] })), _jsx(CardActions, Object.assign({ className: classes.skeletonDetailActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "80%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "column", marginY: "5px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "67%", height: "25px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "16px" })] })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] })), _jsx(CardActions, Object.assign({ className: classes.skeletonPreviewActions }, { children: actions !== undefined ? actions : _jsx(Skeleton, { variant: "rounded", width: 100, height: 30 }) }))] })));
     }
     else {
         contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== undefined ? (actions) : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));

package/lib/esm/components/EventAutocomplete/EventAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
@@ -14,7 +14,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Event Autocomplete component. Learn about the available props and the CSS API.
@@ -70,7 +70,7 @@ const EventAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (e, value) => {
+    const handleChange = (_e, value) => {
         setValue(value);
     };
     // Render
@@ -81,11 +81,14 @@ const EventAutocomplete = (inProps) => {
         //   ));
         // }}
         renderOption: (props, option, { inputValue }) => {
+            const { key } = props, rest = __rest(props, ["key"]);
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
+            return (_jsxs(Box, Object.assign({ component: "li" }, rest, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] }), key));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'events', endAdornment: (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) })
+                } })));
         } }, rest)));
 };
 export default EventAutocomplete;

package/lib/esm/components/EventForm/EventAddress.js

@@ -84,7 +84,7 @@ export default function EventAddress(inProps) {
             (event.live_stream && event.live_stream.created_at);
     }, [liveStreamEnabled, (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission, event]);
     // HOOKS
-    const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
+    const { isLoaded, geocodingApiKey, placesLibrary } = useSCGoogleApiLoader();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
@@ -132,9 +132,9 @@ export default function EventAddress(inProps) {
         }
         if (inputValue.length >= 3) {
             const newTimeoutId = setTimeout(() => {
-                const autocompleteService = new window.google.maps.places.AutocompleteService();
+                const autocompleteService = new placesLibrary.AutocompleteService(); // TODO - deprecated, to fix when possibile
                 autocompleteService.getPlacePredictions({ input: inputValue }, (predictions, status) => {
-                    if (status === window.google.maps.places.PlacesServiceStatus.OK && predictions) {
+                    if (status === placesLibrary.PlacesServiceStatus.OK && predictions) {
                         setSuggestions(predictions.map((prediction) => ({
                             description: prediction.description,
                             id: prediction.place_id
@@ -151,7 +151,11 @@ export default function EventAddress(inProps) {
     if (!isInPersonTabActive && !isOnlineTabActive && !isLiveTabActive) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && (_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && (_jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
-                            endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && (_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && (_jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, slotProps: {
+                                input: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) })
+                            } }))) })), isOnlineTabActive && location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), slotProps: {
+                            input: {
+                                endAdornment: _jsx(Icon, { children: "play_circle_outline" })
+                            }
                         }, value: event ? event.link : '', onChange: handleLinkChange })), isLiveTabActive && location === SCEventLocationType.LIVESTREAM && (_jsxs(_Fragment, { children: [_jsx(LiveStream, { template: SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: _jsx(_Fragment, {}) }), _jsx(LiveStreamFormSettings, { settings: liveStream.settings || LIVESTREAM_DEFAULT_SETTINGS, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }