@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["ArticleIcon","BriefcaseIcon","BulbIcon","CIcon","CommentsIcon","ComputerScienceIcon","CPlusIcon","FileIcon","GameDevelopmentIcon","GaugeDashboardIcon","GitIcon","GoIcon","HammerWrenchIcon","HtmlCssIcon","InfoCircleIcon","JavaIcon","JavascriptIcon","LearnIcon","MarkdownIcon","NotebookIcon","PeopleIcon","PhpIcon","ProgrammingBrowserIcon","ProjectsIcon","PythonIcon","ReactIcon","RulerTriangleIcon","SearchIcon","SqlIcon","SwiftIcon","TerminalIcon","TypescriptIcon","React","DocsPanel","InspirationPanel","LearningToolsPanel","PracticeToolsPanel","RESOURCES_NAV_SECTIONS","item","icon","text","id","type","trackingTarget","panel","docsLinks","href","learningToolsLinks","linkItem","description","practiceToolsLinks","inspirationLinks"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.tsx"],"sourcesContent":["import {\n  ArticleIcon,\n  BriefcaseIcon,\n  BulbIcon,\n  CIcon,\n  CommentsIcon,\n  ComputerScienceIcon,\n  CPlusIcon,\n  FileIcon,\n  GameDevelopmentIcon,\n  GaugeDashboardIcon,\n  GitIcon,\n  GoIcon,\n  HammerWrenchIcon,\n  HtmlCssIcon,\n  InfoCircleIcon,\n  JavaIcon,\n  JavascriptIcon,\n  LearnIcon,\n  MarkdownIcon,\n  NotebookIcon,\n  PeopleIcon,\n  PhpIcon,\n  ProgrammingBrowserIcon,\n  ProjectsIcon,\n  PythonIcon,\n  ReactIcon,\n  RulerTriangleIcon,\n  SearchIcon,\n  SqlIcon,\n  SwiftIcon,\n  TerminalIcon,\n  TypescriptIcon,\n} from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport {\n  AppHeaderLinkItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport {\n  DocsPanel,\n  InspirationPanel,\n  LearningToolsPanel,\n  PracticeToolsPanel,\n} from './NavPanels';\n\nexport type NavSectionConfig = {\n  item: AppHeaderResourcesDropdownItem;\n  panel: React.ComponentType<{ tabIndex?: number }>;\n};\n\nexport const RESOURCES_NAV_SECTIONS: NavSectionConfig[] = [\n  {\n    item: {\n      icon: FileIcon,\n      text: 'Docs',\n      id: 'docs',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_docs',\n    },\n    panel: DocsPanel,\n  },\n  {\n    item: {\n      icon: RulerTriangleIcon,\n      text: 'Learning tools',\n      id: 'learning-tools',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_learning_tools',\n    },\n    panel: LearningToolsPanel,\n  },\n  {\n    item: {\n      icon: HammerWrenchIcon,\n      text: 'Practice tools',\n      id: 'practice-tools',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_practice_tools',\n    },\n    panel: PracticeToolsPanel,\n  },\n  {\n    item: {\n      icon: BulbIcon,\n      text: 'Inspiration',\n      id: 'inspiration',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_inspiration',\n    },\n    panel: InspirationPanel,\n  },\n];\n\nexport const docsLinks: AppHeaderLinkItem[] = [\n  {\n    id: 'c',\n    href: '/resources/docs/c',\n    trackingTarget: 'topnav_resources_docs_c',\n    text: 'C',\n    type: 'link',\n    icon: CIcon,\n  },\n  {\n    id: 'html',\n    href: '/resources/docs/html',\n    trackingTarget: 'topnav_resources_docs_html',\n    text: 'HTML',\n    type: 'link',\n    icon: HtmlCssIcon,\n  },\n  {\n    id: 'python',\n    href: '/resources/docs/python',\n    trackingTarget: 'topnav_resources_docs_python',\n    text: 'Python',\n    type: 'link',\n    icon: PythonIcon,\n  },\n  {\n    id: 'cpp',\n    href: '/resources/docs/cpp',\n    trackingTarget: 'topnav_resources_docs_cpp',\n    text: 'C++',\n    type: 'link',\n    icon: CPlusIcon,\n  },\n  {\n    id: 'java',\n    href: '/resources/docs/java',\n    trackingTarget: 'topnav_resources_docs_java',\n    text: 'Java',\n    type: 'link',\n    icon: JavaIcon,\n  },\n  {\n    id: 'react',\n    href: '/resources/docs/react',\n    trackingTarget: 'topnav_resources_docs_react',\n    text: 'React',\n    type: 'link',\n    icon: ReactIcon,\n  },\n  {\n    id: 'css',\n    href: '/resources/docs/css',\n    trackingTarget: 'topnav_resources_docs_css',\n    text: 'CSS',\n    type: 'link',\n    icon: HtmlCssIcon,\n  },\n  {\n    id: 'javascript',\n    href: '/resources/docs/javascript',\n    trackingTarget: 'topnav_resources_docs_javascript',\n    text: 'JavaScript',\n    type: 'link',\n    icon: JavascriptIcon,\n  },\n  {\n    id: 'sql',\n    href: '/resources/docs/sql',\n    trackingTarget: 'topnav_resources_docs_sql',\n    text: 'SQL',\n    type: 'link',\n    icon: SqlIcon,\n  },\n  {\n    id: 'git',\n    href: '/resources/docs/git',\n    trackingTarget: 'topnav_resources_docs_git',\n    text: 'Git',\n    type: 'link',\n    icon: GitIcon,\n  },\n  {\n    id: 'php',\n    href: '/resources/docs/php',\n    trackingTarget: 'topnav_resources_docs_php',\n    text: 'PHP',\n    type: 'link',\n    icon: PhpIcon,\n  },\n  {\n    id: 'markdown',\n    href: '/resources/docs/markdown',\n    trackingTarget: 'topnav_resources_docs_markdown',\n    text: 'Markdown',\n    type: 'link',\n    icon: MarkdownIcon,\n  },\n  {\n    id: 'typescript',\n    href: '/resources/docs/typescript',\n    trackingTarget: 'topnav_resources_docs_typescript',\n    text: 'TypeScript',\n    type: 'link',\n    icon: TypescriptIcon,\n  },\n  {\n    id: 'lua',\n    href: '/resources/docs/lua',\n    trackingTarget: 'topnav_resources_docs_lua',\n    text: 'Lua',\n    type: 'link',\n    icon: GameDevelopmentIcon,\n  },\n  {\n    id: 'go',\n    href: '/resources/docs/go',\n    trackingTarget: 'topnav_resources_docs_go',\n    text: 'Go',\n    type: 'link',\n    icon: GoIcon,\n  },\n  {\n    id: 'command-line',\n    href: '/resources/docs/command-line',\n    trackingTarget: 'topnav_resources_docs_command_line',\n    text: 'Command line',\n    type: 'link',\n    icon: TerminalIcon,\n  },\n  {\n    id: 'powershell',\n    href: '/resources/docs/powershell',\n    trackingTarget: 'topnav_resources_docs_powershell',\n    text: 'Powershell',\n    type: 'link',\n    icon: ComputerScienceIcon,\n  },\n  {\n    id: 'swift',\n    href: '/resources/docs/swift',\n    trackingTarget: 'topnav_resources_docs_swift',\n    text: 'Swift',\n    type: 'link',\n    icon: SwiftIcon,\n  },\n];\n\nexport type AppHeaderCardItem = {\n  linkItem: AppHeaderLinkItem;\n  icon: React.ReactNode;\n  description: string;\n};\n\nexport const learningToolsLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'ai-builder',\n      href: '/ai-builder',\n      trackingTarget: 'topnav_resources_learning_ai_builder',\n      text: 'AI Builder',\n      type: 'link',\n    },\n    icon: <HtmlCssIcon />,\n    description:\n      'Learn to build real projects using AI with guided workflows—at any skill level.',\n  },\n  {\n    linkItem: {\n      id: 'articles',\n      href: '/articles',\n      trackingTarget: 'topnav_resources_learning_articles',\n      text: 'Articles',\n      type: 'link',\n    },\n    icon: <ArticleIcon />,\n    description:\n      'Dive deeper into coding concepts and developer workflows to level up your skills.',\n  },\n  {\n    linkItem: {\n      id: 'cheatsheets',\n      href: '/resources/cheatsheets/all',\n      trackingTarget: 'topnav_resources_learning_cheatsheets',\n      text: 'Cheatsheets',\n      type: 'link',\n    },\n    icon: <NotebookIcon />,\n    description:\n      'Quick guides that summarize key concepts across languages, tools, and technologies.',\n  },\n  {\n    linkItem: {\n      id: 'projects',\n      href: '/projects',\n      trackingTarget: 'topnav_resources_learning_projects',\n      text: 'Projects',\n      type: 'link',\n    },\n    icon: <ProjectsIcon />,\n    description:\n      'Apply your skills, connect concepts, and build something of your own.',\n  },\n];\n\nexport const practiceToolsLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'code-challenges',\n      href: '/code-challenges',\n      trackingTarget: 'topnav_resources_learning_code_challenges',\n      text: 'Code challenges',\n      type: 'link',\n    },\n    icon: <ProgrammingBrowserIcon />,\n    description:\n      'Sharpen your skills with real interview challenges from top tech companies, with guidance if you get stuck.',\n  },\n  {\n    linkItem: {\n      id: 'workspaces',\n      href: '/pages/workspaces',\n      trackingTarget: 'topnav_resources_learning_workspaces',\n      text: 'Workspaces',\n      type: 'link',\n    },\n    icon: <LearnIcon />,\n    description:\n      'Build and share projects in 13 popular languages, all right in your browser.',\n  },\n  {\n    linkItem: {\n      id: 'job-readiness',\n      href: '/job-readiness',\n      trackingTarget: 'topnav_resources_learning_job_readiness',\n      text: 'Job-readiness checker',\n      type: 'link',\n    },\n    icon: <PeopleIcon />,\n    description:\n      'See how your skills match a job posting and get tips on what to improve.',\n  },\n\n  {\n    linkItem: {\n      id: 'interview-simulator',\n      href: '/interview-simulator',\n      trackingTarget: 'topnav_resources_learning_interview_simulator',\n      text: 'Interview Simulator',\n      type: 'link',\n    },\n    icon: <GaugeDashboardIcon />,\n    description:\n      'Practice interviews, get feedback, and build confidence at any stage of your tech career.',\n  },\n];\n\nexport const inspirationLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'learner-stories',\n      href: '/resources/blog/category/get-inspired',\n      trackingTarget: 'topnav_resources_inspiration_learner_stories',\n      text: 'Learner stories',\n      type: 'link',\n    },\n    icon: <CommentsIcon />,\n    description:\n      'Learn how coding can change your life (and the world) for the better.',\n  },\n  {\n    linkItem: {\n      id: 'learning-tips',\n      href: '/resources/blog/category/learning-tips',\n      trackingTarget: 'topnav_resources_inspiration_learning_tips',\n      text: 'Learning tips',\n      type: 'link',\n    },\n    icon: <InfoCircleIcon />,\n    description:\n      \"Learning to code — or thinking about it? Here's how to get started, plus tips and tricks for staying motivated.\",\n  },\n  {\n    linkItem: {\n      id: 'career-advice',\n      href: '/resources/blog/category/career',\n      trackingTarget: 'topnav_resources_inspiration_career_advice',\n      text: 'Career advice',\n      type: 'link',\n    },\n    icon: <BriefcaseIcon />,\n    description:\n      'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.',\n  },\n  {\n    linkItem: {\n      id: 'finding-a-job',\n      href: '/resources/blog/category/finding-a-job',\n      trackingTarget: 'topnav_resources_inspiration_finding_a_job',\n      text: 'Finding a job',\n      type: 'link',\n    },\n    icon: <SearchIcon />,\n    description:\n      'Master the skills to land a tech job, from resumes and portfolios to interviews and offers.',\n  },\n];\n"],"mappings":";;;;;AAoDA,MAAaqC,yBAA6C;CACxD;EACEC,MAAM;GACJC,MAAMhC;GACNiC,MAAM;GACNC,IAAI;GACJC,MAAM;GACNC,gBAAgB;GAClB;EACAC,OAAOX;EACT;CACA;EACEK,MAAM;GACJC,MAAMb;GACNc,MAAM;GACNC,IAAI;GACJC,MAAM;GACNC,gBAAgB;GAClB;EACAC,OAAOT;EACT;CACA;EACEG,MAAM;GACJC,MAAM3B;GACN4B,MAAM;GACNC,IAAI;GACJC,MAAM;GACNC,gBAAgB;GAClB;EACAC,OAAOR;EACT;CACA;EACEE,MAAM;GACJC,MAAMrC;GACNsC,MAAM;GACNC,IAAI;GACJC,MAAM;GACNC,gBAAgB;GAClB;EACAC,OAAOV;EACT;CACD;AAED,MAAaW,YAAiC;CAC5C;EACEJ,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMpC;EACR;CACA;EACEsC,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAM1B;EACR;CACA;EACE4B,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMf;EACR;CACA;EACEiB,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMjC;EACR;CACA;EACEmC,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMxB;EACR;CACA;EACE0B,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMd;EACR;CACA;EACEgB,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAM1B;EACR;CACA;EACE4B,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMvB;EACR;CACA;EACEyB,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMX;EACR;CACA;EACEa,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAM7B;EACR;CACA;EACE+B,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMlB;EACR;CACA;EACEoB,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMrB;EACR;CACA;EACEuB,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMR;EACR;CACA;EACEU,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAM/B;EACR;CACA;EACEiC,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAM5B;EACR;CACA;EACE8B,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMT;EACR;CACA;EACEW,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMlC;EACR;CACA;EACEoC,IAAI;EACJK,MAAM;EACNH,gBAAgB;EAChBH,MAAM;EACNE,MAAM;EACNH,MAAMV;EACR;CACD;AAQD,MAAakB,qBAA0C;CACrD;EACEC,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAAC1B,aAAAA,KAAAA;EACPoC,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACvC,aAAAA,KAAAA;EACPiD,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACpB,cAAAA,KAAAA;EACP8B,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAAChB,cAAAA,KAAAA;EACP0B,aACE;EACJ;CACD;AAED,MAAaC,qBAA0C;CACrD;EACEF,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACjB,wBAAAA,KAAAA;EACP2B,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACtB,WAAAA,KAAAA;EACPgC,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACnB,YAAAA,KAAAA;EACP6B,aACE;EACJ;CAEA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAAC9B,oBAAAA,KAAAA;EACPwC,aACE;EACJ;CACD;AAED,MAAaE,mBAAwC;CACnD;EACEH,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACnC,cAAAA,KAAAA;EACP6C,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACzB,gBAAAA,KAAAA;EACPmC,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACtC,eAAAA,KAAAA;EACPgD,aACE;EACJ;CACA;EACED,UAAU;GACRP,IAAI;GACJK,MAAM;GACNH,gBAAgB;GAChBH,MAAM;GACNE,MAAM;GACR;EACAH,MAAM,sBAAA,cAACZ,YAAAA,KAAAA;EACPsB,aACE;EACJ;CACD"}

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

@@ -0,0 +1,98 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_elements = require('../../shared/elements.cjs');
+require('../../shared/index.cjs');
+const require_index$1 = require('../AppHeaderProvider/index.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_MarketingBanner = require('../AppHeaderCatalogDropdown/MarketingBanner.cjs');
+const require_index$2 = require('../AppHeaderDropdownProvider/index.cjs');
+const require_index$3 = require('../AppHeaderNavButton/index.cjs');
+const require_index$4 = require('../AppHeaderSection/index.cjs');
+const require_consts = require('./consts.cjs');
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = /* @__PURE__ */ (0, _emotion_styled.default)(require_elements.AnimatedMegaMenuDropdown, {
+	shouldForwardProp: (prop) => prop !== "narrowResourceDropdownPosition" && prop !== "wideResourceDropdownPosition",
+	target: "e170yzes0",
+	label: "brand-StyledAnimatedMegaMenuDropdown"
+})("top:3.5rem;left:", ({ narrowResourceDropdownPosition }) => {
+	return narrowResourceDropdownPosition;
+}, ";@media (min-width:1261px){left:", ({ wideResourceDropdownPosition }) => {
+	return wideResourceDropdownPosition;
+}, ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vTWFya2V0aW5nQmFubmVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyTmF2QnV0dG9uJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJQcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbn07XG5cbmNvbnN0IFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biA9IHN0eWxlZChBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sIHtcbiAgLy8gcHJldmVudCB0aGUgcHJvcHMgZnJvbSBiZWluZyBwYXNzZWQgdG8gdGhlIERPTSBlbGVtZW50LCB3aGljaCB3b3VsZCBjYXVzZSBhIFJlYWN0IHdhcm5pbmcuXG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBwcm9wICE9PSAnbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyAmJlxuICAgIHByb3AgIT09ICd3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG4gIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb246IHN0cmluZztcbn0+YFxuICB0b3A6IDMuNXJlbTtcbiAgbGVmdDogJHsoeyBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gIH19O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgICAgcmV0dXJuIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IHJlc291cmNlRHJvcGRvd24gfSA9IERyb3Bkb3duUG9zaXRpb25zW2hlYWRlclR5cGVdO1xuICBjb25zdCBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbiA9IHJlc291cmNlRHJvcGRvd24ud2lkZTtcblxuICBjb25zdCBhbmltYXRpb25GaW5pc2hlZCA9ICgpID0+IHtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17bmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uPXt3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17UkVTT1VSQ0VTX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgICAgaGFuZGxlQ2xvc2U9eygpID0+IHNldElzT3BlbihmYWxzZSl9XG4gICAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L0NvbG9yTW9kZT5cbiAgICAgIDwvU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duPlxuICAgIDwvQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJ1QyJ9 */");
+const AppHeaderResourcesDropdown = ({ action, item }) => {
+	const { text } = item;
+	const containerRef = (0, react.useRef)(null);
+	const buttonRef = (0, react.useRef)(null);
+	const dropdownRef = (0, react.useRef)(null);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = require_index$1.useAppHeaderContext();
+	const { headerType } = require_context.useHeaderDisplayContext();
+	const { resourceDropdown } = require_context.DropdownPositions[headerType];
+	const narrowResourceDropdownPosition = resourceDropdown.narrow;
+	const wideResourceDropdownPosition = resourceDropdown.wide;
+	const animationFinished = () => {
+		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
+	};
+	const toggleIsOpen = () => setIsOpen((prev) => !prev);
+	const handleOnClick = (event) => {
+		toggleIsOpen();
+		if (!isOpen) {
+			action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
+		}
+	};
+	const handleClose = (0, react.useCallback)(() => {
+		setIsOpen(false);
+		buttonRef?.current?.focus();
+	}, []);
+	(0, react.useEffect)(() => {
+		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	(0, react.useEffect)(() => {
+		function handleClickOutside(event) {
+			const container = containerRef?.current;
+			const button = buttonRef?.current;
+			if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) handleClose();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("blur", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("blur", handleClickOutside);
+		};
+	}, [
+		containerRef,
+		handleClose,
+		isOpen
+	]);
+	return /* @__PURE__ */ react.createElement(require_index$2.AppHeaderDropdownProvider, { handleClose }, /* @__PURE__ */ react.createElement(require_index$3.AppHeaderDropdownNavButton, {
+		buttonRef,
+		handleOnClick,
+		isOpen,
+		text
+	}), /* @__PURE__ */ react.createElement(StyledAnimatedMegaMenuDropdown, {
+		isOpen,
+		narrowResourceDropdownPosition,
+		wideResourceDropdownPosition,
+		tabIndex: -1,
+		ref: dropdownRef,
+		"data-testid": "resources-menu-dropdown",
+		onAnimationComplete: animationFinished
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut_styles.ColorMode, { mode: "light" }, /* @__PURE__ */ react.createElement(require_index$4.AppHeaderSection, {
+		isOpen,
+		ref: containerRef,
+		navSections: require_consts.RESOURCES_NAV_SECTIONS,
+		MarketingBanner: require_MarketingBanner.MarketingBanner,
+		handleClose: () => setIsOpen(false),
+		type: "resources-dropdown"
+	}))));
+};
+
+//#endregion
+exports.AppHeaderResourcesDropdown = AppHeaderResourcesDropdown;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["ColorMode","styled","useCallback","useEffect","useRef","useState","React","DropdownPositions","useHeaderDisplayContext","AnimatedMegaMenuDropdown","MarketingBanner","AppHeaderDropdownProvider","AppHeaderDropdownNavButton","useAppHeaderContext","AppHeaderSection","RESOURCES_NAV_SECTIONS","StyledAnimatedMegaMenuDropdown","shouldForwardProp","prop","narrowResourceDropdownPosition","wideResourceDropdownPosition","AppHeaderResourcesDropdown","action","item","text","containerRef","buttonRef","dropdownRef","isOpen","setIsOpen","lastOpenedDropdown","setLastOpenedDropdown","headerType","resourceDropdown","narrow","wide","animationFinished","current","scrollTop","toggleIsOpen","prev","handleOnClick","event","handleClose","focus","handleClickOutside","container","button","contains","target","document","addEventListener","removeEventListener","tabIndex","ref","data-testid","onAnimationComplete","mode","navSections","type"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  DropdownPositions,\n  useHeaderDisplayContext,\n} from '../../../GlobalHeader/context';\nimport {\n  AnimatedMegaMenuDropdown,\n  AppHeaderAction,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { RESOURCES_NAV_SECTIONS } from './consts';\n\nexport type AppHeaderResourceDropdownProps = AppHeaderAction & {\n  item: AppHeaderResourcesDropdownItem;\n};\n\nconst StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, {\n  // prevent the props from being passed to the DOM element, which would cause a React warning.\n  shouldForwardProp: (prop) =>\n    prop !== 'narrowResourceDropdownPosition' &&\n    prop !== 'wideResourceDropdownPosition',\n})<{\n  narrowResourceDropdownPosition: string;\n  wideResourceDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowResourceDropdownPosition }) => {\n    return narrowResourceDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideResourceDropdownPosition }) => {\n      return wideResourceDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderResourcesDropdown: React.FC<\n  AppHeaderResourceDropdownProps\n> = ({ action, item }) => {\n  const { text } = item;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { headerType } = useHeaderDisplayContext();\n  const { resourceDropdown } = DropdownPositions[headerType];\n  const narrowResourceDropdownPosition = resourceDropdown.narrow;\n  const wideResourceDropdownPosition = resourceDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const toggleIsOpen = () => setIsOpen((prev) => !prev);\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    toggleIsOpen();\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef?.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== text && isOpen) {\n      setIsOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent | Event) {\n      const container = containerRef?.current;\n      const button = buttonRef?.current;\n      if (\n        isOpen &&\n        container &&\n        !container.contains(event.target as Node) &&\n        button &&\n        !button.contains(event.target as Node)\n      ) {\n        handleClose();\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('blur', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('blur', handleClickOutside);\n    };\n  }, [containerRef, handleClose, isOpen]);\n\n  return (\n    <AppHeaderDropdownProvider handleClose={handleClose}>\n      <AppHeaderDropdownNavButton\n        buttonRef={buttonRef}\n        handleOnClick={handleOnClick}\n        isOpen={isOpen}\n        text={text}\n      />\n      <StyledAnimatedMegaMenuDropdown\n        isOpen={isOpen}\n        narrowResourceDropdownPosition={narrowResourceDropdownPosition}\n        wideResourceDropdownPosition={wideResourceDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        ref={dropdownRef}\n        data-testid=\"resources-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={RESOURCES_NAV_SECTIONS}\n            MarketingBanner={MarketingBanner}\n            handleClose={() => setIsOpen(false)}\n            type=\"resources-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAMgB,iCAAiCf,6CAAOQ,2CAA0B;CAEtEQ,oBAAoBC,SAClBA,SAAS,oCACTA,SAAS;;;CACb,CAAA,CAAA,qBAKW,EAAEC,qCAAgC;AACzC,QAAOA;GACT,qCAGW,EAAEC,mCAA8B;AACvC,QAAOA;GACT,MAAA,0wNAAA;AAIJ,MAAaC,8BAER,EAAEC,QAAQC,WAAM;CACnB,MAAM,EAAEC,SAASD;CACjB,MAAME,iCAA6C,KAAA;CACnD,MAAMC,8BAAsC,KAAA;CAC5C,MAAMC,gCAA4C,KAAA;CAClD,MAAM,CAACC,QAAQC,iCAAsB,MAAA;CACrC,MAAM,EAAEC,oBAAoBC,0BAA0BlB,qCAAAA;CACtD,MAAM,EAAEmB,eAAexB,yCAAAA;CACvB,MAAM,EAAEyB,qBAAqB1B,kCAAkByB;CAC/C,MAAMb,iCAAiCc,iBAAiBC;CACxD,MAAMd,+BAA+Ba,iBAAiBE;CAEtD,MAAMC,0BAAoB;AACxB,MAAIR,UAAUD,YAAYU,QACxBV,aAAYU,QAAQC,YAAY;;CAIpC,MAAMC,qBAAqBV,WAAWW,SAAS,CAACA,KAAAA;CAEhD,MAAMC,iBAAiBC,UAAAA;AACrBH,gBAAAA;AACA,MAAI,CAACX,QAAQ;AACXN,UAAOoB,OAAOnB,KAAAA;AACd,OAAIQ,sBACFA,uBAAsBP,KAAAA;;;CAK5B,MAAMmB,2CAA0B;AAC9Bd,YAAU,MAAA;AACVH,aAAWW,SAASO,OAAAA;IACnB,EAAE,CAAA;AAELzC,4BAAU;AACR,MAAI2B,uBAAuBN,QAAQI,OACjCC,WAAU,MAAA;IAGX,CAACC,mBAAmB,CAAA;AAEvB3B,4BAAU;EACR,SAAS0C,mBAAmBH,OAAyB;GACnD,MAAMI,YAAYrB,cAAcY;GAChC,MAAMU,SAASrB,WAAWW;AAC1B,OACET,UACAkB,aACA,CAACA,UAAUE,SAASN,MAAMO,OAAM,IAChCF,UACA,CAACA,OAAOC,SAASN,MAAMO,OAAM,CAE7BN,cAAAA;;AAIJO,WAASC,iBAAiB,aAAaN,mBAAAA;AACvCK,WAASC,iBAAiB,QAAQN,mBAAAA;AAClC,eAAO;AACLK,YAASE,oBAAoB,aAAaP,mBAAAA;AAC1CK,YAASE,oBAAoB,QAAQP,mBAAAA;;IAEtC;EAACpB;EAAckB;EAAaf;EAAO,CAAA;AAEtC,QACE,sBAAA,cAACjB,2CAAAA,EAAuCgC,eACtC,sBAAA,cAAC/B,4CAAAA;EACYc;EACIe;EACPb;EACFJ;KAER,sBAAA,cAACR,gCAAAA;EACSY;EACwBT;EACFC;EAC9BiC,UAAU;EACVC,KAAK3B;EACL4B,eAAY;EACZC,qBAAqBpB;IAErB,sBAAA,cAACpC,oCAAAA,EAAUyD,MAAK,WACd,sBAAA,cAAC3C,kCAAAA;EACSc;EACR0B,KAAK7B;EACLiC,aAAa3C;EACbL,iBAAiBA;EACjBiC,mBAAmBd,UAAU,MAAA;EAC7B8B,MAAK"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"mappings":";;;KAqBY,8BAAA,GAAiC,eAAA;EAC3C,IAAA,EAAM,8BAAA;AAAA"}

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

@@ -1,6 +1,11 @@
-import * as React from 'react';
-import { AppHeaderAction, AppHeaderResourcesDropdownItem } from '../../shared';
-export type AppHeaderResourceDropdownProps = AppHeaderAction & {
-    item: AppHeaderResourcesDropdownItem;
+import { AppHeaderAction, AppHeaderResourcesDropdownItem } from "../../shared/types.js";
+import "../../shared/index.js";
+import "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.d.ts
+type AppHeaderResourceDropdownProps = AppHeaderAction & {
+  item: AppHeaderResourcesDropdownItem;
 };
-export declare const AppHeaderResourcesDropdown: React.FC<AppHeaderResourceDropdownProps>;
+//#endregion
+export { AppHeaderResourceDropdownProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"mappings":";;;;;KAqBY,8BAAA,GAAiC,eAAA;EAC3C,IAAA,EAAM,8BAAA;AAAA"}

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

@@ -1,120 +1,96 @@
-import _styled from "@emotion/styled/base";
-import { ColorMode } from '@codecademy/gamut-styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import { DropdownPositions, useHeaderDisplayContext } from '../../../GlobalHeader/context';
-import { AnimatedMegaMenuDropdown } from '../../shared';
-import { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';
-import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
-import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';
-import { useAppHeaderContext } from '../AppHeaderProvider';
-import { AppHeaderSection } from '../AppHeaderSection';
-import { RESOURCES_NAV_SECTIONS } from './consts';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
-  // prevent the props from being passed to the DOM element, which would cause a React warning.
-  shouldForwardProp: prop => prop !== 'narrowResourceDropdownPosition' && prop !== 'wideResourceDropdownPosition',
-  target: "ekdg1bw0",
-  label: "StyledAnimatedMegaMenuDropdown"
-})("top:3.5rem;left:", ({
-  narrowResourceDropdownPosition
-}) => {
-  return narrowResourceDropdownPosition;
-}, ";@media (min-width: 1261px){left:", ({
-  wideResourceDropdownPosition
-}) => {
-  return wideResourceDropdownPosition;
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vTWFya2V0aW5nQmFubmVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyTmF2QnV0dG9uJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJQcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbn07XG5cbmNvbnN0IFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biA9IHN0eWxlZChBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sIHtcbiAgLy8gcHJldmVudCB0aGUgcHJvcHMgZnJvbSBiZWluZyBwYXNzZWQgdG8gdGhlIERPTSBlbGVtZW50LCB3aGljaCB3b3VsZCBjYXVzZSBhIFJlYWN0IHdhcm5pbmcuXG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBwcm9wICE9PSAnbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyAmJlxuICAgIHByb3AgIT09ICd3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG4gIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb246IHN0cmluZztcbn0+YFxuICB0b3A6IDMuNXJlbTtcbiAgbGVmdDogJHsoeyBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gIH19O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgICAgcmV0dXJuIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IHJlc291cmNlRHJvcGRvd24gfSA9IERyb3Bkb3duUG9zaXRpb25zW2hlYWRlclR5cGVdO1xuICBjb25zdCBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbiA9IHJlc291cmNlRHJvcGRvd24ud2lkZTtcblxuICBjb25zdCBhbmltYXRpb25GaW5pc2hlZCA9ICgpID0+IHtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17bmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uPXt3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17UkVTT1VSQ0VTX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgICAgaGFuZGxlQ2xvc2U9eygpID0+IHNldElzT3BlbihmYWxzZSl9XG4gICAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L0NvbG9yTW9kZT5cbiAgICAgIDwvU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duPlxuICAgIDwvQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */"));
-export const AppHeaderResourcesDropdown = ({
-  action,
-  item
-}) => {
-  const {
-    text
-  } = item;
-  const containerRef = useRef(null);
-  const buttonRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    lastOpenedDropdown,
-    setLastOpenedDropdown
-  } = useAppHeaderContext();
-  const {
-    headerType
-  } = useHeaderDisplayContext();
-  const {
-    resourceDropdown
-  } = DropdownPositions[headerType];
-  const narrowResourceDropdownPosition = resourceDropdown.narrow;
-  const wideResourceDropdownPosition = resourceDropdown.wide;
-  const animationFinished = () => {
-    if (isOpen && dropdownRef.current) {
-      dropdownRef.current.scrollTop = 0;
-    }
-  };
-  const toggleIsOpen = () => setIsOpen(prev => !prev);
-  const handleOnClick = event => {
-    toggleIsOpen();
-    if (!isOpen) {
-      action(event, item);
-      if (setLastOpenedDropdown) {
-        setLastOpenedDropdown(text);
-      }
-    }
-  };
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-    buttonRef?.current?.focus();
-  }, []);
-  useEffect(() => {
-    if (lastOpenedDropdown !== text && isOpen) {
-      setIsOpen(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastOpenedDropdown]);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      const container = containerRef?.current;
-      const button = buttonRef?.current;
-      if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) {
-        handleClose();
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('blur', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('blur', handleClickOutside);
-    };
-  }, [containerRef, handleClose, isOpen]);
-  return /*#__PURE__*/_jsxs(AppHeaderDropdownProvider, {
-    handleClose: handleClose,
-    children: [/*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
-      buttonRef: buttonRef,
-      handleOnClick: handleOnClick,
-      isOpen: isOpen,
-      text: text
-    }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
-      isOpen: isOpen,
-      narrowResourceDropdownPosition: narrowResourceDropdownPosition,
-      wideResourceDropdownPosition: wideResourceDropdownPosition,
-      tabIndex: -1 // prevent from interfering with AppHeader focus logic
-      ,
-      ref: dropdownRef,
-      "data-testid": "resources-menu-dropdown",
-      onAnimationComplete: animationFinished,
-      children: /*#__PURE__*/_jsx(ColorMode, {
-        mode: "light",
-        children: /*#__PURE__*/_jsx(AppHeaderSection, {
-          isOpen: isOpen,
-          ref: containerRef,
-          navSections: RESOURCES_NAV_SECTIONS,
-          MarketingBanner: MarketingBanner,
-          handleClose: () => setIsOpen(false),
-          type: "resources-dropdown"
-        })
-      })
-    })]
-  });
-};
+import { AnimatedMegaMenuDropdown } from "../../shared/elements.js";
+import "../../shared/index.js";
+import { useAppHeaderContext } from "../AppHeaderProvider/index.js";
+import { DropdownPositions, useHeaderDisplayContext } from "../../../GlobalHeader/context.js";
+import { MarketingBanner } from "../AppHeaderCatalogDropdown/MarketingBanner.js";
+import { AppHeaderDropdownProvider } from "../AppHeaderDropdownProvider/index.js";
+import { AppHeaderDropdownNavButton } from "../AppHeaderNavButton/index.js";
+import { AppHeaderSection } from "../AppHeaderSection/index.js";
+import { RESOURCES_NAV_SECTIONS } from "./consts.js";
+import { ColorMode } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = /* @__PURE__ */ styled(AnimatedMegaMenuDropdown, {
+	shouldForwardProp: (prop) => prop !== "narrowResourceDropdownPosition" && prop !== "wideResourceDropdownPosition",
+	target: "e170yzes0",
+	label: "brand-StyledAnimatedMegaMenuDropdown"
+})("top:3.5rem;left:", ({ narrowResourceDropdownPosition }) => {
+	return narrowResourceDropdownPosition;
+}, ";@media (min-width:1261px){left:", ({ wideResourceDropdownPosition }) => {
+	return wideResourceDropdownPosition;
+}, ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yTW9kZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBEcm9wZG93blBvc2l0aW9ucyxcbiAgdXNlSGVhZGVyRGlzcGxheUNvbnRleHQsXG59IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7XG4gIEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vTWFya2V0aW5nQmFubmVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duUHJvdmlkZXIgfSBmcm9tICcuLi9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlckRyb3Bkb3duTmF2QnV0dG9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyTmF2QnV0dG9uJztcbmltcG9ydCB7IHVzZUFwcEhlYWRlckNvbnRleHQgfSBmcm9tICcuLi9BcHBIZWFkZXJQcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJTZWN0aW9uIH0gZnJvbSAnLi4vQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQgeyBSRVNPVVJDRVNfTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJiB7XG4gIGl0ZW06IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbn07XG5cbmNvbnN0IFN0eWxlZEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biA9IHN0eWxlZChBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24sIHtcbiAgLy8gcHJldmVudCB0aGUgcHJvcHMgZnJvbSBiZWluZyBwYXNzZWQgdG8gdGhlIERPTSBlbGVtZW50LCB3aGljaCB3b3VsZCBjYXVzZSBhIFJlYWN0IHdhcm5pbmcuXG4gIHNob3VsZEZvcndhcmRQcm9wOiAocHJvcCkgPT5cbiAgICBwcm9wICE9PSAnbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyAmJlxuICAgIHByb3AgIT09ICd3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG4gIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb246IHN0cmluZztcbn0+YFxuICB0b3A6IDMuNXJlbTtcbiAgbGVmdDogJHsoeyBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gIH19O1xuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjYxcHgpIHtcbiAgICBsZWZ0OiAkeyh7IHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgICAgcmV0dXJuIHdpZGVSZXNvdXJjZURyb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bjogUmVhY3QuRkM8XG4gIEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IHJlc291cmNlRHJvcGRvd24gfSA9IERyb3Bkb3duUG9zaXRpb25zW2hlYWRlclR5cGVdO1xuICBjb25zdCBuYXJyb3dSZXNvdXJjZURyb3Bkb3duUG9zaXRpb24gPSByZXNvdXJjZURyb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZVJlc291cmNlRHJvcGRvd25Qb3NpdGlvbiA9IHJlc291cmNlRHJvcGRvd24ud2lkZTtcblxuICBjb25zdCBhbmltYXRpb25GaW5pc2hlZCA9ICgpID0+IHtcbiAgICBpZiAoaXNPcGVuICYmIGRyb3Bkb3duUmVmLmN1cnJlbnQpIHtcbiAgICAgIGRyb3Bkb3duUmVmLmN1cnJlbnQuc2Nyb2xsVG9wID0gMDtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdG9nZ2xlSXNPcGVuID0gKCkgPT4gc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgIHRvZ2dsZUlzT3BlbigpO1xuICAgIGlmICghaXNPcGVuKSB7XG4gICAgICBhY3Rpb24oZXZlbnQsIGl0ZW0pO1xuICAgICAgaWYgKHNldExhc3RPcGVuZWREcm9wZG93bikge1xuICAgICAgICBzZXRMYXN0T3BlbmVkRHJvcGRvd24odGV4dCk7XG4gICAgICB9XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmPy5jdXJyZW50Py5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd1Jlc291cmNlRHJvcGRvd25Qb3NpdGlvbj17bmFycm93UmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9uPXt3aWRlUmVzb3VyY2VEcm9wZG93blBvc2l0aW9ufVxuICAgICAgICB0YWJJbmRleD17LTF9IC8vIHByZXZlbnQgZnJvbSBpbnRlcmZlcmluZyB3aXRoIEFwcEhlYWRlciBmb2N1cyBsb2dpY1xuICAgICAgICByZWY9e2Ryb3Bkb3duUmVmfVxuICAgICAgICBkYXRhLXRlc3RpZD1cInJlc291cmNlcy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17UkVTT1VSQ0VTX05BVl9TRUNUSU9OU31cbiAgICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgICAgaGFuZGxlQ2xvc2U9eygpID0+IHNldElzT3BlbihmYWxzZSl9XG4gICAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgICAvPlxuICAgICAgICA8L0NvbG9yTW9kZT5cbiAgICAgIDwvU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duPlxuICAgIDwvQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJ1QyJ9 */");
+const AppHeaderResourcesDropdown = ({ action, item }) => {
+	const { text } = item;
+	const containerRef = useRef(null);
+	const buttonRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
+	const { headerType } = useHeaderDisplayContext();
+	const { resourceDropdown } = DropdownPositions[headerType];
+	const narrowResourceDropdownPosition = resourceDropdown.narrow;
+	const wideResourceDropdownPosition = resourceDropdown.wide;
+	const animationFinished = () => {
+		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
+	};
+	const toggleIsOpen = () => setIsOpen((prev) => !prev);
+	const handleOnClick = (event) => {
+		toggleIsOpen();
+		if (!isOpen) {
+			action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
+		}
+	};
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+		buttonRef?.current?.focus();
+	}, []);
+	useEffect(() => {
+		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	useEffect(() => {
+		function handleClickOutside(event) {
+			const container = containerRef?.current;
+			const button = buttonRef?.current;
+			if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) handleClose();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("blur", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("blur", handleClickOutside);
+		};
+	}, [
+		containerRef,
+		handleClose,
+		isOpen
+	]);
+	return /* @__PURE__ */ React$1.createElement(AppHeaderDropdownProvider, { handleClose }, /* @__PURE__ */ React$1.createElement(AppHeaderDropdownNavButton, {
+		buttonRef,
+		handleOnClick,
+		isOpen,
+		text
+	}), /* @__PURE__ */ React$1.createElement(StyledAnimatedMegaMenuDropdown, {
+		isOpen,
+		narrowResourceDropdownPosition,
+		wideResourceDropdownPosition,
+		tabIndex: -1,
+		ref: dropdownRef,
+		"data-testid": "resources-menu-dropdown",
+		onAnimationComplete: animationFinished
+	}, /* @__PURE__ */ React$1.createElement(ColorMode, { mode: "light" }, /* @__PURE__ */ React$1.createElement(AppHeaderSection, {
+		isOpen,
+		ref: containerRef,
+		navSections: RESOURCES_NAV_SECTIONS,
+		MarketingBanner,
+		handleClose: () => setIsOpen(false),
+		type: "resources-dropdown"
+	}))));
+};
+
+//#endregion
+export { AppHeaderResourcesDropdown };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ColorMode","styled","useCallback","useEffect","useRef","useState","React","DropdownPositions","useHeaderDisplayContext","AnimatedMegaMenuDropdown","MarketingBanner","AppHeaderDropdownProvider","AppHeaderDropdownNavButton","useAppHeaderContext","AppHeaderSection","RESOURCES_NAV_SECTIONS","StyledAnimatedMegaMenuDropdown","shouldForwardProp","prop","narrowResourceDropdownPosition","wideResourceDropdownPosition","AppHeaderResourcesDropdown","action","item","text","containerRef","buttonRef","dropdownRef","isOpen","setIsOpen","lastOpenedDropdown","setLastOpenedDropdown","headerType","resourceDropdown","narrow","wide","animationFinished","current","scrollTop","toggleIsOpen","prev","handleOnClick","event","handleClose","focus","handleClickOutside","container","button","contains","target","document","addEventListener","removeEventListener","tabIndex","ref","data-testid","onAnimationComplete","mode","navSections","type"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  DropdownPositions,\n  useHeaderDisplayContext,\n} from '../../../GlobalHeader/context';\nimport {\n  AnimatedMegaMenuDropdown,\n  AppHeaderAction,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { RESOURCES_NAV_SECTIONS } from './consts';\n\nexport type AppHeaderResourceDropdownProps = AppHeaderAction & {\n  item: AppHeaderResourcesDropdownItem;\n};\n\nconst StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, {\n  // prevent the props from being passed to the DOM element, which would cause a React warning.\n  shouldForwardProp: (prop) =>\n    prop !== 'narrowResourceDropdownPosition' &&\n    prop !== 'wideResourceDropdownPosition',\n})<{\n  narrowResourceDropdownPosition: string;\n  wideResourceDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowResourceDropdownPosition }) => {\n    return narrowResourceDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideResourceDropdownPosition }) => {\n      return wideResourceDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderResourcesDropdown: React.FC<\n  AppHeaderResourceDropdownProps\n> = ({ action, item }) => {\n  const { text } = item;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { headerType } = useHeaderDisplayContext();\n  const { resourceDropdown } = DropdownPositions[headerType];\n  const narrowResourceDropdownPosition = resourceDropdown.narrow;\n  const wideResourceDropdownPosition = resourceDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const toggleIsOpen = () => setIsOpen((prev) => !prev);\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    toggleIsOpen();\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef?.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== text && isOpen) {\n      setIsOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent | Event) {\n      const container = containerRef?.current;\n      const button = buttonRef?.current;\n      if (\n        isOpen &&\n        container &&\n        !container.contains(event.target as Node) &&\n        button &&\n        !button.contains(event.target as Node)\n      ) {\n        handleClose();\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('blur', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('blur', handleClickOutside);\n    };\n  }, [containerRef, handleClose, isOpen]);\n\n  return (\n    <AppHeaderDropdownProvider handleClose={handleClose}>\n      <AppHeaderDropdownNavButton\n        buttonRef={buttonRef}\n        handleOnClick={handleOnClick}\n        isOpen={isOpen}\n        text={text}\n      />\n      <StyledAnimatedMegaMenuDropdown\n        isOpen={isOpen}\n        narrowResourceDropdownPosition={narrowResourceDropdownPosition}\n        wideResourceDropdownPosition={wideResourceDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        ref={dropdownRef}\n        data-testid=\"resources-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={RESOURCES_NAV_SECTIONS}\n            MarketingBanner={MarketingBanner}\n            handleClose={() => setIsOpen(false)}\n            type=\"resources-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMgB,iCAAiCf,uBAAOQ,0BAA0B;CAEtEQ,oBAAoBC,SAClBA,SAAS,oCACTA,SAAS;;;CACb,CAAA,CAAA,qBAKW,EAAEC,qCAAgC;AACzC,QAAOA;GACT,qCAGW,EAAEC,mCAA8B;AACvC,QAAOA;GACT,MAAA,0wNAAA;AAIJ,MAAaC,8BAER,EAAEC,QAAQC,WAAM;CACnB,MAAM,EAAEC,SAASD;CACjB,MAAME,eAAerB,OAA8B,KAAA;CACnD,MAAMsB,YAAYtB,OAA0B,KAAA;CAC5C,MAAMuB,cAAcvB,OAA8B,KAAA;CAClD,MAAM,CAACwB,QAAQC,aAAaxB,SAAS,MAAA;CACrC,MAAM,EAAEyB,oBAAoBC,0BAA0BlB,qBAAAA;CACtD,MAAM,EAAEmB,eAAexB,yBAAAA;CACvB,MAAM,EAAEyB,qBAAqB1B,kBAAkByB;CAC/C,MAAMb,iCAAiCc,iBAAiBC;CACxD,MAAMd,+BAA+Ba,iBAAiBE;CAEtD,MAAMC,0BAAoB;AACxB,MAAIR,UAAUD,YAAYU,QACxBV,aAAYU,QAAQC,YAAY;;CAIpC,MAAMC,qBAAqBV,WAAWW,SAAS,CAACA,KAAAA;CAEhD,MAAMC,iBAAiBC,UAAAA;AACrBH,gBAAAA;AACA,MAAI,CAACX,QAAQ;AACXN,UAAOoB,OAAOnB,KAAAA;AACd,OAAIQ,sBACFA,uBAAsBP,KAAAA;;;CAK5B,MAAMmB,cAAczC,kBAAY;AAC9B2B,YAAU,MAAA;AACVH,aAAWW,SAASO,OAAAA;IACnB,EAAE,CAAA;AAELzC,iBAAU;AACR,MAAI2B,uBAAuBN,QAAQI,OACjCC,WAAU,MAAA;IAGX,CAACC,mBAAmB,CAAA;AAEvB3B,iBAAU;EACR,SAAS0C,mBAAmBH,OAAyB;GACnD,MAAMI,YAAYrB,cAAcY;GAChC,MAAMU,SAASrB,WAAWW;AAC1B,OACET,UACAkB,aACA,CAACA,UAAUE,SAASN,MAAMO,OAAM,IAChCF,UACA,CAACA,OAAOC,SAASN,MAAMO,OAAM,CAE7BN,cAAAA;;AAIJO,WAASC,iBAAiB,aAAaN,mBAAAA;AACvCK,WAASC,iBAAiB,QAAQN,mBAAAA;AAClC,eAAO;AACLK,YAASE,oBAAoB,aAAaP,mBAAAA;AAC1CK,YAASE,oBAAoB,QAAQP,mBAAAA;;IAEtC;EAACpB;EAAckB;EAAaf;EAAO,CAAA;AAEtC,QACE,wBAAA,cAACjB,2BAAAA,EAAuCgC,eACtC,wBAAA,cAAC/B,4BAAAA;EACYc;EACIe;EACPb;EACFJ;KAER,wBAAA,cAACR,gCAAAA;EACSY;EACwBT;EACFC;EAC9BiC,UAAU;EACVC,KAAK3B;EACL4B,eAAY;EACZC,qBAAqBpB;IAErB,wBAAA,cAACpC,WAAAA,EAAUyD,MAAK,WACd,wBAAA,cAAC3C,kBAAAA;EACSc;EACR0B,KAAK7B;EACLiC,aAAa3C;EACIL;EACjBiC,mBAAmBd,UAAU,MAAA;EAC7B8B,MAAK"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderSectionContext.cjs","names":["noop","createContext","useContext","AppHeaderSectionContext","activePanel","setActivePanel","tabIndex","useAppHeaderSectionContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;;AASA,MAAaG,0BACXF,yCAA2C;CACzCG,aAAa;CACbC,gBAAgBL;CAChBM,UAAU;CACZ,CAAA;AAEF,MAAaC,mCAA6B;AACxC,8BAAkBJ,wBAAAA"}

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

@@ -1,10 +1,16 @@
-import { noop } from 'lodash/fp';
-import { createContext, useContext } from 'react';
-export const AppHeaderSectionContext = /*#__PURE__*/createContext({
-  activePanel: null,
-  setActivePanel: noop,
-  tabIndex: 0
+import { createContext, useContext } from "react";
+import { noop } from "lodash/fp";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx
+const AppHeaderSectionContext = /* @__PURE__ */ createContext({
+	activePanel: null,
+	setActivePanel: noop,
+	tabIndex: 0
 });
-export const useAppHeaderSectionContext = () => {
-  return useContext(AppHeaderSectionContext);
-};
+const useAppHeaderSectionContext = () => {
+	return useContext(AppHeaderSectionContext);
+};
+
+//#endregion
+export { AppHeaderSectionContext, useAppHeaderSectionContext };
+//# sourceMappingURL=AppHeaderSectionContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderSectionContext.js","names":["noop","createContext","useContext","AppHeaderSectionContext","activePanel","setActivePanel","tabIndex","useAppHeaderSectionContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;AASA,MAAaG,0BACXF,8BAA2C;CACzCG,aAAa;CACbC,gBAAgBL;CAChBM,UAAU;CACZ,CAAA;AAEF,MAAaC,mCAA6B;AACxC,QAAOL,WAAWC,wBAAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBackButton.cjs","names":["Box","FlexBox","Text","ArrowLeftIcon","React","useGlobalHeaderItemClick","NavIconButton","NavigationButton","SmallMenuButton","MobileBackButton","handleClose","type","globalHeaderItemClick","handleBackButtonClick","event","id","text","display","_","sm","isActive","onClick","gap","alignItems","height","width","size","xs","ml","gridColumn","gridRow","icon","tip","tipProps","alignment","narrow","placement","aria-label","index"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { NavIconButton, NavigationButton, SmallMenuButton } from './elements';\n\nexport type MobileBackButtonProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n};\n\nexport const MobileBackButton: React.FC<MobileBackButtonProps> = ({\n  handleClose,\n  type,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const handleBackButtonClick = (\n    event: React.MouseEvent<HTMLButtonElement>\n  ) => {\n    globalHeaderItemClick(event, {\n      id: 'back',\n      text: 'Back',\n      type,\n    });\n    handleClose();\n  };\n\n  return (\n    <>\n      <Box display={{ _: 'none', sm: 'block' }}>\n        <NavigationButton isActive={false} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </NavigationButton>\n      </Box>\n      <Box\n        display={{ _: 'none', xs: 'grid', sm: 'none' }}\n        ml={8}\n        gridColumn=\"1\"\n        gridRow=\"1\"\n      >\n        <NavIconButton\n          onClick={handleBackButtonClick}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n        />\n      </Box>\n      <Box display={{ _: 'flex', xs: 'none' }}>\n        <SmallMenuButton index={0} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </SmallMenuButton>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAaS,oBAAqD,EAChEC,aACAC,WACD;CACC,MAAM,EAAEC,0BAA0BP,0CAAAA;CAElC,MAAMQ,yBACJC,UAAAA;AAEAF,wBAAsBE,OAAO;GAC3BC,IAAI;GACJC,MAAM;GACNL;GACF,CAAA;AACAD,eAAAA;;AAGF,QACE,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACV,uBAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQC,IAAI;EAAQ,IACrC,8BAAA,cAACZ,mCAAAA;EAAiBa,UAAU;EAAOC,SAASR;IAC1C,8BAAA,cAACZ,2BAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,8BAAA,cAACvB,uBAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,8BAAA,cAACtB,uCAAAA,EAAcuB,MAAM,QAEvB,8BAAA,cAACxB,wBAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,EAIZ,8BAAA,cAACF,uBAAAA;EACCiB,SAAS;GAAEC,GAAG;GAAQS,IAAI;GAAQR,IAAI;GAAO;EAC7CS,IAAI;EACJC,YAAW;EACXC,SAAQ;IAER,8BAAA,cAACxB,gCAAAA;EACCe,SAASR;EACTkB,MAAM5B;EACN6B,KAAI;EACJC,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAC,cAAW;MAGf,8BAAA,cAACrC,uBAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQS,IAAI;EAAO,IACpC,8BAAA,cAACnB,kCAAAA;EAAgB8B,OAAO;EAAGjB,SAASR;IAClC,8BAAA,cAACZ,2BAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,8BAAA,cAACvB,uBAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,8BAAA,cAACtB,uCAAAA,EAAcuB,MAAM,QAEvB,8BAAA,cAACxB,wBAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,CAAA"}