udp-react-enterprise-component-library 25.14.1-beta.8 → 25.16.0

package/dist/EntityHeader-DOoeCEj3.js

@@ -1,879 +0,0 @@
-import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
-import { IconRenderer } from "./IconRenderer-DiwGfDul.js";
-import { AlertPill } from "./AggregateChip-EN9-abal.js";
-import { AvatarAlphabet } from "./AvatarAlphabet-BFwr2xyn.js";
-import { UdpAlertsContainer } from "./UdpAlertsContainer-COjS21Kf.js";
-import React, { Children, cloneElement, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Avatar, Chip, Divider, Link, Typography, alpha, darken, lighten, makeStyles } from "@material-ui/core";
-import clsx from "clsx";
-import { ChartIcon, FlagIcon } from "@fluentui/react-icons";
-import PropTypes from "prop-types";
-import { useTheme as useTheme$1 } from "@material-ui/core/styles";
-
-//#region src/UI/dataDisplay/ChipAlphabet.jsx
-const ChipAlphabet = ({ avatarCharacter, label, handleClick, avatar }) => {
-	let letter = "";
-	const highlight = .8;
-	switch (avatarCharacter) {
-		case "A":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#FFB900", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "B":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#E74856", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "C":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#0078D7", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "D":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#0099BC", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "E":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#7A7574", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "F":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#0078D7", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "G":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#FF8C00", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "H":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#E81123", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "I":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#0063B1", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				})
-			});
-			break;
-		case "J":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#2D7D9A", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "K":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#5D5A58", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "L":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#4C4A48", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "M":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#F7630C", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "N":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#EA005E", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "O":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#8E8CD8", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "P":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#00B7C3", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "Q":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#68768A", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "R":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#69797E", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "S":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#CA5010", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "T":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#C30052", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "U":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("FF4343", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "V":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#9A0089", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "W":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#10893E", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "X":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#567C73", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "Y":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#018574", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		case "Z":
-			letter = /* @__PURE__ */ React.createElement(Chip, {
-				style: { backgroundColor: lighten("#881798", highlight) },
-				label,
-				size: "small",
-				avatar: /* @__PURE__ */ React.createElement(AvatarAlphabet, {
-					size: "small",
-					avatarCharacter: avatar && avatarCharacter
-				}),
-				onClick: handleClick,
-				clickable: true
-			});
-			break;
-		default:
-	}
-	return letter;
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderContainer.jsx
-const useStyles$7 = makeStyles((theme) => ({
-	root: (props) => ({
-		display: "flex",
-		flexDirection: props.direction === "column" ? "column" : "row"
-	}),
-	rootBgDark: (props) => ({
-		backgroundColor: darken(props.color === "primary" ? theme.palette.primary.main : theme.palette.secondary.main, .2),
-		color: theme.palette.getContrastText(props.color === "primary" ? theme.palette.primary.main : theme.palette.secondary.main)
-	}),
-	rootBgSoft: (props) => ({ backgroundColor: alpha(props.color === "primary" ? theme.palette.primary.main : theme.palette.secondary.main, .15) }),
-	rootBgCustom: (props) => ({
-		backgroundColor: props.background,
-		color: props.color
-	})
-}));
-const EntityHeaderContainer = (props) => {
-	const { children, showSeperator, background } = props;
-	const arrayChildren = Children.toArray(children);
-	const classes = useStyles$7(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({
-		[classes.root]: true,
-		[classes.rootBg]: background === "light" || !background,
-		[classes.rootBgDark]: background === "dark",
-		[classes.rootBgSoft]: background === "soft",
-		[classes.rootBgCustom]: background && background !== "light" && background !== "dark" && background !== "soft"
-	}) }, Children.map(arrayChildren, (child, index) => {
-		const isLast = index === arrayChildren.length - 1;
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneElement(child, { isLast }), !isLast && showSeperator && /* @__PURE__ */ React.createElement(Divider, {
-			orientation: "vertical",
-			flexItem: true
-		}));
-	}));
-};
-EntityHeaderContainer.propTypes = {
-	children: PropTypes.node.isRequired,
-	showSeperator: PropTypes.bool,
-	background: PropTypes.oneOf([
-		"light",
-		"dark",
-		"soft"
-	]),
-	direction: PropTypes.oneOf(["row", "column"]),
-	color: PropTypes.oneOf(["primary", "secondary"])
-};
-EntityHeaderContainer.defaultProps = {
-	showSeperator: true,
-	background: "light",
-	direction: "row",
-	color: "primary"
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderList.jsx
-const useStyles$6 = makeStyles((theme) => ({ root: {} }));
-const EntityHeaderList = (props) => {
-	const { children, showSeperator = false } = props;
-	const arrayChildren = Children.toArray(children);
-	const classes = useStyles$6(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({ [classes.root]: true }) }, Children.map(arrayChildren, (child, index) => {
-		const isLast = index === arrayChildren.length - 1;
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneElement(child, { isLast }), !isLast && showSeperator && /* @__PURE__ */ React.createElement(Divider, null));
-	}));
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderListItem.jsx
-const useStyles$5 = makeStyles((theme) => ({
-	root: { display: "flex" },
-	labelRoot: {
-		color: "inherit",
-		marginRight: theme.spacing(.5),
-		opacity: .6
-	},
-	valueRoot: { color: "inherit" },
-	link: {
-		color: "inherit",
-		textDecoration: "none",
-		"&:hover": { textDecoration: "underline" }
-	}
-}));
-const EntityHeaderListItem = (props) => {
-	const { label, value, link, hideLabelSeperator = false, disablePadding = false } = props;
-	const classes = useStyles$5(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({
-		[classes.root]: true,
-		[classes.rootPadding]: !disablePadding
-	}) }, !!label && /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body1",
-		className: classes.labelRoot
-	}, label, !hideLabelSeperator && ":"), !!value && /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body1",
-		className: clsx({
-			[classes.valueRoot]: true,
-			[classes.valueFontWeigth]: true
-		})
-	}, link ? /* @__PURE__ */ React.createElement(Link, {
-		href: link,
-		className: classes.link,
-		target: "_blank"
-	}, value) : value));
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatList.jsx
-const useStyles$4 = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexWrap: "wrap",
-		"& > *": { marginLeft: 1 }
-	},
-	rootFlexGrow: { flexGrow: 1 }
-}));
-const EntityHeaderStatList = (props) => {
-	const { children, showSeperator, flexGrow = false } = props;
-	const arrayChildren = Children.toArray(children);
-	const classes = useStyles$4(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({
-		[classes.root]: true,
-		[classes.rootFlexGrow]: flexGrow
-	}) }, Children.map(arrayChildren, (child, index) => {
-		const isLast = index === arrayChildren.length - 1;
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, cloneElement(child, { isLast }), !isLast && showSeperator && /* @__PURE__ */ React.createElement(Divider, {
-			orientation: "vertical",
-			flexItem: true
-		}));
-	}));
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderStatListItem.jsx
-const useStyles$3 = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexDirection: "row",
-		alignItems: "center"
-	},
-	rootFlexGrow: { flexGrow: 1 },
-	rootBlock: (props) => ({
-		justifyContent: "center",
-		padding: theme.spacing(1)
-	}),
-	rootBlockDefault: (props) => ({ backgroundColor: alpha(theme.palette.type === "dark" ? theme.palette.common.black : theme.palette.common.white, .25) }),
-	rootBlockError: (props) => ({ backgroundColor: alpha(theme.palette.error.main, theme.palette.type === "dark" ? .7 : .1) }),
-	rootBlockSuccess: (props) => ({ backgroundColor: alpha(theme.palette.success.main, theme.palette.type === "dark" ? .2 : .3) }),
-	labelRoot: {
-		color: "inherit",
-		opacity: .6
-	},
-	rootLabelError: (props) => ({ color: theme.palette.error.main }),
-	rootLabelSuccess: (props) => ({ color: theme.palette.success.main }),
-	valueRoot: {
-		color: "inherit",
-		fontWeight: theme.typography.fontWeightMedium,
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center"
-	},
-	beforeValue: { marginRight: theme.spacing(.3) },
-	afterValue: {},
-	icon: { marginRight: theme.spacing(1) },
-	iconAvatar: { backgroundColor: "transparent" },
-	content: (props) => ({
-		display: "flex",
-		flexDirection: "column",
-		alignItems: props.icon ? "left" : "center"
-	})
-}));
-const EntityHeaderStatListItem = (props) => {
-	const { label = "Label", value = "Value", beforeValue, afterValue, flexGrow = false, labelColor, icon } = props;
-	const classes = useStyles$3(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({
-		[classes.root]: true,
-		[classes.rootFlexGrow]: flexGrow,
-		[classes.rootBlock]: true
-	}) }, icon && /* @__PURE__ */ React.createElement("div", { className: classes.icon }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.iconAvatar }, icon)), /* @__PURE__ */ React.createElement("div", { className: classes.content }, !!value && /* @__PURE__ */ React.createElement("div", { className: clsx({ [classes.valueRoot]: true }) }, beforeValue && /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body1",
-		className: classes.beforeValue
-	}, beforeValue), /* @__PURE__ */ React.createElement(Typography, {
-		variant: "h5",
-		className: clsx({
-			[classes.rootLabelError]: labelColor === "error",
-			[classes.rootLabelSuccess]: labelColor === "success"
-		})
-	}, value), afterValue && /* @__PURE__ */ React.createElement(Typography, {
-		variant: "body1",
-		className: classes.afterValue
-	}, afterValue)), !!label && /* @__PURE__ */ React.createElement(Typography, {
-		variant: "subtitle3",
-		className: classes.labelRoot,
-		component: "div"
-	}, label)));
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderSection.jsx
-const useStyles$2 = makeStyles((theme) => ({
-	root: { display: "flex" },
-	rootFlexGrow: { flexGrow: 1 },
-	rootFlexAlignStart: { alignItems: "flex-start" },
-	rootFlexAlignCenter: { alignItems: "center" },
-	rootFlexAlignEnd: { alignItems: "flex-end" },
-	rootFlexAlignStretch: { alignItems: "stretch" },
-	rootGutter: {
-		paddingLeft: theme.spacing(2),
-		paddingRight: theme.spacing(2)
-	},
-	rootPadding: {
-		paddingTop: theme.spacing(1),
-		paddingBottom: theme.spacing(1)
-	},
-	rootFlexJustifyStart: { justifyContent: "flex-start" },
-	rootFlexJustifyEnd: { justifyContent: "flex-end" }
-}));
-const EntityHeaderSection = (props) => {
-	const { children, disableGutter, disablePadding, flexGrow, justifyContent, alignItems } = props;
-	const classes = useStyles$2(props);
-	return /* @__PURE__ */ React.createElement("div", { className: clsx({
-		[classes.root]: true,
-		[classes.rootGutter]: !disableGutter,
-		[classes.rootPadding]: !disablePadding,
-		[classes.rootFlexGrow]: flexGrow,
-		[classes.rootFlexJustifyStart]: justifyContent === "start",
-		[classes.rootFlexJustifyEnd]: justifyContent === "end",
-		[classes.rootFlexAlignStart]: alignItems === "start",
-		[classes.rootFlexAlignCenter]: alignItems === "center",
-		[classes.rootFlexAlignEnd]: alignItems === "end",
-		[classes.rootFlexAlignStretch]: alignItems === "stretch"
-	}) }, children);
-};
-EntityHeaderSection.propTypes = {
-	children: PropTypes.node.isRequired,
-	disableGutter: PropTypes.bool,
-	disablePadding: PropTypes.bool,
-	flexGrow: PropTypes.bool,
-	justifyContent: PropTypes.oneOf(["start", "end"]),
-	alignItems: PropTypes.oneOf([
-		"start",
-		"center",
-		"end",
-		"stretch"
-	])
-};
-EntityHeaderSection.defaultProps = {
-	disableGutter: false,
-	disablePadding: false,
-	flexGrow: false
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/functions/useElementWidth.js
-/**
-* Custom hook that returns the current breakpoint of a provided element's width and helpers to compare against breakpoints.
-* @param {any} ref - The ref object whose current element will be observed for width changes.
-* @returns {{
-*   currentBreakpoint: string | null,
-*   isBreakpointUp: (breakpoint: string) => boolean,
-*   isBreakpointDown: (breakpoint: string) => boolean,
-* }}
-*/
-function useElementWidth(ref) {
-	const theme = useTheme$1();
-	const [width, setWidth] = useState(null);
-	useLayoutEffect(() => {
-		const resizeObserver = new ResizeObserver((entries) => {
-			for (let entry of entries) if (entry.target === ref.current) setWidth(entry.contentRect.width);
-		});
-		resizeObserver.observe(ref.current);
-		return () => {
-			resizeObserver.unobserve(ref.current);
-		};
-	}, [ref]);
-	const currentBreakpoint = width !== null ? Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-		if (width >= theme.breakpoints.values[breakpoint]) return breakpoint;
-		return acc;
-	}, null) : null;
-	const isBreakpointUp = (breakpoint) => {
-		const breakpoints = Object.keys(theme.breakpoints.values);
-		const index = breakpoints.indexOf(breakpoint);
-		const currentIndex = breakpoints.indexOf(currentBreakpoint);
-		return index <= currentIndex;
-	};
-	const isBreakpointDown = (breakpoint) => {
-		const breakpoints = Object.keys(theme.breakpoints.values);
-		const index = breakpoints.indexOf(breakpoint);
-		const currentIndex = breakpoints.indexOf(currentBreakpoint);
-		return index >= currentIndex;
-	};
-	return {
-		currentBreakpoint,
-		isBreakpointUp,
-		isBreakpointDown
-	};
-}
-useElementWidth.propTypes = { ref: PropTypes.shape({ current: PropTypes.instanceOf(Element) }) };
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/ui/EntityHeaderFlags.jsx
-const useStyles$1 = makeStyles((theme) => ({
-	flagIcon: { marginRight: theme.spacing(2) },
-	chipContainer: {
-		marginBottom: theme.spacing(-1),
-		"& > *": {
-			marginRight: theme.spacing(1),
-			marginBottom: theme.spacing(1)
-		}
-	}
-}));
-function flagLetter(str) {
-	return str.charAt(0).toUpperCase();
-}
-const EntityHeaderFlags = ({ data = [], color = "primary" }) => {
-	const classes = useStyles$1();
-	if (!data && data.length === 0) return;
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FluentIcon, {
-		size: "small",
-		component: FlagIcon,
-		className: classes.flagIcon
-	}), /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, data.map((item) => {
-		return /* @__PURE__ */ React.createElement(ChipAlphabet, {
-			avatar: true,
-			avatarCharacter: flagLetter(item.label),
-			label: item.label,
-			handleClick: () => item.handleClick
-		});
-	})));
-};
-
-//#endregion
-//#region src/UI/dataDisplay/entityHeader/EntityHeader.jsx
-const useStyles = makeStyles((theme) => ({ root: {} }));
-const EntityHeader = (props) => {
-	const { sectionProps, background, color, kpiProps, hiddenSections, chips, alerts, useUdpAlerts } = props;
-	const classes = useStyles(props);
-	const { section1, section2, section3, section4 } = sectionProps;
-	const { kpi1, kpi2, kpi3, kpi4 } = kpiProps;
-	const componentRef = useRef();
-	const [compactSize, setCompactSize] = useState(true);
-	const { isBreakpointUp } = useElementWidth(componentRef);
-	useEffect(() => {
-		if (isBreakpointUp("md")) setCompactSize(false);
-		else setCompactSize(true);
-	}, [isBreakpointUp]);
-	return /* @__PURE__ */ React.createElement("div", { ref: componentRef }, !!compactSize && /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
-		direction: "row",
-		showSeperator: true,
-		background,
-		color
-	}, /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !section1?.hidden && section1?.values?.length && section1.values?.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})), !section2?.hidden && section2?.values?.length && section2.values?.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})), !section3?.hidden && section3?.values?.length && section3.values?.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})), !section4?.hidden && section4?.values?.length && section4.values?.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	}))))), /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
-		direction: "row",
-		showSeperator: true,
-		background,
-		color
-	}, !compactSize && /* @__PURE__ */ React.createElement(React.Fragment, null, !section1?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section1?.values?.length && section1.values.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})))), !section2?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section2?.values?.length && section2.values.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})))), !section3?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section3?.values?.length && section3.values.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	})))), !section4?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderList, null, !!section4?.values?.length && section4.values.map((item) => /* @__PURE__ */ React.createElement(EntityHeaderListItem, {
-		label: item?.label,
-		value: item?.value,
-		link: item?.link
-	}))))), !kpiProps.hidden && /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }, /* @__PURE__ */ React.createElement(EntityHeaderStatList, { flexGrow: true }, !kpi1?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
-		value: kpi1?.value,
-		label: kpi1?.label,
-		labelColor: kpi1?.labelColor,
-		flexGrow: true,
-		icon: /* @__PURE__ */ React.createElement(IconRenderer, {
-			noBorder: true,
-			removeContainer: true,
-			value: {
-				color: { hex: "#" + kpi1?.color },
-				name: kpi1?.icon || "ChartIcon"
-			}
-		})
-	}), !kpi2?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
-		value: kpi2?.value,
-		label: kpi2?.label,
-		labelColor: kpi2?.labelColor,
-		flexGrow: true,
-		icon: /* @__PURE__ */ React.createElement(IconRenderer, {
-			noBorder: true,
-			removeContainer: true,
-			value: {
-				color: { hex: "#" + kpi2?.color },
-				name: kpi2?.icon || "ChartIcon"
-			}
-		})
-	}), !kpi3?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
-		value: kpi3?.value,
-		label: kpi3?.label,
-		labelColor: kpi3?.labelColor,
-		flexGrow: true,
-		icon: /* @__PURE__ */ React.createElement(IconRenderer, {
-			noBorder: true,
-			removeContainer: true,
-			value: {
-				color: { hex: "#" + kpi3?.color },
-				name: kpi3?.icon || "ChartIcon"
-			}
-		})
-	}), !kpi4?.hidden && /* @__PURE__ */ React.createElement(EntityHeaderStatListItem, {
-		value: kpi4?.value,
-		label: kpi4?.label,
-		labelColor: kpi4?.labelColor,
-		flexGrow: true,
-		icon: /* @__PURE__ */ React.createElement(IconRenderer, {
-			noBorder: true,
-			removeContainer: true,
-			value: {
-				color: { hex: "#" + kpi4?.color },
-				name: kpi4?.icon || "ChartIcon"
-			}
-		})
-	})))), (!hiddenSections.chips || !hiddenSections.alert) && /* @__PURE__ */ React.createElement(EntityHeaderContainer, {
-		className: classes.root,
-		background,
-		color
-	}, !hiddenSections.chips && /* @__PURE__ */ React.createElement(EntityHeaderSection, {
-		flexGrow: true,
-		alignItems: "center"
-	}, /* @__PURE__ */ React.createElement(EntityHeaderFlags, { data: chips?.map((chip) => ({ label: chip })) })), /* @__PURE__ */ React.createElement(EntityHeaderSection, { flexGrow: true }), !hiddenSections.alert && /* @__PURE__ */ React.createElement(EntityHeaderSection, null, useUdpAlerts ? /* @__PURE__ */ React.createElement(UdpAlertsContainer, null) : /* @__PURE__ */ React.createElement(AlertPill, {
-		errorCount: alerts?.error,
-		warningCount: alerts?.warning
-	}))));
-};
-EntityHeader.propTypes = {
-	sectionProps: PropTypes.shape({
-		section1: PropTypes.shape({
-			hidden: PropTypes.bool,
-			values: PropTypes.arrayOf(PropTypes.shape({
-				label: PropTypes.string,
-				value: PropTypes.string
-			}))
-		}),
-		section2: PropTypes.shape({
-			hidden: PropTypes.bool,
-			values: PropTypes.arrayOf(PropTypes.shape({
-				label: PropTypes.string,
-				value: PropTypes.string
-			}))
-		}),
-		section3: PropTypes.shape({
-			hidden: PropTypes.bool,
-			values: PropTypes.arrayOf(PropTypes.shape({
-				label: PropTypes.string,
-				value: PropTypes.string
-			}))
-		})
-	}).isRequired,
-	background: PropTypes.string,
-	color: PropTypes.string,
-	kpiProps: PropTypes.shape({
-		hidden: PropTypes.bool,
-		kpi1: PropTypes.shape({
-			label: PropTypes.string,
-			value: PropTypes.string,
-			color: PropTypes.string,
-			icon: PropTypes.string,
-			hidden: PropTypes.bool
-		}),
-		kpi2: PropTypes.shape({
-			label: PropTypes.string,
-			value: PropTypes.string,
-			color: PropTypes.string,
-			icon: PropTypes.string,
-			hidden: PropTypes.bool
-		}),
-		kpi3: PropTypes.shape({
-			label: PropTypes.string,
-			value: PropTypes.string,
-			color: PropTypes.string,
-			icon: PropTypes.string,
-			hidden: PropTypes.bool
-		}),
-		kpi4: PropTypes.shape({
-			label: PropTypes.string,
-			value: PropTypes.string,
-			color: PropTypes.string,
-			icon: PropTypes.string,
-			hidden: PropTypes.bool
-		})
-	}).isRequired,
-	hiddenSections: PropTypes.shape({
-		alert: PropTypes.bool,
-		chips: PropTypes.bool
-	}),
-	chips: PropTypes.arrayOf(PropTypes.string),
-	alerts: PropTypes.shape({
-		warning: PropTypes.number,
-		error: PropTypes.number
-	})
-};
-
-//#endregion
-export { ChipAlphabet, EntityHeader };
-//# sourceMappingURL=EntityHeader-DOoeCEj3.js.map