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

package/dist/StandardTitle-UHYnVDSe.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/typography/StandardTitle.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	marginTop: (props) => props?.removeMarginTop ? 0 : theme.spacing(1),
+	whiteSpace: "nowrap",
+	textOverflow: "ellipsis"
+} }));
+const StandardTitle = (props) => {
+	const classes = useStyles(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Typography, {
+		component: "h2",
+		variant: "h6",
+		className: classes.root,
+		...other
+	}, children);
+};
+
+//#endregion
+export { StandardTitle as t };
+//# sourceMappingURL=StandardTitle-UHYnVDSe.js.map

package/dist/StandardTitle-UHYnVDSe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardTitle-UHYnVDSe.js","names":[],"sources":["../src/UI/dataDisplay/typography/StandardTitle.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: props => props?.removeMarginTop ? 0 : theme.spacing(1),\n    whiteSpace: 'nowrap',\n    // overflow: 'hidden',\n    textOverflow: 'ellipsis'\n  }\n}))\n\nexport const StandardTitle = (props) => {\n  const classes = useStyles(props)\n  const { children, ...other } = props\n\n  return (\n    <Typography component='h2' variant='h6' className={classes.root} {...other}>\n      {children}\n    </Typography>\n  )\n}\n"],"mappings":";;;;AAGA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,YAAW,UAAS,OAAO,kBAAkB,IAAI,MAAM,QAAQ,EAAE;CACjE,YAAY;CAEZ,cAAc;CACf,EACF,EAAE;AAEH,MAAa,iBAAiB,UAAU;CACtC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAU,GAAG,UAAU;AAE/B,QACE,oCAAC;EAAW,WAAU;EAAK,SAAQ;EAAK,WAAW,QAAQ;EAAM,GAAI;IAClE,SACU"}

package/dist/Statistic-CO1EsElb.js

@@ -0,0 +1,323 @@
+import { t as FluentButton } from "./FluentButton-3xMbN_Vs.js";
+import { t as FluentIcon } from "./FluentIcon-DjE8A5DC.js";
+import { t as FluentIconButton } from "./FluentIconButton-CtN4xdO_.js";
+import { S as getIconFromName } from "./TreeUtilities-BnHT4nq0.js";
+import { t as Adornment } from "./Adornment-Ciq1X7he.js";
+import { t as FluentCheckbox } from "./FluentCheckbox-CnMj7oja.js";
+import { t as CompactDataListItem } from "./CompactDataListItem-CP6-FZHb.js";
+import { t as CompactDataList } from "./CompactDataList-DbcQ8Pev.js";
+import { r as getChildrenObjectsWithNoChildren } from "./MapUtilities-CA_4ZjlV.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Card, CardContent, Divider, FormControlLabel, FormGroup, Grid, IconButton, ListItemIcon, Menu, MenuItem, Tooltip, Typography, darken, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { CaretDownSolid8Icon, ChevronDownIcon, ChromeCloseIcon, CompletedIcon, ErrorIcon, InfoIcon, MoreVerticalIcon, ViewIcon, WarningIcon } from "@fluentui/react-icons";
+import { isEmpty } from "lodash";
+import { useTranslation } from "react-i18next";
+
+//#region src/UI/mapLayout/ui/CheckboxGroup.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	expand: {
+		transform: "rotate(0deg)",
+		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
+	},
+	expandOpen: { transform: "rotate(180deg)" },
+	iconButtonWrapper: {
+		borderRadius: 2,
+		margin: "auto 0px"
+	},
+	expandedList: {
+		marginLeft: theme.spacing(4),
+		display: "flex",
+		flexDirection: "column"
+	},
+	checkboxGroup: {
+		display: "flex",
+		justifyContent: "space-between"
+	}
+}));
+const CheckboxGroup = (props) => {
+	const { title, options, onChange, defaultExpandedListState = true, values, valueKey } = props;
+	const [checkedItems, setCheckedItems] = useState({});
+	const [checkedParent, setCheckedParent] = useState(false);
+	const [expanded, setExpanded] = useState(defaultExpandedListState);
+	const [parentIndeterminate, setParentIndeterminate] = useState(false);
+	const classes = useStyles$2();
+	useEffect(() => {
+		let preCheckedItems = {};
+		options?.forEach((option) => {
+			if (!!!option?.options || option?.options?.length === 0) preCheckedItems[option.value] = values?.includes(option.value);
+		});
+		setCheckedItems(preCheckedItems);
+	}, [options, values]);
+	const childrenValues = useMemo(() => {
+		return getChildrenObjectsWithNoChildren(options ?? [], "value");
+	}, [options]);
+	useEffect(() => {
+		const checkedAll = isEmpty(checkedItems) ? (childrenValues?.length > 0 && childrenValues?.every((val) => values.includes(val))) ?? false : Object.values(checkedItems)?.every((checked) => checked);
+		setCheckedParent(checkedAll);
+		setParentIndeterminate(!checkedAll && (isEmpty(checkedItems) ? childrenValues?.some((val) => values.includes(val)) : Object.values(checkedItems)?.some((checked) => checked)));
+	}, [
+		checkedItems,
+		childrenValues,
+		title,
+		values
+	]);
+	const handleOnClickChildCheckboxOnChange = useCallback((event) => {
+		setCheckedItems((preVal) => ({
+			...preVal,
+			[event?.target?.name]: event?.target?.checked
+		}));
+		if (!event?.target?.checked) onChange(values?.filter((val) => val !== event?.target?.name));
+		else onChange([...values, event?.target?.name]);
+	}, [onChange, values]);
+	const handleParentCheckboxOnChange = useCallback((event) => {
+		setCheckedParent(event?.target?.checked);
+		if (!event?.target?.checked) {
+			setCheckedItems({});
+			onChange(values?.filter((val) => {
+				return !childrenValues?.includes(val);
+			}));
+		}
+		let newItemToAdd = [];
+		childrenValues.forEach((option) => {
+			if (event?.target?.checked && option && !values?.includes(option)) newItemToAdd.push(option);
+		});
+		if (newItemToAdd.length > 0) onChange([...values, ...newItemToAdd]);
+		setExpanded(true);
+		setParentIndeterminate(false);
+	}, [
+		childrenValues,
+		onChange,
+		values
+	]);
+	const childrenList = useMemo(() => {
+		if (options?.length > 0) return options?.map((option) => {
+			if (option?.options?.length > 0) return /* @__PURE__ */ React.createElement(CheckboxGroup, {
+				key: option?.value,
+				title: option?.title,
+				options: option?.options,
+				values,
+				valueKey: option?.value,
+				onChange
+			});
+			return /* @__PURE__ */ React.createElement(FormControlLabel, {
+				label: option?.title,
+				control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
+					checked: checkedItems[option?.value] || false,
+					onChange: handleOnClickChildCheckboxOnChange
+				}),
+				name: option?.value
+			});
+		});
+		return [];
+	}, [
+		checkedItems,
+		handleOnClickChildCheckboxOnChange,
+		onChange,
+		options,
+		values
+	]);
+	return /* @__PURE__ */ React.createElement(FormGroup, null, options?.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classes.checkboxGroup }, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		label: title,
+		control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
+			checked: checkedParent,
+			indeterminate: parentIndeterminate,
+			onChange: handleParentCheckboxOnChange
+		})
+	}), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: clsx(classes.expand, { [classes.expandOpen]: expanded }, classes.iconButtonWrapper),
+		onClick: () => setExpanded(!expanded),
+		icon: ChevronDownIcon
+	})) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FormControlLabel, {
+		label: title,
+		control: /* @__PURE__ */ React.createElement(FluentCheckbox, {
+			checked: checkedItems[valueKey] || false,
+			onChange: handleOnClickChildCheckboxOnChange,
+			name: valueKey
+		})
+	})), expanded && options?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.expandedList }, childrenList));
+};
+
+//#endregion
+//#region src/UI/mapLayout/ui/CheckboxList.jsx
+const CheckboxList = (props) => {
+	const { itemGroups, values, onChange } = props;
+	return /* @__PURE__ */ React.createElement("div", null, itemGroups?.length > 0 && itemGroups?.map((item) => /* @__PURE__ */ React.createElement(CheckboxGroup, {
+		title: item?.title,
+		options: item?.options,
+		values,
+		onChange
+	})));
+};
+
+//#endregion
+//#region src/UI/mapLayout/ui/PopoverCard.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	contentWrapper: {
+		display: "flex",
+		height: "100%",
+		width: (props) => props?.width ?? "100%"
+	},
+	titleWrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		alignItems: "center"
+	},
+	iconButtonWrapper: { borderRadius: 2 },
+	avatar: {
+		width: "80px",
+		height: "80px"
+	},
+	iconButtonsWrapper: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center"
+	},
+	primaryButtonContainer: {
+		display: "flex",
+		justifyContent: "flex-end",
+		gap: theme.spacing(1)
+	},
+	actionButton: { color: "#FFFFFF" },
+	fullHeight: { height: "100%" },
+	fullWidth: { width: "100%" },
+	messageWrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		alignItems: "center",
+		padding: theme.spacing(1),
+		backgroundColor: (props) => props?.status ? lighten(theme.palette[props.status]?.main, .9) : lighten(theme.palette.info.main, .9)
+	},
+	iconMessage: { color: (props) => props?.status ? theme.palette[props.status]?.main : null },
+	message: { color: (props) => props?.status ? darken(theme.palette[props.status]?.main, .6) : null }
+}));
+const PopoverCard = (props) => {
+	const { data, title, listData, showAdornment = true, status = "info", detailsEvent, primaryActions, moreIconActions, message, messageIcon, hideMessageIcon = false, onClose, width } = props;
+	const [moreIconAnchor, setMoreIconAnchor] = useState(null);
+	const [primaryActionAnchor, setPrimaryActionAnchor] = useState(null);
+	const { t } = useTranslation();
+	const classes = useStyles$1({
+		width,
+		status
+	});
+	const theme = useTheme();
+	const handleOnClickMoreIcon = (event) => {
+		setMoreIconAnchor(event?.currentTarget);
+	};
+	const handleOnClickPrimaryAction = (event) => {
+		setPrimaryActionAnchor(event?.currentTarget);
+	};
+	const headerBackgroundColor = useMemo(() => {
+		switch (status) {
+			case "success": return lighten(theme.palette.success.main, .7);
+			case "error": return lighten(theme.palette.error.main, .7);
+			case "warning": return lighten(theme.palette.warning.main, .7);
+			default: return lighten(theme.palette.info.main, .7);
+		}
+	}, [status, theme]);
+	const defaultMessageIcon = useMemo(() => {
+		switch (status) {
+			case "success": return CompletedIcon;
+			case "error": return ErrorIcon;
+			case "warning": return WarningIcon;
+			default: return InfoIcon;
+		}
+	}, [status]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, showAdornment && status && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Adornment, { color: status })), /* @__PURE__ */ React.createElement(Card, { className: classes.fullWidth }, /* @__PURE__ */ React.createElement(CardContent, { style: { backgroundColor: headerBackgroundColor } }, /* @__PURE__ */ React.createElement("div", { className: classes.iconButtonsWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: onClose,
+		icon: ChromeCloseIcon
+	}), /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, title)), /* @__PURE__ */ React.createElement("div", null, moreIconActions?.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: t("More") ?? "" }, /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.iconButtonWrapper,
+		onClick: handleOnClickMoreIcon,
+		size: "small"
+	}, /* @__PURE__ */ React.createElement(MoreVerticalIcon, null))), /* @__PURE__ */ React.createElement(Menu, {
+		open: moreIconAnchor ? true : false,
+		onClose: () => {
+			setMoreIconAnchor(null);
+		},
+		anchorEl: moreIconAnchor,
+		anchorOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		}
+	}, moreIconActions?.map((action) => /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => {
+		action.onClick(data);
+	} }, action?.icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, action.icon), action?.name))))))), message && /* @__PURE__ */ React.createElement("div", { className: classes.messageWrapper }, !hideMessageIcon && /* @__PURE__ */ React.createElement("div", { className: classes.iconMessage }, /* @__PURE__ */ React.createElement(FluentIcon, { component: messageIcon ?? defaultMessageIcon })), /* @__PURE__ */ React.createElement("div", { className: classes.message }, message)), /* @__PURE__ */ React.createElement(CardContent, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(CompactDataList, { disableSeparator: false }, listData?.map(({ subject, value }) => {
+		return /* @__PURE__ */ React.createElement(CompactDataListItem, {
+			label: subject,
+			value
+		});
+	}))), /* @__PURE__ */ React.createElement(CardContent, { style: {
+		flex: 1,
+		paddingTop: 0,
+		paddingBottom: 16
+	} }, /* @__PURE__ */ React.createElement("div", { className: classes.primaryButtonContainer }, detailsEvent && /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "outlined",
+		endIcon: /* @__PURE__ */ React.createElement(ViewIcon, null),
+		onClick: detailsEvent
+	}, t("Details")), /* @__PURE__ */ React.createElement("div", null, primaryActions?.length > 0 && /* @__PURE__ */ React.createElement(FluentButton, {
+		variant: "contained",
+		color: "secondary",
+		endIcon: /* @__PURE__ */ React.createElement(CaretDownSolid8Icon, null),
+		onClick: handleOnClickPrimaryAction,
+		className: classes.actionButton
+	}, t("Actions")), /* @__PURE__ */ React.createElement(Menu, {
+		open: primaryActionAnchor ? true : false,
+		onClose: () => {
+			setPrimaryActionAnchor(null);
+		},
+		anchorEl: primaryActionAnchor,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		}
+	}, primaryActions?.map((action) => /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => {
+		action.onClick(data);
+	} }, action?.icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, action.icon), action?.name)))))))));
+};
+
+//#endregion
+//#region src/UI/mapLayout/ui/Statistic.jsx
+const useStyles = makeStyles((theme) => ({
+	icon: {
+		margin: "auto 5px auto 0",
+		padding: theme.spacing(1),
+		backgroundColor: (props) => lighten(props?.color ? props.color : theme.palette.info.main, .9),
+		borderRadius: theme.spacing(3)
+	},
+	valueContainer: { marginRight: theme.spacing(1) },
+	iconColor: {
+		color: (props) => props?.color,
+		borderRadius: theme.spacing(3)
+	}
+}));
+const Statistic = (props) => {
+	const { icon, value, title, color, onClick, hideDivider = false } = props;
+	const classes = useStyles({ color });
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid, { container: true }, !hideDivider && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "vertical",
+		variant: "middle"
+	})), icon && /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		className: classes.icon
+	}, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: getIconFromName(icon),
+		className: classes.iconColor,
+		onClick
+	})), /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		className: classes.valueContainer
+	}, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, value), /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, title))));
+};
+
+//#endregion
+export { CheckboxGroup as i, PopoverCard as n, CheckboxList as r, Statistic as t };
+//# sourceMappingURL=Statistic-CO1EsElb.js.map

package/dist/Statistic-CO1EsElb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic-CO1EsElb.js","names":["useStyles","useStyles"],"sources":["../src/UI/mapLayout/ui/CheckboxGroup.jsx","../src/UI/mapLayout/ui/CheckboxList.jsx","../src/UI/mapLayout/ui/PopoverCard.jsx","../src/UI/mapLayout/ui/Statistic.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { FormControlLabel, FormGroup, makeStyles } from '@material-ui/core';\nimport { isEmpty } from 'lodash';\nimport { FluentCheckbox } from '../../inputs/checkbox/FluentCheckbox';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { getChildrenObjectsWithNoChildren } from '../utilities/MapUtilities';\n\nconst useStyles = makeStyles((theme) => ({\n  expand: {\n    transform: 'rotate(0deg)',\n    transition: theme.transitions.create('transform', {\n      duration: theme.transitions.duration.shortest\n    })\n  },\n  expandOpen: {\n    transform: 'rotate(180deg)'\n  },\n  iconButtonWrapper: {\n    borderRadius: 2,\n    margin: 'auto 0px'\n  },\n  expandedList: {\n    marginLeft: theme.spacing(4),\n    display: 'flex',\n    flexDirection: 'column'\n  },\n  checkboxGroup: {\n    display: 'flex',\n    justifyContent: 'space-between'\n  }\n}));\n\nexport const CheckboxGroup = (props) => {\n  const {\n    title,\n    options,\n    onChange,\n    defaultExpandedListState = true,\n    values,\n    valueKey\n  } = props;\n  const [checkedItems, setCheckedItems] = useState({});\n  const [checkedParent, setCheckedParent] = useState(false);\n  const [expanded, setExpanded] = useState(defaultExpandedListState);\n  const [parentIndeterminate, setParentIndeterminate] = useState(false);\n  const classes = useStyles();\n\n  useEffect(() => {\n      let preCheckedItems = {};\n      options?.forEach((option) => {\n        if(!!!option?.options || option?.options?.length === 0) {\n          preCheckedItems[option.value] = values?.includes(option.value);\n        }\n      });\n      setCheckedItems(preCheckedItems);\n  }, [options, values]);\n\n  //get a list of child values\n  const childrenValues = useMemo(() => {\n    return getChildrenObjectsWithNoChildren(options ?? [], 'value');\n  }, [options]);\n\n  useEffect(() => {\n    const checkedAll = isEmpty(checkedItems)\n      ? (childrenValues?.length > 0 &&\n          childrenValues?.every((val) => values.includes(val))) ??\n        false\n      : Object.values(checkedItems)?.every((checked) => checked);\n\n    setCheckedParent(checkedAll);\n\n    setParentIndeterminate(\n      !checkedAll &&\n        (isEmpty(checkedItems)\n          ? childrenValues?.some((val) => values.includes(val))\n          : Object.values(checkedItems)?.some((checked) => checked))\n    );\n  }, [checkedItems, childrenValues, title, values]);\n\n  const handleOnClickChildCheckboxOnChange = useCallback(\n    (event) => {\n      setCheckedItems((preVal) => ({\n        ...preVal,\n        [event?.target?.name]: event?.target?.checked\n      }));\n\n      if (!event?.target?.checked) {\n        onChange(values?.filter((val) => val !== event?.target?.name));\n      } else {\n        onChange([...values, event?.target?.name]);\n      }\n    },\n    [onChange, values]\n  );\n\n  const handleParentCheckboxOnChange = useCallback(\n    (event) => {\n      setCheckedParent(event?.target?.checked);\n      if (!event?.target?.checked) {\n        setCheckedItems({});\n\n        onChange(\n          values?.filter((val) => {\n            return !childrenValues?.includes(val);\n          })\n        );\n      }\n\n      let newItemToAdd = [];\n      childrenValues.forEach((option) => {\n        if (event?.target?.checked && option && !values?.includes(option)) {\n          newItemToAdd.push(option);\n        }\n      });\n\n      if (newItemToAdd.length > 0) {\n        onChange([...values, ...newItemToAdd]);\n      }\n      setExpanded(true);\n      setParentIndeterminate(false);\n    },\n    [childrenValues, onChange, values]\n  );\n\n  const childrenList = useMemo(() => {\n    if (options?.length > 0) {\n      return options?.map((option) => {\n        if (option?.options?.length > 0) {\n          return (\n            <CheckboxGroup\n              key={option?.value}\n              title={option?.title}\n              options={option?.options}\n              values={values}\n              valueKey={option?.value}\n              onChange={onChange}\n            />\n          );\n        }\n\n        return (\n          <FormControlLabel\n            label={option?.title}\n            control={\n              <FluentCheckbox\n                checked={checkedItems[option?.value] || false}\n                onChange={handleOnClickChildCheckboxOnChange}\n              />\n            }\n            name={option?.value}\n          />\n        );\n      });\n    }\n    return [];\n  }, [\n    checkedItems,\n    handleOnClickChildCheckboxOnChange,\n    onChange,\n    options,\n    values\n  ]);\n\n  return (\n    <FormGroup>\n      {options?.length > 0 ? (\n        <div className={classes.checkboxGroup}>\n          <FormControlLabel\n            label={title}\n            control={\n              <FluentCheckbox\n                checked={checkedParent}\n                indeterminate={parentIndeterminate}\n                onChange={handleParentCheckboxOnChange}\n              />\n            }\n          />\n\n          <FluentIconButton\n            className={clsx(\n              classes.expand,\n              {\n                [classes.expandOpen]: expanded\n              },\n              classes.iconButtonWrapper\n            )}\n            onClick={() => setExpanded(!expanded)}\n            icon={ChevronDownIcon}\n          />\n        </div>\n      ) : (\n        <div>\n          <FormControlLabel\n            label={title}\n            control={\n              <FluentCheckbox\n                checked={checkedItems[valueKey] || false}\n                onChange={handleOnClickChildCheckboxOnChange}\n                name={valueKey}\n              />\n            }\n          />\n        </div>\n      )}\n      {expanded && options?.length > 0 && (\n        <div className={classes.expandedList}>{childrenList}</div>\n      )}\n    </FormGroup>\n  );\n};\n","import React from 'react';\nimport { CheckboxGroup } from './CheckboxGroup';\n\nexport const CheckboxList = (props) => {\n  const { itemGroups, values, onChange } = props;\n\n  return (\n    <div>\n      {itemGroups?.length > 0 &&\n        itemGroups?.map((item) => (\n          <CheckboxGroup\n            title={item?.title}\n            options={item?.options}\n            values={values}\n            onChange={onChange}\n          />\n        ))}\n    </div>\n  );\n};\n","import React, { useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport {\n  CaretDownSolid8Icon,\n  ChromeCloseIcon,\n  CompletedIcon,\n  ErrorIcon,\n  InfoIcon,\n  MoreVerticalIcon,\n  ViewIcon,\n  WarningIcon\n} from '@fluentui/react-icons';\nimport {\n  Card,\n  CardContent,\n  darken,\n  IconButton,\n  lighten,\n  ListItemIcon,\n  makeStyles,\n  Menu,\n  MenuItem,\n  Tooltip,\n  Typography,\n  useTheme\n} from '@material-ui/core';\nimport { Adornment } from '../../components/feedback/Adornment';\nimport { FluentButton } from '../../inputs/buttons/FluentButton';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { CompactDataList } from '../../dataDisplay/CompactDataList';\nimport { CompactDataListItem } from '../../dataDisplay/CompactDataListItem';\n\nconst useStyles = makeStyles((theme) => ({\n  contentWrapper: {\n    display: 'flex',\n    height: '100%',\n    width: (props) => props?.width ?? '100%'\n  },\n  titleWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center'\n  },\n  iconButtonWrapper: {\n    borderRadius: 2\n  },\n  avatar: {\n    width: '80px',\n    height: '80px'\n  },\n  iconButtonsWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  primaryButtonContainer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: theme.spacing(1)\n  },\n  actionButton: {\n    color: '#FFFFFF'\n  },\n  fullHeight: {\n    height: '100%'\n  },\n  fullWidth: {\n    width: '100%'\n  },\n  messageWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    padding: theme.spacing(1),\n    backgroundColor: (props) =>\n      props?.status\n        ? lighten(theme.palette[props.status]?.main, 0.9)\n        : lighten(theme.palette.info.main, 0.9)\n  },\n  iconMessage: {\n    color: (props) => (props?.status ? theme.palette[props.status]?.main : null)\n  },\n  message: {\n    color: (props) =>\n      props?.status ? darken(theme.palette[props.status]?.main, 0.6) : null\n  },\n}));\n\nexport const PopoverCard = (props) => {\n  const {\n    data,\n    title,\n    listData,\n    showAdornment = true,\n    status = 'info',\n    detailsEvent,\n    primaryActions,\n    moreIconActions,\n    message,\n    messageIcon,\n    hideMessageIcon = false,\n    onClose,\n    width\n  } = props;\n  const [moreIconAnchor, setMoreIconAnchor] = useState(null);\n  const [primaryActionAnchor, setPrimaryActionAnchor] = useState(null);\n  const { t } = useTranslation();\n  const classes = useStyles({ width, status });\n  const theme = useTheme();\n\n  const handleOnClickMoreIcon = (event) => {\n    setMoreIconAnchor(event?.currentTarget);\n  };\n\n  const handleOnClickPrimaryAction = (event) => {\n    setPrimaryActionAnchor(event?.currentTarget);\n  };\n\n  const headerBackgroundColor = useMemo(() => {\n    switch (status) {\n      case 'success':\n        return lighten(theme.palette.success.main, 0.7);\n      case 'error':\n        return lighten(theme.palette.error.main, 0.7);\n      case 'warning':\n        return lighten(theme.palette.warning.main, 0.7);\n      default:\n        return lighten(theme.palette.info.main, 0.7);\n    }\n  }, [status, theme]);\n\n  const defaultMessageIcon = useMemo(() => {\n    switch (status) {\n      case 'success':\n        return CompletedIcon;\n      case 'error':\n        return ErrorIcon;\n      case 'warning':\n        return WarningIcon;\n      default:\n        return InfoIcon;\n    }\n  }, [status]);\n\n  return (\n    <div>\n      <div className={classes.contentWrapper}>\n        {showAdornment && status && (\n          <div>\n            <Adornment color={status} />\n          </div>\n        )}\n        <Card className={classes.fullWidth}>\n          <CardContent style={{ backgroundColor: headerBackgroundColor }}>\n            <div className={classes.iconButtonsWrapper}>\n              <div className={classes.titleWrapper}>\n                <FluentIconButton onClick={onClose} icon={ChromeCloseIcon} />\n                <Typography variant='h6'>{title}</Typography>\n              </div>\n              <div>\n                {moreIconActions?.length > 0 && (\n                  <>\n                    <Tooltip title={t('More') ?? ''}>\n                      <IconButton\n                        className={classes.iconButtonWrapper}\n                        onClick={handleOnClickMoreIcon}\n                        size='small'\n                      >\n                        <MoreVerticalIcon />\n                      </IconButton>\n                    </Tooltip>\n                    <Menu\n                      open={moreIconAnchor ? true : false}\n                      onClose={() => {\n                        setMoreIconAnchor(null);\n                      }}\n                      anchorEl={moreIconAnchor}\n                      anchorOrigin={{\n                        vertical: 'top',\n                        horizontal: 'right'\n                      }}\n                      transformOrigin={{\n                        vertical: 'top',\n                        horizontal: 'left'\n                      }}\n                    >\n                      {moreIconActions?.map((action) => (\n                        <MenuItem onClick={() => {action.onClick(data)}}>\n                          {action?.icon && (\n                            <ListItemIcon>{action.icon}</ListItemIcon>\n                          )}\n                          {action?.name}\n                        </MenuItem>\n                      ))}\n                    </Menu>\n                  </>\n                )}\n              </div>\n            </div>\n          </CardContent>\n          {message && (\n            <div className={classes.messageWrapper}>\n              {!hideMessageIcon && (\n                <div className={classes.iconMessage}>\n                  <FluentIcon component={messageIcon ?? defaultMessageIcon} />\n                </div>\n              )}\n              <div className={classes.message}>{message}</div>\n            </div>\n          )}\n          <CardContent style={{ flex: 1 }}>\n            <CompactDataList disableSeparator={false}>\n              {listData?.map(({ subject, value }) => {\n                return <CompactDataListItem label={subject} value={value} />;\n              })}\n            </CompactDataList>\n          </CardContent>\n          <CardContent style={{ flex: 1, paddingTop: 0, paddingBottom: 16 }}>\n            <div className={classes.primaryButtonContainer}>\n              {detailsEvent && (\n                <FluentButton\n                  variant='outlined'\n                  endIcon={<ViewIcon />}\n                  onClick={detailsEvent}\n                >\n                  {t('Details')}\n                </FluentButton>\n              )}\n\n              <div>\n                {primaryActions?.length > 0 && (\n                  <FluentButton\n                    variant='contained'\n                    color='secondary'\n                    endIcon={<CaretDownSolid8Icon />}\n                    onClick={handleOnClickPrimaryAction}\n                    className={classes.actionButton}\n                  >\n                    {t('Actions')}\n                  </FluentButton>\n                )}\n                <Menu\n                  open={primaryActionAnchor ? true : false}\n                  onClose={() => {\n                    setPrimaryActionAnchor(null);\n                  }}\n                  anchorEl={primaryActionAnchor}\n                  anchorOrigin={{\n                    vertical: 'bottom',\n                    horizontal: 'left'\n                  }}\n                  transformOrigin={{\n                    vertical: 'top',\n                    horizontal: 'left'\n                  }}\n                >\n                  {primaryActions?.map((action) => (\n                    <MenuItem onClick={() => {action.onClick(data)}}>\n                      {action?.icon && (\n                        <ListItemIcon>{action.icon}</ListItemIcon>\n                      )}\n                      {action?.name}\n                    </MenuItem>\n                  ))}\n                </Menu>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport {\n  Divider,\n  Grid,\n  lighten,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  icon: {\n    margin: 'auto 5px auto 0',\n    padding: theme.spacing(1),\n    backgroundColor: (props) =>\n      lighten(props?.color ? props.color : theme.palette.info.main, 0.9),\n    borderRadius: theme.spacing(3),\n  },\n  valueContainer: {\n    marginRight: theme.spacing(1),\n  },\n  iconColor: {\n    color: (props) => props?.color,\n    borderRadius: theme.spacing(3),\n  },\n}));\n\nexport const Statistic = (props) => {\n  const { icon, value, title, color, onClick, hideDivider = false } = props;\n  const classes = useStyles({ color: color });\n\n  return (\n    <div>\n      <Grid container>\n        {!hideDivider && (\n          <Grid item>\n            <Divider orientation=\"vertical\" variant=\"middle\" />\n          </Grid>\n        )}\n        {icon && (\n          <Grid item className={classes.icon}>\n            <FluentIconButton\n              icon={getIconFromName(icon)}\n              className={classes.iconColor}\n              onClick={onClick}\n            />\n          </Grid>\n        )}\n        <Grid item className={classes.valueContainer}>\n          <Typography variant=\"h5\">{value}</Typography>\n          <Typography variant=\"caption\">{title}</Typography>\n        </Grid>\n      </Grid>\n    </div>\n  );\n};"],"mappings":"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"}

package/dist/StatusCellRenderer-DbPs7G8z.js

@@ -0,0 +1,18 @@
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import React from "react";
+
+//#region src/UI/templates/ui/renderers/StatusCellRenderer.jsx
+const StatusCellRenderer = (props) => {
+	const { value, getStatus, getLabel } = props;
+	const formattedLabel = (value$1) => {
+		return value$1?.replace(/([a-z])([A-Z])/g, "$1 $2")?.replace(/\b\w/g, (char) => char.toUpperCase());
+	};
+	return /* @__PURE__ */ React.createElement(StatusChip, {
+		status: getStatus(value),
+		label: getLabel ? formattedLabel(getLabel(value)) : formattedLabel(value)
+	});
+};
+
+//#endregion
+export { StatusCellRenderer as t };
+//# sourceMappingURL=StatusCellRenderer-DbPs7G8z.js.map

package/dist/StatusCellRenderer-DbPs7G8z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCellRenderer-DbPs7G8z.js","names":["value"],"sources":["../src/UI/templates/ui/renderers/StatusCellRenderer.jsx"],"sourcesContent":["import React from 'react';\nimport { StatusChip } from '../../../dataDisplay/status/StatusChip';\n\nexport const StatusCellRenderer = props => {\n  const { value, getStatus, getLabel } = props;\n  const formattedLabel = value => {\n    return value\n      ?.replace(/([a-z])([A-Z])/g, '$1 $2')\n      ?.replace(/\\b\\w/g, char => char.toUpperCase());\n  };\n  return (\n    <StatusChip\n      status={getStatus(value)}\n      label={getLabel ? formattedLabel(getLabel(value)) : formattedLabel(value)}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAa,sBAAqB,UAAS;CACzC,MAAM,EAAE,OAAO,WAAW,aAAa;CACvC,MAAM,kBAAiB,YAAS;AAC9B,SAAOA,SACH,QAAQ,mBAAmB,QAAQ,EACnC,QAAQ,UAAS,SAAQ,KAAK,aAAa,CAAC;;AAElD,QACE,oCAAC;EACC,QAAQ,UAAU,MAAM;EACxB,OAAO,WAAW,eAAe,SAAS,MAAM,CAAC,GAAG,eAAe,MAAM;GACzE"}

package/dist/StatusChip-DZAN88VU.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { Chip, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/UI/dataDisplay/status/StatusChip.jsx
+const useStyles = makeStyles((theme) => ({
+	smallChip: {
+		height: theme.spacing(2.5),
+		fontSize: "0.7rem",
+		"& .MuiChip-label": {
+			paddingLeft: theme.spacing(.75),
+			paddingRight: theme.spacing(.75)
+		}
+	},
+	actionable: { cursor: "pointer" },
+	success: {
+		backgroundColor: theme.palette.success.main,
+		color: "#FFF",
+		"&.MuiChip-outlined": {
+			color: theme.palette.success.main,
+			borderColor: theme.palette.success.main,
+			backgroundColor: "transparent"
+		}
+	},
+	warning: {
+		backgroundColor: theme.palette.warning.main,
+		color: "#FFF",
+		"&.MuiChip-outlined": {
+			color: theme.palette.warning.main,
+			borderColor: theme.palette.warning.main,
+			backgroundColor: "transparent"
+		}
+	},
+	error: {
+		backgroundColor: theme.palette.error.main,
+		color: "#FFF",
+		"&.MuiChip-outlined": {
+			color: theme.palette.error.main,
+			borderColor: theme.palette.error.main,
+			backgroundColor: "transparent"
+		}
+	},
+	info: {
+		backgroundColor: theme.palette.info.main,
+		color: theme.palette.getContrastText(theme.palette.info.main),
+		"&.MuiChip-outlined": {
+			color: theme.palette.info.main,
+			borderColor: theme.palette.info.main,
+			backgroundColor: "transparent"
+		}
+	}
+}));
+const StatusChip = ({ status, label, useSmallChip = false, isActionable = false, icon, variant = "default", onClick }) => {
+	const classes = useStyles();
+	const chipClass = clsx({
+		[classes.smallChip]: useSmallChip,
+		[classes.actionable]: isActionable,
+		[classes.success]: status === "success",
+		[classes.warning]: status === "warning",
+		[classes.error]: status === "error",
+		[classes.info]: status === "info"
+	});
+	return /* @__PURE__ */ React.createElement(Chip, {
+		className: chipClass,
+		label,
+		size: "small",
+		icon: icon || null,
+		variant,
+		onClick: isActionable ? onClick : null
+	});
+};
+
+//#endregion
+export { StatusChip as t };
+//# sourceMappingURL=StatusChip-DZAN88VU.js.map

package/dist/StatusChip-DZAN88VU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip-DZAN88VU.js","names":[],"sources":["../src/UI/dataDisplay/status/StatusChip.jsx"],"sourcesContent":["import React from 'react';\nimport { Chip, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  smallChip: {\n    height: theme.spacing(2.5),\n    fontSize: '0.7rem',\n    '& .MuiChip-label': {\n      paddingLeft: theme.spacing(0.75),\n      paddingRight: theme.spacing(0.75)\n    }\n  },\n  actionable: {\n    cursor: 'pointer'\n  },\n  success: {\n    backgroundColor: theme.palette.success.main,\n    color: '#FFF',\n    '&.MuiChip-outlined': {\n      color: theme.palette.success.main,\n      borderColor: theme.palette.success.main,\n      backgroundColor: 'transparent'\n    }\n  },\n  warning: {\n    backgroundColor: theme.palette.warning.main,\n    color: '#FFF',\n    '&.MuiChip-outlined': {\n      color: theme.palette.warning.main,\n      borderColor: theme.palette.warning.main,\n      backgroundColor: 'transparent'\n    }\n  },\n  error: {\n    backgroundColor: theme.palette.error.main,\n    color: '#FFF',\n    '&.MuiChip-outlined': {\n      color: theme.palette.error.main,\n      borderColor: theme.palette.error.main,\n      backgroundColor: 'transparent'\n    }\n  },\n  info: {\n    backgroundColor: theme.palette.info.main,\n    color: theme.palette.getContrastText(theme.palette.info.main),\n    '&.MuiChip-outlined': {\n      color: theme.palette.info.main,\n      borderColor: theme.palette.info.main,\n      backgroundColor: 'transparent'\n    }\n  }\n}));\n\nexport const StatusChip = ({\n  status,\n  label,\n  useSmallChip = false,\n  isActionable = false,\n  icon,\n  variant = 'default',\n  onClick,\n}) => {\n  const classes = useStyles();\n\n  const chipClass = clsx({\n    [classes.smallChip]: useSmallChip,\n    [classes.actionable]: isActionable,\n    [classes.success]: status === 'success',\n    [classes.warning]: status === 'warning',\n    [classes.error]: status === 'error',\n    [classes.info]: status === 'info'\n  });\n\n  return (\n    <Chip\n      className={chipClass}\n      label={label}\n      size='small'\n      icon={icon || null}\n      variant={variant}\n      onClick={isActionable ? onClick : null}\n    />\n  );\n};\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,QAAQ,MAAM,QAAQ,IAAI;EAC1B,UAAU;EACV,oBAAoB;GAClB,aAAa,MAAM,QAAQ,IAAK;GAChC,cAAc,MAAM,QAAQ,IAAK;GAClC;EACF;CACD,YAAY,EACV,QAAQ,WACT;CACD,SAAS;EACP,iBAAiB,MAAM,QAAQ,QAAQ;EACvC,OAAO;EACP,sBAAsB;GACpB,OAAO,MAAM,QAAQ,QAAQ;GAC7B,aAAa,MAAM,QAAQ,QAAQ;GACnC,iBAAiB;GAClB;EACF;CACD,SAAS;EACP,iBAAiB,MAAM,QAAQ,QAAQ;EACvC,OAAO;EACP,sBAAsB;GACpB,OAAO,MAAM,QAAQ,QAAQ;GAC7B,aAAa,MAAM,QAAQ,QAAQ;GACnC,iBAAiB;GAClB;EACF;CACD,OAAO;EACL,iBAAiB,MAAM,QAAQ,MAAM;EACrC,OAAO;EACP,sBAAsB;GACpB,OAAO,MAAM,QAAQ,MAAM;GAC3B,aAAa,MAAM,QAAQ,MAAM;GACjC,iBAAiB;GAClB;EACF;CACD,MAAM;EACJ,iBAAiB,MAAM,QAAQ,KAAK;EACpC,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,KAAK;EAC7D,sBAAsB;GACpB,OAAO,MAAM,QAAQ,KAAK;GAC1B,aAAa,MAAM,QAAQ,KAAK;GAChC,iBAAiB;GAClB;EACF;CACF,EAAE;AAEH,MAAa,cAAc,EACzB,QACA,OACA,eAAe,OACf,eAAe,OACf,MACA,UAAU,WACV,cACI;CACJ,MAAM,UAAU,WAAW;CAE3B,MAAM,YAAY,KAAK;GACpB,QAAQ,YAAY;GACpB,QAAQ,aAAa;GACrB,QAAQ,UAAU,WAAW;GAC7B,QAAQ,UAAU,WAAW;GAC7B,QAAQ,QAAQ,WAAW;GAC3B,QAAQ,OAAO,WAAW;EAC5B,CAAC;AAEF,QACE,oCAAC;EACC,WAAW;EACJ;EACP,MAAK;EACL,MAAM,QAAQ;EACL;EACT,SAAS,eAAe,UAAU;GAClC"}

package/dist/StatusFlags-CFU1oU2A.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Avatar, Box, Chip, lighten, makeStyles, useTheme } from "@material-ui/core";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { Skeleton } from "@material-ui/lab";
+
+//#region src/UI/dataDisplay/status/StatusFlags.jsx
+const useStyles = makeStyles((theme) => ({
+	rootContainer: {
+		alignItems: "flex-end",
+		gap: "6px",
+		flexWrap: "wrap",
+		flexDirection: "row-reverse"
+	},
+	skeleton: {
+		borderRadius: "5px",
+		minWidth: "323px"
+	}
+}));
+const AccountFlags = (props) => {
+	const { isLoading, flagList } = props;
+	const classes = useStyles(props);
+	const theme = useTheme();
+	const lightValue = .5;
+	const SeverityRange = {
+		success: {
+			textColor: theme.palette.success.light,
+			backgroundColor: lighten(theme.palette.success.light, lightValue)
+		},
+		warning: {
+			textColor: theme.palette.warning.light,
+			backgroundColor: lighten(theme.palette.warning.light, lightValue)
+		},
+		alert: {
+			textColor: theme.palette.error.light,
+			backgroundColor: lighten(theme.palette.error.light, lightValue)
+		},
+		info: {
+			textColor: theme.palette.primary.light,
+			backgroundColor: lighten(theme.palette.primary.light, lightValue)
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", null, isLoading ? /* @__PURE__ */ React.createElement(Skeleton, {
+		variant: "rect",
+		width: "100%",
+		height: "60px",
+		className: classes.skeleton
+	}) : /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		className: classes.rootContainer
+	}, flagList && flagList.length > 0 && flagList.map((item, index) => {
+		const { label = "Default", severity = "info", textColor, backgroundColor, customColorRange } = item;
+		const colorRange = customColorRange ?? SeverityRange;
+		const background = backgroundColor || colorRange[severity]?.backgroundColor;
+		const selectedTextColor = textColor || colorRange[severity]?.textColor;
+		return /* @__PURE__ */ React.createElement(Chip, {
+			label,
+			avatar: /* @__PURE__ */ React.createElement(Avatar, { style: { backgroundColor: selectedTextColor } }, label[0]?.toUpperCase() || "F"),
+			style: { backgroundColor: background }
+		});
+	})));
+};
+AccountFlags.propTypes = {
+	isLoading: PropTypes$1.bool,
+	flagList: PropTypes$1.array.isRequired,
+	customColorRange: PropTypes$1.object
+};
+
+//#endregion
+export { AccountFlags as t };
+//# sourceMappingURL=StatusFlags-CFU1oU2A.js.map

package/dist/StatusFlags-CFU1oU2A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusFlags-CFU1oU2A.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/status/StatusFlags.jsx"],"sourcesContent":["import React from 'react';\nimport { Box, Chip, Avatar, useTheme, makeStyles, lighten } from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { PropTypes } from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  rootContainer: {\n    alignItems: 'flex-end',\n    gap: '6px',\n    flexWrap: 'wrap',\n    flexDirection: 'row-reverse'\n  },\n  skeleton:{\n    borderRadius: '5px',\n    minWidth: '323px'\n  }\n}));\n\nexport const AccountFlags = (props) => {\n  const { isLoading, flagList } = props;\n\n  const classes = useStyles(props);\n  const theme = useTheme();\n  const lightValue = 0.5;\n\n  const SeverityRange = {\n    success: {\n      textColor: theme.palette.success.light,\n      backgroundColor: lighten(theme.palette.success.light, lightValue),\n    },\n    warning: {\n      textColor: theme.palette.warning.light,\n      backgroundColor: lighten(theme.palette.warning.light, lightValue),\n    },\n    alert: {\n      textColor: theme.palette.error.light,\n      backgroundColor: lighten(theme.palette.error.light, lightValue),\n    },\n    info: {\n      textColor: theme.palette.primary.light,\n      backgroundColor: lighten(theme.palette.primary.light, lightValue),\n    }\n  };\n\n  return (\n    <div>\n      {isLoading ? (\n        <Skeleton\n          variant='rect'\n          width='100%'\n          height='60px'\n          className={classes.skeleton}\n        />\n      ) : (\n        <Box display='flex' className={classes.rootContainer}>\n          {flagList &&\n            flagList.length > 0 &&\n            flagList.map((item, index) => {\n              const {\n                label = 'Default',\n                severity = 'info',\n                textColor,\n                backgroundColor,\n                customColorRange\n              } = item;\n\n              const colorRange = customColorRange ?? SeverityRange;\n              const background = backgroundColor || colorRange[severity]?.backgroundColor;\n              const selectedTextColor = textColor || colorRange[severity]?.textColor;\n\n              return (\n                <Chip\n                  label={label}\n                  avatar={\n                    <Avatar style={{ backgroundColor: selectedTextColor }}>\n                      {label[0]?.toUpperCase() || 'F'}\n                    </Avatar>\n                  }\n                  style={{ backgroundColor: background }}\n                />\n              );\n            })}\n        </Box>\n      )}\n    </div>\n  );\n};\n\nAccountFlags.propTypes = {\n  /** @type {?bool} loading indicator */\n  isLoading: PropTypes.bool,\n\n  /**\n   * @type {?array} list of flags to render, required array object structure e.g\n   * [{\n   *  label: 'Flag Name',\n   *  severity: 'Warning',       -- Determine the color of the flag\n   *  textColor: string,         -- optional text color, if it's not specified then it will use the severity object color'\n   *  backgroundColor: string,   -- optional background color, if it's not specified then it will use the severity object color'\n   * }]\n   */\n  flagList: PropTypes.array.isRequired,\n\n  /**\n   * @type {?object} optional object to specify custom or additional colors e.g\n   * {\n   *  success: {\n   *    textColor: '#4CAF50',\n   *    backgroundColor: 'rgba(76, 175, 80, 0.25)',\n   *  },\n   *  warning: {\n   *    textColor: '#FFB547',\n   *    backgroundColor: 'rgba(255, 152, 0, 0.25)',\n   *  }\n   * }\n   */\n  customColorRange: PropTypes.object\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,eAAe;EACb,YAAY;EACZ,KAAK;EACL,UAAU;EACV,eAAe;EAChB;CACD,UAAS;EACP,cAAc;EACd,UAAU;EACX;CACF,EAAE;AAEH,MAAa,gBAAgB,UAAU;CACrC,MAAM,EAAE,WAAW,aAAa;CAEhC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa;CAEnB,MAAM,gBAAgB;EACpB,SAAS;GACP,WAAW,MAAM,QAAQ,QAAQ;GACjC,iBAAiB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,WAAW;GAClE;EACD,SAAS;GACP,WAAW,MAAM,QAAQ,QAAQ;GACjC,iBAAiB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,WAAW;GAClE;EACD,OAAO;GACL,WAAW,MAAM,QAAQ,MAAM;GAC/B,iBAAiB,QAAQ,MAAM,QAAQ,MAAM,OAAO,WAAW;GAChE;EACD,MAAM;GACJ,WAAW,MAAM,QAAQ,QAAQ;GACjC,iBAAiB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,WAAW;GAClE;EACF;AAED,QACE,oCAAC,aACE,YACC,oCAAC;EACC,SAAQ;EACR,OAAM;EACN,QAAO;EACP,WAAW,QAAQ;GACnB,GAEF,oCAAC;EAAI,SAAQ;EAAO,WAAW,QAAQ;IACpC,YACC,SAAS,SAAS,KAClB,SAAS,KAAK,MAAM,UAAU;EAC5B,MAAM,EACJ,QAAQ,WACR,WAAW,QACX,WACA,iBACA,qBACE;EAEJ,MAAM,aAAa,oBAAoB;EACvC,MAAM,aAAa,mBAAmB,WAAW,WAAW;EAC5D,MAAM,oBAAoB,aAAa,WAAW,WAAW;AAE7D,SACE,oCAAC;GACQ;GACP,QACE,oCAAC,UAAO,OAAO,EAAE,iBAAiB,mBAAmB,IAClD,MAAM,IAAI,aAAa,IAAI,IACrB;GAEX,OAAO,EAAE,iBAAiB,YAAY;IACtC;GAEJ,CACA,CAEJ;;AAIV,aAAa,YAAY;CAEvB,WAAWA,YAAU;CAWrB,UAAUA,YAAU,MAAM;CAe1B,kBAAkBA,YAAU;CAC7B"}

package/dist/Sticky-CgByT8D7.js

@@ -0,0 +1,50 @@
+import { t as colors$1 } from "./colors-BONxjrOE.js";
+import { t as Token } from "./Token-2qpMI6YU.js";
+import React from "react";
+import { Divider, Typography, makeStyles } from "@material-ui/core";
+import { CalendarIcon, OpenInNewTabIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/components/dataDisplay/Sticky.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		background: (props) => {
+			if (colors$1.unity.hasOwnProperty(props.color)) return colors$1.unity[props.color].hint;
+			else return colors$1.unity.info.hint;
+		},
+		borderRadius: (props) => props.size === "large" ? 56 / 2 : 48 / 2,
+		margin: theme.spacing(1)
+	},
+	stickyChild: { display: "inline-table" }
+}), { name: "FluentListItem" });
+const Sticky = (props) => {
+	const classes = useStyles(props);
+	const { text, size, color } = props;
+	const typographyVariant = size === "large" ? "body2" : "body1";
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Token, {
+		className: classes.stickyChild,
+		icon: CalendarIcon,
+		size,
+		color
+	}), /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.stickyChild,
+		variant: typographyVariant
+	}, text ?? ""), /* @__PURE__ */ React.createElement(Token, {
+		className: classes.stickyChild,
+		icon: OpenInNewTabIcon,
+		variant: "filled",
+		size,
+		color
+	}));
+};
+Sticky.propTypes = {
+	text: PropTypes.string,
+	size: PropTypes.string,
+	color: PropTypes.string
+};
+
+//#endregion
+export { Sticky as t };
+//# sourceMappingURL=Sticky-CgByT8D7.js.map