udp-react-enterprise-component-library 25.18.1-beta.2 → 25.18.1-beta.21

package/dist/GraphCard-BZz_K3-z.js

@@ -1,75 +0,0 @@
-import { t as AmbientCard } from "./AmbientCard-blAjLcmr.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-8tzDAwMl.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-BZz_K3-z.js.map

package/dist/GraphCard-BZz_K3-z.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GraphCard-BZz_K3-z.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-BJKUiNX5.js

@@ -1,17 +0,0 @@
-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-BJKUiNX5.js.map

package/dist/Grid-BJKUiNX5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid-BJKUiNX5.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/GridGroupingSidebar-YNa0__cR.js

@@ -1,142 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/HeaderExpander-ubASH9Tk.js

@@ -1,53 +0,0 @@
-import { t as ExtenderToggle } from "./ExtenderToggle-h0uJXXsa.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-ubASH9Tk.js.map

package/dist/HeaderExpander-ubASH9Tk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderExpander-ubASH9Tk.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

@@ -1,28 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

package/dist/IconLibrary-BWWmix1m.js

@@ -1,180 +0,0 @@
-import { t as FluentIcon } from "./FluentIcon-DjE8A5DC.js";
-import { n as UnityIcon } from "./UnityFluentIcon-DkZ-zXku.js";
-import { n as unityIcons } from "./UnityIconLibrary-CjIwzfjv.js";
-import { t as fluentLibraryIcons } from "./LibraryData-D8Uai7Yd.js";
-import { t as FluentIconKey_default } from "./FluentIconKey-F8M8xSuz.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 as t };
-//# sourceMappingURL=IconLibrary-BWWmix1m.js.map

package/dist/IconLibrary-BWWmix1m.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconLibrary-BWWmix1m.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-BB7NMX-b.js

@@ -1,43 +0,0 @@
-import { t as UnityFluentIcon } from "./UnityFluentIcon-DkZ-zXku.js";
-import { S as getIconFromName } from "./TreeUtilities-BnHT4nq0.js";
-import { t as getUnityIconFromName } from "./UnityIconLibrary-CjIwzfjv.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 as t };
-//# sourceMappingURL=IconRenderer-BB7NMX-b.js.map

package/dist/IconRenderer-BB7NMX-b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconRenderer-BB7NMX-b.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"}