udp-react-enterprise-component-library 25.18.1-beta.3 → 25.18.1-beta.30

package/dist/TicketCard-DQGB9AgD.js

@@ -0,0 +1,143 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import React from "react";
+import { Card, CardContent, Divider, Typography, makeStyles } from "@material-ui/core";
+import { ArrowUpRightIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/dataDisplay/ticketCard/NotificationElement.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		width: 0,
+		height: 0,
+		borderTop: "0px solid transparent",
+		borderRight: `45px solid ${theme?.palette?.error?.main}`,
+		borderBottom: "45px solid transparent"
+	},
+	number: {
+		marginLeft: theme.spacing(3.5),
+		paddingTop: theme.spacing(.5),
+		color: theme?.palette?.common?.white
+	}
+}));
+const NotificationElement = ({ alertNumber }) => {
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.number }, /* @__PURE__ */ React.createElement(Typography, null, " ", alertNumber, " ")));
+};
+NotificationElement.propTypes = { alertNumber: PropTypes.number.isRequired };
+
+//#endregion
+//#region src/UI/dataDisplay/ticketCard/StatusLineItem.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		width: "100%",
+		height: 44
+	},
+	wrapper: { display: "flex" },
+	labelCount: {
+		flex: 1,
+		display: "flex"
+	},
+	status: { marginRight: theme.spacing(1) },
+	icon: { marginRight: theme.spacing(1) }
+}));
+const StatusLineItem = ({ label, amount, status, icon, handleClick }) => {
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.labelCount }, /* @__PURE__ */ React.createElement("div", { className: classes.icon }, " ", icon, " "), /* @__PURE__ */ React.createElement(Typography, null, " ", label, " ")), /* @__PURE__ */ React.createElement("div", { className: classes.status }, status === "error" && /* @__PURE__ */ React.createElement(StatusChip, {
+		label: amount,
+		status
+	}), status !== "error" && amount), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: handleClick,
+		className: classes.launch,
+		icon: ArrowUpRightIcon,
+		"aria-label": "launch"
+	})), /* @__PURE__ */ React.createElement(Divider, null));
+};
+StatusLineItem.propTypes = {
+	label: PropTypes.string.isRequired,
+	amount: PropTypes.number,
+	status: PropTypes.string,
+	icon: PropTypes.node,
+	handleClick: PropTypes.func
+};
+
+//#endregion
+//#region src/UI/dataDisplay/ticketCard/TicketCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { display: "flex" },
+	overviewContainer: {
+		width: theme.spacing(16),
+		height: theme.spacing(16),
+		background: "#393939",
+		marginRight: theme.spacing(2),
+		position: "relative"
+	},
+	notification: {
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	totalNumber: {
+		textAlign: "center",
+		color: "#FFFFFF",
+		fontWeight: 400
+	},
+	label: {
+		display: "flex",
+		justifyContent: "center",
+		marginTop: -8,
+		color: "#FFFFFF"
+	},
+	itemContainer: {
+		width: "100%",
+		display: "flex",
+		flexDirection: "column",
+		alignContent: "space-around",
+		marginTop: theme.spacing(.5)
+	}
+}));
+const TicketCard = ({ totalAmount, label, notification, alertNumber, ticketData, component = "h6" }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		elevation: 0,
+		square: true,
+		className: classes.overviewContainer
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h1",
+		component,
+		className: classes.totalNumber
+	}, totalAmount)), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, label, " ")), notification && /* @__PURE__ */ React.createElement("div", { className: classes.notification }, /* @__PURE__ */ React.createElement(NotificationElement, { alertNumber })))), /* @__PURE__ */ React.createElement("div", { className: classes.itemContainer }, ticketData && ticketData.map((item) => {
+		return /* @__PURE__ */ React.createElement(StatusLineItem, {
+			label: item.label,
+			amount: item.amount,
+			status: item.status === "error" && "error",
+			icon: item.icon,
+			key: item.id
+		});
+	})));
+};
+TicketCard.propTypes = {
+	totalAmount: PropTypes.number,
+	label: PropTypes.string.isRequired,
+	notification: PropTypes.bool,
+	alertNumber: PropTypes.number,
+	ticketData: PropTypes.arrayOf(PropTypes.shape({
+		ticketAmount: PropTypes.string.isRequired,
+		label: PropTypes.number.isRequired,
+		notification: PropTypes.number.isRequired,
+		alertNumber: PropTypes.number,
+		id: PropTypes.number.isRequired,
+		ticketData: PropTypes.arrayOf(PropTypes.shape({
+			label: PropTypes.string.isRequired,
+			amount: PropTypes.number,
+			status: PropTypes.string.isRequired,
+			icon: PropTypes.node
+		}))
+	}).isRequired).isRequired,
+	component: PropTypes.string
+};
+TicketCard.defaultProps = { component: "h2" };
+
+//#endregion
+export { StatusLineItem as n, NotificationElement as r, TicketCard as t };
+//# sourceMappingURL=TicketCard-DQGB9AgD.js.map

package/dist/TicketCard-DQGB9AgD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TicketCard-DQGB9AgD.js","names":["useStyles","useStyles"],"sources":["../src/UI/dataDisplay/ticketCard/NotificationElement.jsx","../src/UI/dataDisplay/ticketCard/StatusLineItem.jsx","../src/UI/dataDisplay/ticketCard/TicketCard.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: 0,\n    height: 0,\n    borderTop: '0px solid transparent',\n    borderRight: `45px solid ${theme?.palette?.error?.main}`,\n    borderBottom: '45px solid transparent'\n  },\n  number: {\n    marginLeft: theme.spacing(3.5),\n    paddingTop: theme.spacing(0.5),\n    color: theme?.palette?.common?.white\n  }\n}))\n\nexport const NotificationElement = ({ alertNumber }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.number}>\n        <Typography> {alertNumber} </Typography>\n      </div>\n    </div>\n  )\n}\nNotificationElement.propTypes = {\n  /**\n   * number of alert items\n   */\n  alertNumber: PropTypes.number.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Divider, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { StatusChip } from '../status/StatusChip'\nimport { ArrowUpRightIcon } from '@fluentui/react-icons'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: 44\n  },\n  wrapper: { display: 'flex' },\n  labelCount: {\n    flex: 1,\n    display: 'flex'\n  },\n  status: {\n    marginRight: theme.spacing(1)\n  },\n  icon: {\n    marginRight: theme.spacing(1)\n  }\n}))\n\nexport const StatusLineItem = ({\n  label,\n  amount,\n  status,\n  icon,\n  handleClick\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.wrapper}>\n        <div className={classes.labelCount}>\n          <div className={classes.icon}> {icon} </div>\n          <Typography> {label} </Typography>\n        </div>\n        <div className={classes.status}>\n          {status === 'error' && <StatusChip label={amount} status={status} />}\n\n          {status !== 'error' && amount}\n        </div>\n        <FluentIconButton\n          onClick={handleClick}\n          className={classes.launch}\n          icon={ArrowUpRightIcon}\n          aria-label='launch'\n        />\n      </div>\n\n      <Divider />\n    </div>\n  )\n}\nStatusLineItem.propTypes = {\n  /**\n   * stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Total amount stat\n   */\n  amount: PropTypes.number,\n  /**\n   * Type of status for status chip\n   */\n  status: PropTypes.string,\n  /**\n   * list icon\n   */\n  icon: PropTypes.node,\n  /**\n   * onClick event\n   */\n  handleClick: PropTypes.func\n}\n","import React from 'react'\nimport { makeStyles, Card, CardContent, Typography } from '@material-ui/core'\nimport { StatusLineItem } from './StatusLineItem'\nimport { NotificationElement } from './NotificationElement'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  overviewContainer: {\n    width: theme.spacing(16),\n    height: theme.spacing(16),\n    background: '#393939', // Add to theme\n    marginRight: theme.spacing(2),\n    position: 'relative'\n  },\n  notification: {\n    position: 'absolute',\n    right: 0,\n    top: 0\n  },\n  totalNumber: {\n    textAlign: 'center',\n    // color: theme.palette.common.white\n    color: '#FFFFFF', // Hex color added to avoid TypeError\n    fontWeight: 400\n  },\n  label: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: -8,\n    // color: theme.pallette.common.white\n    color: '#FFFFFF'\n  },\n  itemContainer: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around',\n    marginTop: theme.spacing(0.5)\n  }\n}))\n\nexport const TicketCard = ({\n  totalAmount,\n  label,\n  notification,\n  alertNumber,\n  ticketData,\n  component = 'h6'\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div>\n        <Card elevation={0} square className={classes.overviewContainer}>\n          <CardContent>\n            <Typography\n              variant='h1'\n              component={component}\n              className={classes.totalNumber}\n            >\n              {totalAmount}\n            </Typography>\n          </CardContent>\n          <div className={classes.label}>\n            <Typography variant='caption'>{label} </Typography>\n          </div>\n          {notification && (\n            <div className={classes.notification}>\n              <NotificationElement alertNumber={alertNumber} />\n            </div>\n          )}\n        </Card>\n      </div>\n\n      <div className={classes.itemContainer}>\n        {ticketData &&\n          ticketData.map((item) => {\n            return (\n              <StatusLineItem\n                label={item.label}\n                amount={item.amount}\n                status={item.status === 'error' && 'error'}\n                icon={item.icon}\n                key={item.id}\n              />\n            )\n          })}\n      </div>\n    </div>\n  )\n}\nTicketCard.propTypes = {\n  /**\n   * Total amount stat\n   */\n  totalAmount: PropTypes.number,\n  /**\n   * Stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Type of status to toggle notification\n   */\n  notification: PropTypes.bool,\n  /**\n   * amount of alert items\n   */\n  alertNumber: PropTypes.number,\n  /**\n   * prop for mapped data\n   */\n  ticketData: PropTypes.arrayOf(\n    PropTypes.shape({\n      ticketAmount: PropTypes.string.isRequired,\n      label: PropTypes.number.isRequired,\n      notification: PropTypes.number.isRequired,\n      alertNumber: PropTypes.number,\n      id: PropTypes.number.isRequired,\n      ticketData: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string.isRequired,\n          amount: PropTypes.number,\n          status: PropTypes.string.isRequired,\n          icon: PropTypes.node\n        })\n      )\n    }).isRequired\n  ).isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string\n}\n\nTicketCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":"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"}

package/dist/TileDisplay-DqMdnf8Z.js

@@ -0,0 +1,224 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as FluentInputSlider_default } from "./FluentInputSlider-CafllsfS.js";
+import React from "react";
+import { Card, CardContent, Chip, Divider, Paper, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { AlertSolidIcon, BoxMultiplySolidIcon, ChevronLeftIcon, ChevronRightIcon, HomeIcon, MapPinIcon, ZoomIcon, ZoomInIcon, ZoomOutIcon, ZoomToFitIcon } from "@fluentui/react-icons";
+
+//#region src/map-library/ui/ControlZoom.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const ControlZoom = (props) => {
+	const { zoomIn, zoomOut, value, handleSliderChange, handleInputChange, handleBlur, reset } = props;
+	const classes = useStyles$4();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: zoomIn,
+		color: "primary",
+		icon: ZoomInIcon
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: zoomOut,
+		color: "primary",
+		icon: ZoomOutIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentInputSlider_default, {
+		value,
+		handleSliderChange,
+		handleInputChange,
+		handleBlur,
+		input: true,
+		icon: ZoomIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: reset,
+		color: "primary",
+		icon: ZoomToFitIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })));
+};
+var ControlZoom_default = ControlZoom;
+
+//#endregion
+//#region src/map-library/ui/FilterOptions.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const FilterOptions = (props) => {
+	const classes = useStyles$3();
+	const { showAlert, showHome, showMarker, toggleDisplayMarkers } = props;
+	const theme = useTheme();
+	const inactive = lighten(theme.palette.common.black, .8);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: AlertSolidIcon,
+		onClick: () => toggleDisplayMarkers("alert"),
+		style: { color: showAlert ? theme.palette.error.main : inactive }
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: HomeIcon,
+		onClick: () => toggleDisplayMarkers("home"),
+		style: { color: showHome ? theme.palette.success.main : inactive }
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: BoxMultiplySolidIcon,
+		onClick: () => toggleDisplayMarkers("mark"),
+		style: { color: showMarker ? theme.palette.success.main : inactive }
+	}));
+};
+var FilterOptions_default = FilterOptions;
+
+//#endregion
+//#region src/map-library/ui/MapFilterBar.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	filter: {
+		display: "flex",
+		flex: 1
+	},
+	divider: {
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const MapFilterBar = (props) => {
+	const classes = useStyles$2();
+	const { showAlert, toggleDisplayMarkers, value, setZoom, handleSliderChange, handleInputChange, handleBlur, zoomIn, zoomOut, reset, showHome } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.filter }, /* @__PURE__ */ React.createElement(FilterOptions_default, {
+		showAlert,
+		showHome,
+		toggleDisplayMarkers
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ControlZoom_default, {
+		zoomIn,
+		zoomOut,
+		value,
+		setValue: setZoom,
+		handleSliderChange,
+		handleInputChange,
+		handleBlur,
+		reset
+	})));
+};
+
+//#endregion
+//#region src/map-library/ui/MapSheet.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		position: "absolute",
+		zIndex: 9999,
+		top: 50,
+		right: 0
+	},
+	mapPage: { overflow: "hidden" },
+	collapsed: {
+		width: 0,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.easeOut,
+			duration: theme.transitions.duration.leavingScreen
+		})
+	},
+	expanded: {
+		width: 300,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.easeIn,
+			duration: theme.transitions.duration.enteringScreen
+		})
+	},
+	wrapper: { padding: theme.spacing(2) },
+	sheetWrapper: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	toggle: {
+		padding: theme.spacing(1),
+		background: theme.palette.common.white,
+		height: theme.spacing(6)
+	}
+}));
+const MapSheet = (props) => {
+	const classes = useStyles$1();
+	const { children, collapsed, toggle } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, collapsed ? classes.collapsed : classes.expanded) }, /* @__PURE__ */ React.createElement("div", { className: classes.sheetWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.extendedButton,
+		onClick: toggle,
+		color: "primary",
+		icon: collapsed ? ChevronLeftIcon : ChevronRightIcon
+	})), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Paper, { square: true }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, children)))));
+};
+
+//#endregion
+//#region src/map-library/ui/TileDisplay.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	title: { fontWeight: 700 },
+	titleWrapper: { marginBottom: theme.spacing(1) },
+	divider: {},
+	body: { color: lighten(theme.palette.common.black, .5) },
+	actions: {
+		marginTop: theme.spacing(1),
+		display: "flex",
+		flexDirection: "row"
+	},
+	qty: { marginLeft: theme.spacing(1) }
+}));
+const TileDisplay = (props) => {
+	const { title, body, selected } = props;
+	const classes = useStyles();
+	const qty = Math.floor(Math.random() * 10) + 1;
+	const theme = useTheme();
+	const Indicator = () => {
+		return /* @__PURE__ */ React.createElement("svg", {
+			width: "15",
+			height: "10"
+		}, /* @__PURE__ */ React.createElement("circle", {
+			cx: "70%",
+			cy: "50%",
+			r: "4",
+			fill: theme.palette.success.main
+		}));
+	};
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, {
+		square: true,
+		elevation: 0,
+		className: classes.root,
+		style: { background: selected && lighten(theme.palette.secondary.main, .9) }
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.title,
+		variant: "subtitle"
+	}, title)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.body,
+		variant: "caption"
+	}, body))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		color: "primary",
+		icon: MapPinIcon
+	}))), /* @__PURE__ */ React.createElement("div", { className: classes.actions }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Chip, {
+		variant: "outlined",
+		size: "small",
+		label: "Active",
+		icon: /* @__PURE__ */ React.createElement(Indicator, null)
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.qty }, /* @__PURE__ */ React.createElement(Chip, {
+		variant: "outlined",
+		size: "small",
+		label: `Qty:${qty}`
+	}))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Divider, null)));
+};
+
+//#endregion
+export { MapSheet as n, MapFilterBar as r, TileDisplay as t };
+//# sourceMappingURL=TileDisplay-DqMdnf8Z.js.map

package/dist/TileDisplay-DqMdnf8Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileDisplay-DqMdnf8Z.js","names":["useStyles","FluentInputSlider","useStyles","useStyles","FilterOptions","ControlZoom","useStyles"],"sources":["../src/map-library/ui/ControlZoom.jsx","../src/map-library/ui/FilterOptions.jsx","../src/map-library/ui/MapFilterBar.jsx","../src/map-library/ui/MapSheet.jsx","../src/map-library/ui/TileDisplay.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Divider } from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport {\n  ZoomInIcon,\n  ZoomOutIcon,\n  ZoomToFitIcon,\n  ZoomIcon\n} from '@fluentui/react-icons'\nimport FluentInputSlider from '../../UI/inputs/sliders/FluentInputSlider'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nconst ControlZoom = (props) => {\n  const {\n    zoomIn,\n    zoomOut,\n    value,\n    handleSliderChange,\n    handleInputChange,\n    handleBlur,\n    reset\n  } = props\n  const classes = useStyles()\n  return (\n    <div className={classes.root}>\n      <div>\n        <FluentIconButton onClick={zoomIn} color='primary' icon={ZoomInIcon} />\n        <FluentIconButton\n          onClick={zoomOut}\n          color='primary'\n          icon={ZoomOutIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <FluentInputSlider\n          value={value}\n          handleSliderChange={handleSliderChange}\n          handleInputChange={handleInputChange}\n          handleBlur={handleBlur}\n          input\n          icon={ZoomIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <FluentIconButton\n          onClick={reset}\n          color='primary'\n          icon={ZoomToFitIcon}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n    </div>\n  )\n}\nexport default ControlZoom\n","import React from 'react'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport {\n  AlertSolidIcon,\n  HomeIcon,\n  BoxMultiplySolidIcon\n} from '@fluentui/react-icons'\nimport { makeStyles, useTheme, lighten } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nconst FilterOptions = (props) => {\n  const classes = useStyles()\n  const { showAlert, showHome, showMarker, toggleDisplayMarkers } = props\n  const theme = useTheme()\n\n  const inactive = lighten(theme.palette.common.black, 0.8)\n\n  return (\n    <div className={classes.root}>\n      <FluentIconButton\n        color='primary'\n        icon={AlertSolidIcon}\n        onClick={() => toggleDisplayMarkers('alert')}\n        style={{\n          color: showAlert ? theme.palette.error.main : inactive\n        }}\n      />\n      <FluentIconButton\n        color='primary'\n        icon={HomeIcon}\n        onClick={() => toggleDisplayMarkers('home')}\n        style={{ color: showHome ? theme.palette.success.main : inactive }}\n      />\n      <FluentIconButton\n        color='primary'\n        icon={BoxMultiplySolidIcon}\n        onClick={() => toggleDisplayMarkers('mark')}\n        style={{ color: showMarker ? theme.palette.success.main : inactive }}\n      />\n    </div>\n  )\n}\nexport default FilterOptions\n","import React from 'react'\nimport ControlZoom from './ControlZoom'\nimport { makeStyles, Divider } from '@material-ui/core'\nimport FilterOptions from './FilterOptions'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  filter: {\n    display: 'flex',\n    flex: 1\n  },\n  divider: {\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nexport const MapFilterBar = (props) => {\n  const classes = useStyles()\n\n  const {\n    showAlert,\n    toggleDisplayMarkers,\n    value,\n    setZoom,\n    handleSliderChange,\n    handleInputChange,\n    handleBlur,\n    zoomIn,\n    zoomOut,\n    reset,\n    showHome\n  } = props\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.filter}>\n        <FilterOptions\n          showAlert={showAlert}\n          showHome={showHome}\n          toggleDisplayMarkers={toggleDisplayMarkers}\n        />\n      </div>\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n\n      <div className={classes.divider}>\n        <Divider orientation='vertical' />\n      </div>\n      <div>\n        <ControlZoom\n          zoomIn={zoomIn}\n          zoomOut={zoomOut}\n          value={value}\n          setValue={setZoom}\n          handleSliderChange={handleSliderChange}\n          handleInputChange={handleInputChange}\n          handleBlur={handleBlur}\n          reset={reset}\n        />\n      </div>\n    </div>\n  )\n}\n","import React from 'react'\nimport { Paper, makeStyles } from '@material-ui/core'\nimport clsx from 'clsx'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'absolute',\n    zIndex: 9999,\n    top: 50,\n    right: 0\n  },\n  mapPage: {\n    overflow: 'hidden'\n  },\n  collapsed: {\n    width: 0,\n    transition: theme.transitions.create('width', {\n      easing: theme.transitions.easing.easeOut,\n      duration: theme.transitions.duration.leavingScreen\n    })\n  },\n  expanded: {\n    width: 300,\n    transition: theme.transitions.create('width', {\n      easing: theme.transitions.easing.easeIn,\n      duration: theme.transitions.duration.enteringScreen\n    })\n  },\n  wrapper: {\n    padding: theme.spacing(2)\n  },\n  sheetWrapper: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  toggle: {\n    padding: theme.spacing(1),\n    background: theme.palette.common.white,\n    height: theme.spacing(6)\n  }\n}))\n\nexport const MapSheet = (props) => {\n  const classes = useStyles()\n  const { children, collapsed, toggle } = props\n\n  return (\n    <div\n      className={clsx(\n        classes.root,\n        collapsed ? classes.collapsed : classes.expanded\n      )}\n    >\n      <div className={classes.sheetWrapper}>\n        <div className={classes.toggle}>\n          <FluentIconButton\n            className={classes.extendedButton}\n            onClick={toggle}\n            color='primary'\n            icon={collapsed ? ChevronLeftIcon : ChevronRightIcon}\n          />\n        </div>\n        <div>\n          <Paper square>\n            <div className={classes.wrapper}>{children}</div>\n          </Paper>\n        </div>\n      </div>\n    </div>\n  )\n}\n","import React from 'react'\nimport {\n  Card,\n  Chip,\n  CardContent,\n  makeStyles,\n  useTheme,\n  lighten,\n  Typography,\n  Divider\n} from '@material-ui/core'\nimport { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton'\nimport { MapPinIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  title: {\n    fontWeight: 700\n  },\n  titleWrapper: {\n    marginBottom: theme.spacing(1)\n  },\n  divider: {\n    // marginBottom: theme.spacing(2),\n  },\n  body: {\n    color: lighten(theme.palette.common.black, 0.5)\n  },\n  actions: {\n    marginTop: theme.spacing(1),\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  qty: {\n    marginLeft: theme.spacing(1)\n  }\n}))\n\nexport const TileDisplay = (props) => {\n  const { title, body, selected } = props\n  const classes = useStyles()\n  const qty = Math.floor(Math.random() * 10) + 1\n  const theme = useTheme()\n\n  const Indicator = () => {\n    return (\n      <svg width='15' height='10'>\n        <circle cx='70%' cy='50%' r='4' fill={theme.palette.success.main} />\n      </svg>\n    )\n  }\n\n  return (\n    <div>\n      <Card\n        square\n        elevation={0}\n        className={classes.root}\n        style={{\n          background: selected && lighten(theme.palette.secondary.main, 0.9)\n        }}\n      >\n        <CardContent>\n          <div className={classes.root}>\n            <div>\n              <div className={classes.titleWrapper}>\n                <Typography className={classes.title} variant='subtitle'>\n                  {title}\n                </Typography>\n              </div>\n              <div>\n                <Typography className={classes.body} variant='caption'>\n                  {body}\n                </Typography>\n              </div>\n            </div>\n            <div>\n              <FluentIconButton color='primary' icon={MapPinIcon} />\n            </div>\n          </div>\n\n          <div className={classes.actions}>\n            <div>\n              <Chip\n                variant='outlined'\n                size='small'\n                label='Active'\n                icon={<Indicator />}\n              />\n            </div>\n            <div className={classes.qty}>\n              <Chip variant='outlined' size='small' label={`Qty:${qty}`} />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n      <div>\n        <Divider />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/TimeField-CeEYEvD_.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from "react";
+import { DateTime } from "luxon";
+import { KeyboardDatePicker, KeyboardTimePicker } from "@material-ui/pickers";
+
+//#region src/UI/inputs/datetimes/DateField.jsx
+/**
+* TextField for date input
+*/
+const DateField = (props) => {
+	const { onChange: onChangeProp, value: valueProp, ...other } = props;
+	const dateFormat = "yyyy-MM-dd";
+	const isValidDate = (date) => {
+		return date instanceof Date && !isNaN(date);
+	};
+	const onChange = useCallback((value$1) => onChangeProp && onChangeProp(isValidDate(value$1) ? value$1 : void 0), [onChangeProp]);
+	const value = useMemo(() => {
+		console.log(valueProp);
+		return isValidDate(valueProp) ? DateTime.fromISO(valueProp.toISOString()) : null;
+	}, [valueProp]);
+	return /* @__PURE__ */ React.createElement(KeyboardDatePicker, {
+		format: dateFormat,
+		variant: "inline",
+		autoOk: true,
+		onChange,
+		value,
+		...other
+	});
+};
+
+//#endregion
+//#region src/UI/inputs/datetimes/TimeField.jsx
+/**
+* TextField for time input
+*/
+const TimeField = (props) => {
+	const { onChange: onChangeProp, value: valueProp, ...other } = props;
+	const timeFormatString = "HH:mm";
+	const is12hTime = true;
+	const maskChar = "_";
+	timeFormatString.split(/'([^']*)'/).map((m, i) => i % 2 === 0 ? m.replace(/[a-z]/gi, maskChar) : m).join("") + "";
+	const isValidDate = (date) => {
+		return date instanceof Date && !isNaN(date);
+	};
+	const onChange = useCallback((value$1) => onChangeProp && onChangeProp(isValidDate(value$1) ? value$1 : void 0), [onChangeProp]);
+	const value = useMemo(() => {
+		console.log(valueProp);
+		return isValidDate(valueProp) ? DateTime.fromISO(valueProp.toISOString()) : null;
+	}, [valueProp]);
+	return /* @__PURE__ */ React.createElement(KeyboardTimePicker, {
+		ampm: is12hTime,
+		mask: "__:__ _M",
+		variant: "inline",
+		autoOk: true,
+		onChange,
+		value,
+		...other
+	});
+};
+
+//#endregion
+export { DateField as n, TimeField as t };
+//# sourceMappingURL=TimeField-CeEYEvD_.js.map

package/dist/TimeField-CeEYEvD_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField-CeEYEvD_.js","names":["value","value"],"sources":["../src/UI/inputs/datetimes/DateField.jsx","../src/UI/inputs/datetimes/TimeField.jsx"],"sourcesContent":["import { DateTime } from 'luxon';\nimport React, { useCallback, useMemo } from 'react';\nimport { KeyboardDatePicker } from '@material-ui/pickers';\n// import { useIntl } from '../../../intl';\n// import { useDateFormat } from '../../utils/CompanyPreferencesProvider';\n\n/**\n * TextField for date input\n */\nexport const DateField = props => {\n  const { onChange: onChangeProp, value: valueProp, ...other } = props;\n  // TODO: implement intl, use CPS as reference\n  // const { shortDateFormatString } = useIntl();\n  const dateFormat = 'yyyy-MM-dd';\n\n  const isValidDate = date => {\n    return date instanceof Date && !isNaN(date);\n  };\n\n  const onChange = useCallback(\n    value =>\n      onChangeProp && onChangeProp(isValidDate(value) ? value : undefined),\n    [onChangeProp]\n  );\n\n  const value = useMemo(() => {\n    console.log(valueProp);\n    return isValidDate(valueProp)\n      ? DateTime.fromISO(valueProp.toISOString())\n      : null;\n  }, [valueProp]);\n\n  return (\n    <KeyboardDatePicker\n      format={dateFormat}\n      variant=\"inline\"\n      autoOk\n      onChange={onChange}\n      value={value}\n      {...other}\n    />\n  );\n};\n","import { DateTime } from 'luxon';\nimport React, { useCallback, useMemo } from 'react';\nimport { KeyboardTimePicker } from '@material-ui/pickers';\n// import { useIntl } from '../../../intl';\n\n/**\n * TextField for time input\n */\nexport const TimeField = props => {\n  const { onChange: onChangeProp, value: valueProp, ...other } = props;\n  // TODO: implement intl, use CPS as reference\n  // const { timeFormatString, is12hTime } = useIntl();\n  const timeFormatString = 'HH:mm';\n  const is12hTime = true;\n  // @note @material-ui/picker's built-in mask generation does not work with formats like French (Canada)'s \"HH 'h' mm\"\n  //       so for now compute the mask ourself. This may need revisiting when they release their next major version.\n  const maskChar = '_';\n  const mask =\n    timeFormatString\n      .split(/'([^']*)'/)\n      .map((m, i) => (i % 2 === 0 ? m.replace(/[a-z]/gi, maskChar) : m))\n      .join('') + 'M';\n\n  const isValidDate = date => {\n    return date instanceof Date && !isNaN(date);\n  };\n\n  const onChange = useCallback(\n    value =>\n      onChangeProp && onChangeProp(isValidDate(value) ? value : undefined),\n    [onChangeProp]\n  );\n\n  const value = useMemo(() => {\n    console.log(valueProp);\n    return isValidDate(valueProp)\n      ? DateTime.fromISO(valueProp.toISOString())\n      : null;\n  }, [valueProp]);\n\n  return (\n    <KeyboardTimePicker\n      // format={timeFormatString}\n      ampm={is12hTime}\n      mask=\"__:__ _M\"\n      // maskChar={maskChar}\n      variant=\"inline\"\n      autoOk\n      onChange={onChange}\n      value={value}\n      {...other}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AASA,MAAa,aAAY,UAAS;CAChC,MAAM,EAAE,UAAU,cAAc,OAAO,WAAW,GAAG,UAAU;CAG/D,MAAM,aAAa;CAEnB,MAAM,eAAc,SAAQ;AAC1B,SAAO,gBAAgB,QAAQ,CAAC,MAAM,KAAK;;CAG7C,MAAM,WAAW,aACf,YACE,gBAAgB,aAAa,YAAYA,QAAM,GAAGA,UAAQ,OAAU,EACtE,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,cAAc;AAC1B,UAAQ,IAAI,UAAU;AACtB,SAAO,YAAY,UAAU,GACzB,SAAS,QAAQ,UAAU,aAAa,CAAC,GACzC;IACH,CAAC,UAAU,CAAC;AAEf,QACE,oCAAC;EACC,QAAQ;EACR,SAAQ;EACR;EACU;EACH;EACP,GAAI;GACJ;;;;;;;;AChCN,MAAa,aAAY,UAAS;CAChC,MAAM,EAAE,UAAU,cAAc,OAAO,WAAW,GAAG,UAAU;CAG/D,MAAM,mBAAmB;CACzB,MAAM,YAAY;CAGlB,MAAM,WAAW;AAEf,kBACG,MAAM,YAAY,CAClB,KAAK,GAAG,MAAO,IAAI,MAAM,IAAI,EAAE,QAAQ,WAAW,SAAS,GAAG,EAAG,CACjE,KAAK,GAAG,GAAG;CAEhB,MAAM,eAAc,SAAQ;AAC1B,SAAO,gBAAgB,QAAQ,CAAC,MAAM,KAAK;;CAG7C,MAAM,WAAW,aACf,YACE,gBAAgB,aAAa,YAAYC,QAAM,GAAGA,UAAQ,OAAU,EACtE,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,cAAc;AAC1B,UAAQ,IAAI,UAAU;AACtB,SAAO,YAAY,UAAU,GACzB,SAAS,QAAQ,UAAU,aAAa,CAAC,GACzC;IACH,CAAC,UAAU,CAAC;AAEf,QACE,oCAAC;EAEC,MAAM;EACN,MAAK;EAEL,SAAQ;EACR;EACU;EACH;EACP,GAAI;GACJ"}

package/dist/TimelineCalendar-6oAnmcUI.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { ResourceTimelineCalendar } from "udp-react-stencil-component-library";
+
+//#region src/UI/dataDisplay/calendar/TimelineCalendar.jsx
+const TimelineCalendar = (props) => {
+	const { ...other } = props;
+	return /* @__PURE__ */ React.createElement(ResourceTimelineCalendar, other);
+};
+
+//#endregion
+export { TimelineCalendar as t };
+//# sourceMappingURL=TimelineCalendar-6oAnmcUI.js.map

package/dist/TimelineCalendar-6oAnmcUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineCalendar-6oAnmcUI.js","names":[],"sources":["../src/UI/dataDisplay/calendar/TimelineCalendar.jsx"],"sourcesContent":["import React from 'react';\nimport { ResourceTimelineCalendar } from 'udp-react-stencil-component-library';\n\nexport const TimelineCalendar = (props) => {\n  const { ...other } = props;\n\n  return <ResourceTimelineCalendar {...other} />;\n};\n"],"mappings":";;;;AAGA,MAAa,oBAAoB,UAAU;CACzC,MAAM,EAAE,GAAG,UAAU;AAErB,QAAO,oCAAC,0BAA6B,MAAS"}

package/dist/Token-rFpVjQT_.js

@@ -0,0 +1,70 @@
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { n as getEllipseColor, r as getEllipseHintColor, t as Ellipse } from "./Ellipse-DGTaApGj.js";
+import React, { useMemo } from "react";
+import { IconButton, Typography, makeStyles, useTheme } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/components/dataDisplay/Token.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1) },
+	letter: {
+		fontSize: (props) => props.size === "small" ? theme.spacing(2.25) : theme.spacing(2.5),
+		color: (props) => getEllipseColor(theme, props.color)
+	},
+	buttonRoot: {
+		margin: theme.spacing(1),
+		width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		background: (props) => props.variant === "filled" ? getEllipseHintColor(theme, props.color) : "",
+		border: (props) => props.variant === "outlined" ? `1px solid` : "none",
+		borderColor: (props) => props.variant === "outlined" ? getEllipseColor(theme, props.color) : ""
+	}
+}));
+const Token = (props) => {
+	const { type = "default", variant = "outlined", color = "default", size = "large", iconType, icon, letter = "A", IconEllipseProps, onClick } = props;
+	const classes = useStyles(props);
+	const theme = useTheme();
+	const iconColor = useMemo(() => {
+		return getEllipseColor(theme, color);
+	}, [color, theme]);
+	const tokenComponent = /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Ellipse, {
+		variant,
+		size,
+		color,
+		...IconEllipseProps
+	}, type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.letter
+	}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	})));
+	if (type === "action") return /* @__PURE__ */ React.createElement(IconButton, {
+		classes: { root: classes.buttonRoot },
+		onClick
+	}, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	}));
+	return tokenComponent;
+};
+Token.propTypes = {
+	type: PropTypes.string,
+	variant: PropTypes.string,
+	color: PropTypes.string,
+	size: PropTypes.string,
+	iconType: PropTypes.string,
+	icon: PropTypes.elementType,
+	letter: PropTypes.string,
+	onClick: PropTypes.func
+};
+
+//#endregion
+export { Token as t };
+//# sourceMappingURL=Token-rFpVjQT_.js.map

package/dist/Token-rFpVjQT_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token-rFpVjQT_.js","names":[],"sources":["../src/UI/components/dataDisplay/Token.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  Typography,\n  IconButton\n} from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport { Ellipse } from './Ellipse';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\nimport {\n  getEllipseColor,\n  getEllipseHintColor\n} from '../../../utilities/style/utils/styleUtils';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    margin: (props) => (props.compact ? theme.spacing(0.5) : theme.spacing(1))\n  },\n  letter: {\n    fontSize: (props) =>\n      props.size === 'small' ? theme.spacing(2.25) : theme.spacing(2.5),\n    color: (props) => getEllipseColor(theme, props.color)\n  },\n  buttonRoot: {\n    margin: theme.spacing(1),\n    width: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    height: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    background: (props) =>\n      props.variant === 'filled' ? getEllipseHintColor(theme, props.color) : '',\n    border: (props) => (props.variant === 'outlined' ? `1px solid` : 'none'),\n    borderColor: (props) =>\n      props.variant === 'outlined' ? getEllipseColor(theme, props.color) : ''\n  }\n}));\n\nexport const Token = (props) => {\n  const {\n    type = 'default',\n    variant = 'outlined',\n    color = 'default',\n    size = 'large',\n    iconType,\n    icon,\n    letter = 'A',\n    IconEllipseProps,\n    onClick\n  } = props;\n  const classes = useStyles(props);\n  const theme = useTheme();\n\n  const iconColor = useMemo(() => {\n    return getEllipseColor(theme, color);\n  }, [color, theme]);\n\n  const tokenComponent = (\n    <div className={classes.root}>\n      <Ellipse\n        variant={variant}\n        size={size}\n        color={color}\n        {...IconEllipseProps}\n      >\n        {type === 'letter' ? (\n          <Typography variant='body1' className={classes.letter}>\n            {letter.toUpperCase()}\n          </Typography>\n        ) : (\n          <UnityFluentIcon\n            size={size === 'small' ? size : 'medium'}\n            color={iconColor}\n            type={iconType}\n            icon={icon}\n            style={{\n              color: iconColor\n            }}\n          />\n        )}\n      </Ellipse>\n    </div>\n  );\n\n  if (type === 'action') {\n    return (\n      <IconButton\n        classes={{\n          root: classes.buttonRoot\n        }}\n        onClick={onClick}\n      >\n        <UnityFluentIcon\n          size={size === 'small' ? size : 'medium'}\n          color={iconColor}\n          type={iconType}\n          icon={icon}\n          style={{\n            color: iconColor\n          }}\n        />\n      </IconButton>\n    );\n  }\n\n  return tokenComponent;\n};\n\nToken.propTypes = {\n  type: PropTypes.string,\n  variant: PropTypes.string,\n  color: PropTypes.string,\n  size: PropTypes.string,\n  iconType: PropTypes.string,\n  icon: PropTypes.elementType,\n  letter: PropTypes.string,\n  onClick: PropTypes.func\n};\n"],"mappings":";;;;;;;AAeA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,SAAS,UAAW,MAAM,UAAU,MAAM,QAAQ,GAAI,GAAG,MAAM,QAAQ,EAAE,EAC1E;CACD,QAAQ;EACN,WAAW,UACT,MAAM,SAAS,UAAU,MAAM,QAAQ,KAAK,GAAG,MAAM,QAAQ,IAAI;EACnE,QAAQ,UAAU,gBAAgB,OAAO,MAAM,MAAM;EACtD;CACD,YAAY;EACV,QAAQ,MAAM,QAAQ,EAAE;EACxB,QAAQ,UACN,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC9D,SAAS,UACP,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC9D,aAAa,UACX,MAAM,YAAY,WAAW,oBAAoB,OAAO,MAAM,MAAM,GAAG;EACzE,SAAS,UAAW,MAAM,YAAY,aAAa,cAAc;EACjE,cAAc,UACZ,MAAM,YAAY,aAAa,gBAAgB,OAAO,MAAM,MAAM,GAAG;EACxE;CACF,EAAE;AAEH,MAAa,SAAS,UAAU;CAC9B,MAAM,EACJ,OAAO,WACP,UAAU,YACV,QAAQ,WACR,OAAO,SACP,UACA,MACA,SAAS,KACT,kBACA,YACE;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,QAAQ,UAAU;CAExB,MAAM,YAAY,cAAc;AAC9B,SAAO,gBAAgB,OAAO,MAAM;IACnC,CAAC,OAAO,MAAM,CAAC;CAElB,MAAM,iBACJ,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACU;EACH;EACC;EACP,GAAI;IAEH,SAAS,WACR,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,OAAO,aAAa,CACV,GAEb,oCAAC;EACC,MAAM,SAAS,UAAU,OAAO;EAChC,OAAO;EACP,MAAM;EACA;EACN,OAAO,EACL,OAAO,WACR;GACD,CAEI,CACN;AAGR,KAAI,SAAS,SACX,QACE,oCAAC;EACC,SAAS,EACP,MAAM,QAAQ,YACf;EACQ;IAET,oCAAC;EACC,MAAM,SAAS,UAAU,OAAO;EAChC,OAAO;EACP,MAAM;EACA;EACN,OAAO,EACL,OAAO,WACR;GACD,CACS;AAIjB,QAAO;;AAGT,MAAM,YAAY;CAChB,MAAM,UAAU;CAChB,SAAS,UAAU;CACnB,OAAO,UAAU;CACjB,MAAM,UAAU;CAChB,UAAU,UAAU;CACpB,MAAM,UAAU;CAChB,QAAQ,UAAU;CAClB,SAAS,UAAU;CACpB"}

package/dist/TokenGroupItem-DLU0AK1S.js

@@ -0,0 +1,36 @@
+import { t as Token } from "./Token-rFpVjQT_.js";
+import React, { Fragment } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import { DeveloperToolsIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/ui/TokenGroupItem.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	label: { color: theme.palette.common.black }
+}));
+/**
+* @param {{label: string, icon: React.ElementType, color: string}} props
+*/
+const TokenGroupItem = ({ label, icon = DeveloperToolsIcon, color }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+		icon,
+		color,
+		size: "small",
+		variant: "filled",
+		type: "icon"
+	}), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.label
+	}, " ", label, " "));
+};
+TokenGroupItem.propTypes = {
+	label: PropTypes.string,
+	icon: PropTypes.bool,
+	color: PropTypes.string
+};
+
+//#endregion
+export { TokenGroupItem as t };
+//# sourceMappingURL=TokenGroupItem-DLU0AK1S.js.map

package/dist/TokenGroupItem-DLU0AK1S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenGroupItem-DLU0AK1S.js","names":[],"sources":["../src/UI/templates/ui/TokenGroupItem.jsx"],"sourcesContent":["import React, {Fragment} from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { DeveloperToolsIcon } from '@fluentui/react-icons'\nimport {Token} from '../../components/dataDisplay/Token'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  label: {\n    color: theme.palette.common.black\n  }\n}))\n\n/**\n * @param {{label: string, icon: React.ElementType, color: string}} props\n */\n  export const TokenGroupItem = ({label, icon = DeveloperToolsIcon, color}) => {\n    const classes = useStyles()\n    return (\n      <Fragment >\n        <Token icon={icon} color={color} size=\"small\" variant=\"filled\" type=\"icon\"  />\n        <Typography variant='caption' className={classes.label} > {label} </Typography>  \n      </Fragment>\n    )\n  }\n\n  \n  TokenGroupItem.propTypes = {\n    /**\n     * Label to display in list.\n     */\n    label: PropTypes.string,\n    /**\n     * Icon to display in grouping.\n     */\n    icon: PropTypes.bool,\n     /**\n     * sets color of token background\n     */\n    color: PropTypes.string,\n  \n  }"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO,EACL,OAAO,MAAM,QAAQ,OAAO,OAC7B;CACF,EAAE;;;;AAKD,MAAa,kBAAkB,EAAC,OAAO,OAAO,oBAAoB,YAAW;CAC3E,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,gBACC,oCAAC;EAAY;EAAa;EAAO,MAAK;EAAQ,SAAQ;EAAS,MAAK;GAAU,EAC9E,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAAQ,KAAE,OAAM,IAAc,CACtE;;AAKf,eAAe,YAAY;CAIzB,OAAO,UAAU;CAIjB,MAAM,UAAU;CAIhB,OAAO,UAAU"}