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

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

@@ -1,51 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
-const require_MobileBackButton = require('./MobileBackButton.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx
-const MobileNavMenu = ({ handleClose, type, navSections }) => {
-	const { activePanel, setActivePanel } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	const ActivePanel = navSections[activePanel ?? 0].panel;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16,
-		children: [activePanel === null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MobileBackButton.MobileBackButton, {
-			handleClose,
-			type
-		}), navSections.map(({ item }, index) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.SmallMenuButton, {
-				index: index + 1,
-				onClick: () => setActivePanel(index),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.icon, { size: 24 })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: item.text })]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowChevronRightIcon, {}) })]
-			}, item.id);
-		})] }), activePanel !== null && ActivePanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			background: _codecademy_gamut_styles.theme.colors.background,
-			borderRadius: "lg",
-			p: 16,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivePanel, {})
-		})]
-	});
-};
-
-//#endregion
-exports.MobileNavMenu = MobileNavMenu;

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

@@ -1,105 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_index = require('../AppHeaderDropdownProvider/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
-const NavTabPanel = ({ children, isActiveTab, index, id }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.StyledNavTabPanel, {
-		isFirst: index === 0,
-		role: "tabpanel",
-		id: `${id}-panel`,
-		"aria-labelledby": `${id}-tab`,
-		display: isActiveTab ? "block" : "none",
-		gridColumn: "2 / span 12",
-		gridRow: "1 / span 8",
-		bg: "background",
-		px: 32,
-		pt: 16,
-		pb: 24,
-		children
-	});
-};
-const NavTabList = react.default.forwardRef(({ children, type }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-		role: "tablist",
-		"aria-label": `${type.replace("-dropdown", "")} navigation`,
-		"aria-orientation": "vertical",
-		flexDirection: "column",
-		gap: 8,
-		ref,
-		children
-	});
-});
-const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
-	const sharedButtonProps = {
-		role: "tab",
-		"aria-selected": isActive,
-		"aria-controls": `${item.id}-panel`,
-		onClick: (event) => onSelect(item.id, event, item),
-		onKeyDown,
-		tabIndex: isActive ? 0 : -1,
-		isActive,
-		id: `${item.id}-tab`
-	};
-	const buttonRef = (0, react.useRef)(null);
-	const { setFirstItemRef } = (0, react.useContext)(require_index.AppHeaderDropdownContext);
-	(0, react.useEffect)(() => {
-		if (index === 0 && buttonRef.current) setFirstItemRef?.(buttonRef.current);
-	}, [index, setFirstItemRef]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.NavigationButton, {
-		ref: buttonRef,
-		...sharedButtonProps,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			gap: 8,
-			alignItems: "center",
-			children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				height: 24,
-				width: 24,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.icon, { size: 24 })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.OverflowText, {
-				maxWidth: {
-					_: "110px",
-					md: "none"
-				},
-				children: item.text
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-			alignItems: "center",
-			children: isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				display: {
-					_: "none",
-					sm: "block"
-				},
-				mt: 4,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })
-			})
-		})]
-	}), item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavIconButtonContainer, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		...sharedButtonProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavIconButton, {
-			icon: item.icon,
-			tip: item.text,
-			tipProps: {
-				alignment: "right-center",
-				narrow: false,
-				placement: "floating"
-			},
-			"aria-label": item.text
-		})
-	})] });
-};
-
-//#endregion
-exports.NavTab = NavTab;
-exports.NavTabList = NavTabList;
-exports.NavTabPanel = NavTabPanel;

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

@@ -1,84 +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('./AppHeaderSectionContext.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx
-const PanelLayout = ({ heading, description, linkItem, children }) => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { handleClose } = require_index.useAppHeaderDropdownContext();
-	const { setActivePanel, tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		flexDirection: "column",
-		gap: {
-			_: 8,
-			xs: 8
-		},
-		pr: {
-			_: 0,
-			md: 16,
-			lg: 0
-		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				alignItems: "center",
-				gap: {
-					_: 8,
-					xs: 0
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
-					onClick: () => setActivePanel(null),
-					icon: _codecademy_gamut_icons.ArrowLeftIcon,
-					tip: "Back to main navigation",
-					tipProps: {
-						alignment: "right-center",
-						narrow: false,
-						placement: "floating"
-					},
-					"aria-label": "Back to main navigation",
-					display: {
-						_: "flex",
-						xs: "none"
-					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					as: "h2",
-					variant: "title-sm",
-					children: heading
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				mb: 16,
-				children: description
-			}),
-			children,
-			linkItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-				justifyContent: "center",
-				mt: 16,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-					href: linkItem.href,
-					onClick: (event) => {
-						globalHeaderItemClick(event, linkItem);
-						handleClose();
-					},
-					tabIndex,
-					variant: "standard",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						alignItems: "center",
-						gap: 8,
-						children: [
-							linkItem.text,
-							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.MiniArrowRightIcon, {})
-						]
-					})
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-exports.PanelLayout = PanelLayout;

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

@@ -1,179 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx
-const StyledSection = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
-  border-radius: 16px;
-  overflow: hidden;
-  background-color: ${({ activePanelSelected, theme }) => activePanelSelected ? theme.colors["gray-100"] : theme.colors.background};
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 480px) {
-    background-color: ${({ theme }) => theme.colors["gray-100"]};
-  }
-
-  // at this breakpoint the menu becomes a dropdown
-  @media (min-width: 1200px) {
-    width: calc(100dvw - 11rem);
-    max-width: calc(1440px - 11rem);
-    max-height: 85vh;
-  }
-`;
-const ScrollableContent = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border-radius: 16px;
-
-  /* Custom scrollbar styling to maintain border-radius */
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 0 16px 16px 0;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    background-clip: content-box;
-    opacity: 0.8;
-  }
-
-  /* For Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => theme.colors["gray-300"]} transparent;
-`;
-const NavTabContainer = (0, _emotion_styled.default)(_codecademy_gamut.GridBox)`
-  grid-template-columns: 297px 32px 1fr;
-
-  @media (max-width: 767px) {
-    grid-template-columns: 64px 1fr 1fr;
-  }
-  @media (max-width: 479px) {
-    display: none;
-  }
-`;
-const GradientBackground = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 7.65%,
-    rgba(0, 0, 0, 0.15) 100%
-  );
-`;
-const SmallMenuButton = _emotion_styled.default.button`
-  grid-column: 1;
-  grid-row: ${({ index }) => index + 1};
-  padding: 16px;
-  border: none;
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-  color: ${({ theme }) => theme.colors.text};
-  width: 100%;
-  text-align: left;
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme }) => theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-`;
-const OverflowText = (0, _emotion_styled.default)(_codecademy_gamut.Text)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-const StyledNavTabPanel = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  border-radius: ${({ isFirst }) => isFirst ? "0 8px 8px 8px" : "8px"};
-
-  @media (max-width: 1200px) {
-    border-radius: 8px;
-  }
-`;
-const NavigationButton = _emotion_styled.default.button`
-  grid-column: 1;
-  padding: 16px;
-  border: none;
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-  background: none;
-  cursor: pointer;
-  color: ${({ theme, isActive }) => isActive ? theme.colors.primary : theme.colors.text};
-  text-align: left;
-  width: ${({ isActive }) => isActive ? "100%" : "calc(100% - 8px)"};
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ isActive, theme }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  padding-right: ${({ isActive }) => isActive ? "24px" : "16px"};
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: ${({ theme, isActive }) => isActive ? "none" : `0 0 0 2px ${theme.colors.primary}`};
-  }
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-const NavIconButtonContainer = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-
-  grid-column: 1;
-  padding: 8px;
-
-  &:focus {
-    border-color: ${({ theme }) => theme.colors.primary};
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 8px;
-  }
-`;
-const NavIconButton = (0, _emotion_styled.default)(_codecademy_gamut.IconButton)`
-  &:hover,
-  &:focus svg {
-    &:hover,
-    &:focus {
-      color: ${({ theme }) => theme.colors.primary};
-      background-color: ${({ theme }) => theme.colors["navy-100"]};
-    }
-  }
-`;
-
-//#endregion
-exports.GradientBackground = GradientBackground;
-exports.NavIconButton = NavIconButton;
-exports.NavIconButtonContainer = NavIconButtonContainer;
-exports.NavTabContainer = NavTabContainer;
-exports.NavigationButton = NavigationButton;
-exports.OverflowText = OverflowText;
-exports.ScrollableContent = ScrollableContent;
-exports.SmallMenuButton = SmallMenuButton;
-exports.StyledNavTabPanel = StyledNavTabPanel;
-exports.StyledSection = StyledSection;

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

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

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

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