@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/components/c4-billing-page/c4-billing-page.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Column, Grid, Stack } from '@carbon/react';
+import styled from 'styled-components';
+import { ClusterReservations } from './elements/cluster-reservations.js';
+import { CurrentUsageMetrics } from './elements/current-usage-metrics.js';
+import { PlanDetails } from './elements/plan-details.js';
+import { UsageAlerts } from './elements/usage-alerts.js';
+export const STYLES = {
+    grid: { margin: 0, padding: 0, gap: '16px' },
+};
+const TopRowWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  @media (min-wdith: 768px) {
+    flex-direction: row;
+  }
+`;
+const Wrapper = styled.div `
+  width: calc(100vw - 64px);
+  overflow-x: auto;
+
+  @media (min-width: 768px) {
+    width: 100%;
+  }
+`;
+export const C4BillingPage = ({ title, subheading, planDetails, usageAlerts, clusterReservations, currentUsageMetrics, isEnterpriseOrg = false, }) => {
+    const component = (_jsx(Wrapper, { children: _jsxs(Stack, { gap: 6, children: [_jsx(Grid, { style: { ...STYLES.grid }, children: _jsx(Column, { span: 16, style: { ...STYLES.grid }, children: _jsxs(Stack, { gap: 6, children: [title && _jsx("h1", { children: title }), subheading && (_jsx("span", { style: { color: 'var(--cds-text-secondary)' }, children: subheading }))] }) }) }), _jsxs(Stack, { gap: 5, children: [_jsxs(TopRowWrapper, { style: { ...STYLES.grid }, children: [_jsx("div", { children: _jsx(PlanDetails, { ...planDetails }) }), _jsx("div", { children: usageAlerts && _jsx(UsageAlerts, { ...usageAlerts }) })] }), _jsx(Grid, { style: { ...STYLES.grid }, children: _jsx(Column, { span: 16, style: { ...STYLES.grid }, children: _jsx(CurrentUsageMetrics, { ...currentUsageMetrics, isEnterpriseOrg: isEnterpriseOrg }) }) }), _jsx(Grid, { style: { ...STYLES.grid }, children: _jsx(Column, { span: 16, style: { ...STYLES.grid }, children: _jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        overflowX: 'auto',
+                                    }, children: _jsx(ClusterReservations, { ...clusterReservations }) }) }) })] })] }) }));
+    return component;
+};

package/lib/esm/components/c4-billing-page/c4-billing-page.types.d.ts

@@ -0,0 +1,13 @@
+import type { ClusterReservationsProps } from './elements/cluster-reservations';
+import type { CurrentUsageMetricsProps } from './elements/current-usage-metrics';
+import type { PlanDetailsProps } from './elements/plan-details';
+import type { UsageAlertsProps } from './elements/usage-alerts';
+export interface C4BillingPageProps {
+    title?: string;
+    subheading?: any;
+    planDetails: PlanDetailsProps;
+    usageAlerts?: UsageAlertsProps;
+    currentUsageMetrics: CurrentUsageMetricsProps;
+    clusterReservations: ClusterReservationsProps;
+    isEnterpriseOrg?: boolean;
+}

package/lib/esm/components/c4-billing-page/c4-billing-page.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-billing-page/custom-styles.d.ts

@@ -0,0 +1,13 @@
+export declare const BodyCompact01: {
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing: string;
+    color: string;
+};
+export declare const Heading03: {
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing: string;
+};

package/lib/esm/components/c4-billing-page/custom-styles.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export const BodyCompact01 = {
+    fontSize: 'var(--cds-body-compact-01-font-size) !important',
+    fontWeight: 'var(--cds-body-compact-01-font-weight) !important',
+    lineHeight: 'var(--cds-body-compact-01-line-height) !important',
+    letterSpacing: 'var(--cds-body-compact-01-letter-spacing) !important',
+    color: `var(--cds-text-secondary)`,
+};
+export const Heading03 = {
+    fontSize: 'var(--cds-heading-03-font-size)',
+    fontWeight: 'var(--cds-heading-03-font-weight)',
+    lineHeight: 'var(--cds-heading-03-line-height)',
+    letterSpacing: 'var(--cds-heading-03-letter-spacing)',
+};

package/lib/esm/components/c4-billing-page/elements/cluster-reservations.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from 'react';
+export interface ClusterReservationsProps {
+    title: string;
+    description?: string;
+    tooltip?: string;
+    loading: boolean;
+    data: ClusterReservationsStructuredListProps;
+}
+export declare const ClusterReservations: ({ title, description, tooltip, loading, data, }: ClusterReservationsProps) => JSX.Element;
+interface ClusterReservationsStructuredListProps {
+    heading: {
+        type: string;
+        clusters?: string;
+        used: string;
+        totalReserved: string;
+    };
+    rows: Array<{
+        key: string;
+        type: string;
+        clusters?: string | number;
+        used: string | number;
+        totalReserved: string | number;
+        action?: {
+            label: string;
+            onClick: () => void;
+        };
+    }>;
+}
+export {};

package/lib/esm/components/c4-billing-page/elements/cluster-reservations.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3EmptyState } from '@camunda/camunda-composite-components';
+import { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListRow, StructuredListWrapper, } from '@carbon/react';
+import { C4LinkButton } from '../../c4-link-button/c4-link-button.js';
+import { C4TileWithTitleAndAction } from '../../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+export const ClusterReservations = ({ title, description, tooltip, loading, data, }) => {
+    if (data.rows.length === 0) {
+        return (_jsx(C3EmptyState, { heading: 'No clusters have been created', description: 'To enable cluster creation for this team, first reserve clusters.' }));
+    }
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, tooltip: tooltip, description: description, loading: loading, children: _jsx(ClusterReservationsStructuredList, { ...data }) }));
+    return component;
+};
+const ClusterReservationsStructuredList = ({ heading, rows, }) => {
+    const listContent = (_jsxs(StructuredListRow, { head: true, children: [_jsx(StructuredListCell, { head: true, children: heading.type }), (() => {
+                if (heading.clusters) {
+                    return (_jsx(StructuredListCell, { head: true, children: heading.clusters }));
+                }
+                return _jsx(_Fragment, {});
+            })(), _jsx(StructuredListCell, { head: true, children: heading.used }), _jsx(StructuredListCell, { head: true, children: heading.totalReserved }), _jsx(StructuredListCell, { head: true })] }));
+    const component = (_jsxs(StructuredListWrapper, { isFlush: true, children: [_jsx(StructuredListHead, { children: listContent }), _jsx(StructuredListBody, { children: rows.map((row) => (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, children: row.type }), (() => {
+                            if (heading.clusters && row.clusters !== undefined) {
+                                return (_jsx(StructuredListCell, { noWrap: true, children: row.clusters }));
+                            }
+                            return _jsx(_Fragment, {});
+                        })(), _jsx(StructuredListCell, { noWrap: true, children: row.used }), _jsx(StructuredListCell, { noWrap: true, children: row.totalReserved }), _jsx(StructuredListCell, { noWrap: true, children: row.action && (_jsx(C4LinkButton, { label: row.action?.label, onClick: () => row.action?.onClick() })) })] }, row.key))) })] }));
+    return component;
+};

package/lib/esm/components/c4-billing-page/elements/current-usage-metrics.d.ts

@@ -0,0 +1,16 @@
+import { type JSX } from 'react';
+import { type ValueMetricProps } from './value-metric';
+export type MetricsOrder = 'tu' | 'gu' | 'pi' | 'di';
+export interface CurrentUsageMetricsProps {
+    title: JSX.Element;
+    description: string;
+    order?: MetricsOrder[];
+    isEnterpriseOrg?: boolean;
+    taskUsers: ValueMetricProps;
+    generalUsers: ValueMetricProps;
+    processInstances: ValueMetricProps;
+    decisionInstances: ValueMetricProps;
+}
+export declare const CurrentUsageMetrics: ({ title, decisionInstances, description, generalUsers, order, processInstances, taskUsers, isEnterpriseOrg, }: CurrentUsageMetricsProps) => JSX.Element;
+export type MediaSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export declare function mediaSizeByWidth(width: number): MediaSize;

package/lib/esm/components/c4-billing-page/elements/current-usage-metrics.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Column, Grid, Stack } from '@carbon/react';
+import { useEffect, useState } from 'react';
+import { C4TileWithTitleAndAction } from '../../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+import { STYLES } from '../c4-billing-page.js';
+import { ValueMetric } from './value-metric.js';
+export const CurrentUsageMetrics = ({ title, decisionInstances, description, generalUsers, order, processInstances, taskUsers, isEnterpriseOrg = false, }) => {
+    const [mediaSize, setMediaSize] = useState(mediaSizeByWidth(window.innerWidth));
+    useEffect(() => {
+        const handleWindowResize = () => {
+            setMediaSize(mediaSizeByWidth(window.innerWidth));
+        };
+        window.addEventListener('resize', handleWindowResize);
+        return () => {
+            window.removeEventListener('resize', handleWindowResize);
+        };
+    }, []);
+    const metricsOrder = order || ['gu', 'tu', 'pi', 'di'];
+    const metrics = [];
+    for (const metricItem of metricsOrder) {
+        switch (metricItem) {
+            case 'tu':
+                metrics.push(_jsx(ValueMetric, { ...taskUsers, isEnterpriseOrg: isEnterpriseOrg }));
+                break;
+            case 'gu':
+                metrics.push(_jsx(ValueMetric, { ...generalUsers, isEnterpriseOrg: isEnterpriseOrg }));
+                break;
+            case 'pi':
+                metrics.push(_jsx(ValueMetric, { ...processInstances, isEnterpriseOrg: isEnterpriseOrg }));
+                break;
+            case 'di':
+                metrics.push(_jsx(ValueMetric, { ...decisionInstances, isEnterpriseOrg: isEnterpriseOrg }));
+                break;
+        }
+    }
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, description: description, children: ['sm', 'md'].includes(mediaSize) ? (_jsxs(Stack, { gap: 5, children: [_jsxs(Grid, { style: { ...STYLES.grid }, children: [_jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[0] }), _jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[1] })] }), _jsxs(Grid, { style: { ...STYLES.grid }, children: [_jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[2] }), _jsx(Column, { span: 8, style: { ...STYLES.grid }, children: metrics[3] })] })] })) : (_jsx(Grid, { style: { ...STYLES.grid }, children: metrics.map((metric, index) => (_jsx(Column, { span: 4, style: { ...STYLES.grid }, children: metric }, `metric-${metricsOrder[index]}`))) })) }));
+    return component;
+};
+export function mediaSizeByWidth(width) {
+    let size = 'sm';
+    if (width < 672) {
+        size = 'sm';
+    }
+    else if (width <= 1056) {
+        size = 'md';
+    }
+    else if (width <= 1312) {
+        size = 'lg';
+    }
+    else if (width <= 1584) {
+        size = 'xl';
+    }
+    else {
+        size = 'xxl';
+    }
+    return size;
+}

package/lib/esm/components/c4-billing-page/elements/plan-details.d.ts

@@ -0,0 +1,20 @@
+import type { JSX } from 'react';
+export interface PlanDetailsProps {
+    title: string;
+    description: string;
+    loading: boolean;
+    plan: PlanDetailsItemProps;
+    additional: PlanDetailsItemProps;
+}
+export declare const PlanDetails: ({ title, description, loading, plan, additional, }: PlanDetailsProps) => JSX.Element;
+interface PlanDetailsItemProps {
+    title: string;
+    subTitle: string;
+    titleAdditional?: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export {};

package/lib/esm/components/c4-billing-page/elements/plan-details.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { C4TileWithTitleAndAction } from '../../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+import { BodyCompact01, Heading03 } from '../custom-styles.js';
+export const PlanDetails = ({ title, description, loading, plan, additional, }) => {
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, description: description, loading: loading, action: plan.action, children: _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(PlanDetailsItem, { ...plan }), _jsx(PlanDetailsItem, { ...additional })] }) }));
+    return component;
+};
+const PlanDetailsItem = ({ description, subTitle, title, titleAdditional, }) => {
+    const component = (_jsxs("div", { style: { display: 'grid', gridTemplateRows: 'auto auto auto 1fr' }, children: [_jsx("p", { style: { ...BodyCompact01 }, children: subTitle }), _jsxs("p", { children: [_jsx("span", { style: { ...Heading03 }, children: title }), titleAdditional && (_jsx("span", { className: 'cds--label', style: {
+                            color: 'var(--cds-text-helper)',
+                            alignSelf: 'end',
+                            justifySelf: 'start',
+                            paddingLeft: '0.5rem',
+                        }, children: titleAdditional }))] }), description && (_jsx("p", { className: 'cds--label', style: { color: 'var(--cds-text-secondary)' }, children: description }))] }));
+    return component;
+};

package/lib/esm/components/c4-billing-page/elements/usage-alerts.d.ts

@@ -0,0 +1,30 @@
+import type { JSX } from 'react';
+export interface UsageAlertsProps {
+    title: string;
+    description: string;
+    loading: boolean;
+    action: {
+        label: string;
+        onClick: () => void;
+    };
+    data: UsageAlertsStructuredListProps;
+}
+export declare const UsageAlerts: ({ title, description, loading, action, data, }: UsageAlertsProps) => JSX.Element;
+interface UsageAlertsStructuredListProps {
+    heading: {
+        metric: string;
+        threshold: string;
+        status: string;
+    };
+    rows: Array<{
+        key: string;
+        metric: string;
+        threshold: string;
+        status: string;
+        action: {
+            label: string;
+            onClick: () => void;
+        };
+    }>;
+}
+export {};

package/lib/esm/components/c4-billing-page/elements/usage-alerts.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListRow, StructuredListWrapper, } from '@carbon/react';
+import { C4LinkButton } from '../../c4-link-button/c4-link-button.js';
+import { C4TileWithTitleAndAction } from '../../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+export const UsageAlerts = ({ title, description, loading, action, data, }) => {
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, description: description, action: action, loading: loading, children: _jsx(UsageAlertsStructuredList, { ...data }) }));
+    return component;
+};
+const UsageAlertsStructuredList = ({ heading, rows, }) => {
+    const listContent = (_jsxs(StructuredListRow, { head: true, children: [_jsx(StructuredListCell, { head: true, children: heading.metric }), _jsx(StructuredListCell, { head: true, children: heading.threshold }), _jsx(StructuredListCell, { head: true, children: heading.status }), _jsx(StructuredListCell, { head: true })] }));
+    const component = (_jsxs(StructuredListWrapper, { isCondensed: true, isFlush: true, children: [_jsx(StructuredListHead, { children: listContent }), _jsx(StructuredListBody, { children: rows.map((row) => (_jsxs(StructuredListRow, { children: [_jsx(StructuredListCell, { noWrap: true, children: row.metric }), _jsx(StructuredListCell, { noWrap: true, children: row.threshold }), _jsx(StructuredListCell, { noWrap: true, children: row.status }), _jsx(StructuredListCell, { noWrap: true, children: _jsx(C4LinkButton, { label: row.action?.label, onClick: () => row.action?.onClick() }) })] }, row.key))) })] }));
+    return component;
+};

package/lib/esm/components/c4-billing-page/elements/value-metric.d.ts

@@ -0,0 +1,28 @@
+import type { JSX } from 'react';
+export declare enum CHART_COLORS {
+    BLUE = "#0F62FE",
+    RED = "#FF832B",// Orange color (original "red")
+    GREEN = "#24a148"
+}
+export interface ValueMetricProps {
+    title: string;
+    loading: boolean;
+    isEnterpriseOrg?: boolean;
+    metric: {
+        kind: 'simple' | 'chart';
+        value: {
+            title?: string;
+            subTitle?: string;
+            current?: number;
+            currentPostfix?: string;
+            max?: number | string;
+            maxPostfix?: string;
+        };
+        overagesDescription?: string;
+        action?: {
+            label: string;
+            onClick: () => void;
+        };
+    };
+}
+export declare const ValueMetric: ({ title, metric, loading, isEnterpriseOrg, }: ValueMetricProps) => JSX.Element;

package/lib/esm/components/c4-billing-page/elements/value-metric.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { MeterChart } from '@carbon/charts-react';
+import { DefinitionTooltip, Stack } from '@carbon/react';
+import { WarningAlt } from '@carbon/react/icons/index.esm.js';
+import { C4LinkButton } from '../../c4-link-button/c4-link-button.js';
+import { C4TileWithTitleAndAction } from '../../c4-tile-with-title-and-action/c4-tile-with-title-and-action.js';
+export var CHART_COLORS;
+(function (CHART_COLORS) {
+    CHART_COLORS["BLUE"] = "#0F62FE";
+    CHART_COLORS["RED"] = "#FF832B";
+    CHART_COLORS["GREEN"] = "#24a148";
+})(CHART_COLORS || (CHART_COLORS = {}));
+export const ValueMetric = ({ title, metric, loading, isEnterpriseOrg = false, }) => {
+    let chartProps;
+    let simpleProps;
+    switch (metric.kind) {
+        case 'chart':
+            chartProps = {
+                current: metric.value.current,
+                max: Number(metric.value.max),
+                currentPostfix: metric.value.currentPostfix,
+                maxPostfix: metric.value.maxPostfix,
+                label: title,
+                isEnterpriseOrg,
+            };
+            break;
+        case 'simple':
+            simpleProps = {
+                title: metric.value.title,
+                subTitle: metric.value.subTitle,
+                max: metric.value.max ? String(metric.value.max) : undefined,
+            };
+            break;
+    }
+    const component = (_jsx(C4TileWithTitleAndAction, { title: title, loading: loading, options: { layer: 2 }, children: _jsxs("div", { style: { display: 'grid', gridTemplateRows: 'auto 1fr', gap: '0.5rem' }, children: [chartProps && _jsx(MeterVisualization, { ...chartProps }), simpleProps && _jsx(SimpleText, { ...simpleProps }), metric.action && (_jsx(C4LinkButton, { label: metric.action?.label, onClick: () => metric.action?.onClick() })), metric.overagesDescription &&
+                    chartProps &&
+                    chartProps.current > chartProps.max && (_jsxs("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: 'auto 1fr',
+                        gap: '0.5rem',
+                    }, children: [_jsx(WarningAlt, { style: {
+                                color: CHART_COLORS.RED,
+                            } }), _jsxs("p", { children: [_jsx(DefinitionTooltip, { openOnHover: true, definition: metric.overagesDescription, children: _jsx("p", { children: "Overages" }) }), ' ', "applied"] })] }))] }) }));
+    return component;
+};
+const SimpleText = ({ title, subTitle }) => {
+    const component = (_jsx("div", { style: { display: 'grid', gridTemplateRows: 'auto 1fr' }, children: _jsxs("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: '1fr auto',
+                width: '100%',
+            }, children: [_jsx("p", { style: { fontSize: '18px' }, children: title }), subTitle && (_jsx("p", { style: { color: 'var(--cds-text-helper)', alignSelf: 'end' }, children: subTitle }))] }) }));
+    return component;
+};
+const MeterVisualization = ({ currentPrefix, current, currentPostfix, max, maxPostfix, label, isEnterpriseOrg = false, }) => {
+    // Determine color based on usage and organization type
+    let barColor = CHART_COLORS.BLUE;
+    if (current > max) {
+        // Enterprise orgs: use GREEN (#24a148)
+        // Non-enterprise orgs: use RED (#FF832B - orange)
+        barColor = isEnterpriseOrg ? CHART_COLORS.GREEN : CHART_COLORS.RED;
+    }
+    const data = {
+        current: formatNumber(current),
+        max: maxPostfix
+            ? `${formatNumber(max)} ${maxPostfix}`
+            : `${formatNumber(max)}`,
+        color: barColor,
+    };
+    if (currentPrefix) {
+        data.current = `${currentPrefix} ${data.current}`;
+    }
+    if (currentPostfix) {
+        data.current = `${data.current} ${currentPostfix}`;
+    }
+    const group = label ?? 'Sum';
+    const chartOptions = {
+        height: '20px',
+        meter: {
+            showLabels: false,
+            proportional: {
+                total: max,
+            },
+        },
+        color: {
+            scale: {
+                valuemetrics: data.color,
+            },
+        },
+        legend: {
+            enabled: false,
+        },
+        toolbar: {
+            enabled: false,
+        },
+    };
+    chartOptions.color.scale[group] = data.color;
+    const component = (_jsxs(Stack, { gap: 1, children: [_jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    width: '100%',
+                }, children: [_jsx("p", { style: { fontSize: '18px' }, children: data.current }), _jsx("p", { style: { color: 'var(--cds-text-helper)', alignSelf: 'end' }, children: data.max })] }), _jsx(MeterChart, { data: [
+                    {
+                        group,
+                        value: current,
+                    },
+                ], options: chartOptions })] }));
+    return component;
+};
+function formatNumber(number) {
+    return new Intl.NumberFormat('en-US', { maximumSignificantDigits: 3 }).format(number);
+}

package/lib/esm/components/c4-bottom-links/c4-bottom-links.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4BottomLinksProps } from './c4-bottom-links.types';
+export declare const C4BottomLinks: ({ links }: C4BottomLinksProps) => JSX.Element;

package/lib/esm/components/c4-bottom-links/c4-bottom-links.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Stack } from '@carbon/react';
+import { C4ExternalLink } from '../c4-external-link/c4-external-link.js';
+export const C4BottomLinks = ({ links }) => (_jsx(Stack, { orientation: 'horizontal', gap: 6, children: links.map((link) => (_jsx(C4ExternalLink, { href: link.href, id: link.id, label: link.label, onClick: link.onClick, target: link.target }, link.id))) }));

package/lib/esm/components/c4-bottom-links/c4-bottom-links.types.d.ts

@@ -0,0 +1,4 @@
+import type { C4ExternalLinkProps } from '../c4-external-link/c4-external-link.types';
+export interface C4BottomLinksProps {
+    links: C4ExternalLinkProps[];
+}

package/lib/esm/components/c4-bottom-links/c4-bottom-links.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-breadcrumb/c4-breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4BreadcrumbProps } from './c4-breadcrumb.types';
+export declare const C4Breadcrumb: ({ loading, noTrailingSlash, elements, title, menu, tag, codeSnippet, }: C4BreadcrumbProps) => JSX.Element;

package/lib/esm/components/c4-breadcrumb/c4-breadcrumb.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, CodeSnippet, Link, OverflowMenu, OverflowMenuItem, Stack, Tag, } from '@carbon/react';
+const breadCrumbWrapperStyles = {
+    minHeight: '40px',
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: 'max-content',
+    alignItems: 'center',
+};
+export const C4Breadcrumb = ({ loading, noTrailingSlash, elements, title, menu, tag, codeSnippet, }) => {
+    let breadcrumb = null;
+    if (loading) {
+        breadcrumb = _jsx(BreadcrumbSkeleton, {});
+    }
+    else {
+        breadcrumb = (_jsxs(Stack, { gap: 1, children: [_jsx(Breadcrumb, { noTrailingSlash: noTrailingSlash ?? false, children: elements.map((element) => {
+                        return (_jsx(BreadcrumbItem, { children: _jsx(Link, { href: element.href, onClick: (event) => {
+                                    if (element.onClick) {
+                                        event.preventDefault();
+                                        element.onClick();
+                                    }
+                                }, style: { cursor: 'pointer' }, children: element.label }) }, element.key));
+                    }) }), (menu || title || tag || codeSnippet) && (_jsxs("div", { style: breadCrumbWrapperStyles, children: [_jsxs(Stack, { orientation: 'horizontal', gap: 4, children: [title && _jsx("h2", { style: { marginTop: '2px' }, children: title }), tag && _jsx(Tag, { type: 'blue', children: tag }), codeSnippet?.text && (_jsx(CodeSnippet, { feedback: codeSnippet?.copyFeedback, type: 'inline', children: codeSnippet.text }))] }), menu && (_jsx(OverflowMenu, { style: { float: 'right' }, "aria-label": 'cluster operations', children: menu.map((item) => {
+                                return (_jsx(OverflowMenuItem, { id: item.key, onClick: () => item.onClick(), itemText: item.label, isDelete: item.isDelete }, item.key));
+                            }) }))] }))] }));
+    }
+    return _jsx("div", { style: breadCrumbWrapperStyles, children: breadcrumb });
+};

package/lib/esm/components/c4-breadcrumb/c4-breadcrumb.types.d.ts

@@ -0,0 +1,22 @@
+export interface C4BreadcrumbProps {
+    loading?: boolean;
+    noTrailingSlash?: boolean;
+    elements: Array<{
+        key: string;
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    }>;
+    title?: string;
+    tag?: string;
+    codeSnippet?: {
+        text: string;
+        copyFeedback: string;
+    };
+    menu?: Array<{
+        key: string;
+        label: string;
+        onClick: () => void;
+        isDelete?: boolean;
+    }>;
+}

package/lib/esm/components/c4-breadcrumb/c4-breadcrumb.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/components/c4-charts-dashboard/c4-charts-dashboard.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C4ChartsDashboardProps } from './c4-charts-dashboard.types';
+export declare const C4ChartsDashboard: ({ charts, theme, title, menuItems, isLoading, }: C4ChartsDashboardProps) => JSX.Element;

package/lib/esm/components/c4-charts-dashboard/c4-charts-dashboard.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { C3Page } from '@camunda/camunda-composite-components';
+import { Stack } from '@carbon/react';
+import { C4AlluvialChart } from './elements/alluvial-chart.js';
+import { C4BarChart } from './elements/bar-chart.js';
+import { C4LineChart } from './elements/line-chart.js';
+export const C4ChartsDashboard = ({ charts, theme, title, menuItems, isLoading, }) => {
+    const carbonTheme = theme === 'dark' ? 'g100' : 'g10';
+    const chartsByTab = new Map();
+    charts.forEach((chartConfig) => {
+        const key = chartConfig.tab;
+        const list = chartsByTab.get(key) ?? [];
+        list.push({
+            ...chartConfig,
+            dataPoints: chartConfig.dataPoints.toSorted((a, b) => {
+                if ('date' in a && 'date' in b) {
+                    return String(a.date).localeCompare(String(b.date));
+                }
+                if ('key' in a && 'key' in b) {
+                    return String(a.key).localeCompare(String(b.key));
+                }
+                return 0;
+            }),
+        });
+        chartsByTab.set(key, list);
+    });
+    const tabs = Array.from(chartsByTab.entries()).map(([tab, defs]) => ({
+        id: tab,
+        label: tab,
+        content: (_jsx(Stack, { gap: 4, children: defs.map((def, i) => {
+                const key = def.id ?? `${tab}-${def.title}-${i}`;
+                return _jsx(ChartItem, { ...def, theme: carbonTheme }, key);
+            }) })),
+    }));
+    return (_jsx(C3Page, { isLoading: isLoading, header: { title, menuItems }, tabs: { list: tabs } }));
+};
+const ChartItem = (props) => {
+    let component = _jsx("p", { children: "Unknown Definition" });
+    switch (props.type) {
+        case 'line':
+            component = _jsx(C4LineChart, { ...props, theme: props.theme });
+            break;
+        case 'bar':
+            component = _jsx(C4BarChart, { ...props, theme: props.theme });
+            break;
+        case 'alluvial':
+            component = _jsx(C4AlluvialChart, { ...props, theme: props.theme });
+            break;
+    }
+    return (_jsxs("div", { children: [props.source ? (_jsx("div", { style: { fontSize: 12, opacity: 0.7, marginBottom: 4 }, children: props.source })) : null, component] }));
+};