xmlui 0.10.11 → 0.10.12

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.11",
+    "version": "0.10.12",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -53,7 +53,7 @@ const AppHeader = (_a) => {
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
             }), children: [hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));

package/dist/scripts/src/components/AutoComplete/AutoComplete.js

@@ -43,6 +43,10 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        itemCreated: {
+            description: "This event is triggered when a new item is created by the user " +
+                "(if `creatable` is enabled).",
+        }
     },
     apis: {
         focus: {
@@ -93,7 +97,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, registerComponentApi, className, }) => {
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), className: className, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, creatable: extractValue.asOptionalBoolean(node.props.creatable), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), initiallyOpen: extractValue.asOptionalBoolean(node.props.initiallyOpen), optionRenderer: node.props.optionTemplate
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), className: className, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, creatable: extractValue.asOptionalBoolean(node.props.creatable), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onItemCreated: lookupEventHandler("itemCreated"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), initiallyOpen: extractValue.asOptionalBoolean(node.props.initiallyOpen), optionRenderer: node.props.optionTemplate
             ? (item, val, inTrigger) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, context: {
                         $selectedValue: val,

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -31,6 +31,7 @@ const react_popover_1 = require("@radix-ui/react-popover");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("../Select/HiddenOption");
 const parts_1 = require("../../components-core/parts");
+const PART_LIST_WRAPPER = "listWrapper";
 function isOptionsExist(options, newOptions) {
     return newOptions.some((option) => Array.from(options).some((o) => o.value === option.value || o.label === option.label));
 }
@@ -46,10 +47,11 @@ exports.defaultProps = {
     onDidChange: constants_1.noop,
     onFocus: constants_1.noop,
     onBlur: constants_1.noop,
+    onItemCreated: constants_1.noop,
     initiallyOpen: false,
 };
 exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forwardedRef) {
-    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "label", "labelPosition", "labelWidth", "labelBreak", "required", "creatable", "optionRenderer", "initiallyOpen"]);
+    var { id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder, updateState = exports.defaultProps.updateState, validationStatus = exports.defaultProps.validationStatus, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, onItemCreated = exports.defaultProps.onItemCreated, registerComponentApi, emptyListTemplate, style, className, children, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, dropdownHeight, multi = exports.defaultProps.multi, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, creatable = exports.defaultProps.creatable, optionRenderer, initiallyOpen = exports.defaultProps.initiallyOpen } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "onItemCreated", "registerComponentApi", "emptyListTemplate", "style", "className", "children", "readOnly", "autoFocus", "dropdownHeight", "multi", "label", "labelPosition", "labelWidth", "labelBreak", "required", "creatable", "optionRenderer", "initiallyOpen"]);
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(initiallyOpen);
@@ -184,7 +186,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                 if (extendedValue.toLowerCase().includes(search.toLowerCase()))
                                     return 1;
                                 return 0;
-                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { "data-part-id": PART_LIST_WRAPPER, ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
                                                 [AutoComplete_module_scss_1.default.disabled]: !enabled,
                                                 [AutoComplete_module_scss_1.default.focused]: isFocused,
                                             }), children: [Array.isArray(selectedValue) && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
@@ -227,9 +229,9 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                                                 if (readOnly)
                                                                     return;
                                                                 setOpen(!open);
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), creatable && (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly }, value))) })] }) }) }))] }) }), children] }) }) }));
+                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), creatable && (0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly }, value))) })] }) }) }))] }) }), children] }) }) }));
 });
-function CreatableItem() {
+function CreatableItem({ onNewItem }) {
     const { value, options, inputValue, onChange, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
     const { onOptionAdd } = (0, OptionContext_1.useOption)();
     if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
@@ -243,6 +245,7 @@ function CreatableItem() {
         }, onSelect: (value) => {
             const newOption = { value, label: value, enabled: true };
             onOptionAdd(newOption);
+            onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(value);
             onChange(value);
             setOpen(false);
         }, children: `Create "${inputValue}"` }));

package/dist/scripts/src/components/Avatar/Avatar.js

@@ -51,5 +51,5 @@ exports.AvatarMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AvatarMd, ({ node, extractValue, lookupEventHandler, className, extractResourceUrl }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { className: className, size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: extractResourceUrl(node.props.url), name: extractValue(node.props.name), onClick: lookupEventHandler("click") }));
+    return ((0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { className: className, size: (_a = node.props) === null || _a === void 0 ? void 0 : _a.size, url: node.props.url ? extractResourceUrl(node.props.url) : undefined, name: extractValue(node.props.name), onClick: lookupEventHandler("click") }));
 });

package/dist/scripts/src/components/Charts/BarChart/BarChart.js

@@ -18,9 +18,8 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             description: `This property is used to provide the component with data to display.` +
                 `The data needs to be an array of objects.`,
         },
-        xKeys: {
-            description: "This property specifies the keys in the data objects that should be used for rendering the bars." +
-                `E.g. 'id' or 'key'.`,
+        yKeys: {
+            description: "Specifies the key in the data objects that will be used to label the different data series.",
             valueType: "string",
         },
         stacked: {
@@ -38,8 +37,9 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             availableValues: ["horizontal", "vertical"],
             defaultValue: BarChartNative_1.defaultProps.layout,
         },
-        yKey: {
-            description: "Specifies the key in the data objects that will be used to label the different data series.",
+        xKey: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the bars." +
+                `E.g. 'id' or 'key'.`,
             valueType: "string",
         },
         hideX: {
@@ -87,7 +87,7 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.barChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BarChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.orientation), nameKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.yKey), dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.xKeys), stacked: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.stacked), hideX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTickX: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickX), hideTickY: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.hideTooltip), showLegend: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.showLegend), tooltipRenderer: node.props.tooltipTemplate
+    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { className: className, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.orientation), nameKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.xKey), dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.yKeys), stacked: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.stacked), hideX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTickX: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickX), hideTickY: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.hideTickY), hideTooltip: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.hideTooltip), showLegend: extractValue.asOptionalBoolean((_o = node.props) === null || _o === void 0 ? void 0 : _o.showLegend), tooltipRenderer: node.props.tooltipTemplate
             ? (tooltipData) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
                         $tooltip: tooltipData,

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -67,21 +67,6 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
     // Validate and normalize data
     const validData = (0, react_2.useMemo)(() => (Array.isArray(data) ? data : []), [data]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
-        if (!tooltipRenderer)
-            return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
-        const payloadObject = {};
-        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
-            Object.assign(payloadObject, props.payload[0].payload);
-        }
-        // Extract tooltip data from Recharts props
-        const tooltipData = {
-            label: props.label,
-            payload: payloadObject,
-            active: props.active,
-        };
-        return tooltipRenderer(tooltipData);
-    }, [tooltipRenderer]);
     const colorValues = (0, react_2.useMemo)(() => {
         return [
             getThemeVar("color-primary-500"),
@@ -122,6 +107,31 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
             getThemeVar("color-secondary-700"),
         ];
     }, [getThemeVar]);
+    const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
+        if (!tooltipRenderer)
+            return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
+        const payloadArray = [];
+        if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
+            const originalPayload = props.payload[0].payload;
+            // Transform dataKeys into array of objects with label, value, and color
+            dataKeys === null || dataKeys === void 0 ? void 0 : dataKeys.forEach((dataKey, index) => {
+                if (dataKey in originalPayload) {
+                    payloadArray.push({
+                        label: dataKey,
+                        value: originalPayload[dataKey],
+                        color: colorValues[index] || colorValues[0]
+                    });
+                }
+            });
+        }
+        // Extract tooltip data from Recharts props
+        const tooltipData = {
+            label: props.label,
+            payload: payloadArray,
+            active: props.active,
+        };
+        return tooltipRenderer(tooltipData);
+    }, [tooltipRenderer, dataKeys, colorValues]);
     const config = (0, react_2.useMemo)(() => {
         return Object.assign({}, ...dataKeys.map((key, index) => {
             return {

package/dist/scripts/src/components/Charts/LineChart/LineChart.js

@@ -24,12 +24,12 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
             description: "The data to be displayed in the line chart." +
                 "It needs to be an array of objects, where each object represents a data point.",
         },
-        xKeys: {
-            description: "This property specifies the keys in the data objects that should be used for rendering the lines.",
+        xKey: {
+            description: "The key in the data objects used for labeling different data series.",
             valueType: "string",
         },
-        yKey: {
-            description: "The key in the data objects used for labeling different data series.",
+        yKeys: {
+            description: "This property specifies the keys in the data objects that should be used for rendering the lines.",
             valueType: "string",
         },
         hideX: {
@@ -84,7 +84,7 @@ exports.LineChartMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.lineChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LineChartMd, ({ extractValue, node, className, lookupSyncCallback, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.xKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.yKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
+    return ((0, jsx_runtime_1.jsx)(LineChartNative_1.LineChart, { tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), hideTickX: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.hideTickX), hideTickY: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.hideTickY), data: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.data), className: className, dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.yKeys), nameKey: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.xKey), hideX: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTooltip: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTooltip), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), marginTop: extractValue.asOptionalNumber((_m = node.props) === null || _m === void 0 ? void 0 : _m.marginTop), marginRight: extractValue.asOptionalNumber((_o = node.props) === null || _o === void 0 ? void 0 : _o.marginRight), marginBottom: extractValue.asOptionalNumber((_p = node.props) === null || _p === void 0 ? void 0 : _p.marginBottom), marginLeft: extractValue.asOptionalNumber((_q = node.props) === null || _q === void 0 ? void 0 : _q.marginLeft), tooltipRenderer: node.props.tooltipTemplate
             ? (tooltipData) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tooltipTemplate, item: tooltipData, contextVars: {
                         $tooltip: tooltipData,

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -114,18 +114,28 @@ exports.LineChart = (0, react_1.forwardRef)(function LineChart({ data, dataKeys
     const safeTooltipRenderer = (0, react_1.useCallback)((props) => {
         if (!tooltipRenderer)
             return (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, Object.assign({}, props));
-        const payloadObject = {};
+        const payloadArray = [];
         if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
-            Object.assign(payloadObject, props.payload[0].payload);
+            const originalPayload = props.payload[0].payload;
+            // Transform dataKeys into array of objects with label, value, and color
+            dataKeys.forEach((dataKey, index) => {
+                if (dataKey in originalPayload) {
+                    payloadArray.push({
+                        label: dataKey,
+                        value: originalPayload[dataKey],
+                        color: colorValues[index] || colorValues[0]
+                    });
+                }
+            });
         }
         // Extract tooltip data from Recharts props
         const tooltipData = {
             label: props.label,
-            payload: payloadObject,
+            payload: payloadArray,
             active: props.active,
         };
         return tooltipRenderer(tooltipData);
-    }, [tooltipRenderer]);
+    }, [tooltipRenderer, dataKeys, colorValues]);
     (0, react_1.useEffect)(() => {
         const calc = () => {
             var _a, _b, _c;

package/dist/scripts/src/components/ComponentProvider.js

@@ -45,7 +45,6 @@ const RealTimeAdapter_1 = require("./RealTimeAdapter/RealTimeAdapter");
 const Form_1 = require("./Form/Form");
 const EmojiSelector_1 = require("./EmojiSelector/EmojiSelector");
 const NumberBox_1 = require("./NumberBox/NumberBox");
-const NumberBox2_1 = require("./NumberBox/NumberBox2");
 const HoverCard_1 = require("./HoverCard/HoverCard");
 const App_1 = require("./App/App");
 const NavPanel_1 = require("./NavPanel/NavPanel");
@@ -411,7 +410,6 @@ class ComponentRegistry {
             this.registerCoreComponent(TextBox_1.textBoxComponentRenderer);
             this.registerCoreComponent(TextBox_1.passwordInputComponentRenderer);
             this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
-            this.registerCoreComponent(NumberBox2_1.numberBox2ComponentRenderer);
             this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
             this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
             this.registerCoreComponent(FileInput_1.fileInputRenderer);

package/dist/scripts/src/components/Footer/FooterNative.js

@@ -29,7 +29,7 @@ exports.Footer = (0, react_1.forwardRef)(function Footer(_a, forwardedRef) {
     var { children, style, className } = _a, rest = __rest(_a, ["children", "style", "className"]);
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, role: "contentinfo", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
                 [Footer_module_scss_1.default.full]: !canRestrictContentWidth,
             }), children: children }) })));
 });

package/dist/scripts/src/components/Form/FormNative.js

@@ -45,6 +45,8 @@ const formActions_2 = require("../Form/formActions");
 const FormContext_1 = require("./FormContext");
 const lodash_es_1 = require("lodash-es");
 const classnames_1 = __importDefault(require("classnames"));
+const PART_CANCEL_BUTTON = "cancelButton";
+const PART_SUBMIT_BUTTON = "submitButton";
 const getByPath = (obj, path) => {
     return (0, lodash_es_1.get)(obj, path);
 };
@@ -248,7 +250,7 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
         try {
             const filteredSubject = cleanUpSubject(formState.subject);
             const result = yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredSubject, {
-                passAsDefaultBody: true
+                passAsDefaultBody: true,
             }));
             dispatch((0, formActions_1.formSubmitted)());
             yield (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(result));
@@ -321,8 +323,8 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
             });
         });
     });
-    const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
-    const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
+    const cancelButton = cancelLabel === "" ? null : ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_CANCEL_BUTTON, type: "button", themeColor: "secondary", variant: "ghost", onClick: doCancel, children: cancelLabel }, "cancel"));
+    const submitButton = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_SUBMIT_BUTTON, type: "submit", disabled: !isEnabled, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit")), [isEnabled, formState.submitInProgress, saveInProgressLabel, saveLabel]);
     (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             reset: doReset,

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -35,7 +35,6 @@ const Validations_1 = require("./Validations");
 const SliderNative_1 = require("../Slider/SliderNative");
 const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
 const HelperText_1 = require("./HelperText");
-const NumberBox2Native_1 = require("../NumberBox/NumberBox2Native");
 const ItemsNative_1 = require("../Items/ItemsNative");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
@@ -168,14 +167,6 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { initialValue: initialValue, value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }
-        // NOTE: This is a prototype for the new number field
-        // works as good as the regular number field but untested
-        // in production.
-        case "integer2":
-        case "number2": {
-            formControl = ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, Object.assign({}, rest, { initialValue: initialValue, value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, min: validations.minValue, max: validations.maxValue, integersOnly: type === "integer2" })));
-            break;
-        }
         case "switch":
         case "checkbox": {
             formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -28,9 +28,9 @@ exports.defaultProps = {
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
     var { id, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false } = _a, rest = __rest(_a, ["id", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed"]);
-    // --- HACK: the "rest" may contain a "layoutContext" property with undefined value, and it
-    // --- would issue a warning in React.
-    if (rest.layoutContext === undefined) {
+    // --- HACK: the "rest" may contain a "layoutContext" property that React doesn't recognize
+    // --- as a valid DOM attribute, which would issue a warning in React.
+    if (rest.layoutContext !== undefined) {
         delete rest.layoutContext;
     }
     // --- END HACK

package/dist/scripts/src/components/Icon/IconNative.js

@@ -25,14 +25,22 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
-    var { name, fallback, style, className, size, onClick } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick"]);
+    var { name, fallback, style, className, size, onClick, tabIndex, onKeyDown } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick", "tabIndex", "onKeyDown"]);
     const iconRenderer = useFindIconRenderer(name, fallback);
+    // Handle keyboard events for clickable icons
+    const handleKeyDown = (event) => {
+        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onClick(event);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
     const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
     const width = computedSize || restProps.width;
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 
         // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), onClick });
+        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex });
     // ---
     const customIconUrl = useCustomIconUrl(name);
     if (customIconUrl) {
@@ -46,19 +54,29 @@ exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
 });
 const CustomIcon = (0, react_1.forwardRef)(function CustomIcon(props, ref) {
     var _a;
-    const { url, width, height, name, style, className } = props, rest = __rest(props, ["url", "width", "height", "name", "style", "className"]);
+    const { url, width, height, name, style, className, onClick, onKeyDown, tabIndex } = props, rest = __rest(props, ["url", "width", "height", "name", "style", "className", "onClick", "onKeyDown", "tabIndex"]);
+    // Handle keyboard events for clickable icons
+    const handleKeyDown = (event) => {
+        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onClick(event);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
     const resourceUrl = (0, ThemeContext_1.useResourceUrl)(url);
     const isSvgIcon = (_a = resourceUrl === null || resourceUrl === void 0 ? void 0 : resourceUrl.toLowerCase()) === null || _a === void 0 ? void 0 : _a.endsWith(".svg");
     const customSvgIconRenderer = (0, IconRegistryContext_1.useCustomSvgIconRenderer)(resourceUrl);
     if (resourceUrl && isSvgIcon) {
-        const renderedIcon = customSvgIconRenderer === null || customSvgIconRenderer === void 0 ? void 0 : customSvgIconRenderer(Object.assign({ style, className }, rest));
+        const renderedIcon = customSvgIconRenderer === null || customSvgIconRenderer === void 0 ? void 0 : customSvgIconRenderer(Object.assign({ style,
+            className,
+            onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest));
         if (!renderedIcon) {
             //to prevent layout shift
-            return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, rest, { ref: ref, style: style, className: className })));
+            return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, rest, { ref: ref, style: style, className: className, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex })));
         }
         return renderedIcon;
     }
-    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: ref, src: resourceUrl, style: Object.assign({ width, height }, style), alt: name }, rest)));
+    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: ref, src: resourceUrl, style: Object.assign({ width, height }, style), alt: name, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest)));
 });
 function useCustomIconUrl(iconName) {
     const { getResourceUrl } = (0, ThemeContext_1.useTheme)();

package/dist/scripts/src/components/ModalDialog/ModalDialog.js

@@ -19,6 +19,14 @@ exports.ModalDialogMd = (0, metadata_helpers_1.createMetadata)({
         "ideal for forms, confirmations, detailed views, or any content that requires " +
         "focused user attention. Dialogs are programmatically opened using the `open()` " +
         "method and can receive parameters for dynamic content.",
+    parts: {
+        content: {
+            description: "The main content area of the modal dialog.",
+        },
+        title: {
+            description: "The title area of the modal dialog.",
+        }
+    },
     props: {
         fullScreen: {
             description: `Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +

package/dist/scripts/src/components/ModalDialog/ModalDialogNative.js

@@ -68,6 +68,8 @@ const misc_1 = require("../../components-core/utils/misc");
 const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ModalVisibilityContext_1 = require("./ModalVisibilityContext");
+const PART_TITLE = "title";
+const PART_CONTENT = "content";
 // Default props for ModalDialog component
 exports.defaultProps = {
     fullScreen: false,
@@ -128,7 +130,7 @@ function useModalOpenState(isInitiallyOpen = true, onOpen, onClose) {
     return modalStateContext || modalLocalOpenState;
 }
 exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
-    var { children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, onOpen, onClose } = _a, rest = __rest(_a, ["children", "style", "isInitiallyOpen", "fullScreen", "title", "closeButtonVisible", "onOpen", "onClose"]);
+    var { children, style, isInitiallyOpen, fullScreen = exports.defaultProps.fullScreen, title, closeButtonVisible = exports.defaultProps.closeButtonVisible, className, onOpen, onClose } = _a, rest = __rest(_a, ["children", "style", "isInitiallyOpen", "fullScreen", "title", "closeButtonVisible", "className", "onOpen", "onClose"]);
     const { root } = (0, ThemeContext_1.useTheme)();
     // NOTE: at this point, we can't use useAppContext here,
     // since the ModalDialog context provider (via ConfirmationModalContextProvider) is mounted outside of the AppContext,
@@ -178,13 +180,13 @@ exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
     if (!root) {
         return null;
     }
-    const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, Object.assign({}, rest, { className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content), onPointerDownOutside: (event) => {
+    const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, Object.assign({}, rest, { "data-part-id": PART_CONTENT, className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content, className), onPointerDownOutside: (event) => {
             if (event.target instanceof Element &&
                 event.target.closest("._debug-inspect-button") !== null) {
                 //we prevent the auto modal close on clicking the inspect button
                 event.preventDefault();
             }
-        }, ref: composedRef, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { style: { marginTop: 0 }, children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, style: { gap: style === null || style === void 0 ? void 0 : style.gap }, children: (0, jsx_runtime_1.jsx)(ModalVisibilityContext_1.ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children: children }) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] })));
+        }, ref: composedRef, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: [!!title && ((0, jsx_runtime_1.jsx)(Dialog.Title, { style: { marginTop: 0 }, children: (0, jsx_runtime_1.jsx)("header", { id: "dialogTitle", className: ModalDialog_module_scss_1.default.dialogTitle, "data-part-id": PART_TITLE, children: title }) })), (0, jsx_runtime_1.jsx)("div", { className: ModalDialog_module_scss_1.default.innerContent, style: { gap: style === null || style === void 0 ? void 0 : style.gap }, children: (0, jsx_runtime_1.jsx)(ModalVisibilityContext_1.ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children: children }) }), closeButtonVisible && ((0, jsx_runtime_1.jsx)(Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", className: ModalDialog_module_scss_1.default.closeButton, "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" }) }))] })));
     return ((0, jsx_runtime_1.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => (open ? doOpen() : doClose()), children: (0, jsx_runtime_1.jsxs)(Dialog.Portal, { container: root, children: [isDialogRootInShadowDom && (
                 /*
                   In the Shadow DOM we can omit the Dialog.Overlay,