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

package/dist/TimeField-xpgKvfpF.js

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

package/dist/TimeField-xpgKvfpF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeField-xpgKvfpF.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,UAAW,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,UAAW,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-L-xwg4nj.js

@@ -1,12 +0,0 @@
-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-L-xwg4nj.js.map

package/dist/TimelineCalendar-L-xwg4nj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineCalendar-L-xwg4nj.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/ToggleSection-C_PSoIb8.js

@@ -1,116 +0,0 @@
-import { t as FluentIconButton } from "./FluentIconButton-CtN4xdO_.js";
-import { t as ExtenderToggle } from "./ExtenderToggle-h0uJXXsa.js";
-import React, { useState } from "react";
-import { makeStyles, useTheme } from "@material-ui/core";
-import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
-import PropTypes from "prop-types";
-
-//#region src/UI/templates/SapFlexibleTemplate.jsx
-const SapFlexibleTemplate = ({ left, center, right }) => {
-	const [columns, setColumns] = useState({
-		columnLeft: true,
-		columnCenter: true,
-		columnRight: true
-	});
-	const [columnPercent, setColumnPercent] = useState({
-		columnLeft: "25%",
-		columnCenter: "50%",
-		columnRight: "25%"
-	});
-	const classes = makeStyles((theme) => ({
-		root: {
-			display: "flex",
-			flexDirection: "row"
-		},
-		columnLeft: {
-			display: "flex",
-			flex: columnPercent.columnLeft,
-			height: "100vh"
-		},
-		columnCenter: {
-			flex: columnPercent.columnCenter,
-			height: "100vh"
-		},
-		columnRight: {
-			display: "flex",
-			flex: columnPercent.columnRight,
-			height: "100vh"
-		},
-		fillContent: { flex: 1 }
-	}))();
-	const handleToggleColumn = (columnType) => {
-		setColumns({
-			...columns,
-			columnCenter: !columns.columnCenter
-		});
-		if (columnType === "columnLeft") {
-			setColumnPercent({
-				...columnPercent,
-				columnLeft: "75%"
-			});
-			if (columnPercent.columnLeft === "75%") setColumnPercent({
-				...columnPercent,
-				columnLeft: "25%"
-			});
-		} else {
-			setColumnPercent({
-				...columnPercent,
-				columnRight: "75%"
-			});
-			if (columnPercent.columnRight === "75%") setColumnPercent({
-				...columnPercent,
-				columnRight: "25%"
-			});
-		}
-	};
-	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, columns.columnLeft && /* @__PURE__ */ React.createElement("div", { className: classes.columnLeft }, /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, left, " "), /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
-		"aria-label": columnPercent.columnLeft === "25%" ? "Expand column" : "Collapse column",
-		color: "primary",
-		icon: columnPercent.columnLeft === "25%" ? ChevronRightIcon : ChevronLeftIcon,
-		onClick: () => handleToggleColumn("columnLeft")
-	}))), columns.columnCenter && /* @__PURE__ */ React.createElement("div", { className: classes.columnCenter }, /* @__PURE__ */ React.createElement("div", null, " ", center, " ")), columns.columnRight && /* @__PURE__ */ React.createElement("div", { className: classes.columnRight }, /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
-		"aria-label": columnPercent.columnRight === "25%" ? "Expand column" : "Collapse column",
-		color: "primary",
-		icon: columnPercent.columnRight === "25%" ? ChevronLeftIcon : ChevronRightIcon,
-		onClick: () => handleToggleColumn("columnRight")
-	})), /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, " ", right, " ")));
-};
-
-//#endregion
-//#region src/UI/templates/ToggleSection.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
-	},
-	lowerShelf: { display: "flex" },
-	shelfOptions: {
-		flex: 1,
-		width: "100%"
-	}
-}));
-const ToggleSection = (props) => {
-	const classes = useStyles(props);
-	const { children, onClick, sectionOpen, options, toggleLabel, color } = props;
-	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, " ", children, " "), /* @__PURE__ */ React.createElement("div", { className: classes.lowerShelf }, /* @__PURE__ */ React.createElement("div", { className: classes.shelfOptions }, options), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ExtenderToggle, {
-		onClick,
-		open: sectionOpen,
-		toggleLabel,
-		color
-	}))));
-};
-ToggleSection.propTypes = {
-	children: PropTypes.node,
-	onClick: PropTypes.func,
-	sectionOpen: PropTypes.bool,
-	options: PropTypes.node,
-	toggleLabel: PropTypes.node,
-	color: PropTypes.string
-};
-
-//#endregion
-export { SapFlexibleTemplate as n, ToggleSection as t };
-//# sourceMappingURL=ToggleSection-C_PSoIb8.js.map

package/dist/ToggleSection-C_PSoIb8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleSection-C_PSoIb8.js","names":[],"sources":["../src/UI/templates/SapFlexibleTemplate.jsx","../src/UI/templates/ToggleSection.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nexport const SapFlexibleTemplate = ({ left, center, right }) => {\n  const [columns, setColumns] = useState({\n    columnLeft: true,\n    columnCenter: true,\n    columnRight: true\n  })\n\n  const [columnPercent, setColumnPercent] = useState({\n    columnLeft: '25%',\n    columnCenter: '50%',\n    columnRight: '25%'\n  })\n\n  const useStyles = makeStyles((theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    columnLeft: {\n      display: 'flex',\n      flex: columnPercent.columnLeft,\n      height: '100vh'\n    },\n    columnCenter: {\n      flex: columnPercent.columnCenter,\n      height: '100vh'\n    },\n    columnRight: {\n      display: 'flex',\n      flex: columnPercent.columnRight,\n      height: '100vh'\n    },\n    fillContent: {\n      flex: 1\n    }\n  }))\n\n  const classes = useStyles()\n\n  const handleToggleColumn = (columnType) => {\n    setColumns({ ...columns, columnCenter: !columns.columnCenter })\n\n    if (columnType === 'columnLeft') {\n      setColumnPercent({ ...columnPercent, columnLeft: '75%' })\n\n      if (columnPercent.columnLeft === '75%') {\n        setColumnPercent({ ...columnPercent, columnLeft: '25%' })\n      }\n    } else {\n      setColumnPercent({ ...columnPercent, columnRight: '75%' })\n\n      if (columnPercent.columnRight === '75%') {\n        setColumnPercent({ ...columnPercent, columnRight: '25%' })\n      }\n    }\n  }\n\n  return (\n    <div className={classes.root}>\n      {columns.columnLeft && (\n        <div className={classes.columnLeft}>\n          <div className={classes.fillContent}>{left} </div>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnLeft === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnLeft === '25%'\n                  ? ChevronRightIcon\n                  : ChevronLeftIcon\n              }\n              onClick={() => handleToggleColumn('columnLeft')}\n            />\n          </div>\n        </div>\n      )}\n\n      {columns.columnCenter && (\n        <div className={classes.columnCenter}>\n          <div> {center} </div>\n        </div>\n      )}\n\n      {columns.columnRight && (\n        <div className={classes.columnRight}>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnRight === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnRight === '25%'\n                  ? ChevronLeftIcon\n                  : ChevronRightIcon\n              }\n              onClick={() => handleToggleColumn('columnRight')}\n            />\n          </div>\n          <div className={classes.fillContent}> {right} </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from './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) => props.color\n  },\n  lowerShelf: {\n    display: 'flex'\n  },\n  shelfOptions: {\n    flex: 1,\n    width: '100%'\n  }\n}));\n\nexport const ToggleSection = (props) => {\n  const classes = useStyles(props);\n  const { children, onClick, sectionOpen, options, toggleLabel, color } = props;\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.container}> {children} </div>\n\n      <div className={classes.lowerShelf}>\n        <div className={classes.shelfOptions}>{options}</div>\n        <div>\n          <ExtenderToggle\n            onClick={onClick}\n            open={sectionOpen}\n            toggleLabel={toggleLabel}\n            color={color}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nToggleSection.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":"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"}

package/dist/Token-2qpMI6YU.js

@@ -1,70 +0,0 @@
-import { t as UnityFluentIcon } from "./UnityFluentIcon-DkZ-zXku.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-2qpMI6YU.js.map

package/dist/Token-2qpMI6YU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Token-2qpMI6YU.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-DEZAU-Gs.js

@@ -1,36 +0,0 @@
-import { t as Token } from "./Token-2qpMI6YU.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-DEZAU-Gs.js.map

package/dist/TokenGroupItem-DEZAU-Gs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenGroupItem-DEZAU-Gs.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;CAElB"}