@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/AppHeaderMobile/index.js

@@ -1,191 +1,214 @@
-import { HeaderHeightArea } from "../HeaderHeightArea/index.js";
-import { StyledAppBar, appHeaderMobileBreakpoint } from "../AppHeader/shared/elements.js";
-import { NotificationsContents } from "../Notifications/NotificationsContents.js";
-import { useHeaderNotifications } from "../Notifications/useHeaderNotifications.js";
-import { AppHeaderListItem } from "../AppHeader/AppHeaderElements/AppHeaderListItem/index.js";
-import { useHeaderSearch } from "../AppHeader/Search/useHeaderSearch.js";
-import { mapAppHeaderItemToElement } from "../AppHeader/shared/utils.js";
-import { AppHeaderMainMenuMobile } from "./AppHeaderMainMenuMobile/index.js";
-import { Box, IconButton, Overlay } from "@codecademy/gamut";
-import { Background, css, states, theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { MenuIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeaderMobile/index.tsx
-const StyledOverlay = styled(Overlay)(css({
-	display: {
-		_: `block`,
-		[appHeaderMobileBreakpoint]: `none`
-	},
-	width: `100vw`,
-	height: `100vh`,
-	opacity: 1,
-	bg: `beige`,
-	position: `fixed`,
-	left: 0,
-	top: 0,
-	overflowX: `hidden`
-}));
-const StyledNavBar = styled.ul(css({
-	display: `flex`,
-	padding: 0,
-	listStyle: `none`,
-	margin: 0,
-	width: `100%`,
-	alignItems: "center"
-}), states({ center: { justifyContent: {
-	_: "center",
-	sm: "flex-start"
-} } }));
-const AppHeaderMobile = ({ action, items, notifications, search, redirectParam, isAnon, isEnterprise, isSimple, hideRightMenuButton, navigationMenuFormattedLabel }) => {
-	const [mobileMenuOpen, setMobileMenuOpen] = useState(void 0);
-	const [allowScroll, setAllowScroll] = useState(false);
-	const openButtonRef = useRef(null);
-	const closeButtonRef = useRef(null);
-	const [notificationsBell, notificationsView] = useHeaderNotifications({
-		settings: notifications,
-		Renderer: NotificationsContents
-	});
-	const [searchButton, searchPane] = useHeaderSearch({ ...search });
-	const openMobileMenu = () => {
-		setMobileMenuOpen(true);
-		if (closeButtonRef.current) closeButtonRef.current.focus();
-	};
-	useEffect(() => {
-		if (mobileMenuOpen === false && openButtonRef.current) setTimeout(() => {
-			if (openButtonRef.current) openButtonRef.current.focus();
-		}, 0);
-	}, [mobileMenuOpen]);
-	const mapItemsToElement = (items$1, side, hideExtraItems) => {
-		const shouldHideItems = hideExtraItems === true && items$1.length > 1;
-		return items$1.map((item, index) => {
-			const isHidable = !(index + 1 === items$1.length) && shouldHideItems;
-			return /* @__PURE__ */ jsx(AppHeaderListItem, {
-				ml: side === "right" && index === 0 ? "auto" : 0,
-				display: {
-					_: isHidable ? "none" : "flex",
-					xs: "flex"
-				},
-				children: mapAppHeaderItemToElement({
-					action,
-					isStandalone: void 0,
-					isTeams: void 0,
-					item,
-					mobile: true,
-					redirectParam
-				})
-			}, item.id);
-		});
-	};
-	const right = [
-		...!isEnterprise ? [searchButton] : [],
-		...notificationsBell && !isEnterprise ? [notificationsBell] : [],
-		...items.right
-	];
-	const onItemType = (type) => {
-		if (type && (type === "catalog-dropdown" || type === "resources-dropdown")) setAllowScroll(true);
-		else setAllowScroll(false);
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!mobileMenuOpen && /* @__PURE__ */ jsx(HeaderHeightArea, {
-			display: {
-				_: `block`,
-				[appHeaderMobileBreakpoint]: `none`
-			},
-			children: /* @__PURE__ */ jsx(StyledAppBar, {
-				as: "nav",
-				"aria-label": "Main",
-				children: /* @__PURE__ */ jsxs(StyledNavBar, {
-					center: !!isSimple,
-					children: [
-						mapItemsToElement(items.left, "left"),
-						mapItemsToElement(right, "right", true),
-						!hideRightMenuButton && /* @__PURE__ */ jsx(AppHeaderListItem, {
-							ml: right.length === 0 ? "auto" : 0,
-							children: /* @__PURE__ */ jsx(IconButton, {
-								"aria-expanded": mobileMenuOpen,
-								"aria-label": navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-								tip: "Site\nnavigation",
-								tipProps: {
-									alignment: "bottom-center",
-									placement: "floating"
-								},
-								"data-testid": "header-mobile-menu",
-								onClick: () => {
-									openMobileMenu();
-								},
-								icon: MenuIcon,
-								variant: "interface",
-								ref: openButtonRef
-							})
-						})
-					]
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(StyledOverlay, {
-			clickOutsideCloses: true,
-			escapeCloses: true,
-			isOpen: mobileMenuOpen,
-			onRequestClose: () => setMobileMenuOpen(false),
-			allowScroll,
-			children: /* @__PURE__ */ jsx(Background, {
-				bg: "beige",
-				children: /* @__PURE__ */ jsxs(HeaderHeightArea, {
-					display: {
-						_: `block`,
-						[appHeaderMobileBreakpoint]: `none`
-					},
-					as: "nav",
-					ariaLabel: "Main",
-					"data-testid": "header-mobile-menu-dropdown",
-					children: [/* @__PURE__ */ jsx(StyledAppBar, { children: /* @__PURE__ */ jsxs(StyledNavBar, { children: [mapItemsToElement(items.left, "left"), /* @__PURE__ */ jsx(AppHeaderListItem, {
-						ml: "auto",
-						children: /* @__PURE__ */ jsx(IconButton, {
-							"aria-expanded": mobileMenuOpen,
-							onClick: () => {
-								setMobileMenuOpen(false);
-							},
-							icon: MenuIcon,
-							"aria-label": navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-							tip: navigationMenuFormattedLabel?.siteNavigation || "Site navigation",
-							tipProps: {
-								alignment: "bottom-center",
-								placement: "floating"
-							},
-							ref: closeButtonRef
-						})
-					})] }) }), /* @__PURE__ */ jsx(Box, {
-						background: theme.colors.beige,
-						height: "auto",
-						children: /* @__PURE__ */ jsx(AppHeaderMainMenuMobile, {
-							action,
-							items: items.mainMenu,
-							getItemType: onItemType,
-							isAnon
-						})
-					})]
-				})
-			})
-		}),
-		!isEnterprise && /* @__PURE__ */ jsx(Box, {
-			display: {
-				_: `block`,
-				[appHeaderMobileBreakpoint]: `none`
-			},
-			children: searchPane
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: `block`,
-				[appHeaderMobileBreakpoint]: `none`
-			},
-			children: notificationsView
-		})
-	] });
-};
-
-//#endregion
-export { AppHeaderMobile };
+import _styled from "@emotion/styled/base";
+import { Box, IconButton, Overlay } from '@codecademy/gamut';
+import { MenuIcon } from '@codecademy/gamut-icons';
+import { Background, css, states, theme } from '@codecademy/gamut-styles';
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { AppHeaderListItem } from '../AppHeader/AppHeaderElements/AppHeaderListItem';
+import { useHeaderSearch } from '../AppHeader/Search/useHeaderSearch';
+import { appHeaderMobileBreakpoint, StyledAppBar } from '../AppHeader/shared';
+import { mapAppHeaderItemToElement } from '../AppHeader/shared/utils';
+import { AppHeaderMainMenuMobile } from '../AppHeaderMobile/AppHeaderMainMenuMobile';
+import { HeaderHeightArea } from '../HeaderHeightArea';
+import { NotificationsContents } from '../Notifications/NotificationsContents';
+import { useHeaderNotifications } from '../Notifications/useHeaderNotifications';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledOverlay = /*#__PURE__*/_styled(Overlay, {
+  target: "e14c9jns1",
+  label: "StyledOverlay"
+})(css({
+  display: {
+    _: `block`,
+    [appHeaderMobileBreakpoint]: `none`
+  },
+  width: `100vw`,
+  height: `100vh`,
+  opacity: 1,
+  bg: `beige`,
+  position: `fixed`,
+  left: 0,
+  top: 0,
+  overflowX: `hidden`
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0FwcEhlYWRlck1vYmlsZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIEJ1dHRvbkJhc2VFbGVtZW50cyxcbiAgSWNvbkJ1dHRvbixcbiAgT3ZlcmxheSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWVudUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBjc3MsIHN0YXRlcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBcHBIZWFkZXJTZWFyY2ggfSBmcm9tICcuLic7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaXN0SXRlbSB9IGZyb20gJy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaXN0SXRlbSc7XG5pbXBvcnQgeyB1c2VIZWFkZXJTZWFyY2ggfSBmcm9tICcuLi9BcHBIZWFkZXIvU2VhcmNoL3VzZUhlYWRlclNlYXJjaCc7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJBY3Rpb24sXG4gIEFwcEhlYWRlckl0ZW0sXG4gIGFwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnQsXG4gIEZvcm1hdHRlZE1vYmlsZUFwcEhlYWRlckl0ZW1zLFxuICBTdHlsZWRBcHBCYXIsXG59IGZyb20gJy4uL0FwcEhlYWRlci9zaGFyZWQnO1xuaW1wb3J0IHsgbWFwQXBwSGVhZGVySXRlbVRvRWxlbWVudCB9IGZyb20gJy4uL0FwcEhlYWRlci9zaGFyZWQvdXRpbHMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUgfSBmcm9tICcuLi9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbk1lbnVGb3JtYXR0ZWRMYWJlbCB9IGZyb20gJy4uL0dsb2JhbEhlYWRlcic7XG5pbXBvcnQgeyBIZWFkZXJIZWlnaHRBcmVhIH0gZnJvbSAnLi4vSGVhZGVySGVpZ2h0QXJlYSc7XG5pbXBvcnQgeyBOb3RpZmljYXRpb25zQ29udGVudHMgfSBmcm9tICcuLi9Ob3RpZmljYXRpb25zL05vdGlmaWNhdGlvbnNDb250ZW50cyc7XG5pbXBvcnQgeyBBcHBIZWFkZXJOb3RpZmljYXRpb25TZXR0aW5ncyB9IGZyb20gJy4uL05vdGlmaWNhdGlvbnMvdHlwZXMnO1xuaW1wb3J0IHsgdXNlSGVhZGVyTm90aWZpY2F0aW9ucyB9IGZyb20gJy4uL05vdGlmaWNhdGlvbnMvdXNlSGVhZGVyTm90aWZpY2F0aW9ucyc7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlck1vYmlsZVByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtczogRm9ybWF0dGVkTW9iaWxlQXBwSGVhZGVySXRlbXM7XG4gIG5vdGlmaWNhdGlvbnM/OiBBcHBIZWFkZXJOb3RpZmljYXRpb25TZXR0aW5ncztcbiAgcmVkaXJlY3RQYXJhbT86IHN0cmluZztcbiAgc2VhcmNoOiBBcHBIZWFkZXJTZWFyY2g7XG4gIGlzQW5vbjogYm9vbGVhbjtcbiAgLyoqXG4gICAqIHVzZWQgdG8gY29uZGl0b25hbGx5IGhpZGUgdGhlIGRlZmF1bHQgc2VhcmNoIGljb24gYW5kIG5vdGlmaWNhdGlvbiBiZWxsXG4gICAqL1xuICBpc0VudGVycHJpc2U/OiBib29sZWFuO1xuICBpc1NpbXBsZT86IGJvb2xlYW47XG4gIGhpZGVSaWdodE1lbnVCdXR0b24/OiBib29sZWFuO1xuICBuYXZpZ2F0aW9uTWVudUZvcm1hdHRlZExhYmVsPzogTmF2aWdhdGlvbk1lbnVGb3JtYXR0ZWRMYWJlbDtcbn07XG5cbmNvbnN0IFN0eWxlZE92ZXJsYXkgPSBzdHlsZWQoT3ZlcmxheSkoXG4gIGNzcyh7XG4gICAgZGlzcGxheTogeyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9LFxuICAgIHdpZHRoOiBgMTAwdndgLFxuICAgIGhlaWdodDogYDEwMHZoYCxcbiAgICBvcGFjaXR5OiAxLFxuICAgIGJnOiBgYmVpZ2VgLFxuICAgIHBvc2l0aW9uOiBgZml4ZWRgLFxuICAgIGxlZnQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIG92ZXJmbG93WDogYGhpZGRlbmAsXG4gIH0pXG4pO1xuXG5jb25zdCBTdHlsZWROYXZCYXIgPSBzdHlsZWQudWw8eyBjZW50ZXI/OiBib29sZWFuIH0+KFxuICBjc3Moe1xuICAgIGRpc3BsYXk6IGBmbGV4YCxcbiAgICBwYWRkaW5nOiAwLFxuICAgIGxpc3RTdHlsZTogYG5vbmVgLFxuICAgIG1hcmdpbjogMCxcbiAgICB3aWR0aDogYDEwMCVgLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB9KSxcbiAgc3RhdGVzKHtcbiAgICBjZW50ZXI6IHtcbiAgICAgIGp1c3RpZnlDb250ZW50OiB7XG4gICAgICAgIF86ICdjZW50ZXInLFxuICAgICAgICBzbTogJ2ZsZXgtc3RhcnQnLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlck1vYmlsZTogUmVhY3QuRkM8QXBwSGVhZGVyTW9iaWxlUHJvcHM+ID0gKHtcbiAgYWN0aW9uLFxuICBpdGVtcyxcbiAgbm90aWZpY2F0aW9ucyxcbiAgc2VhcmNoLFxuICByZWRpcmVjdFBhcmFtLFxuICBpc0Fub24sXG4gIGlzRW50ZXJwcmlzZSxcbiAgaXNTaW1wbGUsXG4gIGhpZGVSaWdodE1lbnVCdXR0b24sXG4gIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWwsXG59KSA9PiB7XG4gIGNvbnN0IFttb2JpbGVNZW51T3Blbiwgc2V0TW9iaWxlTWVudU9wZW5dID0gdXNlU3RhdGU8Ym9vbGVhbiB8IHVuZGVmaW5lZD4oXG4gICAgdW5kZWZpbmVkXG4gICk7XG4gIGNvbnN0IFthbGxvd1Njcm9sbCwgc2V0QWxsb3dTY3JvbGxdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICBjb25zdCBvcGVuQnV0dG9uUmVmID0gdXNlUmVmPEJ1dHRvbkJhc2VFbGVtZW50cz4obnVsbCk7XG4gIGNvbnN0IGNsb3NlQnV0dG9uUmVmID0gdXNlUmVmPEJ1dHRvbkJhc2VFbGVtZW50cz4obnVsbCk7XG5cbiAgY29uc3QgW25vdGlmaWNhdGlvbnNCZWxsLCBub3RpZmljYXRpb25zVmlld10gPSB1c2VIZWFkZXJOb3RpZmljYXRpb25zKHtcbiAgICBzZXR0aW5nczogbm90aWZpY2F0aW9ucyxcbiAgICBSZW5kZXJlcjogTm90aWZpY2F0aW9uc0NvbnRlbnRzLFxuICB9KTtcblxuICBjb25zdCBbc2VhcmNoQnV0dG9uLCBzZWFyY2hQYW5lXSA9IHVzZUhlYWRlclNlYXJjaCh7XG4gICAgLi4uc2VhcmNoLFxuICB9KTtcblxuICBjb25zdCBvcGVuTW9iaWxlTWVudSA9ICgpID0+IHtcbiAgICBzZXRNb2JpbGVNZW51T3Blbih0cnVlKTtcblxuICAgIGlmIChjbG9zZUJ1dHRvblJlZi5jdXJyZW50KSB7XG4gICAgICBjbG9zZUJ1dHRvblJlZi5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICB9O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKG1vYmlsZU1lbnVPcGVuID09PSBmYWxzZSAmJiBvcGVuQnV0dG9uUmVmLmN1cnJlbnQpIHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAob3BlbkJ1dHRvblJlZi5jdXJyZW50KSBvcGVuQnV0dG9uUmVmLmN1cnJlbnQuZm9jdXMoKTtcbiAgICAgIH0sIDApO1xuICAgIH1cbiAgfSwgW21vYmlsZU1lbnVPcGVuXSk7XG5cbiAgY29uc3QgbWFwSXRlbXNUb0VsZW1lbnQgPSA8VCBleHRlbmRzIEFwcEhlYWRlckl0ZW1bXT4oXG4gICAgaXRlbXM6IFQsXG4gICAgc2lkZTogJ2xlZnQnIHwgJ3JpZ2h0JyxcbiAgICBoaWRlRXh0cmFJdGVtcz86IGJvb2xlYW5cbiAgKSA9PiB7XG4gICAgY29uc3Qgc2hvdWxkSGlkZUl0ZW1zID0gaGlkZUV4dHJhSXRlbXMgPT09IHRydWUgJiYgaXRlbXMubGVuZ3RoID4gMTtcbiAgICByZXR1cm4gaXRlbXMubWFwKChpdGVtLCBpbmRleCkgPT4ge1xuICAgICAgY29uc3QgaXNMYXN0SXRlbSA9IGluZGV4ICsgMSA9PT0gaXRlbXMubGVuZ3RoO1xuICAgICAgY29uc3QgaXNIaWRhYmxlID0gIWlzTGFzdEl0ZW0gJiYgc2hvdWxkSGlkZUl0ZW1zO1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPEFwcEhlYWRlckxpc3RJdGVtXG4gICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgIG1sPXtzaWRlID09PSAncmlnaHQnICYmIGluZGV4ID09PSAwID8gJ2F1dG8nIDogMH1cbiAgICAgICAgICBkaXNwbGF5PXt7XG4gICAgICAgICAgICBfOiBpc0hpZGFibGUgPyAnbm9uZScgOiAnZmxleCcsXG4gICAgICAgICAgICB4czogJ2ZsZXgnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICB7bWFwQXBwSGVhZGVySXRlbVRvRWxlbWVudCh7XG4gICAgICAgICAgICBhY3Rpb24sXG4gICAgICAgICAgICBpc1N0YW5kYWxvbmU6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIGlzVGVhbXM6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIGl0ZW0sXG4gICAgICAgICAgICBtb2JpbGU6IHRydWUsXG4gICAgICAgICAgICByZWRpcmVjdFBhcmFtLFxuICAgICAgICAgIH0pfVxuICAgICAgICA8L0FwcEhlYWRlckxpc3RJdGVtPlxuICAgICAgKTtcbiAgICB9KTtcbiAgfTtcblxuICBjb25zdCByaWdodCA9IFtcbiAgICAuLi4oIWlzRW50ZXJwcmlzZSA/IFtzZWFyY2hCdXR0b25dIDogW10pLFxuICAgIC4uLihub3RpZmljYXRpb25zQmVsbCAmJiAhaXNFbnRlcnByaXNlID8gW25vdGlmaWNhdGlvbnNCZWxsXSA6IFtdKSxcbiAgICAuLi5pdGVtcy5yaWdodCxcbiAgXTtcblxuICBjb25zdCBvbkl0ZW1UeXBlID0gKHR5cGU6IHN0cmluZyB8IHVuZGVmaW5lZCkgPT4ge1xuICAgIGlmIChcbiAgICAgIHR5cGUgJiZcbiAgICAgICh0eXBlID09PSAnY2F0YWxvZy1kcm9wZG93bicgfHwgdHlwZSA9PT0gJ3Jlc291cmNlcy1kcm9wZG93bicpXG4gICAgKSB7XG4gICAgICBzZXRBbGxvd1Njcm9sbCh0cnVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0QWxsb3dTY3JvbGwoZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7IW1vYmlsZU1lbnVPcGVuICYmICggLy8gbmVlZCB0aGlzIGJjIEFwcEJhciBoYXMgYSBoYXJkY29kZWQgei1JbmRleCBvZiAxNVxuICAgICAgICA8SGVhZGVySGVpZ2h0QXJlYVxuICAgICAgICAgIGRpc3BsYXk9e3sgXzogYGJsb2NrYCwgW2FwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnRdOiBgbm9uZWAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxTdHlsZWRBcHBCYXIgYXM9XCJuYXZcIiBhcmlhLWxhYmVsPVwiTWFpblwiPlxuICAgICAgICAgICAgPFN0eWxlZE5hdkJhciBjZW50ZXI9eyEhaXNTaW1wbGV9PlxuICAgICAgICAgICAgICB7bWFwSXRlbXNUb0VsZW1lbnQoaXRlbXMubGVmdCwgJ2xlZnQnKX1cbiAgICAgICAgICAgICAge21hcEl0ZW1zVG9FbGVtZW50KHJpZ2h0LCAncmlnaHQnLCB0cnVlKX1cbiAgICAgICAgICAgICAgeyFoaWRlUmlnaHRNZW51QnV0dG9uICYmIChcbiAgICAgICAgICAgICAgICA8QXBwSGVhZGVyTGlzdEl0ZW0gbWw9e3JpZ2h0Lmxlbmd0aCA9PT0gMCA/ICdhdXRvJyA6IDB9PlxuICAgICAgICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17bW9iaWxlTWVudU9wZW59XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXA9eydTaXRlXFxubmF2aWdhdGlvbid9XG4gICAgICAgICAgICAgICAgICAgIHRpcFByb3BzPXt7XG4gICAgICAgICAgICAgICAgICAgICAgYWxpZ25tZW50OiAnYm90dG9tLWNlbnRlcicsXG4gICAgICAgICAgICAgICAgICAgICAgcGxhY2VtZW50OiAnZmxvYXRpbmcnLFxuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImhlYWRlci1tb2JpbGUtbWVudVwiXG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBvcGVuTW9iaWxlTWVudSgpO1xuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBpY29uPXtNZW51SWNvbn1cbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgICAgICAgICAgIHJlZj17b3BlbkJ1dHRvblJlZn1cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvU3R5bGVkTmF2QmFyPlxuICAgICAgICAgIDwvU3R5bGVkQXBwQmFyPlxuICAgICAgICA8L0hlYWRlckhlaWdodEFyZWE+XG4gICAgICApfVxuICAgICAgPFN0eWxlZE92ZXJsYXlcbiAgICAgICAgY2xpY2tPdXRzaWRlQ2xvc2VzXG4gICAgICAgIGVzY2FwZUNsb3Nlc1xuICAgICAgICBpc09wZW49e21vYmlsZU1lbnVPcGVufVxuICAgICAgICBvblJlcXVlc3RDbG9zZT17KCkgPT4gc2V0TW9iaWxlTWVudU9wZW4oZmFsc2UpfVxuICAgICAgICBhbGxvd1Njcm9sbD17YWxsb3dTY3JvbGx9XG4gICAgICA+XG4gICAgICAgIDxCYWNrZ3JvdW5kIGJnPVwiYmVpZ2VcIj5cbiAgICAgICAgICA8SGVhZGVySGVpZ2h0QXJlYVxuICAgICAgICAgICAgZGlzcGxheT17eyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9fVxuICAgICAgICAgICAgYXM9XCJuYXZcIlxuICAgICAgICAgICAgYXJpYUxhYmVsPVwiTWFpblwiXG4gICAgICAgICAgICBkYXRhLXRlc3RpZD1cImhlYWRlci1tb2JpbGUtbWVudS1kcm9wZG93blwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZEFwcEJhcj5cbiAgICAgICAgICAgICAgPFN0eWxlZE5hdkJhcj5cbiAgICAgICAgICAgICAgICB7bWFwSXRlbXNUb0VsZW1lbnQoaXRlbXMubGVmdCwgJ2xlZnQnKX1cbiAgICAgICAgICAgICAgICA8QXBwSGVhZGVyTGlzdEl0ZW0gbWw9XCJhdXRvXCI+XG4gICAgICAgICAgICAgICAgICA8SWNvbkJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXttb2JpbGVNZW51T3Blbn1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIHNldE1vYmlsZU1lbnVPcGVuKGZhbHNlKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgaWNvbj17TWVudUljb259XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXA9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXBQcm9wcz17e1xuICAgICAgICAgICAgICAgICAgICAgIGFsaWdubWVudDogJ2JvdHRvbS1jZW50ZXInLFxuICAgICAgICAgICAgICAgICAgICAgIHBsYWNlbWVudDogJ2Zsb2F0aW5nJyxcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgcmVmPXtjbG9zZUJ1dHRvblJlZn1cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICAgICAgPC9TdHlsZWROYXZCYXI+XG4gICAgICAgICAgICA8L1N0eWxlZEFwcEJhcj5cbiAgICAgICAgICAgIDxCb3ggYmFja2dyb3VuZD17dGhlbWUuY29sb3JzLmJlaWdlfSBoZWlnaHQ9XCJhdXRvXCI+XG4gICAgICAgICAgICAgIDxBcHBIZWFkZXJNYWluTWVudU1vYmlsZVxuICAgICAgICAgICAgICAgIGFjdGlvbj17YWN0aW9ufVxuICAgICAgICAgICAgICAgIGl0ZW1zPXtpdGVtcy5tYWluTWVudX1cbiAgICAgICAgICAgICAgICBnZXRJdGVtVHlwZT17b25JdGVtVHlwZX1cbiAgICAgICAgICAgICAgICBpc0Fub249e2lzQW5vbn1cbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvQm94PlxuICAgICAgICAgIDwvSGVhZGVySGVpZ2h0QXJlYT5cbiAgICAgICAgPC9CYWNrZ3JvdW5kPlxuICAgICAgPC9TdHlsZWRPdmVybGF5PlxuICAgICAgeyFpc0VudGVycHJpc2UgJiYgKFxuICAgICAgICA8Qm94IGRpc3BsYXk9e3sgXzogYGJsb2NrYCwgW2FwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnRdOiBgbm9uZWAgfX0+XG4gICAgICAgICAge3NlYXJjaFBhbmV9XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9fT5cbiAgICAgICAge25vdGlmaWNhdGlvbnNWaWV3fVxuICAgICAgPC9Cb3g+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+const StyledNavBar = /*#__PURE__*/_styled("ul", {
+  target: "e14c9jns0",
+  label: "StyledNavBar"
+})(css({
+  display: `flex`,
+  padding: 0,
+  listStyle: `none`,
+  margin: 0,
+  width: `100%`,
+  alignItems: 'center'
+}), states({
+  center: {
+    justifyContent: {
+      _: 'center',
+      sm: 'flex-start'
+    }
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJEcUIiLCJmaWxlIjoiLi4vLi4vc3JjL0FwcEhlYWRlck1vYmlsZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIEJ1dHRvbkJhc2VFbGVtZW50cyxcbiAgSWNvbkJ1dHRvbixcbiAgT3ZlcmxheSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWVudUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBjc3MsIHN0YXRlcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBcHBIZWFkZXJTZWFyY2ggfSBmcm9tICcuLic7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaXN0SXRlbSB9IGZyb20gJy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaXN0SXRlbSc7XG5pbXBvcnQgeyB1c2VIZWFkZXJTZWFyY2ggfSBmcm9tICcuLi9BcHBIZWFkZXIvU2VhcmNoL3VzZUhlYWRlclNlYXJjaCc7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJBY3Rpb24sXG4gIEFwcEhlYWRlckl0ZW0sXG4gIGFwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnQsXG4gIEZvcm1hdHRlZE1vYmlsZUFwcEhlYWRlckl0ZW1zLFxuICBTdHlsZWRBcHBCYXIsXG59IGZyb20gJy4uL0FwcEhlYWRlci9zaGFyZWQnO1xuaW1wb3J0IHsgbWFwQXBwSGVhZGVySXRlbVRvRWxlbWVudCB9IGZyb20gJy4uL0FwcEhlYWRlci9zaGFyZWQvdXRpbHMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUgfSBmcm9tICcuLi9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbk1lbnVGb3JtYXR0ZWRMYWJlbCB9IGZyb20gJy4uL0dsb2JhbEhlYWRlcic7XG5pbXBvcnQgeyBIZWFkZXJIZWlnaHRBcmVhIH0gZnJvbSAnLi4vSGVhZGVySGVpZ2h0QXJlYSc7XG5pbXBvcnQgeyBOb3RpZmljYXRpb25zQ29udGVudHMgfSBmcm9tICcuLi9Ob3RpZmljYXRpb25zL05vdGlmaWNhdGlvbnNDb250ZW50cyc7XG5pbXBvcnQgeyBBcHBIZWFkZXJOb3RpZmljYXRpb25TZXR0aW5ncyB9IGZyb20gJy4uL05vdGlmaWNhdGlvbnMvdHlwZXMnO1xuaW1wb3J0IHsgdXNlSGVhZGVyTm90aWZpY2F0aW9ucyB9IGZyb20gJy4uL05vdGlmaWNhdGlvbnMvdXNlSGVhZGVyTm90aWZpY2F0aW9ucyc7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlck1vYmlsZVByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtczogRm9ybWF0dGVkTW9iaWxlQXBwSGVhZGVySXRlbXM7XG4gIG5vdGlmaWNhdGlvbnM/OiBBcHBIZWFkZXJOb3RpZmljYXRpb25TZXR0aW5ncztcbiAgcmVkaXJlY3RQYXJhbT86IHN0cmluZztcbiAgc2VhcmNoOiBBcHBIZWFkZXJTZWFyY2g7XG4gIGlzQW5vbjogYm9vbGVhbjtcbiAgLyoqXG4gICAqIHVzZWQgdG8gY29uZGl0b25hbGx5IGhpZGUgdGhlIGRlZmF1bHQgc2VhcmNoIGljb24gYW5kIG5vdGlmaWNhdGlvbiBiZWxsXG4gICAqL1xuICBpc0VudGVycHJpc2U/OiBib29sZWFuO1xuICBpc1NpbXBsZT86IGJvb2xlYW47XG4gIGhpZGVSaWdodE1lbnVCdXR0b24/OiBib29sZWFuO1xuICBuYXZpZ2F0aW9uTWVudUZvcm1hdHRlZExhYmVsPzogTmF2aWdhdGlvbk1lbnVGb3JtYXR0ZWRMYWJlbDtcbn07XG5cbmNvbnN0IFN0eWxlZE92ZXJsYXkgPSBzdHlsZWQoT3ZlcmxheSkoXG4gIGNzcyh7XG4gICAgZGlzcGxheTogeyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9LFxuICAgIHdpZHRoOiBgMTAwdndgLFxuICAgIGhlaWdodDogYDEwMHZoYCxcbiAgICBvcGFjaXR5OiAxLFxuICAgIGJnOiBgYmVpZ2VgLFxuICAgIHBvc2l0aW9uOiBgZml4ZWRgLFxuICAgIGxlZnQ6IDAsXG4gICAgdG9wOiAwLFxuICAgIG92ZXJmbG93WDogYGhpZGRlbmAsXG4gIH0pXG4pO1xuXG5jb25zdCBTdHlsZWROYXZCYXIgPSBzdHlsZWQudWw8eyBjZW50ZXI/OiBib29sZWFuIH0+KFxuICBjc3Moe1xuICAgIGRpc3BsYXk6IGBmbGV4YCxcbiAgICBwYWRkaW5nOiAwLFxuICAgIGxpc3RTdHlsZTogYG5vbmVgLFxuICAgIG1hcmdpbjogMCxcbiAgICB3aWR0aDogYDEwMCVgLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB9KSxcbiAgc3RhdGVzKHtcbiAgICBjZW50ZXI6IHtcbiAgICAgIGp1c3RpZnlDb250ZW50OiB7XG4gICAgICAgIF86ICdjZW50ZXInLFxuICAgICAgICBzbTogJ2ZsZXgtc3RhcnQnLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlck1vYmlsZTogUmVhY3QuRkM8QXBwSGVhZGVyTW9iaWxlUHJvcHM+ID0gKHtcbiAgYWN0aW9uLFxuICBpdGVtcyxcbiAgbm90aWZpY2F0aW9ucyxcbiAgc2VhcmNoLFxuICByZWRpcmVjdFBhcmFtLFxuICBpc0Fub24sXG4gIGlzRW50ZXJwcmlzZSxcbiAgaXNTaW1wbGUsXG4gIGhpZGVSaWdodE1lbnVCdXR0b24sXG4gIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWwsXG59KSA9PiB7XG4gIGNvbnN0IFttb2JpbGVNZW51T3Blbiwgc2V0TW9iaWxlTWVudU9wZW5dID0gdXNlU3RhdGU8Ym9vbGVhbiB8IHVuZGVmaW5lZD4oXG4gICAgdW5kZWZpbmVkXG4gICk7XG4gIGNvbnN0IFthbGxvd1Njcm9sbCwgc2V0QWxsb3dTY3JvbGxdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICBjb25zdCBvcGVuQnV0dG9uUmVmID0gdXNlUmVmPEJ1dHRvbkJhc2VFbGVtZW50cz4obnVsbCk7XG4gIGNvbnN0IGNsb3NlQnV0dG9uUmVmID0gdXNlUmVmPEJ1dHRvbkJhc2VFbGVtZW50cz4obnVsbCk7XG5cbiAgY29uc3QgW25vdGlmaWNhdGlvbnNCZWxsLCBub3RpZmljYXRpb25zVmlld10gPSB1c2VIZWFkZXJOb3RpZmljYXRpb25zKHtcbiAgICBzZXR0aW5nczogbm90aWZpY2F0aW9ucyxcbiAgICBSZW5kZXJlcjogTm90aWZpY2F0aW9uc0NvbnRlbnRzLFxuICB9KTtcblxuICBjb25zdCBbc2VhcmNoQnV0dG9uLCBzZWFyY2hQYW5lXSA9IHVzZUhlYWRlclNlYXJjaCh7XG4gICAgLi4uc2VhcmNoLFxuICB9KTtcblxuICBjb25zdCBvcGVuTW9iaWxlTWVudSA9ICgpID0+IHtcbiAgICBzZXRNb2JpbGVNZW51T3Blbih0cnVlKTtcblxuICAgIGlmIChjbG9zZUJ1dHRvblJlZi5jdXJyZW50KSB7XG4gICAgICBjbG9zZUJ1dHRvblJlZi5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICB9O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKG1vYmlsZU1lbnVPcGVuID09PSBmYWxzZSAmJiBvcGVuQnV0dG9uUmVmLmN1cnJlbnQpIHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAob3BlbkJ1dHRvblJlZi5jdXJyZW50KSBvcGVuQnV0dG9uUmVmLmN1cnJlbnQuZm9jdXMoKTtcbiAgICAgIH0sIDApO1xuICAgIH1cbiAgfSwgW21vYmlsZU1lbnVPcGVuXSk7XG5cbiAgY29uc3QgbWFwSXRlbXNUb0VsZW1lbnQgPSA8VCBleHRlbmRzIEFwcEhlYWRlckl0ZW1bXT4oXG4gICAgaXRlbXM6IFQsXG4gICAgc2lkZTogJ2xlZnQnIHwgJ3JpZ2h0JyxcbiAgICBoaWRlRXh0cmFJdGVtcz86IGJvb2xlYW5cbiAgKSA9PiB7XG4gICAgY29uc3Qgc2hvdWxkSGlkZUl0ZW1zID0gaGlkZUV4dHJhSXRlbXMgPT09IHRydWUgJiYgaXRlbXMubGVuZ3RoID4gMTtcbiAgICByZXR1cm4gaXRlbXMubWFwKChpdGVtLCBpbmRleCkgPT4ge1xuICAgICAgY29uc3QgaXNMYXN0SXRlbSA9IGluZGV4ICsgMSA9PT0gaXRlbXMubGVuZ3RoO1xuICAgICAgY29uc3QgaXNIaWRhYmxlID0gIWlzTGFzdEl0ZW0gJiYgc2hvdWxkSGlkZUl0ZW1zO1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPEFwcEhlYWRlckxpc3RJdGVtXG4gICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgIG1sPXtzaWRlID09PSAncmlnaHQnICYmIGluZGV4ID09PSAwID8gJ2F1dG8nIDogMH1cbiAgICAgICAgICBkaXNwbGF5PXt7XG4gICAgICAgICAgICBfOiBpc0hpZGFibGUgPyAnbm9uZScgOiAnZmxleCcsXG4gICAgICAgICAgICB4czogJ2ZsZXgnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICB7bWFwQXBwSGVhZGVySXRlbVRvRWxlbWVudCh7XG4gICAgICAgICAgICBhY3Rpb24sXG4gICAgICAgICAgICBpc1N0YW5kYWxvbmU6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIGlzVGVhbXM6IHVuZGVmaW5lZCxcbiAgICAgICAgICAgIGl0ZW0sXG4gICAgICAgICAgICBtb2JpbGU6IHRydWUsXG4gICAgICAgICAgICByZWRpcmVjdFBhcmFtLFxuICAgICAgICAgIH0pfVxuICAgICAgICA8L0FwcEhlYWRlckxpc3RJdGVtPlxuICAgICAgKTtcbiAgICB9KTtcbiAgfTtcblxuICBjb25zdCByaWdodCA9IFtcbiAgICAuLi4oIWlzRW50ZXJwcmlzZSA/IFtzZWFyY2hCdXR0b25dIDogW10pLFxuICAgIC4uLihub3RpZmljYXRpb25zQmVsbCAmJiAhaXNFbnRlcnByaXNlID8gW25vdGlmaWNhdGlvbnNCZWxsXSA6IFtdKSxcbiAgICAuLi5pdGVtcy5yaWdodCxcbiAgXTtcblxuICBjb25zdCBvbkl0ZW1UeXBlID0gKHR5cGU6IHN0cmluZyB8IHVuZGVmaW5lZCkgPT4ge1xuICAgIGlmIChcbiAgICAgIHR5cGUgJiZcbiAgICAgICh0eXBlID09PSAnY2F0YWxvZy1kcm9wZG93bicgfHwgdHlwZSA9PT0gJ3Jlc291cmNlcy1kcm9wZG93bicpXG4gICAgKSB7XG4gICAgICBzZXRBbGxvd1Njcm9sbCh0cnVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2V0QWxsb3dTY3JvbGwoZmFsc2UpO1xuICAgIH1cbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7IW1vYmlsZU1lbnVPcGVuICYmICggLy8gbmVlZCB0aGlzIGJjIEFwcEJhciBoYXMgYSBoYXJkY29kZWQgei1JbmRleCBvZiAxNVxuICAgICAgICA8SGVhZGVySGVpZ2h0QXJlYVxuICAgICAgICAgIGRpc3BsYXk9e3sgXzogYGJsb2NrYCwgW2FwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnRdOiBgbm9uZWAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxTdHlsZWRBcHBCYXIgYXM9XCJuYXZcIiBhcmlhLWxhYmVsPVwiTWFpblwiPlxuICAgICAgICAgICAgPFN0eWxlZE5hdkJhciBjZW50ZXI9eyEhaXNTaW1wbGV9PlxuICAgICAgICAgICAgICB7bWFwSXRlbXNUb0VsZW1lbnQoaXRlbXMubGVmdCwgJ2xlZnQnKX1cbiAgICAgICAgICAgICAge21hcEl0ZW1zVG9FbGVtZW50KHJpZ2h0LCAncmlnaHQnLCB0cnVlKX1cbiAgICAgICAgICAgICAgeyFoaWRlUmlnaHRNZW51QnV0dG9uICYmIChcbiAgICAgICAgICAgICAgICA8QXBwSGVhZGVyTGlzdEl0ZW0gbWw9e3JpZ2h0Lmxlbmd0aCA9PT0gMCA/ICdhdXRvJyA6IDB9PlxuICAgICAgICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17bW9iaWxlTWVudU9wZW59XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXA9eydTaXRlXFxubmF2aWdhdGlvbid9XG4gICAgICAgICAgICAgICAgICAgIHRpcFByb3BzPXt7XG4gICAgICAgICAgICAgICAgICAgICAgYWxpZ25tZW50OiAnYm90dG9tLWNlbnRlcicsXG4gICAgICAgICAgICAgICAgICAgICAgcGxhY2VtZW50OiAnZmxvYXRpbmcnLFxuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImhlYWRlci1tb2JpbGUtbWVudVwiXG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBvcGVuTW9iaWxlTWVudSgpO1xuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBpY29uPXtNZW51SWNvbn1cbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgICAgICAgICAgIHJlZj17b3BlbkJ1dHRvblJlZn1cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvU3R5bGVkTmF2QmFyPlxuICAgICAgICAgIDwvU3R5bGVkQXBwQmFyPlxuICAgICAgICA8L0hlYWRlckhlaWdodEFyZWE+XG4gICAgICApfVxuICAgICAgPFN0eWxlZE92ZXJsYXlcbiAgICAgICAgY2xpY2tPdXRzaWRlQ2xvc2VzXG4gICAgICAgIGVzY2FwZUNsb3Nlc1xuICAgICAgICBpc09wZW49e21vYmlsZU1lbnVPcGVufVxuICAgICAgICBvblJlcXVlc3RDbG9zZT17KCkgPT4gc2V0TW9iaWxlTWVudU9wZW4oZmFsc2UpfVxuICAgICAgICBhbGxvd1Njcm9sbD17YWxsb3dTY3JvbGx9XG4gICAgICA+XG4gICAgICAgIDxCYWNrZ3JvdW5kIGJnPVwiYmVpZ2VcIj5cbiAgICAgICAgICA8SGVhZGVySGVpZ2h0QXJlYVxuICAgICAgICAgICAgZGlzcGxheT17eyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9fVxuICAgICAgICAgICAgYXM9XCJuYXZcIlxuICAgICAgICAgICAgYXJpYUxhYmVsPVwiTWFpblwiXG4gICAgICAgICAgICBkYXRhLXRlc3RpZD1cImhlYWRlci1tb2JpbGUtbWVudS1kcm9wZG93blwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZEFwcEJhcj5cbiAgICAgICAgICAgICAgPFN0eWxlZE5hdkJhcj5cbiAgICAgICAgICAgICAgICB7bWFwSXRlbXNUb0VsZW1lbnQoaXRlbXMubGVmdCwgJ2xlZnQnKX1cbiAgICAgICAgICAgICAgICA8QXBwSGVhZGVyTGlzdEl0ZW0gbWw9XCJhdXRvXCI+XG4gICAgICAgICAgICAgICAgICA8SWNvbkJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXttb2JpbGVNZW51T3Blbn1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIHNldE1vYmlsZU1lbnVPcGVuKGZhbHNlKTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgaWNvbj17TWVudUljb259XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXA9e1xuICAgICAgICAgICAgICAgICAgICAgIG5hdmlnYXRpb25NZW51Rm9ybWF0dGVkTGFiZWw/LnNpdGVOYXZpZ2F0aW9uIHx8XG4gICAgICAgICAgICAgICAgICAgICAgJ1NpdGUgbmF2aWdhdGlvbidcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICB0aXBQcm9wcz17e1xuICAgICAgICAgICAgICAgICAgICAgIGFsaWdubWVudDogJ2JvdHRvbS1jZW50ZXInLFxuICAgICAgICAgICAgICAgICAgICAgIHBsYWNlbWVudDogJ2Zsb2F0aW5nJyxcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgICAgcmVmPXtjbG9zZUJ1dHRvblJlZn1cbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICAgICAgPC9TdHlsZWROYXZCYXI+XG4gICAgICAgICAgICA8L1N0eWxlZEFwcEJhcj5cbiAgICAgICAgICAgIDxCb3ggYmFja2dyb3VuZD17dGhlbWUuY29sb3JzLmJlaWdlfSBoZWlnaHQ9XCJhdXRvXCI+XG4gICAgICAgICAgICAgIDxBcHBIZWFkZXJNYWluTWVudU1vYmlsZVxuICAgICAgICAgICAgICAgIGFjdGlvbj17YWN0aW9ufVxuICAgICAgICAgICAgICAgIGl0ZW1zPXtpdGVtcy5tYWluTWVudX1cbiAgICAgICAgICAgICAgICBnZXRJdGVtVHlwZT17b25JdGVtVHlwZX1cbiAgICAgICAgICAgICAgICBpc0Fub249e2lzQW5vbn1cbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvQm94PlxuICAgICAgICAgIDwvSGVhZGVySGVpZ2h0QXJlYT5cbiAgICAgICAgPC9CYWNrZ3JvdW5kPlxuICAgICAgPC9TdHlsZWRPdmVybGF5PlxuICAgICAgeyFpc0VudGVycHJpc2UgJiYgKFxuICAgICAgICA8Qm94IGRpc3BsYXk9e3sgXzogYGJsb2NrYCwgW2FwcEhlYWRlck1vYmlsZUJyZWFrcG9pbnRdOiBgbm9uZWAgfX0+XG4gICAgICAgICAge3NlYXJjaFBhbmV9XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiBgYmxvY2tgLCBbYXBwSGVhZGVyTW9iaWxlQnJlYWtwb2ludF06IGBub25lYCB9fT5cbiAgICAgICAge25vdGlmaWNhdGlvbnNWaWV3fVxuICAgICAgPC9Cb3g+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */");
+export const AppHeaderMobile = ({
+  action,
+  items,
+  notifications,
+  search,
+  redirectParam,
+  isAnon,
+  isEnterprise,
+  isSimple,
+  hideRightMenuButton,
+  navigationMenuFormattedLabel
+}) => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(undefined);
+  const [allowScroll, setAllowScroll] = useState(false);
+  const openButtonRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const [notificationsBell, notificationsView] = useHeaderNotifications({
+    settings: notifications,
+    Renderer: NotificationsContents
+  });
+  const [searchButton, searchPane] = useHeaderSearch({
+    ...search
+  });
+  const openMobileMenu = () => {
+    setMobileMenuOpen(true);
+    if (closeButtonRef.current) {
+      closeButtonRef.current.focus();
+    }
+  };
+  useEffect(() => {
+    if (mobileMenuOpen === false && openButtonRef.current) {
+      setTimeout(() => {
+        if (openButtonRef.current) openButtonRef.current.focus();
+      }, 0);
+    }
+  }, [mobileMenuOpen]);
+  const mapItemsToElement = (items, side, hideExtraItems) => {
+    const shouldHideItems = hideExtraItems === true && items.length > 1;
+    return items.map((item, index) => {
+      const isLastItem = index + 1 === items.length;
+      const isHidable = !isLastItem && shouldHideItems;
+      return /*#__PURE__*/_jsx(AppHeaderListItem, {
+        ml: side === 'right' && index === 0 ? 'auto' : 0,
+        display: {
+          _: isHidable ? 'none' : 'flex',
+          xs: 'flex'
+        },
+        children: mapAppHeaderItemToElement({
+          action,
+          isStandalone: undefined,
+          isTeams: undefined,
+          item,
+          mobile: true,
+          redirectParam
+        })
+      }, item.id);
+    });
+  };
+  const right = [...(!isEnterprise ? [searchButton] : []), ...(notificationsBell && !isEnterprise ? [notificationsBell] : []), ...items.right];
+  const onItemType = type => {
+    if (type && (type === 'catalog-dropdown' || type === 'resources-dropdown')) {
+      setAllowScroll(true);
+    } else {
+      setAllowScroll(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!mobileMenuOpen &&
+    /*#__PURE__*/
+    // need this bc AppBar has a hardcoded z-Index of 15
+    _jsx(HeaderHeightArea, {
+      display: {
+        _: `block`,
+        [appHeaderMobileBreakpoint]: `none`
+      },
+      children: /*#__PURE__*/_jsx(StyledAppBar, {
+        as: "nav",
+        "aria-label": "Main",
+        children: /*#__PURE__*/_jsxs(StyledNavBar, {
+          center: !!isSimple,
+          children: [mapItemsToElement(items.left, 'left'), mapItemsToElement(right, 'right', true), !hideRightMenuButton && /*#__PURE__*/_jsx(AppHeaderListItem, {
+            ml: right.length === 0 ? 'auto' : 0,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              "aria-expanded": mobileMenuOpen,
+              "aria-label": navigationMenuFormattedLabel?.siteNavigation || 'Site navigation',
+              tip: 'Site\nnavigation',
+              tipProps: {
+                alignment: 'bottom-center',
+                placement: 'floating'
+              },
+              "data-testid": "header-mobile-menu",
+              onClick: () => {
+                openMobileMenu();
+              },
+              icon: MenuIcon,
+              variant: "interface",
+              ref: openButtonRef
+            })
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(StyledOverlay, {
+      clickOutsideCloses: true,
+      escapeCloses: true,
+      isOpen: mobileMenuOpen,
+      onRequestClose: () => setMobileMenuOpen(false),
+      allowScroll: allowScroll,
+      children: /*#__PURE__*/_jsx(Background, {
+        bg: "beige",
+        children: /*#__PURE__*/_jsxs(HeaderHeightArea, {
+          display: {
+            _: `block`,
+            [appHeaderMobileBreakpoint]: `none`
+          },
+          as: "nav",
+          ariaLabel: "Main",
+          "data-testid": "header-mobile-menu-dropdown",
+          children: [/*#__PURE__*/_jsx(StyledAppBar, {
+            children: /*#__PURE__*/_jsxs(StyledNavBar, {
+              children: [mapItemsToElement(items.left, 'left'), /*#__PURE__*/_jsx(AppHeaderListItem, {
+                ml: "auto",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  "aria-expanded": mobileMenuOpen,
+                  onClick: () => {
+                    setMobileMenuOpen(false);
+                  },
+                  icon: MenuIcon,
+                  "aria-label": navigationMenuFormattedLabel?.siteNavigation || 'Site navigation',
+                  tip: navigationMenuFormattedLabel?.siteNavigation || 'Site navigation',
+                  tipProps: {
+                    alignment: 'bottom-center',
+                    placement: 'floating'
+                  },
+                  ref: closeButtonRef
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            background: theme.colors.beige,
+            height: "auto",
+            children: /*#__PURE__*/_jsx(AppHeaderMainMenuMobile, {
+              action: action,
+              items: items.mainMenu,
+              getItemType: onItemType,
+              isAnon: isAnon
+            })
+          })]
+        })
+      })
+    }), !isEnterprise && /*#__PURE__*/_jsx(Box, {
+      display: {
+        _: `block`,
+        [appHeaderMobileBreakpoint]: `none`
+      },
+      children: searchPane
+    }), /*#__PURE__*/_jsx(Box, {
+      display: {
+        _: `block`,
+        [appHeaderMobileBreakpoint]: `none`
+      },
+      children: notificationsView
+    })]
+  });
+};

package/dist/Avatar/Avatar.stories.js

@@ -0,0 +1,15 @@
+import { Avatar } from '.';
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: Avatar
+};
+export default meta;
+export const Primary = {
+  args: {
+    alt: 'The Codey character drinking Boba tea',
+    src: 'https://content.codecademy.com/courses/free/boba.svg'
+  }
+};

package/dist/Avatar/index.d.ts

@@ -1,40 +1,36 @@
-import { VisualTheme } from "@codecademy/gamut";
-import * as React$1 from "react";
-import { ResponsiveProp } from "@codecademy/variance";
-
-//#region src/Avatar/index.d.ts
-type AvatarImageProps = {
-  alt: string;
-  'aria-labelledby'?: never;
+import { VisualTheme } from '@codecademy/gamut';
+import { ResponsiveProp } from '@codecademy/variance';
+import * as React from 'react';
+export type AvatarImageProps = {
+    alt: string;
+    'aria-labelledby'?: never;
 } | {
-  alt?: never;
-  'aria-labelledby': string;
+    alt?: never;
+    'aria-labelledby': string;
 };
-type AvatarBaseProps = {
-  /**
-   * path to image asset
-   */
-  src: string;
-  /**
-   * Disables the drop shadow entirely.
-   */
-  disableDropshadow?: boolean;
-  /**
-   * Size of the Avatar.
-   */
-  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
-  /**
-   * Overrides styles on the Avatar container.
-   */
-  className?: string;
-  /**
-   * @deprecated
-   * This will be determined automatically by the theme moving forward.
-   * Supplying it will determine the color of drop shadow.
-   */
-  mode?: VisualTheme;
+export type AvatarBaseProps = {
+    /**
+     * path to image asset
+     */
+    src: string;
+    /**
+     * Disables the drop shadow entirely.
+     */
+    disableDropshadow?: boolean;
+    /**
+     * Size of the Avatar.
+     */
+    size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';
+    /**
+     * Overrides styles on the Avatar container.
+     */
+    className?: string;
+    /**
+     * @deprecated
+     * This will be determined automatically by the theme moving forward.
+     * Supplying it will determine the color of drop shadow.
+     */
+    mode?: VisualTheme;
 };
-type AvatarProps = AvatarBaseProps & AvatarImageProps;
-declare const Avatar: React$1.FC<AvatarProps>;
-//#endregion
-export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };
+export type AvatarProps = AvatarBaseProps & AvatarImageProps;
+export declare const Avatar: React.FC<AvatarProps>;