@camunda/camunda-composite-components 0.20.2 → 0.20.3

package/lib/esm/src/components/c3-navigation/c3-navigation-appbar/c3-navigation-appbar.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
 import { Close } from "@carbon/react/icons";
 import { styled } from "styled-components";
 import { useOnClickOutside } from "../helpers";
@@ -48,33 +49,29 @@ const OrgPickerModal = ({ isOpen, onCancel, orgs, activeOrg, loadingStatus, appT
         return (!isConsoleOrModeler &&
             getClustersToRender(clusters, activeOrg, appToNavigateTo).length === 0);
     });
-    return (React.createElement(Modal, { danger: true, open: isOpen, modalHeading: "Select a team", onRequestClose: onCancel, passiveModal: true, loadingStatus: loadingStatus, size: "sm" },
-        React.createElement("div", { style: { marginLeft: "-1rem" } },
-            React.createElement(FormLabel, { style: {
-                    paddingTop: "15px",
-                    paddingLeft: "1rem",
-                } }, hasNoTeams
-                ? "No teams found"
-                : hasNoTeamsWithClusters
-                    ? "No teams with clusters found"
-                    : "Teams"),
-            React.createElement("div", { style: {
-                    marginTop: "-1rem",
-                } },
-                React.createElement(SideNavItems, null, Object.values(orgs ?? {})?.map(({ org, clusters }) => {
-                    const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
-                    const toOrg = getOrgLink(appToNavigateTo, org.uuid, domain ?? "");
-                    if (isConsoleOrModeler) {
-                        return (React.createElement(SideNavLink, { key: org?.uuid, href: toOrg }, org?.name));
-                    }
-                    const clustersToRender = getClustersToRender(clusters, activeOrg, appToNavigateTo);
-                    if (clustersToRender.length === 0) {
-                        return null;
-                    }
-                    return (React.createElement(SideNavMenu, { key: org?.uuid, title: org?.name }, clustersToRender?.map((cluster) => {
-                        return (React.createElement(SideNavMenuItem, { key: cluster.uuid, href: cluster.endpoints[appToNavigateTo] }, cluster.name));
-                    })));
-                }))))));
+    return (_jsx(Modal, { danger: true, open: isOpen, modalHeading: "Select a team", onRequestClose: onCancel, passiveModal: true, loadingStatus: loadingStatus, size: "sm", children: _jsxs("div", { style: { marginLeft: "-1rem" }, children: [_jsx(FormLabel, { style: {
+                        paddingTop: "15px",
+                        paddingLeft: "1rem",
+                    }, children: hasNoTeams
+                        ? "No teams found"
+                        : hasNoTeamsWithClusters
+                            ? "No teams with clusters found"
+                            : "Teams" }), _jsx("div", { style: {
+                        marginTop: "-1rem",
+                    }, children: _jsx(SideNavItems, { children: Object.values(orgs ?? {})?.map(({ org, clusters }) => {
+                            const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
+                            const toOrg = getOrgLink(appToNavigateTo, org.uuid, domain ?? "");
+                            if (isConsoleOrModeler) {
+                                return (_jsx(SideNavLink, { href: toOrg, children: org?.name }, org?.uuid));
+                            }
+                            const clustersToRender = getClustersToRender(clusters, activeOrg, appToNavigateTo);
+                            if (clustersToRender.length === 0) {
+                                return null;
+                            }
+                            return (_jsx(SideNavMenu, { title: org?.name, children: clustersToRender?.map((cluster) => {
+                                    return (_jsx(SideNavMenuItem, { href: cluster.endpoints[appToNavigateTo], children: cluster.name }, cluster.uuid));
+                                }) }, org?.uuid));
+                        }) }) })] }) }));
 };
 const SubElementWrapper = styled.ul `
 	.cds--side-nav__submenu[aria-expanded="true"] + .cds--side-nav__menu {
@@ -294,71 +291,59 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
     const appBarElements = appBar.elements || (clusters || clustersByOrgId ? appElements : null);
     const [isOrgPickerModalOpen, setIsOrgPickerModalOpen] = useState(false);
     const orgName = activeOrg?.name || navbar.orgName;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HeaderGlobalAction
-        // eslint-disable-next-line
-        // @ts-ignore
-        , { 
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderGlobalAction
             // eslint-disable-next-line
             // @ts-ignore
-            ref: iconRef, "aria-label": "Camunda components", isActive: appBar.isOpen, onClick: () => {
-                toggleAppbar(!appBar.isOpen);
-            }, tooltipAlignment: "start", 
-            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-            /* @ts-ignore */
-            leaveDelayMs: 100 }, appBar.isOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
-        React.createElement(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
-                setIsOrgPickerModalOpen(false);
-            }, loadingStatus: loadingStatus, domain: domain }),
-        React.createElement(NavWrapper, null,
-            React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBar.isOpen, isPersistent: false },
-                React.createElement(SideNavItems, null,
-                    orgName && (React.createElement("li", null,
-                        React.createElement(OrgNameWrapper, null,
-                            React.createElement(FormLabel, null, "Organization"),
-                            React.createElement(ActiveOrgName, { className: "textPrimary", title: orgName }, orgName)))),
-                    React.createElement("li", null, navbar.elements.length > 0 && (React.createElement(HeaderSideNavItems, { hasDivider: true }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
-                            if (element.routeProps.onClick) {
-                                element.routeProps.onClick();
-                            }
-                            if (appBar.closeOnClick !== false) {
-                                toggleAppbar(false);
-                            }
-                        } }, element.label)))))),
-                    React.createElement("li", null,
-                        React.createElement(SubElementWrapper, { "$expanded": appBar.isOpen }, appBarElements &&
-                            appBarElements.map((element) => {
-                                if (element.subElements && element.subElements.length > 0) {
-                                    return (React.createElement(SideNavMenu, { large: true, title: element.label, key: element.key }, element.subElements.map((subElement) => (React.createElement(SideNavMenuItem, { as: subElement.routeProps && forwardRef, key: subElement.key, href: subElement.href, target: subElement.href ? subElement.target : undefined, isActive: subElement.isActive || subElement.active, ...subElement.routeProps, onClick: () => {
-                                            if (subElement.onClick) {
-                                                subElement.onClick();
-                                            }
-                                            if (subElement.routeProps?.onClick) {
-                                                subElement.routeProps.onClick();
-                                            }
-                                            if (appBar.closeOnClick !== false) {
-                                                toggleAppbar(false);
-                                            }
-                                            if (appBar.elementClicked) {
-                                                appBar.elementClicked(subElement.key);
-                                            }
-                                        } }, subElement.label)))));
-                                }
-                                else {
-                                    return (React.createElement(SideNavLink, { as: element.routeProps && forwardRef, key: element.key, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
-                                            if (element.onClick) {
-                                                element.onClick();
-                                            }
-                                            if (element.routeProps?.onClick) {
+            , { 
+                // eslint-disable-next-line
+                // @ts-ignore
+                ref: iconRef, "aria-label": "Camunda components", isActive: appBar.isOpen, onClick: () => {
+                    toggleAppbar(!appBar.isOpen);
+                }, tooltipAlignment: "start", 
+                /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+                /* @ts-ignore */
+                leaveDelayMs: 100, children: appBar.isOpen ? _jsx(Close, { size: 20 }) : _jsx(C3AppMenuIcon, { size: 20 }) }), _jsx(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
+                    setIsOrgPickerModalOpen(false);
+                }, loadingStatus: loadingStatus, domain: domain }), _jsx(NavWrapper, { children: _jsx(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBar.isOpen, isPersistent: false, children: _jsxs(SideNavItems, { children: [orgName && (_jsx("li", { children: _jsxs(OrgNameWrapper, { children: [_jsx(FormLabel, { children: "Organization" }), _jsx(ActiveOrgName, { className: "textPrimary", title: orgName, children: orgName })] }) })), _jsx("li", { children: navbar.elements.length > 0 && (_jsx(HeaderSideNavItems, { hasDivider: true, children: navbar.elements.map((element) => (_jsx(HeaderMenuItem, { as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps, onClick: () => {
+                                            if (element.routeProps.onClick) {
                                                 element.routeProps.onClick();
                                             }
                                             if (appBar.closeOnClick !== false) {
                                                 toggleAppbar(false);
                                             }
-                                            if (appBar.elementClicked) {
-                                                appBar.elementClicked(element.key);
+                                        }, children: element.label }, element.key))) })) }), _jsx("li", { children: _jsx(SubElementWrapper, { "$expanded": appBar.isOpen, children: appBarElements &&
+                                        appBarElements.map((element) => {
+                                            if (element.subElements && element.subElements.length > 0) {
+                                                return (_jsx(SideNavMenu, { large: true, title: element.label, children: element.subElements.map((subElement) => (_jsx(SideNavMenuItem, { as: subElement.routeProps && forwardRef, href: subElement.href, target: subElement.href ? subElement.target : undefined, isActive: subElement.isActive || subElement.active, ...subElement.routeProps, onClick: () => {
+                                                            if (subElement.onClick) {
+                                                                subElement.onClick();
+                                                            }
+                                                            if (subElement.routeProps?.onClick) {
+                                                                subElement.routeProps.onClick();
+                                                            }
+                                                            if (appBar.closeOnClick !== false) {
+                                                                toggleAppbar(false);
+                                                            }
+                                                            if (appBar.elementClicked) {
+                                                                appBar.elementClicked(subElement.key);
+                                                            }
+                                                        }, children: subElement.label }, subElement.key))) }, element.key));
                                             }
-                                        }, href: element.href, target: element.href ? element.target : undefined }, element.label));
-                                }
-                            }))))))));
+                                            else {
+                                                return (_jsx(SideNavLink, { as: element.routeProps && forwardRef, large: true, isActive: element.active, ...element.routeProps, onClick: () => {
+                                                        if (element.onClick) {
+                                                            element.onClick();
+                                                        }
+                                                        if (element.routeProps?.onClick) {
+                                                            element.routeProps.onClick();
+                                                        }
+                                                        if (appBar.closeOnClick !== false) {
+                                                            toggleAppbar(false);
+                                                        }
+                                                        if (appBar.elementClicked) {
+                                                            appBar.elementClicked(element.key);
+                                                        }
+                                                    }, href: element.href, target: element.href ? element.target : undefined, children: element.label }, element.key));
+                                            }
+                                        }) }) })] }) }) })] }));
 };

package/lib/esm/src/components/c3-navigation/c3-navigation-appbar/components.d.ts

@@ -1,6 +1,2 @@
-import { FC } from "react";
-import { SideNavProps } from "carbon-components-react";
 export declare const NavWrapper: any;
-export declare const SideNav: FC<SideNavProps & {
-    ref: unknown;
-}>;
+export declare const SideNav: any;

package/lib/esm/src/components/c3-navigation/c3-navigation-appbar/components.js

@@ -5,6 +5,7 @@ export const NavWrapper = styled.div `
 		display: none;
 	}
 `;
+// Use a minimal prop typing to wrap Carbon's SideNav without relying on legacy carbon-components-react types
 export const SideNav = styled(CarbonSideNav) `
 	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
 	display: grid;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-info-sidebar.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { C3NavigationInfoSideBarProps } from "./c3-navigation-sidebar.types";
 declare const C3InfoSidebar: FC<{
     sideBar: C3NavigationInfoSideBarProps;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-info-sidebar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SwitcherDivider } from "./components";
 import { Help } from "@carbon/react/icons";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
@@ -8,34 +8,26 @@ const C3InfoSidebar = ({ sideBar, }) => {
     const { enableLogs } = useC3UserConfiguration();
     if (version && enableLogs)
         console.warn("The `version` prop in the info sidebar is deprecated and will be removed in a future release. Please set `version` in the `userSideBar` prop instead.");
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
+    return (_jsx(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "Info Sidebar",
-        }, icon: React.createElement(Help, { size: 20 }), bottomChildren: version !== undefined && (React.createElement(React.Fragment, null,
-            React.createElement(SwitcherDivider, null),
-            React.createElement("span", { className: "cds--switcher__item", style: {
-                    padding: "var(--cds-spacing-05)",
-                    paddingTop: "var(--cds-spacing-03)",
-                    paddingBottom: 0,
-                    color: "var(--cds-text-primary)",
-                    fontSize: "var(--cds-body-01-font-size)",
-                    fontWeight: "var(--cds-body-01-font-weight)",
-                    lineHeight: "var(--cds-body-01-line-height)",
-                    letterSpacing: "var(--cds-body-01-letter-spacing)",
-                } },
-                "Version ",
-                version),
-            React.createElement("span", { className: "cds--switcher__item", style: {
-                    paddingRight: "var(--cds-spacing-05)",
-                    paddingLeft: "var(--cds-spacing-05)",
-                    color: "var(--cds-text-secondary)",
-                    fontSize: "var(--cds-label-01-font-size)",
-                    fontWeight: "var(--cds-label-01-font-weight)",
-                    lineHeight: "var(--cds-label-01-line-height)",
-                    letterSpacing: "var(--cds-label-01-letter-spacing)",
-                } },
-                `© Camunda Services GmbH ${new Date().getFullYear()}`,
-                React.createElement("br", null),
-                " All rights reserved."))) }));
+        }, icon: _jsx(Help, { size: 20 }), bottomChildren: version !== undefined && (_jsxs(_Fragment, { children: [_jsx(SwitcherDivider, {}), _jsxs("span", { className: "cds--switcher__item", style: {
+                        padding: "var(--cds-spacing-05)",
+                        paddingTop: "var(--cds-spacing-03)",
+                        paddingBottom: 0,
+                        color: "var(--cds-text-primary)",
+                        fontSize: "var(--cds-body-01-font-size)",
+                        fontWeight: "var(--cds-body-01-font-weight)",
+                        lineHeight: "var(--cds-body-01-line-height)",
+                        letterSpacing: "var(--cds-body-01-letter-spacing)",
+                    }, children: ["Version ", version] }), _jsxs("span", { className: "cds--switcher__item", style: {
+                        paddingRight: "var(--cds-spacing-05)",
+                        paddingLeft: "var(--cds-spacing-05)",
+                        color: "var(--cds-text-secondary)",
+                        fontSize: "var(--cds-label-01-font-size)",
+                        fontWeight: "var(--cds-label-01-font-weight)",
+                        lineHeight: "var(--cds-label-01-line-height)",
+                        letterSpacing: "var(--cds-label-01-letter-spacing)",
+                    }, children: [`© Camunda Services GmbH ${new Date().getFullYear()}`, _jsx("br", {}), " All rights reserved."] })] })) }));
 };
 export default C3InfoSidebar;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar-element.d.ts

@@ -3,7 +3,7 @@ import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
 declare const C3NavigationSidebarElement: (props: {
     element: C3NavigationElementProps;
     index: number;
-    itemTabIndex?: number | undefined;
+    itemTabIndex?: number;
     sideBar: C3NavigationSideBarProps;
     setSideBarOpen: (open: boolean) => void;
     scrollBarWidth: number;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar-element.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, SideNavLink } from "@carbon/react";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SwitcherDivider } from "./components";
 import styled from "styled-components";
 const Row = styled.div `
@@ -37,31 +38,26 @@ const C3NavigationSidebarElement = (props) => {
         handleSetIsOverflown();
         return () => window.removeEventListener("resize", handleSetIsOverflown);
     }, []);
-    return (React.createElement(React.Fragment, null,
-        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
-        React.createElement(Row, null,
-            React.createElement(Element, { style: {
-                    width: overflowMenu
-                        ? `calc(14rem - ${props.scrollBarWidth}px)`
-                        : `calc(16rem - ${props.scrollBarWidth}px)`,
-                    ...(props.index === 0 &&
-                        (!("elements" in props.sideBar) || !props.sideBar.elements)
-                        ? { marginTop: "1.5rem" }
-                        : {}),
-                }, size: "sm", kind: props.element.kind ?? "ghost", className: `cds--switcher__item ${isActive ? "cds--side-nav__item--active" : ""}`, onClick: () => {
-                    if (props.element.onClick) {
-                        props.element.onClick();
-                    }
-                    if (props.sideBar.closeOnClick !== false) {
-                        props.setSideBarOpen(false);
-                    }
-                }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon, ...(isNavLink ? { isActive } : {}) },
-                React.createElement("span", { ref: sideBarElementRef, title: isOverflown ? props.element.label : "", style: {
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        width: "100%",
-                    } }, props.element.label)),
-            overflowMenu)));
+    return (_jsxs(_Fragment, { children: [props.element.preceedingDivider && _jsx(SwitcherDivider, {}), _jsxs(Row, { children: [_jsx(Element, { style: {
+                            width: overflowMenu
+                                ? `calc(14rem - ${props.scrollBarWidth}px)`
+                                : `calc(16rem - ${props.scrollBarWidth}px)`,
+                            ...(props.index === 0 &&
+                                (!("elements" in props.sideBar) || !props.sideBar.elements)
+                                ? { marginTop: "1.5rem" }
+                                : {}),
+                        }, size: "sm", kind: props.element.kind ?? "ghost", className: `cds--switcher__item ${isActive ? "cds--side-nav__item--active" : ""}`, onClick: () => {
+                            if (props.element.onClick) {
+                                props.element.onClick();
+                            }
+                            if (props.sideBar.closeOnClick !== false) {
+                                props.setSideBarOpen(false);
+                            }
+                        }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon, ...(isNavLink ? { isActive } : {}), children: _jsx("span", { ref: sideBarElementRef, title: isOverflown ? props.element.label : "", style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                width: "100%",
+                            }, children: props.element.label }) }), overflowMenu] })] }));
 };
 export default C3NavigationSidebarElement;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
 declare const C3NavigationSideBar: (props: {
     sideBar: C3NavigationSideBarProps;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useOnClickOutside } from "../helpers";
 import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
 import styled from "styled-components";
@@ -54,45 +55,36 @@ const C3NavigationSideBar = (props) => {
             }, 120);
         }
     }, [isOpen]);
-    return (React.createElement(Wrapper, null,
-        React.createElement(HeaderGlobalAction
-        // eslint-disable-next-line
-        // @ts-ignore
-        , { 
+    return (_jsxs(Wrapper, { children: [_jsx(HeaderGlobalAction
             // eslint-disable-next-line
             // @ts-ignore
-            ref: setIconRef, "aria-label": sideBar.tooltip ?? `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
-                setIsOpen(!isOpen);
-            }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center", 
-            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-            /* @ts-ignore */
-            leaveDelayMs: 100 }, icon),
-        React.createElement(HeaderPanel
-        // eslint-disable-next-line
-        // @ts-ignore
-        , { 
+            , { 
+                // eslint-disable-next-line
+                // @ts-ignore
+                ref: setIconRef, "aria-label": sideBar.tooltip ?? `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
+                    setIsOpen(!isOpen);
+                }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center", 
+                /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+                /* @ts-ignore */
+                leaveDelayMs: 100, children: icon }), _jsxs(HeaderPanel
             // eslint-disable-next-line
             // @ts-ignore
-            ref: setPanelRef, expanded: isOpen, id: id, style: { width: isOpen ? "calc(16rem)" : "0" } },
-            React.createElement(Stack, null,
-                children,
-                sideBar.elements &&
-                    sideBar.elements.length > 0 &&
-                    "customElements" in sideBar &&
-                    sideBar.customElements &&
-                    "activeOrganization" in sideBar.customElements &&
-                    !sideBar.customElements?.activeOrganization && React.createElement(SwitcherDivider, null),
-                sideBar.elements?.map((element, index) => (React.createElement(C3NavigationSidebarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex, scrollBarWidth: scrollBarWidth }))),
-                bottomChildren),
-            version,
-            React.createElement(BottomElements, null, sideBar.bottomElements &&
-                sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
-                        if (element.onClick) {
-                            element.onClick();
-                        }
-                        if (sideBar.closeOnClick !== false) {
-                            setIsOpen(false);
-                        }
-                    }, tabIndex: itemTabIndex, style: { width: `calc(16rem + 2px - ${scrollBarWidth}px)` } }, element.label)))))));
+            , { 
+                // eslint-disable-next-line
+                // @ts-ignore
+                ref: setPanelRef, expanded: isOpen, id: id, style: { width: isOpen ? "calc(16rem)" : "0" }, children: [_jsxs(Stack, { children: [children, sideBar.elements &&
+                                sideBar.elements.length > 0 &&
+                                "customElements" in sideBar &&
+                                sideBar.customElements &&
+                                "activeOrganization" in sideBar.customElements &&
+                                !sideBar.customElements?.activeOrganization && _jsx(SwitcherDivider, {}), sideBar.elements?.map((element, index) => (_jsx(C3NavigationSidebarElement, { element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex, scrollBarWidth: scrollBarWidth }, element.key))), bottomChildren] }), version, _jsx(BottomElements, { children: sideBar.bottomElements &&
+                            sideBar.bottomElements.map((element) => (_jsx(Button, { kind: element.kind, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
+                                    if (element.onClick) {
+                                        element.onClick();
+                                    }
+                                    if (sideBar.closeOnClick !== false) {
+                                        setIsOpen(false);
+                                    }
+                                }, tabIndex: itemTabIndex, style: { width: `calc(16rem + 2px - ${scrollBarWidth}px)` }, children: element.label }, element.key))) })] })] }));
 };
 export default C3NavigationSideBar;

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-notification-sidebar.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@carbon/react";
 import { Notification as NotificationIcon } from "@carbon/react/icons";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../assets/c3-icons";
 import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
@@ -82,30 +83,23 @@ export const C3NotificationSidebar = ({ sideBar }) => {
                 markAllAsReadSidebar();
         };
     }, []);
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
+    return (_jsxs(C3NavigationSideBar, { sideBar: {
             ...sideBar,
             ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
             callbacks: { beforeOpening, afterClosing },
-        }, icon: hasUnreadNotifications && !isFetching ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, "aria-label": "Notifications" })) },
-        React.createElement(PanelHeader, null,
-            React.createElement(PanelTitle, null, "Notifications"),
-            notifications.length > 0 && (
-            // eslint-disable-next-line
-            // @ts-ignore
-            React.createElement(DismissAllButton, { kind: "ghost", size: "sm", onClick: dismissAllSidebar }, "Dismiss all"))),
-        notifications.length > 0 ? (notifications.sort(sortNotificationsDescending).map((notification) => (React.createElement(C3NotificationContainer, { key: notification.uuid, onRead: () => {
-                if (notification.state === "new") {
-                    markAsRead(notification);
-                }
-            }, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
-                if (enabled && analytics) {
-                    analytics("notification-clicked-cta", notification.meta?.identifier);
-                }
-                if (onLinkClick) {
-                    onLinkClick(notification.meta);
-                }
-            }, unread: unreadNotifications.some((id) => id === notification.uuid), ...notification })))) : (React.createElement(EmptyState, null,
-            React.createElement(C3BellIcon, { size: 56 }),
-            React.createElement(EmptyStateTitle, null, "No notifications"),
-            React.createElement(EmptyStateDescription, null, "New updates regarding your processes, clusters and more will appear here.")))));
+        }, icon: hasUnreadNotifications && !isFetching ? (_jsx(C3NotificationsUnreadIcon, { size: 20 })) : (_jsx(NotificationIcon, { size: 20, "aria-label": "Notifications" })), children: [_jsxs(PanelHeader, { children: [_jsx(PanelTitle, { children: "Notifications" }), notifications.length > 0 && (
+                    // eslint-disable-next-line
+                    // @ts-ignore
+                    _jsx(DismissAllButton, { kind: "ghost", size: "sm", onClick: dismissAllSidebar, children: "Dismiss all" }))] }), notifications.length > 0 ? (notifications.sort(sortNotificationsDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => {
+                    if (notification.state === "new") {
+                        markAsRead(notification);
+                    }
+                }, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
+                    if (enabled && analytics) {
+                        analytics("notification-clicked-cta", notification.meta?.identifier);
+                    }
+                    if (onLinkClick) {
+                        onLinkClick(notification.meta);
+                    }
+                }, unread: unreadNotifications.some((id) => id === notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: "No notifications" }), _jsx(EmptyStateDescription, { children: "New updates regarding your processes, clusters and more will appear here." })] }))] }));
 };

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-sidebar-state-provider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useState } from "react";
 export const C3SidebarStateContext = React.createContext(null);
 export const C3SidebarStateProvider = ({ children, ...value }) => {
@@ -9,7 +10,7 @@ export const C3SidebarStateProvider = ({ children, ...value }) => {
     const [infoScrollBarWidth, setInfoScrollBarWidth] = useState(0);
     const [isUserSidebarOpen, setIsUserSidebarOpen] = useState(value.isUserSidebarOpen || false);
     const [userScrollBarWidth, setUserScrollBarWidth] = useState(0);
-    return (React.createElement(C3SidebarStateContext.Provider, { value: {
+    return (_jsx(C3SidebarStateContext.Provider, { value: {
             notifications: {
                 isOpen: isNotificationSidebarOpen,
                 setIsOpen: setIsNotificationSidebarOpen,
@@ -34,7 +35,7 @@ export const C3SidebarStateProvider = ({ children, ...value }) => {
                 scrollBarWidth: userScrollBarWidth,
                 setScrollBarWidth: setUserScrollBarWidth,
             },
-        } }, children));
+        }, children: children }));
 };
 export const useSidebarState = () => {
     const value = useContext(C3SidebarStateContext);

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-user-sidebar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
 import { UserAvatar } from "@carbon/react/icons";
@@ -34,43 +34,19 @@ const C3UserSidebar = ({ sideBar }) => {
     const { theme, onThemeChange } = useC3Profile();
     const { isOpen } = useUserSidebarState();
     const itemTabIndex = isOpen ? undefined : -1;
-    return (React.createElement(C3NavigationSideBar, { sideBar: {
+    return (_jsxs(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
             ariaLabel: sideBarProps.ariaLabel || "User Sidebar",
-        }, icon: React.createElement(UserAvatar, { size: 20 }), version: version && (React.createElement(VersionWrapper, null,
-            React.createElement(Version, null,
-                "Version ",
-                version),
-            React.createElement(Copyright, null,
-                "\u00A9 Camunda Services GmbH ",
-                new Date().getFullYear()),
-            React.createElement(Copyright, null, "All right reserved."))), bottomChildren: customSection },
-        profile && (React.createElement("div", { style: {
-                padding: "1rem",
-                paddingTop: "1.5rem",
-                paddingBottom: ".5rem",
-            } },
-            React.createElement(Stack, { gap: 2 },
-                React.createElement(FormLabel, null, profile.label),
-                React.createElement(Stack, null,
-                    React.createElement("div", { className: "textPrimary", style: { fontSize: "14px" } }, profile.user.name),
-                    React.createElement("div", { className: "textPrimary", style: { fontSize: "12px" } }, profile.user.email))))),
-        (themeSelector || handleTheme) && (React.createElement(React.Fragment, null,
-            React.createElement(SwitcherDivider, null),
-            React.createElement("div", { style: {
-                    padding: ".5rem 1rem",
-                } },
-                React.createElement(RadioButtonGroup, { name: "theme-radio-group", legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
-                        handleTheme
-                            ? onThemeChange(newValue)
-                            : themeSelector?.onChange(newValue);
-                    }, valueSelected: handleTheme ? theme : themeSelector?.currentTheme },
-                    React.createElement(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }),
-                    React.createElement(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }),
-                    React.createElement(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex }))))),
-        stageToggle && (React.createElement(React.Fragment, null,
-            React.createElement(SwitcherDivider, null),
-            React.createElement("div", { style: { padding: ".5rem 1rem" } },
-                React.createElement(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex, "aria-label": "Simulate Production Features" }))))));
+        }, icon: _jsx(UserAvatar, { size: 20 }), version: version && (_jsxs(VersionWrapper, { children: [_jsxs(Version, { children: ["Version ", version] }), _jsxs(Copyright, { children: ["\u00A9 Camunda Services GmbH ", new Date().getFullYear()] }), _jsx(Copyright, { children: "All right reserved." })] })), bottomChildren: customSection, children: [profile && (_jsx("div", { style: {
+                    padding: "1rem",
+                    paddingTop: "1.5rem",
+                    paddingBottom: ".5rem",
+                }, children: _jsxs(Stack, { gap: 2, children: [_jsx(FormLabel, { children: profile.label }), _jsxs(Stack, { children: [_jsx("div", { className: "textPrimary", style: { fontSize: "14px" }, children: profile.user.name }), _jsx("div", { className: "textPrimary", style: { fontSize: "12px" }, children: profile.user.email })] })] }) })), (themeSelector || handleTheme) && (_jsxs(_Fragment, { children: [_jsx(SwitcherDivider, {}), _jsx("div", { style: {
+                            padding: ".5rem 1rem",
+                        }, children: _jsxs(RadioButtonGroup, { name: "theme-radio-group", legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
+                                handleTheme
+                                    ? onThemeChange(newValue)
+                                    : themeSelector?.onChange(newValue);
+                            }, valueSelected: handleTheme ? theme : themeSelector?.currentTheme, children: [_jsx(RadioButton, { id: "light", labelText: "Light", value: "light", tabIndex: itemTabIndex }), _jsx(RadioButton, { id: "system", labelText: "System", value: "system", tabIndex: itemTabIndex }), _jsx(RadioButton, { id: "dark", labelText: "Dark", value: "dark", tabIndex: itemTabIndex })] }) })] })), stageToggle && (_jsxs(_Fragment, { children: [_jsx(SwitcherDivider, {}), _jsx("div", { style: { padding: ".5rem 1rem" }, children: _jsx(Toggle, { size: "sm", id: "toggle-productionfeatures", defaultToggled: stageToggle.prodFeaturesEnabled, onClick: stageToggle.toggle, labelText: "Simulate Production Features", tabIndex: itemTabIndex, "aria-label": "Simulate Production Features" }) })] }))] }));
 };
 export default C3UserSidebar;