udp-react-enterprise-component-library 25.14.1-beta.8 → 25.16.0

package/dist/AmbientGridTemplate-Ch1eLyEu.js

@@ -0,0 +1,3478 @@
+import { Field, Form, SideSheet } from "./SideSheet-D48-jzNi.js";
+import { FluentButton, FluentIcon, GridStateTypeEnums, LayoutUnit, NodeActionEnums, PrimaryActionButton, PrimaryActionButton_default, SplitScreenTypeEnums, UnityFluentIcon, VisibilityTypeEnums, useId, useShellStore } from "./EnvironmentRibbon-OD01SY9G.js";
+import { ClickOpenEnums, useHandleAxiosSnackbar } from "./apiHelpers-DZPI1QCL.js";
+import { useAxiosGet } from "./useAxiosGet-Bi4Z0b8W.js";
+import { apiMutate as apiMutate$1 } from "./useAxiosMutate-pB7OdGIa.js";
+import React, { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Badge, Box, Button, ButtonGroup, Chip, ClickAwayListener, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FormControlLabel, Grid, Grow, IconButton, InputAdornment, LinearProgress, MenuItem, MenuList, Paper, Popover, Popper, Switch, Tab, Tabs, TextField, Tooltip, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useSnackbar } from "notistack";
+import { useHistory } from "react-router-dom";
+import clsx from "clsx";
+import { AppIconDefaultIcon, AssessmentGroupIcon, BlockedIcon, BulletedTreeListIcon, ChevronDownIcon, ChevronFold10Icon, ChevronUnfold10Icon, ChromeCloseIcon, ClearIcon, CombineIcon, DeleteIcon, DownloadIcon, ErrorIcon, ExportIcon, FavoriteStarIcon, FilterIcon, LightbulbIcon, MoreVerticalIcon, OpenInNewTabIcon, SaveIcon, SearchIcon, TableHeaderRowIcon, TripleColumnIcon, UploadIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+import { makeStyles as makeStyles$1, useTheme as useTheme$1, withStyles as withStyles$1 } from "@material-ui/core/styles";
+import { Skeleton } from "@material-ui/lab";
+import "./style.css";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import { isFragment } from "react-is";
+import { capitalize } from "@material-ui/core/utils";
+import { ServerSideRowModelModule } from "@ag-grid-enterprise/server-side-row-model";
+import invariant from "invariant";
+import { AllModules } from "@ag-grid-enterprise/all-modules";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material.css";
+import "./utilities/aggrid/ag-grid-styles.scss";
+import { AgGridReact } from "@ag-grid-community/react";
+import { ExcelExportModule } from "@ag-grid-enterprise/excel-export";
+import { bindPopper, bindTrigger, usePopupState } from "material-ui-popup-state/hooks";
+import { ArrowDropDown } from "@material-ui/icons";
+import { LicenseManager } from "@ag-grid-enterprise/core";
+import Chip$1 from "@material-ui/core/Chip";
+import Divider$1 from "@material-ui/core/Divider";
+import Tooltip$1 from "@material-ui/core/Tooltip";
+import Typography$1 from "@material-ui/core/Typography";
+import StarIcon from "@material-ui/icons/Star";
+
+//#region src/AGLicense.js
+const LicenseKey = "Using_this_{AG_Grid}_Enterprise_key_{AG-080613}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Univerus_Software_Inc}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{MAIS_eRec}_only_for_{1}_Front-End_JavaScript_developer___All_Front-End_JavaScript_developers_working_on_{MAIS_eRec}_need_to_be_licensed___{MAIS_eRec}_has_not_been_granted_a_Deployment_License_Add-on___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{28_June_2026}____[v3]_[01]_MTc4MjYwMTIwMDAwMA==5c7d1487ecb13b28e75415d34b7cf694";
+
+//#endregion
+//#region src/utilities/maintenanceEngine/CrudBrowserUtilities.js
+const RESERVED_PATH_PARAMETERS = ["version", "udp-api-version"];
+const getPrimaryKeyValues = (properties, entityValue) => {
+	return properties.filter((property) => property?.extendedProperties?.identifier).reduce((keyValues, property) => {
+		if (entityValue && entityValue[property["name"]] !== null) keyValues.push(entityValue[property["name"]]);
+		return keyValues;
+	}, []);
+};
+const getPathObject = (pathParameters, primaryKeyValues) => {
+	const primaryKeyParameters = pathParameters.filter((parameter) => parameter.name !== RESERVED_PATH_PARAMETERS);
+	const pathObject = {};
+	if (primaryKeyParameters.length && primaryKeyValues.length) primaryKeyParameters.forEach((pkp, index) => {
+		pathObject[`{${pkp.name}}`] = primaryKeyValues[index];
+	});
+	return pathObject;
+};
+const findTermByType = (fieldType, term) => {
+	if (fieldType.toLowerCase() === term) return fieldType.toLowerCase();
+	else return "";
+};
+const getModelProperties = (model, componentsObj) => {
+	let modelPropertiesObj = null;
+	if (model) {
+		modelPropertiesObj = model.properties;
+		if (!modelPropertiesObj) {
+			const refKeys = [];
+			if (model["allOf"]?.length) model["allOf"].forEach((reference) => {
+				if (reference["$ref"]) {
+					const refString = reference["$ref"];
+					if (refString) {
+						const lastIndex = refString.lastIndexOf("/");
+						const referenceModel = refString.substring(lastIndex + 1);
+						refKeys.push(referenceModel);
+					}
+				}
+			});
+			refKeys.forEach((key) => {
+				const abstractModel = componentsObj[key];
+				if (modelPropertiesObj && abstractModel?.properties) modelPropertiesObj = {
+					...modelPropertiesObj,
+					...abstractModel.properties
+				};
+				else modelPropertiesObj = abstractModel?.properties;
+			});
+		}
+	}
+	return modelPropertiesObj;
+};
+const getEntityAttributes = (catalog, entityName) => {
+	if (!catalog) return [];
+	const catalogObjectList = catalog?.ctlg?.catalogObjectList;
+	const componentsObj = catalog?.ctlg?.components;
+	const entity = catalogObjectList?.find((catalogObject) => catalogObject.catalogObjectName === entityName);
+	if (!!componentsObj && Object.keys(componentsObj).length) {
+		const model = componentsObj[entityName];
+		let modelPropertiesObj = getModelProperties(model, componentsObj);
+		if (entity?.properties?.length) entity.properties.forEach((property) => {
+			let nullable = true;
+			if (modelPropertiesObj) {
+				const modelProperty = modelPropertiesObj[property["name"]];
+				if (modelProperty) nullable = modelProperty.nullable || false;
+			}
+			property["nullable"] = nullable;
+		});
+	}
+	return entity ? entity.properties : [];
+};
+const getPathParametersObj = (pathParametersDefinition, entityData) => {
+	if (!pathParametersDefinition || !entityData) return {};
+	const pathParametersObj = {};
+	for (let param of pathParametersDefinition) pathParametersObj[param.name] = entityData[param.name];
+	return pathParametersObj;
+};
+
+//#endregion
+//#region src/contexts/ActionDispatchContext.js
+const ActionDispatchContext = createContext(null);
+
+//#endregion
+//#region src/contexts/ActionContext.js
+const ActionContext = createContext(null);
+
+//#endregion
+//#region src/UI/SuccessAction.jsx
+const getSuccessAction = (closeSnackbar) => {
+	const successAction = (key) => /* @__PURE__ */ React.createElement(Button, {
+		color: "secondary",
+		size: "small",
+		onClick: () => {
+			closeSnackbar(key);
+		}
+	}, "OK");
+	return successAction;
+};
+
+//#endregion
+//#region src/stores/actionStore.ts
+const useActionStore = create()(devtools((set) => ({
+	selectedNode: null,
+	setSelectedNode: (selectedNode) => set((state) => ({ selectedNode })),
+	hideActions: false,
+	setHideActions: (hideActions) => set((state) => ({ hideActions }))
+})));
+
+//#endregion
+//#region src/stores/inquiryStore.ts
+const useInquiryStore = create()(devtools((set) => ({
+	title: "",
+	setInquiryToolbarTitle: (title) => set((state) => ({ title })),
+	workflowMap: {},
+	setWorkflowMap: (workflowMap) => set((state) => ({ workflowMap: {
+		...state.workflowMap,
+		...workflowMap
+	} })),
+	workflowStarting: false,
+	setWorkflowStarting: (workflowStarting) => set((state) => ({ workflowStarting })),
+	inquiryMenuHidden: false,
+	setInquiryMenuHidden: (inquiryMenuHidden) => set((state) => ({ inquiryMenuHidden }))
+})));
+const useSetInitialInquiryMenuVisibility = () => {
+	const searchParams = new URLSearchParams(window.location.search);
+	const inquiryMenuHidden = searchParams.has("inquiryMenuHidden") === true ? searchParams.get("inquiryMenuHidden") === "true" ? true : false : false;
+	const setInquiryMenuHidden = useInquiryStore((state) => state.setInquiryMenuHidden);
+	useEffect(() => {
+		if (inquiryMenuHidden) setInquiryMenuHidden(true);
+	}, [setInquiryMenuHidden, inquiryMenuHidden]);
+};
+
+//#endregion
+//#region src/actions/utils/actionUtils.js
+function isValidURL(url) {
+	return /^(ftp|http|https):\/\/[^ "]+$/.test(url);
+}
+const useHandleAction = () => {
+	const history = useHistory();
+	const { t } = useTranslation();
+	const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+	const successAction = getSuccessAction(closeSnackbar);
+	const selectedNode = useActionStore((state) => state.selectedNode);
+	const setWorkflowMap = useInquiryStore((state) => state.setWorkflowMap);
+	const setWorkflowStarting = useInquiryStore((state) => state.setWorkflowStarting);
+	const executeStartWorkflow = async (workflowId, payload) => apiMutate$1(ConfigService.config.BUILDER_API_BASE, `workflow/${workflowId}/start`, { method: "post" }, { data: payload });
+	const getApiMethod = async (apiMethodId) => apiMutate$1(ConfigService.config.INTEGRATION_API_BASE, `apimethod/${apiMethodId}`, { method: "get" });
+	const handleAction = async (dispatch, action, state, executeAction, apiCatalogId, entityAttributes, actionData, currentContainerId) => {
+		if (!action) return;
+		const actionName = action.name;
+		let actionValue = action.value;
+		if (action?.parameters?.entityName) actionValue += "?entityName=" + action.parameters.entityName + "&apiCatalogId=" + apiCatalogId;
+		switch (action.actionTypeId) {
+			case NodeActionEnums.Open_External_Link:
+				window.open(actionValue, "_blank");
+				break;
+			case NodeActionEnums.Redirect:
+				if (isValidURL(actionValue)) window.location.href = actionValue;
+				else history.push(actionValue);
+				break;
+			case NodeActionEnums.Create:
+				if (dispatch) dispatch({
+					type: "OPEN_SIDESHEET",
+					sideSheet: {
+						action,
+						open: true
+					}
+				});
+				break;
+			case NodeActionEnums.Update:
+				if (dispatch) dispatch({
+					type: "OPEN_SIDESHEET",
+					sideSheet: {
+						action,
+						open: true
+					}
+				});
+				break;
+			case NodeActionEnums.Delete:
+				if (dispatch) dispatch({
+					type: "OPEN_MODAL",
+					modal: {
+						action,
+						open: true,
+						title: "Delete "
+					}
+				});
+				break;
+			case NodeActionEnums.Retrieve:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Entity
+					}
+				});
+				break;
+			case NodeActionEnums.Open_Page_Split_Screen:
+				if (dispatch) if (!!selectedNode) dispatch({
+					type: "OPEN_PAGE_CONTAINER_SPLIT_SCREEN",
+					pageContainerSplitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Page
+					}
+				});
+				else dispatch({
+					type: "OPEN_PAGE_SPLIT_SCREEN",
+					pageSplitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Page
+					}
+				});
+				break;
+			case NodeActionEnums.Open_Shell_Split_Screen:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Page
+					}
+				});
+				break;
+			case NodeActionEnums.Open_Notes:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Notes
+					}
+				});
+				break;
+			case NodeActionEnums.Open_Reminders:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: SplitScreenTypeEnums.Reminders
+					}
+				});
+				break;
+			case NodeActionEnums.Execute_Api:
+				if (executeAction && action?.value) {
+					let data = {};
+					if (entityAttributes.length > 0 && (selectedNode?.nodeObj || actionData)) {
+						if (actionData) data = { ...actionData };
+						else data = { ...selectedNode?.nodeObj };
+						entityAttributes.filter((p) => p?.extendedProperties?.childEntity).forEach((att) => {
+							if (att["name"] in data || "serializeFields" in data) delete data[att["name"]];
+						});
+					}
+					const pathParamValues = getPathParametersObj((await getApiMethod(action?.value))?.data?.pathParametersDefinition, data);
+					executeAction({ data: {
+						requestBody: data,
+						...pathParamValues
+					} }, action.value).then((res) => {
+						enqueueSnackbar(t(`${action?.name} api has been executed successfully.`), {
+							anchorOrigin: {
+								vertical: "top",
+								horizontal: "center"
+							},
+							action: successAction
+						});
+					}).catch((res) => {
+						enqueueSnackbar(res.message, {
+							variant: "error",
+							anchorOrigin: {
+								vertical: "top",
+								horizontal: "center"
+							}
+						});
+					});
+				} else enqueueSnackbar(t(`Unable to execute ${actionName} action.`), {
+					variant: "error",
+					anchorOrigin: {
+						vertical: "top",
+						horizontal: "center"
+					}
+				});
+				break;
+			case NodeActionEnums.Start_Workflow:
+				setWorkflowStarting(true);
+				const response = await executeStartWorkflow(actionValue, actionData || {}).catch((e) => {
+					enqueueSnackbar(t(`Unable to Start Workflow`), {
+						variant: "error",
+						anchorOrigin: {
+							vertical: "top",
+							horizontal: "center"
+						}
+					});
+				});
+				setWorkflowStarting(false);
+				if (response.status === 200) {
+					const playId = response.data;
+					if (selectedNode) {
+						const workflow = {
+							inWorkflowMode: true,
+							currentWorkflowPlayId: playId
+						};
+						setWorkflowMap({ [currentContainerId || 0]: workflow });
+					} else history.push({
+						pathname: `/workflowtask/${playId}?taskId=`,
+						state: { label: t("Workflow") }
+					});
+				}
+				break;
+			case NodeActionEnums.Execute_Function:
+				actionData?.execute && actionData.execute();
+				break;
+			default: break;
+		}
+	};
+	return { handleAction };
+};
+
+//#endregion
+//#region src/contexts/ActionLoadingDispatchContext.js
+const ActionLoadingDispatchContext = createContext(null);
+
+//#endregion
+//#region src/stores/catalogStore.ts
+const useCatalogStore = create()(devtools((set) => ({
+	currentApiCatalogId: "",
+	setCurrentApiCatalogId: (apiCatalogId) => {
+		sessionStorage.setItem("current-api-catalog-id", apiCatalogId);
+		set((state) => ({ currentApiCatalogId: apiCatalogId }));
+	},
+	catalogsMap: {},
+	setCatalogsMap: (catalogsMap) => set((state) => ({ catalogsMap: {
+		...state.catalogsMap,
+		...catalogsMap
+	} })),
+	promotedEntityMap: {},
+	setPromotedEntityMap: (promotedEntityMap) => set((state) => ({ promotedEntityMap: {
+		...state.promotedEntityMap,
+		...promotedEntityMap
+	} })),
+	promotedMethodEntitiesMap: {},
+	setPromotedMethodEntitiesMap: (promotedMethodEntitiesMap) => set((state) => ({ promotedMethodEntitiesMap: {
+		...state.promotedMethodEntitiesMap,
+		...promotedMethodEntitiesMap
+	} }))
+})));
+
+//#endregion
+//#region src/hooks/useActions.js
+const useActions = () => {
+	const dispatch = useContext(ActionDispatchContext);
+	const dispatchActionLoading = useContext(ActionLoadingDispatchContext);
+	const actionState = useActionState();
+	const { catalogsMap, currentApiCatalogId } = useCatalogStore();
+	const currentContainerId = useShellStore((state) => state.currentContainerId);
+	const { enqueueSnackbar } = useSnackbar();
+	const { t } = useTranslation();
+	const { handleAction } = useHandleAction();
+	const setActionLoading = useCallback((loading) => {
+		dispatchActionLoading({
+			type: "SET_ACTION_LOADING",
+			loading
+		});
+	}, [dispatchActionLoading]);
+	const setActionWaitingToExecute = useCallback((actionId) => {
+		dispatchActionLoading({
+			type: "SET_ACTION_WAITING_TO_EXECUTE",
+			actionId
+		});
+	}, [dispatchActionLoading]);
+	const executeGetAction = useCallback(async (actionId) => apiMutate$1(ConfigService.integrationV1ApiUrl, `action/${actionId}`, { method: "get" }, {}), []);
+	const executeAction = useCallback(async (data, id) => apiMutate$1(ConfigService.integrationV1ApiUrl, `apimethod/executeQueryWithParameters/${id}`, { method: "post" }, data), []);
+	const setActionPanels = useCallback((actionPanels, containerId) => {
+		dispatch({
+			type: "SET_ACTION_PANELS",
+			actionPanels,
+			containerId
+		});
+	}, [dispatch]);
+	const getActionPanelByAction = useCallback((act) => {
+		if (act && actionState) {
+			const actionPanels = actionState.actionPanels;
+			const containerId = currentContainerId || 0;
+			if (actionPanels && Array.isArray(actionPanels) && actionPanels[containerId]) {
+				const actionPanel = actionPanels[containerId];
+				if (Array.isArray(actionPanel.panelActions)) return actionPanel.find((ap) => {
+					return ap.panelActions.find((pa) => {
+						return pa.actionId === act.actionId;
+					});
+				});
+				else console.error("panelActions is not an array:", actionPanel.panelActions);
+			} else console.error("actionPanels is not valid:", actionPanels);
+		} else console.error("act or actionState is not defined:", act, actionState);
+		return null;
+	}, [actionState, currentContainerId]);
+	const setupAndExecuteAction = useCallback(async (catalog, actionId, actionData) => {
+		await executeGetAction(actionId).then((resp) => {
+			const panel = getActionPanelByAction(resp.data);
+			let entityName = panel?.entityName;
+			if (!panel) entityName = resp?.data?.parameters?.entityName;
+			if (entityName) {
+				actionState?.setCurrentEntityName && actionState.setCurrentEntityName(entityName);
+				const eAttributes = getEntityAttributes(catalog, entityName);
+				if (!eAttributes?.length && resp.data.actionTypeId !== NodeActionEnums.Start_Workflow) enqueueSnackbar(t(`Unable to retrieve entity attributes.`), {
+					variant: "error",
+					anchorOrigin: {
+						vertical: "top",
+						horizontal: "center"
+					}
+				});
+				else handleAction(dispatch, resp.data, actionState, executeAction, catalog?.apiCatalogId, eAttributes, actionData, currentContainerId);
+			} else {
+				console.warn("Entity name does not exist");
+				handleAction(dispatch, resp.data, actionState, executeAction, catalog?.apiCatalogId, {}, actionData, currentContainerId);
+			}
+		});
+	}, [
+		actionState,
+		enqueueSnackbar,
+		executeAction,
+		executeGetAction,
+		getActionPanelByAction,
+		handleAction,
+		t,
+		dispatch,
+		currentContainerId
+	]);
+	const executeTriggerAction = useCallback(async (actionId, actionData) => {
+		if (actionState?.catalogPromise) {
+			if (!actionState?.catalog) setActionWaitingToExecute(actionId);
+			try {
+				setupAndExecuteAction((await actionState.catalogPromise)?.data || catalogsMap[currentApiCatalogId], actionId, actionData);
+			} catch (error) {
+				enqueueSnackbar(t(`Unable to retrieve catalog data.`), {
+					variant: "error",
+					anchorOrigin: {
+						vertical: "top",
+						horizontal: "center"
+					}
+				});
+			}
+		}
+		setActionWaitingToExecute("");
+	}, [
+		setupAndExecuteAction,
+		enqueueSnackbar,
+		t,
+		actionState,
+		setActionWaitingToExecute,
+		catalogsMap,
+		currentApiCatalogId
+	]);
+	return {
+		setActionPanels,
+		triggerAction: useCallback((actionId, actionData) => {
+			executeTriggerAction(actionId, actionData);
+		}, [executeTriggerAction]),
+		triggerMultipleActions: useCallback((actionIds) => {
+			actionIds.forEach((id) => {
+				executeTriggerAction(id);
+			});
+		}, [executeTriggerAction]),
+		setCatalogEntities: useCallback((catalogEntities) => {
+			dispatch({
+				type: "SET_CATALOG_ENTITIES",
+				catalogEntities
+			});
+		}, [dispatch]),
+		setCatalogPromotedEntities: useCallback((catalogPromotedEntities) => {
+			dispatch({
+				type: "SET_CATALOG_PROMOTED_ENTITIES",
+				catalogPromotedEntities
+			});
+		}, [dispatch]),
+		setInquiryParams: useCallback((inquiryParams, containerId) => {
+			dispatch({
+				type: "SET_INQUIRY_PARAMS",
+				inquiryParams,
+				containerId
+			});
+		}, [dispatch]),
+		setShowInquiryHeaderActions: useCallback((showInquiryHeaderActions) => {
+			dispatch({
+				type: "SET_SHOW_INQUIRY_HEADER_ACTIONS",
+				showInquiryHeaderActions
+			});
+		}, [dispatch]),
+		setMenuListState: useCallback((menuListState) => {
+			dispatch({
+				type: "SET_MENU_LIST_STATE",
+				menuListState
+			});
+		}, [dispatch]),
+		closeAllSplitScreens: useCallback(() => {
+			dispatch({ type: "CLOSE_ALL_SPLIT_SCREENS" });
+		}, [dispatch]),
+		openSplitScreen: useCallback((splitScreen) => {
+			dispatch({
+				type: "OPEN_SPLIT_SCREEN",
+				splitScreen
+			});
+		}, [dispatch]),
+		openPageSplitScreen: useCallback((pageSplitScreen) => {
+			dispatch({
+				type: "OPEN_PAGE_SPLIT_SCREEN",
+				pageSplitScreen
+			});
+		}, [dispatch]),
+		openPageContainerSplitScreen: useCallback((pageContainerSplitScreen) => {
+			dispatch({
+				type: "OPEN_PAGE_CONTAINER_SPLIT_SCREEN",
+				pageContainerSplitScreen
+			});
+		}, [dispatch]),
+		setApiCatalog: useCallback((catalog) => {
+			dispatch({
+				type: "SET_API_CATALOG",
+				catalog
+			});
+		}, [dispatch]),
+		setActionLoading
+	};
+};
+const useActionState = () => useContext(ActionContext);
+
+//#endregion
+//#region src/UI/inputs/textField/AmbientTextField.jsx
+const useStyles$21 = makeStyles((theme) => ({
+	input: {
+		borderRadius: 2,
+		height: (props) => !props.multiline && !Array.isArray(props.value) && 32,
+		padding: (props) => !props.multiline && 0,
+		paddingBottom: 10,
+		marginTop: 3,
+		"& .MuiFilledInput-inputMarginDense": { paddingTop: 8 },
+		"& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)": {
+			marginTop: theme.spacing(.5),
+			marginLeft: theme.spacing(1)
+		}
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	FormControl: {
+		display: "none",
+		marginTop: 0
+	},
+	root: {
+		width: "100%",
+		marginTop: 25,
+		"& .MuiFormLabel-root": {
+			marginTop: -30,
+			marginLeft: -11
+		},
+		"& .MuiInputAdornment-root": { paddingLeft: theme.spacing(1) }
+	},
+	noLabel: { marginTop: theme.spacing(1) }
+}));
+const AmbientTextField = (props) => {
+	const classes = useStyles$21(props);
+	const { id, label, startAdornment, endAdornment, title = "noTitle",...InputProps } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: label ? classes.root : classes.noLabel }, /* @__PURE__ */ React.createElement(TextField, {
+		...InputProps,
+		id,
+		udprecordid: `udpRecord-FluentAmbientTextField-${title.replace(/\s/g, "")}-${props?.InputProps?.type}`,
+		variant: "filled",
+		size: "small",
+		margin: "dense",
+		label,
+		classes: { label: classes.label },
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
+			},
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		}
+	}));
+};
+AmbientTextField.propTypes = {
+	id: PropTypes.string,
+	label: PropTypes.string,
+	startAdornment: PropTypes.node,
+	endAdornment: PropTypes.node
+};
+
+//#endregion
+//#region src/utilities/style/utils/styleUtils.js
+const getEllipseColor = (theme, color) => {
+	if (!theme) return "";
+	let ellipseColor = theme.palette.primary.main;
+	switch (color) {
+		case "action":
+			ellipseColor = theme.palette.systemIcon?.action?.main;
+			break;
+		case "sequence":
+			ellipseColor = theme.palette.systemIcon?.sequence?.main;
+			break;
+		case "trigger":
+			ellipseColor = theme.palette.systemIcon?.trigger?.main;
+			break;
+		case "condition":
+			ellipseColor = theme.palette.systemIcon?.condition?.main;
+			break;
+		case "primary":
+			ellipseColor = theme.palette.primary.main;
+			break;
+		case "secondary":
+			ellipseColor = theme.palette.secondary.main;
+			break;
+		case "info":
+			ellipseColor = theme.palette.info.main;
+			break;
+		case "warning":
+			ellipseColor = theme.palette.warning.main;
+			break;
+		case "error":
+			ellipseColor = theme.palette.error.main;
+			break;
+		case "success":
+			ellipseColor = theme.palette.success.main;
+			break;
+		default:
+			ellipseColor = theme.palette.secondary.main;
+			break;
+	}
+	return ellipseColor;
+};
+const getEllipseHintColor = (theme, color) => {
+	if (!theme) return "";
+	let ellipseHintColor = theme.palette.primary.main;
+	switch (color) {
+		case "action":
+			ellipseHintColor = theme.palette.systemIcon?.action?.hint;
+			break;
+		case "sequence":
+			ellipseHintColor = theme.palette.systemIcon?.sequence?.hint;
+			break;
+		case "trigger":
+			ellipseHintColor = theme.palette.systemIcon?.trigger?.hint;
+			break;
+		case "condition":
+			ellipseHintColor = theme.palette.systemIcon?.condition?.hint;
+			break;
+		case "primary":
+			ellipseHintColor = theme.palette.primary.hint;
+			break;
+		case "secondary":
+			ellipseHintColor = theme.palette.secondary.hint;
+			break;
+		case "info":
+			ellipseHintColor = theme.palette.unity?.info?.hint;
+			break;
+		case "warning":
+			ellipseHintColor = theme.palette.unity?.warning?.hint;
+			break;
+		case "error":
+			ellipseHintColor = theme.palette.unity?.error?.hint;
+			break;
+		case "success":
+			ellipseHintColor = theme.palette.unity?.success?.hint;
+			break;
+		default:
+			ellipseHintColor = theme.palette.common.white;
+			break;
+	}
+	return ellipseHintColor;
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/Ellipse.jsx
+const useStyles$20 = makeStyles((theme) => ({ root: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+	height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+	borderRadius: 50,
+	border: (props) => props.variant === "filled" ? "none" : `2px solid`,
+	backgroundColor: (props) => props.variant === "filled" && getEllipseHintColor(theme, props.color),
+	borderColor: (props) => getEllipseColor(theme, props.color)
+} }));
+const Ellipse = (props) => {
+	const { children } = props;
+	const classes = useStyles$20(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, children);
+};
+Ellipse.propTypes = {
+	color: PropTypes.string,
+	size: PropTypes.string,
+	variant: PropTypes.string
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridSidebarContainer.jsx
+const useStyles$19 = makeStyles((theme) => ({
+	root: {},
+	groupWrapper: {
+		padding: theme.spacing(2),
+		height: (props) => props?.height ? `${props.height} !important` : "calc(100vh - 280px) !important",
+		overflow: "auto"
+	}
+}));
+const GridSidebarContainer = (props) => {
+	const { children, color } = props;
+	const classes = useStyles$19(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Paper, {
+		elevation: "0",
+		square: true,
+		style: { background: color }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.groupWrapper }, children)));
+};
+GridSidebarContainer.propTypes = {
+	children: PropTypes.node,
+	color: PropTypes.string
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientTokenButton.jsx
+const useStyles$18 = makeStyles((theme) => ({
+	root: {},
+	actionHeader: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const AmbientTokenButton = forwardRef(function AmbientTokenButton$1(props, ref) {
+	const { tooltip, ariaLabel, onClick, size, icon = ChevronDownIcon, iconClassName, otherProps, id = "token-button", udprecordid } = props;
+	const classes = useStyles$18(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement(IconButton, {
+		id,
+		udprecordid,
+		ref,
+		"aria-label": ariaLabel,
+		className: iconClassName ?? classes.icon,
+		size: size ?? "small",
+		onClick,
+		...otherProps
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		className: classes.iconButtonStyle,
+		component: icon
+	}))));
+});
+AmbientTokenButton.propTypes = {
+	tooltip: PropTypes.string.isRequired,
+	ariaLabel: PropTypes.string.isRequired,
+	onClick: PropTypes.func,
+	icon: PropTypes.func.isRequired
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingHeader.jsx
+const useStyles$17 = makeStyles((theme) => ({
+	root: {},
+	actionHeader: {
+		display: "flex",
+		flexDirection: "row",
+		gap: 10
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const GridGroupingHeader = ({ expandClick, collapseClick }) => {
+	const classes = useStyles$17();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.actionHeader }, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronFold10Icon,
+		tooltip: "Collapse All",
+		ariaLabel: "Collapse All",
+		onClick: collapseClick
+	}), /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronUnfold10Icon,
+		tooltip: "Expand All",
+		ariaLabel: "Expand All",
+		onClick: expandClick
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Group By:")), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }));
+};
+GridGroupingHeader.propTypes = {
+	expandClick: PropTypes.func.isRequired,
+	collapseClick: PropTypes.func.isRequired
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/Token.jsx
+const useStyles$16 = makeStyles((theme) => ({
+	root: { margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1) },
+	letter: {
+		fontSize: (props) => props.size === "small" ? theme.spacing(2.25) : theme.spacing(2.5),
+		color: (props) => getEllipseColor(theme, props.color)
+	},
+	buttonRoot: {
+		margin: theme.spacing(1),
+		width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		background: (props) => props.variant === "filled" ? getEllipseHintColor(theme, props.color) : "",
+		border: (props) => props.variant === "outlined" ? `1px solid` : "none",
+		borderColor: (props) => props.variant === "outlined" ? getEllipseColor(theme, props.color) : ""
+	}
+}));
+const Token = (props) => {
+	const { type = "default", variant = "outlined", color = "default", size = "large", iconType, icon, letter = "A", IconEllipseProps, onClick } = props;
+	const classes = useStyles$16(props);
+	const theme = useTheme();
+	const iconColor = useMemo(() => {
+		return getEllipseColor(theme, color);
+	}, [color, theme]);
+	const tokenComponent = /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Ellipse, {
+		variant,
+		size,
+		color,
+		...IconEllipseProps
+	}, type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.letter
+	}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	})));
+	if (type === "action") return /* @__PURE__ */ React.createElement(IconButton, {
+		classes: { root: classes.buttonRoot },
+		onClick
+	}, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	}));
+	return tokenComponent;
+};
+Token.propTypes = {
+	type: PropTypes.string,
+	variant: PropTypes.string,
+	color: PropTypes.string,
+	size: PropTypes.string,
+	iconType: PropTypes.string,
+	icon: PropTypes.elementType,
+	letter: PropTypes.string,
+	onClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientToggleButton.jsx
+const useStyles$15 = makeStyles((theme) => ({
+	root: {},
+	groupActionContainer: {
+		display: "flex",
+		flexDirection: "column",
+		flexWrap: "wrap",
+		alignContent: "space-around"
+	},
+	toggleRoot: {
+		"&:not(:first-child)": {
+			marginTop: 16,
+			border: "1px solid lightgrey",
+			borderTopLeftRadius: 25,
+			borderTopRightRadius: 25,
+			borderRadius: 25,
+			padding: 0,
+			paddingRight: theme.spacing(2)
+		},
+		"&:not(:last-child)": {
+			borderBottomLeftRadius: 25,
+			borderBottomRightRadius: 25,
+			borderRadius: 25,
+			padding: 0,
+			border: "1px solid lightgrey",
+			paddingRight: theme.spacing(2)
+		},
+		"& .MuiToggleButton-root.Mui-selected": {
+			color: "rgba(0, 0, 0, 0.54)",
+			backgroundColor: "white"
+		}
+	},
+	buttonRoot: {
+		textTransform: "none",
+		fontWeight: 700,
+		justifyContent: "flex-start"
+	},
+	".MuiToggleButton-root.Mui-selected": {
+		color: "rgba(0, 0, 0, 0.54)",
+		backgroundColor: "white"
+	}
+}));
+const AmbientToggleButton = ({ children, value, ariaLabel, onClick,...otherProps }) => {
+	const classes = useStyles$15();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(ToggleButton, {
+		classes: { root: classes.buttonRoot },
+		value,
+		"aria-label": ariaLabel,
+		onClick,
+		...otherProps
+	}, children));
+};
+AmbientToggleButton.propTypes = {
+	children: PropTypes.node,
+	value: PropTypes.string,
+	ariaLabel: PropTypes.string,
+	onClick: PropTypes.func
+};
+
+//#endregion
+//#region src/utilities/isValueSelected.js
+function isValueSelected(value, candidate) {
+	if (candidate === void 0 || value === void 0) return false;
+	if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0;
+	return value === candidate;
+}
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientToggleButtonGroupDefault.jsx
+const styles = (theme) => ({
+	root: {
+		display: "inline-flex",
+		padding: 0
+	},
+	vertical: { flexDirection: "column" },
+	grouped: {},
+	groupedHorizontal: {
+		borderRadius: 25,
+		padding: 0,
+		paddingRight: 16,
+		"&:not(:first-child)": {
+			marginTop: 16,
+			borderRadius: 25,
+			paddingRight: 16,
+			padding: 0
+		},
+		"&:not(:last-child)": {
+			padding: 0,
+			borderRadius: 25,
+			paddingRight: 16
+		}
+	},
+	groupedVertical: {
+		borderRadius: 25,
+		padding: 0,
+		paddingRight: 16,
+		"&:not(:first-child)": {
+			marginTop: 16,
+			borderRadius: 25,
+			paddingRight: 16,
+			padding: 0
+		},
+		"&:not(:last-child)": {
+			padding: 0,
+			borderRadius: 25,
+			paddingRight: 16
+		}
+	}
+});
+const AmbientToggleButtonGroupDefault = forwardRef(function AmbientToggleButton$1(props, ref) {
+	const { children, classes, className, exclusive = false, onChange, orientation = "horizontal", size = "medium", value,...other } = props;
+	const handleChange = (event, buttonValue) => {
+		if (!onChange) return;
+		const index = value && value.indexOf(buttonValue);
+		let newValue;
+		if (value && index >= 0) {
+			newValue = value.slice();
+			newValue.splice(index, 1);
+		} else newValue = value ? value.concat(buttonValue) : [buttonValue];
+		onChange(event, newValue);
+	};
+	const handleExclusiveChange = (event, buttonValue) => {
+		if (!onChange) return;
+		onChange(event, value === buttonValue ? null : buttonValue);
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "group",
+		className: clsx(classes.root, { [classes.vertical]: orientation === "vertical" }, className),
+		ref,
+		...other
+	}, Children.map(children, (child) => {
+		if (!isValidElement(child)) return null;
+		if (process.env.NODE_ENV !== "production") {
+			if (isFragment(child)) console.error(["Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
+		}
+		return cloneElement(child, {
+			className: clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], child.props.className),
+			onChange: exclusive ? handleExclusiveChange : handleChange,
+			selected: child.props.selected === void 0 ? isValueSelected(child.props.value, value) : child.props.selected,
+			size: child.props.size || size
+		});
+	}));
+});
+AmbientToggleButtonGroupDefault.propTypes = {
+	children: PropTypes.node,
+	classes: PropTypes.object,
+	className: PropTypes.string,
+	exclusive: PropTypes.bool,
+	onChange: PropTypes.func,
+	orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+	size: PropTypes.oneOf([
+		"large",
+		"medium",
+		"small"
+	]),
+	value: PropTypes.any
+};
+/**
+* Explicitly cast the HOC to any to avoid non-portable inferred React types in declaration output.
+* @type {any}
+*/
+const AmbientToggleButtonGroupDefaultExport = withStyles$1(styles, { name: "MuiToggleButtonGroup" })(AmbientToggleButtonGroupDefault);
+var AmbientToggleButtonGroupDefault_default = AmbientToggleButtonGroupDefaultExport;
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingSidebar.jsx
+const useStyles$14 = makeStyles((theme) => ({
+	root: {},
+	groupActionContainer: {
+		display: "flex",
+		flexDirection: "column",
+		flexWrap: "wrap",
+		alignContent: "space-around"
+	},
+	buttonRoot: {
+		textTransform: "none",
+		fontWeight: 700,
+		justifyContent: "flex-start"
+	},
+	buttonGroupWrapper: { gap: theme.spacing(2) }
+}));
+const GridGroupingSidebar = ({ groupItem, expandClick, collapseClick, closeClick, groupingData, height, color = "#F5F2F8" }) => {
+	const classes = useStyles$14();
+	const [view, setView] = useState("");
+	const handleChange = (event, nextView) => {
+		setView(nextView);
+	};
+	const GroupItem = ({ label, clear }) => {
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+			icon: clear ? ChromeCloseIcon : AssessmentGroupIcon,
+			color: "trigger",
+			size: "small",
+			variant: "filled",
+			type: "icon"
+		}), /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: { color: "black" }
+		}, " ", label, " "));
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(GridSidebarContainer, {
+		color,
+		height
+	}, /* @__PURE__ */ React.createElement(GridGroupingHeader, {
+		expandClick,
+		collapseClick,
+		closeClick
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.groupActionContainer }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroupDefault_default, {
+		orientation: "vertical",
+		value: view,
+		exclusive: true,
+		onChange: handleChange,
+		className: classes.buttonGroupWrapper
+	}, groupingData.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+			value: item.value,
+			"aria-label": item.label,
+			onClick: () => groupItem(item.groupItem)
+		}, /* @__PURE__ */ React.createElement(GroupItem, { label: item.label }));
+	}), /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+		value: "noGroups",
+		"aria-label": "noGroups",
+		onClick: closeClick
+	}, /* @__PURE__ */ React.createElement(GroupItem, {
+		label: "No Groups",
+		clear: true
+	}))))));
+};
+GridGroupingSidebar.propTypes = {
+	groupItem: PropTypes.func,
+	expandClick: PropTypes.func,
+	collapseClick: PropTypes.func,
+	closeClick: PropTypes.func,
+	groupingData: PropTypes.array,
+	color: PropTypes.string
+};
+
+//#endregion
+//#region src/utilities/aggrid/SplitButton.jsx
+const useStyles$13 = makeStyles((theme) => ({
+	arrowButtonRoot: { padding: 0 },
+	menu: { zIndex: theme.zIndex.tooltip },
+	paper: {}
+}), { name: "SplitButton" });
+/**
+* https://material-ui.com/components/button-group/#split-button
+*/
+const SplitButton = (props) => {
+	const classes = useStyles$13(props);
+	const { popupName, color, size, variant, label, "aria-label": ariaLabel, children } = props;
+	const popupState = usePopupState({
+		variant: "popper",
+		popupId: useId(popupName)
+	});
+	const firstItem = Children.toArray(children)[0];
+	const setAnchorEl = useCallback((ref) => {
+		if (ref) popupState.setAnchorEl(ref);
+	}, []);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
+		variant,
+		color,
+		size,
+		ref: setAnchorEl,
+		"aria-label": ariaLabel
+	}, /* @__PURE__ */ React.createElement(Button, { onClick: firstItem?.props?.onClick }, label || firstItem?.props?.children), /* @__PURE__ */ React.createElement(Button, {
+		...bindTrigger(popupState),
+		className: classes.arrowButtonRoot,
+		color,
+		size: "small",
+		"aria-expanded": popupState.isOpen ? true : void 0
+	}, /* @__PURE__ */ React.createElement(ArrowDropDown, null))), /* @__PURE__ */ React.createElement(Popper, {
+		...bindPopper(popupState),
+		role: void 0,
+		transition: true,
+		disablePortal: true,
+		className: classes.menu
+	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React.createElement(Grow, {
+		...TransitionProps,
+		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
+	}, /* @__PURE__ */ React.createElement(Paper, { className: classes.paper }, /* @__PURE__ */ React.createElement(ClickAwayListener, { onClickAway: popupState.close }, /* @__PURE__ */ React.createElement(MenuList, null, children))))));
+};
+
+//#endregion
+//#region src/utilities/aggrid/AgTable.tsx
+LicenseManager.setLicenseKey(LicenseKey);
+const useStyles$12 = makeStyles((theme) => ({
+	root: {
+		flex: 1,
+		height: (props) => props?.height ? props.height : "calc(100vh - 280px)"
+	},
+	AgGrid: (props) => ({
+		"--ag-control-panel-background-color": theme.palette.primary.light,
+		"--ag-checkbox-checked-color": theme.palette.primary.main,
+		...props.hideHeader ? {} : {
+			"--ag-header-background-color": theme.palette.primary.main,
+			"--ag-header-foreground-color": theme.palette.primary.light
+		}
+	})
+}), { name: "AgTable" });
+const globalModules = [...AllModules, ExcelExportModule];
+/**
+* Utility hook for getting the ag-grid APIs into state
+*/
+function useAgGridApi() {
+	const [{ gridApi, gridColumnApi }, onGridReady] = useReducer((state, params) => {
+		return {
+			gridApi: params.api,
+			gridColumnApi: params.columnApi
+		};
+	}, {});
+	return {
+		gridApi,
+		gridColumnApi,
+		onGridReady
+	};
+}
+/**
+* Size/Export buttons for AgGrid tables
+*/
+const AgTableButtons = (props) => {
+	const { gridApi, gridColumnApi } = props;
+	const exportToCSV = useCallback(() => {
+		invariant(gridApi, `gridApi not ready`);
+		gridApi?.exportDataAsCsv({
+			allColumns: true,
+			fileName: "export"
+		});
+	}, [gridApi]);
+	const exportToExcel = useCallback(() => {
+		invariant(gridApi, `gridApi not ready`);
+		gridApi?.exportDataAsExcel({
+			allColumns: true,
+			fileName: "export"
+		});
+	}, [gridApi]);
+	const sizeToFit = useCallback((params) => {
+		invariant(gridApi, `gridApi not ready`);
+		gridApi?.sizeColumnsToFit();
+	}, [gridApi]);
+	const autoSizeAll = useCallback((skipHeader) => {
+		invariant(gridColumnApi, `gridColumnApi not ready`);
+		const allColumnIds = [];
+		gridColumnApi?.getAllColumns()?.forEach((column) => {
+			allColumnIds.push(column.getColId());
+		});
+		gridColumnApi?.autoSizeColumns(allColumnIds, skipHeader);
+	}, [gridColumnApi]);
+	const autoSizeAllWithHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
+	const autoSizeAllWithoutHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
+	return /* @__PURE__ */ React.createElement(Box, { mb: 1 }, /* @__PURE__ */ React.createElement(Grid, {
+		container: true,
+		direction: "row",
+		spacing: 1,
+		justify: "flex-end"
+	}, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Button, {
+		variant: "outlined",
+		size: "small",
+		onClick: sizeToFit
+	}, "Size to Fit")), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(SplitButton, {
+		popupName: "auto-size",
+		variant: "outlined",
+		size: "small",
+		label: "Auto-Size"
+	}, /* @__PURE__ */ React.createElement(MenuItem, { onClick: autoSizeAllWithHeader }, "All"), /* @__PURE__ */ React.createElement(MenuItem, { onClick: autoSizeAllWithoutHeader }, "Skip Header"))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(SplitButton, {
+		popupName: "export",
+		variant: "outlined",
+		size: "small",
+		label: "Export"
+	}, /* @__PURE__ */ React.createElement(MenuItem, { onClick: exportToExcel }, "Excel"), /* @__PURE__ */ React.createElement(MenuItem, { onClick: exportToCSV }, "CSV")))));
+};
+/**
+* AgGrid with tweaks
+*/
+const AgTable = (props) => {
+	const classes = useStyles$12(props);
+	const { modules: modulesProp, className, getRowHeight, rowModelType, isUsingAgRowHeight = false, hideHeader = false } = props;
+	const modules = useMemo(() => modulesProp ? globalModules.concat(modulesProp) : globalModules, [modulesProp]);
+	const calculateRowHeight = (params) => {
+		if (params.node.level === 0) return 48;
+		if (params.node.level === 1) return 32;
+		return 16;
+	};
+	const rowHeightFunction = useCallback((params) => {
+		if (rowModelType === "serverSide") if (isUsingAgRowHeight) return;
+		else if (getRowHeight) return getRowHeight(params);
+		else return calculateRowHeight(params);
+		else if (getRowHeight) return getRowHeight(params);
+	}, [getRowHeight, isUsingAgRowHeight]);
+	const onGridSizeChanged = () => {
+		if (props.dynamicSizing) props.api?.sizeColumnsToFit();
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: clsx("ag-theme-material", classes.root, className) }, /* @__PURE__ */ React.createElement(AgGridReact, {
+		...props,
+		modules,
+		onGridSizeChanged,
+		getRowHeight: rowHeightFunction,
+		className: classes.AgGrid
+	}));
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridActionBar.jsx
+const useStyles$11 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5),
+		background: (props) => props.background ? props.background : lighten(theme.palette.secondary.light, .9)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.secondary.main
+	}
+}));
+const GridActionBar = (props) => {
+	const classes = useStyles$11(props);
+	const { children, onChange, handleChange, value, exportCSV, exportExcel, exportPDF, fitClick, expandClick, clearClick, exportClick, saveGridConfig, deleteGridConfig, clearGridConfig, title, hideFitGrid = false, hideExpandGrid = false, hideExportGrid = false, hideRemoveFilters = false, hideFilterTab = false, hideGroupTab = false, hideColumnTab = false, hideSearchBar = false } = props;
+	const gridControlsExport = /* @__PURE__ */ React.createElement("div", null);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", null, " ", gridControlsExport), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, saveGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: SaveIcon,
+		tooltip: "Save Grid Configuration",
+		ariaLabel: "Save Grid Configuration",
+		onClick: saveGridConfig
+	}), deleteGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DeleteIcon,
+		tooltip: "Delete Grid Configuration",
+		ariaLabel: "Delete Grid Configuration",
+		onClick: deleteGridConfig
+	}), clearGridConfig && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ClearIcon,
+		tooltip: "Clear Grid Configuration",
+		ariaLabel: "Clear Grid Configuration",
+		onClick: clearGridConfig
+	}), !hideFitGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: CombineIcon,
+		tooltip: "Fit Grid",
+		ariaLabel: "Fit Grid",
+		onClick: fitClick
+	}), !hideExpandGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: ExportIcon,
+		tooltip: "Expand Grid",
+		ariaLabel: "Expand Grid",
+		onClick: expandClick
+	}), !hideExportGrid && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: DownloadIcon,
+		tooltip: "Export Grid",
+		ariaLabel: "Export Grid",
+		onClick: exportClick
+	}), !hideRemoveFilters && /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		iconClassName: classes.icon,
+		icon: BlockedIcon,
+		tooltip: "Remove Filters",
+		ariaLabel: "Remove Filters",
+		onClick: clearClick
+	})), /* @__PURE__ */ React.createElement(Tabs, {
+		value,
+		onChange: handleChange,
+		"aria-label": "basic tabs example"
+	}, !hideFilterTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Filter",
+		classes: { root: classes.tabRoot }
+	}), !hideGroupTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Group",
+		classes: { root: classes.tabRoot }
+	}), !hideColumnTab && /* @__PURE__ */ React.createElement(Tab, {
+		label: "Column",
+		classes: { root: classes.tabRoot }
+	})), children);
+};
+GridActionBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	handleChange: PropTypes.func,
+	value: PropTypes.number,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientChipButton.jsx
+const useStyles$10 = makeStyles((theme) => ({
+	root: {},
+	actionHeader: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	icon: {
+		marginLeft: theme.spacing(1),
+		color: (props) => props.background === "transparent" ? theme.palette.secondary.main : theme.palette.primary.main
+	},
+	chipRoot: { background: (props) => props.background ? props.background : theme.palette.common.white },
+	label: {
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis"
+	}
+}));
+const AmbientChipButton = forwardRef(function AmbientChipButton$1(props, ref) {
+	const { tooltip, label, onClick, icon, iconClassName, className, labelClassName, otherProps, id = "chip-button", udprecordid } = props;
+	const classes = useStyles$10(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement(Chip, {
+		id,
+		udprecordid,
+		ref,
+		className: className ?? classes.chipRoot,
+		label: /* @__PURE__ */ React.createElement(Typography, { className: labelClassName ?? classes.label }, label),
+		onClick,
+		icon: icon && /* @__PURE__ */ React.createElement(FluentIcon, {
+			className: iconClassName ?? classes.icon,
+			component: icon
+		}),
+		...otherProps
+	})));
+});
+AmbientChipButton.propTypes = {
+	tooltip: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	onClick: PropTypes.func,
+	icon: PropTypes.func.isRequired
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridPrimaryBar.jsx
+const useStyles$9 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5)
+	},
+	label: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	title: {
+		flex: 1,
+		display: "flex",
+		alignItems: "center",
+		marginLeft: (props) => props.title ? theme.spacing(2) : 0
+	},
+	tabRoot: {
+		minWidth: 0,
+		textTransform: "none"
+	},
+	controls: {
+		display: "flex",
+		alignItems: "center",
+		gridGap: theme.spacing(2),
+		gap: theme.spacing(2),
+		marginRight: theme.spacing(2)
+	},
+	icon: {
+		background: theme.palette.common.white,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	}
+}));
+const GridPrimaryBar = (props) => {
+	const classes = useStyles$9(props);
+	const { children, onChange, fitClick, expandClick, clearClick, exportClick, filterClick, columnsClick, groupClick, title, hiddenActionButtons, hiddenLabels, hideSearchBar = false, secondaryActionButtons, saveViewClick, viewsClick, insightsClick, onPrimaryActionClick, primaryActionDisabled, primaryActionLabel, primaryActionIcon, onSearchKeyDown } = props;
+	const [actionButtonMedianPx, setActionButtonMedianPx] = useState(0);
+	const [actionButtons, setActionButtons] = useState([]);
+	const [menuActionButtons, setMenuActionButtons] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [windowWidthBreakpoint, setWindowWidthBreakpoint] = useState(1400);
+	const chipButtonSizePx = 100;
+	const tokenButtonSizePx = 40;
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const defaultActionButtons = useMemo(() => [
+		{
+			icon: SaveIcon,
+			tooltip: "Save Grid Configuration",
+			label: "Save View",
+			visible: !hiddenActionButtons.includes("saveView"),
+			hideLabel: hiddenLabels.includes("saveView"),
+			onClick: saveViewClick,
+			background: "transparent"
+		},
+		{
+			icon: FavoriteStarIcon,
+			tooltip: "Browse Views",
+			label: "Views",
+			visible: !hiddenActionButtons.includes("views"),
+			onClick: viewsClick,
+			hideLabel: hiddenLabels.includes("views"),
+			iconClassName: classes.icon
+		},
+		{
+			icon: LightbulbIcon,
+			tooltip: "Insights",
+			label: "Insights",
+			visible: !hiddenActionButtons.includes("insights"),
+			hideLabel: hiddenLabels.includes("insights"),
+			onClick: insightsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: UploadIcon,
+			tooltip: "Import/Export",
+			label: "Import/Export",
+			visible: !!exportClick && !hiddenActionButtons.includes("importExport"),
+			hideLabel: hiddenLabels.includes("importExport"),
+			onClick: exportClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BulletedTreeListIcon,
+			tooltip: "Group",
+			label: "Group",
+			visible: !!groupClick && !hiddenActionButtons.includes("group"),
+			hideLabel: hiddenLabels.includes("group"),
+			onClick: groupClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: FilterIcon,
+			tooltip: "Filter",
+			label: "Filter",
+			visible: !!filterClick && !hiddenActionButtons.includes("filter"),
+			hideLabel: hiddenLabels.includes("filter"),
+			onClick: filterClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: TripleColumnIcon,
+			tooltip: "Columns",
+			label: "Columns",
+			visible: !!columnsClick && !hiddenActionButtons.includes("columns"),
+			hideLabel: hiddenLabels.includes("columns"),
+			onClick: columnsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: CombineIcon,
+			tooltip: "Fit Grid",
+			label: "Fit Grid",
+			visible: !!fitClick && !hiddenActionButtons.includes("fitGrid"),
+			hideLabel: hiddenLabels.includes("fitGrid"),
+			onClick: fitClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: ExportIcon,
+			tooltip: "Expand Grid",
+			label: "Expand Grid",
+			visible: !!expandClick && !hiddenActionButtons.includes("expandGrid"),
+			hideLabel: hiddenLabels.includes("expandGrid"),
+			onClick: expandClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: BlockedIcon,
+			tooltip: "Clear Filters",
+			label: "Clear Filters",
+			visible: !!clearClick && !hiddenActionButtons.includes("clearFilters"),
+			hideLabel: hiddenLabels.includes("clearFilters"),
+			onClick: clearClick,
+			iconClassName: classes.icon
+		}
+	], [
+		classes.icon,
+		clearClick,
+		columnsClick,
+		expandClick,
+		exportClick,
+		filterClick,
+		fitClick,
+		groupClick,
+		hiddenActionButtons,
+		hiddenLabels,
+		insightsClick,
+		saveViewClick,
+		viewsClick
+	]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const formatActionButtons = useCallback((buttons) => {
+		return buttons.map((button) => {
+			if (button.visible === void 0) button.visible = true;
+			if (button.hideLabel === void 0) button.hideLabel = false;
+			if (button.label === void 0) {
+				button.label = button.tooltip ?? "Button";
+				button.hideLabel = true;
+			}
+			if (button.iconClassName === void 0 && button.background === void 0) button.iconClassName = classes.icon;
+			return button;
+		});
+	}, [classes?.icon]);
+	useEffect(() => {
+		const allActionButtons = formatActionButtons([...defaultActionButtons, ...secondaryActionButtons]);
+		const menuButtons = [];
+		const numActionButtons = allActionButtons.length - hiddenActionButtons.length;
+		const buttonTotalWidth = numActionButtons * chipButtonSizePx - (chipButtonSizePx - tokenButtonSizePx) * hiddenLabels.length;
+		const calculatedMedian = Math.floor(buttonTotalWidth / numActionButtons);
+		let breakPoint = (calculatedMedian > 70 ? 950 : 900) + buttonTotalWidth;
+		const currentWindowWidth = window.innerWidth;
+		while (currentWindowWidth < breakPoint && allActionButtons.length > 0) {
+			const movedAction = allActionButtons.pop();
+			menuButtons.push(movedAction);
+			breakPoint -= calculatedMedian;
+		}
+		setActionButtonMedianPx(calculatedMedian);
+		setActionButtons(allActionButtons);
+		setMenuActionButtons(menuButtons);
+		setWindowWidthBreakpoint(breakPoint);
+	}, [
+		formatActionButtons,
+		defaultActionButtons,
+		secondaryActionButtons,
+		hiddenActionButtons?.length,
+		hiddenLabels?.length
+	]);
+	useEffect(() => {
+		const handleResize = () => {
+			let breakPoint = windowWidthBreakpoint;
+			let visibleButtons = [...actionButtons];
+			let menuButtons = [...menuActionButtons];
+			while (window.innerWidth < breakPoint && visibleButtons.length > 0) {
+				const movedAction = visibleButtons.pop();
+				menuButtons.push(movedAction);
+				breakPoint -= actionButtonMedianPx;
+			}
+			while (window.innerWidth > breakPoint + actionButtonMedianPx && menuButtons.length > 0) {
+				const movedAction = menuButtons.pop(0);
+				visibleButtons.push(movedAction);
+				breakPoint += actionButtonMedianPx;
+			}
+			setActionButtons(visibleButtons);
+			setMenuActionButtons(menuButtons);
+			setWindowWidthBreakpoint(breakPoint);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [
+		windowWidthBreakpoint,
+		actionButtons,
+		menuActionButtons,
+		actionButtonMedianPx
+	]);
+	const handleCustomKeyDown = (event) => {
+		if (onSearchKeyDown) {
+			if (event.key === "Enter") onSearchKeyDown();
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, title && /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		}
+	}, " ", title, " "), !hideSearchBar && /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 1,
+		marginLeft: 16,
+		marginRight: 16,
+		marginTop: -16,
+		maxWidth: 300
+	} }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		title,
+		onChange,
+		onKeyDown: handleCustomKeyDown,
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+		}
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.controls }, actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		onClick: button.onClick,
+		ariaLabel: button.label,
+		iconClassName: button.iconClassName
+	}) : /* @__PURE__ */ React.createElement(AmbientChipButton, {
+		id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+		icon: button.icon ?? AppIconDefaultIcon,
+		tooltip: button.tooltip,
+		label: button.label,
+		onClick: button.onClick,
+		background: button.background
+	}))), !!menuActionButtons.length && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "More Actions",
+		ariaLabel: "More Actions",
+		onClick: handlePopoverClick,
+		iconClassName: classes.icon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, menuActionButtons.slice(0).reverse().map((button) => {
+		if (!button.visible) return null;
+		return /* @__PURE__ */ React.createElement(MenuItem, {
+			id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+			onClick: button.onClick,
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			}
+		}, /* @__PURE__ */ React.createElement(Typography, null, button.label), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: button.icon ?? AppIconDefaultIcon,
+			style: { marginLeft: 7 }
+		}));
+	})))), onPrimaryActionClick && /* @__PURE__ */ React.createElement(PrimaryActionButton_default, {
+		onClick: onPrimaryActionClick,
+		id: "udpRecord-GridPrimaryBar-Add",
+		udprecordid: "udpRecord-GridPrimaryBar-Add",
+		disabled: primaryActionDisabled
+	}, /* @__PURE__ */ React.createElement(Typography, { style: { marginLeft: 4 } }, primaryActionLabel ?? "Button"), /* @__PURE__ */ React.createElement(FluentIcon, {
+		style: { marginLeft: 7 },
+		component: primaryActionIcon ?? AppIconDefaultIcon
+	})));
+};
+GridPrimaryBar.propTypes = {
+	title: PropTypes.string,
+	children: PropTypes.node,
+	onChange: PropTypes.func,
+	fitClick: PropTypes.func,
+	expandClick: PropTypes.func,
+	clearClick: PropTypes.func,
+	exportClick: PropTypes.func,
+	insightsClick: PropTypes.func,
+	filterClick: PropTypes.func,
+	columnsClick: PropTypes.func,
+	groupClick: PropTypes.func,
+	hideSearchBar: PropTypes.bool,
+	secondaryActionButtons: PropTypes.arrayOf(PropTypes.object),
+	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: PropTypes.func,
+	primaryActionLabel: PropTypes.string,
+	primaryActionIcon: PropTypes.elementType
+};
+
+//#endregion
+//#region src/UI/feedback/FluentDialog.jsx
+const useStyles$8 = makeStyles((theme) => ({
+	root: {},
+	paper: {
+		borderRadius: 2,
+		borderTop: (props) => props.header && `4px solid ${theme.palette.secondary.main}`
+	},
+	title: { color: (props) => props.header && theme.palette.secondary.main },
+	actions: {
+		marginBottom: 0,
+		marginRight: 0,
+		padding: 0
+	},
+	button: {
+		borderRadius: 0,
+		padding: "calc(.875rem - 3px) 23px calc(.875rem - 3px) 15px",
+		textTransform: "none"
+	},
+	dialogContent: {
+		height: (props) => props.dialogContentHeight || "auto",
+		width: (props) => props.dialogContentWidth || "auto"
+	},
+	dialogLeftBorder: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		bottom: 0,
+		width: theme.spacing(1),
+		backgroundColor: (props) => props.dialogLeftBorderColor ?? theme.palette.primary.main
+	}
+}));
+const FluentDialog = (props) => {
+	const classes = useStyles$8(props);
+	const { title, message, actionOne, actionTwo, actionThree, labelOne, labelTwo, labelThree, open, handleClose, ariaLabelledby, ariaDescribedby, titleId, descriptionId, children, buttonOneHidden = false, buttonTwoHidden = false, buttonThreeHidden = true, disableOne, disableTwo, disableThree, progress, enableLeftBorderStyling = false,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Dialog, {
+		open,
+		onClose: handleClose,
+		"aria-labelledby": ariaLabelledby,
+		"aria-describedby": ariaDescribedby,
+		...otherProps,
+		classes: { paper: classes.paper }
+	}, /* @__PURE__ */ React.createElement("div", { className: enableLeftBorderStyling ? classes.dialogLeftBorder : "" }), /* @__PURE__ */ React.createElement(DialogTitle, {
+		className: classes.title,
+		id: titleId
+	}, title), /* @__PURE__ */ React.createElement(DialogContent, { className: classes.dialogContent }, /* @__PURE__ */ React.createElement(DialogContentText, { id: descriptionId }, message), children), /* @__PURE__ */ React.createElement(DialogActions, {
+		className: classes.actions,
+		disableSpacing: true
+	}, !buttonThreeHidden && /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionThree,
+		color: "secondary",
+		disabled: disableThree,
+		className: classes.button
+	}, labelThree), !buttonTwoHidden && /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionTwo,
+		color: "secondary",
+		disabled: disableTwo,
+		className: classes.button
+	}, labelTwo), !buttonOneHidden && /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+		id: "udpRecord-FluentDialog-Cancel",
+		udprecordid: "udpRecord-FluentDialog-Cancel",
+		disabled: disableOne,
+		onClick: actionOne
+	}, labelOne)), progress && /* @__PURE__ */ React.createElement(LinearProgress, {
+		color: "secondary",
+		value: progress,
+		...otherProps
+	}));
+};
+
+//#endregion
+//#region src/utilities/aggrid/GridFunctions.js
+const useGridFormat = () => {
+	const gridFormat = (gridApi, type) => {
+		type === "expand" && gridApi.expandAll();
+		type === "collapse" && gridApi.collapseAll();
+		type === "resize" && gridApi.sizeColumnsToFit();
+	};
+	return [gridFormat];
+};
+const useGridClear = () => {
+	const gridClear = (gridApi, gridColumnApi) => {
+		gridColumnApi.setRowGroupColumns([]);
+		gridApi.setFilterModel(null);
+		gridApi.setQuickFilter("");
+		gridApi.sizeColumnsToFit();
+		gridColumnApi.resetColumnState();
+	};
+	return [gridClear];
+};
+const useQuickFilter = () => {
+	const quickFilter = (gridApi, event) => {
+		gridApi.setQuickFilter(event?.target.value);
+	};
+	return [quickFilter];
+};
+const useExport = () => {
+	const gridExport = (gridApi, type) => {
+		type === "excel" && gridApi.exportDataAsExcel();
+		type === "csv" && gridApi.exportDataAsCsv();
+	};
+	return [gridExport];
+};
+const saveGridState = async (gridId, gridApi, gridColumnApi, execute) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return await execute({ data: gridState });
+};
+const getGridState = (gridApi, gridColumnApi, gridId) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return gridState;
+};
+const deleteGridState = async (gridApi, gridColumnApi, deleteGridState$1) => {
+	clearGridState(gridApi, gridColumnApi);
+	return await deleteGridState$1();
+};
+const clearGridState = (gridApi, gridColumnApi) => {
+	gridColumnApi.resetColumnState();
+	gridColumnApi.resetColumnGroupState();
+	gridApi.setFilterModel({});
+	gridApi.setSortModel([]);
+	gridColumnApi.setPivotMode(false);
+	gridApi.sizeColumnsToFit();
+};
+const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {
+	if (gridStates && gridStates.length) gridStates.forEach((state) => {
+		switch (state.gridStateTypeId) {
+			case GridStateTypeEnums.Column:
+				gridColumnApi.setColumnState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Group:
+				gridColumnApi.setColumnGroupState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Pivot_Mode:
+				gridColumnApi.setPivotMode(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Sort:
+				gridApi.setSortModel(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Filter:
+				gridApi.setFilterModel(JSON.parse(state.values));
+				break;
+			default: break;
+		}
+	});
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/SaveViewFormDialog.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	root: {},
+	saveForm: {
+		minWidth: 450,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	column: {
+		flex: 1,
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2)
+	},
+	divider: {
+		backgroundColor: "grey",
+		color: "grey",
+		width: 2,
+		height: "100%"
+	},
+	infoHeader: { color: "grey" }
+}));
+/**
+* @param {PropTypes.InferProps<typeof SaveViewFormDialog.propTypes>} props
+*/
+const SaveViewFormDialog = (props) => {
+	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
+	const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
+	const { t } = useTranslation();
+	const classes = useStyles$7(props);
+	const saveViewFormRef = useRef(null);
+	const triggerSaveView = useCallback(() => {
+		saveViewFormRef.current.handleSubmit();
+	}, [saveViewFormRef]);
+	const saveView = async (values) => {
+		const data = {
+			data: {
+				gridView: {
+					Name: values.name,
+					GridViewVisibilityTypeId: values.private ? VisibilityTypeEnums.Private : VisibilityTypeEnums.Public,
+					isDefault: 0,
+					tenantId: user?.currentTenantId,
+					userId: user?.id,
+					gridId,
+					domain,
+					apiCatalogId
+				},
+				gridConfigurations: getGridState(gApi, gcApi, gridId)
+			},
+			method: "POST"
+		};
+		handleClose();
+		await apiMutate$1(ConfigService.tenantV2ApiUrl, `GridView/createGridView`, data).then((response) => {
+			handleSuccessSnackbar(t("View Saved"));
+			refetchViews();
+		}).catch((error) => {
+			console.log(error);
+			handleErrorSnackbar(error, t("Failed to Save View"));
+		});
+	};
+	return /* @__PURE__ */ React.createElement(FluentDialog, {
+		title: t("Save New View"),
+		open,
+		handleClose,
+		labelOne: t("Save View"),
+		labelTwo: t("Cancel"),
+		actionOne: triggerSaveView,
+		actionTwo: handleClose
+	}, /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Tenant")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, tenant ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Application")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, application ?? "--")), /* @__PURE__ */ React.createElement(Divider, {
+		flexItem: true,
+		orientation: "vertical"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.column }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.infoHeader,
+		align: "left"
+	}, t("Entity")), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		align: "left"
+	}, domain ?? "--"))), /* @__PURE__ */ React.createElement("div", { className: classes.saveForm }, /* @__PURE__ */ React.createElement(Form, {
+		onSubmit: saveView,
+		ref: saveViewFormRef
+	}, /* @__PURE__ */ React.createElement(Field, {
+		type: "text",
+		component: AmbientTextField,
+		name: "name",
+		id: "name",
+		label: t("Name"),
+		fullWidth: true,
+		required: true,
+		style: {
+			marginBottom: 20,
+			marginTop: 10
+		}
+	}), /* @__PURE__ */ React.createElement(FormControlLabel, {
+		control: /* @__PURE__ */ React.createElement(Field, {
+			component: Switch,
+			name: "private",
+			id: "private",
+			defaultValue: false,
+			type: "checkbox"
+		}),
+		label: t("Private"),
+		labelPlacement: "end"
+	}))));
+};
+SaveViewFormDialog.propTypes = {
+	open: PropTypes.bool.isRequired,
+	handleClose: PropTypes.func.isRequired,
+	tenant: PropTypes.string,
+	application: PropTypes.string,
+	entity: PropTypes.string,
+	user: PropTypes.object,
+	columnDefsValues: PropTypes.array,
+	refetchViews: PropTypes.func,
+	gApi: PropTypes.object,
+	gcApi: PropTypes.object,
+	setSelectedView: PropTypes.func
+};
+
+//#endregion
+//#region src/hooks/useDynamicListCalculation.jsx
+/**
+* A custom React hook for calculating the number of visible children in a dynamic list based on container width and child widths.
+*
+* @returns {object} An object containing the `calculateNumberOfVisibleChildren` function.
+*
+* @example
+* // Basic usage:
+* const parentRef = useRef();
+* const childRefs = useRef([]);
+* const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+* const maxVisibleChildren = calculateNumberOfVisibleChildren(parentRef, childRefs);
+
+* @example
+* // Excluding a buffer for less white space:
+* const parentRef = useRef();
+* const childRefs = useRef([]);
+* const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+* const maxVisibleChildren = calculateNumberOfVisibleChildren(parentRef, childRefs, false);
+*/
+const useDynamicListCalculation = () => {
+	const [averageChildWidth, setAverageChildWidth] = useState(0);
+	const [previousChildRefs, setPreviousChildRefs] = useState([]);
+	return { calculateNumberOfVisibleChildren: useCallback((parentRef, childRefs, includeBuffer = true) => {
+		if (!parentRef.current || !childRefs.current) return;
+		const containerWidth = parentRef.current.getBoundingClientRect().width ?? 0;
+		if (!averageChildWidth || previousChildRefs !== childRefs.current) {
+			setAverageChildWidth(childRefs.current.map((ref) => ref && typeof ref?.getBoundingClientRect === "function" ? ref.getBoundingClientRect().width : 0).reduce((acc, curr) => acc + curr, 0) / childRefs.current.length);
+			setPreviousChildRefs(childRefs.current);
+		}
+		const maxVisibleChildren = Math.floor(containerWidth / averageChildWidth);
+		if (includeBuffer) return maxVisibleChildren - 1;
+		return maxVisibleChildren;
+	}, [averageChildWidth, previousChildRefs]) };
+};
+
+//#endregion
+//#region src/UI/containers/DynamicContainerWithMenu.jsx
+const useStyles$6 = makeStyles$1((theme) => ({ filterChipMenuIcon: {
+	background: theme.palette.common.grey,
+	padding: theme.spacing(1),
+	color: theme.palette.primary.main
+} }));
+const DynamicContainerWithMenu = forwardRef((props, ref) => {
+	const { children, className, menuButton, menuIconClassName, includeBuffer = true } = props;
+	const classes = useStyles$6();
+	const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+	const modifiedMenuButton = useMemo(() => {
+		if (!menuButton) return null;
+		return cloneElement(menuButton, {
+			onClick: (event) => {
+				menuButton.props.onClick(event);
+				handlePopoverClick(event);
+			},
+			...menuButton.props
+		}, menuButton.props.children);
+	}, [menuButton]);
+	const [allChildren, setAllChildren] = useState([]);
+	const [visibleChildren, setVisibleChildren] = useState([]);
+	const [menuChildren, setMenuChildren] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const containerRef = useRef(ref);
+	const outerContainerRef = useRef(null);
+	const childrenRefs = useRef([]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSizeChange = useCallback(() => {
+		const maxVisibleChildren = calculateNumberOfVisibleChildren(containerRef, childrenRefs, includeBuffer);
+		const visibleChildren$1 = allChildren.slice(0, maxVisibleChildren);
+		const menuChildren$1 = allChildren.slice(maxVisibleChildren);
+		setVisibleChildren(visibleChildren$1);
+		setMenuChildren(menuChildren$1);
+	}, [
+		containerRef,
+		allChildren,
+		childrenRefs,
+		calculateNumberOfVisibleChildren,
+		includeBuffer
+	]);
+	const handleMenuItemClick = useCallback((child) => {
+		if (child.props.onClick && typeof child.props.onClick === "function") child.props.onClick();
+		let children$1 = child.props.children;
+		while (children$1) {
+			if (Array.isArray(children$1) && children$1.length > 0) children$1.forEach((child$1) => {
+				if (child$1.props.onClick && typeof child$1.props.onClick === "function") child$1.props.onClick();
+			});
+			else if (typeof children$1 === "object") {
+				if (children$1.props.onClick && typeof children$1.props.onClick === "function") children$1.props.onClick();
+			}
+			children$1 = children$1.props.children;
+		}
+		handlePopoverClose();
+	}, []);
+	useEffect(() => {
+		const arrayChildren = Children.toArray(children);
+		setAllChildren(arrayChildren);
+		setVisibleChildren(arrayChildren);
+	}, [children]);
+	useLayoutEffect(handleSizeChange, [handleSizeChange]);
+	useLayoutEffect(() => {
+		window.addEventListener("resize", handleSizeChange);
+		const resizeObserver = new ResizeObserver(handleSizeChange);
+		if (outerContainerRef.current) resizeObserver.observe(outerContainerRef.current);
+		return () => {
+			window.removeEventListener("resize", handleSizeChange);
+			resizeObserver.disconnect();
+		};
+	}, [handleSizeChange, outerContainerRef]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: outerContainerRef,
+		style: {
+			width: "100%",
+			overflow: "hidden"
+		}
+	}, /* @__PURE__ */ React.createElement("div", {
+		className,
+		ref: containerRef,
+		style: {
+			display: "flex",
+			flexWrap: "noWrap",
+			overflow: "hidden",
+			flexGrow: 1
+		}
+	}, visibleChildren && Children.map(visibleChildren, (child, index) => {
+		return cloneElement(child, {
+			ref: (ref$1) => childrenRefs.current[index] = ref$1,
+			...child.props
+		}, child.props.children);
+	}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ React.createElement("div", null, modifiedMenuButton ?? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "Additional Filter Values",
+		ariaLabel: "Additional Filter Values",
+		onClick: handlePopoverClick,
+		iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, Children.map(menuChildren, (child, index) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => handleMenuItemClick(child) }, cloneElement(child, { ...child.props }, child.props.children));
+	})))));
+});
+DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
+DynamicContainerWithMenu.propTypes = {
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	menuButton: PropTypes.node,
+	menuIconClassName: PropTypes.string,
+	includeBuffer: PropTypes.bool
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/ChipSection.jsx
+const useStyles$5 = makeStyles$1((theme) => ({
+	wrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		flexGrow: 1,
+		width: "100%"
+	},
+	chipHolder: {
+		display: "flex",
+		gap: theme.spacing(1),
+		flexWrap: "noWrap",
+		backgroundColor: `${theme.palette.secondary.light}80`,
+		alignItems: "center",
+		overflow: "scroll",
+		"&::-webkit-scrollbar": { display: "none" },
+		flexGrow: 1
+	},
+	viewChip: {
+		backgroundColor: theme.palette.secondary.main,
+		color: "white",
+		maxWidth: "150px",
+		transition: "opacity 0.3s ease",
+		marginLeft: theme.spacing(1)
+	},
+	menuItem: { backgroundColor: "white" },
+	filterChipMenuIcon: {
+		background: theme.palette.common.grey,
+		padding: theme.spacing(1),
+		color: theme.palette.primary.main
+	},
+	additionalFilterChip: {},
+	KPI: {
+		marginLeft: "auto",
+		display: "flex",
+		gap: theme.spacing(1),
+		color: "grey",
+		width: "auto"
+	},
+	kpiValue: {
+		color: "black",
+		fontSize: "1.1em"
+	},
+	kpiItem: {
+		display: "flex",
+		justifyContent: "center",
+		width: "max-content"
+	},
+	kpiLabel: {
+		width: "max-content",
+		marginRight: theme.spacing(1)
+	},
+	clickedChip: {
+		backgroundColor: theme.palette.primary.main,
+		color: "white",
+		maxWidth: "150px"
+	},
+	filterChipLabel: {
+		color: theme.palette.text.primary,
+		whiteSpace: "nowrap",
+		marginRight: theme.spacing(1)
+	},
+	filterChipValue: {
+		color: theme.palette.text.secondary,
+		whiteSpace: "nowrap"
+	}
+}));
+const ChipSection = (props) => {
+	const { filterChips = [], viewChips = [], additionalFilterChips = [], hideKpiSection = false, kpiValues = [], maxKPIsDisplayed = 4, handleDelete } = props;
+	const classes = useStyles$5();
+	const chipRefs = useRef([]);
+	const chipSectionContainerRef = useRef(null);
+	const viewChipsContainerRef = useRef(null);
+	const filterChipsContainerRef = useRef(null);
+	const additionalFilterChipsContainerRef = useRef(null);
+	const kpiContainerRef = useRef(null);
+	const [selectedFilterChip, setSelectedFilterChip] = useState(null);
+	const abbrNum = (number, decPlaces) => {
+		if (typeof number === "string" && !isNaN(Number(number))) number = Number(number);
+		else if (typeof number !== "number") throw new Error("The input must be a number or a string that can be converted to a number.");
+		if (typeof decPlaces !== "number") return null;
+		decPlaces = Math.pow(10, decPlaces);
+		let abbrev = [
+			"k",
+			"m",
+			"b",
+			"t"
+		];
+		for (let i = abbrev.length - 1; i >= 0; i--) {
+			let size = Math.pow(10, (i + 1) * 3);
+			if (size <= number) {
+				number = Math.round(number * decPlaces / size) / decPlaces;
+				if (number === 1e3 && i < abbrev.length - 1) {
+					number = 1;
+					i++;
+				}
+				number += abbrev[i];
+				break;
+			}
+		}
+		return number;
+	};
+	const isEmpty = (array) => Array.isArray(array) && array.length === 0;
+	const abbreviateLabel = (label) => {
+		const maxLength = 10;
+		if (label.length > maxLength) return label.slice(0, maxLength - 3) + "...";
+		else return null;
+	};
+	const handleFilterChipToggle = (chip) => {
+		setSelectedFilterChip(chip);
+		if (typeof chip.onToggle === "function") chip.onToggle();
+	};
+	const handleFilterChipUntoggle = () => {
+		if (selectedFilterChip) {
+			if (typeof selectedFilterChip.onUntoggle === "function") selectedFilterChip.onUntoggle();
+			setSelectedFilterChip(null);
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: chipSectionContainerRef,
+		className: classes.wrapper,
+		style: { display: [
+			kpiValues,
+			additionalFilterChips,
+			viewChips,
+			filterChips
+		].every((arr) => arr.length === 0) ? "none" : "flex" }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.chipHolder }, /* @__PURE__ */ React.createElement("div", { ref: viewChipsContainerRef }, viewChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: () => handleDelete("view", index),
+		key: index,
+		label: chip.label,
+		className: classes.viewChip,
+		icon: /* @__PURE__ */ React.createElement(StarIcon, null),
+		size: "small"
+	}))), !isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(DynamicContainerWithMenu, {
+		className: classes.chipHolder,
+		ref: filterChipsContainerRef
+	}, selectedFilterChip && /* @__PURE__ */ React.createElement(Chip$1, {
+		onDelete: handleFilterChipUntoggle,
+		label: selectedFilterChip.label,
+		className: classes.viewChip,
+		size: "small"
+	}), filterChips.map((chip, index) => {
+		if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
+		return /* @__PURE__ */ React.createElement(Tooltip$1, { title: chip.label }, /* @__PURE__ */ React.createElement(Chip$1, {
+			key: index,
+			label: /* @__PURE__ */ React.createElement("div", { style: {
+				display: "flex",
+				flexWrap: "noWrap"
+			} }, /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: chip.value ? classes.filterChipLabel : ""
+			}, chip.label), /* @__PURE__ */ React.createElement(Typography$1, {
+				noWrap: true,
+				className: classes.filterChipValue
+			}, chip.value)),
+			className: classes.filterChip,
+			size: "small",
+			onClick: () => handleFilterChipToggle(chip),
+			ref: (el) => chipRefs.current[index] = el
+		}));
+	})), !isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	}), /* @__PURE__ */ React.createElement("div", {
+		ref: additionalFilterChipsContainerRef,
+		style: { display: "flex" }
+	}, additionalFilterChips.map((chip, index) => /* @__PURE__ */ React.createElement(Chip$1, {
+		variant: "outlined",
+		onDelete: () => handleDelete("additionalFilter", index),
+		key: index,
+		label: chip.label,
+		className: classes.additionalFilterChip,
+		size: "small"
+	})))), !hideKpiSection && /* @__PURE__ */ React.createElement("div", {
+		className: classes.KPI,
+		ref: kpiContainerRef
+	}, kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+		className: classes.kpiItem,
+		id: index
+	}, /* @__PURE__ */ React.createElement("span", { className: classes.kpiLabel }, abbreviateLabel(kpi.label) && /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.label,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement(Typography$1, { noWrap: true }, /* @__PURE__ */ React.createElement("span", null, kpi.label, ":"))) || /* @__PURE__ */ React.createElement(React.Fragment, null, kpi.label)), /* @__PURE__ */ React.createElement("span", { className: classes.kpiValue }, /* @__PURE__ */ React.createElement(Tooltip$1, {
+		title: kpi.value,
+		arrow: true
+	}, /* @__PURE__ */ React.createElement("span", null, abbrNum(kpi.value, 1))))), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ React.createElement(Divider$1, {
+		orientation: "vertical",
+		flexItem: true
+	})))));
+};
+ChipSection.propTypes = {
+	filterChips: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired
+	})),
+	viewChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	additionalFilterChips: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	hideKpiSection: PropTypes.bool,
+	kpiValues: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+	})),
+	maxKPIsDisplayed: PropTypes.number,
+	handleDelete: PropTypes.func,
+	selectedFilterChipsIndex: PropTypes.number,
+	setSelectedFilterChipsIndex: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/IconButtonWithToolTip.jsx
+const useStyles$4 = makeStyles(() => ({ root: { "&.Mui-disabled": { pointerEvents: "auto" } } }));
+const IconButtonWithTooltip = ({ icon, title, disabled, onClick, className, fluentIconClassName, id, udprecordid,...other }) => {
+	const adjustedButtonProps = {
+		disabled,
+		component: disabled ? "div" : void 0,
+		onClick: disabled ? void 0 : onClick
+	};
+	const classes = useStyles$4();
+	return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(IconButton, {
+		id,
+		udprecordid,
+		className: `${className} ${classes.root}`,
+		...other,
+		...adjustedButtonProps
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		className: fluentIconClassName,
+		component: icon
+	})));
+};
+
+//#endregion
+//#region src/UI/templates/ui/renderers/ActionsRenderer.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	icon: { margin: theme.spacing(.5) },
+	iconButtonStyle: {
+		width: `${theme.spacing(3)}px !important`,
+		height: `${theme.spacing(3)}px !important`,
+		background: "#fff",
+		borderRadius: 25,
+		padding: 6
+	},
+	circularSkeleton: { borderRadius: "50%" }
+}));
+const ActionItem = memo((props) => {
+	const { icon, title, onClick, disabled, businessObjectKey = "" } = props;
+	const classes = useStyles$3();
+	return /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		title,
+		className: classes.icon,
+		size: "small",
+		onClick,
+		disabled,
+		icon,
+		fluentIconClassName: classes.iconButtonStyle,
+		id: "udpRecord-ActionsRenderer-" + title,
+		udprecordid: "udpRecord-ActionsRenderer-" + title
+	});
+});
+const ActionsRenderer = memo((props) => {
+	const { data: value, actionList, onClick } = props;
+	const classes = useStyles$3();
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const [sheetItem, setSheetItem] = useState(null);
+	const [dialogItem, setDialogItem] = useState(null);
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [sideSheetWidth, setSideSheetWidth] = useState(600);
+	const [sideSheetButtonLabel, setSideSheetButtonLabel] = useState("");
+	const [sideSheetOnSubmit, setSideSheetOnSubmit] = useState(() => () => console.warn("onSubmit not set"));
+	const openSheet = useCallback((sheetView) => {
+		setSheetItem(sheetView);
+		setSheetOpen(true);
+	}, []);
+	const openDialog = useCallback((dialogView) => {
+		setDialogItem(dialogView);
+		setDialogOpen(true);
+	}, []);
+	const closeSheet = useCallback(() => {
+		setSheetOpen(false);
+	}, []);
+	const closeDialog = useCallback(() => {
+		setDialogOpen(false);
+	}, []);
+	const getSheetView = (actionItem) => {
+		if (actionItem.opens === ClickOpenEnums.SideSheet) {
+			const valuePropName = actionItem?.view?.properties?.valuePropName;
+			if (valuePropName) actionItem.view.properties[valuePropName] = value;
+			const closeSideSheetPropName = actionItem?.view?.properties?.closeSideSheetPropName;
+			if (closeSideSheetPropName) actionItem.view.properties[closeSideSheetPropName] = closeSheet;
+		}
+		const properties = actionItem?.view?.properties || {};
+		return {
+			id: actionItem.id,
+			title: actionItem.title || "",
+			width: actionItem?.view?.width,
+			children: actionItem?.view?.component({
+				...properties,
+				setSideSheetWidth,
+				setSideSheetButtonLabel,
+				setSideSheetOnSubmit
+			})
+		};
+	};
+	const getDialogView = (actionItem) => {
+		if (actionItem.opens === ClickOpenEnums.Dialog) {
+			const handleActionTwo = async () => {
+				if (actionItem?.view?.properties?.actionTwo) {
+					setIsLoading(true);
+					await actionItem?.view?.properties?.actionTwo(value);
+					setIsLoading(false);
+				}
+				closeDialog();
+			};
+			return {
+				id: actionItem.id,
+				title: actionItem?.title || "",
+				closeDialog,
+				message: actionItem?.view?.properties?.message,
+				labelOne: actionItem?.view?.properties?.labelOne,
+				actionTwo: handleActionTwo,
+				labelTwo: actionItem?.view?.properties?.labelTwo
+			};
+		}
+	};
+	const displayActions = actionList.map((item, index) => {
+		let onClick$1 = () => item.onClick(value);
+		let title = item.title;
+		let disabled = item.disabled;
+		if (item.opens === ClickOpenEnums.SideSheet) {
+			const sheetView = getSheetView(item);
+			onClick$1 = () => openSheet(sheetView);
+		}
+		if (item.opens === ClickOpenEnums.Dialog) {
+			const dialogView = getDialogView(item);
+			onClick$1 = () => openDialog(dialogView);
+		}
+		if (item.getTitle) title = item.getTitle(value);
+		if (item.checkDisabled) disabled = item.checkDisabled(value);
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, item.loading && /* @__PURE__ */ React.createElement("div", { style: {
+			display: "inline-flex",
+			marginRight: 10
+		} }, /* @__PURE__ */ React.createElement(Skeleton, {
+			className: classes.circularSkeleton,
+			width: 24,
+			height: 40
+		})), !item.loading && /* @__PURE__ */ React.createElement(ActionItem, {
+			key: `${item.id}-${index}`,
+			title,
+			icon: item.icon,
+			onClick: onClick$1,
+			disabled,
+			businessObjectKey: value?.businessObjectKey
+		}));
+	});
+	return /* @__PURE__ */ React.createElement("div", null, displayActions, /* @__PURE__ */ React.createElement(SideSheet, {
+		open: sheetOpen,
+		onClose: closeSheet,
+		title: sheetItem?.title,
+		width: sheetItem?.width || 600,
+		buttonLabel: sideSheetButtonLabel,
+		onSubmit: sideSheetOnSubmit
+	}, /* @__PURE__ */ React.createElement("div", null, sheetItem?.children)), /* @__PURE__ */ React.createElement(FluentDialog, {
+		open: dialogOpen,
+		handleClose: closeDialog,
+		title: dialogItem?.title,
+		message: dialogItem?.message,
+		actionOne: dialogItem?.closeDialog,
+		labelOne: dialogItem?.labelOne,
+		actionTwo: dialogItem?.actionTwo,
+		labelTwo: dialogItem?.labelTwo,
+		progress: dialogItem?.isLoading
+	}));
+});
+ActionItem.displayName = "ActionItem";
+ActionsRenderer.displayName = "ActionsRenderer";
+
+//#endregion
+//#region src/UI/dataDisplay/HintPanel.jsx
+const useStyles$2 = makeStyles$1((theme) => ({
+	hintContainer: { borderLeft: `3px solid ${theme.palette.primary.main}` },
+	hintContent: {
+		backgroundColor: "#F3F9FE",
+		padding: `1rem`
+	},
+	hideHintButton: {
+		border: "none",
+		background: "none",
+		cursor: "pointer",
+		color: "#0B79D0",
+		textDecoration: "none"
+	},
+	hidehelp: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-end",
+		width: "100%"
+	}
+}));
+const HintPanel = ({ hint, hideHintText }) => {
+	const classes = useStyles$2(useTheme$1());
+	const [showHint, setShowHint] = useState(true);
+	const handleHideHint = () => {
+		setShowHint(false);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.hintContainer }, showHint && /* @__PURE__ */ React.createElement("div", { className: classes.hintContent }, /* @__PURE__ */ React.createElement("div", null, hint), /* @__PURE__ */ React.createElement("div", { className: classes.hidehelp }, /* @__PURE__ */ React.createElement("button", {
+		className: classes.hideHintButton,
+		onClick: handleHideHint
+	}, hideHintText))));
+};
+HintPanel.propTypes = {
+	hint: PropTypes.string.isRequired,
+	hideHintText: PropTypes.string.isRequired
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridViewsSideSheet.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	publicChip: {
+		backgroundColor: "#96d2ff",
+		color: "black",
+		width: "60%"
+	},
+	privateChip: {
+		backgroundColor: "#fce597",
+		color: "black",
+		width: "60%"
+	}
+}));
+const GridViewsSideSheet = (props) => {
+	const { onClose, open, openSaveView, rowData, setSelectedView } = props;
+	const classes = useStyles$1();
+	const { t } = useTranslation();
+	const { gridApi, onGridReady } = useAgGridApi();
+	const gApi = gridApi;
+	const ChipRenderer = ({ onChange, value, id }) => {
+		const handleChipClick = () => {
+			onChange(id);
+		};
+		return /* @__PURE__ */ React.createElement(Chip$1, {
+			label: value === VisibilityTypeEnums.Public ? t("Public") : t("Private"),
+			onClick: handleChipClick,
+			className: value === VisibilityTypeEnums.Public ? classes.publicChip : classes.privateChip,
+			size: "small"
+		});
+	};
+	const setView = useCallback((value) => {
+		setSelectedView(value);
+		onClose();
+	}, [setSelectedView, onClose]);
+	const actionList = useMemo(() => [{
+		id: 1,
+		title: t("Load View"),
+		icon: OpenInNewTabIcon,
+		onClick: setView,
+		disabled: false
+	}, {
+		id: 2,
+		title: t("Workflows"),
+		icon: TableHeaderRowIcon,
+		disabled: false
+	}], [setView, t]);
+	const gridOptions = {
+		headerHeight: 0,
+		frameworkComponents: {
+			actionsRenderer: ActionsRenderer,
+			chipRenderer: ChipRenderer
+		},
+		columnDefs: [
+			{
+				headerName: t("Name"),
+				field: "name"
+			},
+			{
+				field: "visibility",
+				cellRenderer: "chipRenderer",
+				cellRendererParams: (params) => ({
+					onChange: (id) => {},
+					value: params.data.gridViewVisibilityTypeId
+				})
+			},
+			{
+				headerName: t("Actions"),
+				cellRenderer: "actionsRenderer",
+				cellRendererParams: { actionList },
+				width: "100px",
+				pinned: "right",
+				suppressMenu: true,
+				sortable: false
+			}
+		]
+	};
+	return /* @__PURE__ */ React.createElement(SideSheet, {
+		id: "udpRecord-GridViewsSideSheet",
+		udprecordid: "udpRecord-GridViewsSideSheet",
+		open,
+		onClose,
+		width: "40%",
+		title: "Select a View",
+		buttonLabel: "Create View",
+		onSubmit: openSaveView
+	}, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 10 } }, /* @__PURE__ */ React.createElement(HintPanel, {
+		hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.",
+		hideHintText: "Hide Help"
+	})), /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
+		gridOptions,
+		title: "Saved Views",
+		rowData: rowData || [],
+		onGridReady,
+		suppressCellSelection: true,
+		suppressRowClickSelection: true,
+		sideBar: false,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		animateRows: true,
+		pagination: false,
+		api: gApi,
+		useNewHeader: true,
+		hiddenActionButtons: [
+			"saveView",
+			"views",
+			"insights",
+			"importExport",
+			"group",
+			"filter",
+			"columns",
+			"fitGrid",
+			"expandGrid",
+			"clearFilters"
+		]
+	}));
+};
+var GridViewsSideSheet_default = GridViewsSideSheet;
+GridViewsSideSheet.propTypes = {
+	onClose: PropTypes.func.isRequired,
+	open: PropTypes.bool.isRequired,
+	selectedMethod: PropTypes.string,
+	catalog: PropTypes.array,
+	openSaveView: PropTypes.func,
+	setViewChips: PropTypes.func,
+	setFilter: PropTypes.func,
+	rowData: PropTypes.array,
+	setSelectedView: PropTypes.func,
+	frameworkComponents: PropTypes.object,
+	scrollToTopOnStateChange: PropTypes.bool
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/BulkActionsGridButton.jsx
+const BulkActionsGridButton = (props) => {
+	const { numSelectedRows, bulkActions, triggerAction, domain } = props;
+	const [actionsAnchorEl, setActionsAnchorEl] = useState(null);
+	const handleBulkActionsClick = (event) => {
+		setActionsAnchorEl(event.currentTarget);
+	};
+	const triggerBulkAction = (actionId) => {
+		triggerAction(actionId);
+	};
+	const filterAction = (action) => {
+		return !!domain ? JSON.parse(action?.parameters)?.entityName === domain : true;
+	};
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		marginTop: 5,
+		marginLeft: 20
+	} }, /* @__PURE__ */ React.createElement(Badge, {
+		badgeContent: numSelectedRows,
+		color: "secondary"
+	}, /* @__PURE__ */ React.createElement(FluentButton, {
+		type: "button",
+		onClick: handleBulkActionsClick,
+		variant: "outlined",
+		color: "primary",
+		endIcon: /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: ChevronDownIcon,
+			size: "small"
+		})
+	}, "With Selected")), /* @__PURE__ */ React.createElement(Popover, {
+		id: "actions",
+		open: Boolean(actionsAnchorEl),
+		anchorEl: actionsAnchorEl,
+		onClose: () => setActionsAnchorEl(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, bulkActions && bulkActions.map((action) => {
+		const valid = filterAction(action);
+		return /* @__PURE__ */ React.createElement(Tooltip, {
+			placement: "right",
+			title: !valid ? "Action entity does not match data grid entity" : ""
+		}, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(MenuItem, {
+			onClick: () => triggerBulkAction(action.actionId),
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			disabled: !valid
+		}, /* @__PURE__ */ React.createElement(Typography, null, action.name), /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: valid ? action.icon ?? AppIconDefaultIcon : ErrorIcon,
+			style: { marginLeft: 7 },
+			color: !valid && "red"
+		}))));
+	})));
+};
+
+//#endregion
+//#region src/models/SearchOperator.ts
+const SearchOperators = [
+	{
+		value: "=",
+		label: "Equals"
+	},
+	{
+		value: "IN",
+		label: "Contains"
+	},
+	{
+		value: "<>",
+		label: "Does not Equal"
+	},
+	{
+		value: ">",
+		label: "Greater Than"
+	},
+	{
+		value: "<",
+		label: "Less Than"
+	},
+	{
+		value: ">=",
+		label: "Greater Than or Equal To"
+	},
+	{
+		value: "<=",
+		label: "Less Than or Equal To"
+	},
+	{
+		value: "LIKE",
+		label: "Like"
+	},
+	{
+		value: "STARTSWITH",
+		label: "Starts With"
+	},
+	{
+		value: "BETWEEN",
+		label: "Between"
+	}
+];
+const FilterOperators = {
+	equals: "=",
+	contains: "LIKE",
+	notEqual: "<>",
+	greaterThan: ">",
+	lessThan: "<",
+	greaterThanOrEqual: ">=",
+	lessThanOrEqual: "<=",
+	between: "BETWEEN",
+	In: "IN",
+	startsWith: "STARTSWITH"
+};
+
+//#endregion
+//#region src/UI/templates/AmbientGridTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	pab: {
+		display: "flex",
+		[theme.breakpoints.between("xs", "sm")]: {
+			position: "fixed",
+			bottom: theme.spacing(2),
+			right: theme.spacing(2),
+			zIndex: theme.zIndex.appBar
+		}
+	},
+	groupSideBar: { width: 225 },
+	gridApi: { display: "flex" }
+}));
+const AmbientGridTemplate = (props) => {
+	const { additionalFilters, api, apiMethod, applicationName, bulkActionFunctions, clearGridConfig, columnApi, columnDefs, data, defaultAutoSize, deleteGridConfig, disablePagination, disableDynamicSizing, disableRowSelection, entityName, filterChips = [], filters, frameworkComponents, gridReady, gridId, groupingData, height, hideFitGrid, hideExpandGrid, hideExportGrid, hideRemoveFilters, hideFilterTab, hideGroupTab, hideColumnTab, hideSearchBar, hiddenLabels, hiddenActionButtons = [], kpiValues = [], loading = false, onRowSelected, onSearch, onPrimaryActionClick, paginationPageSize = 20, primaryActionButton, primaryActionDisabled, primaryActionLabel, primaryActionIcon, rowModelType = "clientSide", rowNodeIdName, saveGridConfig, scrollToTopOnStateChange, secondaryActionButtons, title, tenantName, hideHeader, useNewHeader, insightsClick, user, id, udprecordid, additionalGridOptions = {}, headerBackgroundColor, onSearchKeyDown,...otherGridProps } = props;
+	const classes = useStyles();
+	const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();
+	const [isVisible, setIsVisible] = useState();
+	const [sidebarIsVisible, setSidebarIsVisible] = useState(false);
+	const [showGroupOptions, setShowGroupOptions] = useState(false);
+	const [selectedRow, setSelectedRow] = useState(null);
+	const [value, setValue] = useState(0);
+	const [saveViewOpen, setSaveViewOpen] = useState(false);
+	const [defaultViews, setDefaultViews] = useState([]);
+	const [viewsOpen, setViewsOpen] = useState(false);
+	const [agGridOptions, setAgGridOptions] = useState({
+		frameworkComponents,
+		suppressScrollOnNewData: !scrollToTopOnStateChange,
+		...additionalGridOptions
+	});
+	const gApi = api || gridApi;
+	const gcApi = columnApi || gridColumnApi;
+	const [viewChips, setViewChips] = useState([]);
+	const [additionalFilterChips, setAdditionalFilterChips] = useState(additionalFilters);
+	const [columnDefsValues, setColumnDefsValues] = useState(null);
+	const [selectedView, setSelectedView] = useState(null);
+	const [viewsRowData, setViewsRowData] = useState(null);
+	const [nonDefaultViewsRowData, setNonDefaultViewsRowData] = useState();
+	const [numSelectedRows, setNumSelectedRows] = useState(0);
+	const [domain, setDomain] = useState(null);
+	const [apiCatalogId, setApiCatalogId] = useState(null);
+	const { triggerAction } = useActions();
+	useEffect(() => {
+		if (apiMethod) {
+			setDomain(apiMethod.entityName);
+			setApiCatalogId(apiMethod.apiCatalogId);
+		}
+	}, [
+		apiMethod,
+		setDomain,
+		setApiCatalogId
+	]);
+	const defaultColActionsDef = {
+		resizable: true,
+		editable: false,
+		sortable: true,
+		filter: true,
+		floatingFilter: false,
+		enableRowGroup: true,
+		filterParams: { filterOptions: rowModelType === "serverSide" ? Object.keys(FilterOperators) : void 0 }
+	};
+	const handleChange = (event, newValue) => {
+		event.preventDefault();
+		setValue((preValue) => {
+			if (newValue === preValue && newValue !== 1) gApi.setSideBarVisible(!gApi.isSideBarVisible());
+			else if (newValue === 0) {
+				gApi.setSideBarVisible(true);
+				gApi.openToolPanel("filters");
+				setShowGroupOptions(false);
+			} else if (newValue === 1) {
+				showGrouping();
+				gApi.setSideBarVisible(false);
+			} else {
+				gApi.setSideBarVisible(true);
+				gApi.openToolPanel("columns");
+				setShowGroupOptions(false);
+			}
+			return newValue;
+		});
+	};
+	const onFilterClick = (event) => {
+		event.preventDefault();
+		gApi.setSideBarVisible(!gApi.isSideBarVisible());
+		gApi.openToolPanel("filters");
+		setShowGroupOptions(false);
+		setValue(0);
+		setSidebarIsVisible(!sidebarIsVisible);
+	};
+	const onColumnsClick = (event) => {
+		event.preventDefault();
+		gApi.setSideBarVisible(!gApi.isSideBarVisible());
+		gApi.openToolPanel("columns");
+		setShowGroupOptions(false);
+		setValue(2);
+		setSidebarIsVisible(!sidebarIsVisible);
+	};
+	const emptyArr = [];
+	const handleRowSelected = useCallback((event) => {
+		if (!gApi) return;
+		const selectedRows = gApi.getSelectedRows();
+		setNumSelectedRows(selectedRows.length);
+		const row = selectedRows.length && selectedRows[0];
+		setSelectedRow(row);
+		if (onRowSelected) onRowSelected(event, row);
+	}, [gApi, onRowSelected]);
+	const setSideBarInvisible = () => {
+		if (gApi.isSideBarVisible()) {
+			gApi.setSideBarVisible(false);
+			setIsVisible(false);
+		} else {
+			gApi.setSideBarVisible(true);
+			gApi.openToolPanel("filters");
+			setShowGroupOptions(false);
+			setIsVisible(true);
+		}
+	};
+	const handleFilterChange = (event) => {
+		gApi.setQuickFilter(event.target.value);
+	};
+	const groupGridItems = (groupItem) => {
+		gcApi.setRowGroupColumns([groupItem]);
+		gApi.expandAll();
+	};
+	const restoreGridDefault = () => {
+		gApi.setQuickFilter("");
+		gcApi.setRowGroupColumns([]);
+		gApi.setFilterModel(null);
+		gApi.setQuickFilter("");
+		gcApi.resetColumnState();
+	};
+	const showGrouping = () => {
+		setShowGroupOptions(!showGroupOptions);
+		gApi.setSideBarVisible(false);
+	};
+	const expandGroupedGrid = () => {
+		gApi.expandAll();
+	};
+	const collapseGroupedGrid = () => {
+		gApi.collapseAll();
+	};
+	const fitToSpace = () => {
+		gApi.sizeColumnsToFit();
+	};
+	const exportGrid = () => {
+		gApi.exportDataAsCsv({
+			allColumns: true,
+			fileName: "export"
+		});
+	};
+	const openSaveView = () => {
+		setColumnDefsValues(JSON.stringify(gcApi.getColumnState()));
+		setSaveViewOpen(true);
+	};
+	const closeSaveView = () => {
+		setSaveViewOpen(false);
+	};
+	const openViews = useCallback(() => {
+		setViewsOpen(true);
+	}, []);
+	const closeViews = () => {
+		setViewsOpen(false);
+	};
+	const handleTriggerAction = useCallback((actionId) => {
+		if (triggerAction && gApi) triggerAction(actionId, gApi.getSelectedRows());
+	}, [triggerAction, gApi]);
+	const autoSizeAll = useCallback((skipHeader) => {
+		invariant(gcApi, `gridColumnApi not ready`);
+		const allColumnIds = [];
+		gcApi.getAllColumns().forEach((column) => {
+			allColumnIds.push(column.getColId());
+		});
+		gcApi.autoSizeColumns(allColumnIds, skipHeader);
+	}, [gcApi]);
+	const autoSizeAllWithoutHeader = useCallback(() => autoSizeAll(false), [autoSizeAll]);
+	const firstDataRendered = useCallback((params) => {
+		!defaultAutoSize && params?.api.sizeColumnsToFit();
+		defaultAutoSize && autoSizeAllWithoutHeader();
+	}, [defaultAutoSize, autoSizeAllWithoutHeader]);
+	useEffect(() => {
+		if (!gApi) return;
+		setSelectedRow(gApi.getSelectedRows()?.length && gApi.getSelectedRows()[0]);
+		selectedRow && gApi.ensureNodeVisible(selectedRow);
+	}, [gApi, selectedRow]);
+	const handleChipDelete = (chipType, chipIndex) => {
+		switch (chipType) {
+			case "view":
+				setViewChips((prevChips) => prevChips.filter((_, index) => index !== chipIndex));
+				setSelectedView(null);
+				gcApi.resetColumnState();
+				gApi.sizeColumnsToFit();
+				break;
+			case "additionalFilter":
+				setAdditionalFilterChips((prevChips) => {
+					if (prevChips[chipIndex]?.onUntoggle) prevChips[chipIndex]?.onUntoggle();
+					return prevChips.filter((_, index) => index !== chipIndex);
+				});
+				break;
+			default: break;
+		}
+	};
+	useEffect(() => {
+		if (viewsRowData?.length > 0) {
+			const DefaultViews = viewsRowData.reduce((acc, row) => {
+				if (row.isDefault) return [...acc, row];
+				return acc;
+			}, []);
+			const nonDefaultViews = viewsRowData.reduce((acc, row) => {
+				if (!row.isDefault) return [...acc, row];
+				return acc;
+			}, []);
+			setDefaultViews(DefaultViews);
+			setNonDefaultViewsRowData(nonDefaultViews);
+		}
+	}, [viewsRowData]);
+	const setView = useCallback((value$1) => {
+		const columnState = value$1?.gridViewGridViewGridConfiguration.map((ele) => ele.gridViewGridConfigurationGridConfiguration);
+		setViewChips((prevChips) => [{ label: value$1?.name }]);
+		onFirstDataRendered(gApi, gcApi, columnState);
+	}, [
+		setViewChips,
+		gApi,
+		gcApi
+	]);
+	const setFilter = (value$1) => {};
+	const [{ data: views }, refetch] = useAxiosGet(ConfigService.tenantV2ApiUrl, `GridView/getFromUser/${user?.id}/${gridId}`, { params: {
+		domainName: domain,
+		apiCatalogId
+	} }, !!!ConfigService.tenantV2ApiUrl || !!!gridId || !!!user);
+	const [{ data: bulkActions }] = useAxiosGet(ConfigService.integrationV2ApiUrl, `action/grid/${gridId}`, {}, !!!ConfigService.integrationV2ApiUrl || !!!gridId);
+	useEffect(() => {
+		setViewsRowData(views);
+	}, [openViews, views]);
+	const getView = useCallback(async () => {
+		await apiMutate$1(ConfigService.tenantV2ApiUrl, `GridView/${selectedView.gridViewId}/PartiallyFull`, { method: "get" }).then((response) => {
+			setView(response.data);
+		}).catch((error) => {
+			console.log(error);
+		});
+	}, [selectedView, setView]);
+	useEffect(() => {
+		if (!selectedView?.gridViewId) {
+			gcApi?.resetColumnState();
+			gApi?.sizeColumnsToFit();
+			return;
+		}
+		getView();
+	}, [
+		setSelectedView,
+		selectedView,
+		gcApi,
+		gApi,
+		getView
+	]);
+	useEffect(() => {
+		if (additionalFilters) setAdditionalFilterChips(additionalFilters);
+	}, [additionalFilters]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, !hideHeader && useNewHeader && gApi && /* @__PURE__ */ React.createElement(GridPrimaryBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		saveViewClick: openSaveView,
+		viewsClick: openViews,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		insightsClick,
+		clearClick: restoreGridDefault,
+		filterClick: onFilterClick,
+		columnsClick: onColumnsClick,
+		hideSearchBar,
+		secondaryActionButtons: secondaryActionButtons || [],
+		onPrimaryActionClick,
+		primaryActionDisabled,
+		primaryActionLabel,
+		primaryActionIcon,
+		hiddenActionButtons: hiddenActionButtons || [],
+		hiddenLabels: hiddenLabels || [],
+		background: headerBackgroundColor,
+		onSearchKeyDown
+	}), useNewHeader && (kpiValues?.length > 0 || filterChips?.length > 0 || filters?.length > 0 || viewChips?.length > 0 || additionalFilterChips?.length > 0) && /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row",
+		height: 40
+	} }, /* @__PURE__ */ React.createElement(Grow, {
+		in: bulkActions && numSelectedRows > 0,
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement(BulkActionsGridButton, {
+		bulkActions,
+		numSelectedRows,
+		triggerAction: handleTriggerAction,
+		domain
+	})), /* @__PURE__ */ React.createElement(ChipSection, {
+		filterChips,
+		viewChips,
+		additionalFilterChips,
+		kpiValues,
+		handleDelete: handleChipDelete,
+		setAdditionalFilterChips,
+		setViewChips,
+		setFilter
+	})), useNewHeader && gApi && gcApi && /* @__PURE__ */ React.createElement(GridViewsSideSheet_default, {
+		open: viewsOpen,
+		onClose: closeViews,
+		openSaveView,
+		setViewChips,
+		setFilter: setView,
+		rowData: views,
+		setSelectedView
+	}), !hideHeader && !useNewHeader && /* @__PURE__ */ React.createElement(GridActionBar, {
+		title,
+		showFilter: setSideBarInvisible,
+		selected: isVisible,
+		onChange: onSearch || handleFilterChange,
+		showGroup: showGrouping,
+		value,
+		handleChange,
+		fitClick: fitToSpace,
+		expandClick: autoSizeAllWithoutHeader,
+		exportClick: exportGrid,
+		clearClick: restoreGridDefault,
+		saveGridConfig,
+		deleteGridConfig,
+		clearGridConfig,
+		hideFitGrid,
+		hideExpandGrid,
+		hideExportGrid,
+		hideRemoveFilters,
+		hideFilterTab,
+		hideGroupTab,
+		hideColumnTab,
+		hideSearchBar
+	}, primaryActionButton && /* @__PURE__ */ React.createElement("div", { className: classes.pab }, primaryActionButton)), loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(AgTable, {
+		...agGridOptions,
+		columnDefs,
+		dynamicSizing: !disableDynamicSizing,
+		rowData: data || emptyArr,
+		onGridReady: gridReady || onGridReady,
+		onRowSelected: handleRowSelected,
+		suppressCellSelection: true,
+		suppressRowClickSelection: false,
+		defaultColDef: defaultColActionsDef,
+		enableRangeSelection: true,
+		enableColResize: true,
+		sideBar: sidebarIsVisible,
+		pivotMode: false,
+		pivotPanelShow: "never",
+		groupSelectsChildren: true,
+		animateRows: false,
+		pagination: !disablePagination,
+		showOpenedGroup: true,
+		paginateChildRows: true,
+		paginationPageSize,
+		modules: rowModelType === "serverSide" ? [ServerSideRowModelModule] : [],
+		onFirstDataRendered: firstDataRendered,
+		rowModelType,
+		rowClassRules: { "first-row-in-group": (params) => params.node.rowIndex !== 0 && params.node.firstChild },
+		height,
+		api: gApi,
+		rowSelection: !disableRowSelection && (bulkActions ? "multiple" : "single"),
+		hideHeader,
+		...otherGridProps
+	})), showGroupOptions && /* @__PURE__ */ React.createElement("div", { className: classes.groupSideBar }, /* @__PURE__ */ React.createElement(GridGroupingSidebar, {
+		groupItem: (item) => groupGridItems(item),
+		closeClick: () => groupGridItems(""),
+		expandClick: expandGroupedGrid,
+		collapseClick: collapseGroupedGrid,
+		groupingData,
+		height
+	})), !hiddenActionButtons?.includes("saveView") && /* @__PURE__ */ React.createElement(SaveViewFormDialog, {
+		open: saveViewOpen,
+		handleClose: closeSaveView,
+		application: applicationName,
+		tenant: tenantName,
+		user,
+		columnDefsValues,
+		refetchViews: refetch,
+		gApi,
+		gcApi,
+		setSelectedView: setView,
+		gridId,
+		domain,
+		apiCatalogId
+	})));
+};
+AmbientGridTemplate.propTypes = {
+	columnDefs: PropTypes.array,
+	handleRowSelected: PropTypes.func,
+	data: PropTypes.array,
+	title: PropTypes.string,
+	groupingData: PropTypes.array,
+	frameworkComponents: PropTypes.object,
+	loading: PropTypes.bool,
+	primaryActionButton: PropTypes.object,
+	rowNodeIdName: PropTypes.string,
+	defaultAutoSize: PropTypes.bool,
+	scrollToTopOnStateChange: PropTypes.bool,
+	disableDynamicSizing: PropTypes.bool,
+	filters: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired
+	})),
+	views: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	additionalFilters: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired })),
+	kpis: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+	})),
+	useNewHeader: PropTypes.bool,
+	insightsClick: PropTypes.func,
+	hiddenActionButtons: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: PropTypes.arrayOf(PropTypes.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: PropTypes.func,
+	primaryActionLabel: PropTypes.string,
+	primaryActionIcon: PropTypes.elementType,
+	secondaryActionButtons: PropTypes.array,
+	applicationName: PropTypes.string,
+	entityName: PropTypes.string,
+	tenantName: PropTypes.string,
+	user: PropTypes.object,
+	kpiValues: PropTypes.array
+};
+
+//#endregion
+export { ActionContext, ActionDispatchContext, ActionLoadingDispatchContext, ActionsRenderer, AgTable, AgTableButtons, AmbientGridTemplate, AmbientTextField, AmbientToggleButton, AmbientTokenButton, DynamicContainerWithMenu, Ellipse, FilterOperators, FluentDialog, GridActionBar, GridGroupingHeader, GridGroupingSidebar, GridSidebarContainer, IconButtonWithTooltip, LicenseKey, SearchOperators, Token, clearGridState, deleteGridState, findTermByType, getEllipseColor, getEntityAttributes, getGridState, getPathObject, getPathParametersObj, getPrimaryKeyValues, getSuccessAction, isValueSelected, onFirstDataRendered, saveGridState, useActionState, useActionStore, useActions, useAgGridApi, useCatalogStore, useDynamicListCalculation, useExport, useGridClear, useGridFormat, useHandleAction, useInquiryStore, useQuickFilter, useSetInitialInquiryMenuVisibility };
+//# sourceMappingURL=AmbientGridTemplate-Ch1eLyEu.js.map