@camunda/camunda-composite-components 0.20.0 → 0.20.2

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.20.0",
+    "version": "0.20.2",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
@@ -104,8 +104,8 @@
     "peerDependencies": {
         "@carbon/react": "1.x",
         "event-source-polyfill": "1.0.x",
-        "react": "18.x",
-        "react-dom": "18.x",
+        "react": "18.x || 19.x",
+        "react-dom": "18.x || 19.x",
         "styled-components": "5.x || 6.x"
     },
     "description": "Camunda Composite Components",

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

@@ -18,6 +18,7 @@ export interface RequestPayload {
         [key: string]: unknown;
     };
     enableLogs?: boolean;
+    signal?: AbortSignal;
 }
 export type RequestResponse<R = undefined> = {
     success: boolean;

package/lib/esm/src/api/api.js

@@ -54,6 +54,7 @@ export const request = async (payload) => {
             method: payload.method ? payload.method.toUpperCase() : "GET",
             headers,
             body,
+            signal: payload?.signal,
         });
         if (response.status >= 400) {
             if (payload.enableLogs)

package/lib/esm/src/api/help-center.d.ts

@@ -3,7 +3,7 @@ import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
 import { RequestPayload, RequestResponse } from "./api";
 export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<RequestResponse<HelpCenterConfig | null>>;
-export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, }: {
+export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, signal, }: {
     accessToken: string;
     tileConfig: TileConfig[];
     cloudAudience: string;
@@ -13,6 +13,7 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     clusterIds: string[];
     salesPlanType: string;
     flags: string[];
+    signal?: AbortSignal | undefined;
 }) => Promise<RequestResponse<WpCardType[]>>;
 export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;

package/lib/esm/src/api/help-center.js

@@ -8,13 +8,17 @@ export const getConfig = async (accessToken, audience, orgId) => {
         },
     });
 };
-export const getTiles = async ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, }) => {
+export const getTiles = async ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, signal, }) => {
     const availableTileTypes = recommendations(persona, flags, tileConfig, salesPlanType, clusterIds?.length > 0);
-    return await request({
-        url: `https://helpcenter.${cloudAudience}/cards?card_id=${availableTileTypes.join(",")}`,
-        responseType: "json",
-        camundaAuth: { token: accessToken },
-    });
+    if (availableTileTypes.length) {
+        return await request({
+            url: `https://helpcenter.${cloudAudience}/cards?card_id=${availableTileTypes.join(",")}`,
+            responseType: "json",
+            camundaAuth: { token: accessToken },
+            signal,
+        });
+    }
+    return { success: true };
 };
 export const getOnboardingConfig = ({ camundaAuth, audience, orgId, }) => request({
     url: `https://helpcenter.${audience}/survey/config/${orgId}`,

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -444,7 +444,11 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                 headerKeys.map((key) => {
                     return rowCell(key);
                 }),
-                hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } }, renderActions(row)))));
+                hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                        } }, renderActions(row))))));
             if (row.expansion) {
                 rowComponent = (React.createElement(React.Fragment, { key: row.id },
                     React.createElement(TableExpandRow, { key: row.id, isExpanded: isRowExpanded(row), "aria-label": `row ${row.id}`, onExpand: () => {

package/lib/esm/src/components/c3-empty-state/c3-empty-state.js

@@ -1,12 +1,23 @@
 import { Stack, Tile, Button, Link, MenuButton, MenuItem } from "@carbon/react";
+import styled from "styled-components";
 import React from "react";
+const ResponsiveStack = styled.div `
+	display: flex;
+	flex-direction: ${({ orientation }) => `${orientation === "vertical" ? "column" : "row"}`};
+	gap: ${({ gap }) => `${typeof gap === "string" ? gap : `${gap ?? 0 * 16}px`}`};
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+	}
+`;
 export const C3EmptyState = ({ icon, heading, description, button, link, }) => (React.createElement(Tile, { style: {
         paddingLeft: "5rem",
         paddingTop: "3rem",
         paddingBottom: "3rem",
     } },
-    React.createElement(Stack, { orientation: "horizontal", gap: 6 },
-        icon && React.createElement("img", { src: icon.path, alt: icon.altText }),
+    React.createElement(ResponsiveStack, { orientation: "horizontal", gap: "1.5rem" },
+        icon && (React.createElement("div", { style: { maxWidth: "80px" } },
+            React.createElement("img", { src: icon.path, alt: icon.altText, style: { width: "100%" } }))),
         React.createElement(Stack, { gap: 3 },
             React.createElement("h2", null, heading),
             React.createElement(Stack, { gap: 6 },

package/lib/esm/src/components/c3-help-center/c3-help-center-provider.d.ts

@@ -1,4 +1,7 @@
 import React, { FC, PropsWithChildren } from "react";
+import { HelpCenterConfig } from "./defaultHelpCenterConfig";
+import { Persona, WpCardType } from "./c3-help-center.types";
+import { OnboardingConfig } from "../c3-onboarding-survey/defaultOnboardingConfig";
 export declare enum HelpCenterHintType {
     HelpCenter = "help-center",
     Onboarding = "onboarding"
@@ -13,6 +16,20 @@ export type C3HelpCenterContextValue = {
     setShowHintOnClose: (showHintOnClose: boolean) => void;
     hintType: HelpCenterHintType;
     setHintType: (hintType: HelpCenterHintType) => void;
+    helpCenterConfig: HelpCenterConfig;
+    persona: Persona | undefined;
+    setPersona: (persona: Persona | undefined) => void;
+    rawTabTiles: {
+        [id: string]: WpCardType[];
+    };
+    isLoadingTiles: boolean;
+    updateFlags: (flags: string[]) => void;
+    updateAutoStartSurvey: (autoStart: boolean) => void;
+    showSurvey: boolean;
+    setShowSurvey: (showSurvey: boolean) => void;
+    onboadingConfig: OnboardingConfig;
+    isLoadingOnboardingConfig: boolean;
+    getOnboadingSurveyConfig: (audience: string) => Promise<void>;
 };
 export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
 export declare const C3HelpCenterProvider: FC<PropsWithChildren>;

package/lib/esm/src/components/c3-help-center/c3-help-center-provider.js

@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, } from "react";
+import { getConfig, getOnboardingConfig, getTiles } from "../../api/help-center";
+import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+import { defaultHelpCenterConfig, } from "./defaultHelpCenterConfig";
+import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { defaultOnboardingConfig, } from "../c3-onboarding-survey/defaultOnboardingConfig";
 export var HelpCenterHintType;
 (function (HelpCenterHintType) {
     HelpCenterHintType["HelpCenter"] = "help-center";
@@ -13,6 +18,18 @@ export const C3HelpCenterContext = React.createContext({
     setShowHintOnClose: () => undefined,
     hintType: HelpCenterHintType.Onboarding,
     setHintType: () => undefined,
+    helpCenterConfig: defaultHelpCenterConfig,
+    persona: undefined,
+    setPersona: () => undefined,
+    rawTabTiles: {},
+    isLoadingTiles: false,
+    updateFlags: () => undefined,
+    updateAutoStartSurvey: () => undefined,
+    showSurvey: false,
+    setShowSurvey: () => undefined,
+    onboadingConfig: defaultOnboardingConfig,
+    isLoadingOnboardingConfig: false,
+    getOnboadingSurveyConfig: () => undefined,
 });
 export const C3HelpCenterProvider = ({ children }) => {
     const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
@@ -20,10 +37,97 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
     const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
-    const openHelpCenter = (showTabId) => {
+    const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
+    const [showSurvey, setShowSurvey] = useState(false);
+    const [onboadingConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
+    const [isLoadingOnboardingConfig, setIsLoadingOnboardingConfig] = useState(false);
+    const { activeOrg: organization, clusters } = useC3Profile();
+    const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
+    const [rawTabTiles, setRawTabTiles] = useState({});
+    const [isLoadingTiles, setIsLoadingTiles] = useState(true);
+    const [persona, setPersona] = useState(undefined);
+    const tabCache = useRef(new Map());
+    const flags = useRef([]);
+    const updateFlags = (updatedFlags) => {
+        flags.current = updatedFlags;
+    };
+    const autoStartSurvey = useRef(false);
+    const updateAutoStartSurvey = (autoStart) => {
+        autoStartSurvey.current = autoStart;
+    };
+    const { userToken, activeOrganizationId, decodedAudience, decodedToken } = useC3UserConfiguration();
+    const getTileData = async (tabs) => {
+        if (!decodedAudience) {
+            return;
+        }
+        const { persona: tokenPersona } = decodedToken ?? {};
+        const tiles = {};
+        setIsLoadingTiles(true);
+        for (const singleTab of tabs) {
+            if (userToken) {
+                if (tabCache.current.has(singleTab.id)) {
+                    tiles[singleTab.id] = tabCache.current.get(singleTab.id);
+                    continue;
+                }
+                const { result } = await getTiles({
+                    tileConfig: singleTab.tiles,
+                    cloudAudience: decodedAudience,
+                    persona: tokenPersona ?? {},
+                    clusterIds,
+                    salesPlanType: organization?.salesPlan?.type ?? "",
+                    flags: flags.current,
+                    accessToken: userToken,
+                });
+                if (result) {
+                    tiles[singleTab.id] = result;
+                    tabCache.current.set(singleTab.id, result);
+                }
+            }
+        }
+        setIsLoadingTiles(false);
+        setRawTabTiles(tiles);
+    };
+    const getOnboadingSurveyConfig = useCallback(async (decodedAudience) => {
+        setIsLoadingOnboardingConfig(true);
+        const { result: config } = await getOnboardingConfig({
+            audience: decodedAudience,
+            camundaAuth: { token: userToken },
+            orgId: activeOrganizationId,
+        });
+        if (config) {
+            setOnboardConfig(config);
+        }
+        setIsLoadingOnboardingConfig(false);
+    }, [activeOrganizationId, userToken]);
+    const openHelpCenter = async (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
             setShowHint(false);
+            if (decodedAudience) {
+                const { persona: tokenPersona } = decodedToken ?? {};
+                if (showSurvey || autoStartSurvey.current || !tokenPersona?.wasShown) {
+                    setIsLoadingTiles(false);
+                    await getOnboadingSurveyConfig(decodedAudience);
+                }
+                else {
+                    const { result } = await getConfig(userToken, decodedAudience, activeOrganizationId);
+                    const config = result || defaultHelpCenterConfig;
+                    await getTileData(config?.tabs);
+                    setHelpCenterConfig(config);
+                }
+                if (tokenPersona !== undefined) {
+                    setPersona(tokenPersona);
+                    if (tokenPersona.wasShown) {
+                        setShowSurvey(false);
+                    }
+                }
+                else {
+                    setPersona({ wasShown: false });
+                }
+                if (autoStartSurvey.current && !tokenPersona?.wasShown) {
+                    setIsHelpCenterOpen(true);
+                }
+            }
         }
         if (showTabId)
             setActiveTabId(showTabId);
@@ -47,6 +151,18 @@ export const C3HelpCenterProvider = ({ children }) => {
             setShowHintOnClose,
             hintType,
             setHintType,
+            helpCenterConfig,
+            persona,
+            setPersona,
+            rawTabTiles,
+            isLoadingTiles,
+            updateFlags,
+            showSurvey,
+            setShowSurvey,
+            onboadingConfig,
+            isLoadingOnboardingConfig,
+            updateAutoStartSurvey,
+            getOnboadingSurveyConfig,
         } }, children));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

package/lib/esm/src/components/c3-help-center/c3-help-center.d.ts

@@ -9,8 +9,6 @@ export interface C3HelpCenterProps {
     activeTab?: string;
     autoStartSurvey?: boolean;
     onPersonaChange?: (persona: Persona) => void;
-    onRequestClose?: () => void;
-    onRequestOpen?: () => void;
     mixpanelTrack?: (event: string, data: Dict | undefined) => void;
 }
 export declare const C3HelpCenter: FC<C3HelpCenterProps>;

package/lib/esm/src/components/c3-help-center/c3-help-center.js

@@ -1,9 +1,8 @@
 import { ActionableNotification, ComposedModal, Layer, ModalBody, ModalHeader, } from "@carbon/react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { HelpCenter } from "./help-center";
-import { defaultHelpCenterConfig } from "./defaultHelpCenterConfig";
 import { C3OnboardingSurvey } from "../c3-onboarding-survey/c3-onboarding-survey";
-import { getConfig, updatePersona } from "../../api/help-center";
+import { updatePersona } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
@@ -15,29 +14,26 @@ const StyledComposedModal = styled(ComposedModal) `
 		mask-image: none;
 	}
 `;
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
-    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: customMixpanelTrack, theme, onPersonaChange, activeTab, }) => {
+    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, helpCenterConfig, persona, setPersona, showSurvey, setShowSurvey, updateAutoStartSurvey, getOnboadingSurveyConfig, } = useC3HelpCenter();
     const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, currentApp, } = useC3UserConfiguration();
-    const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
+    const { theme: themeConfig, isEnabled } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
     const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
-    const [persona, setPersona] = useState(undefined);
-    const [userId, setUserId] = useState("");
-    const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
-    const [email, setEmail] = useState("");
-    const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
+    const userId = decodedToken?.userId ?? "";
+    const email = decodedToken?.meta?.email ?? "";
     if (!origin && !currentApp)
         console.warn("No app provided to the help center. Please provide the `currentApp` prop to the `C3UserConfigurationProvider`.");
     const hostApp = origin || currentApp === "modeler" ? "webmodeler" : currentApp || "console";
-    const mixpanelTrack = (event, data) => {
+    const mixpanelTrack = useCallback((event, data) => {
         if (customMixpanelTrack) {
             customMixpanelTrack(event, data);
         }
         else if (analyticsTrack) {
             analyticsTrack(event, data);
         }
-    };
+    }, []);
     useEffect(() => {
         const updateResolvedTheme = ({ matches }) => {
             if (themeRef.current === "system") {
@@ -57,56 +53,13 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         const newTheme = themeHandlingEnabled ? themeConfig : theme;
         themeRef.current = newTheme;
         setResolvedTheme(resolveTheme(newTheme || "light"));
-    }, [theme, themeConfig, isOpen]);
-    const fetchConfig = async () => {
-        if (!userToken || !decodedAudience)
-            return;
-        const { result: config } = await getConfig(userToken, decodedAudience, activeOrganizationId);
-        setHelpCenterConfig(config || defaultHelpCenterConfig);
-    };
-    const isFirstLoad = useRef(true);
-    const fetchData = async () => {
-        if (!userToken || !decodedToken || !decodedAudience)
-            return;
-        const { userId, meta, persona: tokenPersona } = decodedToken;
-        if (tokenPersona !== undefined) {
-            setPersona(tokenPersona);
-            if (tokenPersona.wasShown) {
-                setShowSurvey(false);
-            }
-        }
-        else {
-            setPersona({ wasShown: false });
-        }
-        if (meta)
-            setEmail(meta.email);
-        if (userId)
-            setUserId(userId);
-        if (autoStartSurvey && !tokenPersona?.wasShown) {
-            setIsHelpCenterOpen(true);
-            onRequestOpen?.();
-        }
-        await fetchConfig();
-        isFirstLoad.current = false;
-    };
-    React.useEffect(() => {
-        fetchData();
-    }, [JSON.stringify(decodedToken), decodedAudience]);
+    }, [theme, themeConfig, isOpen, themeHandlingEnabled]);
     useEffect(() => {
-        if (isFirstLoad.current ||
-            !userToken ||
-            !decodedAudience ||
-            !persona?.complete)
-            return;
-        fetchConfig();
-        reloadClusters();
-    }, [persona?.complete]);
-    useEffect(() => {
-        if (isFirstLoad.current || !activeOrganizationId)
-            return;
-        fetchConfig();
-        reloadClusters();
-    }, [activeOrganizationId]);
+        if (autoStartSurvey) {
+            setShowSurvey(autoStartSurvey);
+        }
+    }, [autoStartSurvey, setShowSurvey]);
+    updateAutoStartSurvey(autoStartSurvey ?? false);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0]?.id;
@@ -129,7 +82,21 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
                 from: origin,
             });
         }
-    }, [isOpen]);
+    }, [
+        activeOrganizationId,
+        activeTab,
+        autoStartSurvey,
+        decodedAudience,
+        helpCenterConfig.tabs,
+        isOpen,
+        mixpanelTrack,
+        origin,
+        persona,
+        setPersona,
+        setShowHintOnClose,
+        userId,
+        userToken,
+    ]);
     const onRequestRetakeSurvey = () => {
         if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
@@ -148,9 +115,10 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         onPersonaChange?.(newPersona);
         setShowSurvey(true);
     };
-    const onRequestResumeSurvey = () => {
+    const onRequestResumeSurvey = async () => {
         if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
+        await getOnboadingSurveyConfig(decodedAudience);
         const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
         setPersona(newPersona);
         updatePersona({
@@ -196,9 +164,6 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
                 userId,
             });
         }
-        onRequestClose?.();
-        fetchConfig();
-        reloadClusters();
         // wait for modal transition
         setTimeout(() => {
             setShowSurvey(false);
@@ -211,5 +176,5 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
             React.createElement(ErrorBoundary, { fallbackRender: () => (React.createElement(React.Fragment, null,
                     React.createElement(ModalHeader, { title: "Help Center", closeModal: closeFn }),
                     React.createElement(ModalBody, null,
-                        React.createElement(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() })))) }, showSurvey || !persona?.wasShown ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab }))))));
+                        React.createElement(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() })))) }, showSurvey || (persona && !persona?.wasShown) ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona ?? {}, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab }))))));
 };

package/lib/esm/src/components/c3-help-center/help-center.js

@@ -3,13 +3,13 @@ import { Undo } from "@carbon/react/icons";
 import React, { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
 import { TabContent } from "./tabs/tabContent";
-import { getTiles } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
 import { StyledModalBody, StyledModalHeader } from "./styles";
 import styled from "styled-components";
+import { C3Tabs } from "../c3-page/c3-tabs/c3-tabs";
 const StyledModalFooter = styled(ModalFooter) `
 	height: 62px;
 	padding-right: 16px;
@@ -20,53 +20,33 @@ const StyledModalFooter = styled(ModalFooter) `
 	border-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#E0E0E0" : "#727272"};
 	background-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#FFFFFF" : "#161616"};
 `;
+const SideNavWrapper = styled.div `
+	@media (max-width: 768px) {
+		display: none;
+	}
+`;
+const SideNavMobileWrapper = styled.div `
+	display: none;
+	@media (max-width: 768px) {
+		display: block;
+	}
+`;
+const StyledHeading = styled.h4 `
+	margin-left: 16rem;
+	@media (max-width: 768px) {
+		margin-left: 0rem;
+	}
+`;
 export const HelpCenter = ({ configuration, persona, email, audience, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
     const { tabs } = configuration;
     const firstTab = tabs[0].id;
-    const { userToken: token, activeOrganizationId, domain, } = useC3UserConfiguration();
+    const { activeOrganizationId, domain } = useC3UserConfiguration();
     const { activeOrg: organization, clusters } = useC3Profile();
     const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
-    const { showTabId } = useC3HelpCenter();
+    const { showTabId, rawTabTiles, isLoadingTiles, updateFlags } = useC3HelpCenter();
     const [activeTab, setActiveTab] = useState(firstTab);
-    const [rawTabTiles, setRawTabTiles] = useState({});
-    const [tabTiles, setTabTiles] = useState({});
-    const [isLoadingTiles, setIsLoadingTiles] = useState(false);
-    let header = "";
-    let content = React.createElement(React.Fragment, null);
-    React.useEffect(() => {
-        ;
-        (async () => {
-            const tiles = {};
-            setIsLoadingTiles(true);
-            for (const singleTab of tabs) {
-                if (token) {
-                    const { result } = await getTiles({
-                        tileConfig: singleTab.tiles,
-                        cloudAudience: audience,
-                        persona,
-                        clusterIds,
-                        salesPlanType: organization?.salesPlan?.type ?? "",
-                        flags,
-                        accessToken: token,
-                    });
-                    if (result)
-                        tiles[singleTab.id] = result;
-                }
-            }
-            setIsLoadingTiles(false);
-            setRawTabTiles(tiles);
-        })();
-    }, [
-        token,
-        JSON.stringify(persona),
-        audience,
-        JSON.stringify(organization),
-        JSON.stringify(clusters),
-        JSON.stringify(tabs),
-    ]);
-    useEffect(() => {
-        if (!tabs || !rawTabTiles)
-            return;
+    updateFlags(flags);
+    const getTabTiles = () => {
         const tiles = {};
         for (const tab of tabs) {
             if (rawTabTiles[tab.id])
@@ -80,8 +60,11 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                         return card;
                     }) || [];
         }
-        setTabTiles(tiles);
-    }, [JSON.stringify(rawTabTiles), email, domain]);
+        return tiles;
+    };
+    const tabTiles = getTabTiles();
+    let header = "";
+    let content = React.createElement(React.Fragment, null);
     useEffect(() => {
         setActiveTab(initialTab ?? firstTab);
     }, [initialTab]);
@@ -154,7 +137,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                 backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                 marginBottom: "0",
             } },
-            React.createElement("h4", { style: { marginLeft: "16rem" } }, header)),
+            React.createElement(StyledHeading, null, header)),
         React.createElement(StyledModalBody, { style: {
                 backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                 marginBottom: 0,
@@ -164,41 +147,59 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                         ? "634px"
                         : "696px",
                 } },
-                React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
-                    React.createElement(SideNavItems, null,
-                        React.createElement(SideNavMenuItem, null,
-                            React.createElement("h5", null, "Help Center")),
-                        React.createElement("li", { style: { marginTop: "4px" } },
-                            React.createElement(Stack, null,
-                                React.createElement("ul", null, tabBar.map(({ name, id, text }) => {
-                                    const active = activeTab === name;
-                                    let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
-                                    let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
-                                    if (active) {
-                                        tabBackgroundColor =
-                                            theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
-                                        tabButtonColor =
-                                            theme === "light" ? "#161616" : "#f4f4f4";
-                                    }
-                                    return (React.createElement("li", { key: name },
-                                        React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
-                                                setActiveTab(name);
-                                                mixpanelTrack?.("helpcenter:open", {
-                                                    to: id,
-                                                    from: origin,
-                                                });
-                                            }, style: {
-                                                width: "100%",
-                                                backgroundColor: tabBackgroundColor,
-                                                color: tabButtonColor,
-                                            }, "aria-label": text }, text)));
-                                })))),
-                        React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
-                            React.createElement("ul", null, configuration.links?.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, 
-                                // eslint-disable-next-line
-                                // @ts-ignore
-                                target: "_blank" },
-                                React.createElement("span", { className: "cds--link" }, link.label)))))))),
+                React.createElement(SideNavMobileWrapper, null,
+                    React.createElement(C3Tabs, { tabs: tabBar.map((link) => {
+                            return {
+                                id: link.id,
+                                label: link.text,
+                                content: null,
+                            };
+                        }), desiredTabId: activeTab, onTabChange: (tabId) => {
+                            const link = tabBar.find((item) => item.id === tabId);
+                            if (link) {
+                                setActiveTab(link.name);
+                                mixpanelTrack?.("helpcenter:open", {
+                                    to: link.id,
+                                    from: origin,
+                                });
+                            }
+                        } })),
+                React.createElement(SideNavWrapper, null,
+                    React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
+                        React.createElement(SideNavItems, null,
+                            React.createElement(SideNavMenuItem, null,
+                                React.createElement("h5", null, "Help Center")),
+                            React.createElement("li", { style: { marginTop: "4px" } },
+                                React.createElement(Stack, null,
+                                    React.createElement("ul", null, tabBar.map(({ name, id, text }) => {
+                                        const active = activeTab === name;
+                                        let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
+                                        let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
+                                        if (active) {
+                                            tabBackgroundColor =
+                                                theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
+                                            tabButtonColor =
+                                                theme === "light" ? "#161616" : "#f4f4f4";
+                                        }
+                                        return (React.createElement("li", { key: name },
+                                            React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
+                                                    setActiveTab(name);
+                                                    mixpanelTrack?.("helpcenter:open", {
+                                                        to: id,
+                                                        from: origin,
+                                                    });
+                                                }, style: {
+                                                    width: "100%",
+                                                    backgroundColor: tabBackgroundColor,
+                                                    color: tabButtonColor,
+                                                }, "aria-label": text }, text)));
+                                    })))),
+                            React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
+                                React.createElement("ul", null, configuration.links?.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, 
+                                    // eslint-disable-next-line
+                                    // @ts-ignore
+                                    target: "_blank" },
+                                    React.createElement("span", { className: "cds--link" }, link.label))))))))),
                 content,
                 React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
                     React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {

package/lib/esm/src/components/c3-help-center/styles.js

@@ -31,6 +31,9 @@ export const StyledModalHeader = styled(ModalHeader) `
 `;
 export const StyledModalBody = styled(ModalBody) `
 	padding-left: 17rem;
+	@media (max-width: 768px) {
+		padding-left: 1rem;
+	}
 
 	${headingStyles}
 

package/lib/esm/src/components/c3-help-center/tile.js

@@ -18,45 +18,51 @@ const TileStack = styled.div `
 	display: flex;
 	flex-direction: column;
 `;
+const TileWrapper = styled.div `
+	width: ${({ $width }) => `${$width}px`};
+	@media (max-width: 768px) {
+		width: auto;
+	}
+`;
 export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
     const { title, description, timeToComplete, cta, image, link, card_id } = tile;
     if (tabType === TAB_TYPES.Grid) {
-        return (React.createElement(Tile, { style: {
+        return (React.createElement(TileWrapper, { "$width": 300 },
+            React.createElement(Tile, { style: {
+                    justifySelf: "start",
+                }, className: "cds--layer-two" },
+                React.createElement(Stack, { orientation: "vertical", gap: 3 },
+                    React.createElement("img", { src: image, alt: title }),
+                    React.createElement(TileStack, null,
+                        React.createElement(TileHeading, null, title),
+                        React.createElement(TileDescription, null, description),
+                        React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
+                            let content = React.createElement("div", { style: { height: "32px" } });
+                            if (timeToComplete) {
+                                content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
+                            }
+                            return content;
+                        })()))),
+                React.createElement(Button, { size: "sm", as: "a", href: link, target: "_blank", onClick: () => {
+                        mixpanelTrack?.(`helpcenter:click`, {
+                            from: origin,
+                            to: card_id,
+                        });
+                    }, renderIcon: ArrowRight, kind: "tertiary", className: "cds--switcher__item", style: { alignSelf: "end", marginTop: "10px", maxWidth: "100%" } }, cta))));
+    }
+    return (React.createElement(TileWrapper, { "$width": 214 },
+        React.createElement(Tile, { style: {
                 justifySelf: "start",
-                width: "300px",
-            }, className: "cds--layer-two" },
+                height: "initial",
+            }, className: "cds--layer-two", onClick: () => {
+                mixpanelTrack?.(`helpcenter:click`, {
+                    to: card_id,
+                    from: origin,
+                });
+            } },
             React.createElement(Stack, { orientation: "vertical", gap: 3 },
                 React.createElement("img", { src: image, alt: title }),
-                React.createElement(TileStack, null,
-                    React.createElement(TileHeading, null, title),
-                    React.createElement(TileDescription, null, description),
-                    React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
-                        let content = React.createElement("div", { style: { height: "32px" } });
-                        if (timeToComplete) {
-                            content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
-                        }
-                        return content;
-                    })()))),
-            React.createElement(Button, { size: "sm", as: "a", href: link, target: "_blank", onClick: () => {
-                    mixpanelTrack?.(`helpcenter:click`, {
-                        from: origin,
-                        to: card_id,
-                    });
-                }, renderIcon: ArrowRight, kind: "tertiary", className: "cds--switcher__item", style: { alignSelf: "end", marginTop: "10px", maxWidth: "100%" } }, cta)));
-    }
-    return (React.createElement(Tile, { style: {
-            justifySelf: "start",
-            width: "214px",
-            height: "initial",
-        }, className: "cds--layer-two", onClick: () => {
-            mixpanelTrack?.(`helpcenter:click`, {
-                to: card_id,
-                from: origin,
-            });
-        } },
-        React.createElement(Stack, { orientation: "vertical", gap: 3 },
-            React.createElement("img", { src: image, alt: title }),
-            React.createElement(Stack, null,
-                React.createElement("h5", null, title),
-                React.createElement(ReactMarkdown, { linkTarget: "_blank" }, description)))));
+                React.createElement(Stack, null,
+                    React.createElement("h5", null, title),
+                    React.createElement(ReactMarkdown, { linkTarget: "_blank" }, description))))));
 };

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

@@ -9,6 +9,7 @@ import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-conf
 import { APPS } from "../../../utils/camunda";
 import { NavWrapper, SideNav } from "./components";
 import { useClusterUpdate } from "../../../contexts/c3-cluster-update-manager";
+import { ActiveOrgName } from "../c3-org-sidebar/components";
 const getOrgLink = (app, orgId, domain) => {
     switch (app) {
         case "console": {
@@ -31,6 +32,13 @@ const getClustersToRender = (clusters, activeOrg, appToNavigateTo) => {
             //  OR this is a 8.8+ cluster - in this case we also allow rendering this item
             [1, 2, 3, 4, 5, 6, 7].every((pre8Minor) => !generation.versions?.zeebe?.includes(`8.${pre8Minor}`))));
 };
+const OrgNameWrapper = styled.div `
+	margin-bottom: 1rem;
+	padding: 0px 16px;
+	@media (min-width: 768px) {
+		display: none;
+	}
+`;
 const OrgPickerModal = ({ isOpen, onCancel, orgs, activeOrg, loadingStatus, appToNavigateTo, domain, }) => {
     const hasNoTeams = Object.values(orgs ?? {})?.every(({ org }) => {
         return !org?.name;
@@ -133,6 +141,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                                         }
                                         return clusters;
                                     });
+                                    break;
                                 }
                                 case "created": {
                                     setClusters((clusters) => {
@@ -284,6 +293,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
     }, [clusters, currentApp, domain, handleSuperOrg]);
     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
@@ -303,6 +313,10 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
         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();

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

@@ -44,6 +44,16 @@ const ClusterTagWrapper = styled.div `
 		padding: 0 1rem;
 	}
 `;
+const ResponsiveNavbarElementsWrapper = styled.div `
+	display: grid;
+	grid-auto-flow: column;
+	gap: 0.5rem;
+	paddingright: 0.5rem;
+
+	@media (max-width: 768px) {
+		display: none;
+	}
+`;
 const NON_PRODUCTION_TERMS_LINK = "https://legal.camunda.com/#self-managed-non-production-terms";
 const SALES_CONTACT_LINK = "https://camunda.com/contact/";
 export const SECOND = 1000;
@@ -73,7 +83,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
     }
     const [camundaStatus, setCamundaStatus] = useState({ error: false, description: "", endpoint: "" });
     const fetchStatus = async (audience) => {
-        let status = await StatusService.camundaStatus(audience);
+        const status = await StatusService.camundaStatus(audience);
         setCamundaStatus(status);
     };
     React.useEffect(() => {
@@ -176,12 +186,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
             React.createElement(HeaderNavigation, { "aria-label": app.ariaLabel }, navbar.elements.map((element) => (React.createElement(HeaderMenuItem, { key: element.key, as: element.routeProps && forwardRef, isActive: element.isCurrentPage, ...element.routeProps },
                 React.createElement("span", null, element.label))))),
             React.createElement(HeaderGlobalBar, null,
-                React.createElement("div", { style: {
-                        display: "grid",
-                        gridAutoFlow: "column",
-                        gap: ".5rem",
-                        paddingRight: ".5rem",
-                    } },
+                React.createElement(ResponsiveNavbarElementsWrapper, null,
                     tags &&
                         tags.length > 0 &&
                         tags.map((tag) => {

package/lib/esm/src/components/c3-navigation/c3-org-name.js

@@ -26,7 +26,6 @@ const TeamName = styled.div `
 `;
 const SingleOrgName = styled.div `
 	font-size: 14px;
-	line-height: 3rem;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;

package/lib/esm/src/components/c3-onboarding-survey/c3-onboarding-survey.js

@@ -1,42 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
-import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
-import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
+import { submitSurvey, updatePersona } from "../../api/help-center";
 import { useC3UserConfiguration, } from "../c3-user-configuration/c3-user-configuration-provider";
+import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 export const C3OnboardingSurvey = (props) => {
     const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration();
-    const [persona, setPersona] = useState(props.persona);
-    const [userId, setUserId] = useState("");
-    const [onboardConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
-    const [isLoadingConfig, setIsLoadingConfig] = useState(false);
-    const [givenName, setGivenName] = useState("");
-    const [email, setEmail] = useState("");
-    React.useEffect(() => {
-        if (!decodedToken || !decodedAudience)
-            return;
-        (async () => {
-            const { userId, meta, persona } = decodedToken;
-            if (props.persona === undefined && persona) {
-                setPersona(persona);
-            }
-            if (meta) {
-                setGivenName(meta.given_name);
-                setEmail(meta.email);
-            }
-            if (userId)
-                setUserId(userId);
-            setOnboardConfig(defaultOnboardingConfig);
-            setIsLoadingConfig(true);
-            const { result: config } = await getOnboardingConfig({
-                audience: decodedAudience,
-                camundaAuth: { token: userToken },
-                orgId: activeOrganizationId,
-            });
-            if (config)
-                setOnboardConfig(config);
-            setIsLoadingConfig(false);
-        })();
-    }, [JSON.stringify(decodedToken), decodedAudience]);
+    const { persona, setPersona, onboadingConfig, isLoadingOnboardingConfig } = useC3HelpCenter();
+    const userId = decodedToken?.userId ?? "";
+    const email = decodedToken?.meta?.email ?? "";
+    const givenName = decodedToken?.meta?.given_name ?? "";
     React.useEffect(() => {
         setPersona(props.persona);
     }, [props.persona]);
@@ -84,5 +56,5 @@ export const C3OnboardingSurvey = (props) => {
         setPersona(newPersona);
         props.personaCallback(newPersona);
     };
-    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboardConfig, isLoadingConfig: isLoadingConfig, modal: props.modal, origin: props.origin }));
+    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboadingConfig, isLoadingConfig: isLoadingOnboardingConfig, modal: props.modal, origin: props.origin }));
 };

package/lib/esm/src/components/c3-onboarding-survey/elements/dropdownSelect.js

@@ -48,7 +48,8 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                                 setElement(element.value, "");
                         }, value: elementWithoutSuggestion() }, elements.map((e) => (React.createElement(SelectItem, { key: `selectItem-${Math.random() * 10000}`, id: `selectItem-${Math.random() * 10000}`, value: e.value, text: e.label })))),
                     (() => {
-                        if (elementWithoutSuggestion() === exceptionValue) {
+                        if (exceptionValue &&
+                            elementWithoutSuggestion() === exceptionValue) {
                             return (React.createElement(React.Fragment, null,
                                 React.createElement("div", { style: { marginTop: "24px" } }),
                                 React.createElement("div", { style: { marginTop: "24px" } }),

package/lib/esm/src/components/c3-user-configuration/c3-user-configuration-provider.js

@@ -16,9 +16,12 @@ export const C3UserConfigurationContext = React.createContext({
 });
 const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config }) => {
     const [decodedToken, setDecodedToken] = useState(null);
-    const [decodedAudience, setDecodedAudience] = useState(null);
-    const [domain, setDomain] = useState(null);
     const [activeOrgId, setActiveOrgId] = useState(activeOrganizationId);
+    const { audience } = decodedToken || {};
+    const decodedAudience = (typeof audience === "string" ? audience : audience?.[0]) || null;
+    const domain = config.noCloudInUrl
+        ? (decodedAudience?.replace("cloud.", "") ?? null)
+        : decodedAudience;
     useEffect(() => {
         if (config.userToken)
             setDecodedToken(decodeJWT(config.userToken));
@@ -26,16 +29,6 @@ const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config
     useEffect(() => {
         setActiveOrgId(activeOrganizationId);
     }, [activeOrganizationId]);
-    useEffect(() => {
-        const { audience } = decodedToken || {};
-        setDecodedAudience((typeof audience === "string" ? audience : audience?.[0]) || null);
-    }, [decodedToken]);
-    useEffect(() => {
-        if (decodedAudience)
-            setDomain(config.noCloudInUrl
-                ? decodedAudience.replace("cloud.", "")
-                : decodedAudience);
-    }, [decodedAudience, config.noCloudInUrl]);
     return (React.createElement(C3UserConfigurationContext.Provider, { value: {
             ...config,
             activeOrganizationId: activeOrgId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -79,8 +79,8 @@
   "peerDependencies": {
     "@carbon/react": "1.x",
     "event-source-polyfill": "1.0.x",
-    "react": "18.x",
-    "react-dom": "18.x",
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x",
     "styled-components": "5.x || 6.x"
   },
   "description": "Camunda Composite Components",