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

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.cjs

@@ -1,301 +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');
-const require_index$1 = require('../../../lib/catalogList/index.cjs');
-const require_index$2 = require('../AppHeaderDietCard/index.cjs');
-const require_PanelLayout = require('../AppHeaderSection/PanelLayout.cjs');
-const require_index$3 = require('../AppHeaderSkillTile/index.cjs');
-const require_consts = require('./consts.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.tsx
-const CourseTopicsPanel = () => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PanelLayout.PanelLayout, {
-		heading: "Course topics",
-		description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Explore free or paid courses in a wide variety of topics. With something for every skill level, it's easy to find a course that fits your goals. Not sure where to start? \xA0", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-			tabIndex,
-			href: "/welcome/find-a-course",
-			onClick: (event) => globalHeaderItemClick(event, {
-				type: "link",
-				href: "/welcome/find-a-course",
-				text: "Take the quiz",
-				id: "take-the-quiz"
-			}),
-			children: "Take the quiz"
-		})] }),
-		linkItem: {
-			type: "link",
-			href: "/catalog",
-			text: "Explore the full catalog",
-			trackingTarget: "topnav_catalog",
-			id: "explore-all-courses"
-		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				variant: "p-large",
-				fontWeight: 700,
-				as: "h3",
-				children: "Popular languages"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
-				gridTemplateColumns: {
-					_: "1fr",
-					xs: "1fr 1fr",
-					md: "1fr 1fr 1fr"
-				},
-				gap: 8,
-				pl: 0,
-				as: "ul",
-				listStyle: "none",
-				mb: 24,
-				children: require_consts.popularLanguages.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.SkillTile, { item }) }, item.id))
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				variant: "p-large",
-				fontWeight: 700,
-				as: "h3",
-				children: "Popular subjects"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
-				gridTemplateColumns: {
-					_: "1fr",
-					xs: "1fr 1fr",
-					md: "1fr 1fr 1fr"
-				},
-				gap: 8,
-				pl: 0,
-				as: "ul",
-				listStyle: "none",
-				children: require_consts.popularSubjects.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.SkillTile, { item }) }, item.id))
-			})
-		]
-	});
-};
-const DietCardGrid = ({ children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
-		as: "ul",
-		gridTemplateColumns: {
-			_: "1fr",
-			sm: "repeat(2, minmax(0, 1fr))",
-			md: "repeat(3, minmax(0, 1fr))"
-		},
-		gap: 16,
-		m: 0,
-		p: 0,
-		listStyleType: "none",
-		children
-	});
-};
-const CareerPathsPanel = () => {
-	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
-	const totalCareerPathCount = globalHeaderDynamicData?.catalogDropdown.careerPaths.totalCareerPathCount;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
-		heading: "Career paths",
-		description: "Choose your career and we'll teach you the skills to get job-ready. Each Career Path contains a curated list of lessons, quizzes, videos, and projects to help you learn and practice real-world skills.",
-		linkItem: {
-			type: "link",
-			href: "/catalog?type=career-path",
-			text: `Explore all${totalCareerPathCount ? ` ${totalCareerPathCount}` : ""} career paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_career_paths",
-			id: "explore-all-career-paths"
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.careerPaths.promotedCareerPaths.map((path) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDietCard, {
-				title: path.title,
-				hours: path.durationHours,
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.LevelIcon, {}),
-				difficulty: path.difficulty,
-				href: path.urlPath,
-				trackingTarget: `careerpath_${path.title}`
-			}, `${path.title}-card`);
-		}) })
-	});
-};
-const SkillPathsPanel = () => {
-	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
-	const totalSkillPathCount = globalHeaderDynamicData?.catalogDropdown.skillPaths.totalSkillPathCount;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
-		heading: "Skill paths",
-		description: "Build in demand skills fast with a short, curated path. Each one includes interactive content to help you learn and apply your new skill in just a few months.",
-		linkItem: {
-			type: "link",
-			href: "/catalog?type=skill-path",
-			text: `Explore all${totalSkillPathCount ? ` ${totalSkillPathCount}` : ""} skill paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_skill_paths",
-			id: "explore-all-skill-paths"
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.skillPaths.promotedSkillPaths.map((path) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AppHeaderDietCard, {
-				title: path.title,
-				hours: path.durationHours,
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.LevelIcon, {}),
-				difficulty: path.difficulty,
-				href: path.urlPath,
-				trackingTarget: `skill_${path.title}`
-			}, `${path.title}-card`);
-		}) })
-	});
-};
-const Image = _codecademy_gamut.Box.withComponent("img");
-const GrayscaleToColorHoverLink = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)`
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
-  border-radius: 8px;
-  filter: grayscale(1);
-  transition: filter 0.2s ease-out;
-  img {
-    filter: ${({ overrideImgFilters }) => overrideImgFilters ? "contrast(5)" : "brightness(0.25)"};
-    transition: filter 0.2s ease-out;
-  }
-  &:hover,
-  &:focus {
-    filter: grayscale(0);
-    img {
-      filter: brightness(1);
-    }
-    border-color: ${({ theme }) => theme.colors.hyper};
-    background-color: ${({ theme }) => theme.colors["navy-100"]};
-  }
-`;
-const ProviderTile = ({ name, href, imgSrc, tabIndex }) => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { handleClose } = require_index.useAppHeaderDropdownContext();
-	const lowercasedProviderName = name.toLowerCase();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GrayscaleToColorHoverLink, {
-		href,
-		variant: "interface",
-		tabIndex,
-		width: "100%",
-		height: 48,
-		p: 8,
-		display: "block",
-		onClick: (event) => {
-			globalHeaderItemClick(event, {
-				type: "link",
-				id: `topnav_catalog_cert_${lowercasedProviderName}`,
-				href,
-				text: name,
-				trackingTarget: `topnav_catalog_cert_${lowercasedProviderName}`
-			});
-			handleClose();
-		},
-		overrideImgFilters: name.toLowerCase() === "kubernetes",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Image, {
-			src: imgSrc,
-			alt: name,
-			display: "block",
-			m: "auto"
-		})
-	}, name);
-};
-const CertificationPathsPanel = () => {
-	const { globalHeaderDynamicData } = require_context.useGlobalHeaderDynamicDataContext();
-	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	const totalCertificationPathCount = globalHeaderDynamicData?.catalogDropdown.certificationPaths.totalCertificationPathCount;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_PanelLayout.PanelLayout, {
-		heading: "Certification paths",
-		description: "Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.",
-		linkItem: {
-			type: "link",
-			href: "/catalog/certification-prep",
-			text: `Explore all${totalCertificationPathCount ? ` ${totalCertificationPathCount}` : ""} certification paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_certification_paths",
-			id: "explore-all-certification-paths"
-		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-			as: "h3",
-			fontSize: 18,
-			fontWeight: "bold",
-			children: "Providers"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
-			gridTemplateColumns: {
-				_: "1fr",
-				xs: "repeat(2, 1fr)",
-				sm: "repeat(3, 1fr)",
-				md: "repeat(4, 1fr)"
-			},
-			gap: 16,
-			width: "100%",
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			m: 0,
-			children: require_consts.CERTIFICATION_PROVIDERS.map(({ name, logoUrl, hubType }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				as: "li",
-				width: "100%",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProviderTile, {
-					name,
-					href: hubType === "subhub" ? `/search?query=${name} certifications` : `/catalog/certification-prep?provider=${name.toLowerCase()}`,
-					imgSrc: logoUrl,
-					tabIndex
-				})
-			}, name))
-		})]
-	});
-};
-const LiveLearningImage = _emotion_styled.default.img`
-  object-fit: cover;
-  width: 100%;
-`;
-const LiveLearningPanel = () => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { isCoachingEnabled, tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	const getImageUrl = (id) => `https://static-assets.codecademy.com/assets/components/cards/global-header/live-learning/v1/${id}.webp`;
-	const { handleClose } = require_index.useAppHeaderDropdownContext();
-	const liveLearningItems = require_index$1.liveLearningNavPanelItems(isCoachingEnabled);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PanelLayout.PanelLayout, {
-		heading: "Live learning",
-		description: liveLearningItems.description,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
-			gridTemplateColumns: {
-				_: "1fr",
-				md: "repeat(2, 1fr)"
-			},
-			gap: 16,
-			children: liveLearningItems.data.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-				href: item.href,
-				variant: "interface",
-				onClick: (event) => {
-					globalHeaderItemClick(event, item);
-					handleClose();
-				},
-				tabIndex,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Card, {
-					overflow: "hidden",
-					border: 1,
-					borderColor: "border-tertiary",
-					borderRadius: "lg",
-					isInteractive: true,
-					p: 0,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveLearningImage, {
-						src: getImageUrl(item.id),
-						alt: "",
-						loading: "lazy"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						flexDirection: "column",
-						gap: 8,
-						p: 16,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-							variant: "title-xs",
-							children: item.text
-						}), "description" in item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: item.description })]
-					})]
-				}, item.id)
-			}, item.id))
-		})
-	});
-};
-
-//#endregion
-exports.CareerPathsPanel = CareerPathsPanel;
-exports.CertificationPathsPanel = CertificationPathsPanel;
-exports.CourseTopicsPanel = CourseTopicsPanel;
-exports.LiveLearningPanel = LiveLearningPanel;
-exports.SkillPathsPanel = SkillPathsPanel;
-//# sourceMappingURL=NavPanels.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavPanels.cjs","names":["useGlobalHeaderItemClick","useAppHeaderSectionContext","PanelLayout","Anchor","Text","GridBox","popularLanguages","SkillTile","popularSubjects","useGlobalHeaderDynamicDataContext","AppHeaderDietCard","LevelIcon","Box","useAppHeaderDropdownContext","CERTIFICATION_PROVIDERS","liveLearningNavPanelItems","Card","FlexBox"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.tsx"],"sourcesContent":["import { Anchor, Box, Card, FlexBox, GridBox, Text } from '@codecademy/gamut';\nimport { LevelIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\n\nimport { CourseDifficulty } from '../../../ContentGroupBaseCard/types';\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport { liveLearningNavPanelItems } from '../../../lib/catalogList';\nimport { AppHeaderDietCard } from '../AppHeaderDietCard';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\nimport { PanelLayout } from '../AppHeaderSection/PanelLayout';\nimport { SkillTile } from '../AppHeaderSkillTile';\nimport {\n  CERTIFICATION_PROVIDERS,\n  popularLanguages,\n  popularSubjects,\n} from './consts';\n\nexport const CourseTopicsPanel = () => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  const description = (\n    <>\n      Explore free or paid courses in a wide variety of topics. With something\n      for every skill level, it&apos;s easy to find a course that fits your\n      goals. Not sure where to start? &nbsp;\n      <Anchor\n        tabIndex={tabIndex}\n        href=\"/welcome/find-a-course\"\n        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>\n          globalHeaderItemClick(event, {\n            type: 'link',\n            href: '/welcome/find-a-course',\n            text: 'Take the quiz',\n            id: 'take-the-quiz',\n          })\n        }\n      >\n        Take the quiz\n      </Anchor>\n    </>\n  );\n\n  return (\n    <PanelLayout\n      heading=\"Course topics\"\n      description={description}\n      linkItem={{\n        type: 'link',\n        href: '/catalog',\n        text: 'Explore the full catalog',\n        trackingTarget: 'topnav_catalog',\n        id: 'explore-all-courses',\n      }}\n    >\n      <Text variant=\"p-large\" fontWeight={700} as=\"h3\">\n        Popular languages\n      </Text>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n        mb={24}\n      >\n        {popularLanguages.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n\n      <Text variant=\"p-large\" fontWeight={700} as=\"h3\">\n        Popular subjects\n      </Text>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n      >\n        {popularSubjects.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nexport const DietCardGrid = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <GridBox\n      as=\"ul\"\n      gridTemplateColumns={{\n        _: '1fr',\n        sm: 'repeat(2, minmax(0, 1fr))',\n        md: 'repeat(3, minmax(0, 1fr))',\n      }}\n      gap={16}\n      m={0}\n      p={0}\n      listStyleType=\"none\"\n    >\n      {children}\n    </GridBox>\n  );\n};\n\nexport const CareerPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const totalCareerPathCount =\n    globalHeaderDynamicData?.catalogDropdown.careerPaths.totalCareerPathCount;\n  const linkText = `Explore all${\n    totalCareerPathCount ? ` ${totalCareerPathCount}` : ''\n  } career paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Career paths\"\n      description=\"Choose your career and we'll teach you the skills to get job-ready. Each Career Path contains a curated list of lessons, quizzes, videos, and projects to help you learn and practice real-world skills.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog?type=career-path',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_career_paths',\n        id: 'explore-all-career-paths',\n      }}\n    >\n      <DietCardGrid>\n        {globalHeaderDynamicData?.catalogDropdown.careerPaths.promotedCareerPaths.map(\n          (path) => {\n            return (\n              <AppHeaderDietCard\n                key={`${path.title}-card`}\n                title={path.title}\n                hours={path.durationHours}\n                icon={<LevelIcon />}\n                difficulty={path.difficulty as CourseDifficulty}\n                href={path.urlPath}\n                trackingTarget={`careerpath_${path.title}`}\n              />\n            );\n          }\n        )}\n      </DietCardGrid>\n    </PanelLayout>\n  );\n};\n\nexport const SkillPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const totalSkillPathCount =\n    globalHeaderDynamicData?.catalogDropdown.skillPaths.totalSkillPathCount;\n  const linkText = `Explore all${\n    totalSkillPathCount ? ` ${totalSkillPathCount}` : ''\n  } skill paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Skill paths\"\n      description=\"Build in demand skills fast with a short, curated path. Each one includes interactive content to help you learn and apply your new skill in just a few months.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog?type=skill-path',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_skill_paths',\n        id: 'explore-all-skill-paths',\n      }}\n    >\n      <DietCardGrid>\n        {globalHeaderDynamicData?.catalogDropdown.skillPaths.promotedSkillPaths.map(\n          (path) => {\n            return (\n              <AppHeaderDietCard\n                key={`${path.title}-card`}\n                title={path.title}\n                hours={path.durationHours}\n                icon={<LevelIcon />}\n                difficulty={path.difficulty as CourseDifficulty}\n                href={path.urlPath}\n                trackingTarget={`skill_${path.title}`}\n              />\n            );\n          }\n        )}\n      </DietCardGrid>\n    </PanelLayout>\n  );\n};\n\nconst Image = Box.withComponent('img');\n\nconst GrayscaleToColorHoverLink = styled(Anchor)<{\n  overrideImgFilters?: boolean;\n}>`\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 8px;\n  filter: grayscale(1);\n  transition: filter 0.2s ease-out;\n  img {\n    filter: ${({ overrideImgFilters }) =>\n      overrideImgFilters ? 'contrast(5)' : 'brightness(0.25)'};\n    transition: filter 0.2s ease-out;\n  }\n  &:hover,\n  &:focus {\n    filter: grayscale(0);\n    img {\n      filter: brightness(1);\n    }\n    border-color: ${({ theme }) => theme.colors.hyper};\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n  }\n`;\n\nconst ProviderTile = ({\n  name,\n  href,\n  imgSrc,\n  tabIndex,\n}: {\n  name: string;\n  href: string;\n  imgSrc: string;\n  tabIndex: number;\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  const lowercasedProviderName = name.toLowerCase();\n\n  return (\n    <GrayscaleToColorHoverLink\n      href={href}\n      variant=\"interface\"\n      key={name}\n      tabIndex={tabIndex}\n      width=\"100%\"\n      height={48}\n      p={8}\n      display=\"block\"\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, {\n          type: 'link',\n          id: `topnav_catalog_cert_${lowercasedProviderName}`,\n          href,\n          text: name,\n          trackingTarget: `topnav_catalog_cert_${lowercasedProviderName}`,\n        });\n        handleClose();\n      }}\n      overrideImgFilters={name.toLowerCase() === 'kubernetes'}\n    >\n      <Image src={imgSrc} alt={name} display=\"block\" m=\"auto\" />\n    </GrayscaleToColorHoverLink>\n  );\n};\n\nexport const CertificationPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n  const totalCertificationPathCount =\n    globalHeaderDynamicData?.catalogDropdown.certificationPaths\n      .totalCertificationPathCount;\n  const linkText = `Explore all${\n    totalCertificationPathCount ? ` ${totalCertificationPathCount}` : ''\n  } certification paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Certification paths\"\n      description=\"Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog/certification-prep',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_certification_paths',\n        id: 'explore-all-certification-paths',\n      }}\n    >\n      <Text as=\"h3\" fontSize={18} fontWeight=\"bold\">\n        Providers\n      </Text>\n      <GridBox\n        gridTemplateColumns={{\n          _: '1fr',\n          xs: 'repeat(2, 1fr)',\n          sm: 'repeat(3, 1fr)',\n          md: 'repeat(4, 1fr)',\n        }}\n        gap={16}\n        width=\"100%\"\n        as=\"ul\"\n        listStyle=\"none\"\n        p={0}\n        m={0}\n      >\n        {CERTIFICATION_PROVIDERS.map(({ name, logoUrl, hubType }) => (\n          <Box as=\"li\" key={name} width=\"100%\">\n            <ProviderTile\n              name={name}\n              href={\n                hubType === 'subhub'\n                  ? `/search?query=${name} certifications`\n                  : `/catalog/certification-prep?provider=${name.toLowerCase()}`\n              }\n              imgSrc={logoUrl}\n              tabIndex={tabIndex}\n            />\n          </Box>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nconst LiveLearningImage = styled.img`\n  object-fit: cover;\n  width: 100%;\n`;\n\nexport const LiveLearningPanel = () => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { isCoachingEnabled, tabIndex } = useAppHeaderSectionContext();\n  const getImageUrl = (id: string) =>\n    `https://static-assets.codecademy.com/assets/components/cards/global-header/live-learning/v1/${id}.webp`;\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  const liveLearningItems = liveLearningNavPanelItems(isCoachingEnabled);\n\n  return (\n    <PanelLayout\n      heading=\"Live learning\"\n      description={liveLearningItems.description}\n    >\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', md: 'repeat(2, 1fr)' }}\n        gap={16}\n      >\n        {liveLearningItems.data.map((item) => (\n          <Anchor\n            href={item.href}\n            key={item.id}\n            variant=\"interface\"\n            onClick={(\n              event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n            ) => {\n              globalHeaderItemClick(event, item);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n          >\n            <Card\n              key={item.id}\n              overflow=\"hidden\"\n              border={1}\n              borderColor=\"border-tertiary\"\n              borderRadius=\"lg\"\n              isInteractive\n              p={0}\n            >\n              <LiveLearningImage\n                src={getImageUrl(item.id)}\n                alt=\"\"\n                loading=\"lazy\"\n              />\n              <FlexBox flexDirection=\"column\" gap={8} p={16}>\n                <Text variant=\"title-xs\">{item.text}</Text>\n                {'description' in item && <Text>{item.description}</Text>}\n              </FlexBox>\n            </Card>\n          </Anchor>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.mjs

@@ -1,295 +0,0 @@
-import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from "../../../GlobalHeader/context.mjs";
-import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.mjs";
-import { useAppHeaderSectionContext } from "../AppHeaderSection/AppHeaderSectionContext.mjs";
-import { liveLearningNavPanelItems } from "../../../lib/catalogList/index.mjs";
-import { AppHeaderDietCard } from "../AppHeaderDietCard/index.mjs";
-import { PanelLayout } from "../AppHeaderSection/PanelLayout.mjs";
-import { SkillTile } from "../AppHeaderSkillTile/index.mjs";
-import { CERTIFICATION_PROVIDERS, popularLanguages, popularSubjects } from "./consts.mjs";
-import { Anchor, Box, Card, FlexBox, GridBox, Text } from "@codecademy/gamut";
-import styled from "@emotion/styled";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { LevelIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.tsx
-const CourseTopicsPanel = () => {
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const { tabIndex } = useAppHeaderSectionContext();
-	return /* @__PURE__ */ jsxs(PanelLayout, {
-		heading: "Course topics",
-		description: /* @__PURE__ */ jsxs(Fragment, { children: ["Explore free or paid courses in a wide variety of topics. With something for every skill level, it's easy to find a course that fits your goals. Not sure where to start? \xA0", /* @__PURE__ */ jsx(Anchor, {
-			tabIndex,
-			href: "/welcome/find-a-course",
-			onClick: (event) => globalHeaderItemClick(event, {
-				type: "link",
-				href: "/welcome/find-a-course",
-				text: "Take the quiz",
-				id: "take-the-quiz"
-			}),
-			children: "Take the quiz"
-		})] }),
-		linkItem: {
-			type: "link",
-			href: "/catalog",
-			text: "Explore the full catalog",
-			trackingTarget: "topnav_catalog",
-			id: "explore-all-courses"
-		},
-		children: [
-			/* @__PURE__ */ jsx(Text, {
-				variant: "p-large",
-				fontWeight: 700,
-				as: "h3",
-				children: "Popular languages"
-			}),
-			/* @__PURE__ */ jsx(GridBox, {
-				gridTemplateColumns: {
-					_: "1fr",
-					xs: "1fr 1fr",
-					md: "1fr 1fr 1fr"
-				},
-				gap: 8,
-				pl: 0,
-				as: "ul",
-				listStyle: "none",
-				mb: 24,
-				children: popularLanguages.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SkillTile, { item }) }, item.id))
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				variant: "p-large",
-				fontWeight: 700,
-				as: "h3",
-				children: "Popular subjects"
-			}),
-			/* @__PURE__ */ jsx(GridBox, {
-				gridTemplateColumns: {
-					_: "1fr",
-					xs: "1fr 1fr",
-					md: "1fr 1fr 1fr"
-				},
-				gap: 8,
-				pl: 0,
-				as: "ul",
-				listStyle: "none",
-				children: popularSubjects.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SkillTile, { item }) }, item.id))
-			})
-		]
-	});
-};
-const DietCardGrid = ({ children }) => {
-	return /* @__PURE__ */ jsx(GridBox, {
-		as: "ul",
-		gridTemplateColumns: {
-			_: "1fr",
-			sm: "repeat(2, minmax(0, 1fr))",
-			md: "repeat(3, minmax(0, 1fr))"
-		},
-		gap: 16,
-		m: 0,
-		p: 0,
-		listStyleType: "none",
-		children
-	});
-};
-const CareerPathsPanel = () => {
-	const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();
-	const totalCareerPathCount = globalHeaderDynamicData?.catalogDropdown.careerPaths.totalCareerPathCount;
-	return /* @__PURE__ */ jsx(PanelLayout, {
-		heading: "Career paths",
-		description: "Choose your career and we'll teach you the skills to get job-ready. Each Career Path contains a curated list of lessons, quizzes, videos, and projects to help you learn and practice real-world skills.",
-		linkItem: {
-			type: "link",
-			href: "/catalog?type=career-path",
-			text: `Explore all${totalCareerPathCount ? ` ${totalCareerPathCount}` : ""} career paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_career_paths",
-			id: "explore-all-career-paths"
-		},
-		children: /* @__PURE__ */ jsx(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.careerPaths.promotedCareerPaths.map((path) => {
-			return /* @__PURE__ */ jsx(AppHeaderDietCard, {
-				title: path.title,
-				hours: path.durationHours,
-				icon: /* @__PURE__ */ jsx(LevelIcon, {}),
-				difficulty: path.difficulty,
-				href: path.urlPath,
-				trackingTarget: `careerpath_${path.title}`
-			}, `${path.title}-card`);
-		}) })
-	});
-};
-const SkillPathsPanel = () => {
-	const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();
-	const totalSkillPathCount = globalHeaderDynamicData?.catalogDropdown.skillPaths.totalSkillPathCount;
-	return /* @__PURE__ */ jsx(PanelLayout, {
-		heading: "Skill paths",
-		description: "Build in demand skills fast with a short, curated path. Each one includes interactive content to help you learn and apply your new skill in just a few months.",
-		linkItem: {
-			type: "link",
-			href: "/catalog?type=skill-path",
-			text: `Explore all${totalSkillPathCount ? ` ${totalSkillPathCount}` : ""} skill paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_skill_paths",
-			id: "explore-all-skill-paths"
-		},
-		children: /* @__PURE__ */ jsx(DietCardGrid, { children: globalHeaderDynamicData?.catalogDropdown.skillPaths.promotedSkillPaths.map((path) => {
-			return /* @__PURE__ */ jsx(AppHeaderDietCard, {
-				title: path.title,
-				hours: path.durationHours,
-				icon: /* @__PURE__ */ jsx(LevelIcon, {}),
-				difficulty: path.difficulty,
-				href: path.urlPath,
-				trackingTarget: `skill_${path.title}`
-			}, `${path.title}-card`);
-		}) })
-	});
-};
-const Image = Box.withComponent("img");
-const GrayscaleToColorHoverLink = styled(Anchor)`
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
-  border-radius: 8px;
-  filter: grayscale(1);
-  transition: filter 0.2s ease-out;
-  img {
-    filter: ${({ overrideImgFilters }) => overrideImgFilters ? "contrast(5)" : "brightness(0.25)"};
-    transition: filter 0.2s ease-out;
-  }
-  &:hover,
-  &:focus {
-    filter: grayscale(0);
-    img {
-      filter: brightness(1);
-    }
-    border-color: ${({ theme }) => theme.colors.hyper};
-    background-color: ${({ theme }) => theme.colors["navy-100"]};
-  }
-`;
-const ProviderTile = ({ name, href, imgSrc, tabIndex }) => {
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const { handleClose } = useAppHeaderDropdownContext();
-	const lowercasedProviderName = name.toLowerCase();
-	return /* @__PURE__ */ jsx(GrayscaleToColorHoverLink, {
-		href,
-		variant: "interface",
-		tabIndex,
-		width: "100%",
-		height: 48,
-		p: 8,
-		display: "block",
-		onClick: (event) => {
-			globalHeaderItemClick(event, {
-				type: "link",
-				id: `topnav_catalog_cert_${lowercasedProviderName}`,
-				href,
-				text: name,
-				trackingTarget: `topnav_catalog_cert_${lowercasedProviderName}`
-			});
-			handleClose();
-		},
-		overrideImgFilters: name.toLowerCase() === "kubernetes",
-		children: /* @__PURE__ */ jsx(Image, {
-			src: imgSrc,
-			alt: name,
-			display: "block",
-			m: "auto"
-		})
-	}, name);
-};
-const CertificationPathsPanel = () => {
-	const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();
-	const { tabIndex } = useAppHeaderSectionContext();
-	const totalCertificationPathCount = globalHeaderDynamicData?.catalogDropdown.certificationPaths.totalCertificationPathCount;
-	return /* @__PURE__ */ jsxs(PanelLayout, {
-		heading: "Certification paths",
-		description: "Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.",
-		linkItem: {
-			type: "link",
-			href: "/catalog/certification-prep",
-			text: `Explore all${totalCertificationPathCount ? ` ${totalCertificationPathCount}` : ""} certification paths`,
-			trackingTarget: "topnav_catalog_header_explore_all_certification_paths",
-			id: "explore-all-certification-paths"
-		},
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "h3",
-			fontSize: 18,
-			fontWeight: "bold",
-			children: "Providers"
-		}), /* @__PURE__ */ jsx(GridBox, {
-			gridTemplateColumns: {
-				_: "1fr",
-				xs: "repeat(2, 1fr)",
-				sm: "repeat(3, 1fr)",
-				md: "repeat(4, 1fr)"
-			},
-			gap: 16,
-			width: "100%",
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			m: 0,
-			children: CERTIFICATION_PROVIDERS.map(({ name, logoUrl, hubType }) => /* @__PURE__ */ jsx(Box, {
-				as: "li",
-				width: "100%",
-				children: /* @__PURE__ */ jsx(ProviderTile, {
-					name,
-					href: hubType === "subhub" ? `/search?query=${name} certifications` : `/catalog/certification-prep?provider=${name.toLowerCase()}`,
-					imgSrc: logoUrl,
-					tabIndex
-				})
-			}, name))
-		})]
-	});
-};
-const LiveLearningImage = styled.img`
-  object-fit: cover;
-  width: 100%;
-`;
-const LiveLearningPanel = () => {
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const { isCoachingEnabled, tabIndex } = useAppHeaderSectionContext();
-	const getImageUrl = (id) => `https://static-assets.codecademy.com/assets/components/cards/global-header/live-learning/v1/${id}.webp`;
-	const { handleClose } = useAppHeaderDropdownContext();
-	const liveLearningItems = liveLearningNavPanelItems(isCoachingEnabled);
-	return /* @__PURE__ */ jsx(PanelLayout, {
-		heading: "Live learning",
-		description: liveLearningItems.description,
-		children: /* @__PURE__ */ jsx(GridBox, {
-			gridTemplateColumns: {
-				_: "1fr",
-				md: "repeat(2, 1fr)"
-			},
-			gap: 16,
-			children: liveLearningItems.data.map((item) => /* @__PURE__ */ jsx(Anchor, {
-				href: item.href,
-				variant: "interface",
-				onClick: (event) => {
-					globalHeaderItemClick(event, item);
-					handleClose();
-				},
-				tabIndex,
-				children: /* @__PURE__ */ jsxs(Card, {
-					overflow: "hidden",
-					border: 1,
-					borderColor: "border-tertiary",
-					borderRadius: "lg",
-					isInteractive: true,
-					p: 0,
-					children: [/* @__PURE__ */ jsx(LiveLearningImage, {
-						src: getImageUrl(item.id),
-						alt: "",
-						loading: "lazy"
-					}), /* @__PURE__ */ jsxs(FlexBox, {
-						flexDirection: "column",
-						gap: 8,
-						p: 16,
-						children: [/* @__PURE__ */ jsx(Text, {
-							variant: "title-xs",
-							children: item.text
-						}), "description" in item && /* @__PURE__ */ jsx(Text, { children: item.description })]
-					})]
-				}, item.id)
-			}, item.id))
-		})
-	});
-};
-
-//#endregion
-export { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel };
-//# sourceMappingURL=NavPanels.mjs.map