@camunda/camunda-composite-components 0.0.28 → 0.0.29-np-rc1

package/lib/esm/api/api.d.ts

@@ -0,0 +1,21 @@
+import { Stage } from "./endpoints.const";
+export declare class HttpError extends Error {
+    status: number;
+    constructor(message: string, status: number);
+}
+export interface RequestPayload {
+    base?: "notifications";
+    stage?: Stage;
+    url: string;
+    method: "get" | "post" | "put" | "delete" | "patch";
+    headers?: {
+        [key: string]: string;
+    };
+    type?: "json" | "text" | "none";
+    responseType?: "json" | "text" | "none";
+    camundaAuth?: {
+        token: string;
+    };
+    body?: any;
+}
+export declare function request(payload: RequestPayload): Promise<any>;

package/lib/esm/api/api.js

@@ -0,0 +1,59 @@
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+export class HttpError extends Error {
+    status;
+    constructor(message, status) {
+        super(message);
+        this.status = status;
+    }
+}
+export async function request(payload) {
+    const headers = {};
+    if (payload.camundaAuth) {
+        headers.Authorization = `Bearer ${payload.camundaAuth.token}`;
+    }
+    const type = payload.type ?? "json";
+    if (type) {
+        switch (type) {
+            case "json":
+                headers["Content-Type"] = "application/json";
+                break;
+            case "text":
+                headers["Content-Type"] = "text/plain";
+                break;
+        }
+    }
+    const body = payload.body ? JSON.stringify(payload.body) : undefined;
+    let base;
+    if (payload.base && payload.stage) {
+        switch (payload.base) {
+            case "notifications":
+                base = getEndpoint(payload.stage, NOTIFICATIONS);
+                break;
+        }
+    }
+    const url = base ? `${base}/${payload.url}` : payload.url;
+    const response = await fetch(url, {
+        method: payload.method.toUpperCase(),
+        headers,
+        body,
+    });
+    let success = true;
+    if (response.status >= 400 && response.status < 500) {
+        success = false;
+    }
+    if (response.status >= 500) {
+        success = false;
+    }
+    if (!success) {
+        throw new HttpError(response.statusText, response.status);
+    }
+    const responseType = payload.responseType ?? type;
+    switch (responseType) {
+        case "json":
+            return response.json();
+        case "text":
+            return response.text();
+        default:
+            return response;
+    }
+}

package/lib/esm/api/endpoints.const.d.ts

@@ -0,0 +1,9 @@
+export interface Endpoint {
+    id: string;
+    dev: string;
+    int: string;
+    prod: string;
+}
+export declare const NOTIFICATIONS: Endpoint;
+export declare type Stage = "dev" | "int" | "prod";
+export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;

package/lib/esm/api/endpoints.const.js

@@ -0,0 +1,18 @@
+export const NOTIFICATIONS = {
+    id: "notifications",
+    dev: "https://notifications.cloud.dev.ultrawombat.com",
+    int: "todo",
+    prod: "todo",
+};
+export function getEndpoint(stage, endpoint) {
+    switch (stage) {
+        case "dev":
+            return endpoint.dev;
+        case "int":
+            return endpoint.int;
+        case "prod":
+            return endpoint.prod;
+        default:
+            throw new Error(`Unknown stage: ${stage}`);
+    }
+}

package/lib/esm/api/jwt.utils.d.ts

@@ -0,0 +1,5 @@
+export declare class JWTUtils {
+    static decode(token: string): any;
+    static getExpiration(token: string): number;
+    static isExpired(token: string): boolean;
+}

package/lib/esm/api/jwt.utils.js

@@ -0,0 +1,23 @@
+export class JWTUtils {
+    static decode(token) {
+        const base64Url = token.split(".")[1];
+        const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+        const jsonPayload = decodeURIComponent(window
+            .atob(base64)
+            .split("")
+            .map(function (c) {
+            return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+            .join(""));
+        return JSON.parse(jsonPayload);
+    }
+    static getExpiration(token) {
+        const decoded = JWTUtils.decode(token);
+        return decoded.exp;
+    }
+    static isExpired(token) {
+        const expiration = JWTUtils.getExpiration(token);
+        const now = new Date().getTime() / 1000;
+        return expiration < now;
+    }
+}

package/lib/esm/api/notifications.d.ts

@@ -0,0 +1,30 @@
+import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
+export interface Notification {
+    uuid: string;
+    userId?: string;
+    orgId?: string;
+    timestamp: number;
+    source: string;
+    type: string;
+    title: string;
+    description: string;
+    state: string;
+    meta?: {
+        href?: string;
+        label?: string;
+        entity?: {
+            id: string;
+            type: string;
+        };
+        parentEntity?: {
+            id: string;
+            type: string;
+        };
+    };
+}
+export declare class NotificationService {
+    static getNotifications(options: C3NotificationsProps): Promise<Notification[]>;
+    static changeState(options: C3NotificationsProps, notificationId: string, operation: "read" | "dismiss"): void;
+    static notificationsStream(options: C3NotificationsProps, handler: (notification: Notification) => void): void;
+    static updateNotifications(allNotifications: Notification[], newNotification: Notification): Notification[];
+}

package/lib/esm/api/notifications.js

@@ -0,0 +1,70 @@
+import { EventSourcePolyfill } from "event-source-polyfill";
+import { request } from "./api";
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
+export class NotificationService {
+    static async getNotifications(options) {
+        let notifications = [];
+        try {
+            notifications = await request({
+                method: "get",
+                base: "notifications",
+                stage: options.stage,
+                camundaAuth: {
+                    token: options.userToken,
+                },
+                url: `notifications/orgs/${options.activeOrganizationId}`,
+            });
+            return notifications;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return notifications;
+    }
+    static changeState(options, notificationId, operation) {
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            camundaAuth: {
+                token: options.userToken,
+            },
+            url: `notifications/${notificationId}/${operation}`,
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
+    static notificationsStream(options, handler) {
+        const source = new EventSourcePolyfill(`${getEndpoint(options.stage, NOTIFICATIONS)}/notifications/events`, {
+            headers: {
+                authorization: `Bearer ${options.userToken}`,
+            },
+        });
+        source.onmessage = function (event) {
+            try {
+                const notification = JSON.parse(event.data);
+                handler(notification);
+            }
+            catch (error) {
+                console.error(`Failed to handle SSE event`, { error });
+            }
+        };
+    }
+    // updates <allNotifications> with <newNotification>
+    // if <newNotification> is read or new, it will be added to <allNotifications>
+    // if <newNotification> is dismissed, it will be removed from <allNotifications>
+    static updateNotifications(allNotifications, newNotification) {
+        const updatedNotifications = allNotifications
+            .slice()
+            .filter((currentNotification) => currentNotification.uuid !== newNotification.uuid);
+        if (newNotification.state === "read" || newNotification.state === "new") {
+            updatedNotifications.push(newNotification);
+        }
+        updatedNotifications.sort((a, b) => b.timestamp - a.timestamp);
+        return updatedNotifications;
+    }
+}

package/lib/esm/components/c3-empty-state/c3-empty-state.types.d.ts

@@ -1,6 +1,7 @@
+import { ReactElement } from "react";
 export interface C3EmptyStateProps {
     heading: string;
-    description: any;
+    description: string | ReactElement;
     icon?: {
         path: string;
         altText: string;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { C3NavigationInfoSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3InfoSidebar: FC<{
+    sideBar: C3NavigationInfoSideBarProps;
+}>;
+export default C3InfoSidebar;

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

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { SwitcherDivider } from "@carbon/react";
+import { Help } from "@carbon/react/icons";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+const C3InfoSidebar = ({ sideBar, }) => {
+    const { version, isOpen, ...sideBarProps } = sideBar;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, 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."))) }));
+};
+export default C3InfoSidebar;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { C3NavigationElementProps } from "../c3-navigation.types";
+import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3NavigationSidebarElement: (props: {
+    element: C3NavigationElementProps;
+    index: number;
+    itemTabIndex?: number | undefined;
+    sideBar: C3NavigationSideBarProps;
+    setSideBarOpen: (open: boolean) => void;
+}) => JSX.Element;
+export default C3NavigationSidebarElement;

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

@@ -0,0 +1,16 @@
+import { Button, SwitcherDivider } from "@carbon/react";
+import React from "react";
+const C3NavigationSidebarElement = (props) => (React.createElement(React.Fragment, null,
+    props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
+    React.createElement(Button, { style: props.index === 0 &&
+            (!("elements" in props.sideBar) || !props.sideBar.elements)
+            ? { marginTop: "1.5rem", whiteSpace: "nowrap" }
+            : { whiteSpace: "nowrap" }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+            if (props.element.onClick) {
+                props.element.onClick();
+            }
+            if (props.sideBar.closeOnClick !== false) {
+                props.setSideBarOpen(false);
+            }
+        }, tabIndex: props.itemTabIndex }, props.element.label)));
+export default C3NavigationSidebarElement;

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

@@ -0,0 +1,9 @@
+import { ReactElement, ReactNode } from "react";
+import { C3NavigationSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3NavigationSideBar: (props: {
+    sideBar: C3NavigationSideBarProps;
+    icon: ReactElement;
+    children?: ReactNode;
+    bottomChildren?: ReactNode;
+}) => JSX.Element;
+export default C3NavigationSideBar;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button, HeaderGlobalAction, HeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
+import { useOnClickOutside } from "../helpers";
+import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
+const C3NavigationSideBar = (props) => {
+    const { icon, sideBar, children, bottomChildren } = props;
+    const { isOpen, setIsOpen } = sideBar;
+    const itemTabIndex = isOpen ? undefined : -1;
+    const refPanel = React.createRef();
+    const refIcon = React.createRef();
+    useOnClickOutside(refPanel, refIcon, () => setIsOpen(false));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderGlobalAction, { ref: refIcon, "aria-label": sideBar.ariaLabel, onClick: () => {
+                setIsOpen(!isOpen);
+            }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center" }, icon),
+        React.createElement(HeaderPanel, { ref: refPanel, "aria-label": sideBar.ariaLabel, expanded: isOpen, style: {
+                display: "grid",
+                gridAutoFlow: "row",
+                gridAutoRows: "max-content 1fr",
+            } },
+            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 }))),
+                bottomChildren),
+            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);
+                        }
+                    }, style: { alignSelf: "end" }, tabIndex: itemTabIndex }, element.label))))));
+};
+export default C3NavigationSideBar;

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

@@ -0,0 +1,56 @@
+import { C3NavigationElementProps } from "../c3-navigation.types";
+export declare type C3NavigationSideBarBaseProps = {
+    ariaLabel?: string;
+    isOpen?: boolean;
+    closeOnClick?: boolean;
+    elementClicked?: (key: string) => void;
+    elements?: C3NavigationElementProps[];
+    bottomElements?: C3NavigationElementProps[];
+};
+export declare type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
+    type: "org";
+    customElements?: {
+        activeOrganization?: {
+            activeLabel: string;
+            otherLabel: string;
+            orgName: string;
+            action: {
+                label: string;
+                onClick: () => void;
+            };
+        };
+    };
+};
+export declare type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
+    type: "info";
+    version?: string;
+};
+export declare type C3NavigationUserSideBarProps = C3NavigationSideBarBaseProps & {
+    type: "user";
+    customElements?: {
+        profile?: {
+            label: string;
+            user: {
+                name: string;
+                email: string;
+            };
+        };
+        themeSelector?: {
+            currentTheme: string;
+            onChange: (newValue: string) => void;
+        };
+        stageToggle?: {
+            prodFeaturesEnabled: boolean;
+            toggle: () => void;
+        };
+    };
+};
+export declare type C3NavigationNotificationsSideBarProps = C3NavigationSideBarBaseProps & {
+    type: "notifications";
+};
+export declare type C3NavigationAppBarProps = C3NavigationSideBarBaseProps & {
+    type: "app";
+};
+export declare type C3NavigationSideBarProps = {
+    setIsOpen: (isOpen: boolean) => void;
+} & (C3NavigationOrgSideBarProps | C3NavigationInfoSideBarProps | C3NavigationUserSideBarProps | C3NavigationNotificationsSideBarProps | C3NavigationAppBarProps);

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { C3NavigationNotificationsSideBarProps } from "./c3-navigation-sidebar.types";
+export declare const C3NotificationSidebar: FC<{
+    sideBar: C3NavigationNotificationsSideBarProps;
+}>;

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

@@ -0,0 +1,55 @@
+import { Button } from "@carbon/react";
+import { Notification as NotificationIcon } from "@carbon/react/icons";
+import React, { useContext, useState } from "react";
+import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
+import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider";
+import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons";
+import styled from "styled-components";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+const PanelHeader = styled.div `
+	background: var(--cds-layer-01);
+	box-shadow: inset 0px -1px 0px var(--cds-border-subtle-01);
+	width: 100%;
+	height: 60px;
+	padding: 24px 16px 13px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+`;
+const PanelTitle = styled.span `
+	color: var(--cds-text-primary);
+	font-size: var(--cds-body-01-font-size);
+	font-weight: var(--cds-body-01-font-weight);
+	line-height: var(--cds-body-01-line-height);
+	letter-spacing: var(--cds-body-01-letter-spacing);
+`;
+const EmptyState = styled.div `
+	padding: 16px;
+`;
+const EmptyStateTitle = styled(NotificationTitle) `
+	margin-top: 24px;
+`;
+const EmptyStateDescription = styled(NotificationDescription) `
+	color: var(--cds-text-secondary);
+	margin-top: 8px;
+`;
+export const C3NotificationSidebar = ({ sideBar }) => {
+    const { isOpen } = sideBar;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const { notifications, markAsRead, dismiss } = useContext(C3NotificationContext);
+    const hasUnreadNotifications = notifications.some(({ state }) => state === "new");
+    const dismissAll = () => notifications.forEach((notification) => dismiss(notification));
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBar,
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20 })) },
+        React.createElement(PanelHeader, null,
+            React.createElement(PanelTitle, null, "Notifications"),
+            notifications.length > 0 && (React.createElement(Button, { kind: "ghost", size: "sm", onClick: dismissAll }, "Dismiss all"))),
+        notifications.length > 0 ? (notifications.map((notification) => (React.createElement(C3NotificationContainer, { key: notification.uuid, onRead: () => markAsRead(notification), onDismiss: () => dismiss(notification), ...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.")))));
+};

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { C3NavigationOrgSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3OrgSidebar: FC<{
+    sideBar: C3NavigationOrgSideBarProps;
+}>;
+export default C3OrgSidebar;

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

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Button, FormLabel, SwitcherDivider } from "@carbon/react";
+import { Enterprise } from "@carbon/react/icons";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+const C3OrgSidebar = ({ sideBar }) => {
+    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const activeOrganization = sideBar.customElements?.activeOrganization;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                padding: "1rem",
+                paddingTop: "1.5rem",
+                paddingBottom: ".5rem",
+                display: "grid",
+                gridAutoFlow: "column",
+                gap: ".25rem",
+            } },
+            React.createElement("div", { style: {
+                    overflow: "hidden",
+                    display: "grid",
+                    gap: "4px",
+                } },
+                React.createElement(FormLabel, null, activeOrganization.activeLabel),
+                React.createElement("div", { className: "textPrimary", style: {
+                        height: "20px",
+                        lineHeight: "20px",
+                        fontSize: "14px",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                    }, title: activeOrganization.orgName }, activeOrganization.orgName)),
+            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
+                    activeOrganization.action.onClick();
+                    if (sideBar.closeOnClick !== false) {
+                        setIsSidebarOpen(false);
+                    }
+                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
+        sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement(FormLabel, { style: {
+                    paddingTop: ".5rem",
+                    paddingLeft: "1rem",
+                    paddingBottom: ".25rem",
+                } }, activeOrganization.otherLabel)))))));
+};
+export default C3OrgSidebar;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { C3NavigationUserSideBarProps } from "./c3-navigation-sidebar.types";
+declare const C3UserSidebar: FC<{
+    sideBar: C3NavigationUserSideBarProps;
+}>;
+export default C3UserSidebar;

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

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import C3NavigationSideBar from "./c3-navigation-sidebar";
+import { FormLabel, RadioButton, RadioButtonGroup, Stack, SwitcherDivider, Toggle, } from "@carbon/react";
+import { UserAvatar } from "@carbon/react/icons";
+const C3UserSidebar = ({ sideBar }) => {
+    const { customElements, isOpen, ...sideBarProps } = sideBar;
+    const profile = sideBar.customElements?.profile;
+    const themeSelector = sideBar.customElements?.themeSelector;
+    const stageToggle = sideBar.customElements?.stageToggle;
+    const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
+    const itemTabIndex = isSidebarOpen ? undefined : -1;
+    return (React.createElement(C3NavigationSideBar, { sideBar: {
+            ...sideBarProps,
+            isOpen: isSidebarOpen,
+            setIsOpen: setIsSidebarOpen,
+        }, icon: React.createElement(UserAvatar, { size: 20 }) },
+        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 && (React.createElement(React.Fragment, null,
+            React.createElement(SwitcherDivider, null),
+            React.createElement("div", { style: {
+                    padding: ".5rem 1rem",
+                } },
+                React.createElement(RadioButtonGroup, { name: "theme-radio-group", defaultSelected: themeSelector.currentTheme, legendText: "Theme", orientation: "vertical", onChange: (newValue) => {
+                        themeSelector.onChange(newValue);
+                    } },
+                    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 }))))));
+};
+export default C3UserSidebar;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { C3NavigationProps } from "./c3-navigation.types";
-export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }: C3NavigationProps) => JSX.Element;
+export declare const C3Navigation: ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, notificationSideBar, }: C3NavigationProps) => JSX.Element;