udp-react-enterprise-component-library 25.16.1 → 25.16.2-beta.10

package/dist/GraphCard-Dyk5A2v2.js

@@ -0,0 +1,75 @@
+import { t as AmbientCard } from "./AmbientCard-blAjLcmr.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-BKSjYbZg.js";
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { useTranslation } from "react-i18next";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/dataDisplay/GraphCard/GraphCard.jsx
+const useStyles = makeStyles((theme) => ({
+	infoPanel: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-around",
+		alignItems: "center",
+		alignSelf: "stretch",
+		padding: "10px 32px"
+	},
+	graphSection: {
+		overflow: "hidden",
+		"& svg": {
+			width: "100%",
+			height: "100%"
+		},
+		"& .vega-embed": {
+			width: "100%",
+			height: "100%"
+		},
+		paddingTop: theme.spacing(1),
+		margin: 0,
+		height: (props) => props?.graphHeight ?? "255px"
+	},
+	emptyStateDisplay: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	}
+}));
+/**
+* `GraphCard` component
+*/
+const GraphCard = (props) => {
+	const { title, showInfoPanel = true, graphSpecs, children, headerColor, className, noData = false, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon,...otherProps } = props;
+	const classes = useStyles(props);
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		fullWidth: true,
+		title,
+		headerColor,
+		...otherProps
+	}, !noData ? /* @__PURE__ */ React.createElement("div", null, showInfoPanel && /* @__PURE__ */ React.createElement("div", { className: classes.infoPanel }, children), /* @__PURE__ */ React.createElement("div", { className: classes.graphSection }, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: graphSpecs || {}
+	}))) : /* @__PURE__ */ React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		primaryText: emptyStatePrimaryText ?? t("No results found"),
+		icon: emptyStateIcon,
+		iconSize: emptyStateIconSize,
+		imageSrc: emptyStateImageSrc,
+		imageWidth: emptyStateImageWidth
+	})));
+};
+GraphCard.propTypes = {
+	title: PropTypes$1.string,
+	graphSpecs: PropTypes$1.object.isRequired,
+	showInfoPanel: PropTypes$1.bool,
+	children: PropTypes$1.node,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { GraphCard as t };
+//# sourceMappingURL=GraphCard-Dyk5A2v2.js.map

package/dist/GraphCard-Dyk5A2v2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphCard-Dyk5A2v2.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  infoPanel: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    padding: '10px 32px'\n  },\n  graphSection: {\n    overflow: 'hidden',\n    '& svg': {\n      width: '100%',\n      height: '100%'\n    },\n    '& .vega-embed': {\n      width: '100%',\n      height: '100%'\n    },\n    paddingTop: theme.spacing(1),\n    margin: 0,\n    height: (props) => props?.graphHeight ?? '255px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  }\n}));\n\n/**\n * `GraphCard` component\n */\nexport const GraphCard = (props) => {\n  const {\n    title,\n    showInfoPanel = true,\n    graphSpecs,\n    children,\n    headerColor,\n    className,\n    noData = false,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    ...otherProps\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      headerColor={headerColor}\n      {...otherProps}\n    >\n      {!noData ? (\n        <div>\n          {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n          <div className={classes.graphSection}>\n            <MuiVegaLite\n              variant='verticalBarChart'\n              background='paper'\n              autoResize\n              actions={false}\n              spec={graphSpecs || {}}\n            />\n          </div>\n        </div>\n      ) : (\n        <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n          <EmptyStateDisplay\n            primaryText={emptyStatePrimaryText ?? t('No results found')}\n            icon={emptyStateIcon}\n            iconSize={emptyStateIconSize}\n            imageSrc={emptyStateImageSrc}\n            imageWidth={emptyStateImageWidth}\n          />\n        </div>\n      )}\n    </AmbientCard>\n  );\n};\n\nGraphCard.propTypes = {\n  /**\n   * Optional, card title\n   */\n  title: PropTypes.string,\n\n  /**\n   * @type {?object}\n   {\n     graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n    }\n   */\n  graphSpecs: PropTypes.object.isRequired,\n\n  /**\n   * Optional, hide or show the top panel\n   */\n  showInfoPanel: PropTypes.bool,\n\n  /**\n   * Optional, content for the info panel behind the graph\n   */\n  children: PropTypes.node,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,eACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}

package/dist/Grid-BJi0-yu3.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Grid } from "@material-ui/core";
+
+//#region src/UI/Grid.jsx
+const Grid$1 = (props) => {
+	const { container, item, spacing,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Grid, {
+		container,
+		item,
+		spacing,
+		...otherProps
+	});
+};
+
+//#endregion
+export { Grid$1 as t };
+//# sourceMappingURL=Grid-BJi0-yu3.js.map

package/dist/Grid-BJi0-yu3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-BJi0-yu3.js","names":["Grid","MuiGrid"],"sources":["../src/UI/Grid.jsx"],"sourcesContent":["import React from 'react';\nimport { Grid as MuiGrid } from '@material-ui/core';\n\nexport const Grid = props => {\n  const { container, item, spacing, ...otherProps } = props;\n\n  return (\n    <MuiGrid\n      container={container}\n      item={item}\n      spacing={spacing}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAaA,UAAO,UAAS;CAC3B,MAAM,EAAE,WAAW,MAAM,QAAS,GAAG,eAAe;AAEpD,QACE,oCAACC;EACY;EACL;EACG;EACT,GAAI;GACJ"}

package/dist/GridFunctions-BmV2e-nR.js

@@ -0,0 +1,150 @@
+import { c as GridStateTypeEnums } from "./unitySystemEnums-DQSkCr3D.js";
+
+//#region src/utilities/aggrid/GridFunctions.js
+const useGridFormat = () => {
+	const gridFormat = (gridApi, type) => {
+		type === "expand" && gridApi.expandAll();
+		type === "collapse" && gridApi.collapseAll();
+		type === "resize" && gridApi.sizeColumnsToFit();
+	};
+	return [gridFormat];
+};
+const useGridClear = () => {
+	const gridClear = (gridApi, gridColumnApi) => {
+		gridColumnApi.setRowGroupColumns([]);
+		gridApi.setFilterModel(null);
+		gridApi.setQuickFilter("");
+		gridApi.sizeColumnsToFit();
+		gridColumnApi.resetColumnState();
+	};
+	return [gridClear];
+};
+const useQuickFilter = () => {
+	const quickFilter = (gridApi, event) => {
+		gridApi.setQuickFilter(event?.target.value);
+	};
+	return [quickFilter];
+};
+const useExport = () => {
+	const gridExport = (gridApi, type) => {
+		type === "excel" && gridApi.exportDataAsExcel();
+		type === "csv" && gridApi.exportDataAsCsv();
+	};
+	return [gridExport];
+};
+const saveGridState = async (gridId, gridApi, gridColumnApi, execute) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return await execute({ data: gridState });
+};
+const getGridState = (gridApi, gridColumnApi, gridId) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return gridState;
+};
+const deleteGridState = async (gridApi, gridColumnApi, deleteGridState$1) => {
+	clearGridState(gridApi, gridColumnApi);
+	return await deleteGridState$1();
+};
+const clearGridState = (gridApi, gridColumnApi) => {
+	gridColumnApi.resetColumnState();
+	gridColumnApi.resetColumnGroupState();
+	gridApi.setFilterModel({});
+	gridApi.setSortModel([]);
+	gridColumnApi.setPivotMode(false);
+	gridApi.sizeColumnsToFit();
+};
+const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {
+	if (gridStates && gridStates.length) gridStates.forEach((state) => {
+		switch (state.gridStateTypeId) {
+			case GridStateTypeEnums.Column:
+				gridColumnApi.setColumnState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Group:
+				gridColumnApi.setColumnGroupState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Pivot_Mode:
+				gridColumnApi.setPivotMode(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Sort:
+				gridApi.setSortModel(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Filter:
+				gridApi.setFilterModel(JSON.parse(state.values));
+				break;
+			default: break;
+		}
+	});
+};
+
+//#endregion
+export { saveGridState as a, useGridFormat as c, onFirstDataRendered as i, useQuickFilter as l, deleteGridState as n, useExport as o, getGridState as r, useGridClear as s, clearGridState as t };
+//# sourceMappingURL=GridFunctions-BmV2e-nR.js.map

package/dist/GridFunctions-BmV2e-nR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridFunctions-BmV2e-nR.js","names":["deleteGridState"],"sources":["../src/utilities/aggrid/GridFunctions.js"],"sourcesContent":["import { GridStateTypeEnums } from '../../enums/unitySystemEnums.ts';\n\nexport const useGridFormat = () => {\n  const gridFormat = (gridApi, type) => {\n    type === 'expand' && gridApi.expandAll()\n    type === 'collapse' && gridApi.collapseAll()\n    type === 'resize' && gridApi.sizeColumnsToFit()\n  }\n  return [gridFormat]\n}\n\nexport const useGridClear = () => {\n  const gridClear = (gridApi, gridColumnApi) => {\n    gridColumnApi.setRowGroupColumns([])\n    gridApi.setFilterModel(null)\n    gridApi.setQuickFilter('')\n    gridApi.sizeColumnsToFit()\n    gridColumnApi.resetColumnState()\n  }\n  return [gridClear]\n}\n\nexport const useQuickFilter = () => {\n  const quickFilter = (gridApi, event) => {\n    gridApi.setQuickFilter(event?.target.value)\n  }\n  return [quickFilter]\n}\n\nexport const useExport = () => {\n  const gridExport = (gridApi, type) => {\n    type === 'excel' && gridApi.exportDataAsExcel()\n    type === 'csv' && gridApi.exportDataAsCsv()\n  }\n  return [gridExport]\n}\n\nexport const saveGridState = async (\n  gridId,\n  gridApi,\n  gridColumnApi,\n  execute\n) => {\n  const columnState = gridColumnApi?.getColumnState();\n  const columnGroupState = gridColumnApi?.getColumnGroupState();\n  const sortModel = gridApi.getSortModel();\n  const filterModel = gridApi.getFilterModel();\n  const isPivotMode = gridColumnApi.isPivotMode();\n\n  const gridState = [];\n  const columnGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column,\n    gridId: gridId,\n    values: JSON.stringify(columnState),\n  };\n  const columnGroupGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Group,\n    gridId: gridId,\n    values: JSON.stringify(columnGroupState),\n  };\n  const columnSortGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Sort,\n    gridId: gridId,\n    values: JSON.stringify(sortModel),\n  };\n  const columnFilterGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Filter,\n    gridId: gridId,\n    values: JSON.stringify(filterModel),\n  };\n  const pivotGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Pivot_Mode,\n    gridId: gridId,\n    values: JSON.stringify(isPivotMode),\n  };\n  gridState.push(columnGridConfiguration);\n  gridState.push(columnGroupGridConfiguration);\n  gridState.push(columnSortGridConfiguration);\n  gridState.push(columnFilterGridConfiguration);\n  gridState.push(pivotGridConfiguration);\n\n  return await execute({ data: gridState });\n};\n\n\nexport const getGridState = (gridApi, gridColumnApi, gridId) => {\n  const columnState = gridColumnApi?.getColumnState();\n  const columnGroupState = gridColumnApi?.getColumnGroupState();\n  const sortModel = gridApi.getSortModel();\n  const filterModel = gridApi.getFilterModel();\n  const isPivotMode = gridColumnApi.isPivotMode();\n\n  const gridState = [];\n  const columnGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column,\n    gridId: gridId,\n    values: JSON.stringify(columnState),\n  };\n  const columnGroupGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Group,\n    gridId: gridId,\n    values: JSON.stringify(columnGroupState),\n  };\n  const columnSortGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Sort,\n    gridId: gridId,\n    values: JSON.stringify(sortModel),\n  };\n  const columnFilterGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Column_Filter,\n    gridId: gridId,\n    values: JSON.stringify(filterModel),\n  };\n  const pivotGridConfiguration = {\n    gridStateTypeId: GridStateTypeEnums.Pivot_Mode,\n    gridId: gridId,\n    values: JSON.stringify(isPivotMode),\n  };\n  gridState.push(columnGridConfiguration);\n  gridState.push(columnGroupGridConfiguration);\n  gridState.push(columnSortGridConfiguration);\n  gridState.push(columnFilterGridConfiguration);\n  gridState.push(pivotGridConfiguration);\n\n  return gridState;\n}\n\nexport const deleteGridState = async (\n  gridApi,\n  gridColumnApi,\n  deleteGridState\n) => {\n  clearGridState(gridApi, gridColumnApi);\n  return await deleteGridState();\n};\n\nexport const clearGridState = (gridApi, gridColumnApi) => {\n  gridColumnApi.resetColumnState();\n  gridColumnApi.resetColumnGroupState();\n  gridApi.setFilterModel({});\n  gridApi.setSortModel([]);\n  gridColumnApi.setPivotMode(false);\n  gridApi.sizeColumnsToFit();\n};\n\nexport const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {\n  if (gridStates && gridStates.length) {\n    gridStates.forEach(state => {\n      switch (state.gridStateTypeId) {\n        case GridStateTypeEnums.Column:\n          gridColumnApi.setColumnState(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Group:\n          gridColumnApi.setColumnGroupState(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Pivot_Mode:\n          gridColumnApi.setPivotMode(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Sort:\n          gridApi.setSortModel(JSON.parse(state.values));\n          break;\n        case GridStateTypeEnums.Column_Filter:\n          gridApi.setFilterModel(JSON.parse(state.values));\n          break;\n        default:\n          break;\n      }\n    });\n  }\n};"],"mappings":"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"}

package/dist/GridGroupingSidebar-YNa0__cR.js

@@ -0,0 +1,142 @@
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { t as AmbientTokenButton } from "./AmbientTokenButton-DGq_rY9l.js";
+import { t as Token } from "./Token-2qpMI6YU.js";
+import { t as AmbientToggleButton } from "./AmbientToggleButton-CWxK7Djj.js";
+import { t as AmbientToggleButtonGroupDefault_default } from "./AmbientToggleButtonGroupDefault-BhzqJ9wA.js";
+import React, { useState } from "react";
+import { Paper, Typography, makeStyles } from "@material-ui/core";
+import { AssessmentGroupIcon, ChevronFold10Icon, ChevronUnfold10Icon, ChromeCloseIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/ui/GridSidebarContainer.jsx
+const useStyles$2 = 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$2(props);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Paper, {
+		elevation: "0",
+		square: true,
+		style: { background: color }
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.groupWrapper }, children)));
+};
+GridSidebarContainer.propTypes = {
+	children: PropTypes.node,
+	color: PropTypes.string
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingHeader.jsx
+const useStyles$1 = 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$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.actionHeader }, /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronFold10Icon,
+		tooltip: "Collapse All",
+		ariaLabel: "Collapse All",
+		onClick: collapseClick
+	}), /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		icon: ChevronUnfold10Icon,
+		tooltip: "Expand All",
+		ariaLabel: "Expand All",
+		onClick: expandClick
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Group By:")), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }));
+};
+GridGroupingHeader.propTypes = {
+	expandClick: PropTypes.func.isRequired,
+	collapseClick: PropTypes.func.isRequired
+};
+
+//#endregion
+//#region src/UI/templates/ui/GridGroupingSidebar.jsx
+const useStyles = 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();
+	const [view, setView] = useState("");
+	const handleChange = (event, nextView) => {
+		setView(nextView);
+	};
+	const GroupItem = ({ label, clear }) => {
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+			icon: clear ? ChromeCloseIcon : AssessmentGroupIcon,
+			color: "trigger",
+			size: "small",
+			variant: "filled",
+			type: "icon"
+		}), /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: { color: "black" }
+		}, " ", label, " "));
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(GridSidebarContainer, {
+		color,
+		height
+	}, /* @__PURE__ */ React.createElement(GridGroupingHeader, {
+		expandClick,
+		collapseClick,
+		closeClick
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.groupActionContainer }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroupDefault_default, {
+		orientation: "vertical",
+		value: view,
+		exclusive: true,
+		onChange: handleChange,
+		className: classes.buttonGroupWrapper
+	}, groupingData.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+			value: item.value,
+			"aria-label": item.label,
+			onClick: () => groupItem(item.groupItem)
+		}, /* @__PURE__ */ React.createElement(GroupItem, { label: item.label }));
+	}), /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+		value: "noGroups",
+		"aria-label": "noGroups",
+		onClick: closeClick
+	}, /* @__PURE__ */ React.createElement(GroupItem, {
+		label: "No Groups",
+		clear: true
+	}))))));
+};
+GridGroupingSidebar.propTypes = {
+	groupItem: PropTypes.func,
+	expandClick: PropTypes.func,
+	collapseClick: PropTypes.func,
+	closeClick: PropTypes.func,
+	groupingData: PropTypes.array,
+	color: PropTypes.string
+};
+
+//#endregion
+export { GridGroupingHeader as n, GridSidebarContainer as r, GridGroupingSidebar as t };
+//# sourceMappingURL=GridGroupingSidebar-YNa0__cR.js.map

package/dist/GridGroupingSidebar-YNa0__cR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridGroupingSidebar-YNa0__cR.js","names":["useStyles","useStyles","AmbientToggleButtonGroupDefault"],"sources":["../src/UI/templates/ui/GridSidebarContainer.jsx","../src/UI/templates/ui/GridGroupingHeader.jsx","../src/UI/templates/ui/GridGroupingSidebar.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Paper } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  groupWrapper: {\n    padding: theme.spacing(2),\n    height: (props) =>\n      props?.height\n        ? `${props.height} !important`\n        : 'calc(100vh - 280px) !important',\n    overflow: 'auto'\n  }\n}));\n\nexport const GridSidebarContainer = (props) => {\n  const { children, color } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.root}>\n      <Paper elevation='0' square style={{ background: color }}>\n        <div className={classes.groupWrapper}>{children}</div>\n      </Paper>\n    </div>\n  );\n};\nGridSidebarContainer.propTypes = {\n  /**\n   * Children of component\n   */\n  children: PropTypes.node,\n  color: PropTypes.string\n};\n","import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { ChevronFold10Icon, ChevronUnfold10Icon } from '@fluentui/react-icons';\nimport { AmbientTokenButton } from '../../inputs/buttons/AmbientTokenButton'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  actionHeader: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: 10\n  },\n  icon:{\n    background: theme.palette.common.white,\n    padding: theme.spacing(1),\n    color: theme.palette.secondary.main\n  }\n\n}))\n\nexport const GridGroupingHeader = ({expandClick, collapseClick }) => {\n  const classes = useStyles()\n  return (\n    <div className={classes.root} >\n      <div className={classes.actionHeader} >\n          <AmbientTokenButton icon={ChevronFold10Icon} tooltip=\"Collapse All\" ariaLabel=\"Collapse All\" onClick={collapseClick}  />\n          <AmbientTokenButton icon={ChevronUnfold10Icon} tooltip=\"Expand All\" ariaLabel=\"Expand All\" onClick={expandClick}  />\n      </div>\n      <LayoutUnit unit=\"nudge\" />    \n    <div className={classes.label} ><Typography variant=\"caption\">Group By:</Typography></div>\n      <LayoutUnit unit=\"nudge\" />\n    </div>\n  )\n}\nGridGroupingHeader.propTypes = {\n  /**\n   * expand fucntion to expand grid when items are grouped\n   */\n   expandClick: PropTypes.func.isRequired,\n  /**\n   * expand fucntion to collapse grid when items are grouped\n   */\n   collapseClick: PropTypes.func.isRequired,\n}\n","import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { GridSidebarContainer } from './GridSidebarContainer';\nimport { GridGroupingHeader } from './GridGroupingHeader';\nimport { AssessmentGroupIcon, ChromeCloseIcon } from '@fluentui/react-icons';\nimport { Token } from '../../components/dataDisplay/Token';\nimport { AmbientToggleButton } from '../../inputs/buttons/AmbientToggleButton';\nimport AmbientToggleButtonGroupDefault from '../../inputs/buttons/AmbientToggleButtonGroupDefault';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  groupActionContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    alignContent: 'space-around'\n  },\n  buttonRoot: {\n    textTransform: 'none',\n    fontWeight: 700,\n    justifyContent: 'flex-start'\n  },\n  buttonGroupWrapper: {\n    gap: theme.spacing(2)\n  }\n}));\n\nexport const GridGroupingSidebar = ({\n  groupItem,\n  expandClick,\n  collapseClick,\n  closeClick,\n  groupingData,\n  height,\n  color = '#F5F2F8'\n}) => {\n  const classes = useStyles();\n\n  const [view, setView] = useState('');\n\n  const handleChange = (event, nextView) => {\n    setView(nextView);\n  };\n\n  const GroupItem = ({ label, clear }) => {\n    return (\n      <>\n        <Token\n          icon={clear ? ChromeCloseIcon : AssessmentGroupIcon}\n          color='trigger'\n          size='small'\n          variant='filled'\n          type='icon'\n        />\n        <Typography variant='caption' style={{ color: 'black' }}>\n          {' '}\n          {label}{' '}\n        </Typography>\n      </>\n    );\n  };\n\n  return (\n    <div className={classes.root}>\n      <GridSidebarContainer color={color} height={height}>\n        <GridGroupingHeader\n          expandClick={expandClick}\n          collapseClick={collapseClick}\n          closeClick={closeClick}\n        />\n        <div className={classes.groupActionContainer}>\n          <AmbientToggleButtonGroupDefault\n            orientation='vertical'\n            value={view}\n            exclusive\n            onChange={handleChange}\n            className={classes.buttonGroupWrapper}\n          >\n            {\n              // @todo: consider combining value and groupItem.\n              groupingData.map((item) => {\n                return (\n                  <AmbientToggleButton\n                    value={item.value}\n                    aria-label={item.label}\n                    onClick={() => groupItem(item.groupItem)}\n                  >\n                    <GroupItem label={item.label} />\n                  </AmbientToggleButton>\n                );\n              })\n            }\n            <AmbientToggleButton\n              value='noGroups'\n              aria-label='noGroups'\n              onClick={closeClick}\n            >\n              <GroupItem label='No Groups' clear />\n            </AmbientToggleButton>\n          </AmbientToggleButtonGroupDefault>\n        </div>\n      </GridSidebarContainer>\n    </div>\n  );\n};\nGridGroupingSidebar.propTypes = {\n  /**\n   * Function to pass along grid grouping\n   */\n  groupItem: PropTypes.func,\n  /**\n   * Expand Grouped items on grid\n   */\n  expandClick: PropTypes.func,\n  /**\n   * Collapse grouped items on grid\n   */\n  collapseClick: PropTypes.func,\n  /**\n   * Clear grouped items\n   */\n  closeClick: PropTypes.func,\n  /**\n   * Array of data to create grouping list. Example: {groupItem: 'instructors', label: 'Instructors', value: 'instructors'},\n   */\n  groupingData: PropTypes.array,\n  /**\n   * Color of the sidebar\n   */\n  color: PropTypes.string\n};\n"],"mappings":"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"}

package/dist/GridRow-CPfKPnRD.js

@@ -0,0 +1,54 @@
+import React, { Children, useEffect, useState } from "react";
+import { lighten, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/layout/getRatio.js
+const getRatio = (ratio) => {
+	if (ratio === "1:1") return [1, 1];
+	else if (ratio === "1:2") return [2, 1];
+	else if (ratio === "16:9") return [9, 16];
+	else if (ratio === "3:2") return [2, 3];
+	else if (ratio === "4:3") return [3, 4];
+	else return [1, 1];
+};
+
+//#endregion
+//#region src/layout/GridUnit.jsx
+const createRatio = (width, ratio1, ratio2) => {
+	const x = width * ratio1 / ratio2;
+	return Math.ceil(x / 8) * 8;
+};
+const useStyles$1 = makeStyles((theme) => ({ root: {
+	width: "100%",
+	maxWidth: (props) => props.width,
+	padding: theme.spacing(1)
+} }));
+const GridUnit = (props) => {
+	const classes = useStyles$1(props);
+	const { children, columnPadding, width, ratio } = props;
+	const ratioArr = getRatio(ratio);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		style: { height: createRatio(width, ratioArr[0], ratioArr[1]) - (columnPadding || 8) }
+	}, children);
+};
+
+//#endregion
+//#region src/layout/GridRow.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	display: "flex",
+	background: (highlight) => highlight === true && lighten("#40c4ff", .9),
+	[theme.breakpoints.down("xs")]: { flexDirection: "column" }
+} }));
+const GridRow = ({ children, highlight, className }) => {
+	const classes = useStyles(highlight);
+	const [childCount, setChildCount] = useState();
+	useEffect(() => {
+		setChildCount(Children.count(children));
+	}, [childCount, children]);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, children);
+};
+
+//#endregion
+export { GridUnit as n, getRatio as r, GridRow as t };
+//# sourceMappingURL=GridRow-CPfKPnRD.js.map

package/dist/GridRow-CPfKPnRD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRow-CPfKPnRD.js","names":["useStyles"],"sources":["../src/layout/getRatio.js","../src/layout/GridUnit.jsx","../src/layout/GridRow.jsx"],"sourcesContent":["export const getRatio = (ratio) => {\n  let r1\n  let r2\n\n  if (ratio === '1:1') {\n    return [(r1 = 1), (r2 = 1)]\n  } else if (ratio === '1:2') {\n    return [(r1 = 2), (r2 = 1)]\n  } else if (ratio === '16:9') {\n    return [(r1 = 9), (r2 = 16)]\n  } else if (ratio === '3:2') {\n    return [(r1 = 2), (r2 = 3)]\n  } else if (ratio === '4:3') {\n    return [(r1 = 3), (r2 = 4)]\n  } else {\n    return [(r1 = 1), (r2 = 1)]\n  }\n}\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { getRatio } from './getRatio'\n\nconst createRatio = (width, ratio1, ratio2) => {\n  const x = (width * ratio1) / ratio2\n  return Math.ceil(x / 8) * 8\n}\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    maxWidth: (props) => props.width,\n    padding: theme.spacing(1)\n  }\n}))\n\nexport const GridUnit = (props) => {\n  const classes = useStyles(props)\n  const { children, columnPadding, width, ratio } = props\n  const ratioArr = getRatio(ratio)\n\n  return (\n    <div\n      className={classes.root}\n      style={{\n        height:\n          createRatio(width, ratioArr[0], ratioArr[1]) - (columnPadding || 8)\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n","import React, { Children, useEffect, useState } from 'react'\nimport { makeStyles, lighten } from '@material-ui/core'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    background: (highlight) => highlight === true && lighten('#40c4ff', 0.9),\n    [theme.breakpoints.down('xs')]: {\n      flexDirection: 'column'\n    }\n  }\n}))\n\nexport const GridRow = ({ children, highlight, className }) => {\n  const classes = useStyles(highlight)\n  const [childCount, setChildCount] = useState()\n\n  useEffect(() => {\n    const count = Children.count(children)\n    setChildCount(count)\n  }, [childCount, children])\n\n  return <div className={clsx(classes.root, className)}>{children}</div>\n}\n"],"mappings":";;;;;AAAA,MAAa,YAAY,UAAU;AAIjC,KAAI,UAAU,MACZ,QAAO,CAAO,GAAU,EAAG;UAClB,UAAU,MACnB,QAAO,CAAO,GAAU,EAAG;UAClB,UAAU,OACnB,QAAO,CAAO,GAAU,GAAI;UACnB,UAAU,MACnB,QAAO,CAAO,GAAU,EAAG;UAClB,UAAU,MACnB,QAAO,CAAO,GAAU,EAAG;KAE3B,QAAO,CAAO,GAAU,EAAG;;;;;ACX/B,MAAM,eAAe,OAAO,QAAQ,WAAW;CAC7C,MAAM,IAAK,QAAQ,SAAU;AAC7B,QAAO,KAAK,KAAK,IAAI,EAAE,GAAG;;AAG5B,MAAMA,cAAY,YAAY,WAAW,EACvC,MAAM;CACJ,OAAO;CACP,WAAW,UAAU,MAAM;CAC3B,SAAS,MAAM,QAAQ,EAAE;CAC1B,EACF,EAAE;AAEH,MAAa,YAAY,UAAU;CACjC,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EAAE,UAAU,eAAe,OAAO,UAAU;CAClD,MAAM,WAAW,SAAS,MAAM;AAEhC,QACE,oCAAC;EACC,WAAW,QAAQ;EACnB,OAAO,EACL,QACE,YAAY,OAAO,SAAS,IAAI,SAAS,GAAG,IAAI,iBAAiB,IACpE;IAEA,SACG;;;;;AC3BV,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,SAAS;CACT,aAAa,cAAc,cAAc,QAAQ,QAAQ,WAAW,GAAI;EACvE,MAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,eAAe,UAChB;CACF,EACF,EAAE;AAEH,MAAa,WAAW,EAAE,UAAU,WAAW,gBAAgB;CAC7D,MAAM,UAAU,UAAU,UAAU;CACpC,MAAM,CAAC,YAAY,iBAAiB,UAAU;AAE9C,iBAAgB;AAEd,gBADc,SAAS,MAAM,SAAS,CAClB;IACnB,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAO,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAAG,SAAe"}

package/dist/GroupNode-BxnXH0gG.js

@@ -0,0 +1,39 @@
+import { y as NodeGroupTypeEnums } from "./unitySystemEnums-DQSkCr3D.js";
+import { v4 } from "uuid";
+
+//#region src/models/GroupNode.ts
+var GroupNode = class {
+	constructor(node) {
+		this.id = node.id || v4();
+		this.isGroupNode = true;
+		this.hideEmptyGroups = node.hideEmptyGroups || false;
+		this.groupType = node.groupType || NodeGroupTypeEnums.Static;
+		this.children = node.children || [];
+		this.isExpanded = node.isExpanded || false;
+		this.parentId = node.parentId || null;
+		this.parentGroupId = node.parentGroupId || null;
+		this.properties = node.properties ? {
+			propertyMapping: null,
+			jsonLogic: null,
+			icon: {
+				name: "GroupedListIcon",
+				type: "",
+				color: ""
+			},
+			...node.properties
+		} : {
+			propertyMapping: null,
+			jsonLogic: null,
+			icon: {
+				name: "GroupedListIcon",
+				type: "",
+				color: ""
+			}
+		};
+		this.isOutlierGroup = node.isOutlierGroup || false;
+	}
+};
+
+//#endregion
+export { GroupNode as t };
+//# sourceMappingURL=GroupNode-BxnXH0gG.js.map

package/dist/GroupNode-BxnXH0gG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupNode-BxnXH0gG.js","names":["uuid"],"sources":["../src/models/GroupNode.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid';\nimport { NodeGroupTypeEnums } from '../enums/unitySystemEnums';\n\nexport default class GroupNode {\n  id: string;\n  isGroupNode: boolean;\n  groupType: string;\n  children: Array<any>;\n  isExpanded: boolean;\n  parentId: string;\n  parentGroupId: string;\n  properties: Object;\n  isOutlierGroup: boolean;\n  hideEmptyGroups: boolean;\n\n  constructor(node: any) {\n    this.id = node.id || uuid();\n    this.isGroupNode = true;\n    this.hideEmptyGroups = node.hideEmptyGroups || false;\n    this.groupType = node.groupType || NodeGroupTypeEnums.Static;\n    this.children = node.children || [];\n    this.isExpanded = node.isExpanded || false;\n    this.parentId = node.parentId || null;\n    this.parentGroupId = node.parentGroupId || null;\n    this.properties = node.properties\n      ? {\n          propertyMapping: null,\n          jsonLogic: null,\n          icon: {\n            name: 'GroupedListIcon',\n            type: '',\n            color: ''\n          },\n          ...node.properties\n        }\n      : {\n          propertyMapping: null,\n          jsonLogic: null,\n          icon: {\n            name: 'GroupedListIcon',\n            type: '',\n            color: ''\n          }\n        };\n    this.isOutlierGroup = node.isOutlierGroup || false;\n  }\n}\n"],"mappings":";;;;AAGA,IAAqB,YAArB,MAA+B;CAY7B,YAAY,MAAW;AACrB,OAAK,KAAK,KAAK,MAAMA,IAAM;AAC3B,OAAK,cAAc;AACnB,OAAK,kBAAkB,KAAK,mBAAmB;AAC/C,OAAK,YAAY,KAAK,aAAa,mBAAmB;AACtD,OAAK,WAAW,KAAK,YAAY,EAAE;AACnC,OAAK,aAAa,KAAK,cAAc;AACrC,OAAK,WAAW,KAAK,YAAY;AACjC,OAAK,gBAAgB,KAAK,iBAAiB;AAC3C,OAAK,aAAa,KAAK,aACnB;GACE,iBAAiB;GACjB,WAAW;GACX,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;IACR;GACD,GAAG,KAAK;GACT,GACD;GACE,iBAAiB;GACjB,WAAW;GACX,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;IACR;GACF;AACL,OAAK,iBAAiB,KAAK,kBAAkB"}

package/dist/HeaderExpander-D35mVasc.js

@@ -0,0 +1,53 @@
+import { t as ExtenderToggle } from "./ExtenderToggle-CEUSrt_0.js";
+import React, { useState } from "react";
+import { Collapse, makeStyles, useTheme } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/dataDisplay/HeaderExpander.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { width: "100%" },
+	container: {
+		padding: (props) => props.open ? theme.spacing(1) : theme.spacing(.25),
+		parddingRight: theme.spacing(1),
+		parddingleft: theme.spacing(1),
+		background: (props) => props.color ? props.color : theme.palette.secondary.main
+	},
+	compactContainer: { padding: 1 },
+	lowerShelf: {
+		display: "flex",
+		borderTop: (props) => `1px solid ${props.color ? props.color : theme.palette.secondary.main}`
+	},
+	lowerShelfCompact: { display: "flex" },
+	shelfOptions: {
+		flex: 1,
+		width: "100%"
+	}
+}));
+const HeaderExpander = (props) => {
+	const classes = useStyles(props);
+	const { children, options, toggleLabel, color, compact } = props;
+	const [extendedHeader, setExtendedHeader] = useState(true);
+	const toggleExpandedHeader = () => {
+		setExtendedHeader(!extendedHeader);
+	};
+	const theme = useTheme();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Collapse, { in: extendedHeader }, /* @__PURE__ */ React.createElement("div", { className: compact ? classes.compactContainer : classes.container }, " ", children, " ")), /* @__PURE__ */ React.createElement("div", { className: compact ? classes.lowerShelfCompact : classes.lowerShelf }, /* @__PURE__ */ React.createElement("div", { className: classes.shelfOptions }, options), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ExtenderToggle, {
+		onClick: toggleExpandedHeader,
+		open: extendedHeader,
+		toggleLabel,
+		color: color ? color : theme.palette.secondary.main,
+		compact
+	}))));
+};
+HeaderExpander.propTypes = {
+	children: PropTypes.node,
+	onClick: PropTypes.func,
+	sectionOpen: PropTypes.bool,
+	options: PropTypes.node,
+	toggleLabel: PropTypes.node,
+	color: PropTypes.string
+};
+
+//#endregion
+export { HeaderExpander as t };
+//# sourceMappingURL=HeaderExpander-D35mVasc.js.map

package/dist/HeaderExpander-D35mVasc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderExpander-D35mVasc.js","names":[],"sources":["../src/UI/dataDisplay/HeaderExpander.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, Collapse, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from '../templates/ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%'\n  },\n  container: {\n    padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n    parddingRight: theme.spacing(1),\n    parddingleft: theme.spacing(1),\n    background: (props) =>\n      props.color ? props.color : theme.palette.secondary.main\n  },\n  compactContainer: {\n    padding: 1\n  },\n  lowerShelf: {\n    display: 'flex',\n    borderTop: (props) =>\n      `1px solid ${props.color ? props.color : theme.palette.secondary.main}`\n  },\n  lowerShelfCompact: {\n    display: 'flex'\n  },\n  shelfOptions: {\n    flex: 1,\n    width: '100%'\n  }\n}));\n\nexport const HeaderExpander = (props) => {\n  const classes = useStyles(props);\n  const { children, options, toggleLabel, color, compact } = props;\n\n  const [extendedHeader, setExtendedHeader] = useState(true);\n\n  const toggleExpandedHeader = () => {\n    setExtendedHeader(!extendedHeader);\n  };\n\n  const theme = useTheme();\n\n  return (\n    <div className={classes.root}>\n      <Collapse in={extendedHeader}>\n        <div className={compact ? classes.compactContainer : classes.container}>\n          {' '}\n          {children}{' '}\n        </div>\n      </Collapse>\n      <div className={compact ? classes.lowerShelfCompact : classes.lowerShelf}>\n        <div className={classes.shelfOptions}>{options}</div>\n        <div>\n          <ExtenderToggle\n            onClick={toggleExpandedHeader}\n            open={extendedHeader}\n            toggleLabel={toggleLabel}\n            color={color ? color : theme.palette.secondary.main}\n            compact={compact}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nHeaderExpander.propTypes = {\n  /**\n   * Contents of container\n   */\n  children: PropTypes.node,\n  /**\n   * Function to trigger panel to open and close\n   */\n  onClick: PropTypes.func,\n  /**\n   * State, if true, will cause panel to open. If false, the panel is closed.\n   */\n  sectionOpen: PropTypes.bool,\n  /**\n   * Shelf below drawer that fills the space left by the toggle button.\n   * Can be used to add things like additional toggles, other buttons,\n   * stats, etc.\n   */\n  options: PropTypes.node,\n  /**\n   * The label that appears on the toggle tab.\n   */\n  toggleLabel: PropTypes.node,\n  /**\n   * The color of the background section and toggle.\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,OAAO,QACR;CACD,WAAW;EACT,UAAU,UAAW,MAAM,OAAO,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAK;EACxE,eAAe,MAAM,QAAQ,EAAE;EAC/B,cAAc,MAAM,QAAQ,EAAE;EAC9B,aAAa,UACX,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACvD;CACD,kBAAkB,EAChB,SAAS,GACV;CACD,YAAY;EACV,SAAS;EACT,YAAY,UACV,aAAa,MAAM,QAAQ,MAAM,QAAQ,MAAM,QAAQ,UAAU;EACpE;CACD,mBAAmB,EACjB,SAAS,QACV;CACD,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,UAAU,SAAS,aAAa,OAAO,YAAY;CAE3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,MAAM,6BAA6B;AACjC,oBAAkB,CAAC,eAAe;;CAGpC,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,YAAS,IAAI,kBACZ,oCAAC,SAAI,WAAW,UAAU,QAAQ,mBAAmB,QAAQ,aAC1D,KACA,UAAU,IACP,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,oBAAoB,QAAQ,cAC5D,oCAAC,SAAI,WAAW,QAAQ,gBAAe,QAAc,EACrD,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,MAAM;EACO;EACb,OAAO,QAAQ,QAAQ,MAAM,QAAQ,UAAU;EACtC;GACT,CACE,CACF,CACF;;AAGV,eAAe,YAAY;CAIzB,UAAU,UAAU;CAIpB,SAAS,UAAU;CAInB,aAAa,UAAU;CAMvB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}

package/dist/IconButtonWithToolTip-BL60Lfj0.js

@@ -0,0 +1,28 @@
+import { t as FluentIcon } from "./FluentIcon-DjE8A5DC.js";
+import React from "react";
+import { IconButton, Tooltip, makeStyles } from "@material-ui/core";
+
+//#region src/UI/inputs/buttons/IconButtonWithToolTip.jsx
+const useStyles = 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();
+	return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(IconButton, {
+		id,
+		udprecordid,
+		className: `${className} ${classes.root}`,
+		...other,
+		...adjustedButtonProps
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		className: fluentIconClassName,
+		component: icon
+	})));
+};
+
+//#endregion
+export { IconButtonWithTooltip as t };
+//# sourceMappingURL=IconButtonWithToolTip-BL60Lfj0.js.map

package/dist/IconButtonWithToolTip-BL60Lfj0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonWithToolTip-BL60Lfj0.js","names":[],"sources":["../src/UI/inputs/buttons/IconButtonWithToolTip.jsx"],"sourcesContent":["import React from 'react';\nimport { IconButton, Tooltip, makeStyles } from '@material-ui/core';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\n\nconst useStyles = makeStyles(() => ({\n  // Enables pointer events on disabled elements\n  root: {\n    '&.Mui-disabled': {\n      pointerEvents: 'auto'\n    }\n  }\n}));\n\n// IconButtonWithTooltip allows you to set a tooltip on a disabled IconButton without ruining ButtonGroup layout\nexport const IconButtonWithTooltip = ({\n  icon,\n  title,\n  disabled,\n  onClick,\n  className,\n  fluentIconClassName,\n  id,\n  udprecordid,\n  ...other\n}) => {\n  const adjustedButtonProps = {\n    disabled: disabled,\n    component: disabled ? 'div' : undefined,\n    onClick: disabled ? undefined : onClick\n  };\n\n  const classes = useStyles();\n\n  return (\n    <Tooltip title={title}>\n      <IconButton\n        id={id}\n        udprecordid={udprecordid}\n        className={`${className} ${classes.root}`}\n        {...other}\n        {...adjustedButtonProps}\n      >\n        <FluentIcon className={fluentIconClassName} component={icon} />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;AAIA,MAAM,YAAY,kBAAkB,EAElC,MAAM,EACJ,kBAAkB,EAChB,eAAe,QAChB,EACF,EACF,EAAE;AAGH,MAAa,yBAAyB,EACpC,MACA,OACA,UACA,SACA,WACA,qBACA,IACA,YACA,GAAG,YACC;CACJ,MAAM,sBAAsB;EAChB;EACV,WAAW,WAAW,QAAQ;EAC9B,SAAS,WAAW,SAAY;EACjC;CAED,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,WAAe,SACd,oCAAC;EACK;EACS;EACb,WAAW,GAAG,UAAU,GAAG,QAAQ;EACnC,GAAI;EACJ,GAAI;IAEJ,oCAAC;EAAW,WAAW;EAAqB,WAAW;GAAQ,CACpD,CACL"}