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

package/{dist-tsdown/PageContainer-CWhjU1zS.js → dist/PageContainer-B65gsUfF.js}

@@ -1,7 +1,6 @@
-import { FluentIcon, FluentIconButton, LayoutUnit, PrimaryActionButton, StandardTitle, StatusChip, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-W5AjvnLN.js";
+import { FluentIcon, FluentIconButton, LayoutUnit, PrimaryActionButton, StandardTitle, StatusChip, useAxiosGet, useId, useShellStore } from "./EnvironmentRibbon-BMvQEZPZ.js";
 import React, { Fragment, createContext, createRef, forwardRef, memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Badge, Button, ButtonBase, Card, CardActions, CardContent, CircularProgress, Collapse, Divider, IconButton, LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Popover, Slide, 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 { Redirect, useHistory, useLocation } from "react-router-dom";
 import clsx from "clsx";
@@ -76,28 +75,22 @@ const useStyles$12 = makeStyles((theme) => ({
 const ToolBarButton = (props) => {
 	const classes = useStyles$12(props);
 	const { component: ToolBarComponent, click, label, expanded, aria, icon = true, disabled = false } = props;
-	return /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ React.createElement(Tooltip, {
 		title: expanded && label || aria || "",
 		"aria-label": label,
 		placement: "top",
-		enterDelay: !expanded && 5e3,
-		children: /* @__PURE__ */ jsxs(ButtonBase, {
-			classes: { root: classes.root },
-			className: classes.wrapper,
-			onClick: click,
-			disableRipple: true,
-			"aria-label": aria,
-			disabled,
-			children: [icon && /* @__PURE__ */ jsx("div", {
-				className: classes.iconWrapper,
-				children: /* @__PURE__ */ jsx(ToolBarComponent, { className: classes.icon })
-			}), /* @__PURE__ */ jsx(Typography, {
-				variant: "body2",
-				className: classes.label,
-				children: !expanded && label
-			})]
-		})
-	});
+		enterDelay: !expanded && 5e3
+	}, /* @__PURE__ */ React.createElement(ButtonBase, {
+		classes: { root: classes.root },
+		className: classes.wrapper,
+		onClick: click,
+		disableRipple: true,
+		"aria-label": aria,
+		disabled
+	}, icon && /* @__PURE__ */ React.createElement("div", { className: classes.iconWrapper }, /* @__PURE__ */ React.createElement(ToolBarComponent, { className: classes.icon })), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		className: classes.label
+	}, !expanded && label)));
 };
 ToolBarButton.propTypes = {
 	component: PropTypes.func,
@@ -208,30 +201,29 @@ const DashboardCardGrid = (props) => {
 			});
 		}
 	}, [droppingWidgetType, onCreateCard]);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ React.createElement("div", {
 		ref,
-		className: classes.root,
-		children: width ? /* @__PURE__ */ jsx(Responsive, {
-			ref: rglRef,
-			...other,
-			width,
-			breakpoints,
-			cols: breakpointCols,
-			rowHeight: 128,
-			margin: [theme.spacing(3), theme.spacing(3)],
-			containerPadding: [0, 0],
-			draggableHandle: "[data-handle]",
-			onDrag: drag,
-			onResize: resize,
-			onDrop: drop,
-			isDroppable: gridProperties?.isDroppable || false,
-			isDraggable: gridProperties?.isDraggable || false,
-			droppingItem: droppingItemLayout,
-			style: { height: "100%" },
-			children
-		}) : null
-	});
+		className: classes.root
+	}, width ? /* @__PURE__ */ React.createElement(Responsive, {
+		ref: rglRef,
+		...other,
+		width,
+		breakpoints,
+		cols: breakpointCols,
+		rowHeight: 128,
+		margin: [theme.spacing(3), theme.spacing(3)],
+		containerPadding: [0, 0],
+		draggableHandle: "[data-handle]",
+		onDrag: drag,
+		onResize: resize,
+		onDrop: drop,
+		isDroppable: gridProperties?.isDroppable || false,
+		isDraggable: gridProperties?.isDraggable || false,
+		droppingItem: droppingItemLayout,
+		style: { height: "100%" }
+	}, children) : null);
 };
+var DashboardCardGrid_default = DashboardCardGrid;
 
 //#endregion
 //#region src/UI/surfaces/cards/FUICardHeader.jsx
@@ -249,16 +241,14 @@ const useStyles$11 = makeStyles((theme) => ({
 const FUICardHeader = (props, ref) => {
 	const classes = useStyles$11(props);
 	const { className, children, headerActions, titleId,...other } = props;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ React.createElement("div", {
 		ref,
 		...other,
-		className: clsx(className, classes.root),
-		children: [/* @__PURE__ */ jsx(Typography, {
-			id: titleId,
-			className: classes.title,
-			children
-		}), headerActions]
-	});
+		className: clsx(className, classes.root)
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		id: titleId,
+		className: classes.title
+	}, children), headerActions);
 };
 var FUICardHeader_default = forwardRef(FUICardHeader);
 
@@ -270,11 +260,12 @@ const useStyles$10 = makeStyles((theme) => ({ root: { borderRadius: 0 } }), { na
 */
 const FUISquareIconButton = (props) => {
 	const classes = useStyles$10(props);
-	return /* @__PURE__ */ jsx(IconButton, {
+	return /* @__PURE__ */ React.createElement(IconButton, {
 		...props,
 		classes
 	});
 };
+var FUISquareIconButton_default = FUISquareIconButton;
 
 //#endregion
 //#region src/UI/surfaces/cards/FluentCard.jsx
@@ -285,13 +276,12 @@ const useStyles$9 = makeStyles({ root: {} }, { name: "FluentCard" });
 const FluentCard = forwardRef((props, ref) => {
 	const classes = useStyles$9(props);
 	const { children,...other } = props;
-	return /* @__PURE__ */ jsx(Card, {
+	return /* @__PURE__ */ React.createElement(Card, {
 		ref,
 		square: true,
 		...other,
-		classes,
-		children
-	});
+		classes
+	}, children);
 });
 FluentCard.displayName = "FluentCard";
 
@@ -304,12 +294,11 @@ const useStyles$8 = makeStyles({ root: {} }, { name: "FluentCardContent" });
 const FluentCardContent = forwardRef((props, ref) => {
 	const classes = useStyles$8(props);
 	const { children,...other } = props;
-	return /* @__PURE__ */ jsx(CardContent, {
+	return /* @__PURE__ */ React.createElement(CardContent, {
 		ref,
 		...other,
-		classes,
-		children
-	});
+		classes
+	}, children);
 });
 FluentCardContent.displayName = "FluentCardContent";
 
@@ -325,12 +314,11 @@ const useStyles$7 = makeStyles({
 const FluentCardActions = forwardRef((props, ref) => {
 	const classes = useStyles$7(props);
 	const { children,...other } = props;
-	return /* @__PURE__ */ jsx(CardActions, {
+	return /* @__PURE__ */ React.createElement(CardActions, {
 		ref,
 		...other,
-		classes,
-		children
-	});
+		classes
+	}, children);
 });
 FluentCardActions.displayName = "FluentCardActions";
 
@@ -358,24 +346,23 @@ const useStyles$6 = makeStyles((theme) => ({
 }), { name: "FUICard" });
 let FUICardAction = (props, ref) => {
 	const { children,...other } = props;
-	return /* @__PURE__ */ jsx(Button, {
+	return /* @__PURE__ */ React.createElement(Button, {
 		ref,
 		size: "small",
 		variant: "contained",
 		disableElevation: true,
-		...other,
-		children
-	});
+		...other
+	}, children);
 };
 FUICardAction = forwardRef(FUICardAction);
 let FUICardHeaderMenu = (props, ref) => {
 	const { children } = props;
-	return /* @__PURE__ */ jsx("div", {
-		button: /* @__PURE__ */ jsx(FUISquareIconButton, { children: /* @__PURE__ */ jsx(FluentIcon, {
+	return /* @__PURE__ */ React.createElement("div", {
+		button: /* @__PURE__ */ React.createElement(FUISquareIconButton_default, null, /* @__PURE__ */ React.createElement(FluentIcon, {
 			component: MoreIcon,
 			size: "small"
-		}) }),
-		menu: /* @__PURE__ */ jsx(Menu, { children })
+		})),
+		menu: /* @__PURE__ */ React.createElement(Menu, null, children)
 	});
 };
 FUICardHeaderMenu = forwardRef(FUICardHeaderMenu);
@@ -384,7 +371,7 @@ const FUICard = (props, ref) => {
 	const { className, children, actions, title, headerActions, CardHeaderProps, CardProps, raised, name,...cardProps } = props;
 	const id = useId(name, cardProps.id);
 	const titleId = `${id}-title`;
-	return /* @__PURE__ */ jsxs(FluentCard, {
+	return /* @__PURE__ */ React.createElement(FluentCard, {
 		ref,
 		component: "section",
 		"aria-labelledby": titleId,
@@ -392,24 +379,12 @@ const FUICard = (props, ref) => {
 		raised,
 		className: clsx(className, raised && classes.raised),
 		...CardProps,
-		classes: { root: classes.root },
-		children: [
-			/* @__PURE__ */ jsx(FUICardHeader_default, {
-				titleId,
-				headerActions,
-				...CardHeaderProps,
-				children: title
-			}),
-			/* @__PURE__ */ jsx(FluentCardContent, {
-				className: classes.contentArea,
-				children
-			}),
-			actions && /* @__PURE__ */ jsx(FluentCardActions, {
-				className: classes.cardActions,
-				children: actions
-			})
-		]
-	});
+		classes: { root: classes.root }
+	}, /* @__PURE__ */ React.createElement(FUICardHeader_default, {
+		titleId,
+		headerActions,
+		...CardHeaderProps
+	}, title), /* @__PURE__ */ React.createElement(FluentCardContent, { className: classes.contentArea }, children), actions && /* @__PURE__ */ React.createElement(FluentCardActions, { className: classes.cardActions }, actions));
 };
 var FUICard_default = forwardRef(FUICard);
 
@@ -422,18 +397,14 @@ const useStyles$5 = makeStyles({ listItemIcon: { minWidth: 32 } }, { name: "FUIM
 const FUIMenuItem = (props, ref) => {
 	const classes = useStyles$5();
 	const { icon, fluentIcon, primary, secondary,...menuItemProps } = props;
-	return /* @__PURE__ */ jsxs(MenuItem, {
+	return /* @__PURE__ */ React.createElement(MenuItem, {
 		ref,
 		dense: true,
-		...menuItemProps,
-		children: [/* @__PURE__ */ jsx(ListItemIcon, {
-			className: classes.listItemIcon,
-			children: icon || /* @__PURE__ */ jsx(FluentIcon, { component: fluentIcon })
-		}), /* @__PURE__ */ jsx(ListItemText, {
-			primary,
-			secondary
-		})]
-	});
+		...menuItemProps
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listItemIcon }, icon || /* @__PURE__ */ React.createElement(FluentIcon, { component: fluentIcon })), /* @__PURE__ */ React.createElement(ListItemText, {
+		primary,
+		secondary
+	}));
 };
 var FUIMenuItem_default = forwardRef(FUIMenuItem);
 
@@ -481,12 +452,9 @@ const WidgetCard = (props) => {
 	const classes = useStyles$13();
 	const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className ?? "");
 	let body = children;
-	if (loading && !body) body = /* @__PURE__ */ jsx("div", {
-		className: classes.loadingContent,
-		children: /* @__PURE__ */ jsx(CircularProgress, { size: 64 })
-	});
-	if (errors && !body) body = /* @__PURE__ */ jsx("div", { children: "Unexpected error" });
-	return /* @__PURE__ */ jsx(FUICard_default, {
+	if (loading && !body) body = /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, { size: 64 }));
+	if (errors && !body) body = /* @__PURE__ */ React.createElement("div", null, "Unexpected error");
+	return /* @__PURE__ */ React.createElement(FUICard_default, {
 		...other,
 		className: clsx(className, theme === "dark" ? classes.darkRoot : classes.root, classes.anyRoot),
 		raised,
@@ -494,16 +462,12 @@ const WidgetCard = (props) => {
 			className: classes.handle,
 			"data-handle": true
 		},
-		headerActions: /* @__PURE__ */ jsxs(Fragment$1, { children: [headerActions, /* @__PURE__ */ jsx(FUICardHeaderMenu, { children: /* @__PURE__ */ jsx(FUIMenuItem_default, {
+		headerActions: /* @__PURE__ */ React.createElement(React.Fragment, null, headerActions, /* @__PURE__ */ React.createElement(FUICardHeaderMenu, null, /* @__PURE__ */ React.createElement(FUIMenuItem_default, {
 			onClick: onDelete,
 			fluentIcon: DeleteIcon,
 			primary: "Delete"
-		}) })] }),
-		children: /* @__PURE__ */ jsx("div", {
-			className: classes.innerWidgetContentContainer,
-			children: body
-		})
-	});
+		})))
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.innerWidgetContentContainer }, body));
 };
 
 //#endregion
@@ -535,28 +499,21 @@ let DashboardWidget = (props) => {
 		return params$1;
 	}, [paramDefs, paramValues]);
 	const setParam = useCallback((name, value) => setParams(id, { [name]: value }), [id, setParams]);
-	if (!isValidWidget || !getWidget) return /* @__PURE__ */ jsx(WidgetCard, {
+	if (!isValidWidget || !getWidget) return /* @__PURE__ */ React.createElement(WidgetCard, {
 		...other,
-		title: "Error",
-		children: "isValidWidget or getWidget functions are not defined"
-	});
-	if (!Widget) return /* @__PURE__ */ jsxs(WidgetCard, {
+		title: "Error"
+	}, "isValidWidget or getWidget functions are not defined");
+	if (!Widget) return /* @__PURE__ */ React.createElement(WidgetCard, {
 		...other,
-		title: "Error",
-		children: [
-			"Unknown widget type \"",
-			widgetType,
-			"\"."
-		]
-	});
-	else return /* @__PURE__ */ jsx(Widget, {
+		title: "Error"
+	}, "Unknown widget type \"", widgetType, "\".");
+	else return /* @__PURE__ */ React.createElement(Widget, {
 		...other,
 		id,
 		params,
 		setParam,
-		onDelete,
-		children
-	});
+		onDelete
+	}, children);
 };
 var DashboardWidget_default = memo(DashboardWidget);
 
@@ -585,35 +542,30 @@ const Page = (props) => {
 		return layouts$1;
 	};
 	const layouts = useMemo(() => calculateLayouts(), [calculateLayouts, widgetConfig]);
-	const cards = useMemo(() => widgets && widgets.map(({ __typename,...widget }) => /* @__PURE__ */ jsx(DashboardWidget_default, { ...widget }, widget.id)), [widgets]);
+	const cards = useMemo(() => widgets && widgets.map(({ __typename,...widget }) => /* @__PURE__ */ React.createElement(DashboardWidget_default, {
+		key: widget.id,
+		...widget
+	})), [widgets]);
 	if (!layouts) return null;
-	return /* @__PURE__ */ jsx(DashboardCardGrid, {
+	return /* @__PURE__ */ React.createElement(DashboardCardGrid_default, {
 		layouts,
 		gridProperties,
-		disableMargin,
-		children: cards
-	});
+		disableMargin
+	}, cards);
 };
+var Page_default = Page;
 
 //#endregion
 //#region src/UI/inputs/buttons/AmbientPopoverMenuItem.jsx
 const useStyles$4 = makeStyles((theme) => ({ root: { paddingLeft: theme.spacing(1) } }));
 const AmbientPopoverMenuItem = ({ label, component, click }) => {
 	const classes = useStyles$4();
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [
-			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" }),
-			/* @__PURE__ */ jsx(ToolBarButton, {
-				label,
-				component,
-				click,
-				icon: false
-			}),
-			/* @__PURE__ */ jsx(LayoutUnit, { unit: "nudge" }),
-			/* @__PURE__ */ jsx(Divider, {})
-		]
-	});
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label,
+		component,
+		click,
+		icon: false
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(Divider, null));
 };
 
 //#endregion
@@ -645,40 +597,33 @@ const PAHExport = ({ exportCSV, exportExcel, exportPDF }) => {
 		click: exportExcel,
 		key: 2
 	}];
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes.root,
-		children: [/* @__PURE__ */ jsx(FluentIconButton, {
-			className: classes.icon,
-			icon: ArrowUpRightIcon,
-			onClick: handleClick
-		}), /* @__PURE__ */ jsx(Popover, {
-			classes: { root: classes.popoverRoot },
-			square: true,
-			elevation: 1,
-			id,
-			open,
-			anchorEl,
-			onClose: handleClose,
-			anchorOrigin: {
-				vertical: "bottom",
-				horizontal: "left"
-			},
-			transformOrigin: {
-				vertical: "top",
-				horizontal: "left"
-			},
-			children: /* @__PURE__ */ jsx("div", {
-				style: { width: 140 },
-				children: /* @__PURE__ */ jsx("div", { children: gridControlsExport.map((item) => {
-					return /* @__PURE__ */ jsx(AmbientPopoverMenuItem, {
-						label: item.label,
-						component: item.component,
-						click: item.click
-					});
-				}) })
-			})
-		})]
-	});
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.icon,
+		icon: ArrowUpRightIcon,
+		onClick: handleClick
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		classes: { root: classes.popoverRoot },
+		square: true,
+		elevation: 1,
+		id,
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		}
+	}, /* @__PURE__ */ React.createElement("div", { style: { width: 140 } }, /* @__PURE__ */ React.createElement("div", null, gridControlsExport.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientPopoverMenuItem, {
+			label: item.label,
+			component: item.component,
+			click: item.click
+		});
+	})))));
 };
 
 //#endregion
@@ -810,83 +755,76 @@ const UdpTabs = (props) => {
 			observer.disconnect();
 		};
 	}, [calculateHiddenTabs]);
-	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
 		className: clsx(classes.root, className),
-		ref: tabContainerRef,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: classes.tabsWrapper,
-			ref: innerTabContainerRef,
-			style: variant === "spread" ? { justifyContent: "space-between" } : null,
-			children: [visibleTabList?.map((item, index) => /* @__PURE__ */ jsx(ButtonBase, {
-				style: {
-					flex: variant === "spread" && 1,
-					width: !!buttonWidth && buttonWidth
-				},
-				id: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
-				udprecordid: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
-				children: /* @__PURE__ */ jsx("div", {
-					className: clsx(classes.tab, {
-						[classes.blockTab]: variant === "block",
-						[classes.activeTab]: value === item?.id
-					}),
-					onClick: (e) => {
-						onChange(e, item?.id);
-						if (item?.onClick) item.onClick();
-						setAnchorEl(null);
-					},
-					children: /* @__PURE__ */ jsx(Typography, {
-						noWrap: true,
-						style: { fontWeight: variant === "spread" ? "bold" : "normal" },
-						children: item?.label
-					})
-				})
-			}, index)), menuTabList?.length > 0 && /* @__PURE__ */ jsx(IconButton, {
-				onClick: handlePopoverClick,
-				className: classes.moreButton,
-				color: "primary",
-				id: "udpRecord-UdpTabs-MoreActions",
-				udprecordid: "udpRecord-UdpTabs-MoreActions",
-				children: /* @__PURE__ */ jsx(Badge, {
-					color: "secondary",
-					variant: "dot",
-					invisible: menuItemSelected === false,
-					children: /* @__PURE__ */ jsx(FluentIcon, {
-						component: MoreVerticalIcon,
-						size: "medium"
-					})
-				})
-			})]
-		}), !!menuTabList?.length && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Popover, {
-			id: "menuTabList",
-			open,
-			anchorEl,
-			onClose: handlePopoverClose,
-			anchorOrigin: {
-				vertical: "bottom",
-				horizontal: "left"
-			},
-			transformOrigin: {
-				vertical: "top",
-				horizontal: "left"
+		ref: tabContainerRef
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: classes.tabsWrapper,
+		ref: innerTabContainerRef,
+		style: variant === "spread" ? { justifyContent: "space-between" } : null
+	}, visibleTabList?.map((item, index) => /* @__PURE__ */ React.createElement(ButtonBase, {
+		style: {
+			flex: variant === "spread" && 1,
+			width: !!buttonWidth && buttonWidth
+		},
+		key: index,
+		id: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-"),
+		udprecordid: "udpRecord-UdpTabs-MenuItem-" + item?.label?.replace(/ /g, "-")
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.tab, {
+			[classes.blockTab]: variant === "block",
+			[classes.activeTab]: value === item?.id
+		}),
+		onClick: (e) => {
+			onChange(e, item?.id);
+			if (item?.onClick) item.onClick();
+			setAnchorEl(null);
+		}
+	}, /* @__PURE__ */ React.createElement(Typography, {
+		noWrap: true,
+		style: { fontWeight: variant === "spread" ? "bold" : "normal" }
+	}, item?.label)))), menuTabList?.length > 0 && /* @__PURE__ */ React.createElement(IconButton, {
+		onClick: handlePopoverClick,
+		className: classes.moreButton,
+		color: "primary",
+		id: "udpRecord-UdpTabs-MoreActions",
+		udprecordid: "udpRecord-UdpTabs-MoreActions"
+	}, /* @__PURE__ */ React.createElement(Badge, {
+		color: "secondary",
+		variant: "dot",
+		invisible: menuItemSelected === false
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: MoreVerticalIcon,
+		size: "medium"
+	})))), !!menuTabList?.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Popover, {
+		id: "menuTabList",
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		className: classes.popoverWrapper
+	}, menuTabList?.map((tab) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			key: tab?.id,
+			id: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			udprecordid: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
+			onClick: (e) => {
+				if (tab?.onClick) tab.onClick();
+				if (onChange) onChange(e, tab?.id);
+				setAnchorEl(null);
 			},
-			className: classes.popoverWrapper,
-			children: menuTabList?.map((tab) => {
-				return /* @__PURE__ */ jsx(MenuItem, {
-					id: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
-					udprecordid: "udpRecord-UdpTabs-MenuItem-" + tab?.label?.replace(/ /g, "-"),
-					onClick: (e) => {
-						if (tab?.onClick) tab.onClick();
-						if (onChange) onChange(e, tab?.id);
-						setAnchorEl(null);
-					},
-					className: clsx(classes.menuItem, className),
-					selected: tab?.id === value,
-					...menuItemProps,
-					children: /* @__PURE__ */ jsx(Typography, { children: tab?.label })
-				}, tab?.id);
-			})
-		}) })]
-	}) });
+			className: clsx(classes.menuItem, className),
+			selected: tab?.id === value,
+			...menuItemProps
+		}, /* @__PURE__ */ React.createElement(Typography, null, tab?.label));
+	})))));
 };
 
 //#endregion
@@ -1091,356 +1029,232 @@ const PrimaryActionHeader = (props) => {
 		click: clearGridConfig,
 		id: 8
 	}];
-	const gridControlsExport = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(PAHExport, {
+	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PAHExport, {
 		exportCSV: exportCSV || (() => gridApi?.exportDataAsCsv()),
 		exportExcel: exportExcel || (() => gridApi?.exportDataAsExcel()),
 		exportPDF
-	}) });
-	const gridControlExpand = gridControlsExpand && /* @__PURE__ */ jsx("div", { children: gridControlsExpand.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+	}));
+	const gridControlExpand = gridControlsExpand && /* @__PURE__ */ React.createElement("div", null, gridControlsExpand.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const gridControlResize = gridControlsResize && /* @__PURE__ */ jsx("div", { children: gridControlsResize.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlResize = gridControlsResize && /* @__PURE__ */ React.createElement("div", null, gridControlsResize.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const gridControlCollapse = gridControlsCollapse && /* @__PURE__ */ jsx("div", { children: gridControlsCollapse.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlCollapse = gridControlsCollapse && /* @__PURE__ */ React.createElement("div", null, gridControlsCollapse.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const gridControlSave = gridControlsSave && /* @__PURE__ */ jsx("div", { children: gridControlsSave.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlSave = gridControlsSave && /* @__PURE__ */ React.createElement("div", null, gridControlsSave.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const gridControlDelete = gridControlsDelete && /* @__PURE__ */ jsx("div", { children: gridControlsDelete.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlDelete = gridControlsDelete && /* @__PURE__ */ React.createElement("div", null, gridControlsDelete.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const gridControlClear = gridControlsClear && /* @__PURE__ */ jsx("div", { children: gridControlsClear.map((item) => {
-		return /* @__PURE__ */ jsx(ToolBarButton, {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const gridControlClear = gridControlsClear && /* @__PURE__ */ React.createElement("div", null, gridControlsClear.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
 			label: item.label,
 			title: item.label,
 			expanded: true,
 			component: item.component,
 			click: item.click,
-			aria: item.aria
-		}, item.id);
-	}) });
-	const searchToggle = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		style: { display: "flex" },
-		children: searchExpanded && /* @__PURE__ */ jsx(FluentIconButton, {
-			click: expandSearch,
-			"aria-label": "close search",
-			className: classes.close,
-			icon: ChevronRightIcon,
-			onClick: expandSearch,
-			size: "small"
-		})
-	}), /* @__PURE__ */ jsx("div", {
+			aria: item.aria,
+			key: item.id
+		});
+	}));
+	const searchToggle = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, searchExpanded && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		click: expandSearch,
+		"aria-label": "close search",
+		className: classes.close,
+		icon: ChevronRightIcon,
+		onClick: expandSearch,
+		size: "small"
+	})), /* @__PURE__ */ React.createElement("div", {
 		className: classes.search,
-		style: { flex: 1 },
-		children: /* @__PURE__ */ jsx("div", { children: searchExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Slide, {
-			direction: "left",
-			in: expandSearch,
-			mountOnEnter: true,
-			unmountOnExit: true,
-			children: /* @__PURE__ */ jsx("div", {
-				className: classes.searchWrapper,
-				children: searchField
-			})
-		}) }) })
-	})] });
+		style: { flex: 1 }
+	}, /* @__PURE__ */ React.createElement("div", null, searchExpanded && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Slide, {
+		direction: "left",
+		in: expandSearch,
+		mountOnEnter: true,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.searchWrapper }, searchField))))));
 	const LowerTrayShell = ({ children }) => {
-		return /* @__PURE__ */ jsx("div", {
-			className: classes.containerStyle,
-			children
-		});
+		return /* @__PURE__ */ React.createElement("div", { className: classes.containerStyle }, children);
 	};
 	const GridControlLineUp = () => {
-		return /* @__PURE__ */ jsxs("div", {
-			className: classes.gridControlLineUp,
-			children: [
-				saveGridConfig && gridControlSave,
-				deleteGridConfig && gridControlDelete,
-				clearGridConfig && gridControlClear,
-				expandGrid && gridControlExpand,
-				resizeGrid && gridControlResize,
-				collapseGrid && gridControlCollapse,
-				exportGrid && gridControlsExport
-			]
-		});
+		return /* @__PURE__ */ React.createElement("div", { className: classes.gridControlLineUp }, saveGridConfig && gridControlSave, deleteGridConfig && gridControlDelete, clearGridConfig && gridControlClear, expandGrid && gridControlExpand, resizeGrid && gridControlResize, collapseGrid && gridControlCollapse, exportGrid && gridControlsExport);
 	};
 	const additionalTitleTeleportedComponents = useMemo(() => {
 		const components = [];
 		allTeleporters.forEach(([targetId, location, teleporter]) => {
 			const Target = teleporter.Target;
-			if (targetId === additionalComponentId && location === "title") components.push(/* @__PURE__ */ jsx("div", {
-				className: "teleport-target",
-				children: /* @__PURE__ */ jsx(Target, {})
-			}, targetId));
+			if (targetId === additionalComponentId && location === "title") components.push(/* @__PURE__ */ React.createElement("div", {
+				key: targetId,
+				className: "teleport-target"
+			}, /* @__PURE__ */ React.createElement(Target, null)));
 		});
 		return components;
 	}, [additionalComponentId, allTeleporters]);
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: single && classes.single,
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: classes.titleWrapperBack,
-					children: [
-						clickBack && /* @__PURE__ */ jsx("div", {
-							className: classes.iconButton,
-							children: /* @__PURE__ */ jsx(FluentIconButton, {
-								icon: ArrowBackIcon,
-								onClick: clickBack
-							})
-						}),
-						title && /* @__PURE__ */ jsx("div", {
-							className: classes.root,
-							children: /* @__PURE__ */ jsxs("div", {
-								className: classes.titleWrapper,
-								children: [
-									/* @__PURE__ */ jsx(StandardTitle, {
-										removeMarginTop: single,
-										children: title
-									}),
-									single && subheader && /* @__PURE__ */ jsx(Typography, {
-										className: classes.denseSubtitle,
-										variant: "subtitle1",
-										component: "h2",
-										children: subheader
-									}),
-									allowAdditionalTitleComponent && /* @__PURE__ */ jsx("div", {
-										className: classes.additionalTitleComponent,
-										children: additionalTitleTeleportedComponents.map((value$1) => {
-											return value$1;
-										})
-									})
-								]
-							})
-						}),
-						!title && allowAdditionalTitleComponent && /* @__PURE__ */ jsx("div", {
-							className: classes.additionalTitleComponent,
-							children: additionalTitleTeleportedComponents.map((value$1) => {
-								return value$1;
-							})
-						}),
-						StatusChipProps && /* @__PURE__ */ jsx("div", {
-							className: classes.root,
-							children: /* @__PURE__ */ jsx("div", {
-								className: classes.titleWrapper,
-								children: /* @__PURE__ */ jsx(StatusChip, {
-									label: StatusChipProps?.label,
-									status: StatusChipProps?.status
-								})
-							})
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: classes.subHeaderWrapper,
-					children: [stepper, !hideActionRow && /* @__PURE__ */ jsxs("div", {
-						className: classes.actionRow,
-						children: [
-							!single && subheader && /* @__PURE__ */ jsx(Typography, {
-								className: classes.denseSubtitle,
-								variant: "subtitle1",
-								component: "h2",
-								children: subheader
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: grid ? classes.tabRow : classes.fullTabs,
-								children: tabList?.length > 0 && /* @__PURE__ */ jsx(UdpTabs, {
-									value,
-									onChange: handleChange,
-									tabList,
-									variant: tabVariant
-								})
-							}),
-							search && searchToggle,
-							/* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-							/* @__PURE__ */ jsxs("div", {
-								className: classes.secondaryButtons,
-								children: [
-									!searchExpanded && search && /* @__PURE__ */ jsx(ToolBarButton, {
-										label: "Search",
-										component: SearchIcon,
-										click: expandSearch
-									}),
-									search && /* @__PURE__ */ jsx(Divider, {
-										orientation: "vertical",
-										className: classes.divider
-									}),
-									(expandGrid || resizeGrid || collapseGrid || exportGrid || saveGridConfig || deleteGridConfig || clearGridConfig) && upperTrayGrid && /* @__PURE__ */ jsx(GridControlLineUp, { expand }),
-									grid && openFilter && gridControlsFilter.map((item) => {
-										return /* @__PURE__ */ jsx(ToolBarButton, {
-											label: item.label,
-											title: item.label,
-											expanded: true,
-											component: item.component,
-											click: item.click,
-											aria: item.aria
-										}, item.id);
-									}),
-									grid && openGroups && gridControlsGroup.map((item) => {
-										return /* @__PURE__ */ jsx(ToolBarButton, {
-											label: item.label,
-											title: item.label,
-											expanded: true,
-											component: item.component,
-											click: item.click,
-											aria: item.aria
-										}, item.id);
-									}),
-									grid && searchExpanded && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FluentIconButton, {
-										id: "udpRecord-PrimaryActionHeader-ClosePanel",
-										udprecordid: "udpRecord-PrimaryActionHeader-ClosePanel",
-										icon: MoreVerticalIcon,
-										"aria-label": "Close Panel"
-									}) }),
-									secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
-										return /* @__PURE__ */ jsx(ToolBarButton, {
-											label: item.label,
-											expanded: searchExpanded,
-											component: item.component,
-											click: item.click,
-											aria: item.label,
-											disabled: item.disabled
-										}, item.id ?? index);
-									})
-								]
-							}),
-							/* @__PURE__ */ jsx("div", { children: allowAdditionalRightComponent && allTeleporters.map(([targetId, location, teleporter]) => {
-								const Target = teleporter.Target;
-								if (targetId === additionalComponentId && location === "right") return /* @__PURE__ */ jsx("div", {
-									className: "teleport-target",
-									children: /* @__PURE__ */ jsx(Target, {})
-								}, targetId);
-								else return null;
-							}) }),
-							!hidePAB && /* @__PURE__ */ jsxs("div", {
-								className: classes.pab,
-								children: [topRowSecondary && topRowSecondary.map((item, index) => {
-									return /* @__PURE__ */ jsx(ToolBarButton, {
-										label: item.label,
-										expanded: searchExpanded,
-										component: item.component,
-										click: item.click,
-										aria: item.label
-									}, item.id ?? index);
-								}), /* @__PURE__ */ jsx(PrimaryActionButton, {
-									disabled: pabDisabled,
-									onClick: handleClick,
-									...otherProps,
-									children: buttonLabel
-								})]
-							})
-						]
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: clsx(classes.secondaryButtons, (altInputs || bottomRowSecondary) && classes.tabPageButtons),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: classes.buttomButtonRow,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: classes.bottomButtonsLeft,
-								children: bottomRowSecondary && bottomRowSecondary.map((item, index) => {
-									return /* @__PURE__ */ jsx(ToolBarButton, {
-										label: item.label,
-										expanded: !tabs && searchExpanded,
-										component: item.component,
-										click: item.click
-									}, item.id ?? index);
-								})
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: classes.bottomButtonsRigth,
-								children: bottomRowSecondaryRight && bottomRowSecondaryRight.map((item, index) => {
-									return /* @__PURE__ */ jsx(ToolBarButton, {
-										label: item.label,
-										expanded: !tabs && searchExpanded,
-										component: item.component,
-										click: item.click
-									}, item.id ?? index);
-								})
-							}),
-							altInputs
-						]
-					}), /* @__PURE__ */ jsxs("div", { children: [showGroups && /* @__PURE__ */ jsx(Divider, {}), showGroups && groups] })]
-				}),
-				/* @__PURE__ */ jsx(Collapse, {
-					in: expandOptions,
-					timeout: "auto",
-					children: /* @__PURE__ */ jsx("div", {
-						onMouseLeave: handleMouseLeave,
-						children: /* @__PURE__ */ jsx("div", {
-							className: classes.advancedOptions,
-							children: expandedContent
-						})
-					})
-				}),
-				loading && /* @__PURE__ */ jsx(LinearProgress, { value: loadingVal })
-			]
-		}),
-		lowerTray && /* @__PURE__ */ jsx(LowerTrayShell, { children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				justifyContent: "flex-end"
-			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				style: { display: "flex" },
-				children: [!searchExpanded && lowerTraySearch && /* @__PURE__ */ jsx(ToolBarButton, {
-					label: "Search",
-					component: SearchIcon,
-					click: expandSearch
-				}), searchToggle]
-			}), lowerTrayGrid && /* @__PURE__ */ jsx(GridControlLineUp, {})]
-		}) }),
-		/* @__PURE__ */ jsx("div", {
-			className: classes.secondaryButtonsMobile,
-			children: secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
-				return /* @__PURE__ */ jsx(ToolBarButton, {
-					label: item.label,
-					expanded: searchExpanded,
-					component: item.component,
-					click: item.click,
-					aria: item.label,
-					disabled: item.disabled
-				}, item.id ?? index);
-			})
-		})
-	] }, currentContainerId);
+	return /* @__PURE__ */ React.createElement("div", { key: currentContainerId }, /* @__PURE__ */ React.createElement("div", { className: single && classes.single }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapperBack }, clickBack && /* @__PURE__ */ React.createElement("div", { className: classes.iconButton }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: ArrowBackIcon,
+		onClick: clickBack
+	})), title && /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(StandardTitle, { removeMarginTop: single }, title), single && subheader && /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.denseSubtitle,
+		variant: "subtitle1",
+		component: "h2"
+	}, subheader), allowAdditionalTitleComponent && /* @__PURE__ */ React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value$1) => {
+		return value$1;
+	})))), !title && allowAdditionalTitleComponent && /* @__PURE__ */ React.createElement("div", { className: classes.additionalTitleComponent }, additionalTitleTeleportedComponents.map((value$1) => {
+		return value$1;
+	})), StatusChipProps && /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(StatusChip, {
+		label: StatusChipProps?.label,
+		status: StatusChipProps?.status
+	})))), /* @__PURE__ */ React.createElement("div", { className: classes.subHeaderWrapper }, stepper, !hideActionRow && /* @__PURE__ */ React.createElement("div", { className: classes.actionRow }, !single && subheader && /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.denseSubtitle,
+		variant: "subtitle1",
+		component: "h2"
+	}, subheader), /* @__PURE__ */ React.createElement("div", { className: grid ? classes.tabRow : classes.fullTabs }, tabList?.length > 0 && /* @__PURE__ */ React.createElement(UdpTabs, {
+		value,
+		onChange: handleChange,
+		tabList,
+		variant: tabVariant
+	})), search && searchToggle, /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtons }, !searchExpanded && search && /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label: "Search",
+		component: SearchIcon,
+		click: expandSearch
+	}), search && /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "vertical",
+		className: classes.divider
+	}), (expandGrid || resizeGrid || collapseGrid || exportGrid || saveGridConfig || deleteGridConfig || clearGridConfig) && upperTrayGrid && /* @__PURE__ */ React.createElement(GridControlLineUp, { expand }), grid && openFilter && gridControlsFilter.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}), grid && openGroups && gridControlsGroup.map((item) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			title: item.label,
+			expanded: true,
+			component: item.component,
+			click: item.click,
+			aria: item.aria,
+			key: item.id
+		});
+	}), grid && searchExpanded && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		id: "udpRecord-PrimaryActionHeader-ClosePanel",
+		udprecordid: "udpRecord-PrimaryActionHeader-ClosePanel",
+		icon: MoreVerticalIcon,
+		"aria-label": "Close Panel"
+	})), secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label,
+			disabled: item.disabled
+		});
+	})), /* @__PURE__ */ React.createElement("div", null, allowAdditionalRightComponent && allTeleporters.map(([targetId, location, teleporter]) => {
+		const Target = teleporter.Target;
+		if (targetId === additionalComponentId && location === "right") return /* @__PURE__ */ React.createElement("div", {
+			key: targetId,
+			className: "teleport-target"
+		}, /* @__PURE__ */ React.createElement(Target, null));
+		else return null;
+	})), !hidePAB && /* @__PURE__ */ React.createElement("div", { className: classes.pab }, topRowSecondary && topRowSecondary.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label
+		});
+	}), /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+		disabled: pabDisabled,
+		onClick: handleClick,
+		...otherProps
+	}, buttonLabel)))), /* @__PURE__ */ React.createElement("div", { className: clsx(classes.secondaryButtons, (altInputs || bottomRowSecondary) && classes.tabPageButtons) }, /* @__PURE__ */ React.createElement("div", { className: classes.buttomButtonRow }, /* @__PURE__ */ React.createElement("div", { className: classes.bottomButtonsLeft }, bottomRowSecondary && bottomRowSecondary.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: !tabs && searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index
+		});
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.bottomButtonsRigth }, bottomRowSecondaryRight && bottomRowSecondaryRight.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: !tabs && searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index
+		});
+	})), altInputs), /* @__PURE__ */ React.createElement("div", null, showGroups && /* @__PURE__ */ React.createElement(Divider, null), showGroups && groups)), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expandOptions,
+		timeout: "auto"
+	}, /* @__PURE__ */ React.createElement("div", { onMouseLeave: handleMouseLeave }, /* @__PURE__ */ React.createElement("div", { className: classes.advancedOptions }, expandedContent))), loading && /* @__PURE__ */ React.createElement(LinearProgress, { value: loadingVal })), lowerTray && /* @__PURE__ */ React.createElement(LowerTrayShell, null, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "flex-end"
+	} }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, !searchExpanded && lowerTraySearch && /* @__PURE__ */ React.createElement(ToolBarButton, {
+		label: "Search",
+		component: SearchIcon,
+		click: expandSearch
+	}), searchToggle), lowerTrayGrid && /* @__PURE__ */ React.createElement(GridControlLineUp, null))), /* @__PURE__ */ React.createElement("div", { className: classes.secondaryButtonsMobile }, secondaryButtons && !tabs && secondaryButtons.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(ToolBarButton, {
+			label: item.label,
+			expanded: searchExpanded,
+			component: item.component,
+			click: item.click,
+			key: item.id ?? index,
+			aria: item.label,
+			disabled: item.disabled
+		});
+	})));
 };
 PrimaryActionHeader.propTypes = {
 	buttonLabel: PropTypes.string,
@@ -1527,13 +1341,10 @@ const reducer = (state, action) => {
 */
 const PageContextProvider = ({ children }) => {
 	const [state, dispatch] = useReducer(reducer, initialState);
-	return /* @__PURE__ */ jsx(Provider, {
-		value: {
-			state,
-			dispatch
-		},
-		children
-	});
+	return /* @__PURE__ */ React.createElement(Provider, { value: {
+		state,
+		dispatch
+	} }, children);
 };
 
 //#endregion
@@ -1643,15 +1454,15 @@ const PageContainer = (props) => {
 				...widgetParams
 			};
 		});
-		return /* @__PURE__ */ jsx(DndProvider, {
+		return /* @__PURE__ */ React.createElement(DndProvider, {
 			backend: HTML5Backend,
-			children: /* @__PURE__ */ jsx(Page, {
-				user,
-				gridConfig: JSON.parse(page.gridProperties)[key],
-				widgetConfig: widget,
-				disableMargin
-			})
-		}, pageId ? `${key}-${params?.entityName}` : key);
+			key: pageId ? `${key}-${params?.entityName}` : key
+		}, /* @__PURE__ */ React.createElement(Page_default, {
+			user,
+			gridConfig: JSON.parse(page.gridProperties)[key],
+			widgetConfig: widget,
+			disableMargin
+		}));
 	}), [
 		page,
 		user,
@@ -1712,28 +1523,19 @@ const PageContainer = (props) => {
 		t,
 		page
 	]);
-	if (redirectSlug && !pageData) return /* @__PURE__ */ jsx(Redirect, { to: redirectSlug });
-	if (pageInfoLoading || pageLoading) return /* @__PURE__ */ jsx("div", {
-		className: classes.loadingContent,
-		children: /* @__PURE__ */ jsx(CircularProgress, { size: loadingHeight || 64 })
-	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [page?.showPageName && /* @__PURE__ */ jsx(Card, {
-		variant: "outlined",
-		children: /* @__PURE__ */ jsx(PrimaryActionHeader, {
-			title: page.name,
-			hidePAB: true,
-			single: true
-		})
-	}), /* @__PURE__ */ jsxs("div", {
-		className: page?.pageTypeId === 1 ? classes.staticRoot : classes.root,
-		children: [alertWarnings?.length > 0 && alertWarnings.map((warning) => /* @__PURE__ */ jsx(Alert, {
-			onClose: () => removeWarning(warning.id),
-			severity: "warning",
-			children: warning.message || ""
-		}, warning.id)), /* @__PURE__ */ jsx(PageContextProvider, { children: pages })]
-	})] });
+	if (redirectSlug && !pageData) return /* @__PURE__ */ React.createElement(Redirect, { to: redirectSlug });
+	if (pageInfoLoading || pageLoading) return /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, { size: loadingHeight || 64 }));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, page?.showPageName && /* @__PURE__ */ React.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React.createElement(PrimaryActionHeader, {
+		title: page.name,
+		hidePAB: true,
+		single: true
+	})), /* @__PURE__ */ React.createElement("div", { className: page?.pageTypeId === 1 ? classes.staticRoot : classes.root }, alertWarnings?.length > 0 && alertWarnings.map((warning) => /* @__PURE__ */ React.createElement(Alert, {
+		key: warning.id,
+		onClose: () => removeWarning(warning.id),
+		severity: "warning"
+	}, warning.message || "")), /* @__PURE__ */ React.createElement(PageContextProvider, null, pages)));
 };
 
 //#endregion
 export { AmbientPopoverMenuItem, FUICardHeaderMenu, FUICard_default, FUIMenuItem_default, FluentCard, FluentCardActions, FluentCardContent, PAHExport, PageContainer, PrimaryActionHeader, ToolBarButton, UdpTabs, WidgetCard, pageContext, useAllTeleporters, useSetLocationState, useTeleporterStore };
-//# sourceMappingURL=PageContainer-CWhjU1zS.js.map
+//# sourceMappingURL=PageContainer-B65gsUfF.js.map