@camunda/camunda-composite-components 0.20.2 → 0.20.3

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -1,6 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, CodeSnippet, DataTableSkeleton, Link, MultiSelect, OverflowMenu, OverflowMenuItem, Pagination, Table, TableBody, TableCell, TableContainer, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableToolbar, TableToolbarContent, TableToolbarSearch, Select, SelectItem, } from "@carbon/react";
 import React, { useEffect, useRef, useState } from "react";
 import { LinkButton } from "./link-button/link-button";
+import styled from "styled-components";
+const ToolbarWrapper = styled(TableToolbarContent) `
+	@media (max-width: 768px) {
+		flex-wrap: wrap !important;
+		block-size: auto !important;
+	}
+`;
 const overrideHistoryMethods = (onChange) => {
     const originalReplaceState = window.history.replaceState;
     window.history.replaceState = function (...args) {
@@ -29,7 +37,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
         actionsUseOverflowMenuMinItems: options?.actionsUseOverflowMenuMinItems || 3,
     };
     const headerKeys = headers.map((header) => header.key);
-    let component = (React.createElement(DataTableSkeleton, { headers: headers.map((header) => {
+    let component = (_jsx(DataTableSkeleton, { headers: headers.map((header) => {
             return { header: header.label };
         }) }));
     const [currentPage, setCurrentPage] = useState(1);
@@ -282,30 +290,30 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
         if (toolbars && toolbars.length > 0) {
             toolbars.forEach((toolbar, index) => {
                 let toolbarComponent = null;
+                let searchComponent = null;
                 const toolbarComponents = [];
                 if (toolbar && toolbar.length > 0) {
                     for (const toolbarElement of toolbar) {
                         if (toolbarElement.type === "singleSelect") {
                             const element = toolbarElement;
                             const defaultValue = currentFilters.current.get(element.id)?.selectedItem;
-                            toolbarComponents.push(React.createElement("div", { style: { width: "auto" }, key: "toolbar-singleSelect" },
-                                React.createElement(Select, { size: "lg", id: element.id, inline: true, value: defaultValue ?? element.defaultValue, disabled: element.disabled, labelText: element.label, onChange: (event) => {
+                            toolbarComponents.push(_jsx("div", { style: { width: "auto" }, children: _jsx(Select, { size: "lg", id: element.id, inline: true, value: defaultValue ?? element.defaultValue, disabled: element.disabled, labelText: element.label, onChange: (event) => {
                                         currentFilters.current.set(element.id, {
                                             selectedItem: event.target.value,
                                         });
                                         updateFilteredData();
                                         updateFilterURLState(element.queryName ?? element.id, event.target.value);
-                                    } }, element.items?.map((item) => {
-                                    return (React.createElement(SelectItem, { key: item.id, value: item.id, text: item.label }));
-                                }))));
+                                    }, children: element.items?.map((item) => {
+                                        return (_jsx(SelectItem, { value: item.id, text: item.label }, item.id));
+                                    }) }) }, "toolbar-singleSelect"));
                         }
                         if (toolbarElement.type === "multiItemButton") {
                             const multiItemElement = toolbarElement;
-                            toolbarComponents.push(React.createElement(Button, { key: multiItemElement.id, onClick: () => {
+                            toolbarComponents.push(_jsx(Button, { onClick: () => {
                                     multiItemElement.multiOnClick(inputData.filter((row) => selectedItems.includes(row.id)));
                                 }, renderIcon: multiItemElement.icon, disabled: (multiItemElement.disabled &&
                                     multiItemElement.disabled(inputData.filter((row) => selectedItems.includes(row.id)))) ||
-                                    selectedItems.length === 0, kind: multiItemElement.kind }, multiItemElement.label));
+                                    selectedItems.length === 0, kind: multiItemElement.kind, children: multiItemElement.label }, multiItemElement.id));
                         }
                         else if (toolbarElement.type === "multiSelect") {
                             const multiSelectElement = toolbarElement;
@@ -313,7 +321,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                             const selectedItems = multiSelectElement.items?.filter((item) => {
                                 return multiSelectItemsInFilter?.some((id) => item.id === id);
                             });
-                            toolbarComponents.push(React.createElement(MultiSelect, { key: multiSelectElement.id, type: "inline", size: "lg", titleText: multiSelectElement?.label, useTitleInItem: true, hideLabel: true, label: multiSelectElement.label ?? "", id: multiSelectElement.id, items: multiSelectElement.items, selectedItems: selectedItems ?? [], onChange: ({ selectedItems }) => {
+                            toolbarComponents.push(_jsx(MultiSelect, { type: "inline", size: "lg", titleText: multiSelectElement?.label, useTitleInItem: true, hideLabel: true, label: multiSelectElement.label ?? "", id: multiSelectElement.id, items: multiSelectElement.items, selectedItems: selectedItems ?? [], onChange: ({ selectedItems }) => {
                                     const value = selectedItems.map((item) => item.id);
                                     currentFilters.current.set(multiSelectElement.id, {
                                         id: multiSelectElement.id,
@@ -321,13 +329,13 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                                     });
                                     updateFilteredData();
                                     updateFilterURLState(multiSelectElement.queryName ?? multiSelectElement.id, value);
-                                } }));
+                                } }, multiSelectElement.id));
                         }
                         else if (toolbarElement.type === "search") {
                             const searchElement = toolbarElement;
                             const filterId = searchElement.id ?? searchElement.queryName;
                             const defaultValue = currentFilters.current.get(filterId);
-                            toolbarComponents.push(React.createElement(TableToolbarSearch, { key: searchElement.id, onFocus: (event, handleExpand) => {
+                            searchComponent = (_jsx(TableToolbarSearch, { onFocus: (event, handleExpand) => {
                                     handleExpand(event, true);
                                     if (searchElement.queryName) {
                                         updateFilterURLState(searchElement?.queryName, "");
@@ -342,21 +350,28 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                                         searchTerm: event.target?.value ?? defaultValue?.searchTerm,
                                     });
                                     updateFilteredData();
-                                } }));
+                                } }, searchElement.id));
                         }
                         else if (toolbarElement.type === "button") {
                             const buttonElement = toolbarElement;
-                            toolbarComponents.push(React.createElement(Button, { id: buttonElement.id, key: buttonElement.id, onClick: () => {
+                            toolbarComponents.push(_jsx(Button, { id: buttonElement.id, onClick: async () => {
                                     if (buttonElement.onClick) {
-                                        buttonElement.onClick();
+                                        await buttonElement.onClick();
                                     }
-                                }, renderIcon: buttonElement.icon, disabled: buttonElement.disabled, kind: buttonElement.kind }, buttonElement.label));
+                                }, renderIcon: buttonElement.icon, disabled: buttonElement.disabled, kind: buttonElement.kind, children: buttonElement.label }, buttonElement.id));
                         }
                     }
                 }
-                if (toolbarComponents.length > 0) {
-                    toolbarComponent = (React.createElement(TableToolbar, { "aria-label": "data table toolbar", key: `toolbarcomponent-${id}-${index}` },
-                        React.createElement(TableToolbarContent, null, toolbarComponents)));
+                if (toolbarComponents.length > 0 || !!searchComponent) {
+                    toolbarComponent = (_jsx(TableToolbar, { "aria-label": "data table toolbar", children: _jsxs(ToolbarWrapper, { style: {
+                                justifyContent: toolbarComponents.length > 5 ? "normal" : "end",
+                                flexWrap: toolbarComponents.length > 5 ? "wrap" : undefined,
+                                blockSize: toolbarComponents.length > 5 ? "auto" : "3rem",
+                            }, children: [searchComponent && (_jsx("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "end",
+                                        width: toolbarComponents.length > 5 ? "420px" : "100%",
+                                    }, children: searchComponent })), toolbarComponents] }) }, `toolbarcomponent-${id}-${index}`));
                 }
                 toolbarRows.push(toolbarComponent);
             });
@@ -370,25 +385,35 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                 if (actions.filter((action) => action.visible === undefined || action.visible(row)).length < tableOptions.actionsUseOverflowMenuMinItems) {
                     for (const action of actions.filter((action) => action.visible === undefined || action.visible(row))) {
                         if (action.icon) {
-                            actionCell.push(React.createElement(Button, { key: action.id, "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
+                            actionCell.push(_jsx(Button, { "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
                                     ? action.disabled(row)
-                                    : undefined, iconDescription: action.label, hasIconOnly: true, renderIcon: action.icon, onClick: (event) => action.onClick(row, event) }));
+                                    : undefined, iconDescription: typeof action.label === "function"
+                                    ? action.label(row)
+                                    : action.label, hasIconOnly: true, renderIcon: typeof action.icon === "function"
+                                    ? action.icon(row)
+                                    : action.icon, onClick: (event) => action.onClick(row, event) }, action.id));
                         }
                         else {
-                            actionCell.push(React.createElement(Button, { key: action.id, "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
+                            actionCell.push(_jsx(Button, { "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
                                     ? action.disabled(row)
-                                    : undefined, "aria-label": action.label, onClick: (event) => action.onClick(row, event) }, action.label));
+                                    : undefined, "aria-label": typeof action.label === "function"
+                                    ? action.label(row)
+                                    : action.label, onClick: (event) => action.onClick(row, event), children: typeof action.label === "function"
+                                    ? action.label(row)
+                                    : action.label }, action.id));
                         }
                     }
                 }
                 else {
                     const overflowMenuItems = [];
                     for (const action of actions.filter((action) => action.visible === undefined || action.visible(row))) {
-                        overflowMenuItems.push(React.createElement(OverflowMenuItem, { key: action.id, itemText: action.label, isDelete: action.kind === "danger", disabled: action.disabled !== undefined
+                        overflowMenuItems.push(_jsx(OverflowMenuItem, { itemText: typeof action.label === "function"
+                                ? action.label(row)
+                                : action.label, isDelete: action.kind === "danger", disabled: action.disabled !== undefined
                                 ? action.disabled(row)
-                                : undefined, onClick: (event) => action.onClick(row, event), hasDivider: action.hasDivider }));
+                                : undefined, onClick: (event) => action.onClick(row, event), hasDivider: action.hasDivider }, action.id));
                     }
-                    actionCell.push(React.createElement(OverflowMenu, { key: "overflow-menu", style: { float: "right", marginRight: "1rem" }, flipped: true }, overflowMenuItems));
+                    actionCell.push(_jsx(OverflowMenu, { flipped: true, children: overflowMenuItems }, "overflow-menu"));
                 }
             }
             return actionCell;
@@ -396,19 +421,14 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
         // ==== CONTENT ====
         const hasExpansion = getDataForCurrentPage().find((row) => row.expansion) !== undefined;
         const renderHeaders = () => {
-            let regularHeaders = headers.map((header) => (React.createElement(TableHeader, { key: header.key, isSortable: header.sorting !== undefined, sortDirection: currentSortDirection(header.key), isSortHeader: header.sorting !== undefined, onClick: () => updateSortDirection(header.key) }, header.label)));
+            let regularHeaders = headers.map((header) => (_jsx(TableHeader, { isSortable: header.sorting !== undefined, sortDirection: currentSortDirection(header.key), isSortHeader: header.sorting !== undefined, onClick: () => updateSortDirection(header.key), children: header.label }, header.key)));
             if (allToolbarItems?.find((toolbarItem) => toolbarItem.type === "multiItemButton")) {
                 regularHeaders = [
-                    React.createElement(TableSelectAll, { key: "allcluster-select-all", checked: selectedItems.length >= currentPageSize, indeterminate: selectedItems.length > 0 && selectedItems.length < currentPageSize, onSelect: () => toggleSelectAllOnPage(), id: "allcluster-select-all", name: "multi-select-all-header" }),
+                    _jsx(TableSelectAll, { checked: selectedItems.length >= currentPageSize, indeterminate: selectedItems.length > 0 && selectedItems.length < currentPageSize, onSelect: () => toggleSelectAllOnPage(), id: "allcluster-select-all", name: "multi-select-all-header" }, "allcluster-select-all"),
                     ...regularHeaders,
                 ];
             }
-            return (React.createElement(React.Fragment, null,
-                hasExpansion && (React.createElement(TableExpandHeader, null,
-                    React.createElement("span", { style: { height: "0px", width: "0px", fontSize: "0px" } }, "expand"))),
-                regularHeaders,
-                hasActions && (React.createElement(TableHeader, null,
-                    React.createElement("span", { style: { height: "0px", width: "0px", fontSize: "0px" } }, "actions")))));
+            return (_jsxs(_Fragment, { children: [hasExpansion && (_jsx(TableExpandHeader, { children: _jsx("span", { style: { height: "0px", width: "0px", fontSize: "0px" }, children: "expand" }) })), regularHeaders, hasActions && (_jsx(TableHeader, { style: { textAlign: "right" }, children: _jsx("span", { style: { height: "0px", width: "0px", fontSize: "0px" }, children: "actions" }) }))] }));
         };
         const someSelectRow = allToolbarItems?.some((toolBarItem) => toolBarItem.type === "multiItemButton");
         const renderRow = (row) => {
@@ -419,54 +439,54 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                 if (foundHeader?.type) {
                     switch (foundHeader.type.type) {
                         case "code":
-                            content = (React.createElement(CodeSnippet, { type: foundHeader.type.options?.codeOptions?.type ??
-                                    "inline" }, defaultContent));
+                            content = (_jsx(CodeSnippet, { type: foundHeader.type.options?.codeOptions?.type ??
+                                    "inline", children: defaultContent }));
                             break;
                         case "link":
-                            content = (React.createElement(Link, { href: foundHeader.type.options.linkOptions.href(row), target: foundHeader.type.options.linkOptions?.target ?? "_self" }, defaultContent));
+                            content = (_jsx(Link, { href: foundHeader.type.options.linkOptions.href(row), target: foundHeader.type.options.linkOptions?.target ?? "_self", children: defaultContent }));
                             break;
                         case "link-button":
-                            content = (React.createElement(LinkButton, { label: defaultContent, onClick: () => foundHeader.type.options.linkButtonOptions.onClick(row) }));
+                            if (foundHeader.type.options.linkButtonOptions.disabled &&
+                                foundHeader.type.options.linkButtonOptions.disabled(row)) {
+                                content = _jsx("strong", { children: defaultContent });
+                            }
+                            else {
+                                content = (_jsx(LinkButton, { label: defaultContent, onClick: () => foundHeader.type.options.linkButtonOptions.onClick(row) }));
+                            }
                             break;
                         case "wrapper":
                             content = foundHeader.type.options.wrapperOptions.wrapper(row);
                             break;
                     }
                 }
-                return (React.createElement(TableCell, { key: `${row.id}-${key}`, onClick: row.onClick ? () => row.onClick() : undefined, style: { cursor: row.onClick ? "pointer" : undefined } }, content));
+                return (_jsx(TableCell, { onClick: row.onClick ? () => row.onClick() : undefined, style: { cursor: row.onClick ? "pointer" : undefined }, children: content }, `${row.id}-${key}`));
             };
-            let rowComponent = (React.createElement(TableRow, { key: `${row.id}-${row.originalIndex}` },
-                hasExpansion && someSelectRow && (React.createElement(TableCell, { className: "cds--table-expand" })),
-                allToolbarItems?.find((toolBarItem) => toolBarItem.type === "multiItemButton") && (React.createElement(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
-                        toggleSelectedItem(row.id);
-                    } })),
-                hasExpansion && !row.expansion && !someSelectRow && React.createElement(TableCell, null),
-                headerKeys.map((key) => {
-                    return rowCell(key);
-                }),
-                hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } },
-                    React.createElement("div", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                        } }, renderActions(row))))));
+            let rowComponent = (_jsxs(TableRow, { children: [hasExpansion && someSelectRow && (_jsx(TableCell, { className: "cds--table-expand" })), allToolbarItems?.find((toolBarItem) => toolBarItem.type === "multiItemButton") && (_jsx(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
+                            toggleSelectedItem(row.id);
+                        } })), hasExpansion && !row.expansion && !someSelectRow && _jsx(TableCell, {}), headerKeys.map((key) => {
+                        return rowCell(key);
+                    }), hasActions && (_jsx(TableCell, { children: _jsx("div", { style: {
+                                display: "flex",
+                                justifyContent: "flex-end",
+                                alignItems: "center",
+                            }, children: renderActions(row) }) }))] }, `${row.id}-${row.originalIndex}`));
             if (row.expansion) {
-                rowComponent = (React.createElement(React.Fragment, { key: row.id },
-                    React.createElement(TableExpandRow, { key: row.id, isExpanded: isRowExpanded(row), "aria-label": `row ${row.id}`, onExpand: () => {
-                            updateRowExpansion(row);
-                        } },
-                        someSelectRow && (React.createElement(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
-                                toggleSelectedItem(row.id);
-                            } })),
-                        headerKeys.map((key) => rowCell(key)),
-                        hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } }, renderActions(row)))),
-                    React.createElement(TableExpandedRow, { colSpan: headers.length + (hasActions ? 2 : 1) }, row.expansion)));
+                rowComponent = (_jsxs(React.Fragment, { children: [_jsxs(TableExpandRow, { isExpanded: isRowExpanded(row), "aria-label": `row ${row.id}`, onExpand: () => {
+                                updateRowExpansion(row);
+                            }, children: [someSelectRow && (_jsx(TableSelectRow, { "aria-label": `select all ${row.id}`, checked: itemIsSelected(row.id), name: `multiselect-row-${row.id}`, id: `multiselect-row-${row.id}`, onSelect: () => {
+                                        toggleSelectedItem(row.id);
+                                    } })), headerKeys.map((key) => rowCell(key)), hasActions && (_jsx(TableCell, { children: _jsx("div", { style: {
+                                            display: "flex",
+                                            justifyContent: "flex-end",
+                                            alignItems: "center",
+                                        }, children: renderActions(row) }) }))] }, row.id), _jsx(TableExpandedRow, { colSpan: headers.length + (hasActions ? 2 : 1), children: row.expansion })] }, row.id));
             }
             return rowComponent;
         };
         // ==== PAGINATION ====
         let paginationComponent = null;
         if (tableOptions.showPagination) {
-            paginationComponent = (React.createElement(Pagination, { page: currentPage, totalItems: filteredData.length, pageSize: currentPageSize, pageSizes: tableOptions.pageSizes, onChange: (event) => {
+            paginationComponent = (_jsx(Pagination, { page: currentPage, totalItems: filteredData.length, pageSize: currentPageSize, pageSizes: tableOptions.pageSizes, onChange: (event) => {
                     const { page, pageSize } = event;
                     setCurrentPage(page);
                     setCurrentPageSize(pageSize);
@@ -474,13 +494,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                 } }));
         }
         // ==== RENDER ====
-        component = (React.createElement(TableContainer, { title: title, key: `tablecontainer-${id}`, description: description },
-            toolbarRows.map((toolbarComponent) => toolbarComponent),
-            React.createElement(Table, { size: tableOptions.tableSize, useZebraStyles: tableOptions.useZebraStyles, key: `table-${id}` },
-                React.createElement(TableHead, { key: `tablehead-${id}` },
-                    React.createElement(TableRow, { key: `tablerow-${id}` }, renderHeaders())),
-                React.createElement(TableBody, { key: `tablebody-${id}` }, getDataForCurrentPage().map((row) => renderRow(row)))),
-            paginationComponent));
+        component = (_jsxs(TableContainer, { title: title, description: description, children: [toolbarRows.map((toolbarComponent) => toolbarComponent), _jsxs(Table, { size: tableOptions.tableSize, useZebraStyles: tableOptions.useZebraStyles, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: renderHeaders() }, `tablerow-${id}`) }, `tablehead-${id}`), _jsx(TableBody, { children: getDataForCurrentPage().map((row) => renderRow(row)) }, `tablebody-${id}`)] }, `table-${id}`), paginationComponent] }, `tablecontainer-${id}`));
     }
     return component;
 };

package/lib/esm/src/components/c3-data-table/c3-data-table.types.d.ts

@@ -58,8 +58,8 @@ export interface C3DataTableToolbarMultiItemButtonProps<T extends RowBaseProps>
 export interface C3DataTableActionProps<T extends RowBaseProps> {
     id: string;
     kind: any;
-    label: string;
-    icon?: any;
+    label: ((row: T) => string) | string;
+    icon?: ((row: T) => any) | any;
     disabled?: (row: T) => boolean;
     visible?: (row: T) => boolean;
     hasDivider?: boolean;
@@ -77,6 +77,7 @@ export interface C3DataTableHeaderContentType<T extends RowBaseProps> {
         };
         linkButtonOptions?: {
             onClick: (row: T) => void;
+            disabled?: (row: T) => boolean;
         };
         wrapperOptions?: {
             wrapper: (row: T) => React.ReactNode;

package/lib/esm/src/components/c3-data-table/link-button/link-button.js

@@ -1,12 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from "@carbon/react";
-import React from "react";
 export const LinkButton = ({ label, onClick, style, inline, icon, disabled, }) => {
     if (disabled === undefined) {
         disabled = false;
     }
     const customStyle = style ? style : {};
-    const component = (React.createElement(Link, { onClick: () => !disabled && onClick(), inline: inline, style: { cursor: "pointer", ...customStyle }, disabled: disabled },
-        label,
-        icon && (React.createElement("span", { style: { marginLeft: "0.5rem", marginBottom: "-0.2rem" } }, icon))));
+    const component = (_jsxs(Link, { onClick: () => !disabled && onClick(), inline: inline, style: { cursor: "pointer", ...customStyle }, disabled: disabled, children: [label, icon && (_jsx("span", { style: { marginLeft: "0.5rem", marginBottom: "-0.2rem" }, children: icon }))] }));
     return component;
 };

package/lib/esm/src/components/c3-data-table/link-button/link-button.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LinkButtonProps {
     onClick: () => void;
     label: string;

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

@@ -1,30 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Tile, Button, Link, MenuButton, MenuItem } from "@carbon/react";
-import styled from "styled-components";
-import React from "react";
-const ResponsiveStack = styled.div `
-	display: flex;
-	flex-direction: ${({ orientation }) => `${orientation === "vertical" ? "column" : "row"}`};
-	gap: ${({ gap }) => `${typeof gap === "string" ? gap : `${gap ?? 0 * 16}px`}`};
-
-	@media (max-width: 768px) {
-		flex-direction: column;
-	}
-`;
-export const C3EmptyState = ({ icon, heading, description, button, link, }) => (React.createElement(Tile, { style: {
-        paddingLeft: "5rem",
-        paddingTop: "3rem",
-        paddingBottom: "3rem",
-    } },
-    React.createElement(ResponsiveStack, { orientation: "horizontal", gap: "1.5rem" },
-        icon && (React.createElement("div", { style: { maxWidth: "80px" } },
-            React.createElement("img", { src: icon.path, alt: icon.altText, style: { width: "100%" } }))),
-        React.createElement(Stack, { gap: 3 },
-            React.createElement("h2", null, heading),
-            React.createElement(Stack, { gap: 6 },
-                React.createElement("p", { style: { maxWidth: "400px" } }, description),
-                React.createElement(Stack, { gap: 5 },
-                    button && (React.createElement(React.Fragment, null, "items" in button ? (React.createElement(MenuButton, { size: "md", disabled: button.disabled, label: button.label, menuAlignment: "bottom" }, button.items.map((menuItem) => {
-                        return (React.createElement(MenuItem, { key: menuItem.id, onClick: menuItem.onClick, renderIcon: menuItem.icon, disabled: menuItem.disabled, label: menuItem.label }));
-                    }))) : (React.createElement(Button, { id: button.id, size: "md", onClick: button.onClick, renderIcon: button.icon, disabled: button.disabled }, button.label)))),
-                    link && (React.createElement("div", null,
-                        React.createElement(Link, { target: "_blank", href: link.href, onClick: link.onClick }, link.label)))))))));
+import { C3ResponsiveStack } from "../c3-responsive-stack/c3-responsive-stack";
+export const C3EmptyState = ({ icon, heading, description, button, 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: [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 })) })), link && (_jsx("div", { children: _jsx(Link, { target: "_blank", href: link.href, onClick: link.onClick, children: link.label }) }))] })] })] })] }) }) }));

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState, } from "react";
 import { getConfig, getOnboardingConfig, getTiles } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
@@ -141,7 +142,7 @@ export const C3HelpCenterProvider = ({ children }) => {
             }
         }
     }, [isHelpCenterOpen]);
-    return (React.createElement(C3HelpCenterContext.Provider, { value: {
+    return (_jsx(C3HelpCenterContext.Provider, { value: {
             openHelpCenter,
             setIsHelpCenterOpen,
             isHelpCenterOpen,
@@ -163,6 +164,6 @@ export const C3HelpCenterProvider = ({ children }) => {
             isLoadingOnboardingConfig,
             updateAutoStartSurvey,
             getOnboadingSurveyConfig,
-        } }, children));
+        }, children: children }));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionableNotification, ComposedModal, Layer, ModalBody, ModalHeader, } from "@carbon/react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { HelpCenter } from "./help-center";
@@ -169,12 +170,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
             setShowSurvey(false);
         }, 400);
     };
-    return (React.createElement(Layer, null,
-        React.createElement(StyledComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter", style: showSurvey || !persona?.wasShown
+    return (_jsx(Layer, { children: _jsx(StyledComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter", style: showSurvey || !persona?.wasShown
                 ? { backgroundColor: "rgba(22,22,22, 0.8)" }
-                : {} },
-            React.createElement(ErrorBoundary, { fallbackRender: () => (React.createElement(React.Fragment, null,
-                    React.createElement(ModalHeader, { title: "Help Center", closeModal: closeFn }),
-                    React.createElement(ModalBody, null,
-                        React.createElement(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() })))) }, showSurvey || (persona && !persona?.wasShown) ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(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 }))))));
+                : {}, 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 && !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/help-center-hint.d.ts

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

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

@@ -1,17 +1,13 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// React import not required with automatic JSX runtime
 import { Button, Toggletip, ToggletipActions, ToggletipContent, } from "@carbon/react";
 import { HelpCenterHintType, useC3HelpCenter } from "./c3-help-center-provider";
 export const HelpCenterHint = ({ children }) => {
     const { showHint, setShowHint, hintType } = useC3HelpCenter();
-    return showHint ? (React.createElement(Toggletip, { defaultOpen: true, 
+    return showHint ? (_jsxs(Toggletip, { defaultOpen: true, 
         // eslint-disable-next-line
         // @ts-ignore
-        align: "bottom-right" },
-        children,
-        React.createElement(ToggletipContent, null,
-            React.createElement("p", null, 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."),
-            React.createElement(ToggletipActions, null,
-                React.createElement(Button, { size: "sm", onClick: () => setShowHint(false) }, "Got it"))))) : (children);
+        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

@@ -1,5 +1,5 @@
 import { Dict } from "mixpanel-browser";
-import { FC } from "react";
+import type { FC } from "react";
 import { Persona } from "./c3-help-center.types";
 import { HelpCenterConfig } from "./defaultHelpCenterConfig";
 export declare const HelpCenter: FC<{