@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/AppBarDeprecated/index.d.cts

@@ -1,18 +0,0 @@
-import { WithChildrenProp } from "@codecademy/gamut";
-import * as React$1 from "react";
-
-//#region src/AppBarDeprecated/index.d.ts
-interface AppBarPropsDeprecated extends WithChildrenProp {
-  className?: string;
-  /**
-   * Whether the container should be larger than the default content size.
-   */
-  wide?: boolean;
-}
-/**
- * @deprecated use `<AppBar>` instead
- * this component still exists since `<Footer>` in le-shared uses classnames
- */
-declare const AppBarDeprecated: React$1.FC<AppBarPropsDeprecated>;
-//#endregion
-export { AppBarDeprecated, AppBarPropsDeprecated };

package/dist/AppBarDeprecated/styles/index.module.cjs

@@ -1,5 +0,0 @@
-
-//#region src/AppBarDeprecated/styles/index.module.scss
-var index_module_default = "assets/index.module-Dz0I2VL5.scss";
-
-//#endregion

package/dist/AppBarDeprecated/styles/index.module.js

@@ -1,5 +0,0 @@
-//#region src/AppBarDeprecated/styles/index.module.scss
-var index_module_default = "assets/index.module-Dz0I2VL5.scss";
-
-//#endregion
-export { index_module_default as default };

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

@@ -1,134 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../../GlobalHeader/context.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/MarketingBanner.tsx
-const MarketingBannerAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)`
-  display: flex;
-
-  &:hover,
-  &:focus-visible {
-    outline: none;
-    text-decoration: none;
-  }
-`;
-const MarketingBannerBox = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)`
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]},
-    'rgba(255, 255, 255, 0.20)';
-  border-radius: 12px;
-  position: relative;
-  background: linear-gradient(
-    145deg,
-    ${({ theme }) => theme.colors["navy-800"]} 50%,
-    ${({ theme }) => theme.colors["blue-400"]} 100%
-  );
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      145deg,
-      ${({ theme }) => theme.colors["navy-800"]} 85%,
-      ${({ theme }) => theme.colors["blue-400"]} 100%
-    );
-    opacity: 0;
-    transition: opacity 0.4s ease-in-out;
-    border-radius: 12px;
-  }
-
-  ${MarketingBannerAnchor}:hover &, ${MarketingBannerAnchor}:focus-visible & {
-    &::after {
-      opacity: 1;
-    }
-  }
-`;
-const MarketingArrowIcon = (0, _emotion_styled.default)(_codecademy_gamut_icons.ArrowRightIcon)`
-  transition: transform 0.2s ease-in-out;
-
-  ${MarketingBannerAnchor}:hover &, ${MarketingBannerAnchor}:focus-visible & {
-    transform: translateX(10px);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-const MarketingBanner = ({ tabIndex, text, href }) => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarketingBannerAnchor, {
-		variant: "interface",
-		href,
-		onClick: (event) => globalHeaderItemClick(event, {
-			type: "link",
-			href,
-			text,
-			id: "topnav_catalog_banner",
-			trackingTarget: "topnav_catalog_banner"
-		}),
-		tabIndex,
-		"data-testid": "marketing-banner",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MarketingBannerBox, {
-			width: "100%",
-			justifyContent: "space-between",
-			alignItems: {
-				_: "flex-end",
-				lg: "center"
-			},
-			height: {
-				_: "auto",
-				lg: "40px"
-			},
-			color: "white",
-			mx: 8,
-			mt: 8,
-			px: 24,
-			py: {
-				_: 16,
-				lg: 8
-			},
-			borderRadius: "lg",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				alignItems: {
-					_: "flex-start",
-					lg: "center"
-				},
-				flexDirection: {
-					_: "column",
-					lg: "row"
-				},
-				gap: {
-					_: 8,
-					lg: 0
-				},
-				zIndex: 1,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Badge, {
-					bg: "yellow-500",
-					color: "navy-800",
-					variant: "custom",
-					size: "sm",
-					mr: 8,
-					children: "New"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					variant: "p-base",
-					children: text
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				height: 16,
-				width: 16,
-				zIndex: 1,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarketingArrowIcon, {})
-			})]
-		})
-	});
-};
-
-//#endregion
-exports.MarketingBanner = MarketingBanner;

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

@@ -1,300 +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;