@camunda/camunda-composite-components 0.20.2 → 0.20.3

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

@@ -1,6 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, ModalFooter, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
 import { TabContent } from "./tabs/tabContent";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
@@ -64,7 +65,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
     };
     const tabTiles = getTabTiles();
     let header = "";
-    let content = React.createElement(React.Fragment, null);
+    let content = _jsx(_Fragment, {});
     useEffect(() => {
         setActiveTab(initialTab ?? firstTab);
     }, [initialTab]);
@@ -80,38 +81,28 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
         Object.keys(tabTiles).length === 0 &&
         isLoadingTiles) {
         header = "Your recommendations";
-        content = React.createElement(TabContentSkeleton, null);
+        content = _jsx(TabContentSkeleton, {});
     }
     else if (activeTab === "recommendations" &&
         Object.keys(tabTiles).length === 0) {
         header = "";
-        content = (React.createElement("div", { style: {
+        content = (_jsx("div", { style: {
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-            } },
-            React.createElement("div", { style: {
+            }, children: _jsx("div", { style: {
                     height: "200px",
                     width: "450px",
-                } },
-                React.createElement(Stack, { orientation: "horizontal", gap: 6 },
-                    React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("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" })),
-                    React.createElement(Stack, { gap: 3 },
-                        React.createElement("h2", null, "Personalize your experience"),
-                        React.createElement(Stack, { gap: 6 },
-                            React.createElement("p", { style: { maxWidth: "400px" } }, "Complete a 1-minute survey to access personalized next steps and educational content designed for you"),
-                            React.createElement(Stack, { gap: 3 },
-                                React.createElement(Button, { id: "additional-feedback-button", size: "md", onClick: () => {
-                                        onRequestRetakeSurvey();
-                                    } }, "Start now"))))))));
+                }, 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 = (React.createElement(TabContent, { onboarding: (() => {
+            content = (_jsx(TabContent, { onboarding: (() => {
                     if (activeTab === "recommendations") {
                         return {
                             complete: persona.complete || false,
@@ -132,87 +123,63 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
         })),
         { id: "feedback", name: "feedback", text: "Share your feedback" },
     ];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledModalHeader, { title: "", label: "", closeModal: onRequestClose, style: {
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-                marginBottom: "0",
-            } },
-            React.createElement(StyledHeading, null, header)),
-        React.createElement(StyledModalBody, { style: {
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-                marginBottom: 0,
-            } },
-            React.createElement("div", { style: {
-                    height: persona.complete && activeTab === "recommendations"
-                        ? "634px"
-                        : "696px",
-                } },
-                React.createElement(SideNavMobileWrapper, null,
-                    React.createElement(C3Tabs, { tabs: tabBar.map((link) => {
-                            return {
-                                id: link.id,
-                                label: link.text,
-                                content: null,
-                            };
-                        }), desiredTabId: activeTab, onTabChange: (tabId) => {
-                            const link = tabBar.find((item) => item.id === tabId);
-                            if (link) {
-                                setActiveTab(link.name);
-                                mixpanelTrack?.("helpcenter:open", {
-                                    to: link.id,
-                                    from: origin,
-                                });
-                            }
-                        } })),
-                React.createElement(SideNavWrapper, null,
-                    React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
-                        React.createElement(SideNavItems, null,
-                            React.createElement(SideNavMenuItem, null,
-                                React.createElement("h5", null, "Help Center")),
-                            React.createElement("li", { style: { marginTop: "4px" } },
-                                React.createElement(Stack, null,
-                                    React.createElement("ul", null, 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 (React.createElement("li", { key: name },
-                                            React.createElement(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 }, text)));
-                                    })))),
-                            React.createElement("li", { style: { position: "absolute", bottom: "20px" } },
-                                React.createElement("ul", null, configuration.links?.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, 
-                                    // eslint-disable-next-line
-                                    // @ts-ignore
-                                    target: "_blank" },
-                                    React.createElement("span", { className: "cds--link" }, link.label))))))))),
-                content,
-                React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
-                    React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
-                            header = head;
-                        }, salesPlanType: organization?.salesPlan?.type ?? "" })))),
-        persona.complete && activeTab === "recommendations" && (React.createElement(StyledModalFooter, { "$hcTheme": theme },
-            React.createElement("div", null,
-                React.createElement(Button, { kind: "tertiary", renderIcon: Undo, onClick: onRequestRetakeSurvey, size: "sm", style: {
-                        maxWidth: "200px",
-                        height: "32px",
-                        alignItems: "center",
-                        paddingTop: "0px",
-                        paddingBottom: "0px",
-                        marginRight: "6px",
-                    } }, "Retake the survey"))))));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledModalHeader, { title: "", label: "", closeModal: onRequestClose, style: {
+                    backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                    marginBottom: "0",
+                }, children: _jsx(StyledHeading, { 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(SideNavMobileWrapper, { children: _jsx(C3Tabs, { tabs: tabBar.map((link) => {
+                                    return {
+                                        id: link.id,
+                                        label: link.text,
+                                        content: null,
+                                    };
+                                }), desiredTabId: activeTab, onTabChange: (tabId) => {
+                                    const link = tabBar.find((item) => item.id === tabId);
+                                    if (link) {
+                                        setActiveTab(link.name);
+                                        mixpanelTrack?.("helpcenter:open", {
+                                            to: link.id,
+                                            from: origin,
+                                        });
+                                    }
+                                } }) }), _jsx(SideNavWrapper, { 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, 
+                                                    // eslint-disable-next-line
+                                                    // @ts-ignore
+                                                    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/tabs/feedback.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StaticNotification, Button, Checkbox, FileUploaderDropContainer, FileUploaderItem, InlineLoading, RadioTile, Stack, TextArea, Tooltip, } from "@carbon/react";
 import React, { useState } from "react";
 import { Idea, Debug, Information, Chat } from "@carbon/react/icons";
@@ -88,100 +89,51 @@ export const Feedback = (props) => {
     const orgIsEnterPriseOrPaidCC = props.salesPlanType === "enterprise" || props.salesPlanType === "paid-cc";
     if (submitted) {
         props.setHeader("");
-        return (React.createElement("div", { style: {
+        return (_jsx("div", { style: {
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-            } },
-            React.createElement("div", { style: {
+            }, children: _jsx("div", { style: {
                     height: "200px",
                     width: "450px",
-                } },
-                React.createElement(Stack, { orientation: "horizontal", gap: 6 },
-                    React.createElement("svg", { width: "62", height: "54", viewBox: "0 0 62 54", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("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" })),
-                    React.createElement(Stack, { gap: 3 },
-                        React.createElement("h2", null, "Feedback submitted successfully"),
-                        React.createElement(Stack, { gap: 6 },
-                            React.createElement("p", { style: { maxWidth: "400px" } }, orgIsEnterPriseOrPaidCC ? (React.createElement(React.Fragment, null, "Your feedback will be forwarded to your Customer Success Manager who will ensure that your inputs are addressed promptly.")) : (React.createElement(React.Fragment, null,
-                                "Thanks for sharing your feedback. ",
-                                React.createElement("br", null),
-                                "We use suggestions like yours to improve our service."))),
-                            React.createElement(Stack, { gap: 3 },
-                                React.createElement(Button, { id: "additional-feedback-button", size: "md", onClick: () => {
-                                        setSuggestion("");
-                                        setFile(undefined);
-                                        setSelectedType(ReportType.Feedback);
-                                        setAllowContact(false);
-                                        setSubmitted(false);
-                                    } }, "Share additional feedback"))))))));
+                }, 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: orgIsEnterPriseOrPaidCC ? (_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 (React.createElement("div", null,
-        React.createElement(Stack, { gap: 6 },
-            React.createElement("p", null, "We actively use this information to fix problems and improve your experience with our products."),
-            !orgIsEnterPriseOrPaidCC && (React.createElement("div", null,
-                React.createElement("h5", { style: { marginBottom: "12px" } }, "What type of feedback would you like to share?"),
-                React.createElement("div", { style: {
-                        display: "flex",
-                        justifyContent: "space-between",
-                        columnGap: "12px",
-                    } },
-                    React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Feedback, onChange: (value) => setSelectedType(value), value: ReportType.Feedback },
-                            React.createElement(Stack, null,
-                                React.createElement(Chat, { size: "40" }),
-                                React.createElement("p", null, "General feedback")))),
-                    React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Idea, onChange: (value) => setSelectedType(value), value: ReportType.Idea },
-                            React.createElement(Stack, null,
-                                React.createElement(Idea, { size: "40" }),
-                                React.createElement("p", null, "Suggest an idea")))),
-                    React.createElement("div", { style: { flexGrow: "1" } },
-                        React.createElement(StyledRadioTile, { checked: selectedType === ReportType.Bug, onChange: (value) => setSelectedType(value), value: ReportType.Bug },
-                            React.createElement(Stack, null,
-                                React.createElement(Debug, { size: "40" }),
-                                React.createElement("p", null, "Report a bug"))))))),
-            React.createElement("div", null,
-                React.createElement(Stack, null,
-                    !orgIsEnterPriseOrPaidCC && (React.createElement("h5", { style: { marginBottom: "-16px" } }, content.title)),
-                    orgIsEnterPriseOrPaidCC && (React.createElement(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" })),
-                    React.createElement(TextArea, { labelText: "", id: "feedback-text", placeholder: content.placeholder, rows: 4, onChange: (event) => {
-                            setSuggestion(event.target.value);
-                        }, value: suggestion }),
-                    !orgIsEnterPriseOrPaidCC && (React.createElement(React.Fragment, null,
-                        React.createElement("h5", null,
-                            "Upload file (optional)",
-                            React.createElement(Tooltip, { label: "Please be sure to redact any confidential information, such as intellectual property, addresses or account numbers before uploading files.", 
-                                // eslint-disable-next-line
-                                // @ts-ignore
-                                align: "bottom" },
-                                React.createElement(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",
-                                    } }))),
-                        React.createElement("p", { className: "cds--label-description", style: { marginTop: "-24px" } }, "Max. file size is 5MB. Supported file types are .jpg and .png."))),
-                    !orgIsEnterPriseOrPaidCC &&
-                        (() => {
-                            if (file !== undefined) {
-                                return (React.createElement(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 (React.createElement(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%" } }));
-                            }
-                        })(),
-                    !orgIsEnterPriseOrPaidCC && (React.createElement("div", null,
-                        React.createElement(Checkbox, { id: "allow-contact", labelText: "Camunda may contact me about my feedback", checked: allowContact, onChange: () => {
-                                setAllowContact(!allowContact);
-                            } }))),
-                    React.createElement("div", null,
-                        React.createElement("div", null, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: "Submitting feedback...", status: "active", style: { marginLeft: "1rem" } })) : (React.createElement(Button, { kind: "primary", disabled: suggestion.trim().length == 0, onClick: submit }, "Submit 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." }), !orgIsEnterPriseOrPaidCC && (_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: [!orgIsEnterPriseOrPaidCC && (_jsx("h5", { style: { marginBottom: "-16px" }, children: content.title })), orgIsEnterPriseOrPaidCC && (_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 }), !orgIsEnterPriseOrPaidCC && (_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.", 
+                                                // eslint-disable-next-line
+                                                // @ts-ignore
+                                                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." })] })), !orgIsEnterPriseOrPaidCC &&
+                                (() => {
+                                    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%" } }));
+                                    }
+                                })(), !orgIsEnterPriseOrPaidCC && (_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.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionableNotification, Stack } from "@carbon/react";
-import React from "react";
 import { HelpCenterTile } from "../tile";
 import styled from "styled-components";
 export const TAB_TYPES = {
@@ -13,8 +13,5 @@ export const TileWrapper = styled.div `
 	gap: var(--cds-spacing-05);
 `;
 export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
-    return (React.createElement("div", null,
-        React.createElement(Stack, null,
-            onboarding && onboarding?.complete !== true && (React.createElement(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: "" })),
-            React.createElement(TileWrapper, null, tiles.map((tile) => (React.createElement(HelpCenterTile, { origin: origin, tabType: type, tile: tile, mixpanelTrack: mixpanelTrack, key: tile.card_id })))))));
+    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.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TileWrapper } from "./tabContent";
 import styled from "styled-components";
 import { SkeletonPlaceholder } from "@carbon/react";
@@ -16,7 +16,6 @@ const TileSkeleton = styled(SkeletonPlaceholder) `
 	width: 100%;
 	height: 100%;
 `;
-export const TabContentSkeleton = () => (React.createElement(TileWrapper, null, Array(6)
-    .fill("_")
-    .map((_, i) => (React.createElement(TileOuter, { key: `tile-skeleton-${i}-${Math.random() * 10000}` },
-    React.createElement(TileSkeleton, null))))));
+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.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Stack, Tag, Tile } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";
-import React from "react";
 import { TAB_TYPES } from "./tabs/tabContent";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
@@ -27,31 +27,22 @@ const TileWrapper = styled.div `
 export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
     const { title, description, timeToComplete, cta, image, link, card_id } = tile;
     if (tabType === TAB_TYPES.Grid) {
-        return (React.createElement(TileWrapper, { "$width": 300 },
-            React.createElement(Tile, { style: {
+        return (_jsx(TileWrapper, { "$width": 300, children: _jsxs(Tile, { style: {
                     justifySelf: "start",
-                }, className: "cds--layer-two" },
-                React.createElement(Stack, { orientation: "vertical", gap: 3 },
-                    React.createElement("img", { src: image, alt: title }),
-                    React.createElement(TileStack, null,
-                        React.createElement(TileHeading, null, title),
-                        React.createElement(TileDescription, null, description),
-                        React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
-                            let content = React.createElement("div", { style: { height: "32px" } });
-                            if (timeToComplete) {
-                                content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
-                            }
-                            return content;
-                        })()))),
-                React.createElement(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%" } }, cta))));
+                }, 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", title: timeToComplete, 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 (React.createElement(TileWrapper, { "$width": 214 },
-        React.createElement(Tile, { style: {
+    return (_jsx(TileWrapper, { "$width": 214, children: _jsx(Tile, { style: {
                 justifySelf: "start",
                 height: "initial",
             }, className: "cds--layer-two", onClick: () => {
@@ -59,10 +50,5 @@ export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
                     to: card_id,
                     from: origin,
                 });
-            } },
-            React.createElement(Stack, { orientation: "vertical", gap: 3 },
-                React.createElement("img", { src: image, alt: title }),
-                React.createElement(Stack, null,
-                    React.createElement("h5", null, title),
-                    React.createElement(ReactMarkdown, { linkTarget: "_blank" }, description))))));
+            }, children: _jsxs(Stack, { orientation: "vertical", gap: 3, children: [_jsx("img", { src: image, alt: title }), _jsxs(Stack, { children: [_jsx("h5", { children: title }), _jsx(ReactMarkdown, { linkTarget: "_blank", children: description })] })] }) }) }));
 };

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

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

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

@@ -1,5 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { HeaderGlobalAction } from "@carbon/react";
 import { Help } from "@carbon/react/icons";
-export const InfoButton = ({ onClick }) => (React.createElement(HeaderGlobalAction, { "aria-label": "Open Help Center", tooltipAlignment: "center", onClick: onClick },
-    React.createElement(Help, { size: 20 })));
+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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { C3ActionButtonsProps } from "./c3-action-buttons.types";
 declare const C3ActionButtons: FC<{
     elements: C3ActionButtonsProps;

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

@@ -1,13 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { HeaderGlobalAction } from "@carbon/react";
-import React from "react";
 const C3ActionButtons = ({ elements, }) => {
-    return (React.createElement(React.Fragment, null, elements.map((actionButton) => {
-        if ("element" in actionButton) {
-            return actionButton.element;
-        }
-        else {
-            return (React.createElement(HeaderGlobalAction, { "aria-label": `Open ${actionButton.label}`, onClick: actionButton.action, isActive: false, key: `${actionButton.label}-key` }, actionButton.icon));
-        }
-    })));
+    return (_jsx(_Fragment, { children: elements.map((actionButton) => {
+            if ("element" in actionButton) {
+                return actionButton.element;
+            }
+            else {
+                return (_jsx(HeaderGlobalAction, { "aria-label": `Open ${actionButton.label}`, onClick: actionButton.action, isActive: false, children: actionButton.icon }, `${actionButton.label}-key`));
+            }
+        }) }));
 };
 export default C3ActionButtons;