@codecademy/brand 2.11.0-alpha.30f0957631.0 → 2.11.0-alpha.5e1e1ddc69.0

package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogSectionVariant → AppHeaderCatalogDropdown}/NavPanels.js

@@ -1,12 +1,12 @@
-/* eslint-disable react/no-array-index-key */
-import { Anchor, Box, Card, FlexBox, GridBox, Text, TextButton } from '@codecademy/gamut';
-import { LevelIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
+/* eslint-disable react/no-array-index-key */ // can be removed once we add dynamic data
+import { Anchor, Box, Card, FlexBox, GridBox, Text } from '@codecademy/gamut';
+import { LevelIcon } from '@codecademy/gamut-icons';
 import { theme } from '@codecademy/gamut-styles';
 import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
 import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
 import { liveLearningHubItems, topLanguages } from '../../../lib/catalogList';
 import { AppHeaderDietCard } from '../AppHeaderDietCard';
-import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { PanelLayout } from '../AppHeaderSectionVariant/PanelLayout';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const CourseTopicsPanel = ({
   tabIndex = 0
@@ -229,44 +229,4 @@ export const LiveLearningPanel = ({
       }, item.id))
     })
   });
-};
-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, /*#__PURE__*/_jsxs(TextButton, {
-      href: linkItem.href,
-      onClick: event => {
-        globalHeaderItemClick(event, linkItem);
-        handleClose();
-      },
-      tabIndex: tabIndex,
-      children: [linkItem.text, " ", /*#__PURE__*/_jsx(MiniArrowRightIcon, {
-        ml: 8
-      })]
-    })]
-  });
 };

package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogSectionVariant → AppHeaderCatalogDropdown}/consts.d.ts

@@ -6,4 +6,4 @@ export type NavSectionConfig = {
         tabIndex?: number;
     }>;
 };
-export declare const NAV_SECTIONS: NavSectionConfig[];
+export declare const CATALOG_NAV_SECTIONS: NavSectionConfig[];

package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogSectionVariant → AppHeaderCatalogDropdown}/consts.js

@@ -1,6 +1,6 @@
 import { BriefcaseIcon, DiamondIcon, ProfessionalCertificateIcon, ProgrammingTeamChatIcon, StudyBookIcon } from '@codecademy/gamut-icons';
 import { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel } from './NavPanels';
-export const NAV_SECTIONS = [{
+export const CATALOG_NAV_SECTIONS = [{
   item: {
     icon: StudyBookIcon,
     text: 'Course topics',

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

@@ -5,10 +5,11 @@ import * as React from 'react';
 import { GlobalNavRedesignContext } from '../../../GlobalHeader';
 import { AnimatedMegaMenuDropdown } from '../../shared';
 import { AppHeaderCatalogSection } from '../AppHeaderCatalogSection';
-import { AppHeaderCatalogSectionVariant } from '../AppHeaderCatalogSectionVariant';
 import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
 import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton/AppHeaderDropdownNavButton';
 import { useAppHeaderContext } from '../AppHeaderProvider';
+import { AppHeaderSectionVariant } from '../AppHeaderSectionVariant';
+import { CATALOG_NAV_SECTIONS } from './consts';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
   target: "eaa3s9f0",
@@ -19,7 +20,7 @@ const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDrop
 }) => 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QkUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlcic7XG5pbXBvcnQge1xuICBBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sXG4gIEFwcEhlYWRlckFjdGlvbixcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbn0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24nO1xuaW1wb3J0IHsgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50IH0gZnJvbSAnLi4vQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50JztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyTmF2QnV0dG9uL0FwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJQcm92aWRlcic7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtO1xuICBpc0Fub246IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24gPSBzdHlsZWQoQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duKTx7XG4gIGlzQW5vbjogYm9vbGVhbjtcbiAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduOiBib29sZWFuO1xufT5gXG4gIGxlZnQ6ICR7KHsgaXNBbm9uLCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gfSkgPT5cbiAgICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAnLTU4cHgnIDogaXNBbm9uID8gJy05cmVtJyA6ICctMTRyZW0nfTtcblxuICBAbWVkaWEgKG1pbi13aWR0aDogMTI2MXB4KSB7XG4gICAgbGVmdDogJHsoeyBpc0Fub24sIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiB9KSA9PlxuICAgICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID8gJy0xNTJweCcgOiBpc0Fub24gPyAnLTlyZW0nIDogJy0xNHJlbSd9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duUHJvcHNcbj4gPSAoeyBhY3Rpb24sIGl0ZW0sIGlzQW5vbiB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBmb2N1c0J1dHRvbiA9ICgpID0+IHtcbiAgICBidXR0b25SZWY/LmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuXG4gICAgaWYgKCFpc09wZW4pIHtcbiAgICAgIGFjdGlvbihldmVudCwgaXRlbSk7XG4gICAgICBpZiAoc2V0TGFzdE9wZW5lZERyb3Bkb3duKSB7XG4gICAgICAgIHNldExhc3RPcGVuZWREcm9wZG93bih0ZXh0KTtcbiAgICAgIH1cbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2xvc2UgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICBmb2N1c0J1dHRvbigpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcbiAgY29uc3QgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID0gdXNlQ29udGV4dChHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlfT5cbiAgICAgIDxBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHRpdGxlPXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNBbm9uPXtpc0Fub259XG4gICAgICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbj17ZGlzcGxheUdsb2JhbE5hdlJlZGVzaWdufVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHRvcDogJzMuNXJlbScsXG4gICAgICAgICAgbWluV2lkdGg6ICc2NHJlbScsXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAndHJhbnNwYXJlbnQnIDogJycsXG4gICAgICAgIH19XG4gICAgICAgIGluaXRpYWw9e3sgYm9yZGVyV2lkdGg6IDAsIGhlaWdodDogMCB9fVxuICAgICAgICBhbmltYXRlPXt7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGlzT3BlbiA/IChkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAwIDogMSkgOiAwLFxuICAgICAgICAgIGhlaWdodDogaXNPcGVuID8gJ2ZpdC1jb250ZW50JyA6IDAsXG4gICAgICAgIH19XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMTc1IH19XG4gICAgICAgIGFyaWEtaGlkZGVuPXshaXNPcGVufVxuICAgICAgICBkYXRhLXRlc3RpZD1cImNhdGFsb2ctbWVudS1kcm9wZG93blwiXG4gICAgICA+XG4gICAgICAgIHtkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAoXG4gICAgICAgICAgPENvbG9yTW9kZSBtb2RlPVwibGlnaHRcIj5cbiAgICAgICAgICAgIDxBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRcbiAgICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICAgIGlkPXtgbWVudS1jb250YWluZXIke2l0ZW0udGV4dH1gfVxuICAgICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uXG4gICAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICAgIGlkPXtgbWVudS1jb250YWluZXIke2l0ZW0udGV4dH1gfVxuICAgICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgICBoYW5kbGVDbG9zZT17KCkgPT4gc2V0SXNPcGVuKGZhbHNlKX1cbiAgICAgICAgICAvPlxuICAgICAgICApfVxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
+}) => displayGlobalNavRedesign ? '-152px' : isAnon ? '-9rem' : '-14rem', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQkUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlcic7XG5pbXBvcnQge1xuICBBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sXG4gIEFwcEhlYWRlckFjdGlvbixcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbn0gZnJvbSAnLi4vLi4vc2hhcmVkJztcbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24nO1xuaW1wb3J0IHsgQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlciB9IGZyb20gJy4uL0FwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b24gfSBmcm9tICcuLi9BcHBIZWFkZXJOYXZCdXR0b24vQXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b24nO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlclNlY3Rpb25WYXJpYW50IH0gZnJvbSAnLi4vQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQnO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuL2NvbnN0cyc7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtO1xuICBpc0Fub246IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24gPSBzdHlsZWQoQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duKTx7XG4gIGlzQW5vbjogYm9vbGVhbjtcbiAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduOiBib29sZWFuO1xufT5gXG4gIGxlZnQ6ICR7KHsgaXNBbm9uLCBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gfSkgPT5cbiAgICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAnLTU4cHgnIDogaXNBbm9uID8gJy05cmVtJyA6ICctMTRyZW0nfTtcblxuICBAbWVkaWEgKG1pbi13aWR0aDogMTI2MXB4KSB7XG4gICAgbGVmdDogJHsoeyBpc0Fub24sIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiB9KSA9PlxuICAgICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID8gJy0xNTJweCcgOiBpc0Fub24gPyAnLTlyZW0nIDogJy0xNHJlbSd9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duUHJvcHNcbj4gPSAoeyBhY3Rpb24sIGl0ZW0sIGlzQW5vbiB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBmb2N1c0J1dHRvbiA9ICgpID0+IHtcbiAgICBidXR0b25SZWY/LmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuXG4gICAgaWYgKCFpc09wZW4pIHtcbiAgICAgIGFjdGlvbihldmVudCwgaXRlbSk7XG4gICAgICBpZiAoc2V0TGFzdE9wZW5lZERyb3Bkb3duKSB7XG4gICAgICAgIHNldExhc3RPcGVuZWREcm9wZG93bih0ZXh0KTtcbiAgICAgIH1cbiAgICB9XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2xvc2UgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICBmb2N1c0J1dHRvbigpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcbiAgY29uc3QgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduID0gdXNlQ29udGV4dChHbG9iYWxOYXZSZWRlc2lnbkNvbnRleHQpO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlfT5cbiAgICAgIDxBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHRpdGxlPXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNBbm9uPXtpc0Fub259XG4gICAgICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbj17ZGlzcGxheUdsb2JhbE5hdlJlZGVzaWdufVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHRvcDogJzMuNXJlbScsXG4gICAgICAgICAgbWluV2lkdGg6ICc2NHJlbScsXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAndHJhbnNwYXJlbnQnIDogJycsXG4gICAgICAgIH19XG4gICAgICAgIGluaXRpYWw9e3sgYm9yZGVyV2lkdGg6IDAsIGhlaWdodDogMCB9fVxuICAgICAgICBhbmltYXRlPXt7XG4gICAgICAgICAgYm9yZGVyV2lkdGg6IGlzT3BlbiA/IChkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAwIDogMSkgOiAwLFxuICAgICAgICAgIGhlaWdodDogaXNPcGVuID8gJ2ZpdC1jb250ZW50JyA6IDAsXG4gICAgICAgIH19XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMTc1IH19XG4gICAgICAgIGFyaWEtaGlkZGVuPXshaXNPcGVufVxuICAgICAgICBkYXRhLXRlc3RpZD1cImNhdGFsb2ctbWVudS1kcm9wZG93blwiXG4gICAgICA+XG4gICAgICAgIHtkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAoXG4gICAgICAgICAgPENvbG9yTW9kZSBtb2RlPVwibGlnaHRcIj5cbiAgICAgICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uVmFyaWFudFxuICAgICAgICAgICAgICBpc09wZW49e2lzT3Blbn1cbiAgICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICAgIG5hdlNlY3Rpb25zPXtDQVRBTE9HX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uXG4gICAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICByZWY9e2NvbnRhaW5lclJlZn1cbiAgICAgICAgICAgIGlkPXtgbWVudS1jb250YWluZXIke2l0ZW0udGV4dH1gfVxuICAgICAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgICAgICBoYW5kbGVDbG9zZT17KCkgPT4gc2V0SXNPcGVuKGZhbHNlKX1cbiAgICAgICAgICAvPlxuICAgICAgICApfVxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
 export const AppHeaderCatalogDropdown = ({
   action,
   item,
@@ -104,11 +105,10 @@ export const AppHeaderCatalogDropdown = ({
       "data-testid": "catalog-menu-dropdown",
       children: displayGlobalNavRedesign ? /*#__PURE__*/_jsx(ColorMode, {
         mode: "light",
-        children: /*#__PURE__*/_jsx(AppHeaderCatalogSectionVariant, {
-          item: item,
+        children: /*#__PURE__*/_jsx(AppHeaderSectionVariant, {
+          isOpen: isOpen,
           ref: containerRef,
-          id: `menu-container${item.text}`,
-          isOpen: isOpen
+          navSections: CATALOG_NAV_SECTIONS
         })
       }) : /*#__PURE__*/_jsx(AppHeaderCatalogSection, {
         action: action,

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

@@ -0,0 +1,4 @@
+import { AppHeaderCardItem } from '../AppHeaderResourcesDropdown/consts';
+export declare const AppHeaderFeatureCard: ({ item }: {
+    item: AppHeaderCardItem;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+import _styled from "@emotion/styled/base";
+import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { GridDense } from '@codecademy/gamut-patterns';
+import { theme } from '@codecademy/gamut-styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1lwunvl0",
+  label: "StyledCard"
+})("&:hover{color:", ({
+  theme
+}) => theme.colors.primary, ";border-color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRmVhdHVyZUNhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckZlYXR1cmVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdyaWREZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2FyZEl0ZW0gfSBmcm9tICcuLi9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9jb25zdHMnO1xuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkKENhcmQpYFxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckZlYXR1cmVDYXJkID0gKHsgaXRlbSB9OiB7IGl0ZW06IEFwcEhlYWRlckNhcmRJdGVtIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcHg9ezh9XG4gICAgICBweT17MjR9XG4gICAgICBib3JkZXJSYWRpdXM9XCJsZ1wiXG4gICAgICBib3JkZXI9ezF9XG4gICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICBhbGlnbkl0ZW1zPVwiZmxleC1zdGFydFwiXG4gICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgIGhlaWdodD1cIjEwMCVcIlxuICAgID5cbiAgICAgIDxGbGV4Qm94IGFsaWduSXRlbXM9XCJjZW50ZXJcIiBnYXA9ezh9PlxuICAgICAgICA8Qm94XG4gICAgICAgICAgYmFja2dyb3VuZD17dGhlbWUuY29sb3JzWyduYXZ5LTIwMCddfVxuICAgICAgICAgIGJvcmRlclJhZGl1cz1cIm1kXCJcbiAgICAgICAgICBwPXs0fVxuICAgICAgICAgIGhlaWdodD17MjZ9XG4gICAgICAgID5cbiAgICAgICAgICB7aXRlbS5pY29ufVxuICAgICAgICA8L0JveD5cbiAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLXhzXCI+e2l0ZW0ubGlua0l0ZW0udGV4dH08L1RleHQ+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICA8Qm94IHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICA8R3JpZERlbnNlIGhlaWdodD17NH0gLz5cbiAgICAgIDwvQm94PlxuICAgICAgPFRleHQgdmFyaWFudD1cInAtYmFzZVwiPntpdGVtLmRlc2NyaXB0aW9ufTwvVGV4dD5cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */"));
+export const AppHeaderFeatureCard = ({
+  item
+}) => {
+  return /*#__PURE__*/_jsxs(StyledCard, {
+    isInteractive: true,
+    px: 8,
+    py: 24,
+    borderRadius: "lg",
+    border: 1,
+    borderColor: "border-tertiary",
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    height: "100%",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(Box, {
+        background: theme.colors['navy-200'],
+        borderRadius: "md",
+        p: 4,
+        height: 26,
+        children: item.icon
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "title-xs",
+        children: item.linkItem.text
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: /*#__PURE__*/_jsx(GridDense, {
+        height: 4
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "p-base",
+      children: item.description
+    })]
+  });
+};

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

@@ -0,0 +1,11 @@
+import { AppHeaderCardItem } from './consts';
+type NavPanelProps = {
+    tabIndex?: number;
+    links: AppHeaderCardItem[];
+};
+export declare const DocsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LearningToolsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PracticeToolsPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InspirationPanel: ({ tabIndex }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureCardPanel: ({ tabIndex, links }: NavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,123 @@
+import { Anchor, FlexBox, GridBox } from '@codecademy/gamut';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';
+import { PanelLayout } from '../AppHeaderSectionVariant/PanelLayout';
+import { docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks } from './consts';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DocsPanel = ({
+  tabIndex = 0
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const description = /*#__PURE__*/_jsxs(_Fragment, {
+    children: ["Docs is a community-driven resource for all things programming. Even if you don't have a Codecademy account, you can quickly find definitions and explanations for most coding languages, frameworks, and technical concepts.", /*#__PURE__*/_jsx("br", {}), " ", /*#__PURE__*/_jsx("br", {}), "Interested in helping build it?", ' ', /*#__PURE__*/_jsx(Anchor, {
+      href: "/docs/contribute",
+      children: "Contribute to Docs"
+    })]
+  });
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Docs",
+    description: description,
+    linkItem: {
+      type: 'link',
+      href: '/docs',
+      text: 'Explore all Docs',
+      trackingTarget: 'topnav_resources_docs',
+      id: 'docs'
+    },
+    tabIndex: tabIndex,
+    children: /*#__PURE__*/_jsx(GridBox, {
+      gridTemplateColumns: {
+        _: '1fr',
+        lg: '1fr 1fr 1fr'
+      },
+      gap: 8,
+      pl: 0,
+      as: "ul",
+      listStyle: "none",
+      children: docsLinks.map(item => /*#__PURE__*/_jsx(Anchor, {
+        variant: "interface",
+        href: item.href,
+        onClick: event => globalHeaderItemClick(event, item),
+        tabIndex: tabIndex,
+        as: "li",
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          height: 48,
+          px: 16,
+          py: 8,
+          borderRadius: "md",
+          border: 1,
+          borderColor: "border-tertiary",
+          alignItems: "center",
+          children: [item.text, item.badge]
+        }, `${item.id}`)
+      }, `${item.id}`))
+    })
+  });
+};
+export const LearningToolsPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Learning tools",
+    description: "Faucibus ultricies risus tincidunt in placerat sodales euismod convallis nulla. Et amet platea lobortis ultrices neque sollicitudin pretium. Vulputate elit morbi ut arcu aliquam augue pellentesque. Eleifend enim suspendisse nibh lectus.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: learningToolsLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const PracticeToolsPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Practice tools",
+    description: "Lectus enim vulputate in leo in vulputate adipiscing aliquam purus. Semper malesuada viverra pretium cursus vel donec pulvinar nisi. Quis proin quam arcu maecenas orci tincidunt. Elementum feugiat amet mi sagittis nisi.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: practiceToolsLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const InspirationPanel = ({
+  tabIndex = 0
+}) => {
+  return /*#__PURE__*/_jsx(PanelLayout, {
+    heading: "Inspiration",
+    description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.",
+    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
+      links: inspirationLinks,
+      tabIndex: tabIndex
+    })
+  });
+};
+export const FeatureCardPanel = ({
+  tabIndex = 0,
+  links
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  return /*#__PURE__*/_jsx(GridBox, {
+    gridTemplateColumns: {
+      _: '1fr',
+      lg: '1fr 1fr'
+    },
+    gridTemplateRows: {
+      _: '1fr',
+      lg: '1fr 1fr'
+    },
+    gap: 16,
+    children: links.map(item => /*#__PURE__*/_jsx(Anchor, {
+      variant: "interface",
+      href: item.linkItem.href,
+      onClick: event => globalHeaderItemClick(event, item.linkItem),
+      tabIndex: tabIndex,
+      height: "100%",
+      children: /*#__PURE__*/_jsx(AppHeaderFeatureCard, {
+        item: item
+      })
+    }, `${item.linkItem.id}`))
+  });
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AppHeaderLinkItem, AppHeaderResourcesDropdownItem } from '../../shared';
+export type NavSectionConfig = {
+    item: AppHeaderResourcesDropdownItem;
+    panel: React.ComponentType<{
+        tabIndex?: number;
+    }>;
+};
+export declare const RESOURCES_NAV_SECTIONS: NavSectionConfig[];
+export declare const docsLinks: AppHeaderLinkItem[];
+export type AppHeaderCardItem = {
+    linkItem: AppHeaderLinkItem;
+    icon: React.ReactNode;
+    description: string;
+};
+export declare const learningToolsLinks: AppHeaderCardItem[];
+export declare const practiceToolsLinks: AppHeaderCardItem[];
+export declare const inspirationLinks: AppHeaderCardItem[];

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

@@ -0,0 +1,273 @@
+import { ArticleIcon, BulbIcon, DiamondIcon, FileIcon, NotebookIcon, ProjectsIcon, RulerTriangleIcon, VideoPlayerMovieIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel } from './NavPanels';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RESOURCES_NAV_SECTIONS = [{
+  item: {
+    icon: FileIcon,
+    text: 'Docs',
+    id: 'docs',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_docs'
+  },
+  panel: DocsPanel
+}, {
+  item: {
+    icon: RulerTriangleIcon,
+    text: 'Learning tools',
+    id: 'learning-tools',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_learning_tools'
+  },
+  panel: LearningToolsPanel
+}, {
+  item: {
+    icon: DiamondIcon,
+    text: 'Practice tools',
+    id: 'practice-tools',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_practice_tools'
+  },
+  panel: PracticeToolsPanel
+}, {
+  item: {
+    icon: BulbIcon,
+    text: 'Inspiration',
+    id: 'inspiration',
+    type: 'resources-dropdown',
+    trackingTarget: 'topnav_resources_inspiration'
+  },
+  panel: InspirationPanel
+}];
+export const docsLinks = [{
+  id: 'c',
+  href: '/resources/docs/c',
+  trackingTarget: 'topnav_resources_docs_c',
+  text: 'C',
+  type: 'link'
+}, {
+  id: 'html',
+  href: '/resources/docs/html',
+  trackingTarget: 'topnav_resources_docs_html',
+  text: 'HTML',
+  type: 'link'
+}, {
+  id: 'python',
+  href: '/resources/docs/python',
+  trackingTarget: 'topnav_resources_docs_python',
+  text: 'Python',
+  type: 'link'
+}, {
+  id: 'cpp',
+  href: '/resources/docs/cpp',
+  trackingTarget: 'topnav_resources_docs_cpp',
+  text: 'C++',
+  type: 'link'
+}, {
+  id: 'java',
+  href: '/resources/docs/java',
+  trackingTarget: 'topnav_resources_docs_java',
+  text: 'Java',
+  type: 'link'
+}, {
+  id: 'react',
+  href: '/resources/docs/react',
+  trackingTarget: 'topnav_resources_docs_react',
+  text: 'React',
+  type: 'link'
+}, {
+  id: 'css',
+  href: '/resources/docs/css',
+  trackingTarget: 'topnav_resources_docs_css',
+  text: 'CSS',
+  type: 'link'
+}, {
+  id: 'javascript',
+  href: '/resources/docs/javascript',
+  trackingTarget: 'topnav_resources_docs_javascript',
+  text: 'JavaScript',
+  type: 'link'
+}, {
+  id: 'sql',
+  href: '/resources/docs/sql',
+  trackingTarget: 'topnav_resources_docs_sql',
+  text: 'SQL',
+  type: 'link'
+}, {
+  id: 'git',
+  href: '/resources/docs/git',
+  trackingTarget: 'topnav_resources_docs_git',
+  text: 'Git',
+  type: 'link'
+}, {
+  id: 'php',
+  href: '/resources/docs/php',
+  trackingTarget: 'topnav_resources_docs_php',
+  text: 'PHP',
+  type: 'link'
+}, {
+  id: 'uiux',
+  href: '/resources/docs/uiux',
+  trackingTarget: 'topnav_resources_docs_uiux',
+  text: 'UI/UX',
+  type: 'link'
+}, {
+  id: 'markdown',
+  href: '/resources/docs/markdown',
+  trackingTarget: 'topnav_resources_docs_markdown',
+  text: 'Markdown',
+  type: 'link'
+}, {
+  id: 'data-science',
+  href: '/resources/docs/data-science',
+  trackingTarget: 'topnav_resources_docs_data_science',
+  text: 'Data science',
+  type: 'link'
+}, {
+  id: 'ai',
+  href: '/resources/docs/ai',
+  trackingTarget: 'topnav_resources_docs_ai',
+  text: 'AI',
+  type: 'link'
+}, {
+  id: 'data-visualization',
+  href: '/resources/docs/data-visualization',
+  trackingTarget: 'topnav_resources_docs_data_visualization',
+  text: 'Data visualization',
+  type: 'link'
+}, {
+  id: 'typescript',
+  href: '/resources/docs/typescript',
+  trackingTarget: 'topnav_resources_docs_typescript',
+  text: 'TypeScript',
+  type: 'link'
+}, {
+  id: 'ruby',
+  href: '/resources/docs/ruby',
+  trackingTarget: 'topnav_resources_docs_ruby',
+  text: 'Ruby',
+  type: 'link'
+}];
+export const learningToolsLinks = [{
+  linkItem: {
+    id: 'projects',
+    href: '/projects',
+    trackingTarget: 'topnav_resources_projects',
+    text: 'Projects',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: "Projects let you apply what you're learning. Practice new skills, connect concepts, or put it all together to create something of your own."
+}, {
+  linkItem: {
+    id: 'cheatsheets',
+    href: '/resources/cheatsheets/all',
+    trackingTarget: 'topnav_resources_cheatsheets',
+    text: 'Cheatsheets',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: 'Sagittis magna mattis risus et tortor. Id morbi ornare mi convallis non. Lorem dis vulputate morbi porttitor tincidunt. Ullamcorper risus eu vestibulum malesuada ullamcorper.'
+}, {
+  linkItem: {
+    id: 'articles',
+    href: '/articles',
+    trackingTarget: 'topnav_resources_articles',
+    text: 'Articles',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: "Articles are more in-depth explanations about concepts covered in Codecademy courses. Here you'll learn more about workflows that developers use every day, and take your coding skills to the next level."
+}, {
+  linkItem: {
+    id: 'videos',
+    href: '/resources/videos',
+    trackingTarget: 'topnav_resources_videos',
+    text: 'Videos',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Watch our best programming videos for beginner, intermediate, and advanced learners about languages, frameworks, and more.'
+}];
+export const practiceToolsLinks = [{
+  linkItem: {
+    id: 'interview-simulator',
+    href: '/interview-simulator',
+    trackingTarget: 'topnav_resources_interview_simulator',
+    text: 'Interview Simulator',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: 'Discover your potential through interviewing. Identify your strengths, get actionable feedback, and boost your confidence with customized practice — at any stage in your tech career.'
+}, {
+  linkItem: {
+    id: 'job-readiness',
+    href: '/job-readiness',
+    trackingTarget: 'topnav_resources_job_readiness',
+    text: 'Job-Readiness Checker',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: "Add a LinkedIn or ZipRecruiter job posting to analyze how your skills fit the job. You'll need to add more information for jobs found on other websites."
+}, {
+  linkItem: {
+    id: 'code-challenges',
+    href: '/code-challenges',
+    trackingTarget: 'topnav_resources_code_challenges',
+    text: 'Code Challenges',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: "Test your knowledge with code challenges based on real-world technical interviews from companies like Google, Amazon, and Meta. Practice for your job search — or for fun. Don't worry if you get stuck. We'll recommend the right courses to help you."
+}, {
+  linkItem: {
+    id: 'workspaces',
+    href: '/pages/workspaces',
+    trackingTarget: 'topnav_resources_workspaces',
+    text: 'Workspaces',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Practice building projects in 13 popular languages and libraries, tinker with code, and share your work—all without leaving your browser.'
+}];
+export const inspirationLinks = [{
+  linkItem: {
+    id: 'learning-tips',
+    href: '/resources/blog/category/learning-tips',
+    trackingTarget: 'topnav_resources_learning_tips',
+    text: 'Learning Tips',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
+  description: 'Learning to code — or thinking about it? Here’s how to get started, plus tips and tricks for staying motivated.'
+}, {
+  linkItem: {
+    id: 'finding-a-job',
+    href: '/resources/blog/category/finding-a-job',
+    trackingTarget: 'topnav_resources_finding_a_job',
+    text: 'Finding a Job',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
+  description: 'Want to break into the tech industry? Learn how to write a standout resume, build a professional portfolio, prepare for technical interviews, and negotiate job offers.'
+}, {
+  linkItem: {
+    id: 'career-advice',
+    href: '/resources/blog/category/career',
+    trackingTarget: 'topnav_resources_career_advice',
+    text: 'Career Advice',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
+  description: 'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.'
+}, {
+  linkItem: {
+    id: 'get-inspired',
+    href: '/resources/blog/category/get-inspired',
+    trackingTarget: 'topnav_resources_get_inspired',
+    text: 'Get Inspired',
+    type: 'link'
+  },
+  icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
+  description: 'Learn how coding can change your life (and the world) for the better.'
+}];