@selfcommunity/react-ui 0.8.0-embeds.16 → 0.8.0-live.40

package/lib/cjs/components/ConsentSolution/ConsentSolution.js

@@ -253,9 +253,9 @@ function ConsentSolution(inProps) {
             return null;
         }
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { className: classes.title, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { className: classes.content, dividers: true, ref: contentDialog, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: (0, legalPages_1.getDocumentBody)(doc)
-                        } }) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
+                        } }) }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { className: classes.consent, dividers: true, children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "error", className: classes.alertAcceptDocument, children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", { onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton, children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", className: classes.acceptConditions, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) }) }))] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, { className: classes.actions, children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) }))] })] }));
     };
     /**
      * Render document detail view
@@ -265,13 +265,13 @@ function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { className: (0, classnames_1.default)(classes.title, classes.titleBack), children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }) }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { className: classes.content, dividers: true, children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) }), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) })] })] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { className: (0, classnames_1.default)(classes.title, classes.titleBack), children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }) }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { className: classes.content, dividers: true, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) }), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, { className: classes.actions, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) })] })] }));
     };
     /**
      * If there's no authUserId, component is hidden.

package/lib/cjs/components/ConsentSolution/Skeleton.js

@@ -46,6 +46,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function ConsentSolutionSkeleton() {
     const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, { className: classes.root, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { className: classes.title, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { className: classes.content, dividers: true, children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.consent, dividers: true, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { className: classes.actions, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }) })] }));
 }
 exports.default = ConsentSolutionSkeleton;

package/lib/cjs/components/CreateEventButton/CreateEventButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from '@mui/material/Button/Button';
-import { EventFormProps } from '../EventForm';
+import { EventFormDialogProps } from '../EventFormDialog';
 export interface CreateEventButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -10,7 +10,7 @@ export interface CreateEventButtonProps extends ButtonProps {
      * Props to spread to CreateGroup component
      * @default empty object
      */
-    EventFormProps?: EventFormProps;
+    EventFormDialogComponentProps?: EventFormDialogProps;
     /**
      * Any other properties
      */

package/lib/cjs/components/CreateEventButton/CreateEventButton.js

@@ -9,7 +9,7 @@ const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"));
 const types_1 = require("@selfcommunity/types");
 const PREFIX = 'SCCreateEventButton';
 const classes = {
@@ -40,13 +40,13 @@ const Root = (0, styles_1.styled)(material_1.Button, {
  * @param inProps
  */
 function CreateEventButton(inProps) {
-    var _a;
+    var _a, _b;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className, EventFormProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "EventFormProps", "children"]);
+    const { className, EventFormDialogComponentProps = {}, children } = props, rest = tslib_1.__rest(props, ["className", "EventFormDialogComponentProps", "children"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // STATE
@@ -78,6 +78,6 @@ function CreateEventButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !EventFormProps.event && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "add" })) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormProps, { open: true, onClose: handleClick }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, variant: "contained", color: "secondary", startIcon: !((_b = EventFormDialogComponentProps.EventFormComponentProps) === null || _b === void 0 ? void 0 : _b.event) && (0, jsx_runtime_1.jsx)(material_1.Icon, { fontSize: "small", children: "add" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton", defaultMessage: "ui.createEventButton" }) })), open && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({}, EventFormDialogComponentProps, { open: true, onClose: handleClick }))] }));
 }
 exports.default = CreateEventButton;

package/lib/cjs/components/CreateEventWidget/CreateEventWidget.js

@@ -62,6 +62,6 @@ function CreateEventWidget(inProps) {
     if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.calendar, fontSize: "large" }, { children: "CalendarIcon" }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.spaging }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spaging })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({}, CreateEventButtonComponentProps)) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: `${preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), (0, jsx_runtime_1.jsx)(material_1.Icon, { className: classes.calendar, fontSize: "large", children: "CalendarIcon" })] }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { className: classes.content, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", className: classes.title, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", className: classes.spaging, children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spaging })] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, { className: classes.actions, children: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({}, CreateEventButtonComponentProps)) })] })));
 }
 exports.default = CreateEventWidget;

package/lib/cjs/components/CreateEventWidget/Skeleton.js

@@ -20,6 +20,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
     slot: 'SkeletonRoot'
 })(() => ({}));
 function CreateEventWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spacing })] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, { className: classes.root, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: "wave", width: "100%", height: "110px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.calendar, variant: "rounded", animation: "wave", width: "50px", height: "50px" })] }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { className: classes.content, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.title, animation: "wave", width: "26%", height: "30px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.spacing, animation: "wave", width: "100%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.spacing })] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, { className: classes.actions, children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rounded", width: "138px", height: "36px" }) })] }));
 }
 exports.default = CreateEventWidgetSkeleton;

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.d.ts

@@ -0,0 +1,49 @@
+import { ButtonProps } from '@mui/material/Button/Button';
+import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
+import { CreateLiveStreamDialogProps } from '../CreateLiveStreamDialog';
+export interface CreateLiveStreamButtonProps extends ButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Props to spread to CreateGroup component
+     * @default empty object
+     */
+    CreateLiveStreamDialogComponentProps?: CreateLiveStreamDialogProps;
+    /**
+     * On click callback function
+     * @default null
+     */
+    onButtonClick?: (event: any, reason: any) => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CreateLiveStreamButton component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLiveStreamButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLiveStreamButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function CreateLiveStreamButton(inProps: CreateLiveStreamButtonProps): JSX.Element;

package/lib/cjs/components/CreateLiveStreamButton/CreateLiveStreamButton.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveStreamDialog"));
+const PREFIX = 'SCCreateLivestreamButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS CreateLiveStreamButton component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLiveStreamButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLiveStreamButton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function CreateLiveStreamButton(inProps) {
+    var _a;
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, CreateLiveStreamDialogComponentProps = {}, onSuccess, children } = props, rest = tslib_1.__rest(props, ["className", "CreateLiveStreamDialogComponentProps", "onSuccess", "children"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // STATE
+    const [open, setOpen] = react_1.default.useState(false);
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    // TODO
+    const liveStreamEnabled = true;
+    /* const liveStreamEnabled = useMemo(
+          () =>
+              preferences &&
+              features &&
+              features.includes(SCFeatureName.LIVE_STREAM) &&
+              SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+              preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value,
+          [preferences, features]
+      ); */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const canCreateLiveStream = (0, react_1.useMemo)(() => true /* scUserContext?.user?.permission?.create_livestream */, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    /**
+     * Handle close
+     */
+    const handleClose = () => {
+        setOpen((o) => !o);
+    };
+    /**
+     * Handle close
+     */
+    const handleSuccess = (data) => {
+        onSuccess && onSuccess(data);
+        setOpen((o) => !o);
+    };
+    /**
+     * If there's no authUserId, component is hidden.
+     */
+    if (!liveStreamEnabled || !canCreateLiveStream || !authUserId) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: "contained", color: "secondary", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_camera" }) }, rest, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createEventButton.goLive", defaultMessage: "ui.createEventButton.goLive" }) })), open && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleClose, onSuccess: handleSuccess }, CreateLiveStreamDialogComponentProps))] }));
+}
+exports.default = CreateLiveStreamButton;

package/lib/cjs/components/CreateLiveStreamButton/index.d.ts

@@ -0,0 +1,3 @@
+import CreateLiveStreamButton, { CreateLiveStreamButtonProps } from './CreateLiveStreamButton';
+export default CreateLiveStreamButton;
+export { CreateLiveStreamButtonProps };

package/lib/cjs/components/CreateLiveStreamButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CreateLiveStreamButton_1 = tslib_1.__importDefault(require("./CreateLiveStreamButton"));
+exports.default = CreateLiveStreamButton_1.default;

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts

@@ -0,0 +1,51 @@
+import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface CreateLiveStreamDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default null
+     */
+    onClose?: () => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+ |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
+
+
+
+ * @param inProps
+ */
+export default function CreateLiveStreamDialog(inProps: CreateLiveStreamDialogProps): JSX.Element;

package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const EventForm_1 = tslib_1.__importDefault(require("../EventForm"));
+const LiveStreamSelector_1 = tslib_1.__importDefault(require("./LiveStreamSelector/LiveStreamSelector"));
+const types_2 = require("./types");
+const LiveStreamForm_1 = tslib_1.__importDefault(require("../LiveStreamForm"));
+const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
+const material_1 = require("@mui/material");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    content: `${constants_1.PREFIX}-content`
+};
+const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    paddingBottom: '0px !important',
+    [`& .${classes.title}`]: {
+        display: 'flex'
+    },
+    [`& .${classes.content}`]: {
+        paddingBottom: 0
+    }
+}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+});
+/**
+ *> API documentation for the Community-JS CreateLiveStreamDialog component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {CreateLivestreamDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCCreateLivestreamDialog` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+ |content|.SCCreateLivestreamDialog-content|Styles applied to the content element.|
+
+
+
+ * @param inProps
+ */
+function CreateLiveStreamDialog(inProps) {
+    //PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const liveStreamEnabled = (0, react_1.useMemo)(() => true, 
+    /* preferences &&
+            features &&
+            features.includes(SCFeatureName.LIVE_STREAM) &&
+            SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+            preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value*/ [preferences, features]);
+    const onlyStaffLiveStreamEnabled = (0, react_1.useMemo)(() => true /* preferences[SCPreferences.CONFIGURATIONS_LIVESTREAM_ONLY_STAFF_ENABLED].value */, [preferences]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => true /* liveStreamEnabled && (scUserContext?.user?.permission?.create_livestream || (onlyStaffLiveStreamEnabled && UserUtils.isStaff(scUserContext.user)))*/, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, onlyStaffLiveStreamEnabled]);
+    console.log(canCreateLiveStream);
+    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const onlyStaffEventEnabled = (0, react_1.useMemo)(() => preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ONLY_STAFF_ENABLED].value, [preferences]);
+    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return eventsEnabled && (((_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event) || true || (onlyStaffEventEnabled && react_core_1.UserUtils.isStaff(scUserContext.user))); }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, eventsEnabled, onlyStaffEventEnabled]);
+    console.log(canCreateEvent);
+    const canCreateLiveStreamEvent = (0, react_1.useMemo)(() => Boolean(canCreateLiveStream && canCreateEvent), [canCreateEvent, canCreateLiveStream]);
+    console.log(canCreateLiveStreamEvent);
+    // STATE
+    const [step, setStep] = (0, react_1.useState)(canCreateLiveStreamEvent ? types_2.CreateLiveStreamStep.SELECT_TYPE : types_2.CreateLiveStreamStep.CREATE_LIVE);
+    const [liveType, setLiveType] = (0, react_1.useState)(canCreateLiveStreamEvent ? null : types_2.LiveStreamType.DIRECT_LIVE);
+    // HANDLER
+    const handleLiveTypeSelected = (0, react_1.useCallback)((l) => {
+        setLiveType(l);
+    }, []);
+    const handleLiveTypeSelectedNext = (0, react_1.useCallback)((l) => {
+        setLiveType(l);
+        setStep(types_2.CreateLiveStreamStep.CREATE_LIVE);
+    }, []);
+    const handleBack = (0, react_1.useCallback)((l) => {
+        setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
+    }, []);
+    const handleSubmit = (0, react_1.useCallback)((e) => {
+        onSuccess && onSuccess(e);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!canCreateLiveStreamEvent) {
+            setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
+        }
+    }, [canCreateLiveStreamEvent]);
+    // user must be logged
+    if (!scUserContext.user) {
+        return null;
+    }
+    /**
+     * Renders root object
+     */
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.title, component: 'span', children: [step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }), children: "Back" })), (0, jsx_runtime_1.jsx)(material_1.Box, { component: 'span', children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) })] }), fullWidth: true, open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.content, children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? (0, jsx_runtime_1.jsx)(EventForm_1.default, { onSuccess: handleSubmit }) : (0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit }) }))] }) })));
+}
+exports.default = CreateLiveStreamDialog;

package/lib/cjs/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.d.ts

@@ -0,0 +1,46 @@
+import { LiveStreamType } from '../types';
+export interface LiveStreamSelectorProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Option selected
+     */
+    liveSelected?: LiveStreamType;
+    /**
+     * Callback on selected option
+     * @param LiveStreamType
+     */
+    onLiveSelected?: (live: LiveStreamType) => void;
+    /**
+     * On success callback function
+     * @default null
+     */
+    onNext?: (live: LiveStreamType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
+ *
+ #### Import
+ ```jsx
+ import {LiveStreamSelector} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+ The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function LiveStreamSelector(inProps: LiveStreamSelectorProps): JSX.Element;