@camunda/camunda-composite-components 0.20.2 → 0.20.3

package/lib/esm/src/components/c3-navigation/stories/story-templates.js

@@ -1,39 +1,33 @@
-import React, { useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { C3Navigation } from "../c3-navigation";
 import { createAppBarProps, createAppProps, createNavBarBarProps, createUserSideBarProps, } from "./story-helpers";
 import { SwitcherDivider, Toggle } from "@carbon/react";
-export const DefaultTemplate = (args) => (React.createElement(React.Fragment, null,
-    React.createElement(C3Navigation, { ...args }),
-    React.createElement("div", { id: "main-content" })));
+export const DefaultTemplate = (args) => (_jsxs(_Fragment, { children: [_jsx(C3Navigation, { ...args }), _jsx("div", { id: "main-content" })] }));
 export const SuperUserToggle = ({ isActive, onChange }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SwitcherDivider, null),
-        React.createElement("div", { style: { padding: ".5rem 1rem" } },
-            React.createElement(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode", "aria-label": "Enter super-admin mode" }))));
+    return (_jsxs(_Fragment, { children: [_jsx(SwitcherDivider, {}), _jsx("div", { style: { padding: ".5rem 1rem" }, children: _jsx(Toggle, { size: "sm", id: "toggle-super-admin-mode", defaultToggled: isActive, onToggle: (superAdminModeActive) => onChange?.(superAdminModeActive), labelText: "Enter super-admin mode", "aria-label": "Enter super-admin mode" }) })] }));
 };
 export const NavbarWithCustomSection = () => {
     const [isSuperAdminModeActive, setIsSuperAdminModeActive] = useState(true);
     const [appbarOpen, setAppBarOpen] = useState(false);
     const appbarProps = createAppBarProps();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(C3Navigation, { app: createAppProps(), appBar: { ...appbarProps, isOpen: appbarProps.isOpen ?? appbarOpen }, toggleAppbar: (value) => {
-                setAppBarOpen(value);
-            }, navbar: {
-                ...createNavBarBarProps(),
-                tags: isSuperAdminModeActive
-                    ? [
-                        {
-                            key: "superUserMode",
-                            label: "Super-user mode",
-                            color: "high-contrast",
-                        },
-                    ]
-                    : undefined,
-            }, userSideBar: {
-                ...createUserSideBarProps({ isOpen: false }),
-                customElements: {
-                    customSection: (React.createElement(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
-                },
-            } }),
-        React.createElement("div", { id: "main-content" })));
+    return (_jsxs(_Fragment, { children: [_jsx(C3Navigation, { app: createAppProps(), appBar: { ...appbarProps, isOpen: appbarProps.isOpen ?? appbarOpen }, toggleAppbar: (value) => {
+                    setAppBarOpen(value);
+                }, navbar: {
+                    ...createNavBarBarProps(),
+                    tags: isSuperAdminModeActive
+                        ? [
+                            {
+                                key: "superUserMode",
+                                label: "Super-user mode",
+                                color: "high-contrast",
+                            },
+                        ]
+                        : undefined,
+                }, userSideBar: {
+                    ...createUserSideBarProps({ isOpen: false }),
+                    customElements: {
+                        customSection: (_jsx(SuperUserToggle, { isActive: isSuperAdminModeActive, onChange: setIsSuperAdminModeActive })),
+                    },
+                } }), _jsx("div", { id: "main-content" })] }));
 };

package/lib/esm/src/components/c3-onboarding-survey/c3-onboarding-survey.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
 import { submitSurvey, updatePersona } from "../../api/help-center";
@@ -56,5 +57,5 @@ export const C3OnboardingSurvey = (props) => {
         setPersona(newPersona);
         props.personaCallback(newPersona);
     };
-    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboadingConfig, isLoadingConfig: isLoadingOnboardingConfig, modal: props.modal, origin: props.origin }));
+    return (_jsx(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboadingConfig, isLoadingConfig: isLoadingOnboardingConfig, modal: props.modal, origin: props.origin }));
 };

package/lib/esm/src/components/c3-onboarding-survey/elements/dropdownSelect.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select, SelectItem, Stack, TextInput } from "@carbon/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { getTitleId } from "../helpers";
 export const DropdownSelect = ({ title, label, elements, selectedElement, setSelectedElement, exceptionTitle, exceptionLabel, exceptionValue, }) => {
     let showSuggestion = false;
@@ -26,41 +27,27 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
     };
     const titleId = getTitleId(title);
     const exceptionTitleId = getTitleId(exceptionTitle);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Stack, null, (() => {
-            return (React.createElement(React.Fragment, null,
-                React.createElement("div", { style: {
-                        display: "grid",
-                        gridTemplateColumns: "58% 42%",
-                    } },
-                    React.createElement(Stack, { gap: 1 },
-                        React.createElement("h4", { id: titleId }, title),
-                        (() => {
-                            if (label) {
-                                return React.createElement("p", { className: "cds--modal-header__label" }, label);
-                            }
-                            return React.createElement(React.Fragment, null);
-                        })(),
-                        " "),
-                    React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
-                            const element = elements.find((e) => e.value === event.target.value);
-                            if (element)
-                                setElement(element.value, "");
-                        }, value: elementWithoutSuggestion() }, elements.map((e) => (React.createElement(SelectItem, { key: `selectItem-${Math.random() * 10000}`, id: `selectItem-${Math.random() * 10000}`, value: e.value, text: e.label })))),
-                    (() => {
-                        if (exceptionValue &&
-                            elementWithoutSuggestion() === exceptionValue) {
-                            return (React.createElement(React.Fragment, null,
-                                React.createElement("div", { style: { marginTop: "24px" } }),
-                                React.createElement("div", { style: { marginTop: "24px" } }),
-                                React.createElement(Stack, { gap: 1 },
-                                    React.createElement("h4", { id: exceptionTitleId }, exceptionTitle),
-                                    React.createElement("p", { className: "cds--modal-header__label" }, exceptionLabel)),
-                                React.createElement(TextInput, { style: { height: "48px" }, id: `text-input-element-${Math.random() * 1000}`, placeholder: "Enter your suggestion", labelText: "", value: suggestion, onChange: (event) => {
-                                        calculateSuggestion(event.target.value);
-                                    }, "aria-labelledby": exceptionTitleId, "aria-label": exceptionTitle, invalid: false, invalidText: React.createElement(React.Fragment, null) })));
-                        }
-                        return React.createElement(React.Fragment, null);
-                    })())));
-        })())));
+    return (_jsx(_Fragment, { children: _jsx(Stack, { children: (() => {
+                return (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "58% 42%",
+                        }, children: [_jsxs(Stack, { gap: 1, children: [_jsx("h4", { id: titleId, children: title }), (() => {
+                                        if (label) {
+                                            return _jsx("p", { className: "cds--modal-header__label", children: label });
+                                        }
+                                        return _jsx(_Fragment, {});
+                                    })(), " "] }), _jsx(Select, { id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
+                                    const element = elements.find((e) => e.value === event.target.value);
+                                    if (element)
+                                        setElement(element.value, "");
+                                }, value: elementWithoutSuggestion(), children: elements.map((e) => (_jsx(SelectItem, { id: `selectItem-${Math.random() * 10000}`, value: e.value, text: e.label }, `selectItem-${Math.random() * 10000}`))) }, `select-${Math.random() * 10000}`), (() => {
+                                if (exceptionValue &&
+                                    elementWithoutSuggestion() === exceptionValue) {
+                                    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { marginTop: "24px" } }), _jsx("div", { style: { marginTop: "24px" } }), _jsxs(Stack, { gap: 1, children: [_jsx("h4", { id: exceptionTitleId, children: exceptionTitle }), _jsx("p", { className: "cds--modal-header__label", children: exceptionLabel })] }), _jsx(TextInput, { style: { height: "48px" }, id: `text-input-element-${Math.random() * 1000}`, placeholder: "Enter your suggestion", labelText: "", value: suggestion, onChange: (event) => {
+                                                    calculateSuggestion(event.target.value);
+                                                }, "aria-labelledby": exceptionTitleId, "aria-label": exceptionTitle, invalid: false, invalidText: _jsx(_Fragment, {}) })] }));
+                                }
+                                return _jsx(_Fragment, {});
+                            })()] }) }));
+            })() }) }));
 };

package/lib/esm/src/components/c3-onboarding-survey/elements/radioGroupMulti.js

@@ -1,62 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Column, FlexGrid, Row, SelectableTile, Stack, Tooltip, } from "@carbon/react";
-import React from "react";
 import { Information } from "@carbon/react/icons";
 export const RadioGroupElementMulti = ({ theme, title, label, elements, columns, tooltip, selectedElements, setSelectedElements, }) => {
     const backgroundColor = theme === "dark" ? "#393939" : "#E5E5E5";
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Stack, { gap: 1 },
-            React.createElement("h4", null,
-                title,
-                (() => {
-                    if (tooltip) {
-                        return (
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                        // @ts-ignore
-                        React.createElement(Tooltip, { label: tooltip, align: "bottom" },
-                            React.createElement("span", { className: "onboarding" },
-                                React.createElement(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", "aria-label": "Information", style: {
-                                        marginTop: "-10px",
-                                        backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-                                    } }))));
-                    }
-                    else {
-                        return React.createElement(React.Fragment, null);
-                    }
-                })()),
-            (() => {
-                if (label) {
-                    return React.createElement("p", { className: "cds--modal-header__label" }, label);
-                }
-                return React.createElement(React.Fragment, null);
-            })(),
-            " "),
-        React.createElement(Stack, { gap: 3 }, elements
-            .reduce((result, item, index) => {
-            const chunkIndex = Math.floor(index / columns);
-            if (!result[chunkIndex]) {
-                result[chunkIndex] = [];
-            }
-            result[chunkIndex].push(item);
-            return result;
-        }, [])
-            .map((row, index) => (React.createElement(FlexGrid, { key: `onboarding-radio-row-${index}`, style: {
-                width: "100%",
-                maxWidth: "100%",
-                paddingLeft: "0",
-                paddingRight: "0",
-            } },
-            React.createElement(Row, null, row.map((element) => (React.createElement(Column, { key: `tile-${element.value}`, style: { maxWidth: `${100 / columns}%` } },
-                React.createElement(SelectableTile, { style: {
-                        backgroundColor,
-                        marginBottom: "24px",
-                    }, selected: (() => {
-                        return selectedElements?.includes(element.value);
-                    })(), onClick: () => {
-                        if (selectedElements?.includes(element.value)) {
-                            setSelectedElements(selectedElements?.filter((e) => e !== element.value));
+    return (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: 1, children: [_jsxs("h4", { children: [title, (() => {
+                                if (tooltip) {
+                                    return (
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    _jsx(Tooltip, { label: tooltip, align: "bottom", children: _jsx("span", { className: "onboarding", children: _jsx(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", "aria-label": "Information", style: {
+                                                    marginTop: "-10px",
+                                                    backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                                                } }) }) }));
+                                }
+                                else {
+                                    return _jsx(_Fragment, {});
+                                }
+                            })()] }), (() => {
+                        if (label) {
+                            return _jsx("p", { className: "cds--modal-header__label", children: label });
                         }
-                        else {
-                            setSelectedElements(selectedElements?.concat([element.value]) || []);
-                        }
-                    }, value: element.value }, element.label)))))))))));
+                        return _jsx(_Fragment, {});
+                    })(), " "] }), _jsx(Stack, { gap: 3, children: elements
+                    .reduce((result, item, index) => {
+                    const chunkIndex = Math.floor(index / columns);
+                    if (!result[chunkIndex]) {
+                        result[chunkIndex] = [];
+                    }
+                    result[chunkIndex].push(item);
+                    return result;
+                }, [])
+                    .map((row, index) => (_jsx(FlexGrid, { style: {
+                        width: "100%",
+                        maxWidth: "100%",
+                        paddingLeft: "0",
+                        paddingRight: "0",
+                    }, children: _jsx(Row, { children: row.map((element) => (_jsx(Column, { style: { maxWidth: `${100 / columns}%` }, children: _jsx(SelectableTile, { style: {
+                                    backgroundColor,
+                                    marginBottom: "24px",
+                                }, selected: (() => {
+                                    return selectedElements?.includes(element.value);
+                                })(), onClick: () => {
+                                    if (selectedElements?.includes(element.value)) {
+                                        setSelectedElements(selectedElements?.filter((e) => e !== element.value));
+                                    }
+                                    else {
+                                        setSelectedElements(selectedElements?.concat([element.value]) || []);
+                                    }
+                                }, value: element.value, children: element.label }) }, `tile-${element.value}`))) }) }, `onboarding-radio-row-${index}`))) })] }));
 };

package/lib/esm/src/components/c3-onboarding-survey/elements/radioGroupSingle.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Column, FlexGrid, RadioTile, Row, Stack, Tooltip, Button, } from "@carbon/react";
-import React from "react";
 import { Information } from "@carbon/react/icons";
 import styled from "styled-components";
 const StyledRadioTile = styled(RadioTile) `
@@ -8,37 +8,27 @@ const StyledRadioTile = styled(RadioTile) `
 `;
 export const RadioGroupElementSingle = ({ theme, title, label, elements, columns, tooltip, selectedElement, setSelectedElement, }) => {
     const backgroundColor = theme === "dark" ? "#393939" : "#E5E5E5";
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Stack, { gap: 1 },
-            React.createElement("h4", null,
-                title,
-                tooltip && (
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                React.createElement(Tooltip, { label: tooltip, align: "bottom" },
-                    React.createElement("span", { className: "onboarding" },
-                        React.createElement(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", "aria-label": "Information", style: {
-                                marginTop: "-10px",
-                                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-                            } }))))),
-            label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
-        React.createElement(Stack, { gap: 3 }, elements
-            .reduce((result, item, index) => {
-            const chunkIndex = Math.floor(index / columns);
-            if (!result[chunkIndex]) {
-                result[chunkIndex] = [];
-            }
-            result[chunkIndex].push(item);
-            return result;
-        }, [])
-            .map((row, index) => (React.createElement(FlexGrid, { key: `row-${index}`, style: {
-                width: "100%",
-                maxWidth: "100%",
-                paddingLeft: "0",
-                paddingRight: "0",
-            } },
-            React.createElement(Row, null, row.map((element, index) => (React.createElement(Column, { key: `column-${element.value}-${index}`, style: { maxWidth: `${100 / columns}%` } },
-                React.createElement(StyledRadioTile, { "$backgroundColor": backgroundColor, key: `tile-${element.value}-${index}`, checked: (selectedElement ?? "") === element.value, onChange: (value) => {
-                        setSelectedElement(value);
-                    }, value: element.value }, element.label)))))))))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: 1, children: [_jsxs("h4", { children: [title, tooltip && (
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            _jsx(Tooltip, { label: tooltip, align: "bottom", children: _jsx("span", { className: "onboarding", children: _jsx(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", "aria-label": "Information", style: {
+                                            marginTop: "-10px",
+                                            backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                                        } }) }) }))] }), label && _jsx("p", { className: "cds--modal-header__label", children: label })] }), _jsx(Stack, { gap: 3, children: elements
+                    .reduce((result, item, index) => {
+                    const chunkIndex = Math.floor(index / columns);
+                    if (!result[chunkIndex]) {
+                        result[chunkIndex] = [];
+                    }
+                    result[chunkIndex].push(item);
+                    return result;
+                }, [])
+                    .map((row, index) => (_jsx(FlexGrid, { style: {
+                        width: "100%",
+                        maxWidth: "100%",
+                        paddingLeft: "0",
+                        paddingRight: "0",
+                    }, children: _jsx(Row, { children: row.map((element, index) => (_jsx(Column, { style: { maxWidth: `${100 / columns}%` }, children: _jsx(StyledRadioTile, { "$backgroundColor": backgroundColor, checked: (selectedElement ?? "") === element.value, onChange: (value) => {
+                                    setSelectedElement(value);
+                                }, value: element.value, children: element.label }, `tile-${element.value}-${index}`) }, `column-${element.value}-${index}`))) }) }, `row-${index}`))) })] }));
 };

package/lib/esm/src/components/c3-onboarding-survey/elements/textField.js

@@ -1,14 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { TextInput, Stack } from "@carbon/react";
-import React from "react";
 import { getTitleId } from "../helpers";
 export const TextInputElement = ({ title, label, preFiledValue, setValue, placeholder }) => {
     const titleId = getTitleId(title);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Stack, { orientation: "horizontal" },
-            React.createElement(Stack, { gap: 1 },
-                React.createElement("h4", { id: titleId }, title),
-                label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
-            React.createElement(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
-                    setValue(event.target.value);
-                }, "aria-labelledby": titleId, invalid: false, invalidText: React.createElement(React.Fragment, null) }))));
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { orientation: "horizontal", children: [_jsxs(Stack, { gap: 1, children: [_jsx("h4", { id: titleId, children: title }), label && _jsx("p", { className: "cds--modal-header__label", children: label })] }), _jsx(TextInput, { id: `text-input-element-${Math.random() * 1000}`, placeholder: placeholder ?? "", labelText: "", value: preFiledValue ?? "", onChange: (event) => {
+                        setValue(event.target.value);
+                    }, "aria-labelledby": titleId, invalid: false, invalidText: _jsx(_Fragment, {}) })] }) }));
 };

package/lib/esm/src/components/c3-onboarding-survey/onboardingModal.d.ts

@@ -3,21 +3,21 @@ export declare const StyledModalBody: FC<any>;
 export declare const OnboardingModal: ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled, secondaryButtonText, tertiaryButtonText, loadingText, error, danger, theme, onRequestClose, onSecondary, onPrimary, onTertiary, children, }: {
     isDoingAsyncWork: boolean;
     heading: string;
-    headingLabel?: string | undefined;
+    headingLabel?: string;
     primaryButtonText: string;
-    primaryButtonDisabled?: boolean | undefined;
-    secondaryButtonText?: string | undefined;
-    tertiaryButtonText?: string | undefined;
+    primaryButtonDisabled?: boolean;
+    secondaryButtonText?: string;
+    tertiaryButtonText?: string;
     loadingText: string;
     error?: {
         title: string;
         description: string;
-    } | undefined;
-    danger?: boolean | undefined;
+    };
+    danger?: boolean;
     theme: string;
     onRequestClose: (skip: boolean) => void;
-    onSecondary?: (() => void) | undefined;
-    onPrimary?: (() => void) | undefined;
-    onTertiary?: (() => void) | undefined;
+    onSecondary?: () => void;
+    onPrimary?: () => void;
+    onTertiary?: () => void;
     children?: React.ReactNode;
 }) => JSX.Element;

package/lib/esm/src/components/c3-onboarding-survey/onboardingModal.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, InlineLoading, InlineNotification, ModalBody, ModalFooter, ModalHeader, Stack, } from "@carbon/react";
-import React from "react";
 import styled from "styled-components";
 import { headingStyles } from "../c3-help-center/styles";
 export const StyledModalBody = styled(ModalBody) `
@@ -9,45 +9,34 @@ const StyledModalFooter = styled(ModalFooter) `
 	background-color: ${({ $c3Theme }) => $c3Theme === "light" ? "#FFFFFF" : "#161616"};
 `;
 export const OnboardingModal = ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled = false, secondaryButtonText = "Cancel", tertiaryButtonText, loadingText, error = { title: "", description: "" }, danger = false, theme, onRequestClose, onSecondary, onPrimary, onTertiary, children, }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ModalHeader, { title: heading, label: headingLabel, style: {
-                pointerEvents: isDoingAsyncWork ? "none" : "unset",
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-                marginBottom: 0,
-            }, closeModal: () => onRequestClose(false) }),
-        React.createElement(StyledModalBody, { style: {
-                marginBottom: "0px",
-                paddingBottom: "3rem",
-                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
-            } },
-            React.createElement("div", { style: { minHeight: "520px" } },
-                React.createElement(Stack, { gap: 6 },
-                    children,
-                    error.title ? (React.createElement(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : ("")))),
-        React.createElement(StyledModalFooter, { "$c3Theme": theme }, (() => {
-            if (tertiaryButtonText && onTertiary !== undefined) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary() }, tertiaryButtonText),
-                    React.createElement(Button, { style: { paddingRight: "1rem", marginLeft: "33%" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
-                            if (onPrimary) {
-                                onPrimary();
-                            }
-                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
-            }
-            else {
-                return (React.createElement(React.Fragment, null,
-                    (() => {
-                        let button = React.createElement(React.Fragment, null);
-                        if (secondaryButtonText && onSecondary) {
-                            button = (React.createElement(Button, { kind: "secondary", disabled: isDoingAsyncWork, onClick: () => onSecondary?.(), style: { marginLeft: "33%" } }, secondaryButtonText));
-                        }
-                        return button;
-                    })(),
-                    React.createElement(Button, { style: { paddingRight: "1rem" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
-                            if (onPrimary) {
-                                onPrimary();
-                            }
-                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
-            }
-        })())));
+    return (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { title: heading, label: headingLabel, style: {
+                    pointerEvents: isDoingAsyncWork ? "none" : "unset",
+                    backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                    marginBottom: 0,
+                }, closeModal: () => onRequestClose(false) }), _jsx(StyledModalBody, { style: {
+                    marginBottom: "0px",
+                    paddingBottom: "3rem",
+                    backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                }, children: _jsx("div", { style: { minHeight: "520px" }, children: _jsxs(Stack, { gap: 6, children: [children, error.title ? (_jsx(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : ("")] }) }) }), _jsx(StyledModalFooter, { "$c3Theme": theme, children: (() => {
+                    if (tertiaryButtonText && onTertiary !== undefined) {
+                        return (_jsxs(_Fragment, { children: [_jsx(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary(), children: tertiaryButtonText }), _jsx(Button, { style: { paddingRight: "1rem", marginLeft: "33%" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
+                                        if (onPrimary) {
+                                            onPrimary();
+                                        }
+                                    }, children: isDoingAsyncWork ? (_jsx(InlineLoading, { description: loadingText })) : (primaryButtonText) })] }));
+                    }
+                    else {
+                        return (_jsxs(_Fragment, { children: [(() => {
+                                    let button = _jsx(_Fragment, {});
+                                    if (secondaryButtonText && onSecondary) {
+                                        button = (_jsx(Button, { kind: "secondary", disabled: isDoingAsyncWork, onClick: () => onSecondary?.(), style: { marginLeft: "33%" }, children: secondaryButtonText }));
+                                    }
+                                    return button;
+                                })(), _jsx(Button, { style: { paddingRight: "1rem" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
+                                        if (onPrimary) {
+                                            onPrimary();
+                                        }
+                                    }, children: isDoingAsyncWork ? (_jsx(InlineLoading, { description: loadingText })) : (primaryButtonText) })] }));
+                    }
+                })() })] }));
 };

package/lib/esm/src/components/c3-onboarding-survey/onboardingPage.d.ts

@@ -2,19 +2,19 @@ import React from "react";
 export declare const OnboardingPage: ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled, secondaryButtonText, tertiaryButtonText, loadingText, error, danger, onSecondary, onPrimary, onTertiary, children, }: {
     isDoingAsyncWork: boolean;
     heading: string;
-    headingLabel?: string | undefined;
+    headingLabel?: string;
     primaryButtonText: string;
-    primaryButtonDisabled?: boolean | undefined;
-    secondaryButtonText?: string | undefined;
-    tertiaryButtonText?: string | undefined;
+    primaryButtonDisabled?: boolean;
+    secondaryButtonText?: string;
+    tertiaryButtonText?: string;
     loadingText: string;
     error?: {
         title: string;
         description: string;
-    } | undefined;
-    danger?: boolean | undefined;
-    onSecondary?: (() => void) | undefined;
-    onPrimary?: (() => void) | undefined;
-    onTertiary?: (() => void) | undefined;
+    };
+    danger?: boolean;
+    onSecondary?: () => void;
+    onPrimary?: () => void;
+    onTertiary?: () => void;
     children?: React.ReactNode;
 }) => JSX.Element;

package/lib/esm/src/components/c3-onboarding-survey/onboardingPage.js

@@ -1,42 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, InlineLoading, InlineNotification, Stack } from "@carbon/react";
-import React from "react";
 export const OnboardingPage = ({ isDoingAsyncWork, heading, headingLabel, primaryButtonText, primaryButtonDisabled = false, secondaryButtonText = "Cancel", tertiaryButtonText, loadingText, error = { title: "", description: "" }, danger = false, onSecondary, onPrimary, onTertiary, children, }) => {
-    return (React.createElement(Stack, null,
-        React.createElement(Stack, null,
-            React.createElement("h1", null, heading),
-            React.createElement("p", null, headingLabel)),
-        React.createElement("div", { style: { minHeight: "520px" } },
-            React.createElement(Stack, { gap: 6 },
-                children,
-                error.title ? (React.createElement(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : (""))),
-        (() => {
-            if (tertiaryButtonText && onTertiary !== undefined) {
-                return (React.createElement(Stack, { orientation: "horizontal" },
-                    React.createElement(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary() }, tertiaryButtonText),
-                    React.createElement(Button, { style: {
-                            paddingRight: "1rem",
-                            marginLeft: "auto",
-                            marginRight: "0px",
-                        }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
-                            if (onPrimary) {
-                                onPrimary();
-                            }
-                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
-            }
-            else {
-                return (React.createElement(Stack, { orientation: "horizontal" },
-                    (() => {
-                        let button = React.createElement(React.Fragment, null);
-                        if (secondaryButtonText && onSecondary) {
-                            button = (React.createElement(Button, { kind: "secondary", disabled: isDoingAsyncWork, onClick: () => onSecondary?.(), style: { marginLeft: "0px" } }, secondaryButtonText));
-                        }
-                        return button;
-                    })(),
-                    React.createElement(Button, { style: { marginLeft: "auto", marginRight: "0px" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
-                            if (onPrimary) {
-                                onPrimary();
-                            }
-                        } }, isDoingAsyncWork ? (React.createElement(InlineLoading, { description: loadingText })) : (primaryButtonText))));
-            }
-        })()));
+    return (_jsxs(Stack, { children: [_jsxs(Stack, { children: [_jsx("h1", { children: heading }), _jsx("p", { children: headingLabel })] }), _jsx("div", { style: { minHeight: "520px" }, children: _jsxs(Stack, { gap: 6, children: [children, error.title ? (_jsx(InlineNotification, { kind: "error", title: error.title, subtitle: error.description, hideCloseButton: true })) : ("")] }) }), (() => {
+                if (tertiaryButtonText && onTertiary !== undefined) {
+                    return (_jsxs(Stack, { orientation: "horizontal", children: [_jsx(Button, { kind: "ghost", disabled: isDoingAsyncWork, onClick: () => onTertiary(), children: tertiaryButtonText }), _jsx(Button, { style: {
+                                    paddingRight: "1rem",
+                                    marginLeft: "auto",
+                                    marginRight: "0px",
+                                }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
+                                    if (onPrimary) {
+                                        onPrimary();
+                                    }
+                                }, children: isDoingAsyncWork ? (_jsx(InlineLoading, { description: loadingText })) : (primaryButtonText) })] }));
+                }
+                else {
+                    return (_jsxs(Stack, { orientation: "horizontal", children: [(() => {
+                                let button = _jsx(_Fragment, {});
+                                if (secondaryButtonText && onSecondary) {
+                                    button = (_jsx(Button, { kind: "secondary", disabled: isDoingAsyncWork, onClick: () => onSecondary?.(), style: { marginLeft: "0px" }, children: secondaryButtonText }));
+                                }
+                                return button;
+                            })(), _jsx(Button, { style: { marginLeft: "auto", marginRight: "0px" }, kind: danger ? "danger" : "primary", disabled: primaryButtonDisabled || isDoingAsyncWork, onClick: () => {
+                                    if (onPrimary) {
+                                        onPrimary();
+                                    }
+                                }, children: isDoingAsyncWork ? (_jsx(InlineLoading, { description: loadingText })) : (primaryButtonText) })] }));
+                }
+            })()] }));
 };