udp-react-enterprise-component-library 25.16.0 → 25.16.2-beta.1

package/dist/PageContainer-BxChq1eP.js

@@ -1,1536 +0,0 @@
-import { FluentIcon, FluentIconButton, LayoutUnit, PrimaryActionButton, StandardTitle, StatusChip, useId, useShellStore } from "./EnvironmentRibbon-OD01SY9G.js";
-import { useAxiosGet } from "./useAxiosGet-Bi4Z0b8W.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 { ConfigService } from "udp-react-stencil-component-library";
-import { Redirect, useHistory, useLocation } from "react-router-dom";
-import clsx from "clsx";
-import { ArrowUpRightIcon, ChevronFold10Icon, ChevronRightIcon, ChevronUnfold10Icon, ClearIcon, DeleteIcon, ExcelDocumentIcon, FilterIcon, GroupListIcon, MaximumValueIcon, MoreIcon, MoreVerticalIcon, PDFIcon, SaveIcon, SearchIcon, TextDocumentIcon } from "@fluentui/react-icons";
-import PropTypes from "prop-types";
-import { useTranslation } from "react-i18next";
-import { create } from "zustand";
-import { v4 } from "uuid";
-import { createTeleporter } from "react-teleporter";
-import { Alert } from "@material-ui/lab";
-import { DndProvider, useDragLayer } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { Responsive } from "react-grid-layout";
-import { useMeasure } from "react-use";
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
-
-//#region src/stores/teleporterStore.ts
-const useTeleporterStore = create((set, get) => ({
-	teleporterMap: /* @__PURE__ */ new Map(),
-	getTeleporter: (targetId = "", location) => {
-		const mapCopy = new Map(get().teleporterMap);
-		let locationMap = mapCopy.get(targetId);
-		if (!locationMap) {
-			locationMap = /* @__PURE__ */ new Map();
-			mapCopy.set(targetId, locationMap);
-		}
-		if (!locationMap.has(location)) locationMap.set(location, { teleporter: createTeleporter() });
-		const teleporter = locationMap.get(location).teleporter;
-		set({ teleporterMap: mapCopy });
-		return teleporter;
-	},
-	getAllTeleporters: () => {
-		const result = [];
-		const map = get().teleporterMap;
-		for (const [targetId, locationMap] of map.entries()) for (const [location, entry] of locationMap.entries()) result.push([
-			targetId,
-			location,
-			entry.teleporter
-		]);
-		return result;
-	}
-}));
-
-//#endregion
-//#region src/UI/inputs/buttons/ToolBarButton.jsx
-const useStyles$12 = makeStyles((theme) => ({
-	root: { borderBottom: (props) => props.selected && `2px solid ${theme.palette.secondary.main}` },
-	wrapper: {
-		display: "flex",
-		flexDirection: "row",
-		marginRight: theme.spacing(2)
-	},
-	icon: {
-		fontSize: 16,
-		width: 16,
-		height: 16,
-		color: theme.palette.secondary.main
-	},
-	iconWrapper: {
-		background: theme.palette.common.white,
-		borderRadius: 100,
-		padding: theme.spacing(1)
-	},
-	label: {
-		marginLeft: theme.spacing(1),
-		fontSize: "0.875rem",
-		"&:hover": { color: theme.palette.secondary.main }
-	}
-}), { name: "ToolBarButton" });
-const ToolBarButton = (props) => {
-	const classes = useStyles$12(props);
-	const { component: ToolBarComponent, click, label, expanded, aria, icon = true, disabled = false } = props;
-	return /* @__PURE__ */ React.createElement(Tooltip, {
-		title: expanded && label || aria || "",
-		"aria-label": label,
-		placement: "top",
-		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,
-	click: PropTypes.func,
-	label: PropTypes.string,
-	expanded: PropTypes.bool,
-	aria: PropTypes.string,
-	icon: PropTypes.bool
-};
-
-//#endregion
-//#region src/dashboard/getWidgetLayout.ts
-const getW = (w) => {
-	if (typeof w === "object") return {
-		w: w.default,
-		minW: w.min,
-		maxW: w.max
-	};
-	if (typeof w === "number") return { w };
-	return { w: 2 };
-};
-const getH = (h) => {
-	if (typeof h === "object") return {
-		h: h.default,
-		minH: h.min,
-		maxH: h.max
-	};
-	if (typeof h === "number") return { h };
-	return { h: 2 };
-};
-/**
-* Get a default layout for widgets of a type
-*/
-function getWidgetLayout(getWidget, widgetType) {
-	const { w, h } = (getWidget && getWidget(widgetType)?.layout) ?? {};
-	const layout = {
-		...getW(w),
-		...getH(h)
-	};
-	const wResizable = "minW" in layout || "maxW" in layout;
-	const hResizable = "minH" in layout || "maxH" in layout;
-	layout.isResizable = wResizable || hResizable;
-	return layout;
-}
-
-//#endregion
-//#region src/dashboard/DashboardCardGrid.jsx
-const useStyle = makeStyles((theme) => ({ root: {
-	display: "flex",
-	flexDirection: "column",
-	width: "100%",
-	height: "100%",
-	marginBottom: (props) => props?.disableMargin ? "" : theme.spacing(3)
-} }), { name: "DashboardCardGrid" });
-const DASHBOARD_WIDGET = Symbol("DASHBOARD_WIDGET");
-const breakpoints = {
-	xs: 0,
-	xl: 1150
-};
-const breakpointCols = {
-	xs: 4,
-	xl: 4
-};
-/**
-* Grid layout for dashboard cards
-*/
-const DashboardCardGrid = (props) => {
-	const classes = useStyle(props);
-	const { children, onCreateCard, gridProperties,...other } = props;
-	const { getWidget } = useShellStore();
-	const rglRef = useRef();
-	const [ref, { width }] = useMeasure();
-	const theme = useTheme();
-	const { droppingWidgetType } = useDragLayer((monitor) => {
-		if (monitor.getItemType() === DASHBOARD_WIDGET) {
-			const { id: wigetType } = monitor.getItem();
-			return { droppingWidgetType: wigetType };
-		}
-		return { droppingWidgetType: null };
-	});
-	const droppingItemLayout = useMemo(() => {
-		if (droppingWidgetType) return {
-			i: v4(),
-			...getWidgetLayout(getWidget, droppingWidgetType)
-		};
-	}, [getWidget, droppingWidgetType]);
-	const drag = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {}, []);
-	const resize = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {
-		if (layoutItem.w >= 6 && layoutItem.w < 8) {
-			layoutItem.w = 4;
-			placeholder.w = 4;
-		}
-	}, []);
-	const drop = useCallback((layout, item) => {
-		if (droppingWidgetType) {
-			const { x, y, w, h } = item;
-			const { breakpoint } = rglRef.current.state;
-			if (onCreateCard) onCreateCard({
-				widgetType: droppingWidgetType,
-				id: v4(),
-				layout: { [breakpoint]: {
-					x,
-					y,
-					w,
-					h
-				} },
-				params: []
-			});
-		}
-	}, [droppingWidgetType, onCreateCard]);
-	return /* @__PURE__ */ React.createElement("div", {
-		ref,
-		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
-const useStyles$11 = makeStyles((theme) => ({
-	root: {
-		minHeight: 40,
-		paddingLeft: theme.spacing(2),
-		display: "flex",
-		flexDirection: "row",
-		alignItems: "center",
-		borderBottom: `1px solid ${theme.palette.divider}`
-	},
-	title: { flexGrow: 1 }
-}));
-const FUICardHeader = (props, ref) => {
-	const classes = useStyles$11(props);
-	const { className, children, headerActions, titleId,...other } = props;
-	return /* @__PURE__ */ React.createElement("div", {
-		ref,
-		...other,
-		className: clsx(className, classes.root)
-	}, /* @__PURE__ */ React.createElement(Typography, {
-		id: titleId,
-		className: classes.title
-	}, children), headerActions);
-};
-var FUICardHeader_default = forwardRef(FUICardHeader);
-
-//#endregion
-//#region src/UI/inputs/buttons/FUISquareIconButton.jsx
-const useStyles$10 = makeStyles((theme) => ({ root: { borderRadius: 0 } }), { name: "FUISquareIconButton" });
-/**
-* <IconButton> but with a square highlight
-*/
-const FUISquareIconButton = (props) => {
-	const classes = useStyles$10(props);
-	return /* @__PURE__ */ React.createElement(IconButton, {
-		...props,
-		classes
-	});
-};
-var FUISquareIconButton_default = FUISquareIconButton;
-
-//#endregion
-//#region src/UI/surfaces/cards/FluentCard.jsx
-const useStyles$9 = makeStyles({ root: {} }, { name: "FluentCard" });
-/**
-* A variant of <Card> that uses a square Fluent UI card style
-*/
-const FluentCard = forwardRef((props, ref) => {
-	const classes = useStyles$9(props);
-	const { children,...other } = props;
-	return /* @__PURE__ */ React.createElement(Card, {
-		ref,
-		square: true,
-		...other,
-		classes
-	}, children);
-});
-FluentCard.displayName = "FluentCard";
-
-//#endregion
-//#region src/UI/surfaces/cards/FluentCardContent.jsx
-const useStyles$8 = makeStyles({ root: {} }, { name: "FluentCardContent" });
-/**
-* A variant of <CardContent> that uses a Fluent UI card style
-*/
-const FluentCardContent = forwardRef((props, ref) => {
-	const classes = useStyles$8(props);
-	const { children,...other } = props;
-	return /* @__PURE__ */ React.createElement(CardContent, {
-		ref,
-		...other,
-		classes
-	}, children);
-});
-FluentCardContent.displayName = "FluentCardContent";
-
-//#endregion
-//#region src/UI/surfaces/cards/FluentCardActions.jsx
-const useStyles$7 = makeStyles({
-	root: {},
-	spacing: {}
-}, { name: "FluentCardActions" });
-/**
-* A variant of <CardActions> that uses a Fluent UI card style
-*/
-const FluentCardActions = forwardRef((props, ref) => {
-	const classes = useStyles$7(props);
-	const { children,...other } = props;
-	return /* @__PURE__ */ React.createElement(CardActions, {
-		ref,
-		...other,
-		classes
-	}, children);
-});
-FluentCardActions.displayName = "FluentCardActions";
-
-//#endregion
-//#region src/UI/surfaces/cards/FUICard.jsx
-const useStyles$6 = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexDirection: "column"
-	},
-	raised: { zIndex: 1 },
-	contentArea: {
-		flex: "1 1 auto",
-		minHeight: 0,
-		display: "flex",
-		flexDirection: "column"
-	},
-	cardActions: {
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "flex-start",
-		paddingTop: theme.spacing(1),
-		padding: theme.spacing(2)
-	}
-}), { name: "FUICard" });
-let FUICardAction = (props, ref) => {
-	const { children,...other } = props;
-	return /* @__PURE__ */ React.createElement(Button, {
-		ref,
-		size: "small",
-		variant: "contained",
-		disableElevation: true,
-		...other
-	}, children);
-};
-FUICardAction = forwardRef(FUICardAction);
-let FUICardHeaderMenu = (props, ref) => {
-	const { children } = props;
-	return /* @__PURE__ */ React.createElement("div", {
-		button: /* @__PURE__ */ React.createElement(FUISquareIconButton_default, null, /* @__PURE__ */ React.createElement(FluentIcon, {
-			component: MoreIcon,
-			size: "small"
-		})),
-		menu: /* @__PURE__ */ React.createElement(Menu, null, children)
-	});
-};
-FUICardHeaderMenu = forwardRef(FUICardHeaderMenu);
-const FUICard = (props, ref) => {
-	const classes = useStyles$6();
-	const { className, children, actions, title, headerActions, CardHeaderProps, CardProps, raised, name,...cardProps } = props;
-	const titleId = `${useId(name, cardProps.id)}-title`;
-	return /* @__PURE__ */ React.createElement(FluentCard, {
-		ref,
-		component: "section",
-		"aria-labelledby": titleId,
-		...cardProps,
-		raised,
-		className: clsx(className, raised && classes.raised),
-		...CardProps,
-		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);
-
-//#endregion
-//#region src/UI/widgets/FluentComponents/FUIMenuItem.jsx
-const useStyles$5 = makeStyles({ listItemIcon: { minWidth: 32 } }, { name: "FUIMenuItem" });
-/**
-* <MenuItem> with icon support
-*/
-const FUIMenuItem = (props, ref) => {
-	const classes = useStyles$5();
-	const { icon, fluentIcon, primary, secondary,...menuItemProps } = props;
-	return /* @__PURE__ */ React.createElement(MenuItem, {
-		ref,
-		dense: true,
-		...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);
-
-//#endregion
-//#region src/dashboard/WidgetCard.jsx
-/**
-* Core component for dashboard widget cards
-*/
-const WidgetCard = (props) => {
-	const { children, headerActions, className, widgetType, id, layout, params, setParam, onDelete, loading, errors, theme, hideWidgetName, innerPadding, contentHeight, contentMaxHeight,...other } = props;
-	const classes = makeStyles((theme$1) => ({
-		root: { "&.react-resizable-hide .react-resizable-handle": { display: "none" } },
-		darkRoot: {
-			"&.react-resizable-hide .react-resizable-handle": { display: "none" },
-			background: "#424242",
-			color: "white"
-		},
-		anyRoot: { "& .MuiCardContent-root": {
-			justifyContent: "space-between",
-			overflow: "auto",
-			padding: 0
-		} },
-		handle: {
-			cursor: "move",
-			"&:hover": { backgroundColor: theme$1.palette.action.hover },
-			display: hideWidgetName && "none"
-		},
-		loadingContent: {
-			flex: 1,
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "center",
-			justifyContent: "center"
-		},
-		innerWidgetContentContainer: {
-			height: widgetType === "TransformerLoadWidget" ? "auto" : contentHeight ? contentHeight : "100%",
-			maxHeight: contentMaxHeight ? contentMaxHeight : "",
-			minWidth: widgetType === "ProgressBarWidget" ? 0 : 270,
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "space-between",
-			padding: innerPadding || (widgetType === "VEERegisterRead" ? 0 : theme$1.spacing(2))
-		}
-	}))();
-	const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className ?? "");
-	let body = children;
-	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,
-		CardHeaderProps: {
-			className: classes.handle,
-			"data-handle": true
-		},
-		headerActions: /* @__PURE__ */ React.createElement(React.Fragment, null, headerActions, /* @__PURE__ */ React.createElement(FUICardHeaderMenu, null, /* @__PURE__ */ React.createElement(FUIMenuItem_default, {
-			onClick: onDelete,
-			fluentIcon: DeleteIcon,
-			primary: "Delete"
-		})))
-	}, /* @__PURE__ */ React.createElement("div", { className: classes.innerWidgetContentContainer }, body));
-};
-
-//#endregion
-//#region src/dashboard/DashboardWidget.jsx
-/**
-* Widget implementation for dashboards
-*/
-let DashboardWidget = (props) => {
-	const { widgetType, id, deleteCard, children, params: paramValues, setParams,...other } = props;
-	const { getWidget, isValidWidget } = useShellStore();
-	const onDelete = useCallback(() => {
-		deleteCard(id);
-	}, [deleteCard, id]);
-	const { Widget, params: paramDefs } = useMemo(() => {
-		if (!isValidWidget || !getWidget) return {};
-		if (isValidWidget(widgetType) && getWidget) return getWidget(widgetType);
-		return {};
-	}, [
-		widgetType,
-		getWidget,
-		isValidWidget
-	]);
-	const params = useMemo(() => {
-		const params$1 = {};
-		if (paramDefs) {
-			for (const name in paramDefs) params$1[name] = paramDefs[name].defaultValue;
-			for (const param in paramValues) params$1[param] = paramValues[param];
-		}
-		return params$1;
-	}, [paramDefs, paramValues]);
-	const setParam = useCallback((name, value) => setParams(id, { [name]: value }), [id, setParams]);
-	if (!isValidWidget || !getWidget) return /* @__PURE__ */ React.createElement(WidgetCard, {
-		...other,
-		title: "Error"
-	}, "isValidWidget or getWidget functions are not defined");
-	if (!Widget) return /* @__PURE__ */ React.createElement(WidgetCard, {
-		...other,
-		title: "Error"
-	}, "Unknown widget type \"", widgetType, "\".");
-	else return /* @__PURE__ */ React.createElement(Widget, {
-		...other,
-		id,
-		params,
-		setParam,
-		onDelete
-	}, children);
-};
-var DashboardWidget_default = memo(DashboardWidget);
-
-//#endregion
-//#region src/page/Page.jsx
-const Page = (props) => {
-	const { gridConfig, widgetConfig, disableMargin } = props;
-	const { getWidget, isValidWidget } = useShellStore();
-	const gridProperties = gridConfig ? JSON.parse(gridConfig) : null;
-	let widgets = widgetConfig || null;
-	if (typeof widgetConfig === "string") widgets = JSON.parse(widgetConfig);
-	const calculateLayouts = () => {
-		if (!widgets) return null;
-		const layouts$1 = {};
-		for (const widget of widgets) for (const breakpoint in widget.layout) {
-			if (breakpoint === "__typename" || !widget.layout[breakpoint]) continue;
-			layouts$1[breakpoint] = layouts$1[breakpoint] || [];
-			const { __typename,...layout } = widget.layout[breakpoint];
-			layouts$1[breakpoint].push({
-				...getWidgetLayout(getWidget, widget.widgetType),
-				isResizable: widget.params.isResizable || false,
-				...layout,
-				i: widget.id
-			});
-		}
-		return layouts$1;
-	};
-	const layouts = useMemo(() => calculateLayouts(), [calculateLayouts, widgetConfig]);
-	const cards = useMemo(() => widgets && widgets.map(({ __typename,...widget }) => /* @__PURE__ */ React.createElement(DashboardWidget_default, {
-		key: widget.id,
-		...widget
-	})), [widgets]);
-	if (!layouts) return null;
-	return /* @__PURE__ */ React.createElement(DashboardCardGrid_default, {
-		layouts,
-		gridProperties,
-		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__ */ 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
-//#region src/UI/utilityDisplay/utilityHeader/ui/PAHExport.jsx
-const useStyles$3 = makeStyles((theme) => ({
-	root: {},
-	popoverRoot: {},
-	icon: { color: theme.palette.secondary.main }
-}));
-const PAHExport = ({ exportCSV, exportExcel, exportPDF }) => {
-	const classes = useStyles$3();
-	const [anchorEl, setAnchorEl] = useState(null);
-	const handleClick = (event) => {
-		setAnchorEl(event.currentTarget);
-	};
-	const handleClose = () => {
-		setAnchorEl(null);
-	};
-	const open = Boolean(anchorEl);
-	const id = open ? "simple-popover" : void 0;
-	const gridControlsExport = [{
-		label: "Export CSV",
-		component: TextDocumentIcon,
-		click: exportCSV,
-		key: 1
-	}, {
-		label: "Export Excel",
-		component: ExcelDocumentIcon,
-		click: exportExcel,
-		key: 2
-	}];
-	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
-//#region src/UI/navigation/tabs/UdpTabs.jsx
-const useStyles$2 = makeStyles((theme) => ({
-	root: {
-		flexSkrink: 0,
-		overflow: "hidden"
-	},
-	tabsWrapper: {
-		display: "flex",
-		gap: (props) => props?.variant === "block" ? theme.spacing(1) : null,
-		flexGrow: 1
-	},
-	tab: {
-		padding: `8px 18px`,
-		flex: 1
-	},
-	blockTab: { backgroundColor: theme.palette.background.paper },
-	activeTab: {
-		borderBottom: (props) => props?.variant === "block" ? null : `2px solid ${theme.palette.secondary.main}`,
-		backgroundColor: (props) => props?.variant === "block" ? theme.palette.secondary.light : null,
-		color: (props) => props?.variant === "block" ? theme.palette.getContrastText(theme.palette.secondary.light) : null
-	},
-	moreButton: {
-		marginTop: theme.spacing(1),
-		width: theme.spacing(1),
-		height: theme.spacing(1),
-		borderRadius: 2
-	},
-	menuItem: {
-		whiteSpace: "normal",
-		width: (props) => props?.menuWidth ? props?.menuWidth : "170px"
-	},
-	popoverWrapper: { maxHeight: (props) => props?.menuMaxHeight ? props?.menuMaxHeight : "250px" }
-}));
-const UdpTabs = (props) => {
-	const { value, onChange, className, menuItemProps, tabList, variant, buttonWidth } = props;
-	const classes = useStyles$2(props);
-	const tabContainerRef = useRef(null);
-	const innerTabContainerRef = useRef(null);
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [visibleTabList, setVisibleTabList] = useState(null);
-	const [menuTabList, setMenuTabList] = useState(null);
-	const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);
-	const [initialTabWidth, setInitialTabWidth] = useState();
-	const gapWidth = 8;
-	const open = Boolean(anchorEl);
-	const currentTabList = useMemo(() => {
-		return tabList?.map((tab, index) => ({
-			id: index,
-			...tab,
-			ref: createRef()
-		}));
-	}, [tabList]);
-	const handlePopoverClick = useCallback((event, index) => {
-		setAnchorEl(event.currentTarget);
-	}, []);
-	const handlePopoverClose = () => {
-		setAnchorEl(null);
-	};
-	const menuItemSelected = useMemo(() => {
-		return !!menuTabList?.find((tab) => tab?.id === value);
-	}, [value, menuTabList]);
-	const getInitialTabWidth = useCallback((tabsElements, currentTabList$1) => {
-		let totalTabWidth = 0;
-		let tabWidth = [];
-		if (tabsElements?.length === currentTabList$1?.length && !initialTotalTabWidth) {
-			for (let i = 0; i < tabsElements.length; i++) {
-				totalTabWidth += tabsElements[i].clientWidth;
-				if (variant === "block") totalTabWidth += gapWidth;
-				tabWidth[i] = tabsElements[i].clientWidth;
-			}
-			setInitialTotalTabWidth(totalTabWidth);
-			setInitialTabWidth(tabWidth);
-			return {
-				totalTabWidth,
-				tabWidth
-			};
-		}
-		return {
-			totalTabWidth: initialTotalTabWidth,
-			tabWidth: initialTabWidth
-		};
-	}, [
-		initialTabWidth,
-		initialTotalTabWidth,
-		variant
-	]);
-	const calculateHiddenTabs = useCallback(() => {
-		if (innerTabContainerRef.current) {
-			const containerWidth = innerTabContainerRef.current.clientWidth;
-			const tabsElements = Array.from(innerTabContainerRef.current.children);
-			const moreBtnWidth = 24;
-			let hiddenTabsArray = [];
-			let visibleTabsArray = Array.from(currentTabList);
-			const { totalTabWidth, tabWidth } = getInitialTabWidth(tabsElements, currentTabList);
-			if (totalTabWidth > containerWidth) {
-				let accumulatedWidth = 0;
-				for (let i = 0; i < tabWidth?.length; i++) {
-					accumulatedWidth += tabWidth[i];
-					if (variant === "block") accumulatedWidth += gapWidth;
-					if (accumulatedWidth > containerWidth - moreBtnWidth) {
-						hiddenTabsArray = Array.from(currentTabList).slice(i);
-						visibleTabsArray = Array.from(currentTabList).slice(0, i);
-						break;
-					}
-				}
-			}
-			setVisibleTabList(visibleTabsArray);
-			setMenuTabList(hiddenTabsArray);
-		}
-	}, [
-		currentTabList,
-		getInitialTabWidth,
-		variant
-	]);
-	useEffect(() => {
-		setVisibleTabList(currentTabList);
-	}, [currentTabList]);
-	useEffect(() => {
-		calculateHiddenTabs();
-		const observer = new ResizeObserver((entries) => {
-			handlePopoverClose();
-			calculateHiddenTabs();
-		});
-		if (tabContainerRef.current) observer.observe(tabContainerRef.current);
-		return () => {
-			observer.disconnect();
-		};
-	}, [calculateHiddenTabs]);
-	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
-		className: clsx(classes.root, className),
-		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: clsx(classes.menuItem, className),
-			selected: tab?.id === value,
-			...menuItemProps
-		}, /* @__PURE__ */ React.createElement(Typography, null, tab?.label));
-	})))));
-};
-
-//#endregion
-//#region src/UI/utilityDisplay/utilityHeader/ui/teleporter.ts
-const useAllTeleporters = () => {
-	const teleporterMap = useTeleporterStore((state) => state.teleporterMap);
-	return useMemo(() => {
-		const result = [];
-		for (const [targetId, locationMap] of teleporterMap.entries()) for (const [location, entry] of locationMap.entries()) result.push([
-			targetId,
-			location,
-			entry.teleporter
-		]);
-		return result;
-	}, [teleporterMap]);
-};
-
-//#endregion
-//#region src/UI/utilityDisplay/utilityHeader/PrimaryActionHeader.jsx
-const useStyles$1 = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		[theme.breakpoints.between("xs", "sm")]: { height: 50 }
-	},
-	title: { margin: theme.spacing(2) },
-	titleWrapper: {
-		paddingLeft: theme.spacing(2),
-		paddingRight: (props) => props.single ? theme.spacing(2) : 0,
-		display: "flex",
-		alignItems: "center"
-	},
-	subHeaderWrapper: {
-		width: "100%",
-		marginTop: 0,
-		[theme.breakpoints.down("xs")]: { justifyContent: "flex-start" }
-	},
-	subHeader: {
-		minWidth: (props) => props.subheader && 320,
-		marginLeft: theme.spacing(2),
-		[theme.breakpoints.between("sm", "lg")]: { display: "none" },
-		[theme.breakpoints.down("xs")]: { display: "none" }
-	},
-	denseSubtitle: {
-		marginTop: theme.spacing(1.2),
-		marginLeft: theme.spacing(2)
-	},
-	actionRow: {
-		display: "flex",
-		flex: 1,
-		alignItems: "center"
-	},
-	secondaryButtons: {
-		display: "flex",
-		[theme.breakpoints.down("sm")]: { display: "none" },
-		alignItems: "center"
-	},
-	secondaryButtonsMobile: {
-		display: "flex",
-		padding: theme.spacing(1),
-		background: theme.palette.divider,
-		[theme.breakpoints.up("sm")]: { display: "none" }
-	},
-	search: {
-		marginRight: theme.spacing(2),
-		marginTop: theme.spacing(3),
-		flex: 1
-	},
-	close: { marginRight: theme.spacing(2) },
-	pab: {
-		display: "flex",
-		[theme.breakpoints.between("xs", "sm")]: {
-			position: "fixed",
-			bottom: theme.spacing(2),
-			right: theme.spacing(2),
-			zIndex: theme.zIndex.appBar
-		}
-	},
-	titleOnly: { paddingBottom: theme.spacing(1) },
-	advancedOptions: {
-		backgroundColor: "#EEEEEE",
-		width: "100%"
-	},
-	tabPageButtons: {
-		height: 50,
-		borderTop: `1px solid ${theme.palette.divider}`,
-		paddingLeft: theme.spacing(2),
-		backgroundColor: "#EEEEEE"
-	},
-	divider: {
-		height: 25,
-		marginLeft: theme.spacing(1),
-		marginRight: theme.spacing(2)
-	},
-	functionIcons: {
-		fontSize: 18,
-		color: theme.palette.secondary.main
-	},
-	tabRow: {
-		maxWidth: 500,
-		[theme.breakpoints.down("sm")]: { width: 300 },
-		minHeight: "48px"
-	},
-	fullTabs: {
-		[theme.breakpoints.down("xl")]: { maxWidth: 700 },
-		[theme.breakpoints.down("lg")]: { maxWidth: 500 },
-		[theme.breakpoints.down("sm")]: { maxWidth: "100vw" },
-		minHeight: "48px"
-	},
-	iconButton: {
-		marginTop: 9,
-		marginLeft: 4
-	},
-	titleWrapperBack: {
-		display: "flex",
-		flex: (props) => props.title && 1
-	},
-	buttomButtonRow: {
-		display: "flex",
-		width: "100%"
-	},
-	bottomButtonsLeft: {
-		display: "flex",
-		flex: 1,
-		justifyContent: "flex-start"
-	},
-	bottomButtonsRigth: {
-		display: "flex",
-		justifyContent: "flex-end"
-	},
-	single: { display: "flex" },
-	containerStyle: {
-		background: lighten(theme.palette.secondary.light, .9),
-		padding: theme.spacing(1),
-		paddingLeft: theme.spacing(2),
-		borderTop: `1px solid ${theme.palette.divider} `
-	},
-	gridControlLineUp: {
-		display: "flex",
-		alignItems: "center",
-		marginRight: theme.spacing(2)
-	},
-	additionalTitleComponent: { marginLeft: theme.spacing(2) }
-}));
-const PrimaryActionHeader = (props) => {
-	const classes = useStyles$1(props);
-	const { buttonLabel, title, subheader, handleClick, secondaryButtons, hidePAB = false, search, searchField, expandOptions, handleMouseLeave, expandedContent, handleChange, value, tabList, tabs, resizeGrid, collapse, expandAllItems, groups, showGroups, grid, clickBack, topRowSecondary, bottomRowSecondary, bottomRowSecondaryRight, loading, openGroups, openFilter, altInputs, loadingVal, exportGrid, openSearch = false, styleSearch, stepper, pabDisabled, switcher, single, lowerTray, lowerTraySearch, lowerTrayGrid, upperTrayGrid, exportCSV, exportExcel, exportPDF, expand, expandGrid, collapseGrid, resize, gridApi, saveGridConfig, deleteGridConfig, clearGridConfig, hideActionRow = false, allowAdditionalTitleComponent = false, allowAdditionalRightComponent = true, StatusChipProps = null, tabProps, tabVariant, additionalComponentId = "",...otherProps } = props;
-	const [searchExpanded, setSearchExpanded] = useState(openSearch);
-	const currentContainerId = useShellStore((state) => state.currentContainerId);
-	const allTeleporters = useAllTeleporters();
-	const expandSearch = () => {
-		setSearchExpanded(!searchExpanded);
-	};
-	const gridControlsExpand = [{
-		label: "",
-		aria: "expand",
-		component: ChevronUnfold10Icon,
-		click: expandGrid,
-		id: 1
-	}];
-	const gridControlsResize = [{
-		label: "",
-		aria: "resize",
-		component: MaximumValueIcon,
-		click: resizeGrid,
-		id: 2
-	}];
-	const gridControlsCollapse = [{
-		label: "",
-		aria: "collapse",
-		component: ChevronFold10Icon,
-		click: collapseGrid,
-		id: 3
-	}];
-	const gridControlsGroup = [{
-		label: "Group",
-		component: GroupListIcon,
-		click: openGroups,
-		id: 4
-	}];
-	const gridControlsFilter = [{
-		label: "Filter",
-		component: FilterIcon,
-		click: openFilter,
-		id: 5
-	}];
-	const gridControlsSave = [{
-		label: "Save Grid Configuration",
-		component: SaveIcon,
-		click: saveGridConfig,
-		id: 6
-	}];
-	const gridControlsDelete = [{
-		label: "Delete Grid Configuration",
-		component: DeleteIcon,
-		click: deleteGridConfig,
-		id: 7
-	}];
-	const gridControlsClear = [{
-		label: "Clear Grid Configuration",
-		component: ClearIcon,
-		click: clearGridConfig,
-		id: 8
-	}];
-	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PAHExport, {
-		exportCSV: exportCSV || (() => gridApi?.exportDataAsCsv()),
-		exportExcel: exportExcel || (() => gridApi?.exportDataAsExcel()),
-		exportPDF
-	}));
-	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,
-			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,
-			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,
-			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,
-			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,
-			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,
-			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 }
-	}, /* @__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__ */ React.createElement("div", { className: classes.containerStyle }, children);
-	};
-	const GridControlLineUp = () => {
-		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__ */ React.createElement("div", {
-				key: targetId,
-				className: "teleport-target"
-			}, /* @__PURE__ */ React.createElement(Target, null)));
-		});
-		return components;
-	}, [additionalComponentId, allTeleporters]);
-	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,
-	title: PropTypes.string.isRequired,
-	subheader: PropTypes.string,
-	handleClick: PropTypes.func,
-	secondaryButtons: PropTypes.arrayOf(PropTypes.shape({
-		label: PropTypes.string,
-		component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-		click: PropTypes.func,
-		key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-	})),
-	hidePAB: PropTypes.bool,
-	search: PropTypes.bool,
-	searchField: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-	expandOptions: PropTypes.func,
-	handleMouseLeave: PropTypes.string,
-	expandedContent: PropTypes.node,
-	handleChange: PropTypes.string,
-	value: PropTypes.oneOfType([PropTypes.node, false]),
-	tabList: PropTypes.node,
-	tabs: PropTypes.bool,
-	resizeGrid: PropTypes.func,
-	collapse: PropTypes.func,
-	expandAllItems: PropTypes.func,
-	saveGridConfig: PropTypes.func,
-	deleteGridConfig: PropTypes.func,
-	clearGridConfig: PropTypes.func,
-	groups: PropTypes.node,
-	grid: PropTypes.bool,
-	otherProps: PropTypes.any,
-	bottomRowSecondary: PropTypes.array,
-	topRowSecondary: PropTypes.array,
-	clickBack: PropTypes.func,
-	loading: PropTypes.bool,
-	loadingVal: PropTypes.number,
-	openGroups: PropTypes.func,
-	openFilter: PropTypes.func,
-	altInputs: PropTypes.node,
-	hideActionRow: PropTypes.bool,
-	tabProps: PropTypes.object,
-	single: PropTypes.bool
-};
-PrimaryActionHeader.defaultProps = { hidePAB: false };
-
-//#endregion
-//#region src/contexts/PageContext.tsx
-const initialState = {};
-/**
-* The Page context, shared amongst the Page
-* and all children. Generally used to share state between
-* Widgets. Call dispatch() to update the state. Currently
-* only supports dispatch types of "set <state_property>".
-* Example: dispatch({ type: "set mySharedProperty", value: oldSharedProperty + 1 });
-*/
-const pageContext = createContext({});
-const { Provider } = pageContext;
-/**
-* Sets shared state based on an action type and a value.
-* action.type is in the format: <operator> <prop>
-* Currently the only supported action type is "set <prop>",
-* which will set state.prop to action.value.
-* @param state The current state
-* @param action A type and value to alter the current state
-* @returns The new state
-*/
-const reducer = (state, action) => {
-	const operator = action.type.substr(0, action.type.indexOf(" "));
-	const prop = action.type.substr(action.type.indexOf(" ") + 1);
-	switch (operator) {
-		case "set": return {
-			...state,
-			[prop]: action.value
-		};
-		default: throw new Error("Unknown operator");
-	}
-};
-/**
-* A Context component to wrap around a Page. Allows
-* sharing of state amongst sibling Widgets.
-* @returns
-*/
-const PageContextProvider = ({ children }) => {
-	const [state, dispatch] = useReducer(reducer, initialState);
-	return /* @__PURE__ */ React.createElement(Provider, { value: {
-		state,
-		dispatch
-	} }, children);
-};
-
-//#endregion
-//#region src/hooks/useSetLocationState.js
-const useSetLocationState = () => {
-	const history = useHistory();
-	const location = useLocation();
-	const setLocationState = (newState) => {
-		const currentState = location.state || {};
-		if (!Object.entries(newState).some(([key, value]) => currentState[key] !== value) || !!location?.state) return;
-		history.replace({
-			pathname: location.pathname,
-			search: location.search,
-			hash: location.hash,
-			state: {
-				...currentState,
-				...newState
-			}
-		});
-	};
-	return setLocationState;
-};
-
-//#endregion
-//#region src/page/PageContainer.jsx
-const useStyles = makeStyles((theme) => ({
-	root: {
-		marginTop: (props) => props.disableMargins ? 0 : theme.spacing(3),
-		marginRight: (props) => props.disableMargins ? 0 : theme.spacing(3),
-		marginLeft: (props) => props.disableMargins ? 0 : theme.spacing(3),
-		height: (props) => props.height ?? "100%",
-		overflow: (props) => props.height && "auto"
-	},
-	staticRoot: {
-		marginTop: 0,
-		marginRight: 0,
-		marginLeft: 0,
-		height: (props) => props.height ?? "100%",
-		overflow: (props) => props.height && "auto"
-	},
-	title: {
-		flex: 1,
-		marginBottom: theme.spacing(1)
-	},
-	icon: { marginTop: theme.spacing(-2.5) },
-	loadingContent: {
-		flex: 1,
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-		justifyContent: "center",
-		height: (props) => props.loadingHeight ? props.loadingHeight : "calc(100vh - 160px)"
-	}
-}));
-const PageContainer = (props) => {
-	const { user, widgetParams, redirectSlug, pageData, pageLoading = false, disableMargin = true, location, fromMenu = false, loadingHeight, isHomePage = false } = props;
-	const classes = useStyles(props);
-	const [page, setPage] = useState(null);
-	const [alertWarnings, setAlertWarnings] = useState([]);
-	const params = location?.state?.params;
-	const pathPageId = location?.pathname?.replace("/page/", "");
-	const pageId = (pathPageId === "/" ? null : pathPageId) || params?.PageId;
-	const { t } = useTranslation();
-	const setLocationState = useSetLocationState();
-	const [{ data: pageInfo, loading: pageInfoLoading }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${pageId}`, {}, !!!pageId, false);
-	const [{ data: homePage, loading: homePageLoading, error: homePageError }, refetchHomePage] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/homePage?tenantId=${user?.currentTenantId}&productId=${ConfigService.config.UNITY_PRODUCT_ID}`, {}, !isHomePage, false);
-	const removeWarning = useCallback((id) => {
-		setAlertWarnings((prevWarnings) => prevWarnings.filter((warning) => warning.id !== id));
-	}, []);
-	const getRequiredFieldWarnings = useCallback((requiredFields = "", widgetParams$1) => {
-		const fieldsStr = requiredFields || "";
-		if (!fieldsStr.trim()) return;
-		const warnings = [];
-		const requiredFieldsMap = widgetParams$1?.requiredFieldsMap || {};
-		const nodeObj = widgetParams$1?.nodeObj || {};
-		const fields = fieldsStr.split(",").map((str) => str.trim());
-		const missingRequiredFieldNames = [];
-		fields.forEach((fieldName) => {
-			const requiredField = requiredFieldsMap[fieldName];
-			if (!requiredField?.value) missingRequiredFieldNames.push(fieldName);
-			else if (requiredField.type === "entity" && (nodeObj[requiredField.value] === void 0 || nodeObj[requiredField.value] === null)) missingRequiredFieldNames.push(fieldName);
-		});
-		missingRequiredFieldNames.forEach((name) => {
-			warnings.push({
-				id: v4(),
-				message: `${name} ${t("field is missing a value")}`
-			});
-		});
-		return warnings;
-	}, [t]);
-	const pages = useMemo(() => page?.widgets && Object.keys(JSON.parse(page.widgets)).map((key) => {
-		const widgetStr = JSON.parse(page.widgets)[key];
-		const widget = widgetStr ? JSON.parse(widgetStr) : null;
-		if (widget?.length) widget.forEach((w) => {
-			if (pageId) w.params = {
-				entityName: params?.entityName,
-				pbiReportCode: params?.pbiReportCode,
-				queryId: params?.queryId,
-				inquiryTreeId: params?.InquiryTreeId,
-				udpTagId: params?.udpTagId,
-				requiredFieldsMap: params?.requiredFieldMapping,
-				...w.params
-			};
-			if (widgetParams) w.params = {
-				...w.params,
-				...widgetParams
-			};
-		});
-		return /* @__PURE__ */ React.createElement(DndProvider, {
-			backend: HTML5Backend,
-			key: pageId ? `${key}-${params?.entityName}` : key
-		}, /* @__PURE__ */ React.createElement(Page_default, {
-			user,
-			gridConfig: JSON.parse(page.gridProperties)[key],
-			widgetConfig: widget,
-			disableMargin
-		}));
-	}), [
-		page,
-		user,
-		widgetParams,
-		disableMargin,
-		pageId,
-		params
-	]);
-	useEffect(() => {
-		if (pageId) {
-			if (pageInfo) setPage(pageInfo);
-		} else if (homePage) setPage(homePage);
-		else setPage(pageData);
-		setAlertWarnings([]);
-	}, [
-		pageId,
-		pageInfo,
-		pageData,
-		homePage
-	]);
-	useEffect(() => {
-		if (page?.widgets) {
-			let warnings = [];
-			Object.keys(JSON.parse(page.widgets)).forEach((key) => {
-				const widgetStr = JSON.parse(page.widgets)[key];
-				const widget = widgetStr ? JSON.parse(widgetStr) : null;
-				if (widget?.length) widget.forEach((w) => {
-					if (pageId) w.params = {
-						entityName: params?.entityName,
-						pbiReportCode: params?.pbiReportCode,
-						queryId: params?.queryId,
-						inquiryTreeId: params?.InquiryTreeId,
-						udpTagId: params?.udpTagId,
-						requiredFieldsMap: params?.requiredFieldMapping,
-						...w.params
-					};
-					if (widgetParams) w.params = {
-						...w.params,
-						...widgetParams
-					};
-					if (fromMenu || page?.pageId === widgetParams?.pageId) warnings = getRequiredFieldWarnings(w.requiredParameters, w.params);
-				});
-			});
-			setAlertWarnings(warnings);
-		}
-	}, [
-		page,
-		widgetParams,
-		pageId,
-		params,
-		fromMenu,
-		getRequiredFieldWarnings
-	]);
-	useEffect(() => {
-		if (page) setLocationState({ label: t(page?.name) });
-	}, [
-		setLocationState,
-		t,
-		page
-	]);
-	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-BxChq1eP.js.map