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

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

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

package/dist/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.d.ts

@@ -0,0 +1,6 @@
+import { AppHeaderLinkItem } from '../../shared';
+interface SkillTileProps {
+    item: AppHeaderLinkItem;
+}
+export declare const SkillTile: React.FC<SkillTileProps>;
+export {};

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

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

package/dist/AppHeader/Search/DefaultResults.d.ts

@@ -0,0 +1,10 @@
+interface PopularSearchesProps {
+    navigateToSearch: (searchTerm: string) => void;
+    onTrackingClick: (target: string, extraTrackingProps?: Record<string, string>) => void;
+}
+export declare const PopularSearches: React.FC<PopularSearchesProps>;
+interface PopularContentProps {
+    onTrackingClick: (target: string, extraTrackingProps?: Record<string, string>) => void;
+}
+export declare const PopularContent: React.FC<PopularContentProps>;
+export {};

package/dist/AppHeader/Search/DefaultResults.js

@@ -1,102 +1,112 @@
-import { popularContent, popularSearchTerms } from "./consts.js";
-import { SemiboldSearchIcon } from "./SearchPane.js";
-import { Badge, Box, FlexBox, MenuItem, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/Search/DefaultResults.tsx
-const StyledMenuItem = styled(MenuItem)`
-  &:focus-visible:after {
-    left: -4px;
-  }
-  padding: 8px 0;
-`;
-const PopularSearches = ({ navigateToSearch, onTrackingClick }) => {
-	const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
-	return /* @__PURE__ */ jsxs(Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "Popular searches"
-		}), /* @__PURE__ */ jsx(FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: popularSearchTerms.map((term, i) => /* @__PURE__ */ jsxs(StyledMenuItem, {
-				itemType: "link",
-				id: term,
-				href: `/search?query=${encodeURIComponent(term)}`,
-				onClick: () => {
-					navigateToSearch(term);
-					onTrackingClick("popular_search_term", { misc: JSON.stringify({
-						value: term.toLowerCase(),
-						index: i
-					}) });
-				},
-				pl: 0,
-				children: [/* @__PURE__ */ jsx(SemiboldSearchIcon, {
-					mb: 2,
-					size: 14,
-					strokeWidth: 8
-				}), /* @__PURE__ */ jsx(Text, {
-					variant: isMobile ? "p-base" : "p-large",
-					ml: 12,
-					children: term
-				})]
-			}, term))
-		})]
-	});
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Badge, Box, FlexBox, MenuItem, Text } from '@codecademy/gamut';
+import { theme } from '@codecademy/gamut-styles';
+import { popularContent, popularSearchTerms } from './consts';
+import { SemiboldSearchIcon } from './SearchPane';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledMenuItem = /*#__PURE__*/_styled(MenuItem, {
+  target: "e1fvfd3x0",
+  label: "StyledMenuItem"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1cskijm",
+  styles: "&:focus-visible:after{left:-4px;}padding:8px 0"
+} : {
+  name: "1cskijm",
+  styles: "&:focus-visible:after{left:-4px;}padding:8px 0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvU2VhcmNoL0RlZmF1bHRSZXN1bHRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9TZWFyY2gvRGVmYXVsdFJlc3VsdHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQmFkZ2UsIEJveCwgRmxleEJveCwgTWVudUl0ZW0sIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IHBvcHVsYXJDb250ZW50LCBwb3B1bGFyU2VhcmNoVGVybXMgfSBmcm9tICcuL2NvbnN0cyc7XG5pbXBvcnQgeyBTZW1pYm9sZFNlYXJjaEljb24gfSBmcm9tICcuL1NlYXJjaFBhbmUnO1xuXG5jb25zdCBTdHlsZWRNZW51SXRlbSA9IHN0eWxlZChNZW51SXRlbSlgXG4gICY6Zm9jdXMtdmlzaWJsZTphZnRlciB7XG4gICAgbGVmdDogLTRweDtcbiAgfVxuICBwYWRkaW5nOiA4cHggMDtcbmA7XG5cbmludGVyZmFjZSBQb3B1bGFyU2VhcmNoZXNQcm9wcyB7XG4gIG5hdmlnYXRlVG9TZWFyY2g6IChzZWFyY2hUZXJtOiBzdHJpbmcpID0+IHZvaWQ7XG4gIG9uVHJhY2tpbmdDbGljazogKFxuICAgIHRhcmdldDogc3RyaW5nLFxuICAgIGV4dHJhVHJhY2tpbmdQcm9wcz86IFJlY29yZDxzdHJpbmcsIHN0cmluZz5cbiAgKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgY29uc3QgUG9wdWxhclNlYXJjaGVzOiBSZWFjdC5GQzxQb3B1bGFyU2VhcmNoZXNQcm9wcz4gPSAoe1xuICBuYXZpZ2F0ZVRvU2VhcmNoLFxuICBvblRyYWNraW5nQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IGlzTW9iaWxlID0gdGhlbWUuYnJlYWtwb2ludHMueHMgfHwgdGhlbWUuYnJlYWtwb2ludHMuc207XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsyNH0gYXM9XCJsaVwiPlxuICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14c1wiIG1iPXsxMn0+XG4gICAgICAgIFBvcHVsYXIgc2VhcmNoZXNcbiAgICAgIDwvVGV4dD5cbiAgICAgIDxGbGV4Qm94IGFzPVwidWxcIiBsaXN0U3R5bGU9XCJub25lXCIgcD17MH0gZmxleERpcmVjdGlvbj1cImNvbHVtblwiPlxuICAgICAgICB7cG9wdWxhclNlYXJjaFRlcm1zLm1hcCgodGVybSwgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRNZW51SXRlbVxuICAgICAgICAgICAgaXRlbVR5cGU9XCJsaW5rXCJcbiAgICAgICAgICAgIGtleT17dGVybX1cbiAgICAgICAgICAgIGlkPXt0ZXJtfVxuICAgICAgICAgICAgaHJlZj17YC9zZWFyY2g/cXVlcnk9JHtlbmNvZGVVUklDb21wb25lbnQodGVybSl9YH1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbmF2aWdhdGVUb1NlYXJjaCh0ZXJtKTtcbiAgICAgICAgICAgICAgb25UcmFja2luZ0NsaWNrKCdwb3B1bGFyX3NlYXJjaF90ZXJtJywge1xuICAgICAgICAgICAgICAgIG1pc2M6IEpTT04uc3RyaW5naWZ5KHtcbiAgICAgICAgICAgICAgICAgIHZhbHVlOiB0ZXJtLnRvTG93ZXJDYXNlKCksXG4gICAgICAgICAgICAgICAgICBpbmRleDogaSxcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgcGw9ezB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFNlbWlib2xkU2VhcmNoSWNvbiBtYj17MiBhcyAwfSBzaXplPXsxNH0gc3Ryb2tlV2lkdGg9ezh9IC8+XG4gICAgICAgICAgICA8VGV4dCB2YXJpYW50PXtpc01vYmlsZSA/ICdwLWJhc2UnIDogJ3AtbGFyZ2UnfSBtbD17MTJ9PlxuICAgICAgICAgICAgICB7dGVybX1cbiAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8L1N0eWxlZE1lbnVJdGVtPlxuICAgICAgICApKX1cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBQb3B1bGFyQ29udGVudFByb3BzIHtcbiAgb25UcmFja2luZ0NsaWNrOiAoXG4gICAgdGFyZ2V0OiBzdHJpbmcsXG4gICAgZXh0cmFUcmFja2luZ1Byb3BzPzogUmVjb3JkPHN0cmluZywgc3RyaW5nPlxuICApID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBQb3B1bGFyQ29udGVudDogUmVhY3QuRkM8UG9wdWxhckNvbnRlbnRQcm9wcz4gPSAoe1xuICBvblRyYWNraW5nQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IGlzTW9iaWxlID0gdGhlbWUuYnJlYWtwb2ludHMueHMgfHwgdGhlbWUuYnJlYWtwb2ludHMuc207XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IG1iPXsyNH0gYXM9XCJsaVwiPlxuICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS14c1wiIG1iPXsxMn0+XG4gICAgICAgIFdoYXQgb3VyIG1lbWJlcnMgYXJlIGxlYXJuaW5nXG4gICAgICA8L1RleHQ+XG4gICAgICA8RmxleEJveCBhcz1cInVsXCIgbGlzdFN0eWxlPVwibm9uZVwiIHA9ezB9IGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIj5cbiAgICAgICAge3BvcHVsYXJDb250ZW50Lm1hcCgoYywgaSkgPT4gKFxuICAgICAgICAgIDxTdHlsZWRNZW51SXRlbVxuICAgICAgICAgICAgaXRlbVR5cGU9XCJsaW5rXCJcbiAgICAgICAgICAgIGtleT17Yy50aXRsZX1cbiAgICAgICAgICAgIGhyZWY9e2MuaHJlZn1cbiAgICAgICAgICAgIHBsPXswfVxuICAgICAgICAgICAgb25DbGljaz17KCkgPT5cbiAgICAgICAgICAgICAgb25UcmFja2luZ0NsaWNrKCdwb3B1bGFyX2NvbnRlbnQnLCB7XG4gICAgICAgICAgICAgICAgc2x1ZzogYy5zbHVnLFxuICAgICAgICAgICAgICAgIC4uLihjLmNvbnRlbnRJZCA/IHsgY29udGVudF9pZDogYy5jb250ZW50SWQgfSA6IHt9KSxcbiAgICAgICAgICAgICAgICBtaXNjOiBKU09OLnN0cmluZ2lmeSh7XG4gICAgICAgICAgICAgICAgICBjb250ZW50X3R5cGU6IGMudHlwZS50b0xvd2VyQ2FzZSgpLFxuICAgICAgICAgICAgICAgICAgaW5kZXg6IGksXG4gICAgICAgICAgICAgICAgICBocmVmOiBjLmhyZWYsXG4gICAgICAgICAgICAgICAgfSksXG4gICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPEZsZXhCb3ggZmxleERpcmVjdGlvbj1cInJvd1wiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAgPFRleHQgdmFyaWFudD17aXNNb2JpbGUgPyAncC1iYXNlJyA6ICdwLWxhcmdlJ30gbXI9ezEyfT5cbiAgICAgICAgICAgICAgICB7Yy50aXRsZX1cbiAgICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgICA8QmFkZ2Ugc2l6ZT1cInNtXCIgdmFyaWFudD1cInRlcnRpYXJ5XCI+XG4gICAgICAgICAgICAgICAge2MudHlwZX1cbiAgICAgICAgICAgICAgPC9CYWRnZT5cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L1N0eWxlZE1lbnVJdGVtPlxuICAgICAgICApKX1cbiAgICAgIDwvRmxleEJveD5cbiAgICA8L0JveD5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const PopularSearches = ({
+  navigateToSearch,
+  onTrackingClick
+}) => {
+  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
+  return /*#__PURE__*/_jsxs(Box, {
+    mb: 24,
+    as: "li",
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "title-xs",
+      mb: 12,
+      children: "Popular searches"
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      as: "ul",
+      listStyle: "none",
+      p: 0,
+      flexDirection: "column",
+      children: popularSearchTerms.map((term, i) => /*#__PURE__*/_jsxs(StyledMenuItem, {
+        itemType: "link",
+        id: term,
+        href: `/search?query=${encodeURIComponent(term)}`,
+        onClick: () => {
+          navigateToSearch(term);
+          onTrackingClick('popular_search_term', {
+            misc: JSON.stringify({
+              value: term.toLowerCase(),
+              index: i
+            })
+          });
+        },
+        pl: 0,
+        children: [/*#__PURE__*/_jsx(SemiboldSearchIcon, {
+          mb: 2,
+          size: 14,
+          strokeWidth: 8
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: isMobile ? 'p-base' : 'p-large',
+          ml: 12,
+          children: term
+        })]
+      }, term))
+    })]
+  });
 };
-const PopularContent = ({ onTrackingClick }) => {
-	const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
-	return /* @__PURE__ */ jsxs(Box, {
-		mb: 24,
-		as: "li",
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "h2",
-			variant: "title-xs",
-			mb: 12,
-			children: "What our members are learning"
-		}), /* @__PURE__ */ jsx(FlexBox, {
-			as: "ul",
-			listStyle: "none",
-			p: 0,
-			flexDirection: "column",
-			children: popularContent.map((c, i) => /* @__PURE__ */ jsx(StyledMenuItem, {
-				itemType: "link",
-				href: c.href,
-				pl: 0,
-				onClick: () => onTrackingClick("popular_content", {
-					slug: c.slug,
-					...c.contentId ? { content_id: c.contentId } : {},
-					misc: JSON.stringify({
-						content_type: c.type.toLowerCase(),
-						index: i,
-						href: c.href
-					})
-				}),
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					flexDirection: "row",
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Text, {
-						variant: isMobile ? "p-base" : "p-large",
-						mr: 12,
-						children: c.title
-					}), /* @__PURE__ */ jsx(Badge, {
-						size: "sm",
-						variant: "tertiary",
-						children: c.type
-					})]
-				})
-			}, c.title))
-		})]
-	});
-};
-
-//#endregion
-export { PopularContent, PopularSearches };
+export const PopularContent = ({
+  onTrackingClick
+}) => {
+  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;
+  return /*#__PURE__*/_jsxs(Box, {
+    mb: 24,
+    as: "li",
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h2",
+      variant: "title-xs",
+      mb: 12,
+      children: "What our members are learning"
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      as: "ul",
+      listStyle: "none",
+      p: 0,
+      flexDirection: "column",
+      children: popularContent.map((c, i) => /*#__PURE__*/_jsx(StyledMenuItem, {
+        itemType: "link",
+        href: c.href,
+        pl: 0,
+        onClick: () => onTrackingClick('popular_content', {
+          slug: c.slug,
+          ...(c.contentId ? {
+            content_id: c.contentId
+          } : {}),
+          misc: JSON.stringify({
+            content_type: c.type.toLowerCase(),
+            index: i,
+            href: c.href
+          })
+        }),
+        children: /*#__PURE__*/_jsxs(FlexBox, {
+          flexDirection: "row",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: isMobile ? 'p-base' : 'p-large',
+            mr: 12,
+            children: c.title
+          }), /*#__PURE__*/_jsx(Badge, {
+            size: "sm",
+            variant: "tertiary",
+            children: c.type
+          })]
+        })
+      }, c.title))
+    })]
+  });
+};