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

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

@@ -1,107 +1,122 @@
-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 };
+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+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17Q0FUQUxPR19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBNYXJrZXRpbmdCYW5uZXI9e01hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgdHlwZT1cImNhdGFsb2ctZHJvcGRvd25cIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
+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"
+        })
+      })
+    })]
+  });
+};

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

@@ -0,0 +1,11 @@
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+type AppHeaderDietCardProps = {
+    title: string;
+    hours: number | null;
+    icon: React.ReactNode;
+    difficulty: CourseDifficulty | null;
+    href: string;
+    trackingTarget?: string;
+};
+export declare const AppHeaderDietCard: ({ title, hours, icon, difficulty, href, trackingTarget, }: AppHeaderDietCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,112 +1,124 @@
-import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
-import { CourseDifficulty } from "../../../ContentGroupBaseCard/types.js";
-import { Anchor, Box, Card, FlexBox, Text } from "@codecademy/gamut";
-import { css } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CheckerDense } from "@codecademy/gamut-patterns";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderDietCard/index.tsx
-const StyledCard = styled(Card)`
-  &:hover {
-    border-color: ${({ theme: theme$1 }) => theme$1.colors.black};
-    cursor: pointer;
-  }
-`;
-const DottedLine = styled(CheckerDense)(css({
-	height: "1px",
-	display: "flex",
-	position: "absolute",
-	marginTop: "-1px"
-}));
-const DifficultyTextContainer = styled(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 } = useGlobalHeaderItemClick();
-	const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;
-	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(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__ */ jsxs(StyledCard, {
-			borderRadius: "md",
-			borderColor: "border-tertiary",
-			minHeight: 120,
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "space-between",
-			px: 12,
-			py: 8,
-			isInteractive: true,
-			children: [/* @__PURE__ */ jsx(Text, {
-				as: "h3",
-				variant: "p-large",
-				fontWeight: 700,
-				truncate: "ellipsis",
-				truncateLines: 2,
-				children: title
-			}), /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Box, {
-				py: 4,
-				mb: 4,
-				height: 0,
-				position: "relative",
-				"aria-hidden": true,
-				children: /* @__PURE__ */ jsx(DottedLine, { color: "border-tertiary" })
-			}), /* @__PURE__ */ jsxs(FlexBox, {
-				justifyContent: "space-between",
-				alignItems: "center",
-				children: [difficulty && /* @__PURE__ */ jsxs(DifficultyTextContainer, {
-					isBeginnerContainer,
-					justifyContent: "center",
-					alignItems: "center",
-					gap: 8,
-					children: [
-						icon,
-						/* @__PURE__ */ jsx(Text, {
-							screenreader: true,
-							children: `${difficulty}${isBeginnerContainer ? " Friendly" : ""}.`
-						}),
-						/* @__PURE__ */ jsxs(Text, {
-							variant: "p-small",
-							fontSize: 14,
-							color: "text-secondary",
-							"data-testid": "card-difficulty",
-							"aria-hidden": true,
-							truncate: "ellipsis",
-							truncateLines: 1,
-							overflow: "hidden",
-							children: [/* @__PURE__ */ jsx("b", { children: difficulty }), isBeginnerContainer && /* @__PURE__ */ jsx(Fragment, { children: " Friendly" })]
-						})
-					]
-				}), hours && /* @__PURE__ */ jsxs(Text, {
-					fontSize: 14,
-					variant: "p-small",
-					color: "text-secondary",
-					whiteSpace: "nowrap",
-					children: [/* @__PURE__ */ jsx("b", { children: hours }), " hours"]
-				})]
-			})] })]
-		})
-	}) });
-};
-
-//#endregion
-export { AppHeaderDietCard };
+import _styled from "@emotion/styled/base";
+import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { css } from '@codecademy/gamut-styles';
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1d52gk02",
+  label: "StyledCard"
+})("&:hover{border-color:", ({
+  theme
+}) => theme.colors.black, ";cursor:pointer;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
+const DottedLine = /*#__PURE__*/_styled(CheckerDense, {
+  target: "e1d52gk01",
+  label: "DottedLine"
+})(css({
+  height: '1px',
+  display: 'flex',
+  position: 'absolute',
+  marginTop: '-1px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVtQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */");
+const DifficultyTextContainer = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1d52gk00",
+  label: "DifficultyTextContainer"
+})("@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', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
+export const AppHeaderDietCard = ({
+  title,
+  hours,
+  icon,
+  difficulty,
+  href,
+  trackingTarget
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;
+  return /*#__PURE__*/_jsx("li", {
+    children: /*#__PURE__*/_jsx(Anchor, {
+      href: 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__*/_jsxs(StyledCard, {
+        borderRadius: "md",
+        borderColor: "border-tertiary",
+        minHeight: 120,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        px: 12,
+        py: 8,
+        isInteractive: true,
+        children: [/*#__PURE__*/_jsx(Text, {
+          as: "h3",
+          variant: "p-large",
+          fontWeight: 700,
+          truncate: "ellipsis",
+          truncateLines: 2,
+          children: title
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            py: 4,
+            mb: 4,
+            height: 0,
+            position: "relative",
+            "aria-hidden": true,
+            children: /*#__PURE__*/_jsx(DottedLine, {
+              color: "border-tertiary"
+            })
+          }), /*#__PURE__*/_jsxs(FlexBox, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [difficulty && /*#__PURE__*/_jsxs(DifficultyTextContainer, {
+              isBeginnerContainer: isBeginnerContainer,
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 8,
+              children: [icon, /*#__PURE__*/_jsx(Text, {
+                screenreader: true,
+                children: `${difficulty}${isBeginnerContainer ? ' Friendly' : ''}.`
+              }), /*#__PURE__*/_jsxs(Text, {
+                variant: "p-small",
+                fontSize: 14,
+                color: "text-secondary",
+                "data-testid": "card-difficulty",
+                "aria-hidden": true,
+                truncate: "ellipsis",
+                truncateLines: 1,
+                overflow: "hidden",
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: difficulty
+                }), isBeginnerContainer && /*#__PURE__*/_jsx(_Fragment, {
+                  children: " Friendly"
+                })]
+              })]
+            }), hours && /*#__PURE__*/_jsxs(Text, {
+              fontSize: 14,
+              variant: "p-small",
+              color: "text-secondary",
+              whiteSpace: "nowrap",
+              children: [/*#__PURE__*/_jsx("b", {
+                children: hours
+              }), " hours"]
+            })]
+          })]
+        })]
+      })
+    })
+  });
+};

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

@@ -1,17 +1,12 @@
-import { AppHeaderAction, AppHeaderDropdownItem } from "../../shared/types.js";
-import "../../shared/index.js";
-import { Menu } from "@codecademy/gamut";
-import * as React$1 from "react";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderDropdown/index.d.ts
-type AppHeaderDropdownProps = AppHeaderAction & Pick<React$1.ComponentProps<typeof Menu>, 'spacing'> & {
-  item: AppHeaderDropdownItem;
-  /**
-   * If true, the dropdown is being rendered as a standalone component, rather than
-   * part of the global header.
-   */
-  standalone?: boolean;
+import { Menu } from '@codecademy/gamut';
+import * as React from 'react';
+import { AppHeaderAction, AppHeaderDropdownItem } from '../../shared';
+export type AppHeaderDropdownProps = AppHeaderAction & Pick<React.ComponentProps<typeof Menu>, 'spacing'> & {
+    item: AppHeaderDropdownItem;
+    /**
+     * If true, the dropdown is being rendered as a standalone component, rather than
+     * part of the global header.
+     */
+    standalone?: boolean;
 };
-declare const AppHeaderDropdown: React$1.FC<AppHeaderDropdownProps>;
-//#endregion
-export { AppHeaderDropdown, AppHeaderDropdownProps };
+export declare const AppHeaderDropdown: React.FC<AppHeaderDropdownProps>;