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

package/dist-tsdown/AmbientGridTemplate-RvpH04W2.cjs

@@ -0,0 +1,4151 @@
+const require_chunk = require('./chunk-CsX-DzYB.cjs');
+const require_SideSheet = require('./SideSheet-XOQ0yjmY.cjs');
+const require_EnvironmentRibbon = require('./EnvironmentRibbon-C5I-zJ7u.cjs');
+const require_apiHelpers = require('./apiHelpers-TkqtXraB.cjs');
+const react = require_chunk.__toESM(require("react"));
+const __material_ui_core = require_chunk.__toESM(require("@material-ui/core"));
+const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
+const udp_react_stencil_component_library = require_chunk.__toESM(require("udp-react-stencil-component-library"));
+const notistack = require_chunk.__toESM(require("notistack"));
+const react_router_dom = require_chunk.__toESM(require("react-router-dom"));
+const clsx = require_chunk.__toESM(require("clsx"));
+const __fluentui_react_icons = require_chunk.__toESM(require("@fluentui/react-icons"));
+const prop_types = require_chunk.__toESM(require("prop-types"));
+const react_i18next = require_chunk.__toESM(require("react-i18next"));
+const zustand = require_chunk.__toESM(require("zustand"));
+const zustand_middleware = require_chunk.__toESM(require("zustand/middleware"));
+const __material_ui_core_styles = require_chunk.__toESM(require("@material-ui/core/styles"));
+const __material_ui_lab = require_chunk.__toESM(require("@material-ui/lab"));
+require("./style.css");
+const __material_ui_lab_ToggleButton = require_chunk.__toESM(require("@material-ui/lab/ToggleButton"));
+const react_is = require_chunk.__toESM(require("react-is"));
+const __material_ui_core_utils = require_chunk.__toESM(require("@material-ui/core/utils"));
+const __ag_grid_enterprise_server_side_row_model = require_chunk.__toESM(require("@ag-grid-enterprise/server-side-row-model"));
+const invariant = require_chunk.__toESM(require("invariant"));
+const __ag_grid_enterprise_all_modules = require_chunk.__toESM(require("@ag-grid-enterprise/all-modules"));
+require("@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css");
+require("@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material.css");
+require("./utilities/aggrid/ag-grid-styles.scss");
+const __ag_grid_community_react = require_chunk.__toESM(require("@ag-grid-community/react"));
+const __ag_grid_enterprise_excel_export = require_chunk.__toESM(require("@ag-grid-enterprise/excel-export"));
+const material_ui_popup_state_hooks = require_chunk.__toESM(require("material-ui-popup-state/hooks"));
+const __material_ui_icons = require_chunk.__toESM(require("@material-ui/icons"));
+const __ag_grid_enterprise_core = require_chunk.__toESM(require("@ag-grid-enterprise/core"));
+const __material_ui_core_Chip = require_chunk.__toESM(require("@material-ui/core/Chip"));
+const __material_ui_core_Divider = require_chunk.__toESM(require("@material-ui/core/Divider"));
+const __material_ui_core_Tooltip = require_chunk.__toESM(require("@material-ui/core/Tooltip"));
+const __material_ui_core_Typography = require_chunk.__toESM(require("@material-ui/core/Typography"));
+const __material_ui_icons_Star = require_chunk.__toESM(require("@material-ui/icons/Star"));
+
+//#region src/AGLicense.js
+const LicenseKey = "Using_this_{AG_Grid}_Enterprise_key_{AG-060880}_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_2025}____[v3]_[01]_MTc1MTA2NTIwMDAwMA==17ac166e7bb5dcca7f3eaa21c79da63b";
+
+//#endregion
+//#region src/utilities/maintenanceEngine/CrudBrowserUtilities.js
+const RESERVED_PATH_PARAMETERS = ["version", "udp-api-version"];
+const getPrimaryKeyValues = (properties, entityValue) => {
+	const primaryKeyProperties = properties.filter((property) => property?.extendedProperties?.identifier);
+	const primaryKeyValues = primaryKeyProperties.reduce((keyValues, property) => {
+		if (entityValue && entityValue[property["name"]] !== null) keyValues.push(entityValue[property["name"]]);
+		return keyValues;
+	}, []);
+	return primaryKeyValues;
+};
+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/utilities/entities/entityUtilities.js
+const getCommonEntityName = (entityName) => {
+	if (!entityName) return entityName;
+	return require_EnvironmentRibbon.toTitleCase(getSanitizedName(entityName));
+};
+const getSanitizedName = (entityName) => {
+	if (!entityName) return "";
+	const entityNameParts = entityName.split(".");
+	return entityNameParts[entityNameParts.length - 1];
+};
+const getFullyQualifiedName = (udpObjectInfo) => {
+	if (!udpObjectInfo) return "";
+	const modelNameSpace = udpObjectInfo.namespaceStructure?.model;
+	if (modelNameSpace) return `${modelNameSpace}.Models.${udpObjectInfo.sanitizedName}`;
+	else return "";
+};
+
+//#endregion
+//#region src/contexts/ActionDispatchContext.js
+const ActionDispatchContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/contexts/ActionContext.js
+const ActionContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/UI/SuccessAction.jsx
+const getSuccessAction = (closeSnackbar) => {
+	const successAction = (key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+		color: "secondary",
+		size: "small",
+		onClick: () => {
+			closeSnackbar(key);
+		},
+		children: "OK"
+	});
+	return successAction;
+};
+
+//#endregion
+//#region src/stores/actionStore.ts
+const useActionStore = (0, zustand.create)()((0, zustand_middleware.devtools)((set) => ({
+	selectedNode: null,
+	setSelectedNode: (selectedNode) => set((state) => ({ selectedNode })),
+	hideActions: false,
+	setHideActions: (hideActions) => set((state) => ({ hideActions }))
+})));
+
+//#endregion
+//#region src/stores/inquiryStore.ts
+const useInquiryStore = (0, zustand.create)()((0, zustand_middleware.devtools)((set) => ({
+	title: "",
+	setInquiryToolbarTitle: (title) => set((state) => ({ title })),
+	workflowMap: {},
+	setWorkflowMap: (workflowMap) => set((state) => ({ workflowMap: {
+		...state.workflowMap,
+		...workflowMap
+	} })),
+	workflowStarting: false,
+	setWorkflowStarting: (workflowStarting) => set((state) => ({ workflowStarting }))
+})));
+
+//#endregion
+//#region src/actions/utils/actionUtils.js
+function isValidURL(url) {
+	const urlPattern = /^(ftp|http|https):\/\/[^ "]+$/;
+	return urlPattern.test(url);
+}
+const useHandleAction = () => {
+	const history = (0, react_router_dom.useHistory)();
+	const { t } = (0, react_i18next.useTranslation)();
+	const { enqueueSnackbar, closeSnackbar } = (0, notistack.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) => require_SideSheet.apiMutate(udp_react_stencil_component_library.ConfigService.config.BUILDER_API_BASE, `workflow/${workflowId}/start`, { method: "post" }, { data: payload });
+	const getApiMethod = async (apiMethodId) => require_SideSheet.apiMutate(udp_react_stencil_component_library.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 require_EnvironmentRibbon.NodeActionEnums.Open_External_Link:
+				window.open(actionValue, "_blank");
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Redirect:
+				if (isValidURL(actionValue)) window.location.href = actionValue;
+				else history.push(actionValue);
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Create:
+				if (dispatch) dispatch({
+					type: "OPEN_SIDESHEET",
+					sideSheet: {
+						action,
+						open: true
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Update:
+				if (dispatch) dispatch({
+					type: "OPEN_SIDESHEET",
+					sideSheet: {
+						action,
+						open: true
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Delete:
+				if (dispatch) dispatch({
+					type: "OPEN_MODAL",
+					modal: {
+						action,
+						open: true,
+						title: "Delete "
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Retrieve:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Entity
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Open_Page_Split_Screen:
+				if (dispatch) if (!!selectedNode) dispatch({
+					type: "OPEN_PAGE_CONTAINER_SPLIT_SCREEN",
+					pageContainerSplitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Page
+					}
+				});
+				else dispatch({
+					type: "OPEN_PAGE_SPLIT_SCREEN",
+					pageSplitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Page
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Open_Shell_Split_Screen:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Page
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Open_Notes:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Notes
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Open_Reminders:
+				if (dispatch) if (currentContainerId) break;
+				else dispatch({
+					type: "OPEN_SPLIT_SCREEN",
+					splitScreen: {
+						action,
+						open: true,
+						type: require_EnvironmentRibbon.SplitScreenTypeEnums.Reminders
+					}
+				});
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Execute_Api:
+				if (executeAction && action?.value) {
+					let data = {};
+					if (entityAttributes.length > 0 && (selectedNode?.nodeObj || actionData)) {
+						if (actionData) data = { ...actionData };
+						else data = { ...selectedNode?.nodeObj };
+						const removeAttributes = entityAttributes.filter((p) => p?.extendedProperties?.childEntity);
+						removeAttributes.forEach((att) => {
+							if (att["name"] in data || "serializeFields" in data) delete data[att["name"]];
+						});
+					}
+					const apiMethod = await getApiMethod(action?.value);
+					const pathParamValues = getPathParametersObj(apiMethod?.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 require_EnvironmentRibbon.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
+						};
+						const containerId = currentContainerId || 0;
+						setWorkflowMap({ [containerId]: workflow });
+					} else history.push({
+						pathname: `/workflowtask/${playId}?taskId=`,
+						state: { label: t("Workflow") }
+					});
+				}
+				break;
+			case require_EnvironmentRibbon.NodeActionEnums.Execute_Function:
+				actionData?.execute && actionData.execute();
+				break;
+			default: break;
+		}
+	};
+	return { handleAction };
+};
+
+//#endregion
+//#region src/contexts/ActionLoadingDispatchContext.js
+const ActionLoadingDispatchContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/stores/catalogStore.ts
+const useCatalogStore = (0, zustand.create)()((0, zustand_middleware.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
+	} }))
+})));
+
+//#endregion
+//#region src/hooks/useActions.js
+const useActions = () => {
+	const dispatch = (0, react.useContext)(ActionDispatchContext);
+	const dispatchActionLoading = (0, react.useContext)(ActionLoadingDispatchContext);
+	const actionState = useActionState();
+	const { catalogsMap, currentApiCatalogId } = useCatalogStore();
+	const currentContainerId = require_EnvironmentRibbon.useShellStore((state) => state.currentContainerId);
+	const { enqueueSnackbar } = (0, notistack.useSnackbar)();
+	const { t } = (0, react_i18next.useTranslation)();
+	const { handleAction } = useHandleAction();
+	const setActionLoading = (0, react.useCallback)((loading) => {
+		dispatchActionLoading({
+			type: "SET_ACTION_LOADING",
+			loading
+		});
+	}, [dispatchActionLoading]);
+	const setActionWaitingToExecute = (0, react.useCallback)((actionId) => {
+		dispatchActionLoading({
+			type: "SET_ACTION_WAITING_TO_EXECUTE",
+			actionId
+		});
+	}, [dispatchActionLoading]);
+	const executeGetAction = (0, react.useCallback)(async (actionId) => require_SideSheet.apiMutate(udp_react_stencil_component_library.ConfigService.integrationV1ApiUrl, `action/${actionId}`, { method: "get" }, {}), []);
+	const executeAction = (0, react.useCallback)(async (data, id) => require_SideSheet.apiMutate(udp_react_stencil_component_library.ConfigService.integrationV1ApiUrl, `apimethod/executeQueryWithParameters/${id}`, { method: "post" }, data), []);
+	const setActionPanels = (0, react.useCallback)((actionPanels, containerId) => {
+		dispatch({
+			type: "SET_ACTION_PANELS",
+			actionPanels,
+			containerId
+		});
+	}, [dispatch]);
+	const getActionPanelByAction = (0, react.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)) {
+					const foundPanel = actionPanel.find((ap) => {
+						return ap.panelActions.find((pa) => {
+							return pa.actionId === act.actionId;
+						});
+					});
+					return foundPanel;
+				} 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 = (0, react.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 !== require_EnvironmentRibbon.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 = (0, react.useCallback)(async (actionId, actionData) => {
+		if (actionState?.catalogPromise) {
+			if (!actionState?.catalog) setActionWaitingToExecute(actionId);
+			try {
+				const result = await actionState.catalogPromise;
+				setupAndExecuteAction(result?.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
+	]);
+	const triggerAction = (0, react.useCallback)((actionId, actionData) => {
+		executeTriggerAction(actionId, actionData);
+	}, [executeTriggerAction]);
+	const triggerMultipleActions = (0, react.useCallback)((actionIds) => {
+		actionIds.forEach((id) => {
+			executeTriggerAction(id);
+		});
+	}, [executeTriggerAction]);
+	const setCatalogEntities = (0, react.useCallback)((catalogEntities) => {
+		dispatch({
+			type: "SET_CATALOG_ENTITIES",
+			catalogEntities
+		});
+	}, [dispatch]);
+	const setCatalogPromotedEntities = (0, react.useCallback)((catalogPromotedEntities) => {
+		dispatch({
+			type: "SET_CATALOG_PROMOTED_ENTITIES",
+			catalogPromotedEntities
+		});
+	}, [dispatch]);
+	const setInquiryParams = (0, react.useCallback)((inquiryParams, containerId) => {
+		dispatch({
+			type: "SET_INQUIRY_PARAMS",
+			inquiryParams,
+			containerId
+		});
+	}, [dispatch]);
+	const setShowInquiryHeaderActions = (0, react.useCallback)((showInquiryHeaderActions) => {
+		dispatch({
+			type: "SET_SHOW_INQUIRY_HEADER_ACTIONS",
+			showInquiryHeaderActions
+		});
+	}, [dispatch]);
+	const setMenuListState = (0, react.useCallback)((menuListState) => {
+		dispatch({
+			type: "SET_MENU_LIST_STATE",
+			menuListState
+		});
+	}, [dispatch]);
+	const closeAllSplitScreens = (0, react.useCallback)(() => {
+		dispatch({ type: "CLOSE_ALL_SPLIT_SCREENS" });
+	}, [dispatch]);
+	const openSplitScreen = (0, react.useCallback)((splitScreen) => {
+		dispatch({
+			type: "OPEN_SPLIT_SCREEN",
+			splitScreen
+		});
+	}, [dispatch]);
+	const openPageSplitScreen = (0, react.useCallback)((pageSplitScreen) => {
+		dispatch({
+			type: "OPEN_PAGE_SPLIT_SCREEN",
+			pageSplitScreen
+		});
+	}, [dispatch]);
+	const openPageContainerSplitScreen = (0, react.useCallback)((pageContainerSplitScreen) => {
+		dispatch({
+			type: "OPEN_PAGE_CONTAINER_SPLIT_SCREEN",
+			pageContainerSplitScreen
+		});
+	}, [dispatch]);
+	const setApiCatalog = (0, react.useCallback)((catalog) => {
+		dispatch({
+			type: "SET_API_CATALOG",
+			catalog
+		});
+	}, [dispatch]);
+	return {
+		setActionPanels,
+		triggerAction,
+		triggerMultipleActions,
+		setCatalogEntities,
+		setCatalogPromotedEntities,
+		setInquiryParams,
+		setShowInquiryHeaderActions,
+		setMenuListState,
+		closeAllSplitScreens,
+		openSplitScreen,
+		openPageSplitScreen,
+		openPageContainerSplitScreen,
+		setApiCatalog,
+		setActionLoading
+	};
+};
+const useActionState = () => (0, react.useContext)(ActionContext);
+
+//#endregion
+//#region src/UI/inputs/textField/AmbientTextField.jsx
+const useStyles$21 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: label ? classes.root : classes.noLabel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.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: prop_types.default.string,
+	label: prop_types.default.string,
+	startAdornment: prop_types.default.node,
+	endAdornment: prop_types.default.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 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children
+	});
+};
+Ellipse.propTypes = {
+	color: prop_types.default.string,
+	size: prop_types.default.string,
+	variant: prop_types.default.string
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridSidebarContainer.jsx
+const useStyles$19 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Paper, {
+			elevation: "0",
+			square: true,
+			style: { background: color },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.groupWrapper,
+				children
+			})
+		})
+	});
+};
+GridSidebarContainer.propTypes = {
+	children: prop_types.default.node,
+	color: prop_types.default.string
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientTokenButton.jsx
+const useStyles$18 = (0, __material_ui_core.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 = (0, react.forwardRef)(function AmbientTokenButton$1(props, ref) {
+	const { tooltip, ariaLabel, onClick, size, icon = __fluentui_react_icons.ChevronDownIcon, iconClassName, otherProps, id = "token-button", udprecordid } = props;
+	const classes = useStyles$18(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+			title: tooltip,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.IconButton, {
+				id,
+				udprecordid,
+				ref,
+				"aria-label": ariaLabel,
+				className: iconClassName ?? classes.icon,
+				size: size ?? "small",
+				onClick,
+				...otherProps,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+					className: classes.iconButtonStyle,
+					component: icon
+				})
+			})
+		})
+	});
+});
+AmbientTokenButton.propTypes = {
+	tooltip: prop_types.default.string.isRequired,
+	ariaLabel: prop_types.default.string.isRequired,
+	onClick: prop_types.default.func,
+	icon: prop_types.default.func.isRequired
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingHeader.jsx
+const useStyles$17 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.actionHeader,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+					icon: __fluentui_react_icons.ChevronFold10Icon,
+					tooltip: "Collapse All",
+					ariaLabel: "Collapse All",
+					onClick: collapseClick
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+					icon: __fluentui_react_icons.ChevronUnfold10Icon,
+					tooltip: "Expand All",
+					ariaLabel: "Expand All",
+					onClick: expandClick
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.LayoutUnit, { unit: "nudge" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.label,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+					variant: "caption",
+					children: "Group By:"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.LayoutUnit, { unit: "nudge" })
+		]
+	});
+};
+GridGroupingHeader.propTypes = {
+	expandClick: prop_types.default.func.isRequired,
+	collapseClick: prop_types.default.func.isRequired
+};
+
+//#endregion
+//#region src/UI/components/dataDisplay/Token.jsx
+const useStyles$16 = (0, __material_ui_core.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 = (0, __material_ui_core.useTheme)();
+	const iconColor = (0, react.useMemo)(() => {
+		return getEllipseColor(theme, color);
+	}, [color, theme]);
+	const tokenComponent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ellipse, {
+			variant,
+			size,
+			color,
+			...IconEllipseProps,
+			children: type === "letter" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+				variant: "body1",
+				className: classes.letter,
+				children: letter.toUpperCase()
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+				size: size === "small" ? size : "medium",
+				color: iconColor,
+				type: iconType,
+				icon,
+				style: { color: iconColor }
+			})
+		})
+	});
+	if (type === "action") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.IconButton, {
+		classes: { root: classes.buttonRoot },
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+			size: size === "small" ? size : "medium",
+			color: iconColor,
+			type: iconType,
+			icon,
+			style: { color: iconColor }
+		})
+	});
+	return tokenComponent;
+};
+Token.propTypes = {
+	type: prop_types.default.string,
+	variant: prop_types.default.string,
+	color: prop_types.default.string,
+	size: prop_types.default.string,
+	iconType: prop_types.default.string,
+	icon: prop_types.default.elementType,
+	letter: prop_types.default.string,
+	onClick: prop_types.default.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientToggleButton.jsx
+const useStyles$15 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab_ToggleButton.default, {
+			classes: { root: classes.buttonRoot },
+			value,
+			"aria-label": ariaLabel,
+			onClick,
+			...otherProps,
+			children
+		})
+	});
+};
+AmbientToggleButton.propTypes = {
+	children: prop_types.default.node,
+	value: prop_types.default.string,
+	ariaLabel: prop_types.default.string,
+	onClick: prop_types.default.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		className: (0, clsx.default)(classes.root, { [classes.vertical]: orientation === "vertical" }, className),
+		ref,
+		...other,
+		children: react.Children.map(children, (child) => {
+			if (!(0, react.isValidElement)(child)) return null;
+			if (process.env.NODE_ENV !== "production") {
+				if ((0, react_is.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 (0, react.cloneElement)(child, {
+				className: (0, clsx.default)(classes.grouped, classes[`grouped${(0, __material_ui_core_utils.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: prop_types.default.node,
+	classes: prop_types.default.object,
+	className: prop_types.default.string,
+	exclusive: prop_types.default.bool,
+	onChange: prop_types.default.func,
+	orientation: prop_types.default.oneOf(["horizontal", "vertical"]),
+	size: prop_types.default.oneOf([
+		"large",
+		"medium",
+		"small"
+	]),
+	value: prop_types.default.any
+};
+var AmbientToggleButtonGroupDefault_default = (0, __material_ui_core_styles.withStyles)(styles, { name: "MuiToggleButtonGroup" })(AmbientToggleButtonGroupDefault);
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingSidebar.jsx
+const useStyles$14 = (0, __material_ui_core.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] = (0, react.useState)("");
+	const handleChange = (event, nextView) => {
+		setView(nextView);
+	};
+	const GroupItem = ({ label, clear }) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Token, {
+			icon: clear ? __fluentui_react_icons.ChromeCloseIcon : __fluentui_react_icons.AssessmentGroupIcon,
+			color: "trigger",
+			size: "small",
+			variant: "filled",
+			type: "icon"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Typography, {
+			variant: "caption",
+			style: { color: "black" },
+			children: [
+				" ",
+				label,
+				" "
+			]
+		})] });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(GridSidebarContainer, {
+			color,
+			height,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridGroupingHeader, {
+				expandClick,
+				collapseClick,
+				closeClick
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.groupActionContainer,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AmbientToggleButtonGroupDefault_default, {
+					orientation: "vertical",
+					value: view,
+					exclusive: true,
+					onChange: handleChange,
+					className: classes.buttonGroupWrapper,
+					children: [groupingData.map((item) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientToggleButton, {
+							value: item.value,
+							"aria-label": item.label,
+							onClick: () => groupItem(item.groupItem),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupItem, { label: item.label })
+						});
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientToggleButton, {
+						value: "noGroups",
+						"aria-label": "noGroups",
+						onClick: closeClick,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupItem, {
+							label: "No Groups",
+							clear: true
+						})
+					})]
+				})
+			})]
+		})
+	});
+};
+GridGroupingSidebar.propTypes = {
+	groupItem: prop_types.default.func,
+	expandClick: prop_types.default.func,
+	collapseClick: prop_types.default.func,
+	closeClick: prop_types.default.func,
+	groupingData: prop_types.default.array,
+	color: prop_types.default.string
+};
+
+//#endregion
+//#region src/utilities/aggrid/SplitButton.jsx
+const useStyles$13 = (0, __material_ui_core.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 popupId = require_EnvironmentRibbon.useId(popupName);
+	const popupState = (0, material_ui_popup_state_hooks.usePopupState)({
+		variant: "popper",
+		popupId
+	});
+	const firstItem = react.Children.toArray(children)[0];
+	const setAnchorEl = (0, react.useCallback)((ref) => {
+		if (ref) popupState.setAnchorEl(ref);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.ButtonGroup, {
+		variant,
+		color,
+		size,
+		ref: setAnchorEl,
+		"aria-label": ariaLabel,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+			onClick: firstItem?.props?.onClick,
+			children: label || firstItem?.props?.children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+			...(0, material_ui_popup_state_hooks.bindTrigger)(popupState),
+			className: classes.arrowButtonRoot,
+			color,
+			size: "small",
+			"aria-expanded": popupState.isOpen ? true : void 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_icons.ArrowDropDown, {})
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Popper, {
+		...(0, material_ui_popup_state_hooks.bindPopper)(popupState),
+		role: void 0,
+		transition: true,
+		disablePortal: true,
+		className: classes.menu,
+		children: ({ TransitionProps, placement }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Grow, {
+			...TransitionProps,
+			style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Paper, {
+				className: classes.paper,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.ClickAwayListener, {
+					onClickAway: popupState.close,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuList, { children })
+				})
+			})
+		})
+	})] });
+};
+
+//#endregion
+//#region src/utilities/aggrid/AgTable.tsx
+__ag_grid_enterprise_core.LicenseManager.setLicenseKey(LicenseKey);
+const useStyles$12 = (0, __material_ui_core.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 = [...__ag_grid_enterprise_all_modules.AllModules, __ag_grid_enterprise_excel_export.ExcelExportModule];
+/**
+* Utility hook for getting the ag-grid APIs into state
+*/
+function useAgGridApi() {
+	const [{ gridApi, gridColumnApi }, onGridReady] = (0, react.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 = (0, react.useCallback)(() => {
+		(0, invariant.default)(gridApi, `gridApi not ready`);
+		gridApi?.exportDataAsCsv({
+			allColumns: true,
+			fileName: "export"
+		});
+	}, [gridApi]);
+	const exportToExcel = (0, react.useCallback)(() => {
+		(0, invariant.default)(gridApi, `gridApi not ready`);
+		gridApi?.exportDataAsExcel({
+			allColumns: true,
+			fileName: "export"
+		});
+	}, [gridApi]);
+	const sizeToFit = (0, react.useCallback)((params) => {
+		(0, invariant.default)(gridApi, `gridApi not ready`);
+		gridApi?.sizeColumnsToFit();
+	}, [gridApi]);
+	const autoSizeAll = (0, react.useCallback)((skipHeader) => {
+		(0, invariant.default)(gridColumnApi, `gridColumnApi not ready`);
+		const allColumnIds = [];
+		gridColumnApi?.getAllColumns()?.forEach((column) => {
+			allColumnIds.push(column.getColId());
+		});
+		gridColumnApi?.autoSizeColumns(allColumnIds, skipHeader);
+	}, [gridColumnApi]);
+	const autoSizeAllWithHeader = (0, react.useCallback)(() => autoSizeAll(false), [autoSizeAll]);
+	const autoSizeAllWithoutHeader = (0, react.useCallback)(() => autoSizeAll(false), [autoSizeAll]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Box, {
+		mb: 1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Grid, {
+			container: true,
+			direction: "row",
+			spacing: 1,
+			justify: "flex-end",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Grid, {
+					item: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+						variant: "outlined",
+						size: "small",
+						onClick: sizeToFit,
+						children: "Size to Fit"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Grid, {
+					item: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SplitButton, {
+						popupName: "auto-size",
+						variant: "outlined",
+						size: "small",
+						label: "Auto-Size",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuItem, {
+							onClick: autoSizeAllWithHeader,
+							children: "All"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuItem, {
+							onClick: autoSizeAllWithoutHeader,
+							children: "Skip Header"
+						})]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Grid, {
+					item: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SplitButton, {
+						popupName: "export",
+						variant: "outlined",
+						size: "small",
+						label: "Export",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuItem, {
+							onClick: exportToExcel,
+							children: "Excel"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuItem, {
+							onClick: exportToCSV,
+							children: "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 = (0, react.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 = (0, react.useCallback)((params) => {
+		if (rowModelType === "serverSide") if (isUsingAgRowHeight) return void 0;
+		else if (getRowHeight) return getRowHeight(params);
+		else return calculateRowHeight(params);
+		else if (getRowHeight) return getRowHeight(params);
+		return void 0;
+	}, [getRowHeight, isUsingAgRowHeight]);
+	const onGridSizeChanged = () => {
+		if (props.dynamicSizing) props.api?.sizeColumnsToFit();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("ag-theme-material", classes.root, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ag_grid_community_react.AgGridReact, {
+			...props,
+			modules,
+			onGridSizeChanged,
+			getRowHeight: rowHeightFunction,
+			className: classes.AgGrid
+		})
+	});
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridActionBar.jsx
+const useStyles$11 = (0, __material_ui_core.makeStyles)((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(.5),
+		background: (props) => props.background ? props.background : (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)("div", {});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.title,
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Typography, {
+					variant: "h6",
+					style: {
+						overflow: "hidden",
+						whiteSpace: "nowrap",
+						textOverflow: "ellipsis"
+					},
+					children: [
+						" ",
+						title,
+						" "
+					]
+				}), !hideSearchBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						flex: 1,
+						marginLeft: 16,
+						marginRight: 16,
+						marginTop: -16
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTextField, {
+						title,
+						onChange,
+						InputProps: {
+							type: "search",
+							startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.InputAdornment, {
+								position: "start",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fluentui_react_icons.SearchIcon, {})
+							})
+						}
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [" ", gridControlsExport] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.controls,
+				children: [
+					saveGridConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.SaveIcon,
+						tooltip: "Save Grid Configuration",
+						ariaLabel: "Save Grid Configuration",
+						onClick: saveGridConfig
+					}),
+					deleteGridConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.DeleteIcon,
+						tooltip: "Delete Grid Configuration",
+						ariaLabel: "Delete Grid Configuration",
+						onClick: deleteGridConfig
+					}),
+					clearGridConfig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.ClearIcon,
+						tooltip: "Clear Grid Configuration",
+						ariaLabel: "Clear Grid Configuration",
+						onClick: clearGridConfig
+					}),
+					!hideFitGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.CombineIcon,
+						tooltip: "Fit Grid",
+						ariaLabel: "Fit Grid",
+						onClick: fitClick
+					}),
+					!hideExpandGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.ExportIcon,
+						tooltip: "Expand Grid",
+						ariaLabel: "Expand Grid",
+						onClick: expandClick
+					}),
+					!hideExportGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.DownloadIcon,
+						tooltip: "Export Grid",
+						ariaLabel: "Export Grid",
+						onClick: exportClick
+					}),
+					!hideRemoveFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+						iconClassName: classes.icon,
+						icon: __fluentui_react_icons.BlockedIcon,
+						tooltip: "Remove Filters",
+						ariaLabel: "Remove Filters",
+						onClick: clearClick
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Tabs, {
+				value,
+				onChange: handleChange,
+				"aria-label": "basic tabs example",
+				children: [
+					!hideFilterTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tab, {
+						label: "Filter",
+						classes: { root: classes.tabRoot }
+					}),
+					!hideGroupTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tab, {
+						label: "Group",
+						classes: { root: classes.tabRoot }
+					}),
+					!hideColumnTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tab, {
+						label: "Column",
+						classes: { root: classes.tabRoot }
+					})
+				]
+			}),
+			children
+		]
+	});
+};
+GridActionBar.propTypes = {
+	title: prop_types.default.string,
+	children: prop_types.default.node,
+	handleChange: prop_types.default.func,
+	value: prop_types.default.number,
+	fitClick: prop_types.default.func,
+	expandClick: prop_types.default.func,
+	clearClick: prop_types.default.func,
+	exportClick: prop_types.default.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/AmbientChipButton.jsx
+const useStyles$10 = (0, __material_ui_core.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.root,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+			title: tooltip,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Chip, {
+				id,
+				udprecordid,
+				ref,
+				className: className ?? classes.chipRoot,
+				label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+					className: labelClassName ?? classes.label,
+					children: label
+				}),
+				onClick,
+				icon: icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+					className: iconClassName ?? classes.icon,
+					component: icon
+				}),
+				...otherProps
+			})
+		})
+	});
+});
+AmbientChipButton.propTypes = {
+	tooltip: prop_types.default.string.isRequired,
+	label: prop_types.default.string.isRequired,
+	onClick: prop_types.default.func,
+	icon: prop_types.default.func.isRequired
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridPrimaryBar.jsx
+const useStyles$9 = (0, __material_ui_core.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] = (0, react.useState)(0);
+	const [actionButtons, setActionButtons] = (0, react.useState)([]);
+	const [menuActionButtons, setMenuActionButtons] = (0, react.useState)([]);
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const [windowWidthBreakpoint, setWindowWidthBreakpoint] = (0, react.useState)(1400);
+	const chipButtonSizePx = 100;
+	const tokenButtonSizePx = 40;
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const defaultActionButtons = (0, react.useMemo)(() => [
+		{
+			icon: __fluentui_react_icons.SaveIcon,
+			tooltip: "Save Grid Configuration",
+			label: "Save View",
+			visible: !hiddenActionButtons.includes("saveView"),
+			hideLabel: hiddenLabels.includes("saveView"),
+			onClick: saveViewClick,
+			background: "transparent"
+		},
+		{
+			icon: __fluentui_react_icons.FavoriteStarIcon,
+			tooltip: "Browse Views",
+			label: "Views",
+			visible: !hiddenActionButtons.includes("views"),
+			onClick: viewsClick,
+			hideLabel: hiddenLabels.includes("views"),
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.LightbulbIcon,
+			tooltip: "Insights",
+			label: "Insights",
+			visible: !hiddenActionButtons.includes("insights"),
+			hideLabel: hiddenLabels.includes("insights"),
+			onClick: insightsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.UploadIcon,
+			tooltip: "Import/Export",
+			label: "Import/Export",
+			visible: !!exportClick && !hiddenActionButtons.includes("importExport"),
+			hideLabel: hiddenLabels.includes("importExport"),
+			onClick: exportClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.BulletedTreeListIcon,
+			tooltip: "Group",
+			label: "Group",
+			visible: !!groupClick && !hiddenActionButtons.includes("group"),
+			hideLabel: hiddenLabels.includes("group"),
+			onClick: groupClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.FilterIcon,
+			tooltip: "Filter",
+			label: "Filter",
+			visible: !!filterClick && !hiddenActionButtons.includes("filter"),
+			hideLabel: hiddenLabels.includes("filter"),
+			onClick: filterClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.TripleColumnIcon,
+			tooltip: "Columns",
+			label: "Columns",
+			visible: !!columnsClick && !hiddenActionButtons.includes("columns"),
+			hideLabel: hiddenLabels.includes("columns"),
+			onClick: columnsClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.CombineIcon,
+			tooltip: "Fit Grid",
+			label: "Fit Grid",
+			visible: !!fitClick && !hiddenActionButtons.includes("fitGrid"),
+			hideLabel: hiddenLabels.includes("fitGrid"),
+			onClick: fitClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.ExportIcon,
+			tooltip: "Expand Grid",
+			label: "Expand Grid",
+			visible: !!expandClick && !hiddenActionButtons.includes("expandGrid"),
+			hideLabel: hiddenLabels.includes("expandGrid"),
+			onClick: expandClick,
+			iconClassName: classes.icon
+		},
+		{
+			icon: __fluentui_react_icons.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 = (0, react.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]);
+	(0, react.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);
+		const breakPointOffset = calculatedMedian > 70 ? 950 : 900;
+		let breakPoint = breakPointOffset + 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
+	]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes.root,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.title,
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Typography, {
+					variant: "h6",
+					style: {
+						overflow: "hidden",
+						whiteSpace: "nowrap",
+						textOverflow: "ellipsis"
+					},
+					children: [
+						" ",
+						title,
+						" "
+					]
+				}), !hideSearchBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: {
+						flex: 1,
+						marginLeft: 16,
+						marginRight: 16,
+						marginTop: -16,
+						maxWidth: 300
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTextField, {
+						title,
+						onChange,
+						onKeyDown: handleCustomKeyDown,
+						InputProps: {
+							type: "search",
+							startAdornment: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.InputAdornment, {
+								position: "start",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__fluentui_react_icons.SearchIcon, {})
+							})
+						}
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.controls,
+				children: [actionButtons.map((button) => button.visible && (button.hideLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+					id: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+					udprecordid: "udpRecord-GridPrimaryBar-Token-" + button.label.replace(/ /g, "-"),
+					icon: button.icon ?? __fluentui_react_icons.AppIconDefaultIcon,
+					tooltip: button.tooltip,
+					onClick: button.onClick,
+					ariaLabel: button.label,
+					iconClassName: button.iconClassName
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientChipButton, {
+					id: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+					udprecordid: "udpRecord-GridPrimaryBar-Chip-" + button.label.replace(/ /g, "-"),
+					icon: button.icon ?? __fluentui_react_icons.AppIconDefaultIcon,
+					tooltip: button.tooltip,
+					label: button.label,
+					onClick: button.onClick,
+					background: button.background
+				}))), !!menuActionButtons.length && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+					id,
+					icon: __fluentui_react_icons.MoreVerticalIcon,
+					tooltip: "More Actions",
+					ariaLabel: "More Actions",
+					onClick: handlePopoverClick,
+					iconClassName: classes.icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Popover, {
+					id,
+					open,
+					anchorEl,
+					onClose: handlePopoverClose,
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "right"
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "right"
+					},
+					children: menuActionButtons.slice(0).reverse().map((button) => {
+						if (!button.visible) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.MenuItem, {
+							id: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+							udprecordid: "udpRecord-GridPrimaryBar-MenuItem-" + button.label.replace(/ /g, "-"),
+							onClick: button.onClick,
+							style: {
+								display: "flex",
+								justifyContent: "space-between"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, { children: button.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+								component: button.icon ?? __fluentui_react_icons.AppIconDefaultIcon,
+								style: { marginLeft: 7 }
+							})]
+						});
+					})
+				})] })]
+			}),
+			onPrimaryActionClick && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_EnvironmentRibbon.PrimaryActionButton, {
+				onClick: onPrimaryActionClick,
+				id: "udpRecord-GridPrimaryBar-Add",
+				udprecordid: "udpRecord-GridPrimaryBar-Add",
+				disabled: primaryActionDisabled,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+					style: { marginLeft: 4 },
+					children: primaryActionLabel ?? "Button"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+					style: { marginLeft: 7 },
+					component: primaryActionIcon ?? __fluentui_react_icons.AppIconDefaultIcon
+				})]
+			})
+		]
+	});
+};
+GridPrimaryBar.propTypes = {
+	title: prop_types.default.string,
+	children: prop_types.default.node,
+	onChange: prop_types.default.func,
+	fitClick: prop_types.default.func,
+	expandClick: prop_types.default.func,
+	clearClick: prop_types.default.func,
+	exportClick: prop_types.default.func,
+	insightsClick: prop_types.default.func,
+	filterClick: prop_types.default.func,
+	columnsClick: prop_types.default.func,
+	groupClick: prop_types.default.func,
+	hideSearchBar: prop_types.default.bool,
+	secondaryActionButtons: prop_types.default.arrayOf(prop_types.default.object),
+	hiddenActionButtons: prop_types.default.arrayOf(prop_types.default.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: prop_types.default.arrayOf(prop_types.default.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: prop_types.default.func,
+	primaryActionLabel: prop_types.default.string,
+	primaryActionIcon: prop_types.default.elementType
+};
+
+//#endregion
+//#region src/UI/feedback/FluentDialog.jsx
+const useStyles$8 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Dialog, {
+		open,
+		onClose: handleClose,
+		"aria-labelledby": ariaLabelledby,
+		"aria-describedby": ariaDescribedby,
+		...otherProps,
+		classes: { paper: classes.paper },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: enableLeftBorderStyling ? classes.dialogLeftBorder : "" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.DialogTitle, {
+				className: classes.title,
+				id: titleId,
+				children: title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.DialogContent, {
+				className: classes.dialogContent,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.DialogContentText, {
+					id: descriptionId,
+					children: message
+				}), children]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.DialogActions, {
+				className: classes.actions,
+				disableSpacing: true,
+				children: [
+					!buttonThreeHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+						id: "udpRecord-FluentDialog-Confirm",
+						udprecordid: "udpRecord-FluentDialog-Confirm",
+						onClick: actionThree,
+						color: "secondary",
+						disabled: disableThree,
+						className: classes.button,
+						children: labelThree
+					}),
+					!buttonTwoHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Button, {
+						id: "udpRecord-FluentDialog-Confirm",
+						udprecordid: "udpRecord-FluentDialog-Confirm",
+						onClick: actionTwo,
+						color: "secondary",
+						disabled: disableTwo,
+						className: classes.button,
+						children: labelTwo
+					}),
+					!buttonOneHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.PrimaryActionButton, {
+						id: "udpRecord-FluentDialog-Cancel",
+						udprecordid: "udpRecord-FluentDialog-Cancel",
+						disabled: disableOne,
+						onClick: actionOne,
+						children: labelOne
+					})
+				]
+			}),
+			progress && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.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: require_EnvironmentRibbon.GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.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: require_EnvironmentRibbon.GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: require_EnvironmentRibbon.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 require_EnvironmentRibbon.GridStateTypeEnums.Column:
+				gridColumnApi.setColumnState(JSON.parse(state.values));
+				break;
+			case require_EnvironmentRibbon.GridStateTypeEnums.Column_Group:
+				gridColumnApi.setColumnGroupState(JSON.parse(state.values));
+				break;
+			case require_EnvironmentRibbon.GridStateTypeEnums.Pivot_Mode:
+				gridColumnApi.setPivotMode(JSON.parse(state.values));
+				break;
+			case require_EnvironmentRibbon.GridStateTypeEnums.Column_Sort:
+				gridApi.setSortModel(JSON.parse(state.values));
+				break;
+			case require_EnvironmentRibbon.GridStateTypeEnums.Column_Filter:
+				gridApi.setFilterModel(JSON.parse(state.values));
+				break;
+			default: break;
+		}
+	});
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/SaveViewFormDialog.jsx
+const useStyles$7 = (0, __material_ui_core.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" }
+}));
+const SaveViewFormDialog = (props) => {
+	const { handleErrorSnackbar, handleSuccessSnackbar } = require_apiHelpers.useHandleAxiosSnackbar();
+	const { open, handleClose, tenant, application, user, refetchViews, gApi, gcApi, gridId, domain, apiCatalogId } = props;
+	const { t } = (0, react_i18next.useTranslation)();
+	const classes = useStyles$7(props);
+	const saveViewFormRef = (0, react.useRef)(null);
+	const triggerSaveView = (0, react.useCallback)(() => {
+		saveViewFormRef.current.handleSubmit();
+	}, [saveViewFormRef]);
+	const saveView = async (values) => {
+		const data = {
+			data: {
+				gridView: {
+					Name: values.name,
+					GridViewVisibilityTypeId: values.private ? require_EnvironmentRibbon.VisibilityTypeEnums.Private : require_EnvironmentRibbon.VisibilityTypeEnums.Public,
+					isDefault: 0,
+					tenantId: user?.currentTenantId,
+					userId: user?.id,
+					gridId,
+					domain,
+					apiCatalogId
+				},
+				gridConfigurations: getGridState(gApi, gcApi, gridId)
+			},
+			method: "POST"
+		};
+		handleClose();
+		await require_SideSheet.apiMutate(udp_react_stencil_component_library.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__ */ (0, react_jsx_runtime.jsxs)(FluentDialog, {
+		title: t("Save New View"),
+		open,
+		handleClose,
+		labelOne: t("Save View"),
+		labelTwo: t("Cancel"),
+		actionOne: triggerSaveView,
+		actionTwo: handleClose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Box, {
+			display: "flex",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: classes.column,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						className: classes.infoHeader,
+						align: "left",
+						children: t("Tenant")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "subtitle2",
+						align: "left",
+						children: tenant ?? "--"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Divider, {
+					flexItem: true,
+					orientation: "vertical"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: classes.column,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						className: classes.infoHeader,
+						align: "left",
+						children: t("Application")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "subtitle2",
+						align: "left",
+						children: application ?? "--"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Divider, {
+					flexItem: true,
+					orientation: "vertical"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: classes.column,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						className: classes.infoHeader,
+						align: "left",
+						children: t("Entity")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "subtitle2",
+						align: "left",
+						children: domain ?? "--"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: classes.saveForm,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SideSheet.Form, {
+				onSubmit: saveView,
+				ref: saveViewFormRef,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideSheet.Field, {
+					type: "text",
+					component: AmbientTextField,
+					name: "name",
+					id: "name",
+					label: t("Name"),
+					fullWidth: true,
+					required: true,
+					style: {
+						marginBottom: 20,
+						marginTop: 10
+					}
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.FormControlLabel, {
+					control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideSheet.Field, {
+						component: __material_ui_core.Switch,
+						name: "private",
+						id: "private",
+						defaultValue: false,
+						type: "checkbox"
+					}),
+					label: t("Private"),
+					labelPlacement: "end"
+				})]
+			})
+		})]
+	});
+};
+SaveViewFormDialog.propTypes = {
+	open: prop_types.default.bool.isRequired,
+	handleClose: prop_types.default.func.isRequired,
+	tenant: prop_types.default.string,
+	application: prop_types.default.string,
+	entity: prop_types.default.string,
+	user: prop_types.default.object,
+	columnDefsValues: prop_types.default.array,
+	refetchViews: prop_types.default.func,
+	gApi: prop_types.default.object,
+	gcApi: prop_types.default.object,
+	setSelectedView: prop_types.default.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] = (0, react.useState)(0);
+	const [previousChildRefs, setPreviousChildRefs] = (0, react.useState)([]);
+	/**
+	* Calculate the number of visible children based on container width and child widths.
+	*
+	* @param {object} parentRef - Ref object for the parent container.
+	* @param {object} childRefs - Ref object for an array of child elements.
+	* @param {boolean} includeBuffer - Whether to include a buffer for better performance (default: true).
+	* @returns {number} The maximum number of visible children.
+	*/
+	const calculateNumberOfVisibleChildren = (0, react.useCallback)((parentRef, childRefs, includeBuffer = true) => {
+		if (!parentRef.current || !childRefs.current) return;
+		const containerWidth = parentRef.current.getBoundingClientRect().width ?? 0;
+		if (!averageChildWidth || previousChildRefs !== childRefs.current) {
+			const childrenTotalWidth = childRefs.current.map((ref) => ref && typeof ref?.getBoundingClientRect === "function" ? ref.getBoundingClientRect().width : 0).reduce((acc, curr) => acc + curr, 0);
+			const calculatedAverageWidth = childrenTotalWidth / childRefs.current.length;
+			setAverageChildWidth(calculatedAverageWidth);
+			setPreviousChildRefs(childRefs.current);
+		}
+		const maxVisibleChildren = Math.floor(containerWidth / averageChildWidth);
+		if (includeBuffer) return maxVisibleChildren - 1;
+		return maxVisibleChildren;
+	}, [averageChildWidth, previousChildRefs]);
+	return { calculateNumberOfVisibleChildren };
+};
+
+//#endregion
+//#region src/UI/containers/DynamicContainerWithMenu.jsx
+const useStyles$6 = (0, __material_ui_core_styles.makeStyles)((theme) => ({ filterChipMenuIcon: {
+	background: theme.palette.common.grey,
+	padding: theme.spacing(1),
+	color: theme.palette.primary.main
+} }));
+const DynamicContainerWithMenu = (0, react.forwardRef)((props, ref) => {
+	const { children, className, menuButton, menuIconClassName, includeBuffer = true } = props;
+	const classes = useStyles$6();
+	const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+	const modifiedMenuButton = (0, react.useMemo)(() => {
+		if (!menuButton) return null;
+		return (0, react.cloneElement)(menuButton, {
+			onClick: (event) => {
+				menuButton.props.onClick(event);
+				handlePopoverClick(event);
+			},
+			...menuButton.props
+		}, menuButton.props.children);
+	}, [menuButton]);
+	const [allChildren, setAllChildren] = (0, react.useState)([]);
+	const [visibleChildren, setVisibleChildren] = (0, react.useState)([]);
+	const [menuChildren, setMenuChildren] = (0, react.useState)([]);
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const containerRef = (0, react.useRef)(ref);
+	const outerContainerRef = (0, react.useRef)(null);
+	const childrenRefs = (0, react.useRef)([]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSizeChange = (0, react.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 = (0, react.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();
+	}, []);
+	(0, react.useEffect)(() => {
+		const arrayChildren = react.Children.toArray(children);
+		setAllChildren(arrayChildren);
+		setVisibleChildren(arrayChildren);
+	}, [children]);
+	(0, react.useLayoutEffect)(handleSizeChange, [handleSizeChange]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: outerContainerRef,
+		style: {
+			width: "100%",
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className,
+			ref: containerRef,
+			style: {
+				display: "flex",
+				flexWrap: "noWrap",
+				overflow: "hidden",
+				flexGrow: 1
+			},
+			children: [visibleChildren && react.Children.map(visibleChildren, (child, index) => {
+				return (0, react.cloneElement)(child, {
+					ref: (ref$1) => childrenRefs.current[index] = ref$1,
+					...child.props
+				}, child.props.children);
+			}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [modifiedMenuButton ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientTokenButton, {
+				id,
+				icon: __fluentui_react_icons.MoreVerticalIcon,
+				tooltip: "Additional Filter Values",
+				ariaLabel: "Additional Filter Values",
+				onClick: handlePopoverClick,
+				iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Popover, {
+				id,
+				open,
+				anchorEl,
+				onClose: handlePopoverClose,
+				anchorOrigin: {
+					vertical: "bottom",
+					horizontal: "right"
+				},
+				transformOrigin: {
+					vertical: "top",
+					horizontal: "right"
+				},
+				children: react.Children.map(menuChildren, (child, index) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.MenuItem, {
+						onClick: () => handleMenuItemClick(child),
+						children: (0, react.cloneElement)(child, { ...child.props }, child.props.children)
+					});
+				})
+			})] })]
+		})
+	});
+});
+DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
+DynamicContainerWithMenu.propTypes = {
+	children: prop_types.default.node.isRequired,
+	className: prop_types.default.string,
+	menuButton: prop_types.default.node,
+	menuIconClassName: prop_types.default.string,
+	includeBuffer: prop_types.default.bool
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/ChipSection.jsx
+const useStyles$5 = (0, __material_ui_core_styles.makeStyles)((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 = (0, react.useRef)([]);
+	const chipSectionContainerRef = (0, react.useRef)(null);
+	const viewChipsContainerRef = (0, react.useRef)(null);
+	const filterChipsContainerRef = (0, react.useRef)(null);
+	const additionalFilterChipsContainerRef = (0, react.useRef)(null);
+	const kpiContainerRef = (0, react.useRef)(null);
+	const [selectedFilterChip, setSelectedFilterChip] = (0, react.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) {
+			const newLabel = label.slice(0, maxLength - 3) + "...";
+			return newLabel;
+		} 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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: chipSectionContainerRef,
+		className: classes.wrapper,
+		style: { display: [
+			kpiValues,
+			additionalFilterChips,
+			viewChips,
+			filterChips
+		].every((arr) => arr.length === 0) ? "none" : "flex" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: classes.chipHolder,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: viewChipsContainerRef,
+					children: viewChips.map((chip, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Chip.default, {
+						onDelete: () => handleDelete("view", index),
+						label: chip.label,
+						className: classes.viewChip,
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_icons_Star.default, {}),
+						size: "small"
+					}, index))
+				}),
+				!isEmpty(viewChips) && !isEmpty(filterChips) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Divider.default, {
+					orientation: "vertical",
+					flexItem: true
+				}),
+				!isEmpty(filterChips) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DynamicContainerWithMenu, {
+					className: classes.chipHolder,
+					ref: filterChipsContainerRef,
+					children: [selectedFilterChip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Chip.default, {
+						onDelete: handleFilterChipUntoggle,
+						label: selectedFilterChip.label,
+						className: classes.viewChip,
+						size: "small"
+					}), filterChips.map((chip, index) => {
+						if (selectedFilterChip && chip.id === selectedFilterChip.id) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Tooltip.default, {
+							title: chip.label,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Chip.default, {
+								label: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: {
+										display: "flex",
+										flexWrap: "noWrap"
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Typography.default, {
+										noWrap: true,
+										className: chip.value ? classes.filterChipLabel : "",
+										children: chip.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Typography.default, {
+										noWrap: true,
+										className: classes.filterChipValue,
+										children: chip.value
+									})]
+								}),
+								className: classes.filterChip,
+								size: "small",
+								onClick: () => handleFilterChipToggle(chip),
+								ref: (el) => chipRefs.current[index] = el
+							}, index)
+						});
+					})]
+				}),
+				!isEmpty(additionalFilterChips) && !isEmpty(filterChips) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Divider.default, {
+					orientation: "vertical",
+					flexItem: true
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: additionalFilterChipsContainerRef,
+					style: { display: "flex" },
+					children: additionalFilterChips.map((chip, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Chip.default, {
+						variant: "outlined",
+						onDelete: () => handleDelete("additionalFilter", index),
+						label: chip.label,
+						className: classes.additionalFilterChip,
+						size: "small"
+					}, index))
+				})
+			]
+		}), !hideKpiSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: classes.KPI,
+			ref: kpiContainerRef,
+			children: kpiValues.slice(0, 4).map((kpi, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: classes.kpiItem,
+				id: index,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: classes.kpiLabel,
+					children: abbreviateLabel(kpi.label) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Tooltip.default, {
+						title: kpi.label,
+						arrow: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Typography.default, {
+							noWrap: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [kpi.label, ":"] })
+						})
+					}) || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: kpi.label })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: classes.kpiValue,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Tooltip.default, {
+						title: kpi.value,
+						arrow: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: abbrNum(kpi.value, 1) })
+					})
+				})]
+			}), index !== maxKPIsDisplayed - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Divider.default, {
+				orientation: "vertical",
+				flexItem: true
+			})] }))
+		})]
+	});
+};
+ChipSection.propTypes = {
+	filterChips: prop_types.default.arrayOf(prop_types.default.shape({
+		label: prop_types.default.string.isRequired,
+		value: prop_types.default.string.isRequired
+	})),
+	viewChips: prop_types.default.arrayOf(prop_types.default.shape({ label: prop_types.default.string.isRequired })),
+	additionalFilterChips: prop_types.default.arrayOf(prop_types.default.shape({ label: prop_types.default.string.isRequired })),
+	hideKpiSection: prop_types.default.bool,
+	kpiValues: prop_types.default.arrayOf(prop_types.default.shape({
+		label: prop_types.default.string.isRequired,
+		value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired
+	})),
+	maxKPIsDisplayed: prop_types.default.number,
+	handleDelete: prop_types.default.func,
+	selectedFilterChipsIndex: prop_types.default.number,
+	setSelectedFilterChipsIndex: prop_types.default.func
+};
+
+//#endregion
+//#region src/UI/inputs/buttons/IconButtonWithToolTip.jsx
+const useStyles$4 = (0, __material_ui_core.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__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+		title,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.IconButton, {
+			id,
+			udprecordid,
+			className: `${className} ${classes.root}`,
+			...other,
+			...adjustedButtonProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+				className: fluentIconClassName,
+				component: icon
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/UI/templates/ui/renderers/ActionsRenderer.jsx
+const useStyles$3 = (0, __material_ui_core.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 = (0, react.memo)((props) => {
+	const { icon, title, onClick, disabled, businessObjectKey = "" } = props;
+	const classes = useStyles$3();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButtonWithTooltip, {
+		title,
+		className: classes.icon,
+		size: "small",
+		onClick,
+		disabled,
+		icon,
+		fluentIconClassName: classes.iconButtonStyle,
+		id: "udpRecord-ActionsRenderer-" + title,
+		udprecordid: "udpRecord-ActionsRenderer-" + title
+	});
+});
+const ActionsRenderer = (0, react.memo)((props) => {
+	const { data: value, actionList, onClick } = props;
+	const classes = useStyles$3();
+	const [sheetOpen, setSheetOpen] = (0, react.useState)(false);
+	const [sheetItem, setSheetItem] = (0, react.useState)(null);
+	const [dialogItem, setDialogItem] = (0, react.useState)(null);
+	const [dialogOpen, setDialogOpen] = (0, react.useState)(false);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [sideSheetWidth, setSideSheetWidth] = (0, react.useState)(600);
+	const [sideSheetButtonLabel, setSideSheetButtonLabel] = (0, react.useState)("");
+	const [sideSheetOnSubmit, setSideSheetOnSubmit] = (0, react.useState)(() => () => console.warn("onSubmit not set"));
+	const openSheet = (0, react.useCallback)((sheetView) => {
+		setSheetItem(sheetView);
+		setSheetOpen(true);
+	}, []);
+	const openDialog = (0, react.useCallback)((dialogView) => {
+		setDialogItem(dialogView);
+		setDialogOpen(true);
+	}, []);
+	const closeSheet = (0, react.useCallback)(() => {
+		setSheetOpen(false);
+	}, []);
+	const closeDialog = (0, react.useCallback)(() => {
+		setDialogOpen(false);
+	}, []);
+	const getSheetView = (actionItem) => {
+		if (actionItem.opens === require_apiHelpers.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 === require_apiHelpers.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 === require_apiHelpers.ClickOpenEnums.SideSheet) {
+			const sheetView = getSheetView(item);
+			onClick$1 = () => openSheet(sheetView);
+		}
+		if (item.opens === require_apiHelpers.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [item.loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "inline-flex",
+				marginRight: 10
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab.Skeleton, {
+				className: classes.circularSkeleton,
+				width: 24,
+				height: 40
+			})
+		}), !item.loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionItem, {
+			title,
+			icon: item.icon,
+			onClick: onClick$1,
+			disabled,
+			businessObjectKey: value?.businessObjectKey
+		}, `${item.id}-${index}`)] });
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		displayActions,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideSheet.SideSheet, {
+			open: sheetOpen,
+			onClose: closeSheet,
+			title: sheetItem?.title,
+			width: sheetItem?.width || 600,
+			buttonLabel: sideSheetButtonLabel,
+			onSubmit: sideSheetOnSubmit,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: sheetItem?.children })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FluentDialog, {
+			open: dialogOpen,
+			handleClose: closeDialog,
+			title: dialogItem?.title,
+			message: dialogItem?.message,
+			actionOne: dialogItem?.closeDialog,
+			labelOne: dialogItem?.labelOne,
+			actionTwo: dialogItem?.actionTwo,
+			labelTwo: dialogItem?.labelTwo,
+			progress: dialogItem?.isLoading
+		})
+	] });
+});
+ActionItem.displayName = "ActionItem";
+ActionsRenderer.displayName = "ActionsRenderer";
+
+//#endregion
+//#region src/UI/dataDisplay/HintPanel.jsx
+const useStyles$2 = (0, __material_ui_core_styles.makeStyles)((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 theme = (0, __material_ui_core_styles.useTheme)();
+	const classes = useStyles$2(theme);
+	const [showHint, setShowHint] = (0, react.useState)(true);
+	const handleHideHint = () => {
+		setShowHint(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: classes.hintContainer,
+		children: showHint && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: classes.hintContent,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: hint }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.hidehelp,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: classes.hideHintButton,
+					onClick: handleHideHint,
+					children: hideHintText
+				})
+			})]
+		})
+	});
+};
+HintPanel.propTypes = {
+	hint: prop_types.default.string.isRequired,
+	hideHintText: prop_types.default.string.isRequired
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/GridViewsSideSheet.jsx
+const useStyles$1 = (0, __material_ui_core.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 } = (0, react_i18next.useTranslation)();
+	const { gridApi, onGridReady } = useAgGridApi();
+	const gApi = gridApi;
+	const ChipRenderer = ({ onChange, value, id }) => {
+		const handleChipClick = () => {
+			onChange(id);
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core_Chip.default, {
+			label: value === require_EnvironmentRibbon.VisibilityTypeEnums.Public ? t("Public") : t("Private"),
+			onClick: handleChipClick,
+			className: value === require_EnvironmentRibbon.VisibilityTypeEnums.Public ? classes.publicChip : classes.privateChip,
+			size: "small"
+		});
+	};
+	const setView = (0, react.useCallback)((value) => {
+		setSelectedView(value);
+		onClose();
+	}, [setSelectedView, onClose]);
+	const actionList = (0, react.useMemo)(() => [{
+		id: 1,
+		title: t("Load View"),
+		icon: __fluentui_react_icons.OpenInNewTabIcon,
+		onClick: setView,
+		disabled: false
+	}, {
+		id: 2,
+		title: t("Workflows"),
+		icon: __fluentui_react_icons.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__ */ (0, react_jsx_runtime.jsxs)(require_SideSheet.SideSheet, {
+		id: "udpRecord-GridViewsSideSheet",
+		udprecordid: "udpRecord-GridViewsSideSheet",
+		open,
+		onClose,
+		width: "40%",
+		title: "Select a View",
+		buttonLabel: "Create View",
+		onSubmit: openSaveView,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: { marginBottom: 10 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HintPanel, {
+				hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.",
+				hideHintText: "Hide Help"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmbientGridTemplate, {
+			gridOptions,
+			title: "Saved Views",
+			rowData: rowData || [],
+			onGridReady,
+			suppressCellSelection: true,
+			suppressRowClickSelection: true,
+			sideBar: false,
+			pivotMode: false,
+			pivotPanelShow: "never",
+			animateRows: true,
+			pagination: false,
+			api: gApi,
+			useNewHeader: true,
+			hiddenActionButtons: [
+				"saveView",
+				"views",
+				"insights",
+				"importExport",
+				"group",
+				"filter",
+				"columns",
+				"fitGrid",
+				"expandGrid",
+				"clearFilters"
+			]
+		})]
+	});
+};
+GridViewsSideSheet.propTypes = {
+	onClose: prop_types.default.func.isRequired,
+	open: prop_types.default.bool.isRequired,
+	selectedMethod: prop_types.default.string,
+	catalog: prop_types.default.array,
+	openSaveView: prop_types.default.func,
+	setViewChips: prop_types.default.func,
+	setFilter: prop_types.default.func,
+	rowData: prop_types.default.array,
+	setSelectedView: prop_types.default.func,
+	frameworkComponents: prop_types.default.object,
+	scrollToTopOnStateChange: prop_types.default.bool
+};
+
+//#endregion
+//#region src/UI/utilityDisplay/BulkActionsGridButton.jsx
+const BulkActionsGridButton = (props) => {
+	const { numSelectedRows, bulkActions, triggerAction, domain } = props;
+	const [actionsAnchorEl, setActionsAnchorEl] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			marginTop: 5,
+			marginLeft: 20
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Badge, {
+			badgeContent: numSelectedRows,
+			color: "secondary",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentButton, {
+				type: "button",
+				onClick: handleBulkActionsClick,
+				variant: "outlined",
+				color: "primary",
+				endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+					component: __fluentui_react_icons.ChevronDownIcon,
+					size: "small"
+				}),
+				children: "With Selected"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Popover, {
+			id: "actions",
+			open: Boolean(actionsAnchorEl),
+			anchorEl: actionsAnchorEl,
+			onClose: () => setActionsAnchorEl(null),
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "right"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "right"
+			},
+			children: bulkActions && bulkActions.map((action) => {
+				const valid = filterAction(action);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+					placement: "right",
+					title: !valid ? "Action entity does not match data grid entity" : "",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.MenuItem, {
+						onClick: () => triggerBulkAction(action.actionId),
+						style: {
+							display: "flex",
+							justifyContent: "space-between"
+						},
+						disabled: !valid,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, { children: action.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+							component: valid ? action.icon ?? __fluentui_react_icons.AppIconDefaultIcon : __fluentui_react_icons.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 = (0, __material_ui_core.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] = (0, react.useState)();
+	const [sidebarIsVisible, setSidebarIsVisible] = (0, react.useState)(false);
+	const [showGroupOptions, setShowGroupOptions] = (0, react.useState)(false);
+	const [selectedRow, setSelectedRow] = (0, react.useState)(null);
+	const [value, setValue] = (0, react.useState)(0);
+	const [saveViewOpen, setSaveViewOpen] = (0, react.useState)(false);
+	const [defaultViews, setDefaultViews] = (0, react.useState)([]);
+	const [viewsOpen, setViewsOpen] = (0, react.useState)(false);
+	const [agGridOptions, setAgGridOptions] = (0, react.useState)({
+		frameworkComponents,
+		suppressScrollOnNewData: !scrollToTopOnStateChange,
+		...additionalGridOptions
+	});
+	const gApi = api || gridApi;
+	const gcApi = columnApi || gridColumnApi;
+	const [viewChips, setViewChips] = (0, react.useState)([]);
+	const [additionalFilterChips, setAdditionalFilterChips] = (0, react.useState)(additionalFilters);
+	const [columnDefsValues, setColumnDefsValues] = (0, react.useState)(null);
+	const [selectedView, setSelectedView] = (0, react.useState)(null);
+	const [viewsRowData, setViewsRowData] = (0, react.useState)(null);
+	const [nonDefaultViewsRowData, setNonDefaultViewsRowData] = (0, react.useState)();
+	const [numSelectedRows, setNumSelectedRows] = (0, react.useState)(0);
+	const [domain, setDomain] = (0, react.useState)(null);
+	const [apiCatalogId, setApiCatalogId] = (0, react.useState)(null);
+	const { triggerAction } = useActions();
+	(0, react.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 = (0, react.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 = (0, react.useCallback)(() => {
+		setViewsOpen(true);
+	}, []);
+	const closeViews = () => {
+		setViewsOpen(false);
+	};
+	const handleTriggerAction = (0, react.useCallback)((actionId) => {
+		if (triggerAction && gApi) triggerAction(actionId, gApi.getSelectedRows());
+	}, [triggerAction, gApi]);
+	const autoSizeAll = (0, react.useCallback)((skipHeader) => {
+		(0, invariant.default)(gcApi, `gridColumnApi not ready`);
+		const allColumnIds = [];
+		gcApi.getAllColumns().forEach((column) => {
+			allColumnIds.push(column.getColId());
+		});
+		gcApi.autoSizeColumns(allColumnIds, skipHeader);
+	}, [gcApi]);
+	const autoSizeAllWithoutHeader = (0, react.useCallback)(() => autoSizeAll(false), [autoSizeAll]);
+	const firstDataRendered = (0, react.useCallback)((params) => {
+		!defaultAutoSize && params?.api.sizeColumnsToFit();
+		defaultAutoSize && autoSizeAllWithoutHeader();
+	}, [defaultAutoSize, autoSizeAllWithoutHeader]);
+	(0, react.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;
+		}
+	};
+	(0, react.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 = (0, react.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] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.tenantV2ApiUrl, `GridView/getFromUser/${user?.id}/${gridId}`, { params: {
+		domainName: domain,
+		apiCatalogId
+	} }, !!!udp_react_stencil_component_library.ConfigService.tenantV2ApiUrl || !!!gridId || !!!user);
+	const [{ data: bulkActions }] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.integrationV2ApiUrl, `action/grid/${gridId}`, {}, !!!udp_react_stencil_component_library.ConfigService.integrationV2ApiUrl || !!!gridId);
+	(0, react.useEffect)(() => {
+		setViewsRowData(views);
+	}, [openViews, views]);
+	const getView = (0, react.useCallback)(async () => {
+		await require_SideSheet.apiMutate(udp_react_stencil_component_library.ConfigService.tenantV2ApiUrl, `GridView/${selectedView.gridViewId}/PartiallyFull`, { method: "get" }).then((response) => {
+			setView(response.data);
+		}).catch((error) => {
+			console.log(error);
+		});
+	}, [selectedView, setView]);
+	(0, react.useEffect)(() => {
+		if (!selectedView?.gridViewId) {
+			gcApi?.resetColumnState();
+			gApi?.sizeColumnsToFit();
+			return void 0;
+		}
+		getView();
+		return void 0;
+	}, [
+		setSelectedView,
+		selectedView,
+		gcApi,
+		gApi,
+		getView
+	]);
+	(0, react.useEffect)(() => {
+		if (additionalFilters) setAdditionalFilterChips(additionalFilters);
+	}, [additionalFilters]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		!hideHeader && useNewHeader && gApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridPrimaryBar, {
+			title,
+			showFilter: setSideBarInvisible,
+			selected: isVisible,
+			onChange: onSearch || handleFilterChange,
+			showGroup: showGrouping,
+			value,
+			saveViewClick: openSaveView,
+			viewsClick: openViews,
+			handleChange,
+			fitClick: fitToSpace,
+			expandClick: autoSizeAllWithoutHeader,
+			exportClick: exportGrid,
+			insightsClick,
+			clearClick: restoreGridDefault,
+			filterClick: onFilterClick,
+			columnsClick: onColumnsClick,
+			hideSearchBar,
+			secondaryActionButtons: secondaryActionButtons || [],
+			onPrimaryActionClick,
+			primaryActionDisabled,
+			primaryActionLabel,
+			primaryActionIcon,
+			hiddenActionButtons: hiddenActionButtons || [],
+			hiddenLabels: hiddenLabels || [],
+			background: headerBackgroundColor,
+			onSearchKeyDown
+		}),
+		useNewHeader && (kpiValues?.length > 0 || filterChips?.length > 0 || filters?.length > 0 || viewChips?.length > 0 || additionalFilterChips?.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				flexDirection: "row",
+				height: 40
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Grow, {
+				in: bulkActions && numSelectedRows > 0,
+				unmountOnExit: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BulkActionsGridButton, {
+					bulkActions,
+					numSelectedRows,
+					triggerAction: handleTriggerAction,
+					domain
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipSection, {
+				filterChips,
+				viewChips,
+				additionalFilterChips,
+				kpiValues,
+				handleDelete: handleChipDelete,
+				setAdditionalFilterChips,
+				setViewChips,
+				setFilter
+			})]
+		}),
+		useNewHeader && gApi && gcApi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridViewsSideSheet, {
+			open: viewsOpen,
+			onClose: closeViews,
+			openSaveView,
+			setViewChips,
+			setFilter: setView,
+			rowData: views,
+			setSelectedView
+		}),
+		!hideHeader && !useNewHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridActionBar, {
+			title,
+			showFilter: setSideBarInvisible,
+			selected: isVisible,
+			onChange: onSearch || handleFilterChange,
+			showGroup: showGrouping,
+			value,
+			handleChange,
+			fitClick: fitToSpace,
+			expandClick: autoSizeAllWithoutHeader,
+			exportClick: exportGrid,
+			clearClick: restoreGridDefault,
+			saveGridConfig,
+			deleteGridConfig,
+			clearGridConfig,
+			hideFitGrid,
+			hideExpandGrid,
+			hideExportGrid,
+			hideRemoveFilters,
+			hideFilterTab,
+			hideGroupTab,
+			hideColumnTab,
+			hideSearchBar,
+			children: primaryActionButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.pab,
+				children: primaryActionButton
+			})
+		}),
+		loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.LinearProgress, {}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: { display: "flex" },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { width: "100%" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgTable, {
+						...agGridOptions,
+						columnDefs,
+						dynamicSizing: !disableDynamicSizing,
+						rowData: data || emptyArr,
+						onGridReady: gridReady || onGridReady,
+						onRowSelected: handleRowSelected,
+						suppressCellSelection: true,
+						suppressRowClickSelection: false,
+						defaultColDef: defaultColActionsDef,
+						enableRangeSelection: true,
+						enableColResize: true,
+						sideBar: sidebarIsVisible,
+						pivotMode: false,
+						pivotPanelShow: "never",
+						groupSelectsChildren: true,
+						animateRows: false,
+						pagination: !disablePagination,
+						showOpenedGroup: true,
+						paginateChildRows: true,
+						paginationPageSize,
+						modules: rowModelType === "serverSide" ? [__ag_grid_enterprise_server_side_row_model.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes.groupSideBar,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridGroupingSidebar, {
+						groupItem: (item) => groupGridItems(item),
+						closeClick: () => groupGridItems(""),
+						expandClick: expandGroupedGrid,
+						collapseClick: collapseGroupedGrid,
+						groupingData,
+						height
+					})
+				}),
+				!hiddenActionButtons?.includes("saveView") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveViewFormDialog, {
+					open: saveViewOpen,
+					handleClose: closeSaveView,
+					application: applicationName,
+					tenant: tenantName,
+					user,
+					columnDefsValues,
+					refetchViews: refetch,
+					gApi,
+					gcApi,
+					setSelectedView: setView,
+					gridId,
+					domain,
+					apiCatalogId
+				})
+			]
+		})
+	] });
+};
+AmbientGridTemplate.propTypes = {
+	columnDefs: prop_types.default.array,
+	handleRowSelected: prop_types.default.func,
+	data: prop_types.default.array,
+	title: prop_types.default.string,
+	groupingData: prop_types.default.array,
+	frameworkComponents: prop_types.default.object,
+	loading: prop_types.default.bool,
+	primaryActionButton: prop_types.default.object,
+	rowNodeIdName: prop_types.default.string,
+	defaultAutoSize: prop_types.default.bool,
+	scrollToTopOnStateChange: prop_types.default.bool,
+	disableDynamicSizing: prop_types.default.bool,
+	filters: prop_types.default.arrayOf(prop_types.default.shape({
+		label: prop_types.default.string.isRequired,
+		value: prop_types.default.string.isRequired
+	})),
+	views: prop_types.default.arrayOf(prop_types.default.shape({ label: prop_types.default.string.isRequired })),
+	additionalFilters: prop_types.default.arrayOf(prop_types.default.shape({ label: prop_types.default.string.isRequired })),
+	kpis: prop_types.default.arrayOf(prop_types.default.shape({
+		label: prop_types.default.string.isRequired,
+		value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired
+	})),
+	useNewHeader: prop_types.default.bool,
+	insightsClick: prop_types.default.func,
+	hiddenActionButtons: prop_types.default.arrayOf(prop_types.default.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	hiddenLabels: prop_types.default.arrayOf(prop_types.default.oneOf([
+		"saveView",
+		"views",
+		"insights",
+		"importExport",
+		"group",
+		"filter",
+		"columns",
+		"fitGrid",
+		"expandGrid",
+		"clearFilters"
+	])),
+	onPrimaryActionClick: prop_types.default.func,
+	primaryActionLabel: prop_types.default.string,
+	primaryActionIcon: prop_types.default.elementType,
+	secondaryActionButtons: prop_types.default.array,
+	applicationName: prop_types.default.string,
+	entityName: prop_types.default.string,
+	tenantName: prop_types.default.string,
+	user: prop_types.default.object,
+	kpiValues: prop_types.default.array
+};
+
+//#endregion
+Object.defineProperty(exports, 'ActionContext', {
+  enumerable: true,
+  get: function () {
+    return ActionContext;
+  }
+});
+Object.defineProperty(exports, 'ActionDispatchContext', {
+  enumerable: true,
+  get: function () {
+    return ActionDispatchContext;
+  }
+});
+Object.defineProperty(exports, 'ActionLoadingDispatchContext', {
+  enumerable: true,
+  get: function () {
+    return ActionLoadingDispatchContext;
+  }
+});
+Object.defineProperty(exports, 'ActionsRenderer', {
+  enumerable: true,
+  get: function () {
+    return ActionsRenderer;
+  }
+});
+Object.defineProperty(exports, 'AgTable', {
+  enumerable: true,
+  get: function () {
+    return AgTable;
+  }
+});
+Object.defineProperty(exports, 'AgTableButtons', {
+  enumerable: true,
+  get: function () {
+    return AgTableButtons;
+  }
+});
+Object.defineProperty(exports, 'AmbientGridTemplate', {
+  enumerable: true,
+  get: function () {
+    return AmbientGridTemplate;
+  }
+});
+Object.defineProperty(exports, 'AmbientTextField', {
+  enumerable: true,
+  get: function () {
+    return AmbientTextField;
+  }
+});
+Object.defineProperty(exports, 'AmbientToggleButton', {
+  enumerable: true,
+  get: function () {
+    return AmbientToggleButton;
+  }
+});
+Object.defineProperty(exports, 'AmbientTokenButton', {
+  enumerable: true,
+  get: function () {
+    return AmbientTokenButton;
+  }
+});
+Object.defineProperty(exports, 'DynamicContainerWithMenu', {
+  enumerable: true,
+  get: function () {
+    return DynamicContainerWithMenu;
+  }
+});
+Object.defineProperty(exports, 'Ellipse', {
+  enumerable: true,
+  get: function () {
+    return Ellipse;
+  }
+});
+Object.defineProperty(exports, 'FilterOperators', {
+  enumerable: true,
+  get: function () {
+    return FilterOperators;
+  }
+});
+Object.defineProperty(exports, 'FluentDialog', {
+  enumerable: true,
+  get: function () {
+    return FluentDialog;
+  }
+});
+Object.defineProperty(exports, 'GridActionBar', {
+  enumerable: true,
+  get: function () {
+    return GridActionBar;
+  }
+});
+Object.defineProperty(exports, 'GridGroupingHeader', {
+  enumerable: true,
+  get: function () {
+    return GridGroupingHeader;
+  }
+});
+Object.defineProperty(exports, 'GridGroupingSidebar', {
+  enumerable: true,
+  get: function () {
+    return GridGroupingSidebar;
+  }
+});
+Object.defineProperty(exports, 'GridSidebarContainer', {
+  enumerable: true,
+  get: function () {
+    return GridSidebarContainer;
+  }
+});
+Object.defineProperty(exports, 'IconButtonWithTooltip', {
+  enumerable: true,
+  get: function () {
+    return IconButtonWithTooltip;
+  }
+});
+Object.defineProperty(exports, 'LicenseKey', {
+  enumerable: true,
+  get: function () {
+    return LicenseKey;
+  }
+});
+Object.defineProperty(exports, 'SearchOperators', {
+  enumerable: true,
+  get: function () {
+    return SearchOperators;
+  }
+});
+Object.defineProperty(exports, 'Token', {
+  enumerable: true,
+  get: function () {
+    return Token;
+  }
+});
+Object.defineProperty(exports, 'clearGridState', {
+  enumerable: true,
+  get: function () {
+    return clearGridState;
+  }
+});
+Object.defineProperty(exports, 'deleteGridState', {
+  enumerable: true,
+  get: function () {
+    return deleteGridState;
+  }
+});
+Object.defineProperty(exports, 'findTermByType', {
+  enumerable: true,
+  get: function () {
+    return findTermByType;
+  }
+});
+Object.defineProperty(exports, 'getCommonEntityName', {
+  enumerable: true,
+  get: function () {
+    return getCommonEntityName;
+  }
+});
+Object.defineProperty(exports, 'getEllipseColor', {
+  enumerable: true,
+  get: function () {
+    return getEllipseColor;
+  }
+});
+Object.defineProperty(exports, 'getEntityAttributes', {
+  enumerable: true,
+  get: function () {
+    return getEntityAttributes;
+  }
+});
+Object.defineProperty(exports, 'getFullyQualifiedName', {
+  enumerable: true,
+  get: function () {
+    return getFullyQualifiedName;
+  }
+});
+Object.defineProperty(exports, 'getGridState', {
+  enumerable: true,
+  get: function () {
+    return getGridState;
+  }
+});
+Object.defineProperty(exports, 'getPathObject', {
+  enumerable: true,
+  get: function () {
+    return getPathObject;
+  }
+});
+Object.defineProperty(exports, 'getPathParametersObj', {
+  enumerable: true,
+  get: function () {
+    return getPathParametersObj;
+  }
+});
+Object.defineProperty(exports, 'getPrimaryKeyValues', {
+  enumerable: true,
+  get: function () {
+    return getPrimaryKeyValues;
+  }
+});
+Object.defineProperty(exports, 'getSanitizedName', {
+  enumerable: true,
+  get: function () {
+    return getSanitizedName;
+  }
+});
+Object.defineProperty(exports, 'getSuccessAction', {
+  enumerable: true,
+  get: function () {
+    return getSuccessAction;
+  }
+});
+Object.defineProperty(exports, 'isValueSelected', {
+  enumerable: true,
+  get: function () {
+    return isValueSelected;
+  }
+});
+Object.defineProperty(exports, 'onFirstDataRendered', {
+  enumerable: true,
+  get: function () {
+    return onFirstDataRendered;
+  }
+});
+Object.defineProperty(exports, 'saveGridState', {
+  enumerable: true,
+  get: function () {
+    return saveGridState;
+  }
+});
+Object.defineProperty(exports, 'useActionState', {
+  enumerable: true,
+  get: function () {
+    return useActionState;
+  }
+});
+Object.defineProperty(exports, 'useActionStore', {
+  enumerable: true,
+  get: function () {
+    return useActionStore;
+  }
+});
+Object.defineProperty(exports, 'useActions', {
+  enumerable: true,
+  get: function () {
+    return useActions;
+  }
+});
+Object.defineProperty(exports, 'useAgGridApi', {
+  enumerable: true,
+  get: function () {
+    return useAgGridApi;
+  }
+});
+Object.defineProperty(exports, 'useCatalogStore', {
+  enumerable: true,
+  get: function () {
+    return useCatalogStore;
+  }
+});
+Object.defineProperty(exports, 'useDynamicListCalculation', {
+  enumerable: true,
+  get: function () {
+    return useDynamicListCalculation;
+  }
+});
+Object.defineProperty(exports, 'useExport', {
+  enumerable: true,
+  get: function () {
+    return useExport;
+  }
+});
+Object.defineProperty(exports, 'useGridClear', {
+  enumerable: true,
+  get: function () {
+    return useGridClear;
+  }
+});
+Object.defineProperty(exports, 'useGridFormat', {
+  enumerable: true,
+  get: function () {
+    return useGridFormat;
+  }
+});
+Object.defineProperty(exports, 'useHandleAction', {
+  enumerable: true,
+  get: function () {
+    return useHandleAction;
+  }
+});
+Object.defineProperty(exports, 'useInquiryStore', {
+  enumerable: true,
+  get: function () {
+    return useInquiryStore;
+  }
+});
+Object.defineProperty(exports, 'useQuickFilter', {
+  enumerable: true,
+  get: function () {
+    return useQuickFilter;
+  }
+});
+//# sourceMappingURL=AmbientGridTemplate-RvpH04W2.cjs.map