@camunda/camunda-composite-components 0.22.3 → 0.22.5

package/lib/esm/src/components/c3-data-table/link-button/link-button.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/src/components/c3-empty-state/c3-empty-state.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { C3EmptyStateProps } from './c3-empty-state.types';
+export declare const C3EmptyState: ({ icon, heading, description, button, buttons, link, }: C3EmptyStateProps) => JSX.Element;

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

@@ -0,0 +1,15 @@
+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 { Button, Link, MenuButton, MenuItem, Stack, Tile } from '@carbon/react';
+import { C3ResponsiveStack } from '../c3-responsive-stack/c3-responsive-stack.js';
+export const C3EmptyState = ({ icon, heading, description, button, buttons, link, }) => (_jsx(_Fragment, { children: _jsx(Tile, { style: {
+            paddingLeft: '5rem',
+            paddingTop: '3rem',
+            paddingBottom: '3rem',
+        }, children: _jsxs(C3ResponsiveStack, { orientation: 'horizontal', gap: '1.5rem', children: [icon && (_jsx("div", { style: { maxWidth: '80px' }, children: _jsx("img", { src: icon.path, alt: icon.altText, style: { width: '100%' } }) })), _jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: heading }), _jsxs(Stack, { gap: 6, children: [_jsx("p", { style: { maxWidth: '400px' }, children: description }), _jsxs(Stack, { gap: 5, children: [buttons && buttons.length > 0 ? (_jsx("div", { style: { display: 'flex', gap: '0.5rem' }, children: buttons.map((btn, index) => 'items' in btn ? (_jsx(MenuButton, { size: 'md', disabled: btn.disabled, label: btn.label, kind: index === 0 ? undefined : 'tertiary', menuAlignment: 'bottom', children: btn.items.map((menuItem) => (_jsx(MenuItem, { onClick: menuItem.onClick, renderIcon: menuItem.icon, disabled: menuItem.disabled, label: menuItem.label }, menuItem.id))) }, btn.id)) : (_jsx(Button, { id: btn.id, size: 'md', kind: index === 0 ? undefined : 'tertiary', onClick: btn.onClick, renderIcon: btn.icon, disabled: btn.disabled, children: btn.label }, btn.id))) })) : button ? (_jsx(_Fragment, { children: 'items' in button ? (_jsx(MenuButton, { size: 'md', disabled: button.disabled, label: button.label, menuAlignment: 'bottom', children: button.items.map((menuItem) => {
+                                                    return (_jsx(MenuItem, { onClick: menuItem.onClick, renderIcon: menuItem.icon, disabled: menuItem.disabled, label: menuItem.label }, menuItem.id));
+                                                }) })) : (_jsx(Button, { id: button.id, size: 'md', onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled, children: button.label })) })) : null, link && (_jsx("div", { children: _jsx(Link, { target: '_blank', href: link.href, onClick: link.onClick, children: link.label }) }))] })] })] })] }) }) }));

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

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

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { expect, test } from '@playwright/test';
+import { getStory } from '../test-utils.js';
+test.describe('Empty State', () => {
+    test('Basic', async ({ page }) => {
+        await getStory(page, 'components-c3emptystate--basic');
+        await expect(page).toHaveScreenshot();
+    });
+    test('No icon', async ({ page }) => {
+        await getStory(page, 'components-c3emptystate--no-icon');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Button with menu', async ({ page }) => {
+        await getStory(page, 'components-c3emptystate--button-with-menu');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Multiple buttons with menu button', async ({ page }) => {
+        await getStory(page, 'components-c3emptystate--multiple-buttons-with-menu-button');
+        await expect(page).toHaveScreenshot();
+    });
+});

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

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+export type Button = {
+    onClick: () => void;
+    disabled?: boolean;
+    label: string;
+    icon?: any;
+    id?: string;
+};
+export type MenuButton = {
+    disabled?: boolean;
+    label: string;
+    id?: string;
+    items: Button[];
+};
+export interface C3EmptyStateProps {
+    heading: string;
+    description: string | ReactElement;
+    icon?: {
+        path: string;
+        altText: string;
+    };
+    button?: Button | MenuButton;
+    buttons?: Array<Button | MenuButton>;
+    link?: {
+        href: string;
+        label: string;
+        onClick?: () => void;
+    };
+}

package/lib/esm/src/components/c3-empty-state/c3-empty-state.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/src/components/c3-help-center/c3-help-center-provider.d.ts

@@ -0,0 +1,19 @@
+import React, { type FC, type PropsWithChildren } from 'react';
+export declare enum HelpCenterHintType {
+    HelpCenter = "help-center",
+    Onboarding = "onboarding"
+}
+export type C3HelpCenterContextValue = {
+    openHelpCenter: (showTabId?: string) => void;
+    setIsHelpCenterOpen: (isOpen: boolean) => void;
+    isHelpCenterOpen: boolean;
+    showTabId?: string | null;
+    showHint: boolean;
+    setShowHint: (showHint: boolean) => void;
+    setShowHintOnClose: (showHintOnClose: boolean) => void;
+    hintType: HelpCenterHintType;
+    setHintType: (hintType: HelpCenterHintType) => void;
+};
+export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
+export declare const C3HelpCenterProvider: FC<PropsWithChildren>;
+export declare const useC3HelpCenter: () => C3HelpCenterContextValue;

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

@@ -0,0 +1,58 @@
+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 React, { useEffect, useState, } from 'react';
+export var HelpCenterHintType;
+(function (HelpCenterHintType) {
+    HelpCenterHintType["HelpCenter"] = "help-center";
+    HelpCenterHintType["Onboarding"] = "onboarding";
+})(HelpCenterHintType || (HelpCenterHintType = {}));
+export const C3HelpCenterContext = React.createContext({
+    openHelpCenter: () => undefined,
+    setIsHelpCenterOpen: () => undefined,
+    isHelpCenterOpen: false,
+    showHint: false,
+    setShowHint: () => undefined,
+    setShowHintOnClose: () => undefined,
+    hintType: HelpCenterHintType.Onboarding,
+    setHintType: () => undefined,
+});
+export const C3HelpCenterProvider = ({ children }) => {
+    const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
+    const [activeTabId, setActiveTabId] = useState(null);
+    const [showHint, setShowHint] = useState(false);
+    const [showHintOnClose, setShowHintOnClose] = useState(false);
+    const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
+    const openHelpCenter = (showTabId) => {
+        if (!isHelpCenterOpen) {
+            setIsHelpCenterOpen(true);
+            setShowHint(false);
+        }
+        if (showTabId)
+            setActiveTabId(showTabId);
+    };
+    useEffect(() => {
+        if (!isHelpCenterOpen) {
+            setActiveTabId(null);
+            if (showHintOnClose) {
+                setShowHintOnClose(false);
+                setTimeout(() => setShowHint(true), 240);
+            }
+        }
+    }, [isHelpCenterOpen]);
+    return (_jsx(C3HelpCenterContext.Provider, { value: {
+            openHelpCenter,
+            setIsHelpCenterOpen,
+            isHelpCenterOpen,
+            showTabId: activeTabId,
+            showHint,
+            setShowHint,
+            setShowHintOnClose,
+            hintType,
+            setHintType,
+        }, children: children }));
+};
+export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

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

@@ -0,0 +1,16 @@
+import type { Dict } from 'mixpanel-browser';
+import { type FC } from 'react';
+import { type Theme } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider';
+import type { Persona } from './c3-help-center.types';
+export interface C3HelpCenterProps {
+    origin?: 'console' | 'webmodeler' | 'operate' | 'tasklist' | 'optimize' | 'identity' | 'admin';
+    theme?: Theme;
+    flags?: string[];
+    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

@@ -0,0 +1,218 @@
+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 { ActionableNotification, ComposedModal, Layer, ModalBody, ModalHeader, } from '@carbon/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import styled from 'styled-components';
+import { getConfig, updatePersona } from '../../api/help-center.js';
+import { C3OnboardingSurvey } from '../c3-onboarding-survey/c3-onboarding-survey.js';
+import { defaultTheme, useC3Profile, } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { resolveTheme, } from '../c3-user-configuration/c3-profile-provider/carbon-theme-provider.js';
+import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
+import { useC3HelpCenter } from './c3-help-center-provider.js';
+import { defaultHelpCenterConfig } from './defaultHelpCenterConfig.js';
+import { HelpCenter } from './help-center.js';
+const StyledComposedModal = styled(ComposedModal) `
+  .cds--modal-scroll-content {
+    mask-image: none;
+  }
+`;
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, currentApp, } = useC3UserConfiguration();
+    const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
+    const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
+    const themeRef = useRef('system');
+    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);
+    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) => {
+        if (customMixpanelTrack) {
+            customMixpanelTrack(event, data);
+        }
+        else if (analyticsTrack) {
+            analyticsTrack(event, data);
+        }
+    };
+    useEffect(() => {
+        const updateResolvedTheme = ({ matches }) => {
+            if (themeRef.current === 'system') {
+                setResolvedTheme(matches ? 'light' : 'dark');
+            }
+        };
+        window
+            .matchMedia('(prefers-color-scheme: light)')
+            .addEventListener('change', updateResolvedTheme);
+        return () => {
+            window
+                .matchMedia('(prefers-color-scheme: light)')
+                .removeEventListener('change', updateResolvedTheme);
+        };
+    }, []);
+    useEffect(() => {
+        const newTheme = themeHandlingEnabled ? themeConfig : theme;
+        if (newTheme) {
+            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]);
+    useEffect(() => {
+        if (isFirstLoad.current ||
+            !userToken ||
+            !decodedAudience ||
+            !persona?.complete)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [persona?.complete]);
+    useEffect(() => {
+        if (isFirstLoad.current || !activeOrganizationId)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [activeOrganizationId]);
+    React.useEffect(() => {
+        const tabs = helpCenterConfig.tabs;
+        const firstTab = tabs[0]?.id;
+        if (isOpen) {
+            if (autoStartSurvey && !persona?.wasShown) {
+                setShowHintOnClose(true);
+            }
+            if (persona && !persona.wasShown && decodedAudience) {
+                updatePersona({
+                    newPersona: { ...persona, wasShown: true },
+                    audience: decodedAudience,
+                    accessToken: userToken,
+                    orgId: activeOrganizationId,
+                    userId,
+                });
+                setPersona({ wasShown: true });
+            }
+            mixpanelTrack?.('helpcenter:open', {
+                to: activeTab ?? firstTab,
+                from: origin,
+            });
+        }
+    }, [isOpen]);
+    const onRequestRetakeSurvey = () => {
+        if (!userToken || !activeOrganizationId || !decodedAudience)
+            return;
+        const newPersona = {
+            ...persona,
+            ...{ nextStep: 0, complete: false },
+        };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience: decodedAudience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(true);
+    };
+    const onRequestResumeSurvey = () => {
+        if (!userToken || !activeOrganizationId || !decodedAudience)
+            return;
+        const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience: decodedAudience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(true);
+    };
+    const onRequestSkipSurvey = () => {
+        if (!userToken || !activeOrganizationId || !decodedAudience)
+            return;
+        const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience: decodedAudience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(false);
+    };
+    const personaCallback = (newPersona) => {
+        setPersona(newPersona);
+        onPersonaChange?.(newPersona);
+        if (newPersona.complete) {
+            setShowSurvey(false);
+        }
+    };
+    const closeFn = () => {
+        setIsHelpCenterOpen(false);
+        if (persona && userToken && activeOrganizationId && decodedAudience) {
+            updatePersona({
+                newPersona: persona,
+                audience: decodedAudience,
+                accessToken: userToken,
+                orgId: activeOrganizationId,
+                userId,
+            });
+        }
+        onRequestClose?.();
+        fetchConfig();
+        reloadClusters();
+        // wait for modal transition
+        setTimeout(() => {
+            setShowSurvey(false);
+        }, 400);
+    };
+    return (_jsx(Layer, { children: _jsx(StyledComposedModal, { open: isOpen, size: 'lg', onClose: closeFn, className: 'help-center', "aria-label": 'HelpCenter', preventCloseOnClickOutside: true, style: showSurvey || !persona?.wasShown
+                ? { backgroundColor: 'rgba(22,22,22, 0.8)' }
+                : {}, children: _jsx(ErrorBoundary, { fallbackRender: () => (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { title: 'Help Center', closeModal: closeFn }), _jsx(ModalBody, { children: _jsx(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: 'error', title: 'Something went wrong.', subtitle: 'Try reloading the page.', actionButtonLabel: 'Reload', onActionButtonClick: () => window.location.reload() }) })] })), children: showSurvey || !persona?.wasShown ? (_jsx(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (_jsx(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/c3-help-center.types.d.ts

@@ -0,0 +1,43 @@
+import type { TabType } from './tabs/tabContent';
+export interface Persona {
+    role?: string;
+    company?: string;
+    interestedInExecutingProcess?: boolean;
+    goal?: string[];
+    orchestrate?: string[];
+    client?: string;
+    clientToSupport?: string;
+    bpmnExperience?: string;
+    camunda7Experience?: string;
+    nextStep?: number;
+    complete?: boolean;
+    wasShown?: boolean;
+    [attribute: string]: unknown;
+}
+export interface WpCardType {
+    image: string;
+    title: string;
+    description: string;
+    timeToComplete?: string;
+    cta?: string;
+    link?: string;
+    card_id: string;
+    mixpanelId: string;
+}
+export interface Prerequestite {
+    id: string;
+    value: string;
+    not: boolean;
+}
+export interface TileConfig {
+    id: string;
+    bool: string;
+    prerequestites: Prerequestite[] | boolean;
+}
+export type Tab = {
+    id: string;
+    label: string;
+    title: string;
+    tiles: TileConfig[];
+    tiletype: TabType;
+};

package/lib/esm/src/components/c3-help-center/c3-help-center.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/src/components/c3-help-center/defaultHelpCenterConfig.d.ts

@@ -0,0 +1,10 @@
+import type { Tab } from './c3-help-center.types';
+export type HelpCenterConfig = {
+    tabs: Tab[];
+    links?: {
+        label: string;
+        link: string;
+        id: string;
+    }[];
+};
+export declare const defaultHelpCenterConfig: HelpCenterConfig;

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

@@ -0,0 +1,17 @@
+/*
+ * 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 defaultHelpCenterConfig = {
+    tabs: [
+        {
+            id: 'recommendations',
+            label: 'Your recommendations',
+            title: '',
+            tiletype: 'grid',
+            tiles: [],
+        },
+    ],
+    links: [],
+};

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+export declare const HelpCenterHint: ({ children }: {
+    children: JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+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.
+ */
+// React import not required with automatic JSX runtime
+import { Button, Toggletip, ToggletipActions, ToggletipContent, } from '@carbon/react';
+import { HelpCenterHintType, useC3HelpCenter } from './c3-help-center-provider.js';
+export const HelpCenterHint = ({ children }) => {
+    const { showHint, setShowHint, hintType } = useC3HelpCenter();
+    return showHint ? (_jsxs(Toggletip, { defaultOpen: true, align: 'bottom-right', children: [children, _jsxs(ToggletipContent, { children: [_jsx("p", { children: hintType === HelpCenterHintType.HelpCenter
+                            ? 'Access the Help Center at any time to see your recommendations, discover guides, tutorials, or to share feedback.'
+                            : 'Access the onboarding survey from the Help Center to get personalized next steps and educational content.' }), _jsx(ToggletipActions, { children: _jsx(Button, { size: 'sm', onClick: () => setShowHint(false), children: "Got it" }) })] })] })) : (children);
+};

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

@@ -0,0 +1,18 @@
+import type { Dict } from 'mixpanel-browser';
+import { type FC } from 'react';
+import type { Persona } from './c3-help-center.types';
+import type { HelpCenterConfig } from './defaultHelpCenterConfig';
+export declare const HelpCenter: FC<{
+    configuration: HelpCenterConfig;
+    persona: Persona;
+    email: string;
+    audience: string;
+    onRequestResumeSurvey: () => void;
+    onRequestRetakeSurvey: () => void;
+    onRequestClose: () => void;
+    theme: string;
+    origin: string;
+    initialTab: string | undefined;
+    flags?: string[];
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;