udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.1

package/dist/GridFunctions-Dx91xe8e.js

@@ -0,0 +1,150 @@
+import { GridStateTypeEnums } from "./unitySystemEnums-DXk8yS3v.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 { clearGridState, deleteGridState, getGridState, onFirstDataRendered, saveGridState, useExport, useGridClear, useGridFormat, useQuickFilter };
+//# sourceMappingURL=GridFunctions-Dx91xe8e.js.map

package/dist/GridFunctions-Dx91xe8e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridFunctions-Dx91xe8e.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/GridRow-Bu4ZB7BW.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 { GridRow, GridUnit, getRatio };
+//# sourceMappingURL=GridRow-Bu4ZB7BW.js.map

package/dist/GridRow-Bu4ZB7BW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRow-Bu4ZB7BW.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-C1Y28U4c.js

@@ -0,0 +1,39 @@
+import { NodeGroupTypeEnums } from "./unitySystemEnums-DXk8yS3v.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 };
+//# sourceMappingURL=GroupNode-C1Y28U4c.js.map

package/dist/GroupNode-C1Y28U4c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupNode-C1Y28U4c.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-Ai4mICeo.js

@@ -0,0 +1,53 @@
+import { ExtenderToggle } from "./ExtenderToggle-C16vjdkn.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 };
+//# sourceMappingURL=HeaderExpander-Ai4mICeo.js.map

package/dist/HeaderExpander-Ai4mICeo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderExpander-Ai4mICeo.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/HintPanel-DkMCmuP2.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+
+//#region src/UI/dataDisplay/HintPanel.jsx
+const useStyles = 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 classes = useStyles(useTheme());
+	const [showHint, setShowHint] = useState(true);
+	const handleHideHint = () => {
+		setShowHint(false);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.hintContainer }, showHint && /* @__PURE__ */ React.createElement("div", { className: classes.hintContent }, /* @__PURE__ */ React.createElement("div", null, hint), /* @__PURE__ */ React.createElement("div", { className: classes.hidehelp }, /* @__PURE__ */ React.createElement("button", {
+		className: classes.hideHintButton,
+		onClick: handleHideHint
+	}, hideHintText))));
+};
+HintPanel.propTypes = {
+	hint: PropTypes.string.isRequired,
+	hideHintText: PropTypes.string.isRequired
+};
+
+//#endregion
+export { HintPanel };
+//# sourceMappingURL=HintPanel-DkMCmuP2.js.map

package/dist/HintPanel-DkMCmuP2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HintPanel-DkMCmuP2.js","names":[],"sources":["../src/UI/dataDisplay/HintPanel.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  hintContainer: {\n    borderLeft: `3px solid ${theme.palette.primary.main}`\n  },\n  hintContent: {\n    backgroundColor: '#F3F9FE',\n    padding: `1rem`\n  },\n  hideHintButton: {\n    border: 'none',\n    background: 'none',\n    cursor: 'pointer',\n    color: '#0B79D0',\n    textDecoration: 'none'\n  },\n  hidehelp: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-end',\n    width: '100%'\n  }\n}));\n\nexport const HintPanel = ({ hint, hideHintText }) => {\n  const theme = useTheme();\n  const classes = useStyles(theme);\n  const [showHint, setShowHint] = useState(true);\n\n  const handleHideHint = () => {\n    setShowHint(false);\n  };\n\n  return (\n    <div className={classes.hintContainer}>\n      {showHint && (\n        <div className={classes.hintContent}>\n          <div>{hint}</div>\n          <div className={classes.hidehelp}>\n            <button className={classes.hideHintButton} onClick={handleHideHint}>\n              {hideHintText}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nHintPanel.propTypes = {\n  hint: PropTypes.string.isRequired, // Hint content to be displayed\n  hideHintText: PropTypes.string.isRequired // Text for the hide hint button\n};\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW;CACvC,eAAe,EACb,YAAY,aAAa,MAAM,QAAQ,QAAQ,QAChD;CACD,aAAa;EACX,iBAAiB;EACjB,SAAS;EACV;CACD,gBAAgB;EACd,QAAQ;EACR,YAAY;EACZ,QAAQ;EACR,OAAO;EACP,gBAAgB;EACjB;CACD,UAAU;EACR,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACR;CACF,EAAE;AAEH,MAAa,aAAa,EAAE,MAAM,mBAAmB;CAEnD,MAAM,UAAU,UADF,UAAU,CACQ;CAChC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,MAAM,uBAAuB;AAC3B,cAAY,MAAM;;AAGpB,QACE,oCAAC,SAAI,WAAW,QAAQ,iBACrB,YACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC,aAAK,KAAW,EACjB,oCAAC,SAAI,WAAW,QAAQ,YACtB,oCAAC;EAAO,WAAW,QAAQ;EAAgB,SAAS;IACjD,aACM,CACL,CACF,CAEJ;;AAIV,UAAU,YAAY;CACpB,MAAM,UAAU,OAAO;CACvB,cAAc,UAAU,OAAO;CAChC"}

package/dist/IconLibrary-CPErCan6.js

@@ -0,0 +1,180 @@
+import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
+import { UnityIcon } from "./UnityFluentIcon-fuqAQh0C.js";
+import { unityIcons } from "./UnityIconLibrary-DnCuEr5M.js";
+import { fluentLibraryIcons } from "./LibraryData-BtirxoE9.js";
+import { FluentIconKey_default } from "./FluentIconKey-DdoCGnzt.js";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Divider, Fade, InputAdornment, Paper, TextField, Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { SearchIcon } from "@fluentui/react-icons";
+import { debounce } from "lodash";
+import InfiniteScroll from "react-infinite-scroll-component";
+
+//#region src/utilities/iconLibrary/SelectedLibraryItem.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: { width: 320 },
+	item: {
+		width: 180,
+		height: 180
+	},
+	container: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	button: { marginTop: theme.spacing(2) },
+	images: {
+		height: theme.spacing(100),
+		width: theme.spacing(100)
+	},
+	divider: { marginBottom: theme.spacing(2) }
+}));
+const SelectedLibraryItem = (props) => {
+	const classes = useStyles$1();
+	const { addItem, item, title } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "overline" }, title)), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Paper, {
+		variant: "outlined",
+		className: clsx(classes.item, classes.container)
+	}, item.type === "unity" ? /* @__PURE__ */ React.createElement(UnityIcon, {
+		component: item.icon,
+		size: "showcase"
+	}) : /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: item.icon,
+		size: "showcase"
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, null, item.label)), /* @__PURE__ */ React.createElement("div", { className: classes.button }, /* @__PURE__ */ React.createElement(Button, {
+		variant: "outlined",
+		onClick: () => addItem(item),
+		style: { textTransform: "none" }
+	}, title))))));
+};
+var SelectedLibraryItem_default = SelectedLibraryItem;
+
+//#endregion
+//#region src/utilities/iconLibrary/IconLibrary.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row",
+		paddingLeft: theme.spacing(2),
+		paddingRight: theme.spacing(2),
+		height: 400
+	},
+	divider: {
+		marginLeft: theme.spacing(2),
+		marginRight: theme.spacing(2),
+		height: 400
+	},
+	selection: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	search: {
+		marginLeft: theme.spacing(2),
+		width: 312
+	},
+	iconsContainer: {
+		minWidth: "76%",
+		overflow: "auto"
+	},
+	input: { height: 34 },
+	formTextInput: { fontSize: 13 },
+	labelRoot: { fontSize: 13 }
+}));
+const IconLibrary = (props) => {
+	const { addItem, title, selectedIconName } = props;
+	const classes = useStyles();
+	const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);
+	const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);
+	const [icons, setIcons] = useState([]);
+	const [hasMoreToScroll, setHasMoreToScroll] = useState(true);
+	const [searchValue, setSearchValue] = useState("");
+	const selectItem = useCallback((item) => {
+		setSelectedIcon(item);
+	}, []);
+	const combinedLibraryIcons = useMemo(() => {
+		return fluentLibraryIcons.concat(unityIcons);
+	}, []);
+	const iconListObj = useMemo(() => {
+		return combinedLibraryIcons.reduce((iconList, item) => {
+			const iconObj = {
+				id: item.id,
+				label: item.label,
+				icon: /* @__PURE__ */ React.createElement(FluentIconKey_default, {
+					key: item.id,
+					icon: item.icon,
+					tooltip: item.label,
+					select: () => selectItem(item),
+					iconType: item.type
+				})
+			};
+			iconList.push(iconObj);
+			return iconList;
+		}, []);
+	}, [combinedLibraryIcons, selectItem]);
+	const getSearchableIcons = useCallback((value) => {
+		let icons$1 = [];
+		if (!value) icons$1 = iconListObj.map((item) => item.icon);
+		else icons$1 = iconListObj.filter((item) => item.label.toLowerCase().includes(value)).map((item) => item.icon);
+		setFilteredFluentIcons(icons$1);
+	}, [iconListObj]);
+	const handleFluentIconSearch = useCallback((event) => {
+		const value = event.target.value;
+		setSearchValue(value);
+		debounce((value$1) => {
+			getSearchableIcons(value$1);
+		}, 200)(value);
+	}, [getSearchableIcons]);
+	const fetchMoreIcons = useCallback(() => {
+		if (filteredFluentIcons.length <= icons.length) {
+			setHasMoreToScroll(false);
+			return;
+		}
+		setIcons([...icons].concat(filteredFluentIcons.slice(icons.length, icons.length + 30)));
+	}, [icons, filteredFluentIcons]);
+	useEffect(() => {
+		setIcons(filteredFluentIcons.slice(0, 150));
+		setHasMoreToScroll(filteredFluentIcons.length > 150);
+	}, [filteredFluentIcons]);
+	useEffect(() => {
+		getSearchableIcons();
+	}, [getSearchableIcons]);
+	useEffect(() => {
+		setSelectedIcon(combinedLibraryIcons.find((icon) => icon.id === selectedIconName));
+	}, [combinedLibraryIcons, selectedIconName]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TextField, {
+		className: classes.search,
+		id: "search",
+		placeholder: "Search icons",
+		variant: "outlined",
+		margin: "normal",
+		size: "small",
+		value: searchValue,
+		onChange: handleFluentIconSearch,
+		InputProps: {
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(FluentIcon, { component: SearchIcon })),
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput
+			}
+		},
+		InputLabelProps: { classes: { root: classes.labelRoot } }
+	}), /* @__PURE__ */ React.createElement(InfiniteScroll, {
+		dataLength: icons.length,
+		next: fetchMoreIcons,
+		hasMore: hasMoreToScroll,
+		scrollableTarget: "scrollableDiv"
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", {
+		className: classes.iconsContainer,
+		id: "scrollableDiv"
+	}, icons), selectedIcon && /* @__PURE__ */ React.createElement("div", { className: classes.selection }, /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), selectedIcon && /* @__PURE__ */ React.createElement(Fade, { in: selectedIcon }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SelectedLibraryItem_default, {
+		addItem,
+		item: selectedIcon,
+		title
+	})))))));
+};
+var IconLibrary_default = memo(IconLibrary);
+
+//#endregion
+export { IconLibrary_default };
+//# sourceMappingURL=IconLibrary-CPErCan6.js.map

package/dist/IconLibrary-CPErCan6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLibrary-CPErCan6.js","names":["useStyles","FluentIconKey","icons","value","SelectedLibraryItem"],"sources":["../src/utilities/iconLibrary/SelectedLibraryItem.jsx","../src/utilities/iconLibrary/IconLibrary.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Paper, Typography } from '@material-ui/core';\nimport { Header } from '../../stories/Header.jsx';\nimport { FluentIcon } from './FluentIcon.jsx';\nimport clsx from 'clsx';\nimport { UnityIcon } from './UnityIcon';\nimport { Divider } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 320,\n  },\n  item: {\n    width: 180,\n    height: 180,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  button: {\n    marginTop: theme.spacing(2),\n  },\n  images: {\n    height: theme.spacing(100),\n    width: theme.spacing(100),\n  },\n  divider: {\n    marginBottom: theme.spacing(2),\n  },\n}));\n\nconst SelectedLibraryItem = props => {\n  const classes = useStyles();\n  const { addItem, item, title } = props;\n  return (\n    <div className={classes.root}>\n      <div>\n        <Typography variant=\"overline\">{title}</Typography>\n      </div>\n      <div className={classes.divider}>\n        <Divider />\n      </div>\n      <div className={classes.container}>\n        <div>\n          <Paper\n            variant=\"outlined\"\n            className={clsx(classes.item, classes.container)}\n          >\n            {item.type === 'unity' ? (\n              <UnityIcon component={item.icon} size=\"showcase\" />\n            ) : (\n              <FluentIcon component={item.icon} size=\"showcase\" />\n            )}\n          </Paper>\n          <div className={classes.container}>\n            <div>\n              <Typography>{item.label}</Typography>\n            </div>\n            <div className={classes.button}>\n              <Button\n                variant=\"outlined\"\n                onClick={() => addItem(item)}\n                style={{ textTransform: 'none' }}\n              >\n                {title}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SelectedLibraryItem;\n","import React, { useState, useCallback, useEffect, useMemo, memo } from 'react';\nimport {\n  makeStyles,\n  Divider,\n  Fade,\n  TextField,\n  InputAdornment,\n} from '@material-ui/core';\nimport { fluentLibraryIcons } from '../../assets/unityIcons/LibraryData';\nimport FluentIconKey  from '../../UI/dataDisplay/map/FluentIconKey';\nimport SelectedLibraryItem from './SelectedLibraryItem';\nimport { FluentIcon } from './FluentIcon';\nimport { SearchIcon } from '@fluentui/react-icons';\nimport { unityIcons } from './UnityIconLibrary';\nimport { debounce } from 'lodash';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    height: 400,\n  },\n  divider: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    height: 400,\n  },\n  selection: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  search: {\n    marginLeft: theme.spacing(2),\n    width: 312,\n  },\n  iconsContainer: {\n    minWidth: '76%',\n    overflow: 'auto',\n  },\n  input: {\n    height: 34,\n  },\n  formTextInput: {\n    fontSize: 13,\n  },\n  labelRoot: {\n    fontSize: 13,\n  },\n}));\n\nconst IconLibrary = props => {\n  const { addItem, title, selectedIconName } = props;\n  const classes = useStyles();\n  const [selectedIcon, setSelectedIcon] = useState(fluentLibraryIcons[0]);\n  const [filteredFluentIcons, setFilteredFluentIcons] = useState([]);\n  const [icons, setIcons] = useState([]);\n  const [hasMoreToScroll, setHasMoreToScroll] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n\n  const selectItem = useCallback(item => {\n    setSelectedIcon(item);\n  }, []);\n\n  const combinedLibraryIcons = useMemo(() => {\n    return fluentLibraryIcons.concat(unityIcons);\n  }, []);\n\n  const iconListObj = useMemo(() => {\n    return combinedLibraryIcons.reduce((iconList, item) => {\n      const iconObj = {\n        id: item.id,\n        label: item.label,\n        icon: (\n          <FluentIconKey\n            key={item.id}\n            icon={item.icon}\n            tooltip={item.label}\n            select={() => selectItem(item)}\n            iconType={item.type}\n          />\n        ),\n      };\n      iconList.push(iconObj);\n      return iconList;\n    }, []);\n  }, [combinedLibraryIcons, selectItem]);\n\n  const getSearchableIcons = useCallback(\n    value => {\n      let icons = [];\n      if (!value) {\n        icons = iconListObj.map(item => item.icon);\n      } else {\n        icons = iconListObj\n          .filter(item => item.label.toLowerCase().includes(value))\n          .map(item => item.icon);\n      }\n      setFilteredFluentIcons(icons);\n    },\n    [iconListObj]\n  );\n\n  const handleFluentIconSearch = useCallback(\n    event => {\n      const value = event.target.value;\n      setSearchValue(value);\n      const debounceSearch = debounce(value => {\n        getSearchableIcons(value);\n      }, 200);\n\n      debounceSearch(value);\n    },\n    [getSearchableIcons]\n  );\n\n  const fetchMoreIcons = useCallback(() => {\n    if (filteredFluentIcons.length <= icons.length) {\n      setHasMoreToScroll(false);\n      return;\n    }\n    const updatedIcons = [...icons];\n    setIcons(\n      updatedIcons.concat(\n        filteredFluentIcons.slice(icons.length, icons.length + 30)\n      )\n    );\n  }, [icons, filteredFluentIcons]);\n\n  useEffect(() => {\n    setIcons(filteredFluentIcons.slice(0, 150));\n    setHasMoreToScroll(filteredFluentIcons.length > 150);\n  }, [filteredFluentIcons]);\n\n  useEffect(() => {\n    getSearchableIcons();\n  }, [getSearchableIcons]);\n\n  useEffect(() => {\n    const initialIcon = combinedLibraryIcons.find(\n      icon => icon.id === selectedIconName\n    );\n    setSelectedIcon(initialIcon);\n  }, [combinedLibraryIcons, selectedIconName]);\n\n  return (\n    <>\n      <TextField\n        className={classes.search}\n        id=\"search\"\n        placeholder=\"Search icons\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        size=\"small\"\n        value={searchValue}\n        onChange={handleFluentIconSearch}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <FluentIcon component={SearchIcon} />\n            </InputAdornment>\n          ),\n          classes: {\n            root: classes.input,\n            input: classes.formTextInput,\n          },\n        }}\n        InputLabelProps={{\n          classes: {\n            root: classes.labelRoot,\n          },\n        }}\n      />\n      <InfiniteScroll\n        dataLength={icons.length}\n        next={fetchMoreIcons}\n        hasMore={hasMoreToScroll}\n        scrollableTarget=\"scrollableDiv\"\n      >\n        <div className={classes.root}>\n          <div className={classes.iconsContainer} id=\"scrollableDiv\">\n            {icons}\n          </div>\n          {selectedIcon && (\n            <div className={classes.selection}>\n              <div className={classes.divider}>\n                <Divider orientation=\"vertical\" />\n              </div>\n              {selectedIcon && (\n                <Fade in={selectedIcon}>\n                  <div>\n                    <SelectedLibraryItem\n                      addItem={addItem}\n                      item={selectedIcon}\n                      title={title}\n                    />\n                  </div>\n                </Fade>\n              )}\n            </div>\n          )}\n        </div>\n      </InfiniteScroll>\n    </>\n  );\n};\n\nexport default memo(IconLibrary);\n"],"mappings":"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"}

package/dist/IconRenderer-BbcxG30f.js

@@ -0,0 +1,43 @@
+import { UnityFluentIcon } from "./UnityFluentIcon-fuqAQh0C.js";
+import { getIconFromName } from "./TreeUtilities-BxV5PMJ8.js";
+import { getUnityIconFromName } from "./UnityIconLibrary-DnCuEr5M.js";
+import React from "react";
+import { darken, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/UI/templates/ui/renderers/IconRenderer.jsx
+const useStyles = makeStyles((theme) => ({
+	iconContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 50,
+		marginTop: theme.spacing(.5),
+		marginBottom: theme.spacing(.5),
+		marginRight: (props) => !props?.removeMargin && theme.spacing(1),
+		width: theme.spacing(4),
+		height: theme.spacing(4),
+		backgroundColor: "#ffffff"
+	},
+	border: { border: (props) => props?.color?.hex ? `1px solid ${darken(props?.color?.hex, .1)}` : `1px solid ${theme.palette.secondary.main}` }
+}));
+/**
+* IconRenderer
+*/
+const IconRenderer = (props) => {
+	const { value, noBorder, removeContainer } = props;
+	const { color, name, type } = value;
+	const classes = useStyles(value);
+	const theme = useTheme(props);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(!removeContainer && classes.iconContainer, !noBorder && classes.border) }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: "medium",
+		color: color?.hex || theme.palette.secondary.main,
+		type,
+		icon: type === "unity" ? getUnityIconFromName(name) : getIconFromName(name),
+		style: { color: color?.hex ? darken(color?.hex, .1) : theme.palette.secondary.main }
+	}));
+};
+
+//#endregion
+export { IconRenderer };
+//# sourceMappingURL=IconRenderer-BbcxG30f.js.map

package/dist/IconRenderer-BbcxG30f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconRenderer-BbcxG30f.js","names":[],"sources":["../src/UI/templates/ui/renderers/IconRenderer.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, useTheme, darken } from '@material-ui/core';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getUnityIconFromName } from '../../../../utilities/iconLibrary/UnityIconLibrary';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 50,\n    marginTop: theme.spacing(0.5),\n    marginBottom: theme.spacing(0.5),\n    marginRight: (props) => !props?.removeMargin && theme.spacing(1),\n    width: theme.spacing(4),\n    height: theme.spacing(4),\n    backgroundColor: '#ffffff'\n  },\n  border: {\n    border: (props) =>\n      props?.color?.hex\n        ? `1px solid ${darken(props?.color?.hex, 0.1)}`\n        : `1px solid ${theme.palette.secondary.main}`\n  }\n}));\n\n/**\n * IconRenderer\n */\nexport const IconRenderer = (props) => {\n  const { value, noBorder, removeContainer } = props;\n  const { color, name, type } = value;\n\n  const classes = useStyles(value);\n  const theme = useTheme(props);\n\n  return (\n    <div\n      className={clsx(\n        !removeContainer && classes.iconContainer,\n        !noBorder && classes.border\n      )}\n    >\n      <UnityFluentIcon\n        size='medium'\n        color={color?.hex || theme.palette.secondary.main}\n        type={type}\n        icon={\n          type === 'unity' ? getUnityIconFromName(name) : getIconFromName(name)\n        }\n        style={{\n          color: color?.hex\n            ? darken(color?.hex, 0.1)\n            : theme.palette.secondary.main\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,YAAY,YAAY,WAAW;CACvC,eAAe;EACb,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,cAAc;EACd,WAAW,MAAM,QAAQ,GAAI;EAC7B,cAAc,MAAM,QAAQ,GAAI;EAChC,cAAc,UAAU,CAAC,OAAO,gBAAgB,MAAM,QAAQ,EAAE;EAChE,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,EAAE;EACxB,iBAAiB;EAClB;CACD,QAAQ,EACN,SAAS,UACP,OAAO,OAAO,MACV,aAAa,OAAO,OAAO,OAAO,KAAK,GAAI,KAC3C,aAAa,MAAM,QAAQ,UAAU,QAC5C;CACF,EAAE;;;;AAKH,MAAa,gBAAgB,UAAU;CACrC,MAAM,EAAE,OAAO,UAAU,oBAAoB;CAC7C,MAAM,EAAE,OAAO,MAAM,SAAS;CAE9B,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,QAAQ,SAAS,MAAM;AAE7B,QACE,oCAAC,SACC,WAAW,KACT,CAAC,mBAAmB,QAAQ,eAC5B,CAAC,YAAY,QAAQ,OACtB,IAED,oCAAC;EACC,MAAK;EACL,OAAO,OAAO,OAAO,MAAM,QAAQ,UAAU;EACvC;EACN,MACE,SAAS,UAAU,qBAAqB,KAAK,GAAG,gBAAgB,KAAK;EAEvE,OAAO,EACL,OAAO,OAAO,MACV,OAAO,OAAO,KAAK,GAAI,GACvB,MAAM,QAAQ,UAAU,MAC7B;GACD,CACE"}