@camunda/camunda-composite-components 0.20.2 → 0.20.3

package/lib/esm/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/"
@@ -19,20 +19,21 @@
         "build:all": "pnpm build && pnpm build-storybook",
         "serve:storybook": "npx --yes serve ./storybook-static -p 6006 -n -L",
         "prepare": "husky",
+        "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"
     },
     "devDependencies": {
@@ -40,33 +41,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",
@@ -78,21 +70,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"
     },
@@ -115,5 +108,11 @@
         "/lib"
     ],
     "author": "Camunda",
-    "license": "Apache-2.0"
+    "license": "Apache-2.0",
+    "pnpm": {
+        "overrides": {
+            "@types/react": "18.3.12",
+            "@types/react-dom": "18.3.2"
+        }
+    }
 }

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

@@ -6,7 +6,7 @@ export class ClustersService {
             ...options,
             endpoint: CONSOLE,
         });
-        let source = new EventSourcePolyfill(`${baseUrl}/external/events`, {
+        const source = new EventSourcePolyfill(`${baseUrl}/external/events`, {
             headers: {
                 authorization: `Bearer ${options.userToken}`,
             },

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

@@ -51,6 +51,7 @@ export function getEndpointByOptions(options) {
             else if (options.stage) {
                 return getEndpoint(options.stage, options.endpoint);
             }
+            break;
         case "console":
             if (options.endpoints?.console) {
                 return options.endpoints.console;
@@ -58,6 +59,7 @@ export function getEndpointByOptions(options) {
             else if (options.stage) {
                 return getEndpoint(options.stage, options.endpoint);
             }
+            break;
     }
     throw new Error(`Missing stage or notifications endpoint`);
 }

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

@@ -13,7 +13,7 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     clusterIds: string[];
     salesPlanType: string;
     flags: string[];
-    signal?: AbortSignal | undefined;
+    signal?: AbortSignal;
 }) => Promise<RequestResponse<WpCardType[]>>;
 export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;

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

@@ -22,7 +22,7 @@ export class StatusService {
                 type: "json",
                 responseType: "json",
             });
-            let result = resp.result;
+            const result = resp.result;
             if (!resp.success ||
                 !result?.status.indicator ||
                 !result?.status.description) {

package/lib/esm/src/assets/c3-icons.d.ts

@@ -1,5 +1,5 @@
 import { C3IconProps } from "./c3-icons.types";
-export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element;
-export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => JSX.Element;
-export declare const C3BellIcon: ({ size }: C3IconProps) => JSX.Element;
-export declare const CamundaLogo: () => JSX.Element;
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const C3BellIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CamundaLogo: () => import("react/jsx-runtime").JSX.Element;

package/lib/esm/src/assets/c3-icons.js

@@ -1,14 +1,5 @@
-import React from "react";
-export const C3AppMenuIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { fill: "transparent", style: { mixBlendMode: "multiply" }, d: "M0 0h20v20H0z" }),
-    React.createElement("path", { d: "M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z" })));
-export const C3NotificationsUnreadIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z", fill: "$icon-primary" }),
-    React.createElement("path", { d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z", style: { fill: "var(--cds-link-primary)" } })));
-export const C3BellIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("path", { d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z", fill: "#FF8201" })));
-export const CamundaLogo = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
-    React.createElement("title", null, "Camunda logo"),
-    React.createElement("rect", { width: "24", height: "24", rx: "3", style: { fill: "var(--cds-icon-primary)" } }),
-    React.createElement("path", { d: "M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z", style: { fill: "var(--cds-text-inverse)" } }),
-    React.createElement("path", { d: "M14.762 17.312H9.224v3.13h5.538v-3.13Z", fill: "#FC5D0D" })));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const C3AppMenuIcon = ({ size }) => (_jsx(_Fragment, { children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fill: "transparent", style: { mixBlendMode: "multiply" }, d: "M0 0h20v20H0z" }), _jsx("path", { d: "M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z" })] }) }));
+export const C3NotificationsUnreadIcon = ({ size }) => (_jsx(_Fragment, { children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z", fill: "$icon-primary" }), _jsx("path", { d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z", style: { fill: "var(--cds-link-primary)" } })] }) }));
+export const C3BellIcon = ({ size }) => (_jsx(_Fragment, { children: _jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z", fill: "#FF8201" }) }) }));
+export const CamundaLogo = () => (_jsx(_Fragment, { children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("title", { children: "Camunda logo" }), _jsx("rect", { width: "24", height: "24", rx: "3", style: { fill: "var(--cds-icon-primary)" } }), _jsx("path", { d: "M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z", style: { fill: "var(--cds-text-inverse)" } }), _jsx("path", { d: "M14.762 17.312H9.224v3.13h5.538v-3.13Z", fill: "#FC5D0D" })] }) }));

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards.d.ts

@@ -12,5 +12,5 @@ type AppTeaserCardsProps = {
     };
     subtext: string;
 };
-export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => JSX.Element;
+export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards.js

@@ -1,5 +1,6 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, InlineNotification, Stack } from "@carbon/react";
-import React from "react";
 import { AppTeaserCard } from "./app-teaster-card";
 import { body02 } from "../styles";
 import styled from "styled-components";
@@ -14,22 +15,12 @@ export const AppTeaserCards = ({ title, subtitle, cards, cta, subtext, }) => {
     const innerColumns = new Array(cards.length).fill("428px");
     const gridTemplateColumns = `1fr ${innerColumns.join(" ")} 1fr`;
     const gridGap = "10px";
-    return (React.createElement(Stack, { gap: 8 },
-        React.createElement(Stack, { gap: 4 },
-            React.createElement("h1", { style: { textAlign: "center" } }, title),
-            React.createElement(Subtitle, null,
-                React.createElement("p", null, subtitle))),
-        React.createElement(Stack, { gap: 5 },
-            React.createElement("div", { style: {
-                    display: "grid",
-                    justifyContent: "center",
-                } }, cta.disabled && cta.disabledMessage ? (React.createElement(InlineNotification, { kind: "info", title: cta.disabledMessage, hideCloseButton: true })) : (React.createElement(Button, { id: "teasercards-button", onClick: cta.action, renderIcon: cta.renderIcon, isExpressive: true }, cta.text))),
-            !cta.disabled && subtext && (React.createElement("div", { style: {
-                    display: "grid",
-                    justifyContent: "center",
-                    fontSize: "14px",
-                } }, subtext))),
-        React.createElement(Stack, { gap: 6, orientation: "vertical" },
-            React.createElement(Stack, { gap: 6 },
-                React.createElement("div", { style: { display: "grid", gridTemplateColumns, gap: gridGap } }, cards.map((card, index) => (React.createElement(AppTeaserCard, { ...card, key: "teasercardz" + index, grid: { column: index + 2 } }))))))));
+    return (_jsxs(Stack, { gap: 8, children: [_jsxs(Stack, { gap: 4, children: [_jsx("h1", { style: { textAlign: "center" }, children: title }), _jsx(Subtitle, { children: _jsx("p", { children: subtitle }) })] }), _jsxs(Stack, { gap: 5, children: [_jsx("div", { style: {
+                            display: "grid",
+                            justifyContent: "center",
+                        }, children: cta.disabled && cta.disabledMessage ? (_jsx(InlineNotification, { kind: "info", title: cta.disabledMessage, hideCloseButton: true })) : (_jsx(Button, { id: "teasercards-button", onClick: cta.action, renderIcon: cta.renderIcon, isExpressive: true, children: cta.text })) }), !cta.disabled && subtext && (_jsx("div", { style: {
+                            display: "grid",
+                            justifyContent: "center",
+                            fontSize: "14px",
+                        }, children: subtext }))] }), _jsx(Stack, { gap: 6, orientation: "vertical", children: _jsx(Stack, { gap: 6, children: _jsx("div", { style: { display: "grid", gridTemplateColumns, gap: gridGap }, children: cards.map((card, index) => (_createElement(AppTeaserCard, { ...card, key: "teasercardz" + index, grid: { column: index + 2 } }))) }) }) })] }));
 };

package/lib/esm/src/components/c3-app-teaser/app-teaster-card.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type AppTeaserCardProps = {
     grid?: {
         column?: number | string;

package/lib/esm/src/components/c3-app-teaser/app-teaster-card.js

@@ -1,23 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tile } from "@carbon/react";
-import React from "react";
 import styled from "styled-components";
 const Description = styled.p `
 	font-size: 15px !important;
 `;
 export const AppTeaserCard = (props) => {
     const gap = 1;
-    return (React.createElement(Tile, { style: {
+    return (_jsx(Tile, { style: {
             gridColumn: props.grid?.column ?? 1,
             padding: "16px",
             height: "100%",
-        } },
-        React.createElement("div", { style: {
+        }, children: _jsxs("div", { style: {
                 display: "grid",
                 gap: `${gap}rem`,
                 gridTemplateRows: `auto auto 1fr`,
                 height: "100%",
-            } },
-            React.createElement("h2", null, props.title),
-            React.createElement(Description, null, props.description),
-            React.createElement("img", { src: props.img.path, alt: props.img.altText, style: { alignSelf: "end", width: "100%" } }))));
+            }, children: [_jsx("h2", { children: props.title }), _jsx(Description, { children: props.description }), _jsx("img", { src: props.img.path, alt: props.img.altText, style: { alignSelf: "end", width: "100%" } })] }) }));
 };

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser-page.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { type FC } from "react";
 import { C3AppTeaserProps } from "./c3-app-teaser";
 export type C3AppTeaserPageProps = {
     appName: C3AppTeaserProps["appName"];

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { C3AppTeaser } from "./c3-app-teaser";
 import { canCreateCluster, canUpgradePlan, isTrialExpired, } from "../../utils/camunda";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
@@ -39,5 +39,5 @@ export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateC
             }
         }
     };
-    return activeOrg && appName ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: null })) : (React.createElement(Loading, { withOverlay: true }));
+    return activeOrg && appName ? (_jsx(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: null })) : (_jsx(Loading, { withOverlay: true }));
 };

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { StartingPrice } from "../../api/organizations";
 export declare const teaserApps: readonly ["tasklist", "operate", "optimize"];
 export type TeaserApp = (typeof teaserApps)[number];

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Add, Settings } from "@carbon/react/icons";
 import { AppTeaserCards } from "./app-teaser-cards";
 import { getReadableAppName } from "../../utils/camunda";
@@ -38,12 +38,11 @@ export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster,
         : hasSleepingCluster
             ? variants.manageClusters
             : variants.createClusters;
-    return (React.createElement(DefaultStyleWrapper, null,
-        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: "", cta: {
-                action: onClickCta,
-                text: variant.ctaText,
-                renderIcon: variant.ctaIcon,
-                disabled: hasTrialExpired ? !canUpgradePlan : !canCreateCluster,
-                disabledMessage: variant.disabledMessage,
-            }, cards: appTeaserCardsConfig[app] })));
+    return (_jsx(_Fragment, { children: _jsx(DefaultStyleWrapper, { children: _jsx(AppTeaserCards, { title: variant.title, subtitle: _jsx(_Fragment, { children: variant.subtitle }), subtext: "", cta: {
+                    action: onClickCta,
+                    text: variant.ctaText,
+                    renderIcon: variant.ctaIcon,
+                    disabled: hasTrialExpired ? !canUpgradePlan : !canCreateCluster,
+                    disabledMessage: variant.disabledMessage,
+                }, cards: appTeaserCardsConfig[app] }) }) }));
 };

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { C3ClusterTagProps, C3ClusterTagWithClusterNameProps, CamundaClusterStage } from "./c3-cluster-tag.types";
+export type TagColor = "green" | "blue" | "purple" | "red" | "cool-gray" | "magenta" | "cyan" | "teal" | "gray" | "warm-gray" | "high-contrast" | "outline";
 export declare const C3ClusterTagWithClusterName: FC<C3ClusterTagWithClusterNameProps>;
 export declare const C3ClusterTag: FC<C3ClusterTagProps>;
-export declare function getColorForStage(stage: CamundaClusterStage): "blue" | "green" | "purple" | "red" | undefined;
+export declare function getColorForStage(stage: CamundaClusterStage): TagColor | undefined;

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from "@carbon/react";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export const C3ClusterTagWithClusterName = (props) => {
@@ -12,7 +12,8 @@ export const C3ClusterTagWithClusterName = (props) => {
         const foundCluster = clusters?.find((cluster) => cluster.uuid === props.clusterUuid);
         clustername = foundCluster?.name;
     }
-    let stage, color;
+    let color;
+    let stage;
     if ("stage" in props) {
         stage = props.stage;
     }
@@ -38,19 +39,19 @@ export const C3ClusterTagWithClusterName = (props) => {
         label = stage;
     }
     if (label && conditionalRendering(stage)) {
-        return React.createElement(Tag, { type: color }, label);
+        return _jsx(Tag, { type: color, children: label });
     }
     else {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
 };
 export const C3ClusterTag = (props) => {
     const { clusters } = useC3Profile();
-    return "stage" in props ? (React.createElement(Tag, { type: getColorForStage(props.stage) }, props.stage)) : "clusterUuid" in props ? (generateFromInput({
+    return "stage" in props ? (_jsx(Tag, { type: getColorForStage(props.stage), children: props.stage })) : "clusterUuid" in props ? (generateFromInput({
         clusterUuid: props.clusterUuid,
         allClusters: clusters,
         conditionalRendering: props.conditionalRendering || (() => true),
-    })) : (React.createElement(React.Fragment, null));
+    })) : (_jsx(_Fragment, {}));
 };
 function generateFromInput(props) {
     const foundCluster = props.allClusters?.find((cluster) => cluster.uuid === props.clusterUuid);
@@ -58,9 +59,9 @@ function generateFromInput(props) {
         foundCluster?.labels?.camunda?.length > 0) {
         const label = foundCluster.labels.camunda[0];
         return getColorForStage(label) &&
-            props.conditionalRendering(label) ? (React.createElement(Tag, { type: getColorForStage(label) }, label)) : (React.createElement(React.Fragment, null));
+            props.conditionalRendering(label) ? (_jsx(Tag, { type: getColorForStage(label), children: label })) : (_jsx(_Fragment, {}));
     }
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 }
 export function getColorForStage(stage) {
     switch (stage) {