@codecademy/brand 2.11.0-alpha.5efd9a735f.0 → 2.11.0-alpha.9ca190917a.0

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

@@ -1,12 +1,27 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import _styled from "@emotion/styled/base";
+import { ColorMode } from '@codecademy/gamut-styles';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
+import { GlobalNavRedesignContext } from '../../../GlobalHeader';
 import { getHeaderResourcesList } from '../../../lib/resourcesList';
 import { AnimatedMegaMenuDropdown } from '../../shared';
 import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
 import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton/AppHeaderDropdownNavButton';
 import { useAppHeaderContext } from '../AppHeaderProvider';
 import { AppHeaderResourcesSection } from '../AppHeaderResourcesSection';
+import { AppHeaderSectionVariant } from '../AppHeaderSectionVariant';
+import { RESOURCES_NAV_SECTIONS } from './consts';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
+  target: "ekdg1bw0",
+  label: "StyledAnimatedMegaMenuDropdown"
+})("left:", ({
+  isAnon,
+  displayGlobalNavRedesign
+}) => displayGlobalNavRedesign ? '-58px' : isAnon ? '-9rem' : '-14rem', ";@media (min-width: 1261px){left:", ({
+  isAnon,
+  displayGlobalNavRedesign
+}) => displayGlobalNavRedesign ? '-152px' : isAnon ? '-9rem' : '-14rem', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlQ29udGV4dCwgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXInO1xuaW1wb3J0IHsgZ2V0SGVhZGVyUmVzb3VyY2VzTGlzdCB9IGZyb20gJy4uLy4uLy4uL2xpYi9yZXNvdXJjZXNMaXN0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbi9BcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclJlc291cmNlc1NlY3Rpb24nO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQgfSBmcm9tICcuLi9BcHBIZWFkZXJTZWN0aW9uVmFyaWFudCc7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgaXNBbm9uOiBib29sZWFuO1xufTtcblxuY29uc3QgU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duID0gc3R5bGVkKEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bik8e1xuICBpc0Fub246IGJvb2xlYW47XG4gIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjogYm9vbGVhbjtcbn0+YFxuICBsZWZ0OiAkeyh7IGlzQW5vbiwgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduIH0pID0+XG4gICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID8gJy01OHB4JyA6IGlzQW5vbiA/ICctOXJlbScgOiAnLTE0cmVtJ307XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6IDEyNjFweCkge1xuICAgIGxlZnQ6ICR7KHsgaXNBbm9uLCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gfSkgPT5cbiAgICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/ICctMTUycHgnIDogaXNBbm9uID8gJy05cmVtJyA6ICctMTRyZW0nfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzXG4+ID0gKHsgYWN0aW9uLCBpdGVtLCBpc0Fub24gfSkgPT4ge1xuICBjb25zdCB7IHRleHQgfSA9IGl0ZW07XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBkcm9wZG93blJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudCB8IG51bGw+KG51bGwpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB7IGxhc3RPcGVuZWREcm9wZG93biwgc2V0TGFzdE9wZW5lZERyb3Bkb3duIH0gPSB1c2VBcHBIZWFkZXJDb250ZXh0KCk7XG5cbiAgLy8gQWRkIHNjcm9sbGJhciBmb3Igc2hvcnQgc2NyZWVucyBhZnRlciB0cmFuc2l0aW9uIChvdGhlcndpc2Ugc2Nyb2xsYmFyIGFwcGVhcnMgYW5kIGRpc3NhcGVhcnMgZm9yIGFkZXF1YXRlIGhlaWdodHMgZHVyaW5nIHRyYW5zaXRpb24pXG4gIGNvbnN0IFthbmltYXRpb25Db21wbGV0ZVN0eWxlcywgc2V0QW5pbWF0aW9uQ29tcGxldGVTdHlsZXNdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGhlYWRlclJlc291cmNlc0xpc3QgPSBnZXRIZWFkZXJSZXNvdXJjZXNMaXN0KCk7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgc2V0QW5pbWF0aW9uQ29tcGxldGVTdHlsZXMoaXNPcGVuKTtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICBjb25zdCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPSB1c2VDb250ZXh0KEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCk7XG5cbiAgcmV0dXJuIChcbiAgICA8QXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2V9PlxuICAgICAgPEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uXG4gICAgICAgIGJ1dHRvblJlZj17YnV0dG9uUmVmfVxuICAgICAgICBoYW5kbGVPbkNsaWNrPXtoYW5kbGVPbkNsaWNrfVxuICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgdGl0bGU9e3RleHR9XG4gICAgICAvPlxuICAgICAgPFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93blxuICAgICAgICBpc0Fub249e2lzQW5vbn1cbiAgICAgICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduPXtkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ259XG4gICAgICAgIHRhYkluZGV4PXstMX0gLy8gcHJldmVudCBmcm9tIGludGVyZmVyaW5nIHdpdGggQXBwSGVhZGVyIGZvY3VzIGxvZ2ljXG4gICAgICAgIHJlZj17ZHJvcGRvd25SZWZ9XG4gICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgdG9wOiAnMy41cmVtJyxcbiAgICAgICAgICBtaW5XaWR0aDogJzY0cmVtJyxcbiAgICAgICAgICBsZWZ0OiBpc0Fub24gPyAnLTE0LjVyZW0nIDogJy0xOS41cmVtJyxcbiAgICAgICAgICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgICAgICAgICBtYXhIZWlnaHQ6IGFuaW1hdGlvbkNvbXBsZXRlU3R5bGVzID8gJzg1dmgnIDogMCxcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/ICd0cmFuc3BhcmVudCcgOiAnJyxcbiAgICAgICAgfX1cbiAgICAgICAgaW5pdGlhbD17eyBib3JkZXJXaWR0aDogMCwgaGVpZ2h0OiAwIH19XG4gICAgICAgIGFuaW1hdGU9e3tcbiAgICAgICAgICBib3JkZXJXaWR0aDogaXNPcGVuID8gKGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/IDAgOiAxKSA6IDAsXG4gICAgICAgICAgaGVpZ2h0OiBpc09wZW4gPyAnZml0LWNvbnRlbnQnIDogMCxcbiAgICAgICAgfX1cbiAgICAgICAgdHJhbnNpdGlvbj17eyBkdXJhdGlvbjogMC4xNzUgfX1cbiAgICAgICAgYXJpYS1oaWRkZW49eyFpc09wZW59XG4gICAgICAgIGRhdGEtdGVzdGlkPVwicmVzb3VyY2VzLW1lbnUtZHJvcGRvd25cIlxuICAgICAgICBvbkFuaW1hdGlvbkNvbXBsZXRlPXthbmltYXRpb25GaW5pc2hlZH1cbiAgICAgID5cbiAgICAgICAge2Rpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA/IChcbiAgICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25WYXJpYW50XG4gICAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICAgICAgbmF2U2VjdGlvbnM9e1JFU09VUkNFU19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDxBcHBIZWFkZXJSZXNvdXJjZXNTZWN0aW9uXG4gICAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICAgIHJlZj17Y29udGFpbmVyUmVmfVxuICAgICAgICAgICAgaWQ9e2BtZW51LWNvbnRhaW5lciR7aXRlbS50ZXh0fWB9XG4gICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgcmVzb3VyY2VzPXtoZWFkZXJSZXNvdXJjZXNMaXN0fVxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bj5cbiAgICA8L0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */"));
 export const AppHeaderResourcesDropdown = ({
   action,
   item,
@@ -68,6 +83,7 @@ export const AppHeaderResourcesDropdown = ({
       document.removeEventListener('blur', handleClickOutside);
     };
   }, [containerRef, handleClose, isOpen]);
+  const displayGlobalNavRedesign = useContext(GlobalNavRedesignContext);
   return /*#__PURE__*/_jsxs(AppHeaderDropdownProvider, {
     handleClose: handleClose,
     children: [/*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
@@ -75,7 +91,9 @@ export const AppHeaderResourcesDropdown = ({
       handleOnClick: handleOnClick,
       isOpen: isOpen,
       title: text
-    }), /*#__PURE__*/_jsx(AnimatedMegaMenuDropdown, {
+    }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
+      isAnon: isAnon,
+      displayGlobalNavRedesign: displayGlobalNavRedesign,
       tabIndex: -1 // prevent from interfering with AppHeader focus logic
       ,
       ref: dropdownRef,
@@ -84,14 +102,15 @@ export const AppHeaderResourcesDropdown = ({
         minWidth: '64rem',
         left: isAnon ? '-14.5rem' : '-19.5rem',
         overflowY: 'auto',
-        maxHeight: animationCompleteStyles ? '85vh' : 0
+        maxHeight: animationCompleteStyles ? '85vh' : 0,
+        backgroundColor: displayGlobalNavRedesign ? 'transparent' : ''
       },
       initial: {
         borderWidth: 0,
         height: 0
       },
       animate: {
-        borderWidth: isOpen ? 1 : 0,
+        borderWidth: isOpen ? displayGlobalNavRedesign ? 0 : 1 : 0,
         height: isOpen ? 'fit-content' : 0
       },
       transition: {
@@ -100,7 +119,14 @@ export const AppHeaderResourcesDropdown = ({
       "aria-hidden": !isOpen,
       "data-testid": "resources-menu-dropdown",
       onAnimationComplete: animationFinished,
-      children: /*#__PURE__*/_jsx(AppHeaderResourcesSection, {
+      children: displayGlobalNavRedesign ? /*#__PURE__*/_jsx(ColorMode, {
+        mode: "light",
+        children: /*#__PURE__*/_jsx(AppHeaderSectionVariant, {
+          isOpen: isOpen,
+          ref: containerRef,
+          navSections: RESOURCES_NAV_SECTIONS
+        })
+      }) : /*#__PURE__*/_jsx(AppHeaderResourcesSection, {
         action: action,
         ref: containerRef,
         id: `menu-container${item.text}`,

package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/AppHeaderSectionVariant.test.js

@@ -0,0 +1,83 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
+import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
+import { AppHeaderSectionVariant } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mockOnClick = jest.fn();
+const mockKeyDownEvents = jest.fn();
+const mockItem = {
+  text: 'catalog',
+  id: 'the-catalog',
+  type: 'catalog-dropdown',
+  trackingTarget: 'catalog-dropdown'
+};
+const defaultProps = {
+  item: mockItem,
+  isOpen: true,
+  keyDownEvents: mockKeyDownEvents
+};
+const mockContextValue = {
+  globalHeaderItemClick: mockOnClick
+};
+describe('AppHeaderSectionVariant', () => {
+  const renderView = setupRtl(AppHeaderSectionVariant, defaultProps).options({
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
+      value: mockContextValue,
+      children: children
+    })
+  });
+  it('renders the component ', () => {
+    const {
+      view
+    } = renderView({
+      navSections: CATALOG_NAV_SECTIONS
+    });
+    expect(view.getByRole('heading', {
+      name: 'Course topics'
+    })).toBeInTheDocument();
+  });
+  describe('tab navigation', () => {
+    it('starts with the first tab active by default', () => {
+      const {
+        view
+      } = renderView({
+        navSections: CATALOG_NAV_SECTIONS
+      });
+      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
+      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'true');
+    });
+    it('switches active tab when clicking on different sections', async () => {
+      const {
+        view
+      } = renderView({
+        navSections: CATALOG_NAV_SECTIONS
+      });
+      const careerPathsButton = view.getByTestId('nav-section-career-paths');
+      await userEvent.click(careerPathsButton);
+      expect(careerPathsButton).toHaveAttribute('aria-expanded', 'true');
+      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
+      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('calls tracking with correct parameters when clicking nav section', async () => {
+      const {
+        view
+      } = renderView({
+        navSections: CATALOG_NAV_SECTIONS
+      });
+      const careerPathsButton = view.getByTestId('nav-section-career-paths');
+      await userEvent.click(careerPathsButton);
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+      expect(mockOnClick).toHaveBeenCalledWith(expect.anything(),
+      // event object
+      expect.objectContaining({
+        id: 'career-paths',
+        type: 'catalog-dropdown'
+      }) // tracking parameters
+      );
+    });
+  });
+});

package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogSectionVariant → AppHeaderSectionVariant}/NavSection.d.ts

@@ -1,9 +1,9 @@
 import { GamutIconProps } from '@codecademy/gamut-icons';
 import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem } from '../../shared';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
 type NavSectionProps = PropsWithChildren & {
     activeTab: number;
-    item: AppHeaderCatalogDropdownItem;
+    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
     setActiveTab: (tab: number) => void;
     icon?: React.ComponentType<GamutIconProps>;
     text: string;

package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/NavSection.js

@@ -0,0 +1,79 @@
+import _styled from "@emotion/styled/base";
+import { Box, FlexBox } from '@codecademy/gamut';
+import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NavPanelContainer = /*#__PURE__*/_styled(Box, {
+  target: "ewhfiay1",
+  label: "NavPanelContainer"
+})("display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";grid-column:2/span 12;grid-row:1/span 8;background-color:", ({
+  theme
+}) => theme.colors.background, ";border-radius:", ({
+  isActive,
+  isFirst
+}) => isActive && isFirst ? '0 8px 8px 8px' : '8px', ";padding:24px 32px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I4RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMjRweCAzMnB4O1xuYDtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzQWN0aXZlOiBib29sZWFuOyBpbmRleDogbnVtYmVyIH0+YFxuICBncmlkLWNvbHVtbjogMTtcbiAgZ3JpZC1yb3c6ICR7KHsgaW5kZXggfSkgPT4gaW5kZXggKyAxfTtcbiAgcGFkZGluZzogMTZweDtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICc4cHggMCAwIDhweCcgOiAnOHB4Jyl9O1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMucHJpbWFyeSA6IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzEwMCUnIDogJ2NhbGMoMTAwJSAtIDhweCknKX07XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "ewhfiay0",
+  label: "StyledButton"
+})("grid-column:1;grid-row:", ({
+  index
+}) => index + 1, ";padding:16px;border:none;border-radius:", ({
+  isActive
+}) => isActive ? '8px 0 0 8px' : '8px', ";background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
+  theme,
+  isActive
+}) => isActive ? theme.colors.primary : theme.colors.text, ";text-align:left;width:", ({
+  isActive
+}) => isActive ? '100%' : 'calc(100% - 8px)', ";height:60px;display:flex;justify-content:space-between;align-items:center;background-color:", ({
+  isActive,
+  theme
+}) => isActive ? theme.colors.background : theme.colors['gray-100'], ";#arrow-chevron-right-icon{display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";}&:hover,&:focus{background-color:", ({
+  theme,
+  isActive
+}) => isActive ? theme.colors.background : theme.colors['navy-100'], ";color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0N3RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMjRweCAzMnB4O1xuYDtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzQWN0aXZlOiBib29sZWFuOyBpbmRleDogbnVtYmVyIH0+YFxuICBncmlkLWNvbHVtbjogMTtcbiAgZ3JpZC1yb3c6ICR7KHsgaW5kZXggfSkgPT4gaW5kZXggKyAxfTtcbiAgcGFkZGluZzogMTZweDtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICc4cHggMCAwIDhweCcgOiAnOHB4Jyl9O1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMucHJpbWFyeSA6IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzEwMCUnIDogJ2NhbGMoMTAwJSAtIDhweCknKX07XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
+const NavSection = ({
+  activeTab,
+  setActiveTab,
+  icon: Icon,
+  text,
+  index,
+  children,
+  item,
+  tabIndex
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledButton, {
+      isActive: activeTab === index,
+      index: index,
+      onClick: event => {
+        globalHeaderItemClick(event, item);
+        setActiveTab(index);
+      },
+      "data-testid": `nav-section-${item.id}`,
+      "aria-expanded": activeTab === index,
+      tabIndex: tabIndex,
+      children: [/*#__PURE__*/_jsxs(FlexBox, {
+        gap: 8,
+        alignItems: "center",
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
+      }), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
+        id: "arrow-chevron-right-icon"
+      })]
+    }), /*#__PURE__*/_jsx(NavPanelContainer, {
+      isActive: activeTab === index,
+      isFirst: index === 0,
+      children: children
+    })]
+  });
+};
+export default NavSection;

package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AppHeaderLinkItem } from '../../..';
+type PanelLayoutProps = PropsWithChildren & {
+    heading: string;
+    description: ReactNode;
+    linkItem?: AppHeaderLinkItem;
+    tabIndex?: number;
+};
+export declare const PanelLayout: ({ heading, description, linkItem, children, tabIndex, }: PanelLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.js

@@ -0,0 +1,51 @@
+import { Anchor, FlexBox, Text } from '@codecademy/gamut';
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PanelLayout = ({
+  heading,
+  description,
+  linkItem,
+  children,
+  tabIndex = 0
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const {
+    handleClose
+  } = useAppHeaderDropdownContext();
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    flexDirection: "column",
+    gap: 24,
+    pr: {
+      _: 32,
+      md: 16,
+      lg: 0
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "title-sm",
+      children: heading
+    }), /*#__PURE__*/_jsx(Text, {
+      children: description
+    }), children, linkItem && /*#__PURE__*/_jsx(FlexBox, {
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsx(Anchor, {
+        href: linkItem.href,
+        onClick: event => {
+          globalHeaderItemClick(event, linkItem);
+          handleClose();
+        },
+        tabIndex: tabIndex,
+        variant: "standard",
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          gap: 8,
+          children: [linkItem.text, " ", /*#__PURE__*/_jsx(MiniArrowRightIcon, {})]
+        })
+      })
+    })]
+  });
+};

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

@@ -0,0 +1,15 @@
+import React, { RefObject } from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type AppHeaderSectionVariantProps = {
+    isOpen?: boolean;
+    keyDownEvents?: (event: React.KeyboardEvent) => void;
+    ref?: RefObject<HTMLDivElement>;
+    navSections: {
+        item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+        panel: React.ComponentType<{
+            tabIndex?: number;
+        }>;
+    }[];
+    marketingBanner?: React.ReactNode;
+};
+export declare const AppHeaderSectionVariant: React.ForwardRefExoticComponent<Omit<AppHeaderSectionVariantProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,84 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Box, GridBox } from '@codecademy/gamut';
+import React, { useEffect, useState } from 'react';
+import NavSection from './NavSection';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledBox = /*#__PURE__*/_styled(Box, {
+  target: "elr36wf2",
+  label: "StyledBox"
+})("width:calc(100vw - 11rem);max-width:calc(1440px - 11rem);border:1px solid ", ({
+  theme
+}) => theme.colors['border-tertiary'], ";border-radius:16px;background-color:", ({
+  theme
+}) => theme.colors['gray-100'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVU2QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgR3JpZEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWZPYmplY3QsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG4gIEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbSxcbn0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCBOYXZTZWN0aW9uIGZyb20gJy4vTmF2U2VjdGlvbic7XG5cbmNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChCb3gpYFxuICB3aWR0aDogY2FsYygxMDB2dyAtIDExcmVtKTtcbiAgbWF4LXdpZHRoOiBjYWxjKDE0NDBweCAtIDExcmVtKTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2JvcmRlci10ZXJ0aWFyeSddfTtcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuYDtcblxuY29uc3QgU3R5bGVkR3JpZEJveCA9IHN0eWxlZChHcmlkQm94KWBcbiAgcGFkZGluZzogOHB4O1xuICByb3ctZ2FwOiA4cHg7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMjY1cHggMzJweCAxZnI7XG5gO1xuXG5jb25zdCBHcmFkaWVudEJhY2tncm91bmQgPSBzdHlsZWQoQm94KWBcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KFxuICAgIDE4MGRlZyxcbiAgICByZ2JhKDAsIDAsIDAsIDApIDcuNjUlLFxuICAgIHJnYmEoMCwgMCwgMCwgMC4xNSkgMTAwJVxuICApO1xuYDtcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyU2VjdGlvblZhcmlhbnRQcm9wcyA9IHtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAga2V5RG93bkV2ZW50cz86IChldmVudDogUmVhY3QuS2V5Ym9hcmRFdmVudCkgPT4gdm9pZDtcbiAgcmVmPzogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbmF2U2VjdGlvbnM6IHtcbiAgICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIHwgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtO1xuICAgIHBhbmVsOiBSZWFjdC5Db21wb25lbnRUeXBlPHsgdGFiSW5kZXg/OiBudW1iZXIgfT47XG4gIH1bXTtcbiAgbWFya2V0aW5nQmFubmVyPzogUmVhY3QuUmVhY3ROb2RlO1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlclNlY3Rpb25WYXJpYW50ID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTERpdkVsZW1lbnQsXG4gIEFwcEhlYWRlclNlY3Rpb25WYXJpYW50UHJvcHNcbj4oKHsgaXNPcGVuLCBrZXlEb3duRXZlbnRzLCBuYXZTZWN0aW9ucywgbWFya2V0aW5nQmFubmVyIH0sIHJlZikgPT4ge1xuICBjb25zdCBbYWN0aXZlVGFiLCBzZXRBY3RpdmVUYWJdID0gdXNlU3RhdGU8bnVtYmVyPigwKTtcblxuICBjb25zdCB0YWJJbmRleCA9IGlzT3BlbiA/IDAgOiAtMTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHNldEFjdGl2ZVRhYigwKTtcbiAgICB9XG4gIH0sIFtpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQm94PlxuICAgICAgICB7bWFya2V0aW5nQmFubmVyfVxuICAgICAgICA8U3R5bGVkR3JpZEJveCByZWY9e3JlZn0gb25LZXlEb3duPXtrZXlEb3duRXZlbnRzfT5cbiAgICAgICAgICB7bmF2U2VjdGlvbnMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */"));
+const StyledGridBox = /*#__PURE__*/_styled(GridBox, {
+  target: "elr36wf1",
+  label: "StyledGridBox"
+})(process.env.NODE_ENV === "production" ? {
+  name: "29co2b",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr"
+} : {
+  name: "29co2b",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCcUMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTZWN0aW9uVmFyaWFudC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEdyaWRCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgUmVmT2JqZWN0LCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgTmF2U2VjdGlvbiBmcm9tICcuL05hdlNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlclNlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGlzT3Blbj86IGJvb2xlYW47XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD47XG4gIG5hdlNlY3Rpb25zOiB7XG4gICAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgICBwYW5lbDogUmVhY3QuQ29tcG9uZW50VHlwZTx7IHRhYkluZGV4PzogbnVtYmVyIH0+O1xuICB9W107XG4gIG1hcmtldGluZ0Jhbm5lcj86IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJTZWN0aW9uVmFyaWFudFByb3BzXG4+KCh7IGlzT3Blbiwga2V5RG93bkV2ZW50cywgbmF2U2VjdGlvbnMsIG1hcmtldGluZ0Jhbm5lciB9LCByZWYpID0+IHtcbiAgY29uc3QgW2FjdGl2ZVRhYiwgc2V0QWN0aXZlVGFiXSA9IHVzZVN0YXRlPG51bWJlcj4oMCk7XG5cbiAgY29uc3QgdGFiSW5kZXggPSBpc09wZW4gPyAwIDogLTE7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICBzZXRBY3RpdmVUYWIoMCk7XG4gICAgfVxuICB9LCBbaXNPcGVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPFN0eWxlZEJveD5cbiAgICAgICAge21hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgPFN0eWxlZEdyaWRCb3ggcmVmPXtyZWZ9IG9uS2V5RG93bj17a2V5RG93bkV2ZW50c30+XG4gICAgICAgICAge25hdlNlY3Rpb25zLm1hcCgoc2VjdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgaXRlbSwgcGFuZWw6IFBhbmVsIH0gPSBzZWN0aW9uO1xuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPE5hdlNlY3Rpb25cbiAgICAgICAgICAgICAgICBhY3RpdmVUYWI9e2FjdGl2ZVRhYn1cbiAgICAgICAgICAgICAgICBzZXRBY3RpdmVUYWI9e3NldEFjdGl2ZVRhYn1cbiAgICAgICAgICAgICAgICBpY29uPXtpdGVtLmljb259XG4gICAgICAgICAgICAgICAgdGV4dD17aXRlbS50ZXh0fVxuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8UGFuZWwgdGFiSW5kZXg9e3RhYkluZGV4fSAvPlxuICAgICAgICAgICAgICA8L05hdlNlY3Rpb24+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L1N0eWxlZEdyaWRCb3g+XG4gICAgICA8L1N0eWxlZEJveD5cblxuICAgICAgPEdyYWRpZW50QmFja2dyb3VuZFxuICAgICAgICBwb3NpdGlvbj1cImZpeGVkXCJcbiAgICAgICAgdG9wPVwiMFwiXG4gICAgICAgIGxlZnQ9XCIwXCJcbiAgICAgICAgcmlnaHQ9XCIwXCJcbiAgICAgICAgYm90dG9tPVwiMFwiXG4gICAgICAgIHpJbmRleD17LTF9XG4gICAgICAgIGRpc3BsYXk9e2lzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9XG4gICAgICAvPlxuICAgIDwvPlxuICApO1xufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const GradientBackground = /*#__PURE__*/_styled(Box, {
+  target: "elr36wf0",
+  label: "GradientBackground"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )"
+} : {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCc0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTZWN0aW9uVmFyaWFudC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEdyaWRCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgUmVmT2JqZWN0LCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgTmF2U2VjdGlvbiBmcm9tICcuL05hdlNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlclNlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGlzT3Blbj86IGJvb2xlYW47XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD47XG4gIG5hdlNlY3Rpb25zOiB7XG4gICAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgICBwYW5lbDogUmVhY3QuQ29tcG9uZW50VHlwZTx7IHRhYkluZGV4PzogbnVtYmVyIH0+O1xuICB9W107XG4gIG1hcmtldGluZ0Jhbm5lcj86IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJTZWN0aW9uVmFyaWFudFByb3BzXG4+KCh7IGlzT3Blbiwga2V5RG93bkV2ZW50cywgbmF2U2VjdGlvbnMsIG1hcmtldGluZ0Jhbm5lciB9LCByZWYpID0+IHtcbiAgY29uc3QgW2FjdGl2ZVRhYiwgc2V0QWN0aXZlVGFiXSA9IHVzZVN0YXRlPG51bWJlcj4oMCk7XG5cbiAgY29uc3QgdGFiSW5kZXggPSBpc09wZW4gPyAwIDogLTE7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICBzZXRBY3RpdmVUYWIoMCk7XG4gICAgfVxuICB9LCBbaXNPcGVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPFN0eWxlZEJveD5cbiAgICAgICAge21hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgPFN0eWxlZEdyaWRCb3ggcmVmPXtyZWZ9IG9uS2V5RG93bj17a2V5RG93bkV2ZW50c30+XG4gICAgICAgICAge25hdlNlY3Rpb25zLm1hcCgoc2VjdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgaXRlbSwgcGFuZWw6IFBhbmVsIH0gPSBzZWN0aW9uO1xuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPE5hdlNlY3Rpb25cbiAgICAgICAgICAgICAgICBhY3RpdmVUYWI9e2FjdGl2ZVRhYn1cbiAgICAgICAgICAgICAgICBzZXRBY3RpdmVUYWI9e3NldEFjdGl2ZVRhYn1cbiAgICAgICAgICAgICAgICBpY29uPXtpdGVtLmljb259XG4gICAgICAgICAgICAgICAgdGV4dD17aXRlbS50ZXh0fVxuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8UGFuZWwgdGFiSW5kZXg9e3RhYkluZGV4fSAvPlxuICAgICAgICAgICAgICA8L05hdlNlY3Rpb24+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L1N0eWxlZEdyaWRCb3g+XG4gICAgICA8L1N0eWxlZEJveD5cblxuICAgICAgPEdyYWRpZW50QmFja2dyb3VuZFxuICAgICAgICBwb3NpdGlvbj1cImZpeGVkXCJcbiAgICAgICAgdG9wPVwiMFwiXG4gICAgICAgIGxlZnQ9XCIwXCJcbiAgICAgICAgcmlnaHQ9XCIwXCJcbiAgICAgICAgYm90dG9tPVwiMFwiXG4gICAgICAgIHpJbmRleD17LTF9XG4gICAgICAgIGRpc3BsYXk9e2lzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9XG4gICAgICAvPlxuICAgIDwvPlxuICApO1xufSk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const AppHeaderSectionVariant = /*#__PURE__*/React.forwardRef(({
+  isOpen,
+  keyDownEvents,
+  navSections,
+  marketingBanner
+}, ref) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const tabIndex = isOpen ? 0 : -1;
+  useEffect(() => {
+    if (isOpen) {
+      setActiveTab(0);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledBox, {
+      children: [marketingBanner, /*#__PURE__*/_jsx(StyledGridBox, {
+        ref: ref,
+        onKeyDown: keyDownEvents,
+        children: navSections.map((section, index) => {
+          const {
+            item,
+            panel: Panel
+          } = section;
+          return /*#__PURE__*/_jsx(NavSection, {
+            activeTab: activeTab,
+            setActiveTab: setActiveTab,
+            icon: item.icon,
+            text: item.text,
+            index: index,
+            item: item,
+            tabIndex: tabIndex,
+            children: /*#__PURE__*/_jsx(Panel, {
+              tabIndex: tabIndex
+            })
+          }, item.id);
+        })
+      })]
+    }), /*#__PURE__*/_jsx(GradientBackground, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0",
+      zIndex: -1,
+      display: isOpen ? 'block' : 'none'
+    })]
+  });
+});

package/dist/AppHeaderMobile/AppHeaderCatalogSectonVariantMobile/index.js

@@ -2,7 +2,7 @@ import _styled from "@emotion/styled/base";
 import { Box, FlexBox } from '@codecademy/gamut';
 import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
 import React, { useState } from 'react';
-import { NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/consts';
+import { CATALOG_NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts';
 import { useGlobalHeaderItemClick } from '../../GlobalHeader/context';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const StyledButton = /*#__PURE__*/_styled("button", {
@@ -12,7 +12,7 @@ const StyledButton = /*#__PURE__*/_styled("button", {
   theme
 }) => theme.colors['border-tertiary'], ";border-radius:8px;background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
   theme
-}) => theme.colors.text, ";text-align:left;width:264px;height:60px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyQ2F0YWxvZ1NlY3RvblZhcmlhbnRNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNxRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlckNhdGFsb2dTZWN0b25WYXJpYW50TW9iaWxlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEFycm93Q2hldnJvblJpZ2h0SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25Qcm9wcyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbic7XG5pbXBvcnQgeyBOQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2NvbnN0cyc7XG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpbmRleDogbnVtYmVyIH0+YFxuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBmb250LXdlaWdodDogNDAwO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHdpZHRoOiAyNjRweDtcbiAgaGVpZ2h0OiA2MHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi1ib3R0b206IDE2cHg7XG5gO1xuXG5jb25zdCBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRNb2JpbGUgPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25Qcm9wc1xuPigoeyBrZXlEb3duRXZlbnRzIH0sIHJlZikgPT4ge1xuICBjb25zdCBbYWN0aXZlTWVudSwgc2V0QWN0aXZlTWVudV0gPSB1c2VTdGF0ZTxudW1iZXIgfCBudWxsPihudWxsKTtcbiAgY29uc3QgW2FjdGl2ZVBhbmVsLCBzZXRBY3RpdmVQYW5lbF0gPSB1c2VTdGF0ZTxSZWFjdC5SZWFjdE5vZGUgfCBudWxsPihudWxsKTtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBvbktleURvd249e2tleURvd25FdmVudHN9XG4gICAgICBtbD17eyBfOiAxNiwgeHM6IDMyLCBzbTogNjQsIG1kOiA0OCB9fVxuICAgID5cbiAgICAgIHthY3RpdmVNZW51ID09PSBudWxsID8gKFxuICAgICAgICA8PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgICBpdGVtOiB7IGljb246IEljb24sIHRleHQsIGlkIH0sXG4gICAgICAgICAgICAgIHBhbmVsOiBQYW5lbCxcbiAgICAgICAgICAgIH0gPSBzZWN0aW9uO1xuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPFN0eWxlZEJ1dHRvblxuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgc2VjdGlvbi5pdGVtKTtcbiAgICAgICAgICAgICAgICAgIHNldEFjdGl2ZU1lbnUoaW5kZXgpO1xuICAgICAgICAgICAgICAgICAgc2V0QWN0aXZlUGFuZWwoPFBhbmVsIC8+KTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtgbmF2LXNlY3Rpb24tJHtpZH1gfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPEZsZXhCb3ggZ2FwPXs4fSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICAgICAgICAgIHt0ZXh0fVxuICAgICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIC8+XG4gICAgICAgICAgICAgIDwvU3R5bGVkQnV0dG9uPlxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC8+XG4gICAgICApIDogKFxuICAgICAgICA8PnthY3RpdmVQYW5lbH08Lz5cbiAgICAgICl9XG4gICAgPC9Cb3g+XG4gICk7XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50TW9iaWxlO1xuIl19 */"));
+}) => theme.colors.text, ";text-align:left;width:264px;height:60px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyQ2F0YWxvZ1NlY3RvblZhcmlhbnRNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNxRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlckNhdGFsb2dTZWN0b25WYXJpYW50TW9iaWxlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEFycm93Q2hldnJvblJpZ2h0SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2NvbnN0cyc7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dTZWN0aW9uJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGluZGV4OiBudW1iZXIgfT5gXG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDI2NHB4O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWJvdHRvbTogMTZweDtcbmA7XG5cbmNvbnN0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudE1vYmlsZSA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblByb3BzXG4+KCh7IGtleURvd25FdmVudHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVNZW51LCBzZXRBY3RpdmVNZW51XSA9IHVzZVN0YXRlPG51bWJlciB8IG51bGw+KG51bGwpO1xuICBjb25zdCBbYWN0aXZlUGFuZWwsIHNldEFjdGl2ZVBhbmVsXSA9IHVzZVN0YXRlPFJlYWN0LlJlYWN0Tm9kZSB8IG51bGw+KG51bGwpO1xuICBjb25zdCB7IGdsb2JhbEhlYWRlckl0ZW1DbGljayB9ID0gdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICByZWY9e3JlZn1cbiAgICAgIG9uS2V5RG93bj17a2V5RG93bkV2ZW50c31cbiAgICAgIG1sPXt7IF86IDE2LCB4czogMzIsIHNtOiA2NCwgbWQ6IDQ4IH19XG4gICAgPlxuICAgICAge2FjdGl2ZU1lbnUgPT09IG51bGwgPyAoXG4gICAgICAgIDw+XG4gICAgICAgICAge0NBVEFMT0dfTkFWX1NFQ1RJT05TLm1hcCgoc2VjdGlvbiwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgICAgaXRlbTogeyBpY29uOiBJY29uLCB0ZXh0LCBpZCB9LFxuICAgICAgICAgICAgICBwYW5lbDogUGFuZWwsXG4gICAgICAgICAgICB9ID0gc2VjdGlvbjtcbiAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgIDxTdHlsZWRCdXR0b25cbiAgICAgICAgICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgICAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgICAgICAgICBnbG9iYWxIZWFkZXJJdGVtQ2xpY2soZXZlbnQsIHNlY3Rpb24uaXRlbSk7XG4gICAgICAgICAgICAgICAgICBzZXRBY3RpdmVNZW51KGluZGV4KTtcbiAgICAgICAgICAgICAgICAgIHNldEFjdGl2ZVBhbmVsKDxQYW5lbCAvPik7XG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17YG5hdi1zZWN0aW9uLSR7aWR9YH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxGbGV4Qm94IGdhcD17OH0gYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgICAgICAge0ljb24gJiYgPEljb24gLz59XG4gICAgICAgICAgICAgICAgICB7dGV4dH1cbiAgICAgICAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgICAgICAgICAgPEFycm93Q2hldnJvblJpZ2h0SWNvbiAvPlxuICAgICAgICAgICAgICA8L1N0eWxlZEJ1dHRvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvPlxuICAgICAgKSA6IChcbiAgICAgICAgPD57YWN0aXZlUGFuZWx9PC8+XG4gICAgICApfVxuICAgIDwvQm94PlxuICApO1xufSk7XG5cbmV4cG9ydCBkZWZhdWx0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudE1vYmlsZTtcbiJdfQ== */"));
 const AppHeaderCatalogSectionVariantMobile = /*#__PURE__*/React.forwardRef(({
   keyDownEvents
 }, ref) => {
@@ -31,7 +31,7 @@ const AppHeaderCatalogSectionVariantMobile = /*#__PURE__*/React.forwardRef(({
       md: 48
     },
     children: activeMenu === null ? /*#__PURE__*/_jsx(_Fragment, {
-      children: NAV_SECTIONS.map((section, index) => {
+      children: CATALOG_NAV_SECTIONS.map((section, index) => {
         const {
           item: {
             icon: Icon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "2.11.0-alpha.5efd9a735f.0",
+  "version": "2.11.0-alpha.9ca190917a.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/NavSection.js

@@ -1,75 +0,0 @@
-import _styled from "@emotion/styled/base";
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React from 'react';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const NavPanelContainer = /*#__PURE__*/_styled(Box, {
-  target: "e1j23yaz1",
-  label: "NavPanelContainer"
-})("display:", ({
-  isActive
-}) => isActive ? 'block' : 'none', ";grid-column:2/span 12;grid-row:1/span 8;background-color:", ({
-  theme
-}) => theme.colors.background, ";border-radius:", ({
-  isActive,
-  isFirst
-}) => isActive && isFirst ? '0 8px 8px 8px' : '8px', ";padding:24px 32px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0NoZXZyb25SaWdodEljb24sIEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
-const StyledButton = /*#__PURE__*/_styled("button", {
-  target: "e1j23yaz0",
-  label: "StyledButton"
-})("grid-column:1;grid-row:", ({
-  index
-}) => index + 1, ";padding:16px;border:none;border-radius:", ({
-  isActive
-}) => isActive ? '8px 0 0 8px' : '8px', ";background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
-  theme
-}) => theme.colors.text, ";text-align:left;width:100%;height:60px;display:flex;justify-content:space-between;align-items:center;background-color:", ({
-  isActive,
-  theme
-}) => isActive ? theme.colors.background : theme.colors['gray-100'], ";#arrow-chevron-right-icon{display:", ({
-  isActive
-}) => isActive ? 'block' : 'none', ";}&:hover,&:focus{background-color:", ({
-  theme
-}) => theme.colors['navy-100'], ";color:", ({
-  theme
-}) => theme.colors.primary, ";#arrow-chevron-right-icon{display:block;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCd0UiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0NoZXZyb25SaWdodEljb24sIEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
-const NavSection = ({
-  activeTab,
-  setActiveTab,
-  icon: Icon,
-  text,
-  index,
-  children,
-  item,
-  tabIndex
-}) => {
-  const {
-    globalHeaderItemClick
-  } = useGlobalHeaderItemClick();
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(StyledButton, {
-      isActive: activeTab === index,
-      index: index,
-      onClick: event => {
-        globalHeaderItemClick(event, item);
-        setActiveTab(index);
-      },
-      "data-testid": `nav-section-${item.id}`,
-      "aria-expanded": activeTab === index,
-      tabIndex: tabIndex,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        gap: 8,
-        alignItems: "center",
-        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
-      }), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
-        id: "arrow-chevron-right-icon"
-      })]
-    }), /*#__PURE__*/_jsx(NavPanelContainer, {
-      isActive: activeTab === index,
-      isFirst: index === 0,
-      children: children
-    })]
-  });
-};
-export default NavSection;

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

@@ -1,11 +0,0 @@
-import React, { RefObject } from 'react';
-import { AppHeaderCatalogDropdownItem } from '../../shared';
-export type AppHeaderCatalogSectionVariantProps = {
-    item: AppHeaderCatalogDropdownItem;
-    ref?: RefObject<HTMLUListElement>;
-    role?: string;
-    id?: string;
-    keyDownEvents?: (event: React.KeyboardEvent) => void;
-    isOpen?: boolean;
-};
-export declare const AppHeaderCatalogSectionVariant: React.ForwardRefExoticComponent<Omit<AppHeaderCatalogSectionVariantProps, "ref"> & React.RefAttributes<HTMLDivElement>>;