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

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.d.ts

@@ -1,10 +1,6 @@
-import { AppHeaderAction, AppHeaderResourcesDropdownItem } from "../../shared/types.js";
-import "../../shared/index.js";
-import "react";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.d.ts
-type AppHeaderResourceDropdownProps = AppHeaderAction & {
-  item: AppHeaderResourcesDropdownItem;
+import * as React from 'react';
+import { AppHeaderAction, AppHeaderResourcesDropdownItem } from '../../shared';
+export type AppHeaderResourceDropdownProps = AppHeaderAction & {
+    item: AppHeaderResourcesDropdownItem;
 };
-//#endregion
-export { AppHeaderResourceDropdownProps };
+export declare const AppHeaderResourcesDropdown: React.FC<AppHeaderResourceDropdownProps>;

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.js

@@ -1,102 +1,120 @@
-import { AnimatedMegaMenuDropdown } from "../../shared/elements.js";
-import { useAppHeaderContext } from "../AppHeaderProvider/index.js";
-import { DropdownPositions, useHeaderDisplayContext } from "../../../GlobalHeader/context.js";
-import { AppHeaderDropdownProvider } from "../AppHeaderDropdownProvider/index.js";
-import { AppHeaderDropdownNavButton } from "../AppHeaderNavButton/index.js";
-import { AppHeaderSection } from "../AppHeaderSection/index.js";
-import { RESOURCES_NAV_SECTIONS } from "./consts.js";
-import { ColorMode } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx
-const StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, { shouldForwardProp: (prop) => prop !== "narrowResourceDropdownPosition" && prop !== "wideResourceDropdownPosition" })`
-  top: 3.5rem;
-  left: ${({ narrowResourceDropdownPosition }) => {
-	return narrowResourceDropdownPosition;
-}};
-
-  @media (min-width: 1261px) {
-    left: ${({ wideResourceDropdownPosition }) => {
-	return wideResourceDropdownPosition;
-}};
-  }
-`;
-const AppHeaderResourcesDropdown = ({ action, item }) => {
-	const { text } = item;
-	const containerRef = useRef(null);
-	const buttonRef = useRef(null);
-	const dropdownRef = useRef(null);
-	const [isOpen, setIsOpen] = useState(false);
-	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
-	const { headerType } = useHeaderDisplayContext();
-	const { resourceDropdown } = DropdownPositions[headerType];
-	const narrowResourceDropdownPosition = resourceDropdown.narrow;
-	const wideResourceDropdownPosition = resourceDropdown.wide;
-	const animationFinished = () => {
-		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
-	};
-	const toggleIsOpen = () => setIsOpen((prev) => !prev);
-	const handleOnClick = (event) => {
-		toggleIsOpen();
-		if (!isOpen) {
-			action(event, item);
-			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
-		}
-	};
-	const handleClose = useCallback(() => {
-		setIsOpen(false);
-		buttonRef?.current?.focus();
-	}, []);
-	useEffect(() => {
-		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
-	}, [lastOpenedDropdown]);
-	useEffect(() => {
-		function handleClickOutside(event) {
-			const container = containerRef?.current;
-			const button = buttonRef?.current;
-			if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) handleClose();
-		}
-		document.addEventListener("mousedown", handleClickOutside);
-		document.addEventListener("blur", handleClickOutside);
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			document.removeEventListener("blur", handleClickOutside);
-		};
-	}, [
-		containerRef,
-		handleClose,
-		isOpen
-	]);
-	return /* @__PURE__ */ jsxs(AppHeaderDropdownProvider, {
-		handleClose,
-		children: [/* @__PURE__ */ jsx(AppHeaderDropdownNavButton, {
-			buttonRef,
-			handleOnClick,
-			isOpen,
-			text
-		}), /* @__PURE__ */ jsx(StyledAnimatedMegaMenuDropdown, {
-			isOpen,
-			narrowResourceDropdownPosition,
-			wideResourceDropdownPosition,
-			tabIndex: -1,
-			ref: dropdownRef,
-			"data-testid": "resources-menu-dropdown",
-			onAnimationComplete: animationFinished,
-			children: /* @__PURE__ */ jsx(ColorMode, {
-				mode: "light",
-				children: /* @__PURE__ */ jsx(AppHeaderSection, {
-					isOpen,
-					ref: containerRef,
-					navSections: RESOURCES_NAV_SECTIONS,
-					handleClose: () => setIsOpen(false),
-					type: "resources-dropdown"
-				})
-			})
-		})]
-	});
-};
-
-//#endregion
-export { AppHeaderResourcesDropdown };
+import _styled from "@emotion/styled/base";
+import { ColorMode } from '@codecademy/gamut-styles';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { DropdownPositions, useHeaderDisplayContext } from '../../../GlobalHeader/context';
+import { AnimatedMegaMenuDropdown } from '../../shared';
+import { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';
+import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
+import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';
+import { useAppHeaderContext } from '../AppHeaderProvider';
+import { AppHeaderSection } from '../AppHeaderSection';
+import { RESOURCES_NAV_SECTIONS } from './consts';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
+  // prevent the props from being passed to the DOM element, which would cause a React warning.
+  shouldForwardProp: prop => prop !== 'narrowResourceDropdownPosition' && prop !== 'wideResourceDropdownPosition',
+  target: "ekdg1bw0",
+  label: "StyledAnimatedMegaMenuDropdown"
+})("top:3.5rem;left:", ({
+  narrowResourceDropdownPosition
+}) => {
+  return narrowResourceDropdownPosition;
+}, ";@media (min-width: 1261px){left:", ({
+  wideResourceDropdownPosition
+}) => {
+  return wideResourceDropdownPosition;
+}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vTWFya2V0aW5nQmFubmVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyTmF2QnV0dG9uJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJQcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbn07XG5cbmNvbnN0IFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biA9IHN0eWxlZChBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sIHtcbiAgLy8gcHJldmVudCB0aGUgcHJvcHMgZnJvbSBiZWluZyBwYXNzZWQgdG8gdGhlIERPTSBlbGVtZW50LCB3aGljaCB3b3VsZCBjYXVzZSBhIFJlYWN0IHdhcm5pbmcuXG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBwcm9wICE9PSAnbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyAmJlxuICAgIHByb3AgIT09ICd3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG4gIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb246IHN0cmluZztcbn0+YFxuICB0b3A6IDMuNXJlbTtcbiAgbGVmdDogJHsoeyBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gIH19O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgICAgcmV0dXJuIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IHJlc291cmNlRHJvcGRvd24gfSA9IERyb3Bkb3duUG9zaXRpb25zW2hlYWRlclR5cGVdO1xuICBjb25zdCBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbiA9IHJlc291cmNlRHJvcGRvd24ud2lkZTtcblxuICBjb25zdCBhbmltYXRpb25GaW5pc2hlZCA9ICgpID0+IHtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17bmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uPXt3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17UkVTT1VSQ0VTX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgICAgaGFuZGxlQ2xvc2U9eygpID0+IHNldElzT3BlbihmYWxzZSl9XG4gICAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L0NvbG9yTW9kZT5cbiAgICAgIDwvU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duPlxuICAgIDwvQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */"));
+export const AppHeaderResourcesDropdown = ({
+  action,
+  item
+}) => {
+  const {
+    text
+  } = item;
+  const containerRef = useRef(null);
+  const buttonRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    lastOpenedDropdown,
+    setLastOpenedDropdown
+  } = useAppHeaderContext();
+  const {
+    headerType
+  } = useHeaderDisplayContext();
+  const {
+    resourceDropdown
+  } = DropdownPositions[headerType];
+  const narrowResourceDropdownPosition = resourceDropdown.narrow;
+  const wideResourceDropdownPosition = resourceDropdown.wide;
+  const animationFinished = () => {
+    if (isOpen && dropdownRef.current) {
+      dropdownRef.current.scrollTop = 0;
+    }
+  };
+  const toggleIsOpen = () => setIsOpen(prev => !prev);
+  const handleOnClick = event => {
+    toggleIsOpen();
+    if (!isOpen) {
+      action(event, item);
+      if (setLastOpenedDropdown) {
+        setLastOpenedDropdown(text);
+      }
+    }
+  };
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    buttonRef?.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (lastOpenedDropdown !== text && isOpen) {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastOpenedDropdown]);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      const container = containerRef?.current;
+      const button = buttonRef?.current;
+      if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) {
+        handleClose();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('blur', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('blur', handleClickOutside);
+    };
+  }, [containerRef, handleClose, isOpen]);
+  return /*#__PURE__*/_jsxs(AppHeaderDropdownProvider, {
+    handleClose: handleClose,
+    children: [/*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
+      buttonRef: buttonRef,
+      handleOnClick: handleOnClick,
+      isOpen: isOpen,
+      text: text
+    }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
+      isOpen: isOpen,
+      narrowResourceDropdownPosition: narrowResourceDropdownPosition,
+      wideResourceDropdownPosition: wideResourceDropdownPosition,
+      tabIndex: -1 // prevent from interfering with AppHeader focus logic
+      ,
+      ref: dropdownRef,
+      "data-testid": "resources-menu-dropdown",
+      onAnimationComplete: animationFinished,
+      children: /*#__PURE__*/_jsx(ColorMode, {
+        mode: "light",
+        children: /*#__PURE__*/_jsx(AppHeaderSection, {
+          isOpen: isOpen,
+          ref: containerRef,
+          navSections: RESOURCES_NAV_SECTIONS,
+          MarketingBanner: MarketingBanner,
+          handleClose: () => setIsOpen(false),
+          type: "resources-dropdown"
+        })
+      })
+    })]
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.d.ts

@@ -0,0 +1,7 @@
+export interface AppHeaderSectionContextType {
+    activePanel: number | null;
+    setActivePanel: (panel: number | null) => void;
+    tabIndex: number;
+}
+export declare const AppHeaderSectionContext: import("react").Context<AppHeaderSectionContextType>;
+export declare const useAppHeaderSectionContext: () => AppHeaderSectionContextType;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.js

@@ -1,16 +1,10 @@
-import { createContext, useContext } from "react";
-import { noop } from "lodash/fp";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx
-const AppHeaderSectionContext = createContext({
-	activePanel: null,
-	setActivePanel: noop,
-	tabIndex: 0,
-	isCoachingEnabled: void 0
+import { noop } from 'lodash/fp';
+import { createContext, useContext } from 'react';
+export const AppHeaderSectionContext = /*#__PURE__*/createContext({
+  activePanel: null,
+  setActivePanel: noop,
+  tabIndex: 0
 });
-const useAppHeaderSectionContext = () => {
-	return useContext(AppHeaderSectionContext);
-};
-
-//#endregion
-export { AppHeaderSectionContext, useAppHeaderSectionContext };
+export const useAppHeaderSectionContext = () => {
+  return useContext(AppHeaderSectionContext);
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type MobileBackButtonProps = {
+    handleClose: () => void;
+    type: 'catalog-dropdown' | 'resources-dropdown';
+};
+export declare const MobileBackButton: React.FC<MobileBackButtonProps>;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.js

@@ -1,83 +1,89 @@
-import { NavIconButton, NavigationButton, SmallMenuButton } from "./elements.js";
-import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
-import { Box, FlexBox, Text } from "@codecademy/gamut";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeftIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx
-const MobileBackButton = ({ handleClose, type }) => {
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const handleBackButtonClick = (event) => {
-		globalHeaderItemClick(event, {
-			id: "back",
-			text: "Back",
-			type
-		});
-		handleClose();
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: "none",
-				sm: "block"
-			},
-			children: /* @__PURE__ */ jsx(NavigationButton, {
-				isActive: false,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: "Back" })]
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: "none",
-				xs: "grid",
-				sm: "none"
-			},
-			ml: 8,
-			gridColumn: "1",
-			gridRow: "1",
-			children: /* @__PURE__ */ jsx(NavIconButton, {
-				onClick: handleBackButtonClick,
-				icon: ArrowLeftIcon,
-				tip: "Back to main navigation",
-				tipProps: {
-					alignment: "right-center",
-					narrow: false,
-					placement: "floating"
-				},
-				"aria-label": "Back to main navigation"
-			})
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: "flex",
-				xs: "none"
-			},
-			children: /* @__PURE__ */ jsx(SmallMenuButton, {
-				index: 0,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: "Back" })]
-				})
-			})
-		})
-	] });
-};
-
-//#endregion
-export { MobileBackButton };
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import { ArrowLeftIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { NavIconButton, NavigationButton, SmallMenuButton } from './elements';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const MobileBackButton = ({
+  handleClose,
+  type
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const handleBackButtonClick = event => {
+    globalHeaderItemClick(event, {
+      id: 'back',
+      text: 'Back',
+      type
+    });
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      display: {
+        _: 'none',
+        sm: 'block'
+      },
+      children: /*#__PURE__*/_jsx(NavigationButton, {
+        isActive: false,
+        onClick: handleBackButtonClick,
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          gap: 8,
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Box, {
+            height: 24,
+            width: 24,
+            children: /*#__PURE__*/_jsx(ArrowLeftIcon, {
+              size: 24
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            children: "Back"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      display: {
+        _: 'none',
+        xs: 'grid',
+        sm: 'none'
+      },
+      ml: 8,
+      gridColumn: "1",
+      gridRow: "1",
+      children: /*#__PURE__*/_jsx(NavIconButton, {
+        onClick: handleBackButtonClick,
+        icon: ArrowLeftIcon,
+        tip: "Back to main navigation",
+        tipProps: {
+          alignment: 'right-center',
+          narrow: false,
+          placement: 'floating'
+        },
+        "aria-label": "Back to main navigation"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      display: {
+        _: 'flex',
+        xs: 'none'
+      },
+      children: /*#__PURE__*/_jsx(SmallMenuButton, {
+        index: 0,
+        onClick: handleBackButtonClick,
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          gap: 8,
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Box, {
+            height: 24,
+            width: 24,
+            children: /*#__PURE__*/_jsx(ArrowLeftIcon, {
+              size: 24
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            children: "Back"
+          })]
+        })
+      })
+    })]
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type MobileNavMenuProps = {
+    handleClose: () => void;
+    type: 'catalog-dropdown' | 'resources-dropdown';
+    navSections: {
+        item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+        panel: React.ComponentType;
+    }[];
+};
+export declare const MobileNavMenu: React.FC<MobileNavMenuProps>;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.js

@@ -1,49 +1,61 @@
-import { SmallMenuButton } from "./elements.js";
-import { useAppHeaderSectionContext } from "./AppHeaderSectionContext.js";
-import { MobileBackButton } from "./MobileBackButton.js";
-import { Box, FlexBox, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx
-const MobileNavMenu = ({ handleClose, type, navSections }) => {
-	const { activePanel, setActivePanel } = useAppHeaderSectionContext();
-	const ActivePanel = navSections[activePanel ?? 0].panel;
-	return /* @__PURE__ */ jsxs(FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16,
-		children: [activePanel === null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileBackButton, {
-			handleClose,
-			type
-		}), navSections.map(({ item }, index) => {
-			return /* @__PURE__ */ jsxs(SmallMenuButton, {
-				index: index + 1,
-				onClick: () => setActivePanel(index),
-				children: [/* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [item.icon && /* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(item.icon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: item.text })]
-				}), /* @__PURE__ */ jsx(FlexBox, { children: /* @__PURE__ */ jsx(ArrowChevronRightIcon, {}) })]
-			}, item.id);
-		})] }), activePanel !== null && ActivePanel && /* @__PURE__ */ jsx(Box, {
-			background: theme.colors.background,
-			borderRadius: "lg",
-			p: 16,
-			children: /* @__PURE__ */ jsx(ActivePanel, {})
-		})]
-	});
-};
-
-//#endregion
-export { MobileNavMenu };
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import { theme } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { useAppHeaderSectionContext } from './AppHeaderSectionContext';
+import { SmallMenuButton } from './elements';
+import { MobileBackButton } from './MobileBackButton';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const MobileNavMenu = ({
+  handleClose,
+  type,
+  navSections
+}) => {
+  const {
+    activePanel,
+    setActivePanel
+  } = useAppHeaderSectionContext();
+  const ActivePanel = navSections[activePanel ?? 0].panel;
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    display: {
+      _: 'flex',
+      xs: 'none'
+    },
+    flexDirection: "column",
+    gap: 8,
+    p: 16,
+    children: [activePanel === null && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(MobileBackButton, {
+        handleClose: handleClose,
+        type: type
+      }), navSections.map(({
+        item
+      }, index) => {
+        return /*#__PURE__*/_jsxs(SmallMenuButton, {
+          index: index + 1,
+          onClick: () => setActivePanel(index),
+          children: [/*#__PURE__*/_jsxs(FlexBox, {
+            gap: 8,
+            alignItems: "center",
+            children: [item.icon && /*#__PURE__*/_jsx(Box, {
+              height: 24,
+              width: 24,
+              children: /*#__PURE__*/_jsx(item.icon, {
+                size: 24
+              })
+            }), /*#__PURE__*/_jsx(Text, {
+              children: item.text
+            })]
+          }), /*#__PURE__*/_jsx(FlexBox, {
+            children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {})
+          })]
+        }, item.id);
+      })]
+    }), activePanel !== null && ActivePanel && /*#__PURE__*/_jsx(Box, {
+      background: theme.colors.background,
+      borderRadius: "lg",
+      p: 16,
+      children: /*#__PURE__*/_jsx(ActivePanel, {})
+    })]
+  });
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+interface NavTabPanelProps extends PropsWithChildren {
+    isActiveTab: boolean;
+    index: number;
+    id: string;
+}
+declare const NavTabPanel: ({ children, isActiveTab, index, id, }: NavTabPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavTabList: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    type: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const NavTab: ({ item, onSelect, isActive, onKeyDown, index, }: {
+    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+    onSelect: (id: string, event?: React.MouseEvent, item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem) => void;
+    isActive: boolean;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export { NavTabPanel, NavTabList, NavTab };