@codecademy/brand 4.0.0-alpha.b1cfc89ee2.0 → 4.0.0-alpha.b5e5d575e.0

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

@@ -1,120 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_context = require('../../../GlobalHeader/context.cjs');
-const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
-const require_MobileBackButton = require('./MobileBackButton.cjs');
-const require_MobileNavMenu = require('./MobileNavMenu.cjs');
-const require_NavTabs = require('./NavTabs.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let framer_motion = require("framer-motion");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx
-const AppHeaderSection = (0, react.forwardRef)(({ isOpen = true, MarketingBanner, isMobile = false, handleClose, type, defaultSelectedKey, navSections, isCoachingEnabled }, ref) => {
-	const firstTabId = navSections?.[0]?.item?.id;
-	const [activeTab, setActiveTab] = (0, react.useState)(defaultSelectedKey || firstTabId);
-	const [activePanel, setActivePanel] = (0, react.useState)(null);
-	const tabListRef = (0, react.useRef)(null);
-	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const banner = globalHeaderDynamicData?.catalogDropdown?.banner;
-	const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;
-	const tabIndex = isOpen ? 0 : -1;
-	const activePanelSelected = activePanel !== null;
-	const onSelect = (0, react.useCallback)((key, event, item) => {
-		setActiveTab(key);
-		if (item && event) globalHeaderItemClick(event, item);
-	}, [setActiveTab, globalHeaderItemClick]);
-	const onKeyDown = (0, react.useCallback)((event) => {
-		if (!tabListRef.current) return;
-		const tabs = Array.from(tabListRef.current?.querySelectorAll("button[role=\"tab\"]") || []);
-		const activeElement = tabs.indexOf(document.activeElement);
-		if (["ArrowUp", "ArrowLeft"].includes(event.key)) {
-			event.preventDefault();
-			const prevTab = tabs[activeElement - 1];
-			if (prevTab) prevTab.focus();
-			else tabs[tabs.length - 1].focus();
-		}
-		if (["ArrowDown", "ArrowRight"].includes(event.key)) {
-			event.preventDefault();
-			const nextTab = tabs[activeElement + 1];
-			if (nextTab) nextTab.focus();
-			else tabs[0].focus();
-		}
-	}, []);
-	(0, react.useEffect)(() => {
-		if (!isOpen) setActiveTab(firstTabId);
-	}, [isOpen, firstTabId]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppHeaderSectionContext.AppHeaderSectionContext.Provider, {
-		value: {
-			activePanel,
-			setActivePanel,
-			tabIndex,
-			isCoachingEnabled
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.StyledSection, {
-			ref,
-			activePanelSelected,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.ScrollableContent, { children: [
-				showMarketingBanner && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-					display: {
-						_: activePanelSelected ? "block" : "none",
-						xs: "block"
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarketingBanner, {
-						text: banner?.text,
-						href: banner?.href,
-						tabIndex
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.NavTabContainer, {
-					p: 8,
-					rowGap: 8,
-					children: [
-						isMobile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MobileBackButton.MobileBackButton, {
-							handleClose,
-							type
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavTabs.NavTabList, {
-							type,
-							ref: tabListRef,
-							children: navSections.map(({ item }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavTabs.NavTab, {
-								item,
-								onSelect,
-								isActive: activeTab === item.id,
-								onKeyDown,
-								index
-							}, item.id))
-						}),
-						navSections.map((section, index) => {
-							const { item: { id }, panel: Panel } = section;
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavTabs.NavTabPanel, {
-								index,
-								isActiveTab: activeTab === id,
-								id,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-									animate: { opacity: activeTab === id ? 1 : 0 },
-									transition: {
-										duration: .4,
-										ease: "easeInOut"
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Panel, {})
-								})
-							}, id);
-						})
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MobileNavMenu.MobileNavMenu, {
-					handleClose,
-					type,
-					navSections
-				})
-			] })
-		})
-	});
-});
-
-//#endregion
-exports.AppHeaderSection = AppHeaderSection;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["useGlobalHeaderDynamicDataContext","useGlobalHeaderItemClick","AppHeaderSectionContext","StyledSection","ScrollableContent","Box","NavTabContainer","MobileBackButton","NavTabList","NavTab","NavTabPanel","motion","MobileNavMenu"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport { motion } from 'framer-motion';\nimport {\n  ComponentType,\n  FC,\n  forwardRef,\n  Key,\n  KeyboardEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBannerProps } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { NavTabContainer, ScrollableContent, StyledSection } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\nimport { MobileNavMenu } from './MobileNavMenu';\nimport { NavTab, NavTabList, NavTabPanel } from './NavTabs';\n\nexport type TabSectionConfig = {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  panel: ComponentType;\n};\n\nexport type AppHeaderSectionProps = {\n  isOpen?: boolean;\n  keyDownEvents?: (event: KeyboardEvent) => void;\n  ref?: RefObject<HTMLDivElement>;\n  MarketingBanner?: FC<MarketingBannerProps>;\n  isMobile?: boolean;\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: boolean;\n  isCoachingEnabled?: boolean;\n};\n\nexport const AppHeaderSection = forwardRef<\n  HTMLDivElement,\n  AppHeaderSectionProps\n>(\n  (\n    {\n      isOpen = true,\n      MarketingBanner,\n      isMobile = false,\n      handleClose,\n      type,\n      defaultSelectedKey,\n      navSections,\n      isCoachingEnabled,\n    },\n    ref\n  ) => {\n    const firstTabId = navSections?.[0]?.item?.id;\n    const [activeTab, setActiveTab] = useState<Key>(\n      defaultSelectedKey || firstTabId\n    );\n    const [activePanel, setActivePanel] = useState<number | null>(null);\n    const tabListRef = useRef<HTMLDivElement>(null);\n\n    const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n    const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n    const banner = globalHeaderDynamicData?.catalogDropdown?.banner;\n    const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;\n\n    const tabIndex = isOpen ? 0 : -1;\n    const activePanelSelected = activePanel !== null;\n\n    const onSelect = useCallback(\n      (\n        key: Key,\n        event?: React.MouseEvent,\n        item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n      ) => {\n        setActiveTab(key);\n        if (item && event) {\n          globalHeaderItemClick(event, item);\n        }\n      },\n      [setActiveTab, globalHeaderItemClick]\n    );\n\n    const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n      if (!tabListRef.current) return;\n\n      // get list of tabs available\n      const tabs = Array.from(\n        tabListRef.current?.querySelectorAll('button[role=\"tab\"]') || []\n      );\n      // get the index of the active tab\n      const activeElement = tabs.indexOf(document.activeElement as HTMLElement);\n\n      if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const prevTab = tabs[activeElement - 1];\n        if (prevTab) {\n          (prevTab as HTMLElement).focus();\n        } else {\n          // focus the last tab\n          (tabs[tabs.length - 1] as HTMLElement).focus();\n        }\n      }\n      if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const nextTab = tabs[activeElement + 1];\n        if (nextTab) {\n          (nextTab as HTMLElement).focus();\n        } else {\n          // focus the first tab\n          (tabs[0] as HTMLElement).focus();\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      if (!isOpen) {\n        setActiveTab(firstTabId);\n      }\n    }, [isOpen, firstTabId]);\n\n    return (\n      <AppHeaderSectionContext.Provider\n        value={{ activePanel, setActivePanel, tabIndex, isCoachingEnabled }}\n      >\n        <StyledSection ref={ref} activePanelSelected={activePanelSelected}>\n          <ScrollableContent>\n            {showMarketingBanner && (\n              <Box\n                display={{\n                  _: activePanelSelected ? 'block' : 'none',\n                  xs: 'block',\n                }}\n              >\n                <MarketingBanner\n                  text={banner?.text}\n                  href={banner?.href}\n                  tabIndex={tabIndex}\n                />\n              </Box>\n            )}\n            <NavTabContainer p={8} rowGap={8}>\n              {isMobile && (\n                <MobileBackButton handleClose={handleClose} type={type} />\n              )}\n\n              <NavTabList type={type} ref={tabListRef}>\n                {navSections.map(({ item }, index) => (\n                  <NavTab\n                    key={item.id}\n                    item={item}\n                    onSelect={onSelect}\n                    isActive={activeTab === item.id}\n                    onKeyDown={onKeyDown}\n                    index={index}\n                  />\n                ))}\n              </NavTabList>\n              {navSections.map((section, index) => {\n                const {\n                  item: { id },\n                  panel: Panel,\n                } = section;\n\n                return (\n                  <NavTabPanel\n                    index={index}\n                    isActiveTab={activeTab === id}\n                    key={id}\n                    id={id}\n                  >\n                    {/*  display property ensures multiple elements arent seen at once */}\n                    <motion.div\n                      animate={{ opacity: activeTab === id ? 1 : 0 }}\n                      transition={{ duration: 0.4, ease: 'easeInOut' }}\n                    >\n                      <Panel />\n                    </motion.div>\n                  </NavTabPanel>\n                );\n              })}\n            </NavTabContainer>\n            {/* base nav */}\n            <MobileNavMenu\n              handleClose={handleClose}\n              type={type}\n              navSections={navSections}\n            />\n          </ScrollableContent>\n        </StyledSection>\n      </AppHeaderSectionContext.Provider>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;;AAqDA,MAAa,0CAKT,EACE,SAAS,MACT,iBACA,WAAW,OACX,aACA,MACA,oBACA,aACA,qBAEF,QACG;CACH,MAAM,aAAa,cAAc,IAAI,MAAM;CAC3C,MAAM,CAAC,WAAW,oCAChB,sBAAsB,WACvB;CACD,MAAM,CAAC,aAAa,sCAA0C,KAAK;CACnE,MAAM,+BAAoC,KAAK;CAE/C,MAAM,EAAE,4BAA4BA,mDAAmC;CACvE,MAAM,EAAE,0BAA0BC,0CAA0B;CAE5D,MAAM,SAAS,yBAAyB,iBAAiB;CACzD,MAAM,sBAAsB,QAAQ,QAAQ,QAAQ,QAAQ;CAE5D,MAAM,WAAW,SAAS,IAAI;CAC9B,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,mCAEF,KACA,OACA,SACG;AACH,eAAa,IAAI;AACjB,MAAI,QAAQ,MACV,uBAAsB,OAAO,KAAK;IAGtC,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,oCAAyB,UAA+B;AAC5D,MAAI,CAAC,WAAW,QAAS;EAGzB,MAAM,OAAO,MAAM,KACjB,WAAW,SAAS,iBAAiB,uBAAqB,IAAI,EAAE,CACjE;EAED,MAAM,gBAAgB,KAAK,QAAQ,SAAS,cAA6B;AAEzE,MAAI,CAAC,WAAW,YAAY,CAAC,SAAS,MAAM,IAAI,EAAE;AAEhD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,KAAK,SAAS,GAAmB,OAAO;;AAGlD,MAAI,CAAC,aAAa,aAAa,CAAC,SAAS,MAAM,IAAI,EAAE;AAEnD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,GAAmB,OAAO;;IAGnC,EAAE,CAAC;AAEN,4BAAgB;AACd,MAAI,CAAC,OACH,cAAa,WAAW;IAEzB,CAAC,QAAQ,WAAW,CAAC;AAExB,QACE,2CAACC,wDAAwB;EACvB,OAAO;GAAE;GAAa;GAAgB;GAAU;GAAmB;YAEnE,2CAACC;GAAmB;GAA0B;aAC5C,4CAACC;IACE,uBACC,2CAACC;KACC,SAAS;MACP,GAAG,sBAAsB,UAAU;MACnC,IAAI;MACL;eAED,2CAAC;MACC,MAAM,QAAQ;MACd,MAAM,QAAQ;MACJ;OACV;MACE;IAER,4CAACC;KAAgB,GAAG;KAAG,QAAQ;;MAC5B,YACC,2CAACC;OAA8B;OAAmB;QAAQ;MAG5D,2CAACC;OAAiB;OAAM,KAAK;iBAC1B,YAAY,KAAK,EAAE,QAAQ,UAC1B,2CAACC;QAEO;QACI;QACV,UAAU,cAAc,KAAK;QAClB;QACJ;UALF,KAAK,GAMV,CACF;QACS;MACZ,YAAY,KAAK,SAAS,UAAU;OACnC,MAAM,EACJ,MAAM,EAAE,MACR,OAAO,UACL;AAEJ,cACE,2CAACC;QACQ;QACP,aAAa,cAAc;QAEvB;kBAGJ,2CAACC,qBAAO;SACN,SAAS,EAAE,SAAS,cAAc,KAAK,IAAI,GAAG;SAC9C,YAAY;UAAE,UAAU;UAAK,MAAM;UAAa;mBAEhD,2CAAC,UAAQ;UACE;UATR,GAUO;QAEhB;;MACc;IAElB,2CAACC;KACc;KACP;KACO;MACb;OACgB;IACN;GACiB;EAGxC"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/index.mjs

@@ -1,119 +0,0 @@
-import { NavTabContainer, ScrollableContent, StyledSection } from "./elements.mjs";
-import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from "../../../GlobalHeader/context.mjs";
-import { AppHeaderSectionContext } from "./AppHeaderSectionContext.mjs";
-import { MobileBackButton } from "./MobileBackButton.mjs";
-import { MobileNavMenu } from "./MobileNavMenu.mjs";
-import { NavTab, NavTabList, NavTabPanel } from "./NavTabs.mjs";
-import { Box } from "@codecademy/gamut";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx
-const AppHeaderSection = forwardRef(({ isOpen = true, MarketingBanner, isMobile = false, handleClose, type, defaultSelectedKey, navSections, isCoachingEnabled }, ref) => {
-	const firstTabId = navSections?.[0]?.item?.id;
-	const [activeTab, setActiveTab] = useState(defaultSelectedKey || firstTabId);
-	const [activePanel, setActivePanel] = useState(null);
-	const tabListRef = useRef(null);
-	const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const banner = globalHeaderDynamicData?.catalogDropdown?.banner;
-	const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;
-	const tabIndex = isOpen ? 0 : -1;
-	const activePanelSelected = activePanel !== null;
-	const onSelect = useCallback((key, event, item) => {
-		setActiveTab(key);
-		if (item && event) globalHeaderItemClick(event, item);
-	}, [setActiveTab, globalHeaderItemClick]);
-	const onKeyDown = useCallback((event) => {
-		if (!tabListRef.current) return;
-		const tabs = Array.from(tabListRef.current?.querySelectorAll("button[role=\"tab\"]") || []);
-		const activeElement = tabs.indexOf(document.activeElement);
-		if (["ArrowUp", "ArrowLeft"].includes(event.key)) {
-			event.preventDefault();
-			const prevTab = tabs[activeElement - 1];
-			if (prevTab) prevTab.focus();
-			else tabs[tabs.length - 1].focus();
-		}
-		if (["ArrowDown", "ArrowRight"].includes(event.key)) {
-			event.preventDefault();
-			const nextTab = tabs[activeElement + 1];
-			if (nextTab) nextTab.focus();
-			else tabs[0].focus();
-		}
-	}, []);
-	useEffect(() => {
-		if (!isOpen) setActiveTab(firstTabId);
-	}, [isOpen, firstTabId]);
-	return /* @__PURE__ */ jsx(AppHeaderSectionContext.Provider, {
-		value: {
-			activePanel,
-			setActivePanel,
-			tabIndex,
-			isCoachingEnabled
-		},
-		children: /* @__PURE__ */ jsx(StyledSection, {
-			ref,
-			activePanelSelected,
-			children: /* @__PURE__ */ jsxs(ScrollableContent, { children: [
-				showMarketingBanner && /* @__PURE__ */ jsx(Box, {
-					display: {
-						_: activePanelSelected ? "block" : "none",
-						xs: "block"
-					},
-					children: /* @__PURE__ */ jsx(MarketingBanner, {
-						text: banner?.text,
-						href: banner?.href,
-						tabIndex
-					})
-				}),
-				/* @__PURE__ */ jsxs(NavTabContainer, {
-					p: 8,
-					rowGap: 8,
-					children: [
-						isMobile && /* @__PURE__ */ jsx(MobileBackButton, {
-							handleClose,
-							type
-						}),
-						/* @__PURE__ */ jsx(NavTabList, {
-							type,
-							ref: tabListRef,
-							children: navSections.map(({ item }, index) => /* @__PURE__ */ jsx(NavTab, {
-								item,
-								onSelect,
-								isActive: activeTab === item.id,
-								onKeyDown,
-								index
-							}, item.id))
-						}),
-						navSections.map((section, index) => {
-							const { item: { id }, panel: Panel } = section;
-							return /* @__PURE__ */ jsx(NavTabPanel, {
-								index,
-								isActiveTab: activeTab === id,
-								id,
-								children: /* @__PURE__ */ jsx(motion.div, {
-									animate: { opacity: activeTab === id ? 1 : 0 },
-									transition: {
-										duration: .4,
-										ease: "easeInOut"
-									},
-									children: /* @__PURE__ */ jsx(Panel, {})
-								})
-							}, id);
-						})
-					]
-				}),
-				/* @__PURE__ */ jsx(MobileNavMenu, {
-					handleClose,
-					type,
-					navSections
-				})
-			] })
-		})
-	});
-});
-
-//#endregion
-export { AppHeaderSection };
-//# sourceMappingURL=index.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport { motion } from 'framer-motion';\nimport {\n  ComponentType,\n  FC,\n  forwardRef,\n  Key,\n  KeyboardEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBannerProps } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { NavTabContainer, ScrollableContent, StyledSection } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\nimport { MobileNavMenu } from './MobileNavMenu';\nimport { NavTab, NavTabList, NavTabPanel } from './NavTabs';\n\nexport type TabSectionConfig = {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  panel: ComponentType;\n};\n\nexport type AppHeaderSectionProps = {\n  isOpen?: boolean;\n  keyDownEvents?: (event: KeyboardEvent) => void;\n  ref?: RefObject<HTMLDivElement>;\n  MarketingBanner?: FC<MarketingBannerProps>;\n  isMobile?: boolean;\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: boolean;\n  isCoachingEnabled?: boolean;\n};\n\nexport const AppHeaderSection = forwardRef<\n  HTMLDivElement,\n  AppHeaderSectionProps\n>(\n  (\n    {\n      isOpen = true,\n      MarketingBanner,\n      isMobile = false,\n      handleClose,\n      type,\n      defaultSelectedKey,\n      navSections,\n      isCoachingEnabled,\n    },\n    ref\n  ) => {\n    const firstTabId = navSections?.[0]?.item?.id;\n    const [activeTab, setActiveTab] = useState<Key>(\n      defaultSelectedKey || firstTabId\n    );\n    const [activePanel, setActivePanel] = useState<number | null>(null);\n    const tabListRef = useRef<HTMLDivElement>(null);\n\n    const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n    const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n    const banner = globalHeaderDynamicData?.catalogDropdown?.banner;\n    const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;\n\n    const tabIndex = isOpen ? 0 : -1;\n    const activePanelSelected = activePanel !== null;\n\n    const onSelect = useCallback(\n      (\n        key: Key,\n        event?: React.MouseEvent,\n        item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n      ) => {\n        setActiveTab(key);\n        if (item && event) {\n          globalHeaderItemClick(event, item);\n        }\n      },\n      [setActiveTab, globalHeaderItemClick]\n    );\n\n    const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n      if (!tabListRef.current) return;\n\n      // get list of tabs available\n      const tabs = Array.from(\n        tabListRef.current?.querySelectorAll('button[role=\"tab\"]') || []\n      );\n      // get the index of the active tab\n      const activeElement = tabs.indexOf(document.activeElement as HTMLElement);\n\n      if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const prevTab = tabs[activeElement - 1];\n        if (prevTab) {\n          (prevTab as HTMLElement).focus();\n        } else {\n          // focus the last tab\n          (tabs[tabs.length - 1] as HTMLElement).focus();\n        }\n      }\n      if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const nextTab = tabs[activeElement + 1];\n        if (nextTab) {\n          (nextTab as HTMLElement).focus();\n        } else {\n          // focus the first tab\n          (tabs[0] as HTMLElement).focus();\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      if (!isOpen) {\n        setActiveTab(firstTabId);\n      }\n    }, [isOpen, firstTabId]);\n\n    return (\n      <AppHeaderSectionContext.Provider\n        value={{ activePanel, setActivePanel, tabIndex, isCoachingEnabled }}\n      >\n        <StyledSection ref={ref} activePanelSelected={activePanelSelected}>\n          <ScrollableContent>\n            {showMarketingBanner && (\n              <Box\n                display={{\n                  _: activePanelSelected ? 'block' : 'none',\n                  xs: 'block',\n                }}\n              >\n                <MarketingBanner\n                  text={banner?.text}\n                  href={banner?.href}\n                  tabIndex={tabIndex}\n                />\n              </Box>\n            )}\n            <NavTabContainer p={8} rowGap={8}>\n              {isMobile && (\n                <MobileBackButton handleClose={handleClose} type={type} />\n              )}\n\n              <NavTabList type={type} ref={tabListRef}>\n                {navSections.map(({ item }, index) => (\n                  <NavTab\n                    key={item.id}\n                    item={item}\n                    onSelect={onSelect}\n                    isActive={activeTab === item.id}\n                    onKeyDown={onKeyDown}\n                    index={index}\n                  />\n                ))}\n              </NavTabList>\n              {navSections.map((section, index) => {\n                const {\n                  item: { id },\n                  panel: Panel,\n                } = section;\n\n                return (\n                  <NavTabPanel\n                    index={index}\n                    isActiveTab={activeTab === id}\n                    key={id}\n                    id={id}\n                  >\n                    {/*  display property ensures multiple elements arent seen at once */}\n                    <motion.div\n                      animate={{ opacity: activeTab === id ? 1 : 0 }}\n                      transition={{ duration: 0.4, ease: 'easeInOut' }}\n                    >\n                      <Panel />\n                    </motion.div>\n                  </NavTabPanel>\n                );\n              })}\n            </NavTabContainer>\n            {/* base nav */}\n            <MobileNavMenu\n              handleClose={handleClose}\n              type={type}\n              navSections={navSections}\n            />\n          </ScrollableContent>\n        </StyledSection>\n      </AppHeaderSectionContext.Provider>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAa,mBAAmB,YAK5B,EACE,SAAS,MACT,iBACA,WAAW,OACX,aACA,MACA,oBACA,aACA,qBAEF,QACG;CACH,MAAM,aAAa,cAAc,IAAI,MAAM;CAC3C,MAAM,CAAC,WAAW,gBAAgB,SAChC,sBAAsB,WACvB;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;CACnE,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,EAAE,4BAA4B,mCAAmC;CACvE,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,SAAS,yBAAyB,iBAAiB;CACzD,MAAM,sBAAsB,QAAQ,QAAQ,QAAQ,QAAQ;CAE5D,MAAM,WAAW,SAAS,IAAI;CAC9B,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,WAAW,aAEb,KACA,OACA,SACG;AACH,eAAa,IAAI;AACjB,MAAI,QAAQ,MACV,uBAAsB,OAAO,KAAK;IAGtC,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,YAAY,aAAa,UAA+B;AAC5D,MAAI,CAAC,WAAW,QAAS;EAGzB,MAAM,OAAO,MAAM,KACjB,WAAW,SAAS,iBAAiB,uBAAqB,IAAI,EAAE,CACjE;EAED,MAAM,gBAAgB,KAAK,QAAQ,SAAS,cAA6B;AAEzE,MAAI,CAAC,WAAW,YAAY,CAAC,SAAS,MAAM,IAAI,EAAE;AAEhD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,KAAK,SAAS,GAAmB,OAAO;;AAGlD,MAAI,CAAC,aAAa,aAAa,CAAC,SAAS,MAAM,IAAI,EAAE;AAEnD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,GAAmB,OAAO;;IAGnC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,OACH,cAAa,WAAW;IAEzB,CAAC,QAAQ,WAAW,CAAC;AAExB,QACE,oBAAC,wBAAwB;EACvB,OAAO;GAAE;GAAa;GAAgB;GAAU;GAAmB;YAEnE,oBAAC;GAAmB;GAA0B;aAC5C,qBAAC;IACE,uBACC,oBAAC;KACC,SAAS;MACP,GAAG,sBAAsB,UAAU;MACnC,IAAI;MACL;eAED,oBAAC;MACC,MAAM,QAAQ;MACd,MAAM,QAAQ;MACJ;OACV;MACE;IAER,qBAAC;KAAgB,GAAG;KAAG,QAAQ;;MAC5B,YACC,oBAAC;OAA8B;OAAmB;QAAQ;MAG5D,oBAAC;OAAiB;OAAM,KAAK;iBAC1B,YAAY,KAAK,EAAE,QAAQ,UAC1B,oBAAC;QAEO;QACI;QACV,UAAU,cAAc,KAAK;QAClB;QACJ;UALF,KAAK,GAMV,CACF;QACS;MACZ,YAAY,KAAK,SAAS,UAAU;OACnC,MAAM,EACJ,MAAM,EAAE,MACR,OAAO,UACL;AAEJ,cACE,oBAAC;QACQ;QACP,aAAa,cAAc;QAEvB;kBAGJ,oBAAC,OAAO;SACN,SAAS,EAAE,SAAS,cAAc,KAAK,IAAI,GAAG;SAC9C,YAAY;UAAE,UAAU;UAAK,MAAM;UAAa;mBAEhD,oBAAC,UAAQ;UACE;UATR,GAUO;QAEhB;;MACc;IAElB,oBAAC;KACc;KACP;KACO;MACb;OACgB;IACN;GACiB;EAGxC"}

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

@@ -1,56 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../../GlobalHeader/context.cjs');
-const require_index = require('../AppHeaderDropdownProvider/index.cjs');
-const require_AppHeaderSectionContext = require('../AppHeaderSection/AppHeaderSectionContext.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx
-const SkillAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
-	backgroundColor: _codecademy_gamut_styles.theme.colors.background,
-	borderColor: _codecademy_gamut_styles.theme.colors["border-tertiary"],
-	borderRadius: "lg",
-	border: 1,
-	"&:hover, &:focus": {
-		borderColor: _codecademy_gamut_styles.theme.colors.primary,
-		background: _codecademy_gamut_styles.theme.colors["navy-100"]
-	},
-	"&:active": {
-		borderColor: _codecademy_gamut_styles.theme.colors.primary,
-		background: _codecademy_gamut_styles.theme.colors["navy-200"]
-	}
-}));
-const SkillTile = ({ item }) => {
-	const { href, text, icon: Icon } = item;
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { handleClose } = require_index.useAppHeaderDropdownContext();
-	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillAnchor, {
-		href,
-		onClick: (event) => {
-			globalHeaderItemClick(event, item);
-			handleClose();
-		},
-		variant: "interface",
-		width: "100%",
-		tabIndex,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			py: 8,
-			px: 16,
-			height: 48,
-			alignItems: "center",
-			children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { size: 24 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				variant: "p-base",
-				pl: 16,
-				children: text
-			})]
-		})
-	});
-};
-
-//#endregion
-exports.SkillTile = SkillTile;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["Anchor","theme","SkillTile: React.FC<SkillTileProps>","useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","FlexBox","Text"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextProps } from '@codecademy/gamut';\nimport { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { AppHeaderLinkItem } from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\n\ninterface SkillTileProps {\n  item: AppHeaderLinkItem;\n}\n\nconst SkillAnchor = styled(Anchor)(\n  css({\n    backgroundColor: theme.colors.background,\n    borderColor: theme.colors['border-tertiary'] as TextProps['color'],\n    borderRadius: 'lg',\n    border: 1,\n    '&:hover, &:focus': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-100'],\n    },\n    '&:active': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-200'],\n    },\n  })\n);\n\nexport const SkillTile: React.FC<SkillTileProps> = ({ item }) => {\n  const { href, text, icon: Icon } = item;\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <SkillAnchor\n      href={href}\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, item);\n        handleClose();\n      }}\n      variant=\"interface\"\n      width=\"100%\"\n      tabIndex={tabIndex}\n    >\n      <FlexBox py={8} px={16} height={48} alignItems=\"center\">\n        {Icon && <Icon size={24} />}\n        <Text variant=\"p-base\" pl={16}>\n          {text}\n        </Text>\n      </FlexBox>\n    </SkillAnchor>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,2CAAqBA,yBAAO,mCAC5B;CACF,iBAAiBC,+BAAM,OAAO;CAC9B,aAAaA,+BAAM,OAAO;CAC1B,cAAc;CACd,QAAQ;CACR,oBAAoB;EAClB,aAAaA,+BAAM,OAAO;EAC1B,YAAYA,+BAAM,OAAO;EAC1B;CACD,YAAY;EACV,aAAaA,+BAAM,OAAO;EAC1B,YAAYA,+BAAM,OAAO;EAC1B;CACF,CAAC,CACH;AAED,MAAaC,aAAuC,EAAE,WAAW;CAC/D,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS;CACnC,MAAM,EAAE,0BAA0BC,0CAA0B;CAC5D,MAAM,EAAE,gBAAgBC,2CAA6B;CACrD,MAAM,EAAE,aAAaC,4DAA4B;AAEjD,QACE,2CAAC;EACO;EACN,UAAU,UAA2D;AACnE,yBAAsB,OAAO,KAAK;AAClC,gBAAa;;EAEf,SAAQ;EACR,OAAM;EACI;YAEV,4CAACC;GAAQ,IAAI;GAAG,IAAI;GAAI,QAAQ;GAAI,YAAW;cAC5C,QAAQ,2CAAC,QAAK,MAAM,KAAM,EAC3B,2CAACC;IAAK,SAAQ;IAAS,IAAI;cACxB;KACI;IACC;GACE"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.mjs

@@ -1,54 +0,0 @@
-import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.mjs";
-import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.mjs";
-import { useAppHeaderSectionContext } from "../AppHeaderSection/AppHeaderSectionContext.mjs";
-import { Anchor, FlexBox, Text } from "@codecademy/gamut";
-import { css, theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx
-const SkillAnchor = styled(Anchor)(css({
-	backgroundColor: theme.colors.background,
-	borderColor: theme.colors["border-tertiary"],
-	borderRadius: "lg",
-	border: 1,
-	"&:hover, &:focus": {
-		borderColor: theme.colors.primary,
-		background: theme.colors["navy-100"]
-	},
-	"&:active": {
-		borderColor: theme.colors.primary,
-		background: theme.colors["navy-200"]
-	}
-}));
-const SkillTile = ({ item }) => {
-	const { href, text, icon: Icon } = item;
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const { handleClose } = useAppHeaderDropdownContext();
-	const { tabIndex } = useAppHeaderSectionContext();
-	return /* @__PURE__ */ jsx(SkillAnchor, {
-		href,
-		onClick: (event) => {
-			globalHeaderItemClick(event, item);
-			handleClose();
-		},
-		variant: "interface",
-		width: "100%",
-		tabIndex,
-		children: /* @__PURE__ */ jsxs(FlexBox, {
-			py: 8,
-			px: 16,
-			height: 48,
-			alignItems: "center",
-			children: [Icon && /* @__PURE__ */ jsx(Icon, { size: 24 }), /* @__PURE__ */ jsx(Text, {
-				variant: "p-base",
-				pl: 16,
-				children: text
-			})]
-		})
-	});
-};
-
-//#endregion
-export { SkillTile };
-//# sourceMappingURL=index.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["SkillTile: React.FC<SkillTileProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextProps } from '@codecademy/gamut';\nimport { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { AppHeaderLinkItem } from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\n\ninterface SkillTileProps {\n  item: AppHeaderLinkItem;\n}\n\nconst SkillAnchor = styled(Anchor)(\n  css({\n    backgroundColor: theme.colors.background,\n    borderColor: theme.colors['border-tertiary'] as TextProps['color'],\n    borderRadius: 'lg',\n    border: 1,\n    '&:hover, &:focus': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-100'],\n    },\n    '&:active': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-200'],\n    },\n  })\n);\n\nexport const SkillTile: React.FC<SkillTileProps> = ({ item }) => {\n  const { href, text, icon: Icon } = item;\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <SkillAnchor\n      href={href}\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, item);\n        handleClose();\n      }}\n      variant=\"interface\"\n      width=\"100%\"\n      tabIndex={tabIndex}\n    >\n      <FlexBox py={8} px={16} height={48} alignItems=\"center\">\n        {Icon && <Icon size={24} />}\n        <Text variant=\"p-base\" pl={16}>\n          {text}\n        </Text>\n      </FlexBox>\n    </SkillAnchor>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,cAAc,OAAO,OAAO,CAChC,IAAI;CACF,iBAAiB,MAAM,OAAO;CAC9B,aAAa,MAAM,OAAO;CAC1B,cAAc;CACd,QAAQ;CACR,oBAAoB;EAClB,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACD,YAAY;EACV,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACF,CAAC,CACH;AAED,MAAaA,aAAuC,EAAE,WAAW;CAC/D,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS;CACnC,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,aAAa,4BAA4B;AAEjD,QACE,oBAAC;EACO;EACN,UAAU,UAA2D;AACnE,yBAAsB,OAAO,KAAK;AAClC,gBAAa;;EAEf,SAAQ;EACR,OAAM;EACI;YAEV,qBAAC;GAAQ,IAAI;GAAG,IAAI;GAAI,QAAQ;GAAI,YAAW;cAC5C,QAAQ,oBAAC,QAAK,MAAM,KAAM,EAC3B,oBAAC;IAAK,SAAQ;IAAS,IAAI;cACxB;KACI;IACC;GACE"}

package/dist/AppHeader/Search/DefaultResults.cjs

@@ -1,106 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_consts = require('./consts.cjs');
-const require_SearchPane = require('./SearchPane.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/AppHeader/Search/DefaultResults.tsx
-const StyledMenuItem = (0, _emotion_styled.default)(_codecademy_gamut.MenuItem)`
-  &:focus-visible:after {
-    left: -4px;
-  }
-  padding: 8px 0;
-`;
-const PopularSearches = ({ navigateToSearch, onTrackingClick }) => {
-	const isMobile = _codecademy_gamut_styles.theme.breakpoints.xs || _codecademy_gamut_styles.theme.breakpoints.sm;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "Popular searches"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: require_consts.popularSearchTerms.map((term, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledMenuItem, {
-				itemType: "link",
-				id: term,
-				href: `/search?query=${encodeURIComponent(term)}`,
-				onClick: () => {
-					navigateToSearch(term);
-					onTrackingClick("popular_search_term", { misc: JSON.stringify({
-						value: term.toLowerCase(),
-						index: i
-					}) });
-				},
-				pl: 0,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchPane.SemiboldSearchIcon, {
-					mb: 2,
-					size: 14,
-					strokeWidth: 8
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					variant: isMobile ? "p-base" : "p-large",
-					ml: 12,
-					children: term
-				})]
-			}, term))
-		})]
-	});
-};
-const PopularContent = ({ onTrackingClick }) => {
-	const isMobile = _codecademy_gamut_styles.theme.breakpoints.xs || _codecademy_gamut_styles.theme.breakpoints.sm;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "What our members are learning"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: require_consts.popularContent.map((c, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuItem, {
-				itemType: "link",
-				href: c.href,
-				pl: 0,
-				onClick: () => onTrackingClick("popular_content", {
-					slug: c.slug,
-					...c.contentId ? { content_id: c.contentId } : {},
-					misc: JSON.stringify({
-						content_type: c.type.toLowerCase(),
-						index: i,
-						href: c.href
-					})
-				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					flexDirection: "row",
-					alignItems: "center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-						variant: isMobile ? "p-base" : "p-large",
-						mr: 12,
-						children: c.title
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Badge, {
-						size: "sm",
-						variant: "tertiary",
-						children: c.type
-					})]
-				})
-			}, c.title))
-		})]
-	});
-};
-
-//#endregion
-exports.PopularContent = PopularContent;
-exports.PopularSearches = PopularSearches;
-//# sourceMappingURL=DefaultResults.cjs.map

package/dist/AppHeader/Search/DefaultResults.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultResults.cjs","names":["MenuItem","PopularSearches: React.FC<PopularSearchesProps>","theme","Box","Text","FlexBox","popularSearchTerms","SemiboldSearchIcon","PopularContent: React.FC<PopularContentProps>","popularContent","Badge"],"sources":["../../../src/AppHeader/Search/DefaultResults.tsx"],"sourcesContent":["import { Badge, Box, FlexBox, MenuItem, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { popularContent, popularSearchTerms } from './consts';\nimport { SemiboldSearchIcon } from './SearchPane';\n\nconst StyledMenuItem = styled(MenuItem)`\n  &:focus-visible:after {\n    left: -4px;\n  }\n  padding: 8px 0;\n`;\n\ninterface PopularSearchesProps {\n  navigateToSearch: (searchTerm: string) => void;\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularSearches: React.FC<PopularSearchesProps> = ({\n  navigateToSearch,\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        Popular searches\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularSearchTerms.map((term, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={term}\n            id={term}\n            href={`/search?query=${encodeURIComponent(term)}`}\n            onClick={() => {\n              navigateToSearch(term);\n              onTrackingClick('popular_search_term', {\n                misc: JSON.stringify({\n                  value: term.toLowerCase(),\n                  index: i,\n                }),\n              });\n            }}\n            pl={0}\n          >\n            <SemiboldSearchIcon mb={2 as 0} size={14} strokeWidth={8} />\n            <Text variant={isMobile ? 'p-base' : 'p-large'} ml={12}>\n              {term}\n            </Text>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n\ninterface PopularContentProps {\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularContent: React.FC<PopularContentProps> = ({\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        What our members are learning\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularContent.map((c, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={c.title}\n            href={c.href}\n            pl={0}\n            onClick={() =>\n              onTrackingClick('popular_content', {\n                slug: c.slug,\n                ...(c.contentId ? { content_id: c.contentId } : {}),\n                misc: JSON.stringify({\n                  content_type: c.type.toLowerCase(),\n                  index: i,\n                  href: c.href,\n                }),\n              })\n            }\n          >\n            <FlexBox flexDirection=\"row\" alignItems=\"center\">\n              <Text variant={isMobile ? 'p-base' : 'p-large'} mr={12}>\n                {c.title}\n              </Text>\n              <Badge size=\"sm\" variant=\"tertiary\">\n                {c.type}\n              </Badge>\n            </FlexBox>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;AAOA,MAAM,iBAAiB,6BAAOA,2BAAS;;;;;;AAevC,MAAaC,mBAAmD,EAC9D,kBACA,sBACI;CACJ,MAAM,WAAWC,+BAAM,YAAY,MAAMA,+BAAM,YAAY;AAE3D,QACE,4CAACC;EAAI,IAAI;EAAI,IAAG;aACd,2CAACC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,2CAACC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnDC,kCAAmB,KAAK,MAAM,MAC7B,4CAAC;IACC,UAAS;IAET,IAAI;IACJ,MAAM,iBAAiB,mBAAmB,KAAK;IAC/C,eAAe;AACb,sBAAiB,KAAK;AACtB,qBAAgB,uBAAuB,EACrC,MAAM,KAAK,UAAU;MACnB,OAAO,KAAK,aAAa;MACzB,OAAO;MACR,CAAC,EACH,CAAC;;IAEJ,IAAI;eAEJ,2CAACC;KAAmB,IAAI;KAAQ,MAAM;KAAI,aAAa;MAAK,EAC5D,2CAACH;KAAK,SAAS,WAAW,WAAW;KAAW,IAAI;eACjD;MACI;MAjBF,KAkBU,CACjB;IACM;GACN;;AAWV,MAAaI,kBAAiD,EAC5D,sBACI;CACJ,MAAM,WAAWN,+BAAM,YAAY,MAAMA,+BAAM,YAAY;AAE3D,QACE,4CAACC;EAAI,IAAI;EAAI,IAAG;aACd,2CAACC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,2CAACC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnDI,8BAAe,KAAK,GAAG,MACtB,2CAAC;IACC,UAAS;IAET,MAAM,EAAE;IACR,IAAI;IACJ,eACE,gBAAgB,mBAAmB;KACjC,MAAM,EAAE;KACR,GAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,GAAG,EAAE;KAClD,MAAM,KAAK,UAAU;MACnB,cAAc,EAAE,KAAK,aAAa;MAClC,OAAO;MACP,MAAM,EAAE;MACT,CAAC;KACH,CAAC;cAGJ,4CAACJ;KAAQ,eAAc;KAAM,YAAW;gBACtC,2CAACD;MAAK,SAAS,WAAW,WAAW;MAAW,IAAI;gBACjD,EAAE;OACE,EACP,2CAACM;MAAM,MAAK;MAAK,SAAQ;gBACtB,EAAE;OACG;MACA;MAtBL,EAAE,MAuBQ,CACjB;IACM;GACN"}

package/dist/AppHeader/Search/DefaultResults.mjs

@@ -1,103 +0,0 @@
-import { popularContent, popularSearchTerms } from "./consts.mjs";
-import { SemiboldSearchIcon } from "./SearchPane.mjs";
-import { Badge, Box, FlexBox, MenuItem, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/Search/DefaultResults.tsx
-const StyledMenuItem = styled(MenuItem)`
-  &:focus-visible:after {
-    left: -4px;
-  }
-  padding: 8px 0;
-`;
-const PopularSearches = ({ navigateToSearch, onTrackingClick }) => {
-	const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
-	return /* @__PURE__ */ jsxs(Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "Popular searches"
-		}), /* @__PURE__ */ jsx(FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: popularSearchTerms.map((term, i) => /* @__PURE__ */ jsxs(StyledMenuItem, {
-				itemType: "link",
-				id: term,
-				href: `/search?query=${encodeURIComponent(term)}`,
-				onClick: () => {
-					navigateToSearch(term);
-					onTrackingClick("popular_search_term", { misc: JSON.stringify({
-						value: term.toLowerCase(),
-						index: i
-					}) });
-				},
-				pl: 0,
-				children: [/* @__PURE__ */ jsx(SemiboldSearchIcon, {
-					mb: 2,
-					size: 14,
-					strokeWidth: 8
-				}), /* @__PURE__ */ jsx(Text, {
-					variant: isMobile ? "p-base" : "p-large",
-					ml: 12,
-					children: term
-				})]
-			}, term))
-		})]
-	});
-};
-const PopularContent = ({ onTrackingClick }) => {
-	const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
-	return /* @__PURE__ */ jsxs(Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "What our members are learning"
-		}), /* @__PURE__ */ jsx(FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: popularContent.map((c, i) => /* @__PURE__ */ jsx(StyledMenuItem, {
-				itemType: "link",
-				href: c.href,
-				pl: 0,
-				onClick: () => onTrackingClick("popular_content", {
-					slug: c.slug,
-					...c.contentId ? { content_id: c.contentId } : {},
-					misc: JSON.stringify({
-						content_type: c.type.toLowerCase(),
-						index: i,
-						href: c.href
-					})
-				}),
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					flexDirection: "row",
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Text, {
-						variant: isMobile ? "p-base" : "p-large",
-						mr: 12,
-						children: c.title
-					}), /* @__PURE__ */ jsx(Badge, {
-						size: "sm",
-						variant: "tertiary",
-						children: c.type
-					})]
-				})
-			}, c.title))
-		})]
-	});
-};
-
-//#endregion
-export { PopularContent, PopularSearches };
-//# sourceMappingURL=DefaultResults.mjs.map

package/dist/AppHeader/Search/DefaultResults.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultResults.mjs","names":["PopularSearches: React.FC<PopularSearchesProps>","PopularContent: React.FC<PopularContentProps>"],"sources":["../../../src/AppHeader/Search/DefaultResults.tsx"],"sourcesContent":["import { Badge, Box, FlexBox, MenuItem, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { popularContent, popularSearchTerms } from './consts';\nimport { SemiboldSearchIcon } from './SearchPane';\n\nconst StyledMenuItem = styled(MenuItem)`\n  &:focus-visible:after {\n    left: -4px;\n  }\n  padding: 8px 0;\n`;\n\ninterface PopularSearchesProps {\n  navigateToSearch: (searchTerm: string) => void;\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularSearches: React.FC<PopularSearchesProps> = ({\n  navigateToSearch,\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        Popular searches\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularSearchTerms.map((term, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={term}\n            id={term}\n            href={`/search?query=${encodeURIComponent(term)}`}\n            onClick={() => {\n              navigateToSearch(term);\n              onTrackingClick('popular_search_term', {\n                misc: JSON.stringify({\n                  value: term.toLowerCase(),\n                  index: i,\n                }),\n              });\n            }}\n            pl={0}\n          >\n            <SemiboldSearchIcon mb={2 as 0} size={14} strokeWidth={8} />\n            <Text variant={isMobile ? 'p-base' : 'p-large'} ml={12}>\n              {term}\n            </Text>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n\ninterface PopularContentProps {\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularContent: React.FC<PopularContentProps> = ({\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        What our members are learning\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularContent.map((c, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={c.title}\n            href={c.href}\n            pl={0}\n            onClick={() =>\n              onTrackingClick('popular_content', {\n                slug: c.slug,\n                ...(c.contentId ? { content_id: c.contentId } : {}),\n                misc: JSON.stringify({\n                  content_type: c.type.toLowerCase(),\n                  index: i,\n                  href: c.href,\n                }),\n              })\n            }\n          >\n            <FlexBox flexDirection=\"row\" alignItems=\"center\">\n              <Text variant={isMobile ? 'p-base' : 'p-large'} mr={12}>\n                {c.title}\n              </Text>\n              <Badge size=\"sm\" variant=\"tertiary\">\n                {c.type}\n              </Badge>\n            </FlexBox>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB,OAAO,SAAS;;;;;;AAevC,MAAaA,mBAAmD,EAC9D,kBACA,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,mBAAmB,KAAK,MAAM,MAC7B,qBAAC;IACC,UAAS;IAET,IAAI;IACJ,MAAM,iBAAiB,mBAAmB,KAAK;IAC/C,eAAe;AACb,sBAAiB,KAAK;AACtB,qBAAgB,uBAAuB,EACrC,MAAM,KAAK,UAAU;MACnB,OAAO,KAAK,aAAa;MACzB,OAAO;MACR,CAAC,EACH,CAAC;;IAEJ,IAAI;eAEJ,oBAAC;KAAmB,IAAI;KAAQ,MAAM;KAAI,aAAa;MAAK,EAC5D,oBAAC;KAAK,SAAS,WAAW,WAAW;KAAW,IAAI;eACjD;MACI;MAjBF,KAkBU,CACjB;IACM;GACN;;AAWV,MAAaC,kBAAiD,EAC5D,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,eAAe,KAAK,GAAG,MACtB,oBAAC;IACC,UAAS;IAET,MAAM,EAAE;IACR,IAAI;IACJ,eACE,gBAAgB,mBAAmB;KACjC,MAAM,EAAE;KACR,GAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,GAAG,EAAE;KAClD,MAAM,KAAK,UAAU;MACnB,cAAc,EAAE,KAAK,aAAa;MAClC,OAAO;MACP,MAAM,EAAE;MACT,CAAC;KACH,CAAC;cAGJ,qBAAC;KAAQ,eAAc;KAAM,YAAW;gBACtC,oBAAC;MAAK,SAAS,WAAW,WAAW;MAAW,IAAI;gBACjD,EAAE;OACE,EACP,oBAAC;MAAM,MAAK;MAAK,SAAQ;gBACtB,EAAE;OACG;MACA;MAtBL,EAAE,MAuBQ,CACjB;IACM;GACN"}