@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

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

@@ -0,0 +1,105 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_elements = require('../../shared/elements.cjs');
+const require_index = require('../AppHeaderProvider/index.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_index$1 = require('../AppHeaderDropdownProvider/index.cjs');
+const require_index$2 = require('../AppHeaderNavButton/index.cjs');
+const require_index$3 = require('../AppHeaderSection/index.cjs');
+const require_consts = require('./consts.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = (0, _emotion_styled.default)(require_elements.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 = (0, react.useRef)(null);
+	const buttonRef = (0, react.useRef)(null);
+	const dropdownRef = (0, react.useRef)(null);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = require_index.useAppHeaderContext();
+	const { headerType } = require_context.useHeaderDisplayContext();
+	const { resourceDropdown } = require_context.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 = (0, react.useCallback)(() => {
+		setIsOpen(false);
+		buttonRef?.current?.focus();
+	}, []);
+	(0, react.useEffect)(() => {
+		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(require_index$1.AppHeaderDropdownProvider, {
+		handleClose,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDropdownNavButton, {
+			buttonRef,
+			handleOnClick,
+			isOpen,
+			text
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAnimatedMegaMenuDropdown, {
+			isOpen,
+			narrowResourceDropdownPosition,
+			wideResourceDropdownPosition,
+			tabIndex: -1,
+			ref: dropdownRef,
+			"data-testid": "resources-menu-dropdown",
+			onAnimationComplete: animationFinished,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_styles.ColorMode, {
+				mode: "light",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.AppHeaderSection, {
+					isOpen,
+					ref: containerRef,
+					navSections: require_consts.RESOURCES_NAV_SECTIONS,
+					handleClose: () => setIsOpen(false),
+					type: "resources-dropdown"
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.AppHeaderResourcesDropdown = AppHeaderResourcesDropdown;

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

@@ -0,0 +1,8 @@
+import { AppHeaderAction, AppHeaderResourcesDropdownItem } from "../../shared/types.cjs";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.d.ts
+type AppHeaderResourceDropdownProps = AppHeaderAction & {
+  item: AppHeaderResourcesDropdownItem;
+};
+//#endregion
+export { AppHeaderResourceDropdownProps };

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

@@ -1,6 +1,10 @@
-import * as React from 'react';
-import { AppHeaderAction, AppHeaderResourcesDropdownItem } from '../../shared';
-export type AppHeaderResourceDropdownProps = AppHeaderAction & {
-    item: AppHeaderResourcesDropdownItem;
+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;
 };
-export declare const AppHeaderResourcesDropdown: React.FC<AppHeaderResourceDropdownProps>;
+//#endregion
+export { AppHeaderResourceDropdownProps };

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

@@ -1,118 +1,102 @@
-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 { 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgUkVTT1VSQ0VTX05BVl9TRUNUSU9OUyB9IGZyb20gJy4vY29uc3RzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG59O1xuXG5jb25zdCBTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24gPSBzdHlsZWQoQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLCB7XG4gIC8vIHByZXZlbnQgdGhlIHByb3BzIGZyb20gYmVpbmcgcGFzc2VkIHRvIHRoZSBET00gZWxlbWVudCwgd2hpY2ggd291bGQgY2F1c2UgYSBSZWFjdCB3YXJuaW5nLlxuICBzaG91bGRGb3J3YXJkUHJvcDogKHByb3ApID0+XG4gICAgcHJvcCAhPT0gJ25hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbicsXG59KTx7XG4gIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbjogc3RyaW5nO1xuICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6ICR7KHsgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICByZXR1cm4gbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uO1xuICB9fTtcblxuICBAbWVkaWEgKG1pbi13aWR0aDogMTI2MXB4KSB7XG4gICAgbGVmdDogJHsoeyB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICAgIHJldHVybiB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uO1xuICAgIH19O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd246IFJlYWN0LkZDPFxuICBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHNcbj4gPSAoeyBhY3Rpb24sIGl0ZW0gfSkgPT4ge1xuICBjb25zdCB7IHRleHQgfSA9IGl0ZW07XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBkcm9wZG93blJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB7IGxhc3RPcGVuZWREcm9wZG93biwgc2V0TGFzdE9wZW5lZERyb3Bkb3duIH0gPSB1c2VBcHBIZWFkZXJDb250ZXh0KCk7XG4gIGNvbnN0IHsgaGVhZGVyVHlwZSB9ID0gdXNlSGVhZGVyRGlzcGxheUNvbnRleHQoKTtcbiAgY29uc3QgeyByZXNvdXJjZURyb3Bkb3duIH0gPSBEcm9wZG93blBvc2l0aW9uc1toZWFkZXJUeXBlXTtcbiAgY29uc3QgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uID0gcmVzb3VyY2VEcm9wZG93bi5uYXJyb3c7XG4gIGNvbnN0IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLndpZGU7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKHRleHQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVDbG9zZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGxhc3RPcGVuZWREcm9wZG93biAhPT0gdGV4dCAmJiBpc09wZW4pIHtcbiAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgfVxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC1ob29rcy9leGhhdXN0aXZlLWRlcHNcbiAgfSwgW2xhc3RPcGVuZWREcm9wZG93bl0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZnVuY3Rpb24gaGFuZGxlQ2xpY2tPdXRzaWRlKGV2ZW50OiBNb3VzZUV2ZW50IHwgRXZlbnQpIHtcbiAgICAgIGNvbnN0IGNvbnRhaW5lciA9IGNvbnRhaW5lclJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGNvbnRhaW5lciAmJlxuICAgICAgICAhY29udGFpbmVyLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKSAmJlxuICAgICAgICBidXR0b24gJiZcbiAgICAgICAgIWJ1dHRvbi5jb250YWlucyhldmVudC50YXJnZXQgYXMgTm9kZSlcbiAgICAgICkge1xuICAgICAgICBoYW5kbGVDbG9zZSgpO1xuICAgICAgfVxuICAgIH1cblxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignYmx1cicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICB9O1xuICB9LCBbY29udGFpbmVyUmVmLCBoYW5kbGVDbG9zZSwgaXNPcGVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8QXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2V9PlxuICAgICAgPEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uXG4gICAgICAgIGJ1dHRvblJlZj17YnV0dG9uUmVmfVxuICAgICAgICBoYW5kbGVPbkNsaWNrPXtoYW5kbGVPbkNsaWNrfVxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgdGV4dD17dGV4dH1cbiAgICAgIC8+XG4gICAgICA8U3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duXG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb249e25hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17d2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgdGFiSW5kZXg9ey0xfSAvLyBwcmV2ZW50IGZyb20gaW50ZXJmZXJpbmcgd2l0aCBBcHBIZWFkZXIgZm9jdXMgbG9naWNcbiAgICAgICAgcmVmPXtkcm9wZG93blJlZn1cbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJyZXNvdXJjZXMtbWVudS1kcm9wZG93blwiXG4gICAgICAgIG9uQW5pbWF0aW9uQ29tcGxldGU9e2FuaW1hdGlvbkZpbmlzaGVkfVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uXG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgICAgICAgICAgbmF2U2VjdGlvbnM9e1JFU09VUkNFU19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBoYW5kbGVDbG9zZT17KCkgPT4gc2V0SXNPcGVuKGZhbHNlKX1cbiAgICAgICAgICAgIHR5cGU9XCJyZXNvdXJjZXMtZHJvcGRvd25cIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
-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,
-          handleClose: () => setIsOpen(false),
-          type: "resources-dropdown"
-        })
-      })
-    })]
-  });
-};
+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 };

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

@@ -0,0 +1,18 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let lodash_fp = require("lodash/fp");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx
+const AppHeaderSectionContext = (0, react.createContext)({
+	activePanel: null,
+	setActivePanel: lodash_fp.noop,
+	tabIndex: 0,
+	isCoachingEnabled: void 0
+});
+const useAppHeaderSectionContext = () => {
+	return (0, react.useContext)(AppHeaderSectionContext);
+};
+
+//#endregion
+exports.AppHeaderSectionContext = AppHeaderSectionContext;
+exports.useAppHeaderSectionContext = useAppHeaderSectionContext;

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

@@ -1,11 +1,16 @@
-import { noop } from 'lodash/fp';
-import { createContext, useContext } from 'react';
-export const AppHeaderSectionContext = /*#__PURE__*/createContext({
-  activePanel: null,
-  setActivePanel: noop,
-  tabIndex: 0,
-  isCoachingEnabled: undefined
+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
 });
-export const useAppHeaderSectionContext = () => {
-  return useContext(AppHeaderSectionContext);
-};
+const useAppHeaderSectionContext = () => {
+	return useContext(AppHeaderSectionContext);
+};
+
+//#endregion
+export { AppHeaderSectionContext, useAppHeaderSectionContext };

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

@@ -0,0 +1,85 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_elements = require('./elements.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx
+const MobileBackButton = ({ handleClose, type }) => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const handleBackButtonClick = (event) => {
+		globalHeaderItemClick(event, {
+			id: "back",
+			text: "Back",
+			type
+		});
+		handleClose();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			display: {
+				_: "none",
+				sm: "block"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavigationButton, {
+				isActive: false,
+				onClick: handleBackButtonClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 8,
+					alignItems: "center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+						height: 24,
+						width: 24,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: "Back" })]
+				})
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			display: {
+				_: "none",
+				xs: "grid",
+				sm: "none"
+			},
+			ml: 8,
+			gridColumn: "1",
+			gridRow: "1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavIconButton, {
+				onClick: handleBackButtonClick,
+				icon: _codecademy_gamut_icons.ArrowLeftIcon,
+				tip: "Back to main navigation",
+				tipProps: {
+					alignment: "right-center",
+					narrow: false,
+					placement: "floating"
+				},
+				"aria-label": "Back to main navigation"
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			display: {
+				_: "flex",
+				xs: "none"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.SmallMenuButton, {
+				index: 0,
+				onClick: handleBackButtonClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+					gap: 8,
+					alignItems: "center",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+						height: 24,
+						width: 24,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: "Back" })]
+				})
+			})
+		})
+	] });
+};
+
+//#endregion
+exports.MobileBackButton = MobileBackButton;