@camunda/camunda-composite-components 0.22.4 → 0.22.6

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

@@ -0,0 +1,189 @@
+import { Fragment as _Fragment, 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 { Button, ModalFooter, SideNav, SideNavItems, SideNavMenuItem, Stack, } from '@carbon/react';
+import { Undo } from '@carbon/react/icons/index.esm.js';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { getTiles } from '../../api/help-center.js';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
+import { useC3HelpCenter } from './c3-help-center-provider.js';
+import { StyledModalBody, StyledModalHeader } from './styles.js';
+import { Feedback } from './tabs/feedback.js';
+import { TabContent } from './tabs/tabContent.js';
+import { TabContentSkeleton } from './tabs/tabContentSkeleton.js';
+const StyledModalFooter = styled(ModalFooter) `
+  height: 62px;
+  padding-right: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-top: 1px;
+  border-style: solid;
+  border-color: ${({ $hcTheme }) => $hcTheme === 'light' ? '#E0E0E0' : '#727272'};
+  background-color: ${({ $hcTheme }) => $hcTheme === 'light' ? '#FFFFFF' : '#161616'};
+`;
+export const HelpCenter = ({ configuration, persona, email, audience, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
+    const { tabs } = configuration;
+    const firstTab = tabs[0].id;
+    const { userToken: token, activeOrganizationId, domain, } = useC3UserConfiguration();
+    const { activeOrg: organization, clusters } = useC3Profile();
+    const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
+    const { showTabId } = useC3HelpCenter();
+    const [activeTab, setActiveTab] = useState(firstTab);
+    const [rawTabTiles, setRawTabTiles] = useState({});
+    const [tabTiles, setTabTiles] = useState({});
+    const [isLoadingTiles, setIsLoadingTiles] = useState(false);
+    let header = '';
+    let content = _jsx(_Fragment, {});
+    React.useEffect(() => {
+        ;
+        (async () => {
+            const tiles = {};
+            setIsLoadingTiles(true);
+            for (const singleTab of tabs) {
+                if (token) {
+                    const { result } = await getTiles({
+                        tileConfig: singleTab.tiles,
+                        cloudAudience: audience,
+                        persona,
+                        clusterIds,
+                        salesPlanType: organization?.salesPlan?.type ?? '',
+                        flags,
+                        accessToken: token,
+                    });
+                    if (result)
+                        tiles[singleTab.id] = result;
+                }
+            }
+            setIsLoadingTiles(false);
+            setRawTabTiles(tiles);
+        })();
+    }, [
+        token,
+        JSON.stringify(persona),
+        audience,
+        JSON.stringify(organization),
+        JSON.stringify(clusters),
+        JSON.stringify(tabs),
+    ]);
+    useEffect(() => {
+        if (!tabs || !rawTabTiles)
+            return;
+        const tiles = {};
+        for (const tab of tabs) {
+            if (rawTabTiles[tab.id])
+                tiles[tab.id] =
+                    rawTabTiles[tab.id]?.map((card) => {
+                        if (domain)
+                            card.link = card.link?.replaceAll('{cloudAudience}', domain);
+                        card.link = card.link?.replaceAll('{currentOrgId}', activeOrganizationId);
+                        card.link = card.link?.replaceAll('{clusterId}', clusterIds[0]);
+                        card.link = card.link?.replaceAll('{email}', email);
+                        return card;
+                    }) || [];
+        }
+        setTabTiles(tiles);
+    }, [JSON.stringify(rawTabTiles), email, domain]);
+    useEffect(() => {
+        setActiveTab(initialTab ?? firstTab);
+    }, [initialTab]);
+    useEffect(() => {
+        if (showTabId) {
+            setActiveTab(showTabId);
+        }
+    }, [showTabId]);
+    if (activeTab === 'feedback') {
+        header = 'Share your feedback';
+    }
+    else if (activeTab === 'recommendations' &&
+        Object.keys(tabTiles).length === 0 &&
+        isLoadingTiles) {
+        header = 'Your recommendations';
+        content = _jsx(TabContentSkeleton, {});
+    }
+    else if (activeTab === 'recommendations' &&
+        Object.keys(tabTiles).length === 0) {
+        header = '';
+        content = (_jsx("div", { style: {
+                height: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: _jsx("div", { style: {
+                    height: '200px',
+                    width: '450px',
+                }, children: _jsxs(Stack, { orientation: 'horizontal', gap: 6, children: [_jsx("svg", { width: '64', height: '64', viewBox: '0 0 64 64', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M22.5379 14.9379C22.5379 9.46436 26.9851 5.0171 32.4587 5.0171C37.9322 5.0171 42.3795 9.46436 42.3795 14.9379C42.3795 20.4115 37.9322 24.8587 32.4587 24.8587C26.9851 24.8587 22.5379 20.3944 22.5379 14.9379ZM53.4976 38.7137L51.445 59H13.4723L11.4197 38.7137H20.5024V34.5743L10 26.86V5H16.3288V23.6443L24.5733 29.6994H41.4045L44.415 33.8046V38.7308L53.4976 38.7137ZM36.1704 48.8568C36.1704 46.8042 34.5112 45.1451 32.4587 45.1451C30.4061 45.1451 28.7469 46.8042 28.7469 48.8568C28.7469 50.9094 30.4061 52.5686 32.4587 52.5686C34.5112 52.5686 36.1704 50.9094 36.1704 48.8568Z', fill: '#FC5D0D' }) }), _jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: "Personalize your experience" }), _jsxs(Stack, { gap: 6, children: [_jsx("p", { style: { maxWidth: '400px' }, children: "Complete a 1-minute survey to access personalized next steps and educational content designed for you" }), _jsx(Stack, { gap: 3, children: _jsx(Button, { id: 'additional-feedback-button', size: 'md', onClick: () => {
+                                                    onRequestRetakeSurvey();
+                                                }, children: "Start now" }) })] })] })] }) }) }));
+    }
+    else {
+        const tab = configuration.tabs.find((tab) => tab.id === activeTab);
+        header = tab?.title ?? '';
+        if (tabTiles[activeTab]) {
+            content = (_jsx(TabContent, { onboarding: (() => {
+                    if (activeTab === 'recommendations') {
+                        return {
+                            complete: persona.complete || false,
+                            resumeSurvey: onRequestResumeSurvey,
+                        };
+                    }
+                    else {
+                        return undefined;
+                    }
+                })(), origin: origin, type: tab?.tiletype || 'grid', tiles: tabTiles[activeTab], mixpanelTrack: mixpanelTrack, salesPlanType: organization?.salesPlan?.type ?? '' }));
+        }
+    }
+    const tabBar = [
+        ...configuration.tabs.map(({ id, label }) => ({
+            id,
+            name: id,
+            text: label,
+        })),
+        { id: 'feedback', name: 'feedback', text: 'Share your feedback' },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(StyledModalHeader, { title: '', label: '', closeModal: onRequestClose, style: {
+                    backgroundColor: theme === 'light' ? '#FFFFFF' : '#161616',
+                    marginBottom: '0',
+                }, children: _jsx("h4", { style: { marginLeft: '16rem' }, children: header }) }), _jsx(StyledModalBody, { style: {
+                    backgroundColor: theme === 'light' ? '#FFFFFF' : '#161616',
+                    marginBottom: 0,
+                }, children: _jsxs("div", { style: {
+                        height: persona.complete && activeTab === 'recommendations'
+                            ? '634px'
+                            : '696px',
+                    }, children: [_jsx(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": 'Side nav', children: _jsxs(SideNavItems, { children: [_jsx(SideNavMenuItem, { children: _jsx("h5", { children: "Help Center" }) }), _jsx("li", { style: { marginTop: '4px' }, children: _jsx(Stack, { children: _jsx("ul", { children: tabBar.map(({ name, id, text }) => {
+                                                    const active = activeTab === name;
+                                                    let tabBackgroundColor = theme === 'light' ? '#F4F4F4' : '#161616';
+                                                    let tabButtonColor = theme === 'light' ? '#525252' : '#f4f4f4';
+                                                    if (active) {
+                                                        tabBackgroundColor =
+                                                            theme === 'light' ? '#E5E5E5' : '#8D8D8D3D';
+                                                        tabButtonColor =
+                                                            theme === 'light' ? '#161616' : '#f4f4f4';
+                                                    }
+                                                    return (_jsx("li", { children: _jsx(Button, { className: active ? 'active' : '', kind: 'secondary', onClick: () => {
+                                                                setActiveTab(name);
+                                                                mixpanelTrack?.('helpcenter:open', {
+                                                                    to: id,
+                                                                    from: origin,
+                                                                });
+                                                            }, style: {
+                                                                width: '100%',
+                                                                backgroundColor: tabBackgroundColor,
+                                                                color: tabButtonColor,
+                                                            }, "aria-label": text, children: text }) }, name));
+                                                }) }) }) }), _jsx("li", { style: { position: 'absolute', bottom: '20px' }, children: _jsx("ul", { children: configuration.links?.map((link) => (_jsx(SideNavMenuItem, { href: link.link, target: '_blank', children: _jsx("span", { className: 'cds--link', children: link.label }) }, link.label.split(' ').join('-').toLowerCase()))) }) })] }) }), content, _jsx("div", { style: { display: activeTab === 'feedback' ? 'block' : 'none' }, children: _jsx(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
+                                    header = head;
+                                }, salesPlanType: organization?.salesPlan?.type ?? '' }) })] }) }), persona.complete && activeTab === 'recommendations' && (_jsx(StyledModalFooter, { "$hcTheme": theme, children: _jsx("div", { children: _jsx(Button, { kind: 'tertiary', renderIcon: Undo, onClick: onRequestRetakeSurvey, size: 'sm', style: {
+                            maxWidth: '200px',
+                            height: '32px',
+                            alignItems: 'center',
+                            paddingTop: '0px',
+                            paddingBottom: '0px',
+                            marginRight: '6px',
+                        }, children: "Retake the survey" }) }) }))] }));
+};

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

@@ -0,0 +1,4 @@
+import type { TileConfig } from './c3-help-center.types';
+export declare const recommendations: (persona: {
+    [id: string]: unknown;
+}, flags: string[], tileConfig: TileConfig[], salesPlanType: string, hasClusters: boolean) => string[];

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

@@ -0,0 +1,55 @@
+/*
+ * 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 recommendations = (persona, flags, tileConfig, salesPlanType, hasClusters) => {
+    persona = { ...persona, ...{ flags, salesPlanType, hasClusters } };
+    if (!tileConfig) {
+        return [];
+    }
+    return tileConfig
+        .filter((tile) => {
+        if (!tile.prerequestites || typeof tile.prerequestites === 'boolean') {
+            return true;
+        }
+        if (tile.prerequestites.length === 1) {
+            const pre = tile.prerequestites[0];
+            const personaEntry = persona[pre.id];
+            return evaluateRequirement(personaEntry, pre.value, pre.not);
+        }
+        switch (tile.bool) {
+            case 'OR':
+                return tile.prerequestites.reduce((prev, curr) => {
+                    const personaEntry = persona[curr.id];
+                    return (prev || evaluateRequirement(personaEntry, curr.value, curr.not));
+                }, false);
+            case 'AND':
+                return tile.prerequestites.reduce((prev, curr) => {
+                    const personaEntry = persona[curr.id];
+                    return (prev && evaluateRequirement(personaEntry, curr.value, curr.not));
+                }, true);
+            default:
+                return true;
+        }
+    })
+        .map((tile) => tile.id);
+};
+function evaluateRequirement(personaEntry, reqValue, reqNot) {
+    if (personaEntry instanceof Array) {
+        if (reqNot) {
+            return !personaEntry.includes(`${reqValue}`);
+        }
+        else {
+            return personaEntry.includes(`${reqValue}`);
+        }
+    }
+    else {
+        if (reqNot) {
+            return `${personaEntry}` !== `${reqValue}`;
+        }
+        else {
+            return `${personaEntry}` === `${reqValue}`;
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+export declare const headingStyles: import("styled-components").RuleSet<object>;
+export declare const StyledModalHeader: FC<any>;
+export declare const StyledModalBody: FC<any>;

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

@@ -0,0 +1,48 @@
+/*
+ * 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 { ModalBody, ModalHeader } from '@carbon/react';
+import styled, { css } from 'styled-components';
+import { body01, heading01, heading02, heading03, heading04, heading05, heading06, } from '../styles.js';
+export const headingStyles = css `
+  h1 {
+    ${heading06}
+  }
+
+  h2 {
+    ${heading05}
+  }
+
+  h3 {
+    ${heading04}
+  }
+
+  h4 {
+    ${heading03}
+  }
+
+  h5 {
+    ${heading02}
+  }
+
+  h6 {
+    ${heading01}
+  }
+`;
+export const StyledModalHeader = styled(ModalHeader) `
+  ${headingStyles}
+`;
+export const StyledModalBody = styled(ModalBody) `
+  padding-left: 17rem;
+  @media (max-width: 768px) {
+    padding-left: 1rem;
+  }
+
+  ${headingStyles}
+
+  p {
+    ${body01}
+  }
+`;

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

@@ -0,0 +1,9 @@
+import type { Dict } from 'mixpanel-browser';
+import { type FC } from 'react';
+export declare const Feedback: FC<{
+    audience: string;
+    theme: string;
+    setHeader: (header: string) => void;
+    salesPlanType: string;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;

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

@@ -0,0 +1,141 @@
+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, Checkbox, FileUploaderDropContainer, FileUploaderItem, InlineLoading, RadioTile, Stack, StaticNotification, TextArea, Tooltip, } from '@carbon/react';
+import { Chat, Debug, Idea, Information } from '@carbon/react/icons/index.esm.js';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { submitFeedback } from '../../../api/help-center.js';
+import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
+var ReportType;
+(function (ReportType) {
+    ReportType["Feedback"] = "feedback";
+    ReportType["Idea"] = "idea";
+    ReportType["Bug"] = "bug";
+})(ReportType || (ReportType = {}));
+var Title;
+(function (Title) {
+    Title["Feedback"] = "Describe your thoughts";
+    Title["Idea"] = "Describe your suggestion";
+    Title["Bug"] = "Describe the issue";
+})(Title || (Title = {}));
+var Placeholder;
+(function (Placeholder) {
+    Placeholder["Feedback"] = "Tell us about your experience";
+    Placeholder["Idea"] = "Tell us how we can improve our product";
+    Placeholder["Bug"] = "Tell us what went wrong";
+})(Placeholder || (Placeholder = {}));
+const StyledRadioTile = styled(RadioTile) `
+  min-width: 200px;
+`;
+export const Feedback = (props) => {
+    props.setHeader('Share your feedback');
+    const { userToken } = useC3UserConfiguration();
+    const [selectedType, setSelectedType] = useState(ReportType.Feedback);
+    const [content, setContent] = useState({
+        title: Title.Feedback,
+        placeholder: Placeholder.Feedback,
+    });
+    const [suggestion, setSuggestion] = useState('');
+    const [allowContact, setAllowContact] = useState(true);
+    const [file, setFile] = useState(undefined);
+    const [submitted, setSubmitted] = useState(false);
+    const [isDoingAsyncWork, setisDoingAsyncWork] = useState(false);
+    React.useEffect(() => {
+        switch (selectedType) {
+            case ReportType.Feedback:
+                setContent({
+                    title: Title.Feedback,
+                    placeholder: Placeholder.Feedback,
+                });
+                break;
+            case ReportType.Bug:
+                setContent({ title: Title.Bug, placeholder: Placeholder.Bug });
+                break;
+            default:
+                setContent({ title: Title.Idea, placeholder: Placeholder.Idea });
+        }
+    }, [selectedType]);
+    function submit() {
+        if (!userToken)
+            return;
+        setisDoingAsyncWork(true);
+        props.mixpanelTrack?.('helpcenter:click', {
+            to: 'feedback_send',
+            type: selectedType,
+            from: origin,
+        });
+        const formData = new FormData();
+        formData.append('reportType', selectedType);
+        formData.append('suggestion', suggestion);
+        formData.append('allowContact', '' + allowContact);
+        if (props.salesPlanType) {
+            formData.append('salesPlanType', props.salesPlanType);
+        }
+        if (file) {
+            formData.append('file', file);
+        }
+        submitFeedback({
+            token: userToken,
+            audience: props.audience,
+            formData,
+        })
+            .then(() => {
+            setisDoingAsyncWork(false);
+            setSubmitted(true);
+        })
+            .catch(() => {
+            setisDoingAsyncWork(false);
+        });
+    }
+    const orgIsEnterprise = props.salesPlanType === 'enterprise';
+    if (submitted) {
+        props.setHeader('');
+        return (_jsx("div", { style: {
+                height: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: _jsx("div", { style: {
+                    height: '200px',
+                    width: '450px',
+                }, children: _jsxs(Stack, { orientation: 'horizontal', gap: 6, children: [_jsx("svg", { width: '62', height: '54', viewBox: '0 0 62 54', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M60.7573 6.91209L56.137 2.22698C55.3173 1.39576 54.2441 0.972656 53.1711 0.972656C52.0981 0.972656 51.0248 1.39576 50.2051 2.22698L20.635 32.2572L11.7819 23.2496C10.9622 22.4184 9.88904 21.9953 8.81588 21.9953C7.74272 21.9953 6.66971 22.4032 5.85001 23.2496L1.22972 27.9347C-0.409906 29.5972 -0.409906 32.3025 1.22972 33.9649L20.65 53.6726L60.7723 12.9425C62.4117 11.2798 62.4117 8.57471 60.7573 6.91209Z', fill: '#FC5D0D' }) }), _jsxs(Stack, { gap: 3, children: [_jsx("h2", { children: "Feedback submitted successfully" }), _jsxs(Stack, { gap: 6, children: [_jsx("p", { style: { maxWidth: '400px' }, children: orgIsEnterprise ? (_jsx(_Fragment, { children: "Your feedback will be forwarded to your Customer Success Manager who will ensure that your inputs are addressed promptly." })) : (_jsxs(_Fragment, { children: ["Thanks for sharing your feedback. ", _jsx("br", {}), "We use suggestions like yours to improve our service."] })) }), _jsx(Stack, { gap: 3, children: _jsx(Button, { id: 'additional-feedback-button', size: 'md', onClick: () => {
+                                                    setSuggestion('');
+                                                    setFile(undefined);
+                                                    setSelectedType(ReportType.Feedback);
+                                                    setAllowContact(false);
+                                                    setSubmitted(false);
+                                                }, children: "Share additional feedback" }) })] })] })] }) }) }));
+    }
+    return (_jsx("div", { children: _jsxs(Stack, { gap: 6, children: [_jsx("p", { children: "We actively use this information to fix problems and improve your experience with our products." }), !orgIsEnterprise && (_jsxs("div", { children: [_jsx("h5", { style: { marginBottom: '12px' }, children: "What type of feedback would you like to share?" }), _jsxs("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                columnGap: '12px',
+                            }, children: [_jsx("div", { style: { flexGrow: '1' }, children: _jsx(StyledRadioTile, { checked: selectedType === ReportType.Feedback, onChange: (value) => setSelectedType(value), value: ReportType.Feedback, children: _jsxs(Stack, { children: [_jsx(Chat, { size: '40' }), _jsx("p", { children: "General feedback" })] }) }) }), _jsx("div", { style: { flexGrow: '1' }, children: _jsx(StyledRadioTile, { checked: selectedType === ReportType.Idea, onChange: (value) => setSelectedType(value), value: ReportType.Idea, children: _jsxs(Stack, { children: [_jsx(Idea, { size: '40' }), _jsx("p", { children: "Suggest an idea" })] }) }) }), _jsx("div", { style: { flexGrow: '1' }, children: _jsx(StyledRadioTile, { checked: selectedType === ReportType.Bug, onChange: (value) => setSelectedType(value), value: ReportType.Bug, children: _jsxs(Stack, { children: [_jsx(Debug, { size: '40' }), _jsx("p", { children: "Report a bug" })] }) }) })] })] })), _jsx("div", { children: _jsxs(Stack, { children: [!orgIsEnterprise && (_jsx("h5", { style: { marginBottom: '-16px' }, children: content.title })), orgIsEnterprise && (_jsx(StaticNotification, { lowContrast: true, kind: 'info', title: 'If you are looking to get technical support, please use our Jira support system.', style: { maxWidth: '100%' }, actionButtonLabel: 'Open a ticket', onActionButtonClick: () => window.open('https://jira.camunda.com/projects/SUPPORT/queues', '_blank'), "aria-describedby": 'help-center-feedback-notification', titleId: 'help-center-feedback-notification' })), _jsx(TextArea, { labelText: '', id: 'feedback-text', placeholder: content.placeholder, rows: 4, onChange: (event) => {
+                                    setSuggestion(event.target.value);
+                                }, value: suggestion }), !orgIsEnterprise && (_jsxs(_Fragment, { children: [_jsxs("h5", { children: ["Upload file (optional)", _jsx(Tooltip, { label: 'Please be sure to redact any confidential information, such as intellectual property, addresses or account numbers before uploading files.', align: 'bottom', children: _jsx(Button, { kind: 'ghost', "aria-label": 'Information', renderIcon: Information, iconDescription: 'Information', style: {
+                                                        marginTop: '-10px',
+                                                        backgroundColor: props.theme === 'light' ? '#FFFFFF' : '#161616',
+                                                        color: props.theme === 'light' ? '#161616' : '#F4F4F4',
+                                                        paddingLeft: '0px',
+                                                    } }) })] }), _jsx("p", { className: 'cds--label-description', style: { marginTop: '-24px' }, children: "Max. file size is 5MB. Supported file types are .jpg and .png." })] })), !orgIsEnterprise &&
+                                (() => {
+                                    if (file !== undefined) {
+                                        return (_jsx(FileUploaderItem, { name: file.name, iconDescription: 'Delete file', invalid: (() => {
+                                                return file.size > 5000000;
+                                            })(), status: 'edit', errorSubject: 'File exceeds size limit.', size: 'lg', style: { marginTop: '-32px', maxWidth: '100%' }, onDelete: () => {
+                                                setFile(undefined);
+                                            } }));
+                                    }
+                                    else {
+                                        return (_jsx(FileUploaderDropContainer, { labelText: 'Drag and drop file here or click to upload', multiple: false, accept: ['image/jpeg', 'image/jpg', 'image/png'], onAddFiles: (_evt, { addedFiles }) => {
+                                                setFile(addedFiles[0]);
+                                            }, style: { marginTop: '-32px', maxWidth: '100%' } }));
+                                    }
+                                })(), !orgIsEnterprise && (_jsx("div", { children: _jsx(Checkbox, { id: 'allow-contact', labelText: 'Camunda may contact me about my feedback', checked: allowContact, onChange: () => {
+                                        setAllowContact(!allowContact);
+                                    } }) })), _jsx("div", { children: _jsx("div", { children: isDoingAsyncWork ? (_jsx(InlineLoading, { description: 'Submitting feedback...', status: 'active', style: { marginLeft: '1rem' } })) : (_jsx(Button, { kind: 'primary', disabled: suggestion.trim().length === 0, onClick: submit, children: "Submit feedback" })) }) })] }) })] }) }));
+};

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

@@ -0,0 +1,20 @@
+import type { Dict } from 'mixpanel-browser';
+import type { FC } from 'react';
+import type { WpCardType } from '../c3-help-center.types';
+export declare const TAB_TYPES: {
+    readonly Grid: "grid";
+    readonly Column: "column";
+};
+export type TabType = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];
+export declare const TileWrapper: any;
+export declare const TabContent: FC<{
+    onboarding: {
+        complete: boolean;
+        resumeSurvey: () => void;
+    } | undefined;
+    tiles: WpCardType[];
+    type: TabType;
+    salesPlanType: string;
+    origin: string;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;

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

@@ -0,0 +1,22 @@
+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 { ActionableNotification, Stack } from '@carbon/react';
+import styled from 'styled-components';
+import { HelpCenterTile } from '../tile.js';
+export const TAB_TYPES = {
+    Grid: 'grid',
+    Column: 'column',
+};
+export const TileWrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--cds-spacing-05);
+`;
+export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
+    return (_jsx("div", { children: _jsxs(Stack, { children: [onboarding && onboarding?.complete !== true && (_jsx(ActionableNotification, { kind: 'info', inline: true, lowContrast: true, hideCloseButton: true, style: { maxWidth: '100%', marginBottom: '1rem' }, actionButtonLabel: 'Resume survey', onActionButtonClick: onboarding.resumeSurvey, title: 'Complete the new user survey to see more recommendations', subtitle: '' })), _jsx(TileWrapper, { children: tiles.map((tile) => (_jsx(HelpCenterTile, { origin: origin, tabType: type, tile: tile, mixpanelTrack: mixpanelTrack }, tile.card_id))) })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const TabContentSkeleton: FC;

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

@@ -0,0 +1,26 @@
+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 { SkeletonPlaceholder } from '@carbon/react';
+import styled from 'styled-components';
+import { TileWrapper } from './tabContent.js';
+const TileOuter = styled.div `
+  background: var(--cds-layer-02, #f4f4f4);
+  display: flex;
+  width: 300px;
+  height: 300px;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+`;
+const TileSkeleton = styled(SkeletonPlaceholder) `
+  width: 100%;
+  height: 100%;
+`;
+export const TabContentSkeleton = () => (_jsx(TileWrapper, { children: Array(6)
+        .fill('_')
+        .map((_, i) => (_jsx(TileOuter, { children: _jsx(TileSkeleton, {}) }, `tile-skeleton-${i}-${Math.random() * 10000}`))) }));

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

@@ -0,0 +1,10 @@
+import type { Dict } from 'mixpanel-browser';
+import type { FC } from 'react';
+import type { WpCardType } from './c3-help-center.types';
+import { type TabType } from './tabs/tabContent';
+export declare const HelpCenterTile: FC<{
+    tile: WpCardType;
+    tabType: TabType;
+    origin: string;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;

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

@@ -0,0 +1,61 @@
+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 { Button, Stack, Tag, Tile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons/index.esm.js';
+import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
+import { TAB_TYPES } from './tabs/tabContent.js';
+const TileHeading = styled.h6 `
+  font-size: var(--cds-heading-compact-01-font-size);
+  font-weight: var(--cds-heading-compact-01-font-weight);
+  line-height: var(--cds-heading-compact-01-line-height);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing);
+`;
+const TileDescription = styled.p `
+  height: 50px;
+  color: var(--cds-text-secondary);
+`;
+const TileStack = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const TileWrapper = styled.div `
+  width: ${({ $width }) => `${$width}px`};
+  @media (max-width: 768px) {
+    width: auto;
+  }
+`;
+export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
+    const { title, description, timeToComplete, cta, image, link, card_id } = tile;
+    if (tabType === TAB_TYPES.Grid) {
+        return (_jsx(TileWrapper, { "$width": 300, children: _jsxs(Tile, { style: {
+                    justifySelf: 'start',
+                }, className: 'cds--layer-two', children: [_jsxs(Stack, { orientation: 'vertical', gap: 3, children: [_jsx("img", { src: image, alt: title }), _jsxs(TileStack, { children: [_jsx(TileHeading, { children: title }), _jsx(TileDescription, { children: description }), _jsx("div", { style: { marginLeft: '-4px', marginTop: '12px' }, children: (() => {
+                                            let content = _jsx("div", { style: { height: '32px' } });
+                                            if (timeToComplete) {
+                                                content = (_jsx(Tag, { type: 'warm-gray', size: 'sm', children: timeToComplete }));
+                                            }
+                                            return content;
+                                        })() })] })] }), _jsx(Button, { size: 'sm', as: 'a', href: link, target: '_blank', onClick: () => {
+                            mixpanelTrack?.(`helpcenter:click`, {
+                                from: origin,
+                                to: card_id,
+                            });
+                        }, renderIcon: ArrowRight, kind: 'tertiary', className: 'cds--switcher__item', style: { alignSelf: 'end', marginTop: '10px', maxWidth: '100%' }, children: cta })] }) }));
+    }
+    return (_jsx(TileWrapper, { "$width": 214, children: _jsx(Tile, { style: {
+                justifySelf: 'start',
+                height: 'initial',
+            }, className: 'cds--layer-two', onClick: () => {
+                mixpanelTrack?.(`helpcenter:click`, {
+                    to: card_id,
+                    from: origin,
+                });
+            }, children: _jsxs(Stack, { orientation: 'vertical', gap: 3, children: [_jsx("img", { src: image, alt: title }), _jsxs(Stack, { children: [_jsx("h5", { children: title }), _jsx(ReactMarkdown, { components: {
+                                    a: ({ children, href }) => (_jsx("a", { href: href, target: '_blank', rel: 'noopener noreferrer', children: children })),
+                                }, children: description })] })] }) }) }));
+};

package/lib/esm/src/components/c3-navigation/c3-info-button.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+export declare const InfoButton: FC<{
+    onClick: () => void;
+}>;

package/lib/esm/src/components/c3-navigation/c3-info-button.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 { HeaderGlobalAction } from '@carbon/react';
+import { Help } from '@carbon/react/icons/index.esm.js';
+export const InfoButton = ({ onClick }) => (_jsx(HeaderGlobalAction, { "aria-label": 'Open Help Center', tooltipAlignment: 'center', onClick: onClick, children: _jsx(Help, { size: 20 }) }));

package/lib/esm/src/components/c3-navigation/c3-navigation-actions/c3-action-buttons.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { C3ActionButtonsProps } from './c3-action-buttons.types';
+declare const C3ActionButtons: FC<{
+    elements: C3ActionButtonsProps;
+}>;
+export default C3ActionButtons;