@camunda/camunda-composite-components 0.20.2 → 0.20.3

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Loading, ProgressIndicator, ProgressStep, Stack } from "@carbon/react";
 import React, { useState } from "react";
 import { OnboardingModal } from "./onboardingModal";
@@ -119,25 +120,20 @@ export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona
     else {
         theme = "dark";
     }
-    const content = (React.createElement(React.Fragment, null,
-        React.createElement(Body01, null, isLoadingConfig
-            ? ""
-            : onboardingConfiguration?.header?.description ||
-                "Get personalized next steps and educational content by answering this 1-minute survey."),
-        React.createElement(Stack, { gap: 8 },
-            React.createElement(ProgressIndicator, { currentIndex: step, spaceEqually: true, onChange: tryStepTo }, isLoadingConfig ? (React.createElement(Loading, null)) : (onboardingConfiguration.steps.map((currentStep, index) => (React.createElement(ProgressStep, { label: `Step ${index + 1}`, secondaryLabel: currentStep.title, key: `onboarding-step-${index}`, disabled: step !== index }))))),
-            React.createElement(OnboardingStep, { theme: theme, generic: generic, setGeneric: setGeneric, config: onboardingConfiguration.steps[step] }))));
+    const content = (_jsxs(_Fragment, { children: [_jsx(Body01, { children: isLoadingConfig
+                    ? ""
+                    : onboardingConfiguration?.header?.description ||
+                        "Get personalized next steps and educational content by answering this 1-minute survey." }), _jsxs(Stack, { gap: 8, children: [_jsx(ProgressIndicator, { currentIndex: step, spaceEqually: true, onChange: tryStepTo, children: isLoadingConfig ? (_jsx(Loading, {})) : (onboardingConfiguration.steps.map((currentStep, index) => (_jsx(ProgressStep, { label: `Step ${index + 1}`, secondaryLabel: currentStep.title, disabled: step !== index }, `onboarding-step-${index}`)))) }), _jsx(OnboardingStep, { theme: theme, generic: generic, setGeneric: setGeneric, config: onboardingConfiguration.steps[step] })] })] }));
     if (modal) {
-        return (React.createElement(OnboardingModal, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
+        return (_jsx(OnboardingModal, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
                 ? ""
                 : onboardingConfiguration.header?.title ||
-                    `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", theme: theme, onPrimary: stepForward, onRequestClose: onRequestClose, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined }, content));
+                    `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", theme: theme, onPrimary: stepForward, onRequestClose: onRequestClose, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined, children: content }));
     }
     else {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(OnboardingPage, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
+        return (_jsx(_Fragment, { children: _jsx(OnboardingPage, { isDoingAsyncWork: isDoingAsyncWork, heading: isLoadingConfig
                     ? ""
                     : onboardingConfiguration?.header?.title ||
-                        `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", onPrimary: stepForward, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined }, content)));
+                        `Welcome to Camunda, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", onPrimary: stepForward, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined, children: content }) }));
     }
 };

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

@@ -1,36 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from "@carbon/react";
-import React from "react";
 import { RadioGroupElementSingle } from "./elements/radioGroupSingle";
 import { RadioGroupElementMulti } from "./elements/radioGroupMulti";
 import { TextInputElement } from "./elements/textField";
 import { DropdownSelect } from "./elements/dropdownSelect";
 import { OnboardingQuestionType } from "./onboarding.types";
 export const OnboardingStep = ({ theme, config, generic, setGeneric, }) => {
-    return (React.createElement(Stack, { gap: 6 }, (() => {
-        if (!config?.elements) {
-            return React.createElement(React.Fragment, null);
-        }
-        return config?.elements.map((element, index) => {
-            switch (element.type) {
-                case OnboardingQuestionType.TileSingleSelect:
-                    return (React.createElement(RadioGroupElementSingle, { theme: theme, tooltip: element.tooltip, elements: element.elements, selectedElement: generic(element.mapto), setSelectedElement: (e) => {
-                            setGeneric(element.mapto, e);
-                        }, title: element.title, label: element.label, columns: element.columns, key: `onboarding-step-element-${index}` }));
-                case OnboardingQuestionType.TileMultiSelect:
-                    return (React.createElement(RadioGroupElementMulti, { theme: theme, tooltip: element.tooltip, elements: element.elements, selectedElements: generic(element.mapto) ?? [], setSelectedElements: (e) => {
-                            setGeneric(element.mapto, e);
-                        }, title: element.title, label: element.label, columns: element.columns, key: `onboarding-step-element-${index}` }));
-                case OnboardingQuestionType.DropdownSelect:
-                    return (React.createElement(DropdownSelect, { tooltip: element.tooltip, elements: element.elements, selectedElement: generic(element.mapto), setSelectedElement: (e) => {
-                            setGeneric(element.mapto, e);
-                        }, title: element.title, label: element.label, columns: element.columns, exceptionTitle: element.exceptiontextinput?.title, exceptionLabel: element.exceptiontextinput?.label, exceptionValue: element.exceptiontextinput?.forvalue, key: `onboarding-step-element-${index}` }));
-                case OnboardingQuestionType.TextInput:
-                    return (React.createElement(TextInputElement, { title: element.title, label: element.label, preFiledValue: generic(element.mapto), setValue: (value) => {
-                            setGeneric(element.mapto, value);
-                        }, placeholder: "Your company\u2019s name", key: `onboarding-step-element-${index}` }));
-                default:
-                    return React.createElement(React.Fragment, null);
+    return (_jsx(Stack, { gap: 6, children: (() => {
+            if (!config?.elements) {
+                return _jsx(_Fragment, {});
             }
-        });
-    })()));
+            return config?.elements.map((element, index) => {
+                switch (element.type) {
+                    case OnboardingQuestionType.TileSingleSelect:
+                        return (_jsx(RadioGroupElementSingle, { theme: theme, tooltip: element.tooltip, elements: element.elements, selectedElement: generic(element.mapto), setSelectedElement: (e) => {
+                                setGeneric(element.mapto, e);
+                            }, title: element.title, label: element.label, columns: element.columns }, `onboarding-step-element-${index}`));
+                    case OnboardingQuestionType.TileMultiSelect:
+                        return (_jsx(RadioGroupElementMulti, { theme: theme, tooltip: element.tooltip, elements: element.elements, selectedElements: generic(element.mapto) ?? [], setSelectedElements: (e) => {
+                                setGeneric(element.mapto, e);
+                            }, title: element.title, label: element.label, columns: element.columns }, `onboarding-step-element-${index}`));
+                    case OnboardingQuestionType.DropdownSelect:
+                        return (_jsx(DropdownSelect, { tooltip: element.tooltip, elements: element.elements, selectedElement: generic(element.mapto), setSelectedElement: (e) => {
+                                setGeneric(element.mapto, e);
+                            }, title: element.title, label: element.label, columns: element.columns, exceptionTitle: element.exceptiontextinput?.title, exceptionLabel: element.exceptiontextinput?.label, exceptionValue: element.exceptiontextinput?.forvalue }, `onboarding-step-element-${index}`));
+                    case OnboardingQuestionType.TextInput:
+                        return (_jsx(TextInputElement, { title: element.title, label: element.label, preFiledValue: generic(element.mapto), setValue: (value) => {
+                                setGeneric(element.mapto, value);
+                            }, placeholder: "Your company\u2019s name" }, `onboarding-step-element-${index}`));
+                    default:
+                        return _jsx(_Fragment, {});
+                }
+            });
+        })() }));
 };

package/lib/esm/src/components/c3-page/c3-breadcrumb/c3-breadcrumb.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Link, OverflowMenu, OverflowMenuItem, SkeletonText, Stack, Tag, } from "@carbon/react";
-import React from "react";
 const breadCrumbWrapperStyles = {
     minHeight: "40px",
     display: "grid",
@@ -10,23 +10,14 @@ const breadCrumbWrapperStyles = {
 export const C3Breadcrumb = ({ loading, noTrailingSlash, elements, title, menu, tag, forwardRef, }) => {
     let breadcrumb = null;
     if (loading) {
-        breadcrumb = (React.createElement(Stack, null,
-            React.createElement(BreadcrumbSkeleton, null),
-            title && React.createElement(SkeletonText, null)));
+        breadcrumb = (_jsxs(Stack, { children: [_jsx(BreadcrumbSkeleton, {}), title && _jsx(SkeletonText, {})] }));
     }
     else {
-        breadcrumb = (React.createElement(Stack, { gap: 1 },
-            React.createElement(Breadcrumb, { noTrailingSlash: noTrailingSlash ?? false }, elements.map((element) => {
-                return (React.createElement(BreadcrumbItem, { key: element.key },
-                    React.createElement(Link, { as: forwardRef, style: { cursor: "pointer" }, ...element.routeProps }, element.label)));
-            })),
-            (menu || title || tag) && (React.createElement("div", { style: breadCrumbWrapperStyles },
-                React.createElement(Stack, { orientation: "horizontal", gap: 4 },
-                    title && React.createElement("h2", null, title),
-                    tag && React.createElement(Tag, { type: "blue" }, tag)),
-                menu && (React.createElement(OverflowMenu, { style: { float: "right" }, "aria-label": "breadcrumb menu" }, menu.map((item) => {
-                    return (React.createElement(OverflowMenuItem, { key: item.key, id: item.key, onClick: () => item.onClick(), itemText: item.label, isDelete: item.isDelete }));
-                })))))));
+        breadcrumb = (_jsxs(Stack, { gap: 1, children: [_jsx(Breadcrumb, { noTrailingSlash: noTrailingSlash ?? false, children: elements.map((element) => {
+                        return (_jsx(BreadcrumbItem, { children: _jsx(Link, { as: forwardRef, style: { cursor: "pointer" }, ...element.routeProps, children: element.label }) }, element.key));
+                    }) }), (menu || title || tag) && (_jsxs("div", { style: breadCrumbWrapperStyles, children: [_jsxs(Stack, { orientation: "horizontal", gap: 4, children: [title && _jsx("h2", { children: title }), tag && _jsx(Tag, { type: "blue", children: tag })] }), menu && (_jsx(OverflowMenu, { style: { float: "right" }, "aria-label": "breadcrumb menu", children: menu.map((item) => {
+                                return (_jsx(OverflowMenuItem, { id: item.key, onClick: () => item.onClick(), itemText: item.label, isDelete: item.isDelete }, item.key));
+                            }) }))] }))] }));
     }
-    return React.createElement("div", { style: breadCrumbWrapperStyles }, breadcrumb);
+    return _jsx("div", { style: breadCrumbWrapperStyles, children: breadcrumb });
 };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid, Column, Stack } from "@carbon/react";
 import { C3Tabs } from "./c3-tabs/c3-tabs";
 import { C3Breadcrumb } from "./c3-breadcrumb/c3-breadcrumb";
@@ -6,13 +6,6 @@ import { DefaultStyleWrapper } from "../styles";
 const gridStyles = { paddingRight: 0, paddingLeft: 0 };
 const gridColumnStyles = { marginInline: 0 };
 const C3Page = ({ header, tabs, children, isLoading = false, breadcrumbs = { elements: [] }, }) => {
-    return (React.createElement(DefaultStyleWrapper, null,
-        React.createElement(Grid, { style: gridStyles },
-            React.createElement(Column, { span: 16, style: gridColumnStyles },
-                React.createElement(Stack, { orientation: "vertical", gap: 7 },
-                    (breadcrumbs.elements?.length || header) && (React.createElement(C3Breadcrumb, { ...breadcrumbs, title: header?.title, menu: header?.menuItems, tag: header?.tag, loading: isLoading })),
-                    tabs && (React.createElement(Stack, { orientation: "vertical", gap: 5 },
-                        React.createElement(C3Tabs, { tabs: tabs.list, desiredTabId: tabs?.activeTabId, onTabChange: tabs?.onChange, loading: isLoading }))),
-                    children)))));
+    return (_jsx(DefaultStyleWrapper, { children: _jsx(Grid, { style: gridStyles, children: _jsx(Column, { span: 16, style: gridColumnStyles, children: _jsxs(Stack, { orientation: "vertical", gap: 7, children: [(breadcrumbs.elements?.length || header) && (_jsx(C3Breadcrumb, { ...breadcrumbs, title: header?.title, menu: header?.menuItems, tag: header?.tag, loading: isLoading })), tabs && (_jsx(Stack, { orientation: "vertical", gap: 5, children: _jsx(C3Tabs, { tabs: tabs.list, desiredTabId: tabs?.activeTabId, onTabChange: tabs?.onChange, loading: isLoading }) })), children] }) }) }) }));
 };
 export { C3Page };

package/lib/esm/src/components/c3-page/c3-tabs/c3-tabs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tab, TabList, TabPanel, TabPanels, Tabs, TabsSkeleton, } from "@carbon/react";
 import React from "react";
 const TabPanelStyles = { paddingLeft: 0, paddingRight: 0 };
@@ -19,15 +20,13 @@ export const C3Tabs = ({ tabs, desiredTabId, onTabChange, loading = false, }) =>
         setActiveTabIndex(selectedTab);
     }, [selectedTab]);
     if (loading) {
-        return React.createElement(TabsSkeleton, { key: "tabs-skeleton" });
+        return _jsx(TabsSkeleton, {}, "tabs-skeleton");
     }
-    return (React.createElement(Tabs, { selectedIndex: activeTabIndex, onChange: (event) => {
+    return (_jsxs(Tabs, { selectedIndex: activeTabIndex, onChange: (event) => {
             setActiveTabIndex(event.selectedIndex);
             const newDesiredTab = visibleTabs[event.selectedIndex].id;
             if (event.selectedIndex !== activeTabIndex && onTabChange) {
                 onTabChange(newDesiredTab);
             }
-        } },
-        React.createElement(TabList, { "aria-label": "tabs" }, visibleTabs.map((tab) => (React.createElement(Tab, { key: `${tab.id}-label` }, tab.label)))),
-        React.createElement(TabPanels, null, visibleTabs.map((tab) => (React.createElement(TabPanel, { key: tab.id, style: TabPanelStyles }, tab.content))))));
+        }, children: [_jsx(TabList, { "aria-label": "tabs", children: visibleTabs.map((tab) => (_jsx(Tab, { children: tab.label }, `${tab.id}-label`))) }), _jsx(TabPanels, { children: visibleTabs.map((tab) => (_jsx(TabPanel, { style: TabPanelStyles, children: tab.content }, tab.id))) })] }));
 };

package/lib/esm/src/components/c3-responsive-stack/c3-responsive-stack.d.ts

@@ -0,0 +1,2 @@
+declare const C3ResponsiveStack: any;
+export { C3ResponsiveStack };

package/lib/esm/src/components/c3-responsive-stack/c3-responsive-stack.js

@@ -0,0 +1,13 @@
+import { styled } from "styled-components";
+const C3ResponsiveStack = styled.div `
+	display: flex;
+	flex-direction: ${({ orientation }) => `${orientation === "vertical" ? "column" : "row"}`};
+	gap: ${({ gap }) => `${typeof gap === "string" ? gap : `${(gap ?? 1) * 16}px`}`};
+	${({ alignItems }) => (alignItems ? `align-items: ${alignItems};` : "")}
+	${({ justifyContent }) => justifyContent ? `justify-content: ${justifyContent};` : ""}
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+	}
+`;
+export { C3ResponsiveStack };

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -21,5 +21,5 @@ export type C3ProfileContextValue = {
 export declare const C3ProfileContext: React.Context<C3ProfileContextValue>;
 export declare const C3ProfileProvider: ({ children }: {
     children: JSX.Element;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useC3Profile: () => C3ProfileContextValue;

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

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { C3UserConfigurationContext } from "../c3-user-configuration-provider";
 import { getUserTheme, updateTheme, getClusters, getOrgs, } from "../../../api/profile";
 import { CarbonThemeProvider, resolveTheme, } from "./carbon-theme-provider";
@@ -91,8 +92,8 @@ export const C3ProfileProvider = ({ children }) => {
     };
     if (!isEnabled)
         return children;
-    const content = config.handleTheme ? (React.createElement(CarbonThemeProvider, null, children)) : (children);
-    return (React.createElement(C3ProfileContext.Provider, { value: {
+    const content = config.handleTheme ? (_jsx(CarbonThemeProvider, { children: children })) : (children);
+    return (_jsx(C3ProfileContext.Provider, { value: {
             isEnabled,
             theme: themeRef.current,
             resolvedTheme,
@@ -105,6 +106,6 @@ export const C3ProfileProvider = ({ children }) => {
             removeOrg,
             onThemeChange,
             loadClustersById,
-        } }, content));
+        }, children: content }));
 };
 export const useC3Profile = () => useContext(C3ProfileContext);

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

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { useC3Profile } from "./c3-profile-provider";
 import { GlobalTheme } from "@carbon/react";
 const THEMES = {
@@ -19,5 +20,5 @@ export const CarbonThemeProvider = ({ children }) => {
     useEffect(() => {
         updateCarbonTheme(getCarbonTheme(resolvedTheme));
     }, [resolvedTheme]);
-    return React.createElement(GlobalTheme, { theme: carbonTheme }, children);
+    return _jsx(GlobalTheme, { theme: carbonTheme, children: children });
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect, useState } from "react";
 import { C3ProfileProvider } from "./c3-profile-provider/c3-profile-provider";
 import { decodeJWT } from "./authToken";
@@ -29,16 +30,14 @@ const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config
     useEffect(() => {
         setActiveOrgId(activeOrganizationId);
     }, [activeOrganizationId]);
-    return (React.createElement(C3UserConfigurationContext.Provider, { value: {
+    return (_jsx(C3UserConfigurationContext.Provider, { value: {
             ...config,
             activeOrganizationId: activeOrgId,
             setActiveOrgId,
             decodedToken,
             decodedAudience,
             domain,
-        } },
-        React.createElement(C3ProfileProvider, null,
-            React.createElement(C3HelpCenterProvider, null, children))));
+        }, children: _jsx(C3ProfileProvider, { children: _jsx(C3HelpCenterProvider, { children: children }) }) }));
 };
 export const useC3UserConfiguration = () => useContext(C3UserConfigurationContext);
 export default C3UserConfigurationProvider;

package/lib/esm/src/contexts/c3-cluster-update-manager.d.ts

@@ -5,7 +5,7 @@ type C3ClusterUpdateManagerProps = {
     stage: Stage;
     userToken: string;
 };
-declare const C3ClusterUpdateManager: ({ children, stage, userToken, }: C3ClusterUpdateManagerProps) => JSX.Element;
+declare const C3ClusterUpdateManager: ({ children, stage, userToken, }: C3ClusterUpdateManagerProps) => import("react/jsx-runtime").JSX.Element;
 declare const useClusterUpdate: ({ onUpdate }: {
     onUpdate: (data: any) => void;
 }) => void;

package/lib/esm/src/contexts/c3-cluster-update-manager.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useEffect, createContext } from "react";
 import { ClustersService } from "../api/clusters";
 const C3ClusterUpdateManagerContext = createContext(null);
@@ -9,7 +10,7 @@ const C3ClusterUpdateManager = ({ children, stage, userToken, }) => {
             eventSource.close();
         };
     }, [stage, userToken]);
-    return (React.createElement(C3ClusterUpdateManagerContext.Provider, { value: null }, children));
+    return (_jsx(C3ClusterUpdateManagerContext.Provider, { value: null, children: children }));
 };
 const useClusterUpdate = ({ onUpdate }) => {
     const onUpdateRef = useRef(onUpdate);

package/lib/esm/src/hooks/useApi.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RequestResponse } from "../api/api";
 type QueryFn<R = undefined> = (...params: any[]) => Promise<RequestResponse<R>> | undefined;
 type OnSuccess<R = undefined> = (data: R | undefined) => void;
@@ -6,12 +5,12 @@ type OnError = () => void;
 declare const useApi: <R = undefined>({ queryFn, queryKey, onSuccess, onError, enabled, }: {
     queryFn: QueryFn<R>;
     queryKey: unknown[];
-    enabled?: boolean | undefined;
-    onSuccess?: OnSuccess<R> | undefined;
-    onError?: OnError | undefined;
+    enabled?: boolean;
+    onSuccess?: OnSuccess<R>;
+    onError?: OnError;
 }) => {
     data: R | null;
-    setData: import("react").Dispatch<import("react").SetStateAction<R | null>>;
+    setData: import("@types/react").Dispatch<import("@types/react").SetStateAction<R | null>>;
     status: number;
     errors: string[] | null;
     loading: boolean;

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

@@ -29,3 +29,4 @@ export { C3DataTableActionProps, C3DataTableHeaderContentType, C3DataTableHeader
 export { RequestResponse } from "./api/api";
 export { useApi } from "./hooks/useApi";
 export { C3ClusterUpdateManager } from "./contexts/c3-cluster-update-manager";
+export { C3ResponsiveStack } from "./components/c3-responsive-stack/c3-responsive-stack";

package/lib/esm/src/index.js

@@ -20,3 +20,4 @@ export { C3Page } from "./components/c3-page/c3-page";
 export { C3DataTable } from "./components/c3-data-table/c3-data-table";
 export { useApi } from "./hooks/useApi";
 export { C3ClusterUpdateManager } from "./contexts/c3-cluster-update-manager";
+export { C3ResponsiveStack } from "./components/c3-responsive-stack/c3-responsive-stack";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -15,33 +15,24 @@
     "@babel/preset-env": "7.25.7",
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
-    "@carbon/react": "1.69.0",
+    "@carbon/react": "1.90.0",
     "@mdx-js/react": "3.0.1",
     "@playwright/test": "1.45.2",
-    "@storybook/addon-a11y": "8.6.4",
-    "@storybook/addon-actions": "8.6.4",
-    "@storybook/addon-docs": "8.6.4",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/addon-interactions": "8.6.4",
-    "@storybook/addon-links": "8.6.4",
-    "@storybook/addon-mdx-gfm": "8.6.4",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/blocks": "8.6.4",
+    "@storybook/addon-a11y": "9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-links": "9.1.4",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "8.6.4",
-    "@storybook/react-webpack5": "8.6.4",
-    "@storybook/test": "8.6.4",
-    "@storybook/test-runner": "0.19.1",
-    "@types/carbon-components-react": "7.55.10",
+    "@storybook/react-webpack5": "9.1.4",
+    "@storybook/test-runner": "0.23.0",
     "@types/event-source-polyfill": "1.0.5",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.2",
     "@types/mixpanel-browser": "2.49.0",
     "@types/node": "22.13.14",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "7.17.0",
     "@typescript-eslint/parser": "7.17.0",
-    "axe-playwright": "2.0.1",
+    "axe-playwright": "2.1.0",
     "babel-loader": "9.2.1",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "copyfiles": "2.4.1",
@@ -53,21 +44,22 @@
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "9.1.4",
     "event-source-polyfill": "1.0.31",
     "husky": "9.1.2",
     "mixpanel-browser": "2.49.0",
     "prettier": "3.3.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-is": "^19.1.0",
     "rimraf": "6.0.1",
     "sass": "1.74.1",
     "sass-loader": "14.1.1",
     "serve": "14.2.4",
-    "storybook": "^8.6.4",
+    "storybook": "^9.1.4",
     "style-loader": "4.0.0",
     "styled-components": "6.1.8",
-    "typescript": "4.9.5",
+    "typescript": "5.8.3",
     "wait-on": "8.0.2",
     "webpack": "5.94.0"
   },
@@ -99,20 +91,21 @@
     "build-storybook": "storybook build",
     "build:all": "pnpm build && pnpm build-storybook",
     "serve:storybook": "npx --yes serve ./storybook-static -p 6006 -n -L",
+    "docker:setup": "pnpm install && npx playwright install",
     "format": "prettier --write .",
     "lint": "eslint src/",
     "lint:fix": "eslint --fix src/",
     "test:ts": "tsc --noEmit --project ./tsconfig.json",
     "test:storybook": "TEST_A11Y=true test-storybook",
     "test:storybook:smoke": "test-storybook",
-    "start:docker-storybook": "pnpm build-storybook && docker-compose up -d && docker-compose exec c3-visual-regression pnpm serve:storybook",
+    "start:docker-storybook": "pnpm build-storybook && docker-compose up -d && docker-compose exec c3-visual-regression pnpm docker:setup && docker-compose exec c3-visual-regression pnpm serve:storybook",
     "test:visual-regression": "wait-on http://localhost:6006 && pnpm playwright test",
     "test:visual-regression:ui": "pnpm playwright test --ui",
     "report:visual-regression": "pnpm playwright show-report",
     "update:visual-regression": "pnpm playwright test --update-snapshots",
     "test:visual-regression:docker": "docker exec -it -t c3-visual-regression pnpm test:visual-regression",
     "update:visual-regression:docker": "docker exec -it -t c3-visual-regression pnpm update:visual-regression",
-    "test:all": "pnpm test:ts && pnpm serve:storybook & wait-on http://localhost:6006 && pnpm test:storybook && pnpm test:visual-regression:docker",
+    "test:all": "pnpm test:ts && pnpm serve:storybook & pnpm wait-on http://localhost:6006 && pnpm test:storybook && pnpm test:visual-regression:docker",
     "test": "pnpm test:ts"
   }
 }