udp-react-enterprise-component-library 25.18.1-beta.37 → 25.18.1-beta.38

package/dist/SiteHeader-orcFarUw.js

@@ -0,0 +1,668 @@
+import { t as ConfigService } from "./configService-C4uoG3wj.js";
+import { t as useUser } from "./useUser-wpHGo6jU.js";
+import { t as apiMutate } from "./useAxiosMutate-DeqKSi5z.js";
+import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-5Hp3qpk6.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { n as useShellStore } from "./shellStore-C8zfPsZ-.js";
+import { n as useActions } from "./useActions-BWBXokgQ.js";
+import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
+import { n as SiteHeaderRightComponentTarget } from "./SiteHeaderRightComponent-BwFUg3ur.js";
+import { t as AmbientPopoverMenuItem } from "./AmbientPopoverMenuItem-BZuX43zJ.js";
+import { n as useBuildEnvironment, t as APP_RIBBON_SPACE } from "./useBuildEnvironment-2gdqpmBX.js";
+import { t as SidebarCollapseButton } from "./SidebarCollapseButton-_UUtsftD.js";
+import { t as AppMenu } from "./AppMenu-DW1oQdFA.js";
+import { t as BreadCrumbMenu } from "./BreadCrumbMenu-AehSna6J.js";
+import { t as useTenant } from "./useTenant-CGaZEBEJ.js";
+import React, { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { AppBar, ClickAwayListener, Dialog, DialogContent, DialogTitle, Drawer, Grow, IconButton, List, ListItem, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, Popover, Popper, Toolbar, Typography, lighten, makeStyles, useMediaQuery, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronDownIcon, CollapseMenuIcon, TranslateIcon, WaffleIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Chat, Close, HelpOutline } from "@material-ui/icons";
+import i18n from "i18next";
+
+//#region src/shell/ui/MiniCollapsibleSidebar.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	root: {
+		width: theme?.dimensions?.drawerWidth,
+		flexShrink: 0,
+		whiteSpace: "nowrap"
+	},
+	expanded: { "&, & > $paper": {
+		width: theme.spacing(32),
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen
+		})
+	} },
+	collapsed: { "&, & > $paper": {
+		overflowX: "hidden",
+		width: theme.spacing(7) + 1,
+		transition: theme?.transitions?.create("width", {
+			easing: theme?.transitions?.easing?.sharp,
+			duration: theme?.transitions?.duration?.leavingScreen
+		})
+	} },
+	paper: {}
+}), { name: "MiniCollapsibleSidebar" });
+const MiniCollapsibleSidebar = (props) => {
+	const classes = useStyles$7(props);
+	const { expanded = true, className, children, ...other } = props;
+	return /* @__PURE__ */ React.createElement(Drawer, {
+		variant: "permanent",
+		open: true,
+		...other,
+		className: clsx(className, classes.root, expanded ? classes.expanded : classes.collapsed),
+		classes: {
+			root: classes.root,
+			paper: classes.paper
+		}
+	}, children);
+};
+var MiniCollapsibleSidebar_default = MiniCollapsibleSidebar;
+
+//#endregion
+//#region src/shell/ui/NavigationSidebar.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	root: { marginTop: 400 },
+	paper: {
+		backgroundColor: theme?.getThemeData()?.mode === "dark" ? "" : lighten(theme?.palette?.primary?.main, .9),
+		overflowX: "hidden"
+	},
+	list: {
+		flex: 1,
+		paddingTop: 0,
+		overflowY: "auto",
+		WebkitOverflowScrolling: "touch"
+	},
+	spacer: {
+		flex: 1,
+		minHeight: theme.spacing(2)
+	},
+	footer: {},
+	toolbar: {
+		padding: 0,
+		minHeight: ({ appRibbonSpace }) => theme.spacing(6) + appRibbonSpace
+	}
+}), { name: "NavigationSidebar" });
+const NavigationSidebar = (props) => {
+	const classes = useStyles$6({ appRibbonSpace: useBuildEnvironment() ? APP_RIBBON_SPACE : 0 });
+	const { data, toggleExpandClick, navMenuHoverOn, user, toggle = true, useGlobalState = false, ...other } = props;
+	const [expanded, setExpanded] = useState(true);
+	const { navigationExpanded, setNavigationExpanded } = useShellStore();
+	let navExpanded = useGlobalState ? navigationExpanded : expanded;
+	const [hoverExpand, setHoverExpand] = useState(false);
+	const handleHoverToggle = () => {
+		if (!navExpanded && navMenuHoverOn) setHoverExpand(true);
+	};
+	const handleHoverLeave = () => {
+		if (!navExpanded && navMenuHoverOn) setHoverExpand(false);
+	};
+	const handleToggleClick = useCallback(() => {
+		if (useGlobalState) setNavigationExpanded(!navigationExpanded);
+		else setExpanded((expanded$1) => !expanded$1);
+	}, [
+		setNavigationExpanded,
+		useGlobalState,
+		navigationExpanded
+	]);
+	return /* @__PURE__ */ React.createElement(MiniCollapsibleSidebar_default, {
+		classes: {
+			root: classes.root,
+			paper: classes.paper
+		},
+		expanded: navExpanded || hoverExpand,
+		onMouseEnter: handleHoverToggle,
+		onMouseLeave: handleHoverLeave,
+		PaperProps: {
+			elevation: 0,
+			variant: "outlined"
+		},
+		...other
+	}, /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }), toggle && /* @__PURE__ */ React.createElement(SidebarCollapseButton, {
+		id: "udpRecord-NavigationSidebar",
+		udprecordid: "udpRecord-NavigationSidebar",
+		expanded: navExpanded,
+		onClick: handleToggleClick
+	}), data && /* @__PURE__ */ React.createElement(AppMenu, {
+		menuItems: data,
+		sidebarExpanded: navExpanded,
+		user
+	}));
+};
+var NavigationSidebar_default = NavigationSidebar;
+
+//#endregion
+//#region src/shell/ui/AmbientProjectSwitcher.jsx
+const useStyles$5 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		background: (props) => props.backgroundColor ? props.backgroundColor : theme.palette.secondary.main,
+		borderRadius: 50,
+		padding: 6,
+		paddingLeft: 16
+	},
+	popoverRoot: {},
+	icon: {
+		color: theme.palette.primary.main,
+		borderRadius: 50
+	},
+	label: {
+		display: "block",
+		width: (props) => props.width ? props.width : 100,
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis"
+	},
+	listWrapper: { marginRight: theme.spacing(2) }
+}));
+const AmbientProjectSwitcher = (props) => {
+	const classes = useStyles$5(props);
+	const theme = useTheme();
+	const { data, selectedItem } = props;
+	const [anchorEl, setAnchorEl] = useState(null);
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const open = Boolean(anchorEl);
+	const id = open ? "open" : void 0;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.listWrapper }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label }, selectedItem)), /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.icon,
+		icon: ChevronDownIcon,
+		onClick: handleClick,
+		style: { background: theme.palette.common.white }
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		classes: { root: classes.popoverRoot },
+		square: true,
+		elevation: 6,
+		id,
+		open,
+		anchorEl,
+		onClose: handleClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, data && data.map((item) => {
+		return /* @__PURE__ */ React.createElement(AmbientPopoverMenuItem, {
+			label: item.label,
+			component: ChevronDownIcon,
+			click: () => item.click(item.label)
+		});
+	})))));
+};
+AmbientProjectSwitcher.propTypes = {
+	data: PropTypes.array,
+	selectedItem: PropTypes.string,
+	backgroundColor: PropTypes.string
+};
+
+//#endregion
+//#region src/shell/ui/ShellDropdown.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		alignItems: "center"
+	},
+	field: {
+		minWidth: 300,
+		maxWidth: 400,
+		width: "100%",
+		alignSelf: "left",
+		color: "#fff",
+		"& .MuiOutlinedInput-root": {
+			color: "#fff",
+			backgroundColor: "transparent",
+			"& fieldset": { borderColor: "rgba(255,255,255,0.6)" },
+			"&:hover fieldset": { borderColor: "rgba(255,255,255,0.85)" },
+			"&.Mui-focused fieldset": { borderColor: "#fff" },
+			"& input": {
+				paddingTop: 4,
+				paddingBottom: 4,
+				height: 20,
+				boxSizing: "border-box",
+				color: "#fff"
+			},
+			"& .MuiAutocomplete-input": { color: "#fff" }
+		},
+		"& .MuiInputBase-root": { color: "#fff" },
+		"& .MuiAutocomplete-popupIndicator, & .MuiAutocomplete-clearIndicator": {
+			color: "#fff",
+			opacity: .95
+		},
+		"& input::placeholder": { color: "rgba(255,255,255,0.7)" }
+	}
+}));
+function getDisplayName(item) {
+	if (!item && item !== 0) return "";
+	if (typeof item === "string" || typeof item === "number") return String(item);
+	if (typeof item === "object") {
+		const name = item.name ?? item.label ?? item.title ?? item.displayName;
+		return name !== void 0 && name !== null ? String(name) : "";
+	}
+	return String(item);
+}
+const ShellDropdown = (props) => {
+	const classes = useStyles$4();
+	const { componentName = "Item", data = [], value = null, onChange, optionLabelDisplayFunction = getDisplayName, placeholder, className, classProps, ...other } = props;
+	const placeholderText = placeholder ?? (!value ? `All ${componentName}s` : void 0);
+	return /* @__PURE__ */ React.createElement("div", { className: `${classes.root} ${className || ""}` }, /* @__PURE__ */ React.createElement(FluentTextFieldAutoComplete, {
+		className: classes.field,
+		classProps: {
+			autocompleteRoot: classes.field,
+			...classProps
+		},
+		options: data,
+		optionLabelDisplayFunction,
+		onChange,
+		value,
+		placeholder: placeholderText,
+		...other
+	}));
+};
+ShellDropdown.propTypes = {
+	componentName: PropTypes.string,
+	data: PropTypes.array,
+	value: PropTypes.any,
+	onChange: PropTypes.func,
+	optionLabelDisplayFunction: PropTypes.func,
+	placeholder: PropTypes.string,
+	className: PropTypes.string,
+	classProps: PropTypes.object
+};
+var ShellDropdown_default = ShellDropdown;
+
+//#endregion
+//#region src/shell/ui/LanguageSwitcher.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: { display: "flex" },
+	paper: { marginRight: theme.spacing(2) }
+}));
+const LanguageSwitcher = (props) => {
+	const classes = useStyles$3();
+	const [open, setOpen] = useState(false);
+	const anchorRef = useRef(null);
+	const { languages } = props;
+	const handleToggle = () => {
+		setOpen((prevOpen$1) => !prevOpen$1);
+	};
+	const handleClose = (event) => {
+		if (anchorRef.current && anchorRef.current.contains(event.target)) return;
+		setOpen(false);
+	};
+	function handleListKeyDown(event) {
+		if (event.key === "Tab") {
+			event.preventDefault();
+			setOpen(false);
+		}
+	}
+	const prevOpen = useRef(open);
+	useEffect(() => {
+		if (prevOpen.current === true && open === false) anchorRef.current.focus();
+		prevOpen.current = open;
+	}, [open]);
+	const handleLanguageChange = (event) => {
+		languageSelector(event.languageCode);
+	};
+	const languageSelector = (defaultLang) => {
+		i18n.changeLanguage(defaultLang);
+	};
+	if (languages != null) return /* @__PURE__ */ React.createElement("div", {
+		id: "udpRecord-LanguageSwitcher",
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButton, {
+		id: "udpRecord-LanguageSwitcher-IconButton",
+		udprecordid: "udpRecord-LanguageSwitcher-IconButton",
+		ref: anchorRef,
+		"aria-controls": open ? "menu-list-grow" : void 0,
+		"aria-haspopup": "true",
+		onClick: handleToggle
+	}, /* @__PURE__ */ React.createElement(TranslateIcon, { style: {
+		color: "white",
+		opacity: .8
+	} })), /* @__PURE__ */ React.createElement(Popper, {
+		open,
+		anchorEl: anchorRef.current,
+		role: void 0,
+		transition: true,
+		disablePortal: true
+	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React.createElement(Grow, {
+		...TransitionProps,
+		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
+	}, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(ClickAwayListener, {
+		id: "udpRecord-LanguageSwitcher-ClickAway",
+		udprecordid: "udpRecord-LanguageSwitcher-ClickAway",
+		onClickAway: handleClose
+	}, /* @__PURE__ */ React.createElement(MenuList, {
+		autoFocusItem: open,
+		id: "menu-list-grow",
+		udprecordid: "udpRecord-LanguageSwitcher-MenuList",
+		onKeyDown: handleListKeyDown,
+		onClick: () => setOpen(false)
+	}, languages.map((data) => /* @__PURE__ */ React.createElement(MenuItem, {
+		id: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
+		udprecordid: "udpRecord-LanguageSwitcher-MenuItem-" + data.languageLabel,
+		onClick: () => handleLanguageChange(data),
+		value: data.languageCode,
+		key: data.languageId
+	}, data.languageLabel)))))))));
+	else return null;
+};
+
+//#endregion
+//#region src/shell/ui/HelpCenter.jsx
+const UserFormSideSheet = lazy(() => import("./UserFormSideSheet-BJ8y-0uX.js"));
+const SupportCaseSideSheet = lazy(() => import("./SupportCaseSideSheet-CDUYESxz.js"));
+const preloadUserFormSideSheet = () => import("./UserFormSideSheet-BJ8y-0uX.js");
+const preloadSupportCaseSideSheet = () => import("./SupportCaseSideSheet-CDUYESxz.js");
+const useStyles$2 = makeStyles((theme) => ({
+	root: { display: "flex" },
+	popover: {
+		padding: theme.spacing(2),
+		maxWidth: 300
+	},
+	icon: { minWidth: 40 },
+	closeButton: {
+		position: "absolute",
+		right: theme.spacing(1),
+		top: theme.spacing(1),
+		color: theme.palette.grey[500]
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between"
+	},
+	dialog: {
+		minWidth: "80vw",
+		minHeight: "80vh"
+	}
+}));
+const HelpCenter = () => {
+	const classes = useStyles$2();
+	const { t } = useTranslation();
+	const { triggerAction } = useActions();
+	const user = useUser();
+	const productId = Number(ConfigService.config.UNITY_PRODUCT_ID);
+	const udpaiAPI = ConfigService.config.UDPAI_API_BASE;
+	const udpaisearch = ConfigService.config.AI_SEARCH_URL;
+	const udpaisearchkey = ConfigService.config.AI_SEARCH_KEY;
+	const udpaisearchindex = ConfigService.config.AI_SEARCH_INDEX_NAME;
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [isSupportCaseSideSheetOpen, setSupportCaseSideSheetOpen] = useState(false);
+	const [isUserFormOpen, setUserFormOpen] = useState(false);
+	const [supportCaseHealthOk, setSupportCaseHealthOk] = useState(false);
+	const hasPreloadedRef = useRef(false);
+	const handleOpenPopover = (event) => {
+		setAnchorEl(event.currentTarget);
+		if (!hasPreloadedRef.current) {
+			hasPreloadedRef.current = true;
+			try {
+				preloadUserFormSideSheet();
+			} catch (e) {}
+			try {
+				preloadSupportCaseSideSheet();
+			} catch (e) {}
+		}
+	};
+	const handleClosePopover = () => {
+		setAnchorEl(null);
+	};
+	const handleLaunchAction = useCallback(() => {
+		setAnchorEl(null);
+		triggerAction("CEE75B36-01B0-4FAC-9AE7-C1AC8A2A194F");
+	}, [triggerAction]);
+	const handleOpenSupportCaseSideSheet = () => {
+		setSupportCaseSideSheetOpen(true);
+		setAnchorEl(null);
+	};
+	const handleCloseSupportCaseSideSheet = () => {
+		setSupportCaseSideSheetOpen(false);
+	};
+	const handleOpenUserForm = () => {
+		setUserFormOpen(true);
+		setAnchorEl(null);
+	};
+	const handleCloseUserForm = () => {
+		setUserFormOpen(false);
+	};
+	const open = Boolean(anchorEl);
+	const id = open ? "help-center-popover" : void 0;
+	const shouldShowAddUsers = (productId$1) => {
+		const isValidProduct = [41, 53].includes(productId$1);
+		const isSecurityApiConfigured = !!ConfigService.securityV1ApiUrl;
+		const isValidUser = user.can.CAN_MANAGE_ROLES_USERS && user.can.CAN_MANAGE_USERS && user.can.CAN_VIEW_USERS;
+		return isValidProduct && isSecurityApiConfigured && isValidUser;
+	};
+	const getSupportCaseStatus = useCallback(async () => apiMutate(ConfigService.productV1ApiUrl, `udpunitysupport/healthCheck`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const getSupportCaseStatusUnity = useCallback(async () => apiMutate(ConfigService.supportV1ApiUrl, `ServiceHealth/Support`, {
+		method: "get",
+		headers: { currentTenantId: user?.currentTenantId }
+	}), [user?.currentTenantId]);
+	const showAddUsers = shouldShowAddUsers(productId);
+	const shouldShowChatAssistant = [
+		2,
+		41,
+		51,
+		68
+	].includes(productId) && udpaiAPI && udpaisearch && udpaisearchkey && udpaisearchindex;
+	const shouldShowSupportTicket = productId && supportCaseHealthOk;
+	useEffect(() => {
+		const supportCaseStatus = async () => {
+			try {
+				if (ConfigService.config.UNITY_PRODUCT_ID === "1") setSupportCaseHealthOk((await getSupportCaseStatusUnity())?.status === 200);
+				else setSupportCaseHealthOk((await getSupportCaseStatus())?.status === 200);
+			} catch (error) {
+				setSupportCaseHealthOk(false);
+			}
+		};
+		supportCaseStatus();
+	}, [getSupportCaseStatus, getSupportCaseStatusUnity]);
+	if (!showAddUsers && !shouldShowChatAssistant && !shouldShowSupportTicket) return /* @__PURE__ */ React.createElement("div", { id: "udpRecord-HelpCenter" });
+	return /* @__PURE__ */ React.createElement("div", {
+		id: "udpRecord-HelpCenter",
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement(IconButton, {
+		id: "udpRecord-HelpCenter-IconButton",
+		"aria-controls": id,
+		"aria-haspopup": "true",
+		onClick: handleOpenPopover
+	}, /* @__PURE__ */ React.createElement(HelpOutline, { style: {
+		color: "white",
+		opacity: .8
+	} })), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handleClosePopover,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "center"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "center"
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.popover }, /* @__PURE__ */ React.createElement("div", { className: classes.header }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("Help")), /* @__PURE__ */ React.createElement(IconButton, {
+		size: "small",
+		className: classes.closeButton,
+		onClick: handleClosePopover
+	}, /* @__PURE__ */ React.createElement(Close, null))), /* @__PURE__ */ React.createElement(List, {
+		component: "nav",
+		"aria-label": "Help options"
+	}, showAddUsers && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-AddUsers",
+		onClick: handleOpenUserForm
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(HelpOutline, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Add User") })), shouldShowChatAssistant && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-ChatAssistant",
+		onClick: handleLaunchAction
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(Chat, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Chat Assistant") })), shouldShowSupportTicket && /* @__PURE__ */ React.createElement(ListItem, {
+		button: true,
+		id: "udpRecord-HelpCenter-SupportTicket",
+		onClick: handleOpenSupportCaseSideSheet
+	}, /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.icon }, /* @__PURE__ */ React.createElement(HelpOutline, null)), /* @__PURE__ */ React.createElement(ListItemText, { primary: t("Submit Support Ticket") }))))), /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(UserFormSideSheet, {
+		open: isUserFormOpen,
+		onClose: handleCloseUserForm
+	})), /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(SupportCaseSideSheet, {
+		open: isSupportCaseSideSheetOpen,
+		onClose: handleCloseSupportCaseSideSheet,
+		handleCloseSupportCaseSideSheet,
+		onSubmit: (values) => {
+			console.log("Form submitted", values);
+		},
+		initialValues: {}
+	})));
+};
+
+//#endregion
+//#region src/shell/ui/EnvironmentRibbon.tsx
+const useStyles$1 = makeStyles({
+	root: {
+		width: "100vw",
+		height: APP_RIBBON_SPACE,
+		backgroundColor: ({ environment }) => `var(--env-ribbon-${environment})`,
+		color: "#ffffff",
+		display: "flex",
+		alignItems: "center",
+		position: "relative",
+		"&.staging": { color: "#000000" }
+	},
+	centerText: {
+		position: "absolute",
+		left: "50%",
+		transform: "translateX(-50%)",
+		fontWeight: 600
+	},
+	rightText: {
+		position: "absolute",
+		right: "10px",
+		fontWeight: 500
+	}
+});
+const EnvironmentRibbon = () => {
+	const tenantInfo = useTenant();
+	const buildEnvironment = useBuildEnvironment();
+	const classes = useStyles$1({ environment: buildEnvironment });
+	if (!buildEnvironment) return null;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: `${classes.root} ${buildEnvironment === "staging" ? "staging" : ""}`,
+		id: "udp-environment-banner"
+	}, /* @__PURE__ */ React.createElement(Typography$1, { className: classes.centerText }, buildEnvironment?.charAt(0).toUpperCase() + buildEnvironment?.slice(1) || ""), /* @__PURE__ */ React.createElement(Typography$1, { className: classes.rightText }, tenantInfo?.activeTenant?.tenantName));
+};
+
+//#endregion
+//#region src/shell/ui/SiteHeader.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		color: theme?.palette?.appBar?.contrastText,
+		zIndex: theme?.zIndex?.drawer + 1
+	},
+	spacer: { flex: 1 },
+	headerSpacer: {
+		padding: 0,
+		minHeight: ({ appRibbonSpace }) => 56 + appRibbonSpace
+	},
+	toolbar: {
+		padding: 0,
+		minHeight: theme.spacing(6)
+	},
+	appLaunch: { color: theme?.palette?.getContrastText(theme?.palette?.primary?.main) },
+	avatar: {
+		width: 25,
+		height: 25,
+		backgroundColor: theme?.palette?.secondary?.main
+	},
+	search: {
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(-1.35)
+	},
+	children: {
+		flex: 1,
+		minWidth: 5
+	}
+}), { name: "SiteHeader" });
+/**
+* A spacing component with the same height as the SiteHeader
+*/
+const SiteHeaderSpacer = (props) => {
+	const classes = useStyles({ appRibbonSpace: useBuildEnvironment() ? APP_RIBBON_SPACE : 0 });
+	const { className } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(className, classes.headerSpacer) });
+};
+/**
+* Site header including app bar
+*/
+const SiteHeader = (props) => {
+	const classes = useStyles(props);
+	const { className, returnTo, appContent, userAvatar, siteName, breadCrumbRoot = "home", color = "primary", setAppSwitcherOpen, breadCrumbAltLabelList, currentLocation, switcherData, selectedItem, switcherWidth, hideAppLaunch, languages, backgroundColor, ...other } = props;
+	const mobile = useMediaQuery(useTheme().breakpoints.up("sm"));
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AppBar, {
+		elevation: 0,
+		position: "fixed",
+		color,
+		...other,
+		className,
+		classes: { root: classes.root }
+	}, /* @__PURE__ */ React.createElement(EnvironmentRibbon, null), /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, mobile && !hideAppLaunch && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("desktop", true)
+	}, /* @__PURE__ */ React.createElement(WaffleIcon, null)), !mobile && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("desktop", true)
+	}, /* @__PURE__ */ React.createElement(CollapseMenuIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
+		component: "h1",
+		variant: "h6",
+		style: { marginLeft: hideAppLaunch && 16 }
+	}, siteName), mobile && /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 70 } }, React.isValidElement(breadCrumbRoot) ? breadCrumbRoot : breadCrumbRoot && typeof breadCrumbRoot === "object" && (breadCrumbRoot.data || breadCrumbRoot.componentName) ? /* @__PURE__ */ React.createElement(ShellDropdown_default, {
+		componentName: breadCrumbRoot.componentName,
+		data: breadCrumbRoot.data,
+		value: breadCrumbRoot.value,
+		onChange: breadCrumbRoot.onChange,
+		optionLabelDisplayFunction: breadCrumbRoot.optionLabelDisplayFunction,
+		placeholder: breadCrumbRoot.placeholder,
+		className: breadCrumbRoot.className,
+		classProps: breadCrumbRoot.classProps
+	}) : /* @__PURE__ */ React.createElement(BreadCrumbMenu, {
+		color: "primary",
+		root: breadCrumbRoot,
+		breadCrumbAltLabelList
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.children }, appContent), switcherData && /* @__PURE__ */ React.createElement(AmbientProjectSwitcher, {
+		data: switcherData,
+		selectedItem,
+		width: switcherWidth,
+		backgroundColor
+	}), !mobile && !hideAppLaunch && /* @__PURE__ */ React.createElement(IconButton, {
+		className: classes.appLaunch,
+		"aria-label": "App Launcher Menu",
+		onClick: () => setAppSwitcherOpen("mobile", true)
+	}, /* @__PURE__ */ React.createElement(WaffleIcon, null)), /* @__PURE__ */ React.createElement("div", { className: classes.additionalRightComponent }, /* @__PURE__ */ React.createElement(SiteHeaderRightComponentTarget, null)), /* @__PURE__ */ React.createElement(HelpCenter, null), /* @__PURE__ */ React.createElement(LanguageSwitcher, { languages }), /* @__PURE__ */ React.createElement("div", null, userAvatar))), /* @__PURE__ */ React.createElement(SiteHeaderSpacer, { className }));
+};
+var SiteHeader_default = SiteHeader;
+SiteHeader.propTypes = {
+	breadCrumbRoot: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.element,
+		PropTypes.node,
+		PropTypes.object
+	]),
+	backgroundColor: PropTypes.string
+};
+
+//#endregion
+export { LanguageSwitcher as a, NavigationSidebar_default as c, HelpCenter as i, SiteHeader_default as n, ShellDropdown as o, EnvironmentRibbon as r, AmbientProjectSwitcher as s, SiteHeaderSpacer as t };
+//# sourceMappingURL=SiteHeader-orcFarUw.js.map