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

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

@@ -1,123 +1,107 @@
-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 { CATALOG_NAV_SECTIONS } from './consts';
-import { MarketingBanner } from './MarketingBanner';
-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 !== 'narrowCatalogDropdownPosition' && prop !== 'wideCatalogDropdownPosition',
-  target: "eaa3s9f0",
-  label: "StyledAnimatedMegaMenuDropdown"
-})("top:3.5rem;left:", ({
-  narrowCatalogDropdownPosition
-}) => {
-  return narrowCatalogDropdownPosition;
-}, ";@media (min-width: 1261px){left:", ({
-  wideCatalogDropdownPosition
-}) => {
-  return wideCatalogDropdownPosition;
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ0UiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIERyb3Bkb3duUG9zaXRpb25zLFxuICB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCxcbn0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLFxuICBBcHBIZWFkZXJBY3Rpb24sXG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuL2NvbnN0cyc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuL01hcmtldGluZ0Jhbm5lcic7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtO1xufTtcblxuY29uc3QgU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duID0gc3R5bGVkKEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biwge1xuICAvLyBwcmV2ZW50IHRoZSBwcm9wcyBmcm9tIGJlaW5nIHBhc3NlZCB0byB0aGUgRE9NIGVsZW1lbnQsIHdoaWNoIHdvdWxkIGNhdXNlIGEgUmVhY3Qgd2FybmluZy5cbiAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm9wKSA9PlxuICAgIHByb3AgIT09ICduYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb246IHN0cmluZztcbiAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6ICR7KHsgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbjtcbiAgfX07XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6IDEyNjFweCkge1xuICAgIGxlZnQ6ICR7KHsgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICAgIHJldHVybiB3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd246IFJlYWN0LkZDPFxuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IGNhdGFsb2dEcm9wZG93biB9ID0gRHJvcGRvd25Qb3NpdGlvbnNbaGVhZGVyVHlwZV07XG4gIGNvbnN0IG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLndpZGU7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGZvY3VzQnV0dG9uID0gKCkgPT4ge1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVPbkNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKCFpc09wZW4pIHtcbiAgICAgIGFjdGlvbihldmVudCwgaXRlbSk7XG4gICAgICBpZiAoc2V0TGFzdE9wZW5lZERyb3Bkb3duKSB7XG4gICAgICAgIHNldExhc3RPcGVuZWREcm9wZG93bih0ZXh0KTtcbiAgICAgIH1cbiAgICB9XG4gICAgc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2xvc2UgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICBmb2N1c0J1dHRvbigpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uPXtuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uPXt3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb259XG4gICAgICAgIHRhYkluZGV4PXstMX0gLy8gcHJldmVudCBmcm9tIGludGVyZmVyaW5nIHdpdGggQXBwSGVhZGVyIGZvY3VzIGxvZ2ljXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiY2F0YWxvZy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICAgIHJlZj17ZHJvcGRvd25SZWZ9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17Q0FUQUxPR19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBNYXJrZXRpbmdCYW5uZXI9e01hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgdHlwZT1cImNhdGFsb2ctZHJvcGRvd25cIlxuICAgICAgICAgICAgaXNDb2FjaGluZ0VuYWJsZWQ9e2l0ZW0uaXNDb2FjaGluZ0VuYWJsZWR9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L1N0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bj5cbiAgICA8L0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
-export const AppHeaderCatalogDropdown = ({
-  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 {
-    catalogDropdown
-  } = DropdownPositions[headerType];
-  const narrowCatalogDropdownPosition = catalogDropdown.narrow;
-  const wideCatalogDropdownPosition = catalogDropdown.wide;
-  const animationFinished = () => {
-    if (isOpen && dropdownRef.current) {
-      dropdownRef.current.scrollTop = 0;
-    }
-  };
-  const focusButton = () => {
-    buttonRef?.current?.focus();
-  };
-  const handleOnClick = event => {
-    if (!isOpen) {
-      action(event, item);
-      if (setLastOpenedDropdown) {
-        setLastOpenedDropdown(text);
-      }
-    }
-    setIsOpen(prev => !prev);
-  };
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-    focusButton();
-  }, []);
-  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,
-      narrowCatalogDropdownPosition: narrowCatalogDropdownPosition,
-      wideCatalogDropdownPosition: wideCatalogDropdownPosition,
-      tabIndex: -1 // prevent from interfering with AppHeader focus logic
-      ,
-      "data-testid": "catalog-menu-dropdown",
-      onAnimationComplete: animationFinished,
-      ref: dropdownRef,
-      children: /*#__PURE__*/_jsx(ColorMode, {
-        mode: "light",
-        children: /*#__PURE__*/_jsx(AppHeaderSection, {
-          isOpen: isOpen,
-          ref: containerRef,
-          navSections: CATALOG_NAV_SECTIONS,
-          MarketingBanner: MarketingBanner,
-          handleClose: () => setIsOpen(false),
-          type: "catalog-dropdown",
-          isCoachingEnabled: item.isCoachingEnabled
-        })
-      })
-    })]
-  });
-};
+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 { CATALOG_NAV_SECTIONS } from "./consts.js";
+import { MarketingBanner } from "./MarketingBanner.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/AppHeaderCatalogDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, { shouldForwardProp: (prop) => prop !== "narrowCatalogDropdownPosition" && prop !== "wideCatalogDropdownPosition" })`
+  top: 3.5rem;
+  left: ${({ narrowCatalogDropdownPosition }) => {
+	return narrowCatalogDropdownPosition;
+}};
+
+  @media (min-width: 1261px) {
+    left: ${({ wideCatalogDropdownPosition }) => {
+	return wideCatalogDropdownPosition;
+}};
+  }
+`;
+const AppHeaderCatalogDropdown = ({ 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 { catalogDropdown } = DropdownPositions[headerType];
+	const narrowCatalogDropdownPosition = catalogDropdown.narrow;
+	const wideCatalogDropdownPosition = catalogDropdown.wide;
+	const animationFinished = () => {
+		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
+	};
+	const focusButton = () => {
+		buttonRef?.current?.focus();
+	};
+	const handleOnClick = (event) => {
+		if (!isOpen) {
+			action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
+		}
+		setIsOpen((prev) => !prev);
+	};
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+		focusButton();
+	}, []);
+	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,
+			narrowCatalogDropdownPosition,
+			wideCatalogDropdownPosition,
+			tabIndex: -1,
+			"data-testid": "catalog-menu-dropdown",
+			onAnimationComplete: animationFinished,
+			ref: dropdownRef,
+			children: /* @__PURE__ */ jsx(ColorMode, {
+				mode: "light",
+				children: /* @__PURE__ */ jsx(AppHeaderSection, {
+					isOpen,
+					ref: containerRef,
+					navSections: CATALOG_NAV_SECTIONS,
+					MarketingBanner,
+					handleClose: () => setIsOpen(false),
+					type: "catalog-dropdown",
+					isCoachingEnabled: item.isCoachingEnabled
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { AppHeaderCatalogDropdown };

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

@@ -0,0 +1,114 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_types = require('../../../ContentGroupBaseCard/types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderDietCard/index.tsx
+const StyledCard = (0, _emotion_styled.default)(_codecademy_gamut.Card)`
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.black};
+    cursor: pointer;
+  }
+`;
+const DottedLine = (0, _emotion_styled.default)(_codecademy_gamut_patterns.CheckerDense)((0, _codecademy_gamut_styles.css)({
+	height: "1px",
+	display: "flex",
+	position: "absolute",
+	marginTop: "-1px"
+}));
+const DifficultyTextContainer = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
+  @media (min-width: 768px) and (max-width: 880px) {
+    max-width: ${({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none"};
+  }
+
+  @media (min-width: 1024px) and (max-width: 1136px) {
+    max-width: ${({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none"};
+  }
+
+  @media (min-width: 1200px) and (max-width: 1230px) {
+    max-width: ${({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none"};
+  }
+`;
+const AppHeaderDietCard = ({ title, hours, icon, difficulty, href, trackingTarget }) => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const isBeginnerContainer = difficulty === require_types.CourseDifficulty.Beginner;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+		href,
+		variant: "interface",
+		display: "block",
+		onClick: (event) => globalHeaderItemClick(event, {
+			type: "link",
+			id: `topnav_catalog_${title}`,
+			href,
+			text: title,
+			trackingTarget: `topnav_catalog_${trackingTarget ?? title}`
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCard, {
+			borderRadius: "md",
+			borderColor: "border-tertiary",
+			minHeight: 120,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			px: 12,
+			py: 8,
+			isInteractive: true,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				as: "h3",
+				variant: "p-large",
+				fontWeight: 700,
+				truncate: "ellipsis",
+				truncateLines: 2,
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				py: 4,
+				mb: 4,
+				height: 0,
+				position: "relative",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DottedLine, { color: "border-tertiary" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				justifyContent: "space-between",
+				alignItems: "center",
+				children: [difficulty && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DifficultyTextContainer, {
+					isBeginnerContainer,
+					justifyContent: "center",
+					alignItems: "center",
+					gap: 8,
+					children: [
+						icon,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+							screenreader: true,
+							children: `${difficulty}${isBeginnerContainer ? " Friendly" : ""}.`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
+							variant: "p-small",
+							fontSize: 14,
+							color: "text-secondary",
+							"data-testid": "card-difficulty",
+							"aria-hidden": true,
+							truncate: "ellipsis",
+							truncateLines: 1,
+							overflow: "hidden",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: difficulty }), isBeginnerContainer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: " Friendly" })]
+						})
+					]
+				}), hours && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Text, {
+					fontSize: 14,
+					variant: "p-small",
+					color: "text-secondary",
+					whiteSpace: "nowrap",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: hours }), " hours"]
+				})]
+			})] })]
+		})
+	}) });
+};
+
+//#endregion
+exports.AppHeaderDietCard = AppHeaderDietCard;