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

package/dist/defaultTabs-CFFLh6gs.js

@@ -0,0 +1,93 @@
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-B0Ntb9X_.js";
+import { t as FluentTabPanel } from "./FluentTabPanel-BEM6uZRI.js";
+import React, { useState } from "react";
+import { Box, Tab, Typography, lighten, makeStyles, styled } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx
+function a11yProps$1(index) {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+}
+const useStyles = makeStyles((theme) => ({ root: {
+	flexGrow: 1,
+	backgroundColor: theme.palette.background.paper
+} }));
+const FluentTabUtility = (props, ...otherProps) => {
+	const classes = useStyles();
+	const { TabList, block, className, variant, color, FluentSimpleTabsProps } = props;
+	const [value, setValue] = useState(0);
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+		value,
+		block,
+		onChange: handleChange,
+		...FluentSimpleTabsProps,
+		...otherProps
+	}, TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentSimpleTab, {
+			...otherProps,
+			key: index,
+			label: item.label,
+			icon: item.icon,
+			block,
+			badgeContent: item.badgeContent,
+			variant,
+			color,
+			...a11yProps$1(index)
+		});
+	})), TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			block,
+			value,
+			index,
+			key: index
+		}, item.child);
+	}));
+};
+
+//#endregion
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabPanels.jsx
+const a11yProps = (index) => {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+};
+/**
+* @type {import('@material-ui/core').StyledComponentProps<"root" | "labelIcon" | "textColorInherit" | "textColorPrimary" | "textColorSecondary" | "selected" | "disabled" | "fullWidth" | "wrapped" | "wrapper">}
+*/
+const StyledTab = styled(Tab)(({ theme, style }) => ({
+	textTransform: "none",
+	"&.Mui-selected": {
+		backgroundColor: lighten(theme.palette.secondary.light, .9),
+		color: theme.palette.primary.main
+	},
+	backgroundColor: theme.palette.background.paper,
+	...style
+}));
+const FluentTabPanels = (props) => {
+	const { children, value, index, sx, ...other } = props;
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "tabpanel",
+		hidden: value !== index,
+		id: `simple-tabpanel-${index}`,
+		"aria-labelledby": `simple-tab-${index}`,
+		...other
+	}, value === index && /* @__PURE__ */ React.createElement(Box, { sx: sx ? { ...sx } : { p: 3 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, children)));
+};
+FluentTabPanels.propTypes = {
+	children: PropTypes.node,
+	index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+	value: PropTypes.number.isRequired,
+	sx: PropTypes.object
+};
+
+//#endregion
+export { FluentTabUtility as i, StyledTab as n, a11yProps as r, FluentTabPanels as t };
+//# sourceMappingURL=defaultTabs-CFFLh6gs.js.map

package/dist/defaultTabs-CFFLh6gs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTabs-CFFLh6gs.js","names":["a11yProps"],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx","../src/UI/navigation/tabs/defaultTabs/FluentTabPanels.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentSimpleTabs } from '../defaultTabs/FluentSimpleTabs';\nimport { FluentSimpleTab } from '../defaultTabs/FluentSimpleTab';\nimport { FluentTabPanel } from '../defaultTabs/FluentTabPanel';\nimport clsx from 'clsx';\n\nfunction a11yProps(index) {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`\n  };\n}\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flexGrow: 1,\n    backgroundColor: theme.palette.background.paper\n  }\n}));\n\nexport const FluentTabUtility = (props, ...otherProps) => {\n  const classes = useStyles();\n  const { TabList, block, className, variant, color, FluentSimpleTabsProps } =\n    props;\n\n  const [value, setValue] = useState(0);\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <FluentSimpleTabs\n        value={value}\n        block={block}\n        onChange={handleChange}\n        {...FluentSimpleTabsProps}\n        {...otherProps}\n      >\n        {TabList.map((item, index) => {\n          return (\n            <FluentSimpleTab\n              {...otherProps}\n              key={index}\n              label={item.label}\n              icon={item.icon}\n              block={block}\n              badgeContent={item.badgeContent}\n              variant={variant}\n              color={color}\n              {...a11yProps(index)}\n            />\n          );\n        })}\n      </FluentSimpleTabs>\n\n      {TabList.map((item, index) => {\n        return (\n          <FluentTabPanel block={block} value={value} index={index} key={index}>\n            {item.child}\n          </FluentTabPanel>\n        );\n      })}\n    </div>\n  );\n};\n","import React from 'react'\nimport { Box, Tab, Typography, styled, lighten } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nexport const a11yProps = (index) => {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`,\n  };\n}\n\n/**\n * @type {import('@material-ui/core').StyledComponentProps<\"root\" | \"labelIcon\" | \"textColorInherit\" | \"textColorPrimary\" | \"textColorSecondary\" | \"selected\" | \"disabled\" | \"fullWidth\" | \"wrapped\" | \"wrapper\">}\n */\nexport const StyledTab = styled(Tab)(({ theme, style }) => ({\n  textTransform: \"none\",\n  '&.Mui-selected': {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.9),\n    color: theme.palette.primary.main,\n  },\n  backgroundColor: theme.palette.background.paper,\n  ...style\n}));\n\nexport const FluentTabPanels = (props) => {\n  const { children, value, index, sx, ...other } = props;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={value !== index}\n      id={`simple-tabpanel-${index}`}\n      aria-labelledby={`simple-tab-${index}`}\n      {...other}\n    >\n      {value === index && (\n        <Box sx={sx ? { ...sx } : { p: 3 }}>\n          <Typography variant=\"subtitle2\">{children}</Typography>\n        </Box>\n      )}\n    </div>\n  );\n}\n\nFluentTabPanels.propTypes = {\n  children: PropTypes.node,\n  index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  value: PropTypes.number.isRequired,\n  sx: PropTypes.object,\n}\n\n"],"mappings":";;;;;;;;AAOA,SAASA,YAAU,OAAO;AACxB,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;AAGH,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,UAAU;CACV,iBAAiB,MAAM,QAAQ,WAAW;CAC3C,EACF,EAAE;AAEH,MAAa,oBAAoB,OAAO,GAAG,eAAe;CACxD,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,0BACjD;CAEF,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,gBAAgB,OAAO,aAAa;AACxC,WAAS,SAAS;;AAGpB,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC;EACQ;EACA;EACP,UAAU;EACV,GAAI;EACJ,GAAI;IAEH,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GACC,GAAI;GACJ,KAAK;GACL,OAAO,KAAK;GACZ,MAAM,KAAK;GACJ;GACP,cAAc,KAAK;GACV;GACF;GACP,GAAIA,YAAU,MAAM;IACpB;GAEJ,CACe,EAElB,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GAAsB;GAAc;GAAc;GAAO,KAAK;KAC5D,KAAK,MACS;GAEnB,CACE;;;;;AC7DV,MAAa,aAAa,UAAU;AAClC,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;;;;AAMH,MAAa,YAAY,OAAO,IAAI,EAAE,EAAE,OAAO,aAAa;CAC1D,eAAe;CACf,kBAAkB;EAChB,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,OAAO,MAAM,QAAQ,QAAQ;EAC9B;CACD,iBAAiB,MAAM,QAAQ,WAAW;CAC1C,GAAG;CACJ,EAAE;AAEH,MAAa,mBAAmB,UAAU;CACxC,MAAM,EAAE,UAAU,OAAO,OAAO,IAAI,GAAG,UAAU;AAEjD,QACE,oCAAC;EACC,MAAK;EACL,QAAQ,UAAU;EAClB,IAAI,mBAAmB;EACvB,mBAAiB,cAAc;EAC/B,GAAI;IAEH,UAAU,SACT,oCAAC,OAAI,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,GAAG,IAChC,oCAAC,cAAW,SAAQ,eAAa,SAAsB,CACnD,CAEJ;;AAIV,gBAAgB,YAAY;CAC1B,UAAU,UAAU;CACpB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,OAAO,CAAC,CAAC;CACjE,OAAO,UAAU,OAAO;CACxB,IAAI,UAAU;CACf"}

package/dist/diffChecker/index.js

@@ -1,4 +1,3 @@
-import "../verticalStyles-CUPjFvB1.js";
 import { t as DiffChecker } from "../DiffChecker-D4AQHYDS.js";
 
 export { DiffChecker };

package/dist/entityHeader-gJY5fljR.js

@@ -0,0 +1,528 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as IconRenderer } from "./IconRenderer-Cl025sZh.js";
+import { n as AlertPill } from "./AggregateChip-CyVLcLQh.js";
+import { t as UdpAlertsContainer } from "./UdpAlertsContainer-Bsb0CsGV.js";
+import { t as ChipAlphabet } from "./ChipAlphabet-CektqzPW.js";
+import React, { Children, cloneElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Avatar, 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/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);
+		return breakpoints.indexOf(breakpoint) <= breakpoints.indexOf(currentBreakpoint);
+	};
+	const isBreakpointDown = (breakpoint) => {
+		const breakpoints = Object.keys(theme.breakpoints.values);
+		return breakpoints.indexOf(breakpoint) >= breakpoints.indexOf(currentBreakpoint);
+	};
+	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 { EntityHeader as t };
+//# sourceMappingURL=entityHeader-gJY5fljR.js.map