@codecademy/brand 5.10.0 → 6.0.0-alpha.0839dde39.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","motion","forwardRef","useCallback","useEffect","useRef","useState","useGlobalHeaderDynamicDataContext","useGlobalHeaderItemClick","AppHeaderSectionContext","NavTabContainer","ScrollableContent","StyledSection","MobileBackButton","MobileNavMenu","NavTab","NavTabList","NavTabPanel","AppHeaderSection","isOpen","MarketingBanner","isMobile","handleClose","type","defaultSelectedKey","navSections","ref","firstTabId","item","id","activeTab","setActiveTab","activePanel","setActivePanel","tabListRef","globalHeaderDynamicData","globalHeaderItemClick","banner","catalogDropdown","showMarketingBanner","text","href","tabIndex","activePanelSelected","onSelect","key","event","onKeyDown","current","tabs","Array","from","querySelectorAll","activeElement","indexOf","document","includes","preventDefault","prevTab","focus","length","nextTab","Provider","value","display","_","xs","source","p","rowGap","map","index","isActive","section","panel","Panel","isActiveTab","div","animate","opacity","transition","duration","ease"],"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  AppHeaderMegaMenuDropdownType,\n  AppHeaderMegaMenuSectionItem,\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: AppHeaderMegaMenuSectionItem;\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: AppHeaderMegaMenuDropdownType;\n  navSections: {\n    item: AppHeaderMegaMenuSectionItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: 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    },\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?: AppHeaderMegaMenuSectionItem\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 }}\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                  source={type === 'catalog-dropdown' ? 'catalog' : 'resources'}\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":"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"}

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

@@ -1,145 +1,101 @@
-import { Box } from '@codecademy/gamut';
-import { motion } from 'framer-motion';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { AppHeaderSectionContext } from './AppHeaderSectionContext';
-import { NavTabContainer, ScrollableContent, StyledSection } from './elements';
-import { MobileBackButton } from './MobileBackButton';
-import { MobileNavMenu } from './MobileNavMenu';
-import { NavTab, NavTabList, NavTabPanel } from './NavTabs';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AppHeaderSection = /*#__PURE__*/forwardRef(({
-  isOpen = true,
-  MarketingBanner,
-  isMobile = false,
-  handleClose,
-  type,
-  defaultSelectedKey,
-  navSections
-}, 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;
+import { NavTabContainer, ScrollableContent, StyledSection } from "./elements.js";
+import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
+import { AppHeaderSectionContext } from "./AppHeaderSectionContext.js";
+import { MobileBackButton } from "./MobileBackButton.js";
+import { MobileNavMenu } from "./MobileNavMenu.js";
+import { NavTab, NavTabList, NavTabPanel } from "./NavTabs.js";
+import { Box } from "@codecademy/gamut";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
 
-    // get list of tabs available
-    const tabs = Array.from(tabListRef.current?.querySelectorAll('button[role="tab"]') || []);
-    // get the index of the active tab
-    const activeElement = tabs.indexOf(document.activeElement);
-    if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
-      // prevent scrollbar from moving when arrow keys are pressed on tabs
-      event.preventDefault();
-      const prevTab = tabs[activeElement - 1];
-      if (prevTab) {
-        prevTab.focus();
-      } else {
-        // focus the last tab
-        tabs[tabs.length - 1].focus();
-      }
-    }
-    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
-      // prevent scrollbar from moving when arrow keys are pressed on tabs
-      event.preventDefault();
-      const nextTab = tabs[activeElement + 1];
-      if (nextTab) {
-        nextTab.focus();
-      } else {
-        // focus the first tab
-        tabs[0].focus();
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (!isOpen) {
-      setActiveTab(firstTabId);
-    }
-  }, [isOpen, firstTabId]);
-  return /*#__PURE__*/_jsx(AppHeaderSectionContext.Provider, {
-    value: {
-      activePanel,
-      setActivePanel,
-      tabIndex
-    },
-    children: /*#__PURE__*/_jsx(StyledSection, {
-      ref: ref,
-      activePanelSelected: activePanelSelected,
-      children: /*#__PURE__*/_jsxs(ScrollableContent, {
-        children: [showMarketingBanner && /*#__PURE__*/_jsx(Box, {
-          display: {
-            _: activePanelSelected ? 'block' : 'none',
-            xs: 'block'
-          },
-          children: /*#__PURE__*/_jsx(MarketingBanner, {
-            source: type === 'catalog-dropdown' ? 'catalog' : 'resources',
-            text: banner?.text,
-            href: banner?.href,
-            tabIndex: tabIndex
-          })
-        }), /*#__PURE__*/_jsxs(NavTabContainer, {
-          p: 8,
-          rowGap: 8,
-          children: [isMobile && /*#__PURE__*/_jsx(MobileBackButton, {
-            handleClose: handleClose,
-            type: type
-          }), /*#__PURE__*/_jsx(NavTabList, {
-            type: type,
-            ref: tabListRef,
-            children: navSections.map(({
-              item
-            }, index) => /*#__PURE__*/_jsx(NavTab, {
-              item: item,
-              onSelect: onSelect,
-              isActive: activeTab === item.id,
-              onKeyDown: onKeyDown,
-              index: index
-            }, item.id))
-          }), navSections.map((section, index) => {
-            const {
-              item: {
-                id
-              },
-              panel: Panel
-            } = section;
-            return /*#__PURE__*/_jsx(NavTabPanel, {
-              index: index,
-              isActiveTab: activeTab === id,
-              id: id,
-              children: /*#__PURE__*/_jsx(motion.div, {
-                animate: {
-                  opacity: activeTab === id ? 1 : 0
-                },
-                transition: {
-                  duration: 0.4,
-                  ease: 'easeInOut'
-                },
-                children: /*#__PURE__*/_jsx(Panel, {})
-              })
-            }, id);
-          })]
-        }), /*#__PURE__*/_jsx(MobileNavMenu, {
-          handleClose: handleClose,
-          type: type,
-          navSections: navSections
-        })]
-      })
-    })
-  });
-});
+//#region src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx
+const AppHeaderSection = /*#__PURE__*/ forwardRef(({ isOpen = true, MarketingBanner, isMobile = false, handleClose, type, defaultSelectedKey, navSections }, 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__*/ React.createElement(AppHeaderSectionContext.Provider, { value: {
+		activePanel,
+		setActivePanel,
+		tabIndex
+	} }, /*#__PURE__*/ React.createElement(StyledSection, {
+		ref,
+		activePanelSelected
+	}, /*#__PURE__*/ React.createElement(ScrollableContent, null, showMarketingBanner && /*#__PURE__*/ React.createElement(Box, { display: {
+		_: activePanelSelected ? "block" : "none",
+		xs: "block"
+	} }, /*#__PURE__*/ React.createElement(MarketingBanner, {
+		source: type === "catalog-dropdown" ? "catalog" : "resources",
+		text: banner?.text,
+		href: banner?.href,
+		tabIndex
+	})), /*#__PURE__*/ React.createElement(NavTabContainer, {
+		p: 8,
+		rowGap: 8
+	}, isMobile && /*#__PURE__*/ React.createElement(MobileBackButton, {
+		handleClose,
+		type
+	}), /*#__PURE__*/ React.createElement(NavTabList, {
+		type,
+		ref: tabListRef
+	}, navSections.map(({ item }, index) => /*#__PURE__*/ React.createElement(NavTab, {
+		key: item.id,
+		item,
+		onSelect,
+		isActive: activeTab === item.id,
+		onKeyDown,
+		index
+	}))), navSections.map((section, index) => {
+		const { item: { id }, panel: Panel } = section;
+		return /*#__PURE__*/ React.createElement(NavTabPanel, {
+			index,
+			isActiveTab: activeTab === id,
+			key: id,
+			id
+		}, /*#__PURE__*/ React.createElement(motion.div, {
+			animate: { opacity: activeTab === id ? 1 : 0 },
+			transition: {
+				duration: .4,
+				ease: "easeInOut"
+			}
+		}, /*#__PURE__*/ React.createElement(Panel, null)));
+	})), /*#__PURE__*/ React.createElement(MobileNavMenu, {
+		handleClose,
+		type,
+		navSections
+	}))));
+});
+
+//#endregion
+export { AppHeaderSection };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","motion","forwardRef","useCallback","useEffect","useRef","useState","useGlobalHeaderDynamicDataContext","useGlobalHeaderItemClick","AppHeaderSectionContext","NavTabContainer","ScrollableContent","StyledSection","MobileBackButton","MobileNavMenu","NavTab","NavTabList","NavTabPanel","AppHeaderSection","isOpen","MarketingBanner","isMobile","handleClose","type","defaultSelectedKey","navSections","ref","firstTabId","item","id","activeTab","setActiveTab","activePanel","setActivePanel","tabListRef","globalHeaderDynamicData","globalHeaderItemClick","banner","catalogDropdown","showMarketingBanner","text","href","tabIndex","activePanelSelected","onSelect","key","event","onKeyDown","current","tabs","Array","from","querySelectorAll","activeElement","indexOf","document","includes","preventDefault","prevTab","focus","length","nextTab","Provider","value","display","_","xs","source","p","rowGap","map","index","isActive","section","panel","Panel","isActiveTab","div","animate","opacity","transition","duration","ease"],"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  AppHeaderMegaMenuDropdownType,\n  AppHeaderMegaMenuSectionItem,\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: AppHeaderMegaMenuSectionItem;\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: AppHeaderMegaMenuDropdownType;\n  navSections: {\n    item: AppHeaderMegaMenuSectionItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: 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    },\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?: AppHeaderMegaMenuSectionItem\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 }}\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                  source={type === 'catalog-dropdown' ? 'catalog' : 'resources'}\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":"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"}

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

@@ -0,0 +1,55 @@
+const require_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_runtime.__toESM(_emotion_styled);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx
+const SkillAnchor = /*#__PURE__*/ (0, _emotion_styled.default)(_codecademy_gamut.Anchor, {
+	target: "e1c4l1lk0",
+	label: "brand-SkillAnchor"
+})((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"]
+	}
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTa2lsbFRpbGUvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNraWxsVGlsZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBGbGV4Qm94LCBUZXh0LCBUZXh0UHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBjc3MsIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlua0l0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJTZWN0aW9uQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24vQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQnO1xuXG5pbnRlcmZhY2UgU2tpbGxUaWxlUHJvcHMge1xuICBpdGVtOiBBcHBIZWFkZXJMaW5rSXRlbTtcbn1cblxuY29uc3QgU2tpbGxBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kLFxuICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnNbJ2JvcmRlci10ZXJ0aWFyeSddIGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgYm9yZGVyOiAxLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLmNvbG9ycy5wcmltYXJ5IGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXSxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSBhcyBUZXh0UHJvcHNbJ2NvbG9yJ10sXG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ10sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTa2lsbFRpbGU6IFJlYWN0LkZDPFNraWxsVGlsZVByb3BzPiA9ICh7IGl0ZW0gfSkgPT4ge1xuICBjb25zdCB7IGhyZWYsIHRleHQsIGljb246IEljb24gfSA9IGl0ZW07XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcbiAgY29uc3QgeyBoYW5kbGVDbG9zZSB9ID0gdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdGFiSW5kZXggfSA9IHVzZUFwcEhlYWRlclNlY3Rpb25Db250ZXh0KCk7XG5cbiAgcmV0dXJuIChcbiAgICA8U2tpbGxBbmNob3JcbiAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTEFuY2hvckVsZW1lbnQsIE1vdXNlRXZlbnQ+KSA9PiB7XG4gICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9fVxuICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgID5cbiAgICAgIDxGbGV4Qm94IHB5PXs4fSBweD17MTZ9IGhlaWdodD17NDh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAge0ljb24gJiYgPEljb24gc2l6ZT17MjR9IC8+fVxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1iYXNlXCIgcGw9ezE2fT5cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvU2tpbGxBbmNob3I+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFvQiJ9 */");
+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__*/ React.createElement(SkillAnchor, {
+		href,
+		onClick: (event) => {
+			globalHeaderItemClick(event, item);
+			handleClose();
+		},
+		variant: "interface",
+		width: "100%",
+		tabIndex
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		py: 8,
+		px: 16,
+		height: 48,
+		alignItems: "center"
+	}, Icon && /*#__PURE__*/ React.createElement(Icon, { size: 24 }), /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		variant: "p-base",
+		pl: 16
+	}, text)));
+};
+
+//#endregion
+exports.SkillTile = SkillTile;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","FlexBox","Text","css","theme","styled","useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","SkillAnchor","backgroundColor","colors","background","borderColor","borderRadius","border","primary","SkillTile","item","href","text","icon","Icon","globalHeaderItemClick","handleClose","tabIndex","onClick","event","variant","width","py","px","height","alignItems","size","pl"],"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,MAAMS,cAAcJ,2CAAOL,0BAAAA;;;qCACrB;CACFU,iBAAiBN,+BAAMO,OAAOC;CAC9BC,aAAaT,+BAAMO,OAAO;CAC1BG,cAAc;CACdC,QAAQ;CACR,oBAAoB;EAClBF,aAAaT,+BAAMO,OAAOK;EAC1BJ,YAAYR,+BAAMO,OAAO;CAC3B;CACA,YAAY;EACVE,aAAaT,+BAAMO,OAAOK;EAC1BJ,YAAYR,+BAAMO,OAAO;CAC3B;AACF,CAAA,GAAA,61FAAA;AAGF,MAAaM,aAAuC,EAAEC,WAAM;CAC1D,MAAM,EAAEC,MAAMC,MAAMC,MAAMC,SAASJ;CACnC,MAAM,EAAEK,0BAA0BjB,yCAAAA;CAClC,MAAM,EAAEkB,gBAAgBjB,0CAAAA;CACxB,MAAM,EAAEkB,aAAajB,2DAAAA;CAErB,OACE,oBAAA,cAACC,aAAAA;EACOU;EACNO,UAAUC,UAAAA;GACRJ,sBAAsBI,OAAOT,IAAAA;GAC7BM,YAAAA;EACF;EACAI,SAAQ;EACRC,OAAM;EACIJ;IAEV,oBAAA,cAACxB,2BAAAA;EAAQ6B,IAAI;EAAGC,IAAI;EAAIC,QAAQ;EAAIC,YAAW;IAC5CX,QAAQ,oBAAA,cAACA,MAAAA,EAAKY,MAAM,OACrB,oBAAA,cAAChC,wBAAAA;EAAK0B,SAAQ;EAASO,IAAI;IACxBf,IAAAA,CAAAA,CAAAA;AAKX"}

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

@@ -1,65 +1,53 @@
-import _styled from "@emotion/styled/base";
-import { Anchor, FlexBox, Text } from '@codecademy/gamut';
-import { css, theme } from '@codecademy/gamut-styles';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SkillAnchor = /*#__PURE__*/_styled(Anchor, {
-  target: "e1t5ouwe0",
-  label: "SkillAnchor"
+import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
+import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { useAppHeaderSectionContext } from "../AppHeaderSection/AppHeaderSectionContext.js";
+import { Anchor, FlexBox, Text } from "@codecademy/gamut";
+import { css, theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx
+const SkillAnchor = /*#__PURE__*/ styled(Anchor, {
+	target: "e1c4l1lk0",
+	label: "brand-SkillAnchor"
 })(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']
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2tpbGxUaWxlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhb0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTa2lsbFRpbGUvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBGbGV4Qm94LCBUZXh0LCBUZXh0UHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBjc3MsIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlua0l0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJTZWN0aW9uQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24vQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQnO1xuXG5pbnRlcmZhY2UgU2tpbGxUaWxlUHJvcHMge1xuICBpdGVtOiBBcHBIZWFkZXJMaW5rSXRlbTtcbn1cblxuY29uc3QgU2tpbGxBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kLFxuICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnNbJ2JvcmRlci10ZXJ0aWFyeSddIGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgYm9yZGVyOiAxLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLmNvbG9ycy5wcmltYXJ5IGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXSxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSBhcyBUZXh0UHJvcHNbJ2NvbG9yJ10sXG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ10sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTa2lsbFRpbGU6IFJlYWN0LkZDPFNraWxsVGlsZVByb3BzPiA9ICh7IGl0ZW0gfSkgPT4ge1xuICBjb25zdCB7IGhyZWYsIHRleHQsIGljb246IEljb24gfSA9IGl0ZW07XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcbiAgY29uc3QgeyBoYW5kbGVDbG9zZSB9ID0gdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdGFiSW5kZXggfSA9IHVzZUFwcEhlYWRlclNlY3Rpb25Db250ZXh0KCk7XG5cbiAgcmV0dXJuIChcbiAgICA8U2tpbGxBbmNob3JcbiAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTEFuY2hvckVsZW1lbnQsIE1vdXNlRXZlbnQ+KSA9PiB7XG4gICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9fVxuICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgID5cbiAgICAgIDxGbGV4Qm94IHB5PXs4fSBweD17MTZ9IGhlaWdodD17NDh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAge0ljb24gJiYgPEljb24gc2l6ZT17MjR9IC8+fVxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1iYXNlXCIgcGw9ezE2fT5cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvU2tpbGxBbmNob3I+XG4gICk7XG59O1xuIl19 */");
-export const SkillTile = ({
-  item
-}) => {
-  const {
-    href,
-    text,
-    icon: Icon
-  } = item;
-  const {
-    globalHeaderItemClick
-  } = useGlobalHeaderItemClick();
-  const {
-    handleClose
-  } = useAppHeaderDropdownContext();
-  const {
-    tabIndex
-  } = useAppHeaderSectionContext();
-  return /*#__PURE__*/_jsx(SkillAnchor, {
-    href: href,
-    onClick: event => {
-      globalHeaderItemClick(event, item);
-      handleClose();
-    },
-    variant: "interface",
-    width: "100%",
-    tabIndex: 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
-      })]
-    })
-  });
-};
+	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"]
+	}
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTa2lsbFRpbGUvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNraWxsVGlsZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBGbGV4Qm94LCBUZXh0LCBUZXh0UHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBjc3MsIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlua0l0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJTZWN0aW9uQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24vQXBwSGVhZGVyU2VjdGlvbkNvbnRleHQnO1xuXG5pbnRlcmZhY2UgU2tpbGxUaWxlUHJvcHMge1xuICBpdGVtOiBBcHBIZWFkZXJMaW5rSXRlbTtcbn1cblxuY29uc3QgU2tpbGxBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kLFxuICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnNbJ2JvcmRlci10ZXJ0aWFyeSddIGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgYm9yZGVyOiAxLFxuICAgICcmOmhvdmVyLCAmOmZvY3VzJzoge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLmNvbG9ycy5wcmltYXJ5IGFzIFRleHRQcm9wc1snY29sb3InXSxcbiAgICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXSxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5jb2xvcnMucHJpbWFyeSBhcyBUZXh0UHJvcHNbJ2NvbG9yJ10sXG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ10sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTa2lsbFRpbGU6IFJlYWN0LkZDPFNraWxsVGlsZVByb3BzPiA9ICh7IGl0ZW0gfSkgPT4ge1xuICBjb25zdCB7IGhyZWYsIHRleHQsIGljb246IEljb24gfSA9IGl0ZW07XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcbiAgY29uc3QgeyBoYW5kbGVDbG9zZSB9ID0gdXNlQXBwSGVhZGVyRHJvcGRvd25Db250ZXh0KCk7XG4gIGNvbnN0IHsgdGFiSW5kZXggfSA9IHVzZUFwcEhlYWRlclNlY3Rpb25Db250ZXh0KCk7XG5cbiAgcmV0dXJuIChcbiAgICA8U2tpbGxBbmNob3JcbiAgICAgIGhyZWY9e2hyZWZ9XG4gICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTEFuY2hvckVsZW1lbnQsIE1vdXNlRXZlbnQ+KSA9PiB7XG4gICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9fVxuICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgID5cbiAgICAgIDxGbGV4Qm94IHB5PXs4fSBweD17MTZ9IGhlaWdodD17NDh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAge0ljb24gJiYgPEljb24gc2l6ZT17MjR9IC8+fVxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1iYXNlXCIgcGw9ezE2fT5cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvU2tpbGxBbmNob3I+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFvQiJ9 */");
+const SkillTile = ({ item }) => {
+	const { href, text, icon: Icon } = item;
+	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
+	const { handleClose } = useAppHeaderDropdownContext();
+	const { tabIndex } = useAppHeaderSectionContext();
+	return /*#__PURE__*/ React.createElement(SkillAnchor, {
+		href,
+		onClick: (event) => {
+			globalHeaderItemClick(event, item);
+			handleClose();
+		},
+		variant: "interface",
+		width: "100%",
+		tabIndex
+	}, /*#__PURE__*/ React.createElement(FlexBox, {
+		py: 8,
+		px: 16,
+		height: 48,
+		alignItems: "center"
+	}, Icon && /*#__PURE__*/ React.createElement(Icon, { size: 24 }), /*#__PURE__*/ React.createElement(Text, {
+		variant: "p-base",
+		pl: 16
+	}, text)));
+};
+
+//#endregion
+export { SkillTile };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Anchor","FlexBox","Text","css","theme","styled","useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","SkillAnchor","backgroundColor","colors","background","borderColor","borderRadius","border","primary","SkillTile","item","href","text","icon","Icon","globalHeaderItemClick","handleClose","tabIndex","onClick","event","variant","width","py","px","height","alignItems","size","pl"],"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,MAAMS,cAAcJ,qBAAOL,QAAAA;;;GACzBG,IAAI;CACFO,iBAAiBN,MAAMO,OAAOC;CAC9BC,aAAaT,MAAMO,OAAO;CAC1BG,cAAc;CACdC,QAAQ;CACR,oBAAoB;EAClBF,aAAaT,MAAMO,OAAOK;EAC1BJ,YAAYR,MAAMO,OAAO;CAC3B;CACA,YAAY;EACVE,aAAaT,MAAMO,OAAOK;EAC1BJ,YAAYR,MAAMO,OAAO;CAC3B;AACF,CAAA,GAAA,61FAAA;AAGF,MAAaM,aAAuC,EAAEC,WAAM;CAC1D,MAAM,EAAEC,MAAMC,MAAMC,MAAMC,SAASJ;CACnC,MAAM,EAAEK,0BAA0BjB,yBAAAA;CAClC,MAAM,EAAEkB,gBAAgBjB,4BAAAA;CACxB,MAAM,EAAEkB,aAAajB,2BAAAA;CAErB,OACE,oBAAA,cAACC,aAAAA;EACOU;EACNO,UAAUC,UAAAA;GACRJ,sBAAsBI,OAAOT,IAAAA;GAC7BM,YAAAA;EACF;EACAI,SAAQ;EACRC,OAAM;EACIJ;IAEV,oBAAA,cAACxB,SAAAA;EAAQ6B,IAAI;EAAGC,IAAI;EAAIC,QAAQ;EAAIC,YAAW;IAC5CX,QAAQ,oBAAA,cAACA,MAAAA,EAAKY,MAAM,OACrB,oBAAA,cAAChC,MAAAA;EAAK0B,SAAQ;EAASO,IAAI;IACxBf,IAAAA,CAAAA,CAAAA;AAKX"}

package/dist/AppHeader/Search/DefaultResults.cjs

@@ -0,0 +1,93 @@
+const require_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_runtime.__toESM(_emotion_styled);
+
+//#region src/AppHeader/Search/DefaultResults.tsx
+const StyledMenuItem = /*#__PURE__*/ (0, _emotion_styled.default)(_codecademy_gamut.MenuItem, {
+	target: "e1phtwxm0",
+	label: "brand-StyledMenuItem"
+})("&:focus-visible:after{left:-4px;}padding:8px 0;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9TZWFyY2gvRGVmYXVsdFJlc3VsdHMudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXBwSGVhZGVyL1NlYXJjaC9EZWZhdWx0UmVzdWx0cy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEJveCwgRmxleEJveCwgTWVudUl0ZW0sIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IHBvcHVsYXJDb250ZW50LCBwb3B1bGFyU2VhcmNoVGVybXMgfSBmcm9tICcuL2NvbnN0cyc7XG5pbXBvcnQgeyBTZW1pYm9sZFNlYXJjaEljb24gfSBmcm9tICcuL1NlYXJjaFBhbmUnO1xuXG5jb25zdCBTdHlsZWRNZW51SXRlbSA9IHN0eWxlZChNZW51SXRlbSlgXG4gICY6Zm9jdXMtdmlzaWJsZTphZnRlciB7XG4gICAgbGVmdDogLTRweDtcbiAgfVxuICBwYWRkaW5nOiA4cHggMDtcbmA7XG5cbmludGVyZmFjZSBQb3B1bGFyU2VhcmNoZXNQcm9wcyB7XG4gIG5hdmlnYXRlVG9TZWFyY2g6IChzZWFyY2hUZXJtOiBzdHJpbmcpID0+IHZvaWQ7XG4gIG9uVHJhY2tpbmdDbGljazogKFxuICAgIHRhcmdldDogc3RyaW5nLFxuICAgIGV4dHJhVHJhY2tpbmdQcm9wcz86IFJlY29yZDxzdHJpbmcsIHN0cmluZz5cbiAgKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgUG9wdWxhclNlYXJjaGVzOiBSZWFjdC5GQzxQb3B1bGFyU2VhcmNoZXNQcm9wcz4gPSAoe1xuICBuYXZpZ2F0ZVRvU2VhcmNoLFxuICBvblRyYWNraW5nQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IGlzTW9iaWxlID0gdGhlbWUuYnJlYWtwb2ludHMueHMgfHwgdGhlbWUuYnJlYWtwb2ludHMuc207XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsyNH0gYXM9XCJsaVwiPlxuICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14c1wiIG1iPXsxMn0+XG4gICAgICAgIFBvcHVsYXIgc2VhcmNoZXNcbiAgICAgIDwvVGV4dD5cbiAgICAgIDxGbGV4Qm94IGFzPVwidWxcIiBsaXN0U3R5bGU9XCJub25lXCIgcD17MH0gZmxleERpcmVjdGlvbj1cImNvbHVtblwiPlxuICAgICAgICB7cG9wdWxhclNlYXJjaFRlcm1zLm1hcCgodGVybSwgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRNZW51SXRlbVxuICAgICAgICAgICAgaXRlbVR5cGU9XCJsaW5rXCJcbiAgICAgICAgICAgIGtleT17dGVybX1cbiAgICAgICAgICAgIGlkPXt0ZXJtfVxuICAgICAgICAgICAgaHJlZj17YC9zZWFyY2g/cXVlcnk9JHtlbmNvZGVVUklDb21wb25lbnQodGVybSl9YH1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbmF2aWdhdGVUb1NlYXJjaCh0ZXJtKTtcbiAgICAgICAgICAgICAgb25UcmFja2luZ0NsaWNrKCdwb3B1bGFyX3NlYXJjaF90ZXJtJywge1xuICAgICAgICAgICAgICAgIG1pc2M6IEpTT04uc3RyaW5naWZ5KHtcbiAgICAgICAgICAgICAgICAgIHZhbHVlOiB0ZXJtLnRvTG93ZXJDYXNlKCksXG4gICAgICAgICAgICAgICAgICBpbmRleDogaSxcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgcGw9ezB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFNlbWlib2xkU2VhcmNoSWNvbiBtYj17MiBhcyAwfSBzaXplPXsxNH0gc3Ryb2tlV2lkdGg9ezh9IC8+XG4gICAgICAgICAgICA8VGV4dCB2YXJpYW50PXtpc01vYmlsZSA/ICdwLWJhc2UnIDogJ3AtbGFyZ2UnfSBtbD17MTJ9PlxuICAgICAgICAgICAgICB7dGVybX1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8L1N0eWxlZE1lbnVJdGVtPlxuICAgICAgICApKX1cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBQb3B1bGFyQ29udGVudFByb3BzIHtcbiAgb25UcmFja2luZ0NsaWNrOiAoXG4gICAgdGFyZ2V0OiBzdHJpbmcsXG4gICAgZXh0cmFUcmFja2luZ1Byb3BzPzogUmVjb3JkPHN0cmluZywgc3RyaW5nPlxuICApID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBQb3B1bGFyQ29udGVudDogUmVhY3QuRkM8UG9wdWxhckNvbnRlbnRQcm9wcz4gPSAoe1xuICBvblRyYWNraW5nQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IGlzTW9iaWxlID0gdGhlbWUuYnJlYWtwb2ludHMueHMgfHwgdGhlbWUuYnJlYWtwb2ludHMuc207XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsyNH0gYXM9XCJsaVwiPlxuICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14c1wiIG1iPXsxMn0+XG4gICAgICAgIFdoYXQgb3VyIG1lbWJlcnMgYXJlIGxlYXJuaW5nXG4gICAgICA8L1RleHQ+XG4gICAgICA8RmxleEJveCBhcz1cInVsXCIgbGlzdFN0eWxlPVwibm9uZVwiIHA9ezB9IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIj5cbiAgICAgICAge3BvcHVsYXJDb250ZW50Lm1hcCgoYywgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRNZW51SXRlbVxuICAgICAgICAgICAgaXRlbVR5cGU9XCJsaW5rXCJcbiAgICAgICAgICAgIGtleT17Yy50aXRsZX1cbiAgICAgICAgICAgIGhyZWY9e2MuaHJlZn1cbiAgICAgICAgICAgIHBsPXswfVxuICAgICAgICAgICAgb25DbGljaz17KCkgPT5cbiAgICAgICAgICAgICAgb25UcmFja2luZ0NsaWNrKCdwb3B1bGFyX2NvbnRlbnQnLCB7XG4gICAgICAgICAgICAgICAgc2x1ZzogYy5zbHVnLFxuICAgICAgICAgICAgICAgIC4uLihjLmNvbnRlbnRJZCA/IHsgY29udGVudF9pZDogYy5jb250ZW50SWQgfSA6IHt9KSxcbiAgICAgICAgICAgICAgICBtaXNjOiBKU09OLnN0cmluZ2lmeSh7XG4gICAgICAgICAgICAgICAgICBjb250ZW50X3R5cGU6IGMudHlwZS50b0xvd2VyQ2FzZSgpLFxuICAgICAgICAgICAgICAgICAgaW5kZXg6IGksXG4gICAgICAgICAgICAgICAgICBocmVmOiBjLmhyZWYsXG4gICAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cInJvd1wiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAgPFRleHQgdmFyaWFudD17aXNNb2JpbGUgPyAncC1iYXNlJyA6ICdwLWxhcmdlJ30gbXI9ezEyfT5cbiAgICAgICAgICAgICAgICB7Yy50aXRsZX1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8QmFkZ2Ugc2l6ZT1cInNtXCIgdmFyaWFudD1cInRlcnRpYXJ5XCI+XG4gICAgICAgICAgICAgICAge2MudHlwZX1cbiAgICAgICAgICAgICAgPC9CYWRnZT5cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L1N0eWxlZE1lbnVJdGVtPlxuICAgICAgICApKX1cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0JveD5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3VCIn0= */");
+const PopularSearches = ({ navigateToSearch, onTrackingClick }) => {
+	const isMobile = _codecademy_gamut_styles.theme.breakpoints.xs || _codecademy_gamut_styles.theme.breakpoints.sm;
+	return /*#__PURE__*/ React.createElement(_codecademy_gamut.Box, {
+		mb: 24,
+		as: "li"
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		as: "h2",
+		variant: "title-xs",
+		mb: 12
+	}, "Popular searches"), /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		as: "ul",
+		listStyle: "none",
+		p: 0,
+		flexDirection: "column"
+	}, require_consts.popularSearchTerms.map((term, i) => /*#__PURE__*/ React.createElement(StyledMenuItem, {
+		itemType: "link",
+		key: term,
+		id: term,
+		href: `/search?query=${encodeURIComponent(term)}`,
+		onClick: () => {
+			navigateToSearch(term);
+			onTrackingClick("popular_search_term", { misc: JSON.stringify({
+				value: term.toLowerCase(),
+				index: i
+			}) });
+		},
+		pl: 0
+	}, /*#__PURE__*/ React.createElement(require_SearchPane.SemiboldSearchIcon, {
+		mb: 2,
+		size: 14,
+		strokeWidth: 8
+	}), /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		variant: isMobile ? "p-base" : "p-large",
+		ml: 12
+	}, term)))));
+};
+const PopularContent = ({ onTrackingClick }) => {
+	const isMobile = _codecademy_gamut_styles.theme.breakpoints.xs || _codecademy_gamut_styles.theme.breakpoints.sm;
+	return /*#__PURE__*/ React.createElement(_codecademy_gamut.Box, {
+		mb: 24,
+		as: "li"
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		as: "h2",
+		variant: "title-xs",
+		mb: 12
+	}, "What our members are learning"), /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		as: "ul",
+		listStyle: "none",
+		p: 0,
+		flexDirection: "column"
+	}, require_consts.popularContent.map((c, i) => /*#__PURE__*/ React.createElement(StyledMenuItem, {
+		itemType: "link",
+		key: c.title,
+		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
+			})
+		})
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "row",
+		alignItems: "center"
+	}, /*#__PURE__*/ React.createElement(_codecademy_gamut.Text, {
+		variant: isMobile ? "p-base" : "p-large",
+		mr: 12
+	}, c.title), /*#__PURE__*/ React.createElement(_codecademy_gamut.Badge, {
+		size: "sm",
+		variant: "tertiary"
+	}, c.type))))));
+};
+
+//#endregion
+exports.PopularContent = PopularContent;
+exports.PopularSearches = PopularSearches;
+//# sourceMappingURL=DefaultResults.cjs.map