udp-react-enterprise-component-library 1.0.5-beta.2 → 1.0.6

package/{dist-tsdown/AmbientGridTemplate-C4cO-UBE.js → dist/AmbientGridTemplate-BLwgiqwK.js}

@@ -1,9 +1,8 @@
-import { Field, Form, SideSheet, apiMutate as apiMutate$1 } from "./SideSheet-DcEfnfH_.js";
-import { FluentButton, FluentIcon, GridStateTypeEnums, LayoutUnit, NodeActionEnums, PrimaryActionButton, SplitScreenTypeEnums, UnityFluentIcon, VisibilityTypeEnums, toTitleCase, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-W5AjvnLN.js";
-import { ClickOpenEnums, useHandleAxiosSnackbar } from "./apiHelpers-DtpC3VqG.js";
-import React, { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Field, Form, SideSheet, apiMutate as apiMutate$1 } from "./SideSheet-CPHhyWLB.js";
+import { FluentButton, FluentIcon, GridStateTypeEnums, LayoutUnit, NodeActionEnums, PrimaryActionButton, PrimaryActionButton_default, SplitScreenTypeEnums, UnityFluentIcon, VisibilityTypeEnums, toTitleCase, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-BMvQEZPZ.js";
+import { ClickOpenEnums, useHandleAxiosSnackbar } from "./apiHelpers-t3rfkjFZ.js";
+import React$1, { Children, React as React$2, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Badge, Box, Button, ButtonGroup, Chip, ClickAwayListener, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FormControlLabel, Grid, Grow, IconButton, InputAdornment, LinearProgress, MenuItem, MenuList, Paper, Popover, Popper, Switch, Tab, Tabs, TextField, Tooltip, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ConfigService } from "udp-react-stencil-component-library";
 import { useSnackbar } from "notistack";
 import { useHistory } from "react-router-dom";
@@ -145,14 +144,13 @@ const ActionContext = createContext(null);
 //#endregion
 //#region src/UI/SuccessAction.jsx
 const getSuccessAction = (closeSnackbar) => {
-	const successAction = (key) => /* @__PURE__ */ jsx(Button, {
+	const successAction = (key) => /* @__PURE__ */ React$1.createElement(Button, {
 		color: "secondary",
 		size: "small",
 		onClick: () => {
 			closeSnackbar(key);
-		},
-		children: "OK"
-	});
+		}
+	}, "OK");
 	return successAction;
 };
 
@@ -627,36 +625,33 @@ const useStyles$21 = makeStyles((theme) => ({
 const AmbientTextField = (props) => {
 	const classes = useStyles$21(props);
 	const { id, label, startAdornment, endAdornment, title = "noTitle",...InputProps } = props;
-	return /* @__PURE__ */ jsx("div", {
-		className: label ? classes.root : classes.noLabel,
-		children: /* @__PURE__ */ jsx(TextField, {
-			...InputProps,
-			id,
-			udprecordid: `udpRecord-FluentAmbientTextField-${title.replace(/\s/g, "")}-${props?.InputProps?.type}`,
-			variant: "filled",
-			size: "small",
-			margin: "dense",
-			label,
-			classes: { label: classes.label },
-			InputProps: {
-				classes: {
-					root: classes.input,
-					input: classes.formTextInput,
-					...props.InputProps?.classes
-				},
-				...props.InputProps,
-				...startAdornment,
-				...endAdornment
+	return /* @__PURE__ */ React$1.createElement("div", { className: label ? classes.root : classes.noLabel }, /* @__PURE__ */ React$1.createElement(TextField, {
+		...InputProps,
+		id,
+		udprecordid: `udpRecord-FluentAmbientTextField-${title.replace(/\s/g, "")}-${props?.InputProps?.type}`,
+		variant: "filled",
+		size: "small",
+		margin: "dense",
+		label,
+		classes: { label: classes.label },
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
 			},
-			InputLabelProps: {
-				shrink: false,
-				classes: {
-					root: classes.labelRoot,
-					focused: classes.labelFocused
-				}
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
 			}
-		})
-	});
+		}
+	}));
 };
 AmbientTextField.propTypes = {
 	id: PropTypes.string,
@@ -764,10 +759,7 @@ const useStyles$20 = makeStyles((theme) => ({ root: {
 const Ellipse = (props) => {
 	const { children } = props;
 	const classes = useStyles$20(props);
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, children);
 };
 Ellipse.propTypes = {
 	color: PropTypes.string,
@@ -788,18 +780,11 @@ const useStyles$19 = makeStyles((theme) => ({
 const GridSidebarContainer = (props) => {
 	const { children, color } = props;
 	const classes = useStyles$19(props);
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsx(Paper, {
-			elevation: "0",
-			square: true,
-			style: { background: color },
-			children: /* @__PURE__ */ jsx("div", {
-				className: classes.groupWrapper,
-				children
-			})
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(Paper, {
+		elevation: "0",
+		square: true,
+		style: { background: color }
+	}, /* @__PURE__ */ React$1.createElement("div", { className: classes.groupWrapper }, children)));
 };
 GridSidebarContainer.propTypes = {
 	children: PropTypes.node,
@@ -823,26 +808,19 @@ const useStyles$18 = makeStyles((theme) => ({
 const AmbientTokenButton = forwardRef(function AmbientTokenButton$1(props, ref) {
 	const { tooltip, ariaLabel, onClick, size, icon = ChevronDownIcon, iconClassName, otherProps, id = "token-button", udprecordid } = props;
 	const classes = useStyles$18(props);
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsx(Tooltip, {
-			title: tooltip,
-			children: /* @__PURE__ */ jsx(IconButton, {
-				id,
-				udprecordid,
-				ref,
-				"aria-label": ariaLabel,
-				className: iconClassName ?? classes.icon,
-				size: size ?? "small",
-				onClick,
-				...otherProps,
-				children: /* @__PURE__ */ jsx(FluentIcon, {
-					className: classes.iconButtonStyle,
-					component: icon
-				})
-			})
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React$1.createElement(IconButton, {
+		id,
+		udprecordid,
+		ref,
+		"aria-label": ariaLabel,
+		className: iconClassName ?? classes.icon,
+		size: size ?? "small",
+		onClick,
+		...otherProps
+	}, /* @__PURE__ */ React$1.createElement(FluentIcon, {
+		className: classes.iconButtonStyle,
+		component: icon
+	}))));
 });
 AmbientTokenButton.propTypes = {
 	tooltip: PropTypes.string.isRequired,
@@ -868,34 +846,17 @@ const useStyles$17 = makeStyles((theme) => ({
 }));
 const GridGroupingHeader = ({ expandClick, collapseClick }) => {
 	const classes = useStyles$17();
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.actionHeader,
-				children: [/* @__PURE__ */ jsx(AmbientTokenButton, {
-					icon: ChevronFold10Icon,
-					tooltip: "Collapse All",
-					ariaLabel: "Collapse All",
-					onClick: collapseClick
-				}), /* @__PURE__ */ jsx(AmbientTokenButton, {
-					icon: ChevronUnfold10Icon,
-					tooltip: "Expand All",
-					ariaLabel: "Expand All",
-					onClick: expandClick
-				})]
-			}),
-			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" }),
-			/* @__PURE__ */ jsx("div", {
-				className: classes.label,
-				children: /* @__PURE__ */ jsx(Typography, {
-					variant: "caption",
-					children: "Group By:"
-				})
-			}),
-			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" })
-		]
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement("div", { className: classes.actionHeader }, /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		icon: ChevronFold10Icon,
+		tooltip: "Collapse All",
+		ariaLabel: "Collapse All",
+		onClick: collapseClick
+	}), /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		icon: ChevronUnfold10Icon,
+		tooltip: "Expand All",
+		ariaLabel: "Expand All",
+		onClick: expandClick
+	})), /* @__PURE__ */ React$1.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React$1.createElement("div", { className: classes.label }, /* @__PURE__ */ React$1.createElement(Typography, { variant: "caption" }, "Group By:")), /* @__PURE__ */ React$1.createElement(LayoutUnit, { unit: "nudge" }));
 };
 GridGroupingHeader.propTypes = {
 	expandClick: PropTypes.func.isRequired,
@@ -926,37 +887,31 @@ const Token = (props) => {
 	const iconColor = useMemo(() => {
 		return getEllipseColor(theme, color);
 	}, [color, theme]);
-	const tokenComponent = /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsx(Ellipse, {
-			variant,
-			size,
-			color,
-			...IconEllipseProps,
-			children: type === "letter" ? /* @__PURE__ */ jsx(Typography, {
-				variant: "body1",
-				className: classes.letter,
-				children: letter.toUpperCase()
-			}) : /* @__PURE__ */ jsx(UnityFluentIcon, {
-				size: size === "small" ? size : "medium",
-				color: iconColor,
-				type: iconType,
-				icon,
-				style: { color: iconColor }
-			})
-		})
-	});
-	if (type === "action") return /* @__PURE__ */ jsx(IconButton, {
+	const tokenComponent = /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(Ellipse, {
+		variant,
+		size,
+		color,
+		...IconEllipseProps
+	}, type === "letter" ? /* @__PURE__ */ React$1.createElement(Typography, {
+		variant: "body1",
+		className: classes.letter
+	}, letter.toUpperCase()) : /* @__PURE__ */ React$1.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	})));
+	if (type === "action") return /* @__PURE__ */ React$1.createElement(IconButton, {
 		classes: { root: classes.buttonRoot },
-		onClick,
-		children: /* @__PURE__ */ jsx(UnityFluentIcon, {
-			size: size === "small" ? size : "medium",
-			color: iconColor,
-			type: iconType,
-			icon,
-			style: { color: iconColor }
-		})
-	});
+		onClick
+	}, /* @__PURE__ */ React$1.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	}));
 	return tokenComponent;
 };
 Token.propTypes = {
@@ -1015,17 +970,13 @@ const useStyles$15 = makeStyles((theme) => ({
 }));
 const AmbientToggleButton = ({ children, value, ariaLabel, onClick,...otherProps }) => {
 	const classes = useStyles$15();
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsx(ToggleButton, {
-			classes: { root: classes.buttonRoot },
-			value,
-			"aria-label": ariaLabel,
-			onClick,
-			...otherProps,
-			children
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(ToggleButton, {
+		classes: { root: classes.buttonRoot },
+		value,
+		"aria-label": ariaLabel,
+		onClick,
+		...otherProps
+	}, children));
 };
 AmbientToggleButton.propTypes = {
 	children: PropTypes.node,
@@ -1100,24 +1051,23 @@ const AmbientToggleButtonGroupDefault = forwardRef(function AmbientToggleButton$
 		if (!onChange) return;
 		onChange(event, value === buttonValue ? null : buttonValue);
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ React$1.createElement("div", {
 		role: "group",
 		className: clsx(classes.root, { [classes.vertical]: orientation === "vertical" }, className),
 		ref,
-		...other,
-		children: Children.map(children, (child) => {
-			if (!isValidElement(child)) return null;
-			if (process.env.NODE_ENV !== "production") {
-				if (isFragment(child)) console.error(["Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
-			}
-			return cloneElement(child, {
-				className: clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], child.props.className),
-				onChange: exclusive ? handleExclusiveChange : handleChange,
-				selected: child.props.selected === void 0 ? isValueSelected(child.props.value, value) : child.props.selected,
-				size: child.props.size || size
-			});
-		})
-	});
+		...other
+	}, Children.map(children, (child) => {
+		if (!isValidElement(child)) return null;
+		if (process.env.NODE_ENV !== "production") {
+			if (isFragment(child)) console.error(["Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
+		}
+		return cloneElement(child, {
+			className: clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], child.props.className),
+			onChange: exclusive ? handleExclusiveChange : handleChange,
+			selected: child.props.selected === void 0 ? isValueSelected(child.props.value, value) : child.props.selected,
+			size: child.props.size || size
+		});
+	}));
 });
 AmbientToggleButtonGroupDefault.propTypes = {
 	children: PropTypes.node,
@@ -1133,7 +1083,12 @@ AmbientToggleButtonGroupDefault.propTypes = {
 	]),
 	value: PropTypes.any
 };
-var AmbientToggleButtonGroupDefault_default = withStyles$1(styles, { name: "MuiToggleButtonGroup" })(AmbientToggleButtonGroupDefault);
+/**
+* Explicitly cast the HOC to any to avoid non-portable inferred React types in declaration output.
+* @type {any}
+*/
+const AmbientToggleButtonGroupDefaultExport = withStyles$1(styles, { name: "MuiToggleButtonGroup" })(AmbientToggleButtonGroupDefault);
+var AmbientToggleButtonGroupDefault_default = AmbientToggleButtonGroupDefaultExport;
 
 //#endregion
 //#region src/UI/templates/ui/GridGroupingSidebar.jsx
@@ -1159,59 +1114,44 @@ const GridGroupingSidebar = ({ groupItem, expandClick, collapseClick, closeClick
 		setView(nextView);
 	};
 	const GroupItem = ({ label, clear }) => {
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Token, {
+		return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Token, {
 			icon: clear ? ChromeCloseIcon : AssessmentGroupIcon,
 			color: "trigger",
 			size: "small",
 			variant: "filled",
 			type: "icon"
-		}), /* @__PURE__ */ jsxs(Typography, {
+		}), /* @__PURE__ */ React$1.createElement(Typography, {
 			variant: "caption",
-			style: { color: "black" },
-			children: [
-				" ",
-				label,
-				" "
-			]
-		})] });
+			style: { color: "black" }
+		}, " ", label, " "));
 	};
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsxs(GridSidebarContainer, {
-			color,
-			height,
-			children: [/* @__PURE__ */ jsx(GridGroupingHeader, {
-				expandClick,
-				collapseClick,
-				closeClick
-			}), /* @__PURE__ */ jsx("div", {
-				className: classes.groupActionContainer,
-				children: /* @__PURE__ */ jsxs(AmbientToggleButtonGroupDefault_default, {
-					orientation: "vertical",
-					value: view,
-					exclusive: true,
-					onChange: handleChange,
-					className: classes.buttonGroupWrapper,
-					children: [groupingData.map((item) => {
-						return /* @__PURE__ */ jsx(AmbientToggleButton, {
-							value: item.value,
-							"aria-label": item.label,
-							onClick: () => groupItem(item.groupItem),
-							children: /* @__PURE__ */ jsx(GroupItem, { label: item.label })
-						});
-					}), /* @__PURE__ */ jsx(AmbientToggleButton, {
-						value: "noGroups",
-						"aria-label": "noGroups",
-						onClick: closeClick,
-						children: /* @__PURE__ */ jsx(GroupItem, {
-							label: "No Groups",
-							clear: true
-						})
-					})]
-				})
-			})]
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(GridSidebarContainer, {
+		color,
+		height
+	}, /* @__PURE__ */ React$1.createElement(GridGroupingHeader, {
+		expandClick,
+		collapseClick,
+		closeClick
+	}), /* @__PURE__ */ React$1.createElement("div", { className: classes.groupActionContainer }, /* @__PURE__ */ React$1.createElement(AmbientToggleButtonGroupDefault_default, {
+		orientation: "vertical",
+		value: view,
+		exclusive: true,
+		onChange: handleChange,
+		className: classes.buttonGroupWrapper
+	}, groupingData.map((item) => {
+		return /* @__PURE__ */ React$1.createElement(AmbientToggleButton, {
+			value: item.value,
+			"aria-label": item.label,
+			onClick: () => groupItem(item.groupItem)
+		}, /* @__PURE__ */ React$1.createElement(GroupItem, { label: item.label }));
+	}), /* @__PURE__ */ React$1.createElement(AmbientToggleButton, {
+		value: "noGroups",
+		"aria-label": "noGroups",
+		onClick: closeClick
+	}, /* @__PURE__ */ React$1.createElement(GroupItem, {
+		label: "No Groups",
+		clear: true
+	}))))));
 };
 GridGroupingSidebar.propTypes = {
 	groupItem: PropTypes.func,
@@ -1244,41 +1184,28 @@ const SplitButton = (props) => {
 	const setAnchorEl = useCallback((ref) => {
 		if (ref) popupState.setAnchorEl(ref);
 	}, []);
-	return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs(ButtonGroup, {
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ButtonGroup, {
 		variant,
 		color,
 		size,
 		ref: setAnchorEl,
-		"aria-label": ariaLabel,
-		children: [/* @__PURE__ */ jsx(Button, {
-			onClick: firstItem?.props?.onClick,
-			children: label || firstItem?.props?.children
-		}), /* @__PURE__ */ jsx(Button, {
-			...bindTrigger(popupState),
-			className: classes.arrowButtonRoot,
-			color,
-			size: "small",
-			"aria-expanded": popupState.isOpen ? true : void 0,
-			children: /* @__PURE__ */ jsx(ArrowDropDown, {})
-		})]
-	}), /* @__PURE__ */ jsx(Popper, {
+		"aria-label": ariaLabel
+	}, /* @__PURE__ */ React$1.createElement(Button, { onClick: firstItem?.props?.onClick }, label || firstItem?.props?.children), /* @__PURE__ */ React$1.createElement(Button, {
+		...bindTrigger(popupState),
+		className: classes.arrowButtonRoot,
+		color,
+		size: "small",
+		"aria-expanded": popupState.isOpen ? true : void 0
+	}, /* @__PURE__ */ React$1.createElement(ArrowDropDown, null))), /* @__PURE__ */ React$1.createElement(Popper, {
 		...bindPopper(popupState),
 		role: void 0,
 		transition: true,
 		disablePortal: true,
-		className: classes.menu,
-		children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx(Grow, {
-			...TransitionProps,
-			style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" },
-			children: /* @__PURE__ */ jsx(Paper, {
-				className: classes.paper,
-				children: /* @__PURE__ */ jsx(ClickAwayListener, {
-					onClickAway: popupState.close,
-					children: /* @__PURE__ */ jsx(MenuList, { children })
-				})
-			})
-		})
-	})] });
+		className: classes.menu
+	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React$1.createElement(Grow, {
+		...TransitionProps,
+		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
+	}, /* @__PURE__ */ React$1.createElement(Paper, { className: classes.paper }, /* @__PURE__ */ React$1.createElement(ClickAwayListener, { onClickAway: popupState.close }, /* @__PURE__ */ React$1.createElement(MenuList, null, children))))));
 };
 
 //#endregion
@@ -1348,58 +1275,26 @@ const AgTableButtons = (props) => {
 	}, [gridColumnApi]);
 	const autoSizeAllWithHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
 	const autoSizeAllWithoutHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
-	return /* @__PURE__ */ jsx(Box, {
-		mb: 1,
-		children: /* @__PURE__ */ jsxs(Grid, {
-			container: true,
-			direction: "row",
-			spacing: 1,
-			justify: "flex-end",
-			children: [
-				/* @__PURE__ */ jsx(Grid, {
-					item: true,
-					children: /* @__PURE__ */ jsx(Button, {
-						variant: "outlined",
-						size: "small",
-						onClick: sizeToFit,
-						children: "Size to Fit"
-					})
-				}),
-				/* @__PURE__ */ jsx(Grid, {
-					item: true,
-					children: /* @__PURE__ */ jsxs(SplitButton, {
-						popupName: "auto-size",
-						variant: "outlined",
-						size: "small",
-						label: "Auto-Size",
-						children: [/* @__PURE__ */ jsx(MenuItem, {
-							onClick: autoSizeAllWithHeader,
-							children: "All"
-						}), /* @__PURE__ */ jsx(MenuItem, {
-							onClick: autoSizeAllWithoutHeader,
-							children: "Skip Header"
-						})]
-					})
-				}),
-				/* @__PURE__ */ jsx(Grid, {
-					item: true,
-					children: /* @__PURE__ */ jsxs(SplitButton, {
-						popupName: "export",
-						variant: "outlined",
-						size: "small",
-						label: "Export",
-						children: [/* @__PURE__ */ jsx(MenuItem, {
-							onClick: exportToExcel,
-							children: "Excel"
-						}), /* @__PURE__ */ jsx(MenuItem, {
-							onClick: exportToCSV,
-							children: "CSV"
-						})]
-					})
-				})
-			]
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement(Box, { mb: 1 }, /* @__PURE__ */ React$1.createElement(Grid, {
+		container: true,
+		direction: "row",
+		spacing: 1,
+		justify: "flex-end"
+	}, /* @__PURE__ */ React$1.createElement(Grid, { item: true }, /* @__PURE__ */ React$1.createElement(Button, {
+		variant: "outlined",
+		size: "small",
+		onClick: sizeToFit
+	}, "Size to Fit")), /* @__PURE__ */ React$1.createElement(Grid, { item: true }, /* @__PURE__ */ React$1.createElement(SplitButton, {
+		popupName: "auto-size",
+		variant: "outlined",
+		size: "small",
+		label: "Auto-Size"
+	}, /* @__PURE__ */ React$1.createElement(MenuItem, { onClick: autoSizeAllWithHeader }, "All"), /* @__PURE__ */ React$1.createElement(MenuItem, { onClick: autoSizeAllWithoutHeader }, "Skip Header"))), /* @__PURE__ */ React$1.createElement(Grid, { item: true }, /* @__PURE__ */ React$1.createElement(SplitButton, {
+		popupName: "export",
+		variant: "outlined",
+		size: "small",
+		label: "Export"
+	}, /* @__PURE__ */ React$1.createElement(MenuItem, { onClick: exportToExcel }, "Excel"), /* @__PURE__ */ React$1.createElement(MenuItem, { onClick: exportToCSV }, "CSV")))));
 };
 /**
 * AgGrid with tweaks
@@ -1423,16 +1318,13 @@ const AgTable = (props) => {
 	const onGridSizeChanged = () => {
 		if (props.dynamicSizing) props.api?.sizeColumnsToFit();
 	};
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("ag-theme-material", classes.root, className),
-		children: /* @__PURE__ */ jsx(AgGridReact, {
-			...props,
-			modules,
-			onGridSizeChanged,
-			getRowHeight: rowHeightFunction,
-			className: classes.AgGrid
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: clsx("ag-theme-material", classes.root, className) }, /* @__PURE__ */ React$1.createElement(AgGridReact, {
+		...props,
+		modules,
+		onGridSizeChanged,
+		getRowHeight: rowHeightFunction,
+		className: classes.AgGrid
+	}));
 };
 
 //#endregion
@@ -1475,121 +1367,82 @@ const useStyles$11 = makeStyles((theme) => ({
 const GridActionBar = (props) => {
 	const classes = useStyles$11(props);
 	const { children, onChange, handleChange, value, exportCSV, exportExcel, exportPDF, fitClick, expandClick, clearClick, exportClick, saveGridConfig, deleteGridConfig, clearGridConfig, title, hideFitGrid = false, hideExpandGrid = false, hideExportGrid = false, hideRemoveFilters = false, hideFilterTab = false, hideGroupTab = false, hideColumnTab = false, hideSearchBar = false } = props;
-	const gridControlsExport = /* @__PURE__ */ jsx("div", {});
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.title,
-				children: [title && /* @__PURE__ */ jsxs(Typography, {
-					variant: "h6",
-					style: {
-						overflow: "hidden",
-						whiteSpace: "nowrap",
-						textOverflow: "ellipsis"
-					},
-					children: [
-						" ",
-						title,
-						" "
-					]
-				}), !hideSearchBar && /* @__PURE__ */ jsx("div", {
-					style: {
-						flex: 1,
-						marginLeft: 16,
-						marginRight: 16,
-						marginTop: -16
-					},
-					children: /* @__PURE__ */ jsx(AmbientTextField, {
-						title,
-						onChange,
-						InputProps: {
-							type: "search",
-							startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
-								position: "start",
-								children: /* @__PURE__ */ jsx(SearchIcon, {})
-							})
-						}
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", { children: [" ", gridControlsExport] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.controls,
-				children: [
-					saveGridConfig && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: SaveIcon,
-						tooltip: "Save Grid Configuration",
-						ariaLabel: "Save Grid Configuration",
-						onClick: saveGridConfig
-					}),
-					deleteGridConfig && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: DeleteIcon,
-						tooltip: "Delete Grid Configuration",
-						ariaLabel: "Delete Grid Configuration",
-						onClick: deleteGridConfig
-					}),
-					clearGridConfig && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: ClearIcon,
-						tooltip: "Clear Grid Configuration",
-						ariaLabel: "Clear Grid Configuration",
-						onClick: clearGridConfig
-					}),
-					!hideFitGrid && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: CombineIcon,
-						tooltip: "Fit Grid",
-						ariaLabel: "Fit Grid",
-						onClick: fitClick
-					}),
-					!hideExpandGrid && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: ExportIcon,
-						tooltip: "Expand Grid",
-						ariaLabel: "Expand Grid",
-						onClick: expandClick
-					}),
-					!hideExportGrid && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: DownloadIcon,
-						tooltip: "Export Grid",
-						ariaLabel: "Export Grid",
-						onClick: exportClick
-					}),
-					!hideRemoveFilters && /* @__PURE__ */ jsx(AmbientTokenButton, {
-						iconClassName: classes.icon,
-						icon: BlockedIcon,
-						tooltip: "Remove Filters",
-						ariaLabel: "Remove Filters",
-						onClick: clearClick
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs(Tabs, {
-				value,
-				onChange: handleChange,
-				"aria-label": "basic tabs example",
-				children: [
-					!hideFilterTab && /* @__PURE__ */ jsx(Tab, {
-						label: "Filter",
-						classes: { root: classes.tabRoot }
-					}),
-					!hideGroupTab && /* @__PURE__ */ jsx(Tab, {
-						label: "Group",
-						classes: { root: classes.tabRoot }
-					}),
-					!hideColumnTab && /* @__PURE__ */ jsx(Tab, {
-						label: "Column",
-						classes: { root: classes.tabRoot }
-					})
-				]
-			}),
-			children
-		]
-	});
+	const gridControlsExport = /* @__PURE__ */ React$1.createElement("div", null);
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React$1.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React$1.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16
+	} }, /* @__PURE__ */ React$1.createElement(AmbientTextField, {
+		title,
+		onChange,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React$1.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React$1.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React$1.createElement("div", null, " ", gridControlsExport), /* @__PURE__ */ React$1.createElement("div", { className: classes.controls }, saveGridConfig && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: SaveIcon,
+		tooltip: "Save Grid Configuration",
+		ariaLabel: "Save Grid Configuration",
+		onClick: saveGridConfig
+	}), deleteGridConfig && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DeleteIcon,
+		tooltip: "Delete Grid Configuration",
+		ariaLabel: "Delete Grid Configuration",
+		onClick: deleteGridConfig
+	}), clearGridConfig && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ClearIcon,
+		tooltip: "Clear Grid Configuration",
+		ariaLabel: "Clear Grid Configuration",
+		onClick: clearGridConfig
+	}), !hideFitGrid && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: CombineIcon,
+		tooltip: "Fit Grid",
+		ariaLabel: "Fit Grid",
+		onClick: fitClick
+	}), !hideExpandGrid && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ExportIcon,
+		tooltip: "Expand Grid",
+		ariaLabel: "Expand Grid",
+		onClick: expandClick
+	}), !hideExportGrid && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DownloadIcon,
+		tooltip: "Export Grid",
+		ariaLabel: "Export Grid",
+		onClick: exportClick
+	}), !hideRemoveFilters && /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: BlockedIcon,
+		tooltip: "Remove Filters",
+		ariaLabel: "Remove Filters",
+		onClick: clearClick
+	})), /* @__PURE__ */ React$1.createElement(Tabs, {
+		value,
+		onChange: handleChange,
+		"aria-label": "basic tabs example"
+	}, !hideFilterTab && /* @__PURE__ */ React$1.createElement(Tab, {
+		label: "Filter",
+		classes: { root: classes.tabRoot }
+	}), !hideGroupTab && /* @__PURE__ */ React$1.createElement(Tab, {
+		label: "Group",
+		classes: { root: classes.tabRoot }
+	}), !hideColumnTab && /* @__PURE__ */ React$1.createElement(Tab, {
+		label: "Column",
+		classes: { root: classes.tabRoot }
+	})), children);
 };
 GridActionBar.propTypes = {
 	title: PropTypes.string,
@@ -1624,28 +1477,19 @@ const useStyles$10 = makeStyles((theme) => ({
 const AmbientChipButton = forwardRef(function AmbientChipButton$1(props, ref) {
 	const { tooltip, label, onClick, icon, iconClassName, className, labelClassName, otherProps, id = "chip-button", udprecordid } = props;
 	const classes = useStyles$10(props);
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.root,
-		children: /* @__PURE__ */ jsx(Tooltip, {
-			title: tooltip,
-			children: /* @__PURE__ */ jsx(Chip, {
-				id,
-				udprecordid,
-				ref,
-				className: className ?? classes.chipRoot,
-				label: /* @__PURE__ */ jsx(Typography, {
-					className: labelClassName ?? classes.label,
-					children: label
-				}),
-				onClick,
-				icon: icon && /* @__PURE__ */ jsx(FluentIcon, {
-					className: iconClassName ?? classes.icon,
-					component: icon
-				}),
-				...otherProps
-			})
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.root }, /* @__PURE__ */ React$1.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React$1.createElement(Chip, {
+		id,
+		udprecordid,
+		ref,
+		className: className ?? classes.chipRoot,
+		label: /* @__PURE__ */ React$1.createElement(Typography, { className: labelClassName ?? classes.label }, label),
+		onClick,
+		icon: icon && /* @__PURE__ */ React$1.createElement(FluentIcon, {
+			className: iconClassName ?? classes.icon,
+			component: icon
+		}),
+		...otherProps
+	})));
 });
 AmbientChipButton.propTypes = {
 	tooltip: PropTypes.string.isRequired,
@@ -1885,116 +1729,86 @@ const GridPrimaryBar = (props) => {
 			if (event.key === "Enter") onSearchKeyDown();
 		}
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.title,
-				children: [title && /* @__PURE__ */ jsxs(Typography, {
-					variant: "h6",
-					style: {
-						overflow: "hidden",
-						whiteSpace: "nowrap",
-						textOverflow: "ellipsis"
-					},
-					children: [
-						" ",
-						title,
-						" "
-					]
-				}), !hideSearchBar && /* @__PURE__ */ jsx("div", {
-					style: {
-						flex: 1,
-						marginLeft: 16,
-						marginRight: 16,
-						marginTop: -16,
-						maxWidth: 300
-					},
-					children: /* @__PURE__ */ jsx(AmbientTextField, {
-						title,
-						onChange,
-						onKeyDown: handleCustomKeyDown,
-						InputProps: {
-							type: "search",
-							startAdornment: /* @__PURE__ */ jsx(InputAdornment, {
-								position: "start",
-								children: /* @__PURE__ */ jsx(SearchIcon, {})
-							})
-						}
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: classes.controls,
-				children: [actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ jsx(AmbientTokenButton, {
-					id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
-					udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
-					icon: button.icon ?? AppIconDefaultIcon,
-					tooltip: button.tooltip,
-					onClick: button.onClick,
-					ariaLabel: button.label,
-					iconClassName: button.iconClassName
-				}) : /* @__PURE__ */ jsx(AmbientChipButton, {
-					id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
-					udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
-					icon: button.icon ?? AppIconDefaultIcon,
-					tooltip: button.tooltip,
-					label: button.label,
-					onClick: button.onClick,
-					background: button.background
-				}))), !!menuActionButtons.length && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(AmbientTokenButton, {
-					id,
-					icon: MoreVerticalIcon,
-					tooltip: "More Actions",
-					ariaLabel: "More Actions",
-					onClick: handlePopoverClick,
-					iconClassName: classes.icon
-				}), /* @__PURE__ */ jsx(Popover, {
-					id,
-					open,
-					anchorEl,
-					onClose: handlePopoverClose,
-					anchorOrigin: {
-						vertical: "bottom",
-						horizontal: "right"
-					},
-					transformOrigin: {
-						vertical: "top",
-						horizontal: "right"
-					},
-					children: menuActionButtons.slice(0).reverse().map((button) => {
-						if (!button.visible) return null;
-						return /* @__PURE__ */ jsxs(MenuItem, {
-							id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
-							udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
-							onClick: button.onClick,
-							style: {
-								display: "flex",
-								justifyContent: "space-between"
-							},
-							children: [/* @__PURE__ */ jsx(Typography, { children: button.label }), /* @__PURE__ */ jsx(FluentIcon, {
-								component: button.icon ?? AppIconDefaultIcon,
-								style: { marginLeft: 7 }
-							})]
-						});
-					})
-				})] })]
-			}),
-			onPrimaryActionClick && /* @__PURE__ */ jsxs(PrimaryActionButton, {
-				onClick: onPrimaryActionClick,
-				id: "udpRecord-GridPrimaryBar-Add",
-				udprecordid: "udpRecord-GridPrimaryBar-Add",
-				disabled: primaryActionDisabled,
-				children: [/* @__PURE__ */ jsx(Typography, {
-					style: { marginLeft: 4 },
-					children: primaryActionLabel ?? "Button"
-				}), /* @__PURE__ */ jsx(FluentIcon, {
-					style: { marginLeft: 7 },
-					component: primaryActionIcon ?? AppIconDefaultIcon
-				})]
-			})
-		]
-	});
+	return /* @__PURE__ */ React$2.createElement("div", { className: classes.root }, /* @__PURE__ */ React$2.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React$2.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React$2.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16,
+		maxWidth: 300
+	} }, /* @__PURE__ */ React$2.createElement(AmbientTextField, {
+		title,
+		onChange,
+		onKeyDown: handleCustomKeyDown,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React$2.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React$2.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React$2.createElement("div", { className: classes.controls }, actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ React$2.createElement(AmbientTokenButton, {
+		id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		onClick: button.onClick,
+		ariaLabel: button.label,
+		iconClassName: button.iconClassName
+	}) : /* @__PURE__ */ React$2.createElement(AmbientChipButton, {
+		id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		label: button.label,
+		onClick: button.onClick,
+		background: button.background
+	}))), !!menuActionButtons.length && /* @__PURE__ */ React$2.createElement("div", null, /* @__PURE__ */ React$2.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "More Actions",
+		ariaLabel: "More Actions",
+		onClick: handlePopoverClick,
+		iconClassName: classes.icon
+	}), /* @__PURE__ */ React$2.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, menuActionButtons.slice(0).reverse().map((button) => {
+		if (!button.visible) return null;
+		return /* @__PURE__ */ React$2.createElement(MenuItem, {
+			id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			onClick: button.onClick,
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			}
+		}, /* @__PURE__ */ React$2.createElement(Typography, null, button.label), /* @__PURE__ */ React$2.createElement(FluentIcon, {
+			component: button.icon ?? AppIconDefaultIcon,
+			style: { marginLeft: 7 }
+		}));
+	})))), onPrimaryActionClick && /* @__PURE__ */ React$2.createElement(PrimaryActionButton_default, {
+		onClick: onPrimaryActionClick,
+		id: "udpRecord-GridPrimaryBar-Add",
+		udprecordid: "udpRecord-GridPrimaryBar-Add",
+		disabled: primaryActionDisabled
+	}, /* @__PURE__ */ React$2.createElement(Typography, { style: { marginLeft: 4 } }, primaryActionLabel ?? "Button"), /* @__PURE__ */ React$2.createElement(FluentIcon, {
+		style: { marginLeft: 7 },
+		component: primaryActionIcon ?? AppIconDefaultIcon
+	})));
 };
 GridPrimaryBar.propTypes = {
 	title: PropTypes.string,
@@ -2074,65 +1888,43 @@ const useStyles$8 = makeStyles((theme) => ({
 const FluentDialog = (props) => {
 	const classes = useStyles$8(props);
 	const { title, message, actionOne, actionTwo, actionThree, labelOne, labelTwo, labelThree, open, handleClose, ariaLabelledby, ariaDescribedby, titleId, descriptionId, children, buttonOneHidden = false, buttonTwoHidden = false, buttonThreeHidden = true, disableOne, disableTwo, disableThree, progress, enableLeftBorderStyling = false,...otherProps } = props;
-	return /* @__PURE__ */ jsxs(Dialog, {
+	return /* @__PURE__ */ React$1.createElement(Dialog, {
 		open,
 		onClose: handleClose,
 		"aria-labelledby": ariaLabelledby,
 		"aria-describedby": ariaDescribedby,
 		...otherProps,
-		classes: { paper: classes.paper },
-		children: [
-			/* @__PURE__ */ jsx("div", { className: enableLeftBorderStyling ? classes.dialogLeftBorder : "" }),
-			/* @__PURE__ */ jsx(DialogTitle, {
-				className: classes.title,
-				id: titleId,
-				children: title
-			}),
-			/* @__PURE__ */ jsxs(DialogContent, {
-				className: classes.dialogContent,
-				children: [/* @__PURE__ */ jsx(DialogContentText, {
-					id: descriptionId,
-					children: message
-				}), children]
-			}),
-			/* @__PURE__ */ jsxs(DialogActions, {
-				className: classes.actions,
-				disableSpacing: true,
-				children: [
-					!buttonThreeHidden && /* @__PURE__ */ jsx(Button, {
-						id: "udpRecord-FluentDialog-Confirm",
-						udprecordid: "udpRecord-FluentDialog-Confirm",
-						onClick: actionThree,
-						color: "secondary",
-						disabled: disableThree,
-						className: classes.button,
-						children: labelThree
-					}),
-					!buttonTwoHidden && /* @__PURE__ */ jsx(Button, {
-						id: "udpRecord-FluentDialog-Confirm",
-						udprecordid: "udpRecord-FluentDialog-Confirm",
-						onClick: actionTwo,
-						color: "secondary",
-						disabled: disableTwo,
-						className: classes.button,
-						children: labelTwo
-					}),
-					!buttonOneHidden && /* @__PURE__ */ jsx(PrimaryActionButton, {
-						id: "udpRecord-FluentDialog-Cancel",
-						udprecordid: "udpRecord-FluentDialog-Cancel",
-						disabled: disableOne,
-						onClick: actionOne,
-						children: labelOne
-					})
-				]
-			}),
-			progress && /* @__PURE__ */ jsx(LinearProgress, {
-				color: "secondary",
-				value: progress,
-				...otherProps
-			})
-		]
-	});
+		classes: { paper: classes.paper }
+	}, /* @__PURE__ */ React$1.createElement("div", { className: enableLeftBorderStyling ? classes.dialogLeftBorder : "" }), /* @__PURE__ */ React$1.createElement(DialogTitle, {
+		className: classes.title,
+		id: titleId
+	}, title), /* @__PURE__ */ React$1.createElement(DialogContent, { className: classes.dialogContent }, /* @__PURE__ */ React$1.createElement(DialogContentText, { id: descriptionId }, message), children), /* @__PURE__ */ React$1.createElement(DialogActions, {
+		className: classes.actions,
+		disableSpacing: true
+	}, !buttonThreeHidden && /* @__PURE__ */ React$1.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionThree,
+		color: "secondary",
+		disabled: disableThree,
+		className: classes.button
+	}, labelThree), !buttonTwoHidden && /* @__PURE__ */ React$1.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionTwo,
+		color: "secondary",
+		disabled: disableTwo,
+		className: classes.button
+	}, labelTwo), !buttonOneHidden && /* @__PURE__ */ React$1.createElement(PrimaryActionButton, {
+		id: "udpRecord-FluentDialog-Cancel",
+		udprecordid: "udpRecord-FluentDialog-Cancel",
+		disabled: disableOne,
+		onClick: actionOne
+	}, labelOne)), progress && /* @__PURE__ */ React$1.createElement(LinearProgress, {
+		color: "secondary",
+		value: progress,
+		...otherProps
+	}));
 };
 
 //#endregion
@@ -2303,6 +2095,9 @@ const useStyles$7 = makeStyles((theme) => ({
 	},
 	infoHeader: { color: "grey" }
 }));
+/**
+* @param {PropTypes.InferProps<typeof SaveViewFormDialog.propTypes>} props
+*/
 const SaveViewFormDialog = (props) => {
 	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
 	const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
@@ -2338,93 +2133,64 @@ const SaveViewFormDialog = (props) => {
 			handleErrorSnackbar(error, t("Failed to Save View"));
 		});
 	};
-	return /* @__PURE__ */ jsxs(FluentDialog, {
+	return /* @__PURE__ */ React.createElement(FluentDialog, {
 		title: t("Save New View"),
 		open,
 		handleClose,
 		labelOne: t("Save View"),
 		labelTwo: t("Cancel"),
 		actionOne: triggerSaveView,
-		actionTwo: handleClose,
-		children: [/* @__PURE__ */ jsxs(Box, {
-			display: "flex",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: classes.column,
-					children: [/* @__PURE__ */ jsx(Typography, {
-						className: classes.infoHeader,
-						align: "left",
-						children: t("Tenant")
-					}), /* @__PURE__ */ jsx(Typography, {
-						variant: "subtitle2",
-						align: "left",
-						children: tenant ?? "--"
-					})]
-				}),
-				/* @__PURE__ */ jsx(Divider, {
-					flexItem: true,
-					orientation: "vertical"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: classes.column,
-					children: [/* @__PURE__ */ jsx(Typography, {
-						className: classes.infoHeader,
-						align: "left",
-						children: t("Application")
-					}), /* @__PURE__ */ jsx(Typography, {
-						variant: "subtitle2",
-						align: "left",
-						children: application ?? "--"
-					})]
-				}),
-				/* @__PURE__ */ jsx(Divider, {
-					flexItem: true,
-					orientation: "vertical"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: classes.column,
-					children: [/* @__PURE__ */ jsx(Typography, {
-						className: classes.infoHeader,
-						align: "left",
-						children: t("Entity")
-					}), /* @__PURE__ */ jsx(Typography, {
-						variant: "subtitle2",
-						align: "left",
-						children: domain ?? "--"
-					})]
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: classes.saveForm,
-			children: /* @__PURE__ */ jsxs(Form, {
-				onSubmit: saveView,
-				ref: saveViewFormRef,
-				children: [/* @__PURE__ */ jsx(Field, {
-					type: "text",
-					component: AmbientTextField,
-					name: "name",
-					id: "name",
-					label: t("Name"),
-					fullWidth: true,
-					required: true,
-					style: {
-						marginBottom: 20,
-						marginTop: 10
-					}
-				}), /* @__PURE__ */ jsx(FormControlLabel, {
-					control: /* @__PURE__ */ jsx(Field, {
-						component: Switch,
-						name: "private",
-						id: "private",
-						defaultValue: false,
-						type: "checkbox"
-					}),
-					label: t("Private"),
-					labelPlacement: "end"
-				})]
-			})
-		})]
-	});
+		actionTwo: handleClose
+	}, /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Tenant")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, tenant ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Application")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, application ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Entity")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, domain ?? "--"))), /* @__PURE__ */ React.createElement("div", { className: classes.saveForm }, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: saveView,
+		ref: saveViewFormRef
+	}, /* @__PURE__ */ React.createElement(Field, {
+		type: "text",
+		component: AmbientTextField,
+		name: "name",
+		id: "name",
+		label: t("Name"),
+		fullWidth: true,
+		required: true,
+		style: {
+			marginBottom: 20,
+			marginTop: 10
+		}
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: Switch,
+			name: "private",
+			id: "private",
+			defaultValue: false,
+			type: "checkbox"
+		}),
+		label: t("Private"),
+		labelPlacement: "end"
+	}))));
 };
 SaveViewFormDialog.propTypes = {
 	open: PropTypes.bool.isRequired,
@@ -2566,55 +2332,49 @@ const DynamicContainerWithMenu = forwardRef((props, ref) => {
 			resizeObserver.disconnect();
 		};
 	}, [handleSizeChange, outerContainerRef]);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ React$1.createElement("div", {
 		ref: outerContainerRef,
 		style: {
 			width: "100%",
 			overflow: "hidden"
+		}
+	}, /* @__PURE__ */ React$1.createElement("div", {
+		className,
+		ref: containerRef,
+		style: {
+			display: "flex",
+			flexWrap: "noWrap",
+			overflow: "hidden",
+			flexGrow: 1
+		}
+	}, visibleChildren && Children.map(visibleChildren, (child, index) => {
+		return cloneElement(child, {
+			ref: (ref$1) => childrenRefs.current[index] = ref$1,
+			...child.props
+		}, child.props.children);
+	}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ React$1.createElement("div", null, modifiedMenuButton ?? /* @__PURE__ */ React$1.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "Additional Filter Values",
+		ariaLabel: "Additional Filter Values",
+		onClick: handlePopoverClick,
+		iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
+	}), /* @__PURE__ */ React$1.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
 		},
-		children: /* @__PURE__ */ jsxs("div", {
-			className,
-			ref: containerRef,
-			style: {
-				display: "flex",
-				flexWrap: "noWrap",
-				overflow: "hidden",
-				flexGrow: 1
-			},
-			children: [visibleChildren && Children.map(visibleChildren, (child, index) => {
-				return cloneElement(child, {
-					ref: (ref$1) => childrenRefs.current[index] = ref$1,
-					...child.props
-				}, child.props.children);
-			}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ jsxs("div", { children: [modifiedMenuButton ?? /* @__PURE__ */ jsx(AmbientTokenButton, {
-				id,
-				icon: MoreVerticalIcon,
-				tooltip: "Additional Filter Values",
-				ariaLabel: "Additional Filter Values",
-				onClick: handlePopoverClick,
-				iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
-			}), /* @__PURE__ */ jsx(Popover, {
-				id,
-				open,
-				anchorEl,
-				onClose: handlePopoverClose,
-				anchorOrigin: {
-					vertical: "bottom",
-					horizontal: "right"
-				},
-				transformOrigin: {
-					vertical: "top",
-					horizontal: "right"
-				},
-				children: Children.map(menuChildren, (child, index) => {
-					return /* @__PURE__ */ jsx(MenuItem, {
-						onClick: () => handleMenuItemClick(child),
-						children: cloneElement(child, { ...child.props }, child.props.children)
-					});
-				})
-			})] })]
-		})
-	});
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, Children.map(menuChildren, (child, index) => {
+		return /* @__PURE__ */ React$1.createElement(MenuItem, { onClick: () => handleMenuItemClick(child) }, cloneElement(child, { ...child.props }, child.props.children));
+	})))));
 });
 DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
 DynamicContainerWithMenu.propTypes = {
@@ -2749,7 +2509,7 @@ const ChipSection = (props) => {
 			setSelectedFilterChip(null);
 		}
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ React$2.createElement("div", {
 		ref: chipSectionContainerRef,
 		className: classes.wrapper,
 		style: { display: [
@@ -2757,106 +2517,73 @@ const ChipSection = (props) => {
 			additionalFilterChips,
 			viewChips,
 			filterChips
-		].every((arr) => arr.length === 0) ? "none" : "flex" },
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: classes.chipHolder,
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					ref: viewChipsContainerRef,
-					children: viewChips.map((chip, index) => /* @__PURE__ */ jsx(Chip$1, {
-						onDelete: () => handleDelete("view", index),
-						label: chip.label,
-						className: classes.viewChip,
-						icon: /* @__PURE__ */ jsx(StarIcon, {}),
-						size: "small"
-					}, index))
-				}),
-				!isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ jsx(Divider$1, {
-					orientation: "vertical",
-					flexItem: true
-				}),
-				!isEmpty(filterChips) && /* @__PURE__ */ jsxs(DynamicContainerWithMenu, {
-					className: classes.chipHolder,
-					ref: filterChipsContainerRef,
-					children: [selectedFilterChip && /* @__PURE__ */ jsx(Chip$1, {
-						onDelete: handleFilterChipUntoggle,
-						label: selectedFilterChip.label,
-						className: classes.viewChip,
-						size: "small"
-					}), filterChips.map((chip, index) => {
-						if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
-						return /* @__PURE__ */ jsx(Tooltip$1, {
-							title: chip.label,
-							children: /* @__PURE__ */ jsx(Chip$1, {
-								label: /* @__PURE__ */ jsxs("div", {
-									style: {
-										display: "flex",
-										flexWrap: "noWrap"
-									},
-									children: [/* @__PURE__ */ jsx(Typography$1, {
-										noWrap: true,
-										className: chip.value ? classes.filterChipLabel : "",
-										children: chip.label
-									}), /* @__PURE__ */ jsx(Typography$1, {
-										noWrap: true,
-										className: classes.filterChipValue,
-										children: chip.value
-									})]
-								}),
-								className: classes.filterChip,
-								size: "small",
-								onClick: () => handleFilterChipToggle(chip),
-								ref: (el) => chipRefs.current[index] = el
-							}, index)
-						});
-					})]
-				}),
-				!isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ jsx(Divider$1, {
-					orientation: "vertical",
-					flexItem: true
-				}),
-				/* @__PURE__ */ jsx("div", {
-					ref: additionalFilterChipsContainerRef,
-					style: { display: "flex" },
-					children: additionalFilterChips.map((chip, index) => /* @__PURE__ */ jsx(Chip$1, {
-						variant: "outlined",
-						onDelete: () => handleDelete("additionalFilter", index),
-						label: chip.label,
-						className: classes.additionalFilterChip,
-						size: "small"
-					}, index))
-				})
-			]
-		}), !hideKpiSection && /* @__PURE__ */ jsx("div", {
-			className: classes.KPI,
-			ref: kpiContainerRef,
-			children: kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-				className: classes.kpiItem,
-				id: index,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: classes.kpiLabel,
-					children: abbreviateLabel(kpi.label) && /* @__PURE__ */ jsx(Tooltip$1, {
-						title: kpi.label,
-						arrow: true,
-						children: /* @__PURE__ */ jsx(Typography$1, {
-							noWrap: true,
-							children: /* @__PURE__ */ jsxs("span", { children: [kpi.label, ":"] })
-						})
-					}) || /* @__PURE__ */ jsx(Fragment$1, { children: kpi.label })
-				}), /* @__PURE__ */ jsx("span", {
-					className: classes.kpiValue,
-					children: /* @__PURE__ */ jsx(Tooltip$1, {
-						title: kpi.value,
-						arrow: true,
-						children: /* @__PURE__ */ jsx("span", { children: abbrNum(kpi.value, 1) })
-					})
-				})]
-			}), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ jsx(Divider$1, {
-				orientation: "vertical",
-				flexItem: true
-			})] }))
-		})]
-	});
+		].every((arr) => arr.length === 0) ? "none" : "flex" }
+	}, /* @__PURE__ */ React$2.createElement("div", { className: classes.chipHolder }, /* @__PURE__ */ React$2.createElement("div", { ref: viewChipsContainerRef }, viewChips.map((chip, index) => /* @__PURE__ */ React$2.createElement(Chip$1, {
+		onDelete: () => handleDelete("view", index),
+		key: index,
+		label: chip.label,
+		className: classes.viewChip,
+		icon: /* @__PURE__ */ React$2.createElement(StarIcon, null),
+		size: "small"
+	}))), !isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ React$2.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), !isEmpty(filterChips) && /* @__PURE__ */ React$2.createElement(DynamicContainerWithMenu, {
+		className: classes.chipHolder,
+		ref: filterChipsContainerRef
+	}, selectedFilterChip && /* @__PURE__ */ React$2.createElement(Chip$1, {
+		onDelete: handleFilterChipUntoggle,
+		label: selectedFilterChip.label,
+		className: classes.viewChip,
+		size: "small"
+	}), filterChips.map((chip, index) => {
+		if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
+		return /* @__PURE__ */ React$2.createElement(Tooltip$1, { title: chip.label }, /* @__PURE__ */ React$2.createElement(Chip$1, {
+			key: index,
+			label: /* @__PURE__ */ React$2.createElement("div", { style: {
+				display: "flex",
+				flexWrap: "noWrap"
+			} }, /* @__PURE__ */ React$2.createElement(Typography$1, {
+				noWrap: true,
+				className: chip.value ? classes.filterChipLabel : ""
+			}, chip.label), /* @__PURE__ */ React$2.createElement(Typography$1, {
+				noWrap: true,
+				className: classes.filterChipValue
+			}, chip.value)),
+			className: classes.filterChip,
+			size: "small",
+			onClick: () => handleFilterChipToggle(chip),
+			ref: (el) => chipRefs.current[index] = el
+		}));
+	})), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ React$2.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), /* @__PURE__ */ React$2.createElement("div", {
+		ref: additionalFilterChipsContainerRef,
+		style: { display: "flex" }
+	}, additionalFilterChips.map((chip, index) => /* @__PURE__ */ React$2.createElement(Chip$1, {
+		variant: "outlined",
+		onDelete: () => handleDelete("additionalFilter", index),
+		key: index,
+		label: chip.label,
+		className: classes.additionalFilterChip,
+		size: "small"
+	})))), !hideKpiSection && /* @__PURE__ */ React$2.createElement("div", {
+		className: classes.KPI,
+		ref: kpiContainerRef
+	}, kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, /* @__PURE__ */ React$2.createElement("div", {
+		className: classes.kpiItem,
+		id: index
+	}, /* @__PURE__ */ React$2.createElement("span", { className: classes.kpiLabel }, abbreviateLabel(kpi.label) && /* @__PURE__ */ React$2.createElement(Tooltip$1, {
+		title: kpi.label,
+		arrow: true
+	}, /* @__PURE__ */ React$2.createElement(Typography$1, { noWrap: true }, /* @__PURE__ */ React$2.createElement("span", null, kpi.label, ":"))) || /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, kpi.label)), /* @__PURE__ */ React$2.createElement("span", { className: classes.kpiValue }, /* @__PURE__ */ React$2.createElement(Tooltip$1, {
+		title: kpi.value,
+		arrow: true
+	}, /* @__PURE__ */ React$2.createElement("span", null, abbrNum(kpi.value, 1))))), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ React$2.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	})))));
 };
 ChipSection.propTypes = {
 	filterChips: PropTypes.arrayOf(PropTypes.shape({
@@ -2886,20 +2613,16 @@ const IconButtonWithTooltip = ({ icon, title, disabled, onClick, className, flue
 		onClick: disabled ? void 0 : onClick
 	};
 	const classes = useStyles$4();
-	return /* @__PURE__ */ jsx(Tooltip, {
-		title,
-		children: /* @__PURE__ */ jsx(IconButton, {
-			id,
-			udprecordid,
-			className: `${className} ${classes.root}`,
-			...other,
-			...adjustedButtonProps,
-			children: /* @__PURE__ */ jsx(FluentIcon, {
-				className: fluentIconClassName,
-				component: icon
-			})
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement(Tooltip, { title }, /* @__PURE__ */ React$1.createElement(IconButton, {
+		id,
+		udprecordid,
+		className: `${className} ${classes.root}`,
+		...other,
+		...adjustedButtonProps
+	}, /* @__PURE__ */ React$1.createElement(FluentIcon, {
+		className: fluentIconClassName,
+		component: icon
+	})));
 };
 
 //#endregion
@@ -2918,7 +2641,7 @@ const useStyles$3 = makeStyles((theme) => ({
 const ActionItem = memo((props) => {
 	const { icon, title, onClick, disabled, businessObjectKey = "" } = props;
 	const classes = useStyles$3();
-	return /* @__PURE__ */ jsx(IconButtonWithTooltip, {
+	return /* @__PURE__ */ React$1.createElement(IconButtonWithTooltip, {
 		title,
 		className: classes.icon,
 		size: "small",
@@ -3010,47 +2733,40 @@ const ActionsRenderer = memo((props) => {
 		}
 		if (item.getTitle) title = item.getTitle(value);
 		if (item.checkDisabled) disabled = item.checkDisabled(value);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [item.loading && /* @__PURE__ */ jsx("div", {
-			style: {
-				display: "inline-flex",
-				marginRight: 10
-			},
-			children: /* @__PURE__ */ jsx(Skeleton, {
-				className: classes.circularSkeleton,
-				width: 24,
-				height: 40
-			})
-		}), !item.loading && /* @__PURE__ */ jsx(ActionItem, {
+		return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, item.loading && /* @__PURE__ */ React$1.createElement("div", { style: {
+			display: "inline-flex",
+			marginRight: 10
+		} }, /* @__PURE__ */ React$1.createElement(Skeleton, {
+			className: classes.circularSkeleton,
+			width: 24,
+			height: 40
+		})), !item.loading && /* @__PURE__ */ React$1.createElement(ActionItem, {
+			key: `${item.id}-${index}`,
 			title,
 			icon: item.icon,
 			onClick: onClick$1,
 			disabled,
 			businessObjectKey: value?.businessObjectKey
-		}, `${item.id}-${index}`)] });
+		}));
 	});
-	return /* @__PURE__ */ jsxs("div", { children: [
-		displayActions,
-		/* @__PURE__ */ jsx(SideSheet, {
-			open: sheetOpen,
-			onClose: closeSheet,
-			title: sheetItem?.title,
-			width: sheetItem?.width || 600,
-			buttonLabel: sideSheetButtonLabel,
-			onSubmit: sideSheetOnSubmit,
-			children: /* @__PURE__ */ jsx("div", { children: sheetItem?.children })
-		}),
-		/* @__PURE__ */ jsx(FluentDialog, {
-			open: dialogOpen,
-			handleClose: closeDialog,
-			title: dialogItem?.title,
-			message: dialogItem?.message,
-			actionOne: dialogItem?.closeDialog,
-			labelOne: dialogItem?.labelOne,
-			actionTwo: dialogItem?.actionTwo,
-			labelTwo: dialogItem?.labelTwo,
-			progress: dialogItem?.isLoading
-		})
-	] });
+	return /* @__PURE__ */ React$1.createElement("div", null, displayActions, /* @__PURE__ */ React$1.createElement(SideSheet, {
+		open: sheetOpen,
+		onClose: closeSheet,
+		title: sheetItem?.title,
+		width: sheetItem?.width || 600,
+		buttonLabel: sideSheetButtonLabel,
+		onSubmit: sideSheetOnSubmit
+	}, /* @__PURE__ */ React$1.createElement("div", null, sheetItem?.children)), /* @__PURE__ */ React$1.createElement(FluentDialog, {
+		open: dialogOpen,
+		handleClose: closeDialog,
+		title: dialogItem?.title,
+		message: dialogItem?.message,
+		actionOne: dialogItem?.closeDialog,
+		labelOne: dialogItem?.labelOne,
+		actionTwo: dialogItem?.actionTwo,
+		labelTwo: dialogItem?.labelTwo,
+		progress: dialogItem?.isLoading
+	}));
 });
 ActionItem.displayName = "ActionItem";
 ActionsRenderer.displayName = "ActionsRenderer";
@@ -3084,20 +2800,10 @@ const HintPanel = ({ hint, hideHintText }) => {
 	const handleHideHint = () => {
 		setShowHint(false);
 	};
-	return /* @__PURE__ */ jsx("div", {
-		className: classes.hintContainer,
-		children: showHint && /* @__PURE__ */ jsxs("div", {
-			className: classes.hintContent,
-			children: [/* @__PURE__ */ jsx("div", { children: hint }), /* @__PURE__ */ jsx("div", {
-				className: classes.hidehelp,
-				children: /* @__PURE__ */ jsx("button", {
-					className: classes.hideHintButton,
-					onClick: handleHideHint,
-					children: hideHintText
-				})
-			})]
-		})
-	});
+	return /* @__PURE__ */ React$1.createElement("div", { className: classes.hintContainer }, showHint && /* @__PURE__ */ React$1.createElement("div", { className: classes.hintContent }, /* @__PURE__ */ React$1.createElement("div", null, hint), /* @__PURE__ */ React$1.createElement("div", { className: classes.hidehelp }, /* @__PURE__ */ React$1.createElement("button", {
+		className: classes.hideHintButton,
+		onClick: handleHideHint
+	}, hideHintText))));
 };
 HintPanel.propTypes = {
 	hint: PropTypes.string.isRequired,
@@ -3128,7 +2834,7 @@ const GridViewsSideSheet = (props) => {
 		const handleChipClick = () => {
 			onChange(id);
 		};
-		return /* @__PURE__ */ jsx(Chip$1, {
+		return /* @__PURE__ */ React$1.createElement(Chip$1, {
 			label: value === VisibilityTypeEnums.Public ? t("Public") : t("Private"),
 			onClick: handleChipClick,
 			className: value === VisibilityTypeEnums.Public ? classes.publicChip : classes.privateChip,
@@ -3181,7 +2887,7 @@ const GridViewsSideSheet = (props) => {
 			}
 		]
 	};
-	return /* @__PURE__ */ jsxs(SideSheet, {
+	return /* @__PURE__ */ React$1.createElement(SideSheet, {
 		id: "udpRecord-GridViewsSideSheet",
 		udprecordid: "udpRecord-GridViewsSideSheet",
 		open,
@@ -3189,42 +2895,39 @@ const GridViewsSideSheet = (props) => {
 		width: "40%",
 		title: "Select a View",
 		buttonLabel: "Create View",
-		onSubmit: openSaveView,
-		children: [/* @__PURE__ */ jsx("div", {
-			style: { marginBottom: 10 },
-			children: /* @__PURE__ */ jsx(HintPanel, {
-				hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.",
-				hideHintText: "Hide Help"
-			})
-		}), /* @__PURE__ */ jsx(AmbientGridTemplate, {
-			gridOptions,
-			title: "Saved Views",
-			rowData: rowData || [],
-			onGridReady,
-			suppressCellSelection: true,
-			suppressRowClickSelection: true,
-			sideBar: false,
-			pivotMode: false,
-			pivotPanelShow: "never",
-			animateRows: true,
-			pagination: false,
-			api: gApi,
-			useNewHeader: true,
-			hiddenActionButtons: [
-				"saveView",
-				"views",
-				"insights",
-				"importExport",
-				"group",
-				"filter",
-				"columns",
-				"fitGrid",
-				"expandGrid",
-				"clearFilters"
-			]
-		})]
-	});
+		onSubmit: openSaveView
+	}, /* @__PURE__ */ React$1.createElement("div", { style: { marginBottom: 10 } }, /* @__PURE__ */ React$1.createElement(HintPanel, {
+		hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.",
+		hideHintText: "Hide Help"
+	})), /* @__PURE__ */ React$1.createElement(AmbientGridTemplate, {
+		gridOptions,
+		title: "Saved Views",
+		rowData: rowData || [],
+		onGridReady,
+		suppressCellSelection: true,
+		suppressRowClickSelection: true,
+		sideBar: false,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		animateRows: true,
+		pagination: false,
+		api: gApi,
+		useNewHeader: true,
+		hiddenActionButtons: [
+			"saveView",
+			"views",
+			"insights",
+			"importExport",
+			"group",
+			"filter",
+			"columns",
+			"fitGrid",
+			"expandGrid",
+			"clearFilters"
+		]
+	}));
 };
+var GridViewsSideSheet_default = GridViewsSideSheet;
 GridViewsSideSheet.propTypes = {
 	onClose: PropTypes.func.isRequired,
 	open: PropTypes.bool.isRequired,
@@ -3253,60 +2956,52 @@ const BulkActionsGridButton = (props) => {
 	const filterAction = (action) => {
 		return !!domain ? JSON.parse(action?.parameters)?.entityName === domain : true;
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			marginTop: 5,
-			marginLeft: 20
+	return /* @__PURE__ */ React$1.createElement("div", { style: {
+		marginTop: 5,
+		marginLeft: 20
+	} }, /* @__PURE__ */ React$1.createElement(Badge, {
+		badgeContent: numSelectedRows,
+		color: "secondary"
+	}, /* @__PURE__ */ React$1.createElement(FluentButton, {
+		type: "button",
+		onClick: handleBulkActionsClick,
+		variant: "outlined",
+		color: "primary",
+		endIcon: /* @__PURE__ */ React$1.createElement(FluentIcon, {
+			component: ChevronDownIcon,
+			size: "small"
+		})
+	}, "With Selected")), /* @__PURE__ */ React$1.createElement(Popover, {
+		id: "actions",
+		open: Boolean(actionsAnchorEl),
+		anchorEl: actionsAnchorEl,
+		onClose: () => setActionsAnchorEl(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
 		},
-		children: [/* @__PURE__ */ jsx(Badge, {
-			badgeContent: numSelectedRows,
-			color: "secondary",
-			children: /* @__PURE__ */ jsx(FluentButton, {
-				type: "button",
-				onClick: handleBulkActionsClick,
-				variant: "outlined",
-				color: "primary",
-				endIcon: /* @__PURE__ */ jsx(FluentIcon, {
-					component: ChevronDownIcon,
-					size: "small"
-				}),
-				children: "With Selected"
-			})
-		}), /* @__PURE__ */ jsx(Popover, {
-			id: "actions",
-			open: Boolean(actionsAnchorEl),
-			anchorEl: actionsAnchorEl,
-			onClose: () => setActionsAnchorEl(null),
-			anchorOrigin: {
-				vertical: "bottom",
-				horizontal: "right"
-			},
-			transformOrigin: {
-				vertical: "top",
-				horizontal: "right"
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, bulkActions && bulkActions.map((action) => {
+		const valid = filterAction(action);
+		return /* @__PURE__ */ React$1.createElement(Tooltip, {
+			placement: "right",
+			title: !valid ? "Action entity does not match data grid entity" : ""
+		}, /* @__PURE__ */ React$1.createElement("span", null, /* @__PURE__ */ React$1.createElement(MenuItem, {
+			onClick: () => triggerBulkAction(action.actionId),
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
 			},
-			children: bulkActions && bulkActions.map((action) => {
-				const valid = filterAction(action);
-				return /* @__PURE__ */ jsx(Tooltip, {
-					placement: "right",
-					title: !valid ? "Action entity does not match data grid entity" : "",
-					children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(MenuItem, {
-						onClick: () => triggerBulkAction(action.actionId),
-						style: {
-							display: "flex",
-							justifyContent: "space-between"
-						},
-						disabled: !valid,
-						children: [/* @__PURE__ */ jsx(Typography, { children: action.name }), /* @__PURE__ */ jsx(FluentIcon, {
-							component: valid ? action.icon ?? AppIconDefaultIcon : ErrorIcon,
-							style: { marginLeft: 7 },
-							color: !valid && "red"
-						})]
-					}) })
-				});
-			})
-		})]
-	});
+			disabled: !valid
+		}, /* @__PURE__ */ React$1.createElement(Typography, null, action.name), /* @__PURE__ */ React$1.createElement(FluentIcon, {
+			component: valid ? action.icon ?? AppIconDefaultIcon : ErrorIcon,
+			style: { marginLeft: 7 },
+			color: !valid && "red"
+		}))));
+	})));
 };
 
 //#endregion
@@ -3626,165 +3321,137 @@ const AmbientGridTemplate = (props) => {
 	useEffect(() => {
 		if (additionalFilters) setAdditionalFilterChips(additionalFilters);
 	}, [additionalFilters]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		!hideHeader && useNewHeader && gApi && /* @__PURE__ */ jsx(GridPrimaryBar, {
-			title,
-			showFilter: setSideBarInvisible,
-			selected: isVisible,
-			onChange: onSearch || handleFilterChange,
-			showGroup: showGrouping,
-			value,
-			saveViewClick: openSaveView,
-			viewsClick: openViews,
-			handleChange,
-			fitClick: fitToSpace,
-			expandClick: autoSizeAllWithoutHeader,
-			exportClick: exportGrid,
-			insightsClick,
-			clearClick: restoreGridDefault,
-			filterClick: onFilterClick,
-			columnsClick: onColumnsClick,
-			hideSearchBar,
-			secondaryActionButtons: secondaryActionButtons || [],
-			onPrimaryActionClick,
-			primaryActionDisabled,
-			primaryActionLabel,
-			primaryActionIcon,
-			hiddenActionButtons: hiddenActionButtons || [],
-			hiddenLabels: hiddenLabels || [],
-			background: headerBackgroundColor,
-			onSearchKeyDown
-		}),
-		useNewHeader && (kpiValues?.length > 0 || filterChips?.length > 0 || filters?.length > 0 || viewChips?.length > 0 || additionalFilterChips?.length > 0) && /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "row",
-				height: 40
-			},
-			children: [/* @__PURE__ */ jsx(Grow, {
-				in: bulkActions && numSelectedRows > 0,
-				unmountOnExit: true,
-				children: /* @__PURE__ */ jsx(BulkActionsGridButton, {
-					bulkActions,
-					numSelectedRows,
-					triggerAction: handleTriggerAction,
-					domain
-				})
-			}), /* @__PURE__ */ jsx(ChipSection, {
-				filterChips,
-				viewChips,
-				additionalFilterChips,
-				kpiValues,
-				handleDelete: handleChipDelete,
-				setAdditionalFilterChips,
-				setViewChips,
-				setFilter
-			})]
-		}),
-		useNewHeader && gApi && gcApi && /* @__PURE__ */ jsx(GridViewsSideSheet, {
-			open: viewsOpen,
-			onClose: closeViews,
-			openSaveView,
-			setViewChips,
-			setFilter: setView,
-			rowData: views,
-			setSelectedView
-		}),
-		!hideHeader && !useNewHeader && /* @__PURE__ */ jsx(GridActionBar, {
-			title,
-			showFilter: setSideBarInvisible,
-			selected: isVisible,
-			onChange: onSearch || handleFilterChange,
-			showGroup: showGrouping,
-			value,
-			handleChange,
-			fitClick: fitToSpace,
-			expandClick: autoSizeAllWithoutHeader,
-			exportClick: exportGrid,
-			clearClick: restoreGridDefault,
-			saveGridConfig,
-			deleteGridConfig,
-			clearGridConfig,
-			hideFitGrid,
-			hideExpandGrid,
-			hideExportGrid,
-			hideRemoveFilters,
-			hideFilterTab,
-			hideGroupTab,
-			hideColumnTab,
-			hideSearchBar,
-			children: primaryActionButton && /* @__PURE__ */ jsx("div", {
-				className: classes.pab,
-				children: primaryActionButton
-			})
-		}),
-		loading && /* @__PURE__ */ jsx(LinearProgress, {}),
-		/* @__PURE__ */ jsxs("div", {
-			style: { display: "flex" },
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					style: { width: "100%" },
-					children: /* @__PURE__ */ jsx(AgTable, {
-						...agGridOptions,
-						columnDefs,
-						dynamicSizing: !disableDynamicSizing,
-						rowData: data || emptyArr,
-						onGridReady: gridReady || onGridReady,
-						onRowSelected: handleRowSelected,
-						suppressCellSelection: true,
-						suppressRowClickSelection: false,
-						defaultColDef: defaultColActionsDef,
-						enableRangeSelection: true,
-						enableColResize: true,
-						sideBar: sidebarIsVisible,
-						pivotMode: false,
-						pivotPanelShow: "never",
-						groupSelectsChildren: true,
-						animateRows: false,
-						pagination: !disablePagination,
-						showOpenedGroup: true,
-						paginateChildRows: true,
-						paginationPageSize,
-						modules: rowModelType === "serverSide" ? [ServerSideRowModelModule] : [],
-						onFirstDataRendered: firstDataRendered,
-						rowModelType,
-						rowClassRules: { "first-row-in-group": (params) => params.node.rowIndex !== 0 && params.node.firstChild },
-						height,
-						api: gApi,
-						rowSelection: !disableRowSelection && (bulkActions ? "multiple" : "single"),
-						hideHeader,
-						...otherGridProps
-					})
-				}),
-				showGroupOptions && /* @__PURE__ */ jsx("div", {
-					className: classes.groupSideBar,
-					children: /* @__PURE__ */ jsx(GridGroupingSidebar, {
-						groupItem: (item) => groupGridItems(item),
-						closeClick: () => groupGridItems(""),
-						expandClick: expandGroupedGrid,
-						collapseClick: collapseGroupedGrid,
-						groupingData,
-						height
-					})
-				}),
-				!hiddenActionButtons?.includes("saveView") && /* @__PURE__ */ jsx(SaveViewFormDialog, {
-					open: saveViewOpen,
-					handleClose: closeSaveView,
-					application: applicationName,
-					tenant: tenantName,
-					user,
-					columnDefsValues,
-					refetchViews: refetch,
-					gApi,
-					gcApi,
-					setSelectedView: setView,
-					gridId,
-					domain,
-					apiCatalogId
-				})
-			]
-		})
-	] });
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, !hideHeader && useNewHeader && gApi && /* @__PURE__ */ React$1.createElement(GridPrimaryBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		saveViewClick: openSaveView,
+		viewsClick: openViews,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		insightsClick,
+		clearClick: restoreGridDefault,
+		filterClick: onFilterClick,
+		columnsClick: onColumnsClick,
+		hideSearchBar,
+		secondaryActionButtons: secondaryActionButtons || [],
+		onPrimaryActionClick,
+		primaryActionDisabled,
+		primaryActionLabel,
+		primaryActionIcon,
+		hiddenActionButtons: hiddenActionButtons || [],
+		hiddenLabels: hiddenLabels || [],
+		background: headerBackgroundColor,
+		onSearchKeyDown
+	}), useNewHeader && (kpiValues?.length > 0 || filterChips?.length > 0 || filters?.length > 0 || viewChips?.length > 0 || additionalFilterChips?.length > 0) && /* @__PURE__ */ React$1.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		height: 40
+	} }, /* @__PURE__ */ React$1.createElement(Grow, {
+		in: bulkActions && numSelectedRows > 0,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React$1.createElement(BulkActionsGridButton, {
+		bulkActions,
+		numSelectedRows,
+		triggerAction: handleTriggerAction,
+		domain
+	})), /* @__PURE__ */ React$1.createElement(ChipSection, {
+		filterChips,
+		viewChips,
+		additionalFilterChips,
+		kpiValues,
+		handleDelete: handleChipDelete,
+		setAdditionalFilterChips,
+		setViewChips,
+		setFilter
+	})), useNewHeader && gApi && gcApi && /* @__PURE__ */ React$1.createElement(GridViewsSideSheet_default, {
+		open: viewsOpen,
+		onClose: closeViews,
+		openSaveView,
+		setViewChips,
+		setFilter: setView,
+		rowData: views,
+		setSelectedView
+	}), !hideHeader && !useNewHeader && /* @__PURE__ */ React$1.createElement(GridActionBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		clearClick: restoreGridDefault,
+		saveGridConfig,
+		deleteGridConfig,
+		clearGridConfig,
+		hideFitGrid,
+		hideExpandGrid,
+		hideExportGrid,
+		hideRemoveFilters,
+		hideFilterTab,
+		hideGroupTab,
+		hideColumnTab,
+		hideSearchBar
+	}, primaryActionButton && /* @__PURE__ */ React$1.createElement("div", { className: classes.pab }, primaryActionButton)), loading && /* @__PURE__ */ React$1.createElement(LinearProgress, null), /* @__PURE__ */ React$1.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React$1.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React$1.createElement(AgTable, {
+		...agGridOptions,
+		columnDefs,
+		dynamicSizing: !disableDynamicSizing,
+		rowData: data || emptyArr,
+		onGridReady: gridReady || onGridReady,
+		onRowSelected: handleRowSelected,
+		suppressCellSelection: true,
+		suppressRowClickSelection: false,
+		defaultColDef: defaultColActionsDef,
+		enableRangeSelection: true,
+		enableColResize: true,
+		sideBar: sidebarIsVisible,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		groupSelectsChildren: true,
+		animateRows: false,
+		pagination: !disablePagination,
+		showOpenedGroup: true,
+		paginateChildRows: true,
+		paginationPageSize,
+		modules: rowModelType === "serverSide" ? [ServerSideRowModelModule] : [],
+		onFirstDataRendered: firstDataRendered,
+		rowModelType,
+		rowClassRules: { "first-row-in-group": (params) => params.node.rowIndex !== 0 && params.node.firstChild },
+		height,
+		api: gApi,
+		rowSelection: !disableRowSelection && (bulkActions ? "multiple" : "single"),
+		hideHeader,
+		...otherGridProps
+	})), showGroupOptions && /* @__PURE__ */ React$1.createElement("div", { className: classes.groupSideBar }, /* @__PURE__ */ React$1.createElement(GridGroupingSidebar, {
+		groupItem: (item) => groupGridItems(item),
+		closeClick: () => groupGridItems(""),
+		expandClick: expandGroupedGrid,
+		collapseClick: collapseGroupedGrid,
+		groupingData,
+		height
+	})), !hiddenActionButtons?.includes("saveView") && /* @__PURE__ */ React$1.createElement(SaveViewFormDialog, {
+		open: saveViewOpen,
+		handleClose: closeSaveView,
+		application: applicationName,
+		tenant: tenantName,
+		user,
+		columnDefsValues,
+		refetchViews: refetch,
+		gApi,
+		gcApi,
+		setSelectedView: setView,
+		gridId,
+		domain,
+		apiCatalogId
+	})));
 };
 AmbientGridTemplate.propTypes = {
 	columnDefs: PropTypes.array,
@@ -3848,4 +3515,4 @@ AmbientGridTemplate.propTypes = {
 
 //#endregion
 export { ActionContext, ActionDispatchContext, ActionLoadingDispatchContext, ActionsRenderer, AgTable, AgTableButtons, AmbientGridTemplate, AmbientTextField, AmbientToggleButton, AmbientTokenButton, DynamicContainerWithMenu, Ellipse, FilterOperators, FluentDialog, GridActionBar, GridGroupingHeader, GridGroupingSidebar, GridSidebarContainer, IconButtonWithTooltip, LicenseKey, SearchOperators, Token, clearGridState, deleteGridState, findTermByType, getCommonEntityName, getEllipseColor, getEntityAttributes, getFullyQualifiedName, getGridState, getPathObject, getPathParametersObj, getPrimaryKeyValues, getSanitizedName, getSuccessAction, isValueSelected, onFirstDataRendered, saveGridState, useActionState, useActionStore, useActions, useAgGridApi, useCatalogStore, useDynamicListCalculation, useExport, useGridClear, useGridFormat, useHandleAction, useInquiryStore, useQuickFilter };
-//# sourceMappingURL=AmbientGridTemplate-C4cO-UBE.js.map
+//# sourceMappingURL=AmbientGridTemplate-BLwgiqwK.js.map