@codecademy/brand 3.0.0-alpha.d84718455a.0 → 3.0.0

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/NavSection.js

@@ -0,0 +1,75 @@
+import _styled from "@emotion/styled/base";
+import { Box, FlexBox } from '@codecademy/gamut';
+import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import React from 'react';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NavPanelContainer = /*#__PURE__*/_styled(Box, {
+  target: "e1j23yaz1",
+  label: "NavPanelContainer"
+})("display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";grid-column:2/span 12;grid-row:1/span 8;background-color:", ({
+  theme
+}) => theme.colors.background, ";border-radius:", ({
+  isActive,
+  isFirst
+}) => isActive && isFirst ? '0 8px 8px 8px' : '8px', ";padding:24px 32px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1COEUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0NoZXZyb25SaWdodEljb24sIEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "e1j23yaz0",
+  label: "StyledButton"
+})("grid-column:1;grid-row:", ({
+  index
+}) => index + 1, ";padding:16px;border:none;border-radius:", ({
+  isActive
+}) => isActive ? '8px 0 0 8px' : '8px', ";background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
+  theme
+}) => theme.colors.text, ";text-align:left;width:100%;height:60px;display:flex;justify-content:space-between;align-items:center;background-color:", ({
+  isActive,
+  theme
+}) => isActive ? theme.colors.background : theme.colors['gray-100'], ";#arrow-chevron-right-icon{display:", ({
+  isActive
+}) => isActive ? 'block' : 'none', ";}&:hover,&:focus{background-color:", ({
+  theme
+}) => theme.colors['navy-100'], ";color:", ({
+  theme
+}) => theme.colors.primary, ";#arrow-chevron-right-icon{display:block;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCd0UiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0NoZXZyb25SaWdodEljb24sIEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFByb3BzV2l0aENoaWxkcmVuIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIH0gZnJvbSAnLi4vLi4vc2hhcmVkJztcblxudHlwZSBOYXZTZWN0aW9uUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbiAmIHtcbiAgYWN0aXZlVGFiOiBudW1iZXI7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHNldEFjdGl2ZVRhYjogKHRhYjogbnVtYmVyKSA9PiB2b2lkO1xuICBpY29uPzogUmVhY3QuQ29tcG9uZW50VHlwZTxHYW11dEljb25Qcm9wcz47XG4gIHRleHQ6IHN0cmluZztcbiAgaW5kZXg6IG51bWJlcjtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgdGFiSW5kZXg/OiBudW1iZXI7XG59O1xuXG5jb25zdCBOYXZQYW5lbENvbnRhaW5lciA9IHN0eWxlZChCb3gpPHsgaXNBY3RpdmU6IGJvb2xlYW47IGlzRmlyc3Q6IGJvb2xlYW4gfT5gXG4gIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICBncmlkLWNvbHVtbjogMiAvIHNwYW4gMTI7XG4gIGdyaWQtcm93OiAxIC8gc3BhbiA4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSwgaXNGaXJzdCB9KSA9PlxuICAgIGlzQWN0aXZlICYmIGlzRmlyc3QgPyAnMCA4cHggOHB4IDhweCcgOiAnOHB4J307XG4gIHBhZGRpbmc6IDI0cHggMzJweDtcbmA7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpc0FjdGl2ZTogYm9vbGVhbjsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnOHB4IDAgMCA4cHgnIDogJzhweCcpfTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDE4cHg7XG4gIGZvbnQtd2VpZ2h0OiA0MDA7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgICAjYXJyb3ctY2hldnJvbi1yaWdodC1pY29uIHtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
+const NavSection = ({
+  activeTab,
+  setActiveTab,
+  icon: Icon,
+  text,
+  index,
+  children,
+  item,
+  tabIndex
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledButton, {
+      isActive: activeTab === index,
+      index: index,
+      onClick: event => {
+        globalHeaderItemClick(event, item);
+        setActiveTab(index);
+      },
+      "data-testid": `nav-section-${item.id}`,
+      "aria-expanded": activeTab === index,
+      tabIndex: tabIndex,
+      children: [/*#__PURE__*/_jsxs(FlexBox, {
+        gap: 8,
+        alignItems: "center",
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
+      }), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
+        id: "arrow-chevron-right-icon"
+      })]
+    }), /*#__PURE__*/_jsx(NavPanelContainer, {
+      isActive: activeTab === index,
+      isFirst: index === 0,
+      children: children
+    })]
+  });
+};
+export default NavSection;

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/consts.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AppHeaderCatalogDropdownItem } from '../../shared';
+export type NavSectionConfig = {
+    item: AppHeaderCatalogDropdownItem;
+    panel: React.ComponentType<{
+        tabIndex?: number;
+    }>;
+};
+export declare const NAV_SECTIONS: NavSectionConfig[];

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/consts.js

@@ -0,0 +1,48 @@
+import { BriefcaseIcon, DiamondIcon, ProfessionalCertificateIcon, ProgrammingTeamChatIcon, StudyBookIcon } from '@codecademy/gamut-icons';
+import { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel } from './NavPanels';
+export const NAV_SECTIONS = [{
+  item: {
+    icon: StudyBookIcon,
+    text: 'Course topics',
+    id: 'course-topics',
+    type: 'catalog-dropdown',
+    trackingTarget: 'topnav_catalog_course_topics'
+  },
+  panel: CourseTopicsPanel
+}, {
+  item: {
+    icon: DiamondIcon,
+    text: 'Skill paths',
+    id: 'skill-paths',
+    type: 'catalog-dropdown',
+    trackingTarget: 'topnav_catalog_skill_paths'
+  },
+  panel: SkillPathsPanel
+}, {
+  item: {
+    icon: BriefcaseIcon,
+    text: 'Career paths',
+    id: 'career-paths',
+    type: 'catalog-dropdown',
+    trackingTarget: 'topnav_catalog_career_paths'
+  },
+  panel: CareerPathsPanel
+}, {
+  item: {
+    icon: ProfessionalCertificateIcon,
+    text: 'Certification paths',
+    id: 'certification-paths',
+    type: 'catalog-dropdown',
+    trackingTarget: 'topnav_catalog_certification_paths'
+  },
+  panel: CertificationPathsPanel
+}, {
+  item: {
+    icon: ProgrammingTeamChatIcon,
+    text: 'Live learning',
+    id: 'live-learning',
+    type: 'catalog-dropdown',
+    trackingTarget: 'topnav_catalog_live_learning'
+  },
+  panel: LiveLearningPanel
+}];

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

@@ -0,0 +1,11 @@
+import React, { RefObject } from 'react';
+import { AppHeaderCatalogDropdownItem } from '../../shared';
+export type AppHeaderCatalogSectionVariantProps = {
+    item: AppHeaderCatalogDropdownItem;
+    ref?: RefObject<HTMLUListElement>;
+    role?: string;
+    id?: string;
+    keyDownEvents?: (event: React.KeyboardEvent) => void;
+    isOpen?: boolean;
+};
+export declare const AppHeaderCatalogSectionVariant: React.ForwardRefExoticComponent<Omit<AppHeaderCatalogSectionVariantProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,100 @@
+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 { Box, GridBox } from '@codecademy/gamut';
+import { theme } from '@codecademy/gamut-styles';
+import React, { useEffect, useState } from 'react';
+import { NAV_SECTIONS } from './consts';
+import NavSection from './NavSection';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledBox = /*#__PURE__*/_styled(Box, {
+  target: "emcbpl73",
+  label: "StyledBox"
+})("width:calc(100vw - 11rem);max-width:calc(1440px - 11rem);border:1px solid ", ({
+  theme
+}) => theme.colors['border-tertiary'], ";border-radius:16px;background-color:", ({
+  theme
+}) => theme.colors['gray-100'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjZCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgR3JpZEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWZPYmplY3QsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MVUxpc3RFbGVtZW50PjtcbiAgcm9sZT86IHN0cmluZztcbiAgaWQ/OiBzdHJpbmc7XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmNvbnN0IE1hcmtldGluZ0Jhbm5lckJveCA9IHN0eWxlZChCb3gpYFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRQcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIDxNYXJrZXRpbmdCYW5uZXJCb3hcbiAgICAgICAgICBoZWlnaHQ9XCI0MHB4XCJcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnMubmF2eX1cbiAgICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgICBteD17OH1cbiAgICAgICAgICBtdD17OH1cbiAgICAgICAgICBweD17MjR9XG4gICAgICAgICAgcHk9ezh9XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgICA+XG4gICAgICAgICAgaW0gYSBtYXJrZXRpbmcgYmFubmVyXG4gICAgICAgIDwvTWFya2V0aW5nQmFubmVyQm94PlxuXG4gICAgICAgIDxTdHlsZWRHcmlkQm94IHJlZj17cmVmfSBvbktleURvd249e2tleURvd25FdmVudHN9PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */"));
+const StyledGridBox = /*#__PURE__*/_styled(GridBox, {
+  target: "emcbpl72",
+  label: "StyledGridBox"
+})(process.env.NODE_ENV === "production" ? {
+  name: "29co2b",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr"
+} : {
+  name: "29co2b",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQnFDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgR3JpZEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWZPYmplY3QsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MVUxpc3RFbGVtZW50PjtcbiAgcm9sZT86IHN0cmluZztcbiAgaWQ/OiBzdHJpbmc7XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmNvbnN0IE1hcmtldGluZ0Jhbm5lckJveCA9IHN0eWxlZChCb3gpYFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRQcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIDxNYXJrZXRpbmdCYW5uZXJCb3hcbiAgICAgICAgICBoZWlnaHQ9XCI0MHB4XCJcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnMubmF2eX1cbiAgICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgICBteD17OH1cbiAgICAgICAgICBtdD17OH1cbiAgICAgICAgICBweD17MjR9XG4gICAgICAgICAgcHk9ezh9XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgICA+XG4gICAgICAgICAgaW0gYSBtYXJrZXRpbmcgYmFubmVyXG4gICAgICAgIDwvTWFya2V0aW5nQmFubmVyQm94PlxuXG4gICAgICAgIDxTdHlsZWRHcmlkQm94IHJlZj17cmVmfSBvbktleURvd249e2tleURvd25FdmVudHN9PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const GradientBackground = /*#__PURE__*/_styled(Box, {
+  target: "emcbpl71",
+  label: "GradientBackground"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )"
+} : {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ3NDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgR3JpZEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWZPYmplY3QsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MVUxpc3RFbGVtZW50PjtcbiAgcm9sZT86IHN0cmluZztcbiAgaWQ/OiBzdHJpbmc7XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmNvbnN0IE1hcmtldGluZ0Jhbm5lckJveCA9IHN0eWxlZChCb3gpYFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRQcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIDxNYXJrZXRpbmdCYW5uZXJCb3hcbiAgICAgICAgICBoZWlnaHQ9XCI0MHB4XCJcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnMubmF2eX1cbiAgICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgICBteD17OH1cbiAgICAgICAgICBtdD17OH1cbiAgICAgICAgICBweD17MjR9XG4gICAgICAgICAgcHk9ezh9XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgICA+XG4gICAgICAgICAgaW0gYSBtYXJrZXRpbmcgYmFubmVyXG4gICAgICAgIDwvTWFya2V0aW5nQmFubmVyQm94PlxuXG4gICAgICAgIDxTdHlsZWRHcmlkQm94IHJlZj17cmVmfSBvbktleURvd249e2tleURvd25FdmVudHN9PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const MarketingBannerBox = /*#__PURE__*/_styled(Box, {
+  target: "emcbpl70",
+  label: "MarketingBannerBox"
+})("border:1px solid ", ({
+  theme
+}) => theme.colors['border-tertiary'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Q3NDIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgR3JpZEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWZPYmplY3QsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0gfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTkFWX1NFQ1RJT05TIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50UHJvcHMgPSB7XG4gIGl0ZW06IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW07XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MVUxpc3RFbGVtZW50PjtcbiAgcm9sZT86IHN0cmluZztcbiAgaWQ/OiBzdHJpbmc7XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIGlzT3Blbj86IGJvb2xlYW47XG59O1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmNvbnN0IE1hcmtldGluZ0Jhbm5lckJveCA9IHN0eWxlZChCb3gpYFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudCA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxEaXZFbGVtZW50LFxuICBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRQcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIDxNYXJrZXRpbmdCYW5uZXJCb3hcbiAgICAgICAgICBoZWlnaHQ9XCI0MHB4XCJcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnMubmF2eX1cbiAgICAgICAgICBjb2xvcj1cIndoaXRlXCJcbiAgICAgICAgICBteD17OH1cbiAgICAgICAgICBtdD17OH1cbiAgICAgICAgICBweD17MjR9XG4gICAgICAgICAgcHk9ezh9XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgICA+XG4gICAgICAgICAgaW0gYSBtYXJrZXRpbmcgYmFubmVyXG4gICAgICAgIDwvTWFya2V0aW5nQmFubmVyQm94PlxuXG4gICAgICAgIDxTdHlsZWRHcmlkQm94IHJlZj17cmVmfSBvbktleURvd249e2tleURvd25FdmVudHN9PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */"));
+export const AppHeaderCatalogSectionVariant = /*#__PURE__*/React.forwardRef(({
+  isOpen,
+  keyDownEvents
+}, ref) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const tabIndex = isOpen ? 0 : -1;
+  useEffect(() => {
+    if (isOpen) {
+      setActiveTab(0);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledBox, {
+      children: [/*#__PURE__*/_jsx(MarketingBannerBox, {
+        height: "40px",
+        background: theme.colors.navy,
+        color: "white",
+        mx: 8,
+        mt: 8,
+        px: 24,
+        py: 8,
+        borderRadius: "lg",
+        children: "im a marketing banner"
+      }), /*#__PURE__*/_jsx(StyledGridBox, {
+        ref: ref,
+        onKeyDown: keyDownEvents,
+        children: NAV_SECTIONS.map((section, index) => {
+          const {
+            item,
+            panel: Panel
+          } = section;
+          return /*#__PURE__*/_jsx(NavSection, {
+            activeTab: activeTab,
+            setActiveTab: setActiveTab,
+            icon: item.icon,
+            text: item.text,
+            index: index,
+            item: item,
+            tabIndex: tabIndex,
+            children: /*#__PURE__*/_jsx(Panel, {
+              tabIndex: tabIndex
+            })
+          }, item.id);
+        })
+      })]
+    }), /*#__PURE__*/_jsx(GradientBackground, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0",
+      zIndex: -1,
+      display: isOpen ? 'block' : 'none'
+    })]
+  });
+});

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

@@ -0,0 +1,10 @@
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+type AppHeaderDietCardProps = {
+    title: string;
+    hours: number;
+    icon: React.ReactNode;
+    difficulty: CourseDifficulty;
+    tabIndex: number;
+};
+export declare const AppHeaderDietCard: ({ title, hours, icon, difficulty, }: AppHeaderDietCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,82 @@
+import _styled from "@emotion/styled/base";
+import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { css } from '@codecademy/gamut-styles';
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1d52gk01",
+  label: "StyledCard"
+})("&:hover{border-color:", ({
+  theme
+}) => theme.colors.black, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IENoZWNrZXJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IENvdXJzZURpZmZpY3VsdHkgfSBmcm9tICcuLi8uLi8uLi9Db250ZW50R3JvdXBCYXNlQ2FyZC90eXBlcyc7XG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQoQ2FyZClgXG4gICY6aG92ZXIge1xuICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMuYmxhY2t9O1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG50eXBlIEFwcEhlYWRlckRpZXRDYXJkUHJvcHMgPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGhvdXJzOiBudW1iZXI7XG4gIGljb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGlmZmljdWx0eTogQ291cnNlRGlmZmljdWx0eTtcbiAgdGFiSW5kZXg6IG51bWJlcjsgLy8gdG8gYmUgdXNlZCB3aGVuIHdlIGFkZCBsaW5rc1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRpZXRDYXJkID0gKHtcbiAgdGl0bGUsXG4gIGhvdXJzLFxuICBpY29uLFxuICBkaWZmaWN1bHR5LFxufTogQXBwSGVhZGVyRGlldENhcmRQcm9wcykgPT4ge1xuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDYXJkXG4gICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICBtaW5IZWlnaHQ9ezEyMH1cbiAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIlxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgIHB4PXsxMn1cbiAgICAgIHB5PXs4fVxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgID5cbiAgICAgIDxUZXh0IGFzPVwiaDNcIiB2YXJpYW50PVwidGl0bGUteHNcIj5cbiAgICAgICAge3RpdGxlfVxuICAgICAgPC9UZXh0PlxuXG4gICAgICA8Qm94PlxuICAgICAgICA8Qm94IHB5PXs0fSBoZWlnaHQ9ezB9IHBvc2l0aW9uPVwicmVsYXRpdmVcIiBhcmlhLWhpZGRlbj5cbiAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgICA8RmxleEJveCBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIj5cbiAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXs4fT5cbiAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICBjb2xvcj1cInRleHQtc2Vjb25kYXJ5XCJcbiAgICAgICAgICAgICAgcGw9ezh9XG4gICAgICAgICAgICAgIHdoaXRlU3BhY2U9XCJub3dyYXBcIlxuICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgIDxUZXh0IGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIj5cbiAgICAgICAgICAgIDxiPntob3Vyc308L2I+IGhvdXJzXG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICA8L0JveD5cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */"));
+const DottedLine = /*#__PURE__*/_styled(CheckerDense, {
+  target: "e1d52gk00",
+  label: "DottedLine"
+})(css({
+  height: '1px',
+  display: 'flex',
+  position: 'absolute',
+  marginTop: '-1px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFtQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IENoZWNrZXJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IENvdXJzZURpZmZpY3VsdHkgfSBmcm9tICcuLi8uLi8uLi9Db250ZW50R3JvdXBCYXNlQ2FyZC90eXBlcyc7XG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQoQ2FyZClgXG4gICY6aG92ZXIge1xuICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMuYmxhY2t9O1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG50eXBlIEFwcEhlYWRlckRpZXRDYXJkUHJvcHMgPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIGhvdXJzOiBudW1iZXI7XG4gIGljb246IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGlmZmljdWx0eTogQ291cnNlRGlmZmljdWx0eTtcbiAgdGFiSW5kZXg6IG51bWJlcjsgLy8gdG8gYmUgdXNlZCB3aGVuIHdlIGFkZCBsaW5rc1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRpZXRDYXJkID0gKHtcbiAgdGl0bGUsXG4gIGhvdXJzLFxuICBpY29uLFxuICBkaWZmaWN1bHR5LFxufTogQXBwSGVhZGVyRGlldENhcmRQcm9wcykgPT4ge1xuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDYXJkXG4gICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICBib3JkZXJDb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiXG4gICAgICBtaW5IZWlnaHQ9ezEyMH1cbiAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgIGZsZXhEaXJlY3Rpb249XCJjb2x1bW5cIlxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJzcGFjZS1iZXR3ZWVuXCJcbiAgICAgIHB4PXsxMn1cbiAgICAgIHB5PXs4fVxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgID5cbiAgICAgIDxUZXh0IGFzPVwiaDNcIiB2YXJpYW50PVwidGl0bGUteHNcIj5cbiAgICAgICAge3RpdGxlfVxuICAgICAgPC9UZXh0PlxuXG4gICAgICA8Qm94PlxuICAgICAgICA8Qm94IHB5PXs0fSBoZWlnaHQ9ezB9IHBvc2l0aW9uPVwicmVsYXRpdmVcIiBhcmlhLWhpZGRlbj5cbiAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgICA8RmxleEJveCBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIj5cbiAgICAgICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXs4fT5cbiAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICBjb2xvcj1cInRleHQtc2Vjb25kYXJ5XCJcbiAgICAgICAgICAgICAgcGw9ezh9XG4gICAgICAgICAgICAgIHdoaXRlU3BhY2U9XCJub3dyYXBcIlxuICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICAgIDxUZXh0IGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIj5cbiAgICAgICAgICAgIDxiPntob3Vyc308L2I+IGhvdXJzXG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICA8L0JveD5cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */");
+export const AppHeaderDietCard = ({
+  title,
+  hours,
+  icon,
+  difficulty
+}) => {
+  const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;
+  return /*#__PURE__*/_jsxs(StyledCard, {
+    borderRadius: "md",
+    borderColor: "border-tertiary",
+    minHeight: 120,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    px: 12,
+    py: 8,
+    isInteractive: true,
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h3",
+      variant: "title-xs",
+      children: title
+    }), /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        py: 4,
+        height: 0,
+        position: "relative",
+        "aria-hidden": true,
+        children: /*#__PURE__*/_jsx(DottedLine, {
+          color: "border-tertiary"
+        })
+      }), /*#__PURE__*/_jsxs(FlexBox, {
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          gap: 8,
+          children: [icon, /*#__PURE__*/_jsx(Text, {
+            screenreader: true,
+            children: `${difficulty}${isBeginnerContainer ? ' Friendly' : ''}.`
+          }), /*#__PURE__*/_jsxs(Text, {
+            variant: "p-small",
+            color: "text-secondary",
+            pl: 8,
+            whiteSpace: "nowrap",
+            "data-testid": "card-difficulty",
+            "aria-hidden": true,
+            children: [/*#__PURE__*/_jsx("b", {
+              children: difficulty
+            }), isBeginnerContainer && /*#__PURE__*/_jsx(_Fragment, {
+              children: " Friendly"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          color: "text-secondary",
+          children: [/*#__PURE__*/_jsx("b", {
+            children: hours
+          }), " hours"]
+        })]
+      })]
+    })]
+  });
+};

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

@@ -3,6 +3,7 @@ import { AnchorRefItemType } from '../../shared';
 export interface AppHeaderDropdownContextType {
     firstItemRef?: AnchorRefItemType;
     setFirstItemRef: Dispatch<SetStateAction<AnchorRefItemType>> | undefined;
+    handleClose: () => void;
 }
 export declare const AppHeaderDropdownContext: React.Context<AppHeaderDropdownContextType>;
 export declare const AppHeaderDropdownProvider: React.FC<{

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

@@ -1,10 +1,12 @@
 import { Box } from '@codecademy/gamut';
+import noop from 'lodash/fp/noop';
 import React, { createContext, useContext, useState } from 'react';
 import { useOnEscHandler } from '../../shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const AppHeaderDropdownContext = /*#__PURE__*/createContext({
   firstItemRef: undefined,
-  setFirstItemRef: undefined
+  setFirstItemRef: undefined,
+  handleClose: () => noop
 });
 export const AppHeaderDropdownProvider = ({
   children,
@@ -15,7 +17,8 @@ export const AppHeaderDropdownProvider = ({
   return /*#__PURE__*/_jsx(AppHeaderDropdownContext.Provider, {
     value: {
       firstItemRef,
-      setFirstItemRef
+      setFirstItemRef,
+      handleClose
     },
     children: /*#__PURE__*/_jsx(Box, {
       onKeyDown: onKeyDown,

package/dist/AppHeaderMobile/AppHeaderCatalogSectonVariantMobile/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AppHeaderCatalogSectionProps } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogSection';
+declare const AppHeaderCatalogSectionVariantMobile: React.ForwardRefExoticComponent<Omit<AppHeaderCatalogSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default AppHeaderCatalogSectionVariantMobile;

package/dist/AppHeaderMobile/AppHeaderCatalogSectonVariantMobile/index.js

@@ -0,0 +1,63 @@
+import _styled from "@emotion/styled/base";
+import { Box, FlexBox } from '@codecademy/gamut';
+import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
+import React, { useState } from 'react';
+import { NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/consts';
+import { useGlobalHeaderItemClick } from '../../GlobalHeader/context';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledButton = /*#__PURE__*/_styled("button", {
+  target: "e18pnkm10",
+  label: "StyledButton"
+})("padding:16px;border:1px solid ", ({
+  theme
+}) => theme.colors['border-tertiary'], ";border-radius:8px;background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
+  theme
+}) => theme.colors.text, ";text-align:left;width:264px;height:60px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyQ2F0YWxvZ1NlY3RvblZhcmlhbnRNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNxRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlckNhdGFsb2dTZWN0b25WYXJpYW50TW9iaWxlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEFycm93Q2hldnJvblJpZ2h0SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25Qcm9wcyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbic7XG5pbXBvcnQgeyBOQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50L2NvbnN0cyc7XG5pbXBvcnQgeyB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSBmcm9tICcuLi8uLi9HbG9iYWxIZWFkZXIvY29udGV4dCc7XG5cbmNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZC5idXR0b248eyBpbmRleDogbnVtYmVyIH0+YFxuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxOHB4O1xuICBmb250LXdlaWdodDogNDAwO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIHdpZHRoOiAyNjRweDtcbiAgaGVpZ2h0OiA2MHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi1ib3R0b206IDE2cHg7XG5gO1xuXG5jb25zdCBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRNb2JpbGUgPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25Qcm9wc1xuPigoeyBrZXlEb3duRXZlbnRzIH0sIHJlZikgPT4ge1xuICBjb25zdCBbYWN0aXZlTWVudSwgc2V0QWN0aXZlTWVudV0gPSB1c2VTdGF0ZTxudW1iZXIgfCBudWxsPihudWxsKTtcbiAgY29uc3QgW2FjdGl2ZVBhbmVsLCBzZXRBY3RpdmVQYW5lbF0gPSB1c2VTdGF0ZTxSZWFjdC5SZWFjdE5vZGUgfCBudWxsPihudWxsKTtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuXG4gIHJldHVybiAoXG4gICAgPEJveFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBvbktleURvd249e2tleURvd25FdmVudHN9XG4gICAgICBtbD17eyBfOiAxNiwgeHM6IDMyLCBzbTogNjQsIG1kOiA0OCB9fVxuICAgID5cbiAgICAgIHthY3RpdmVNZW51ID09PSBudWxsID8gKFxuICAgICAgICA8PlxuICAgICAgICAgIHtOQVZfU0VDVElPTlMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgICBpdGVtOiB7IGljb246IEljb24sIHRleHQsIGlkIH0sXG4gICAgICAgICAgICAgIHBhbmVsOiBQYW5lbCxcbiAgICAgICAgICAgIH0gPSBzZWN0aW9uO1xuICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgPFN0eWxlZEJ1dHRvblxuICAgICAgICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgc2VjdGlvbi5pdGVtKTtcbiAgICAgICAgICAgICAgICAgIHNldEFjdGl2ZU1lbnUoaW5kZXgpO1xuICAgICAgICAgICAgICAgICAgc2V0QWN0aXZlUGFuZWwoPFBhbmVsIC8+KTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtgbmF2LXNlY3Rpb24tJHtpZH1gfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPEZsZXhCb3ggZ2FwPXs4fSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICAgICAgICAgIHt0ZXh0fVxuICAgICAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIC8+XG4gICAgICAgICAgICAgIDwvU3R5bGVkQnV0dG9uPlxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC8+XG4gICAgICApIDogKFxuICAgICAgICA8PnthY3RpdmVQYW5lbH08Lz5cbiAgICAgICl9XG4gICAgPC9Cb3g+XG4gICk7XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25WYXJpYW50TW9iaWxlO1xuIl19 */"));
+const AppHeaderCatalogSectionVariantMobile = /*#__PURE__*/React.forwardRef(({
+  keyDownEvents
+}, ref) => {
+  const [activeMenu, setActiveMenu] = useState(null);
+  const [activePanel, setActivePanel] = useState(null);
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    onKeyDown: keyDownEvents,
+    ml: {
+      _: 16,
+      xs: 32,
+      sm: 64,
+      md: 48
+    },
+    children: activeMenu === null ? /*#__PURE__*/_jsx(_Fragment, {
+      children: NAV_SECTIONS.map((section, index) => {
+        const {
+          item: {
+            icon: Icon,
+            text,
+            id
+          },
+          panel: Panel
+        } = section;
+        return /*#__PURE__*/_jsxs(StyledButton, {
+          index: index,
+          onClick: event => {
+            globalHeaderItemClick(event, section.item);
+            setActiveMenu(index);
+            setActivePanel(/*#__PURE__*/_jsx(Panel, {}));
+          },
+          "data-testid": `nav-section-${id}`,
+          children: [/*#__PURE__*/_jsxs(FlexBox, {
+            gap: 8,
+            alignItems: "center",
+            children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
+          }), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {})]
+        });
+      })
+    }) : /*#__PURE__*/_jsx(_Fragment, {
+      children: activePanel
+    })
+  });
+});
+export default AppHeaderCatalogSectionVariantMobile;

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js

@@ -1,13 +1,18 @@
 import { ContentContainer, FillButton, Text, TextButton } from '@codecademy/gamut';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import * as React from 'react';
 import { AppHeaderLink } from '../../AppHeader/AppHeaderElements/AppHeaderLink';
 import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
-import { login, signUp } from '../../GlobalHeader/GlobalHeaderItems';
+import { BlpHeroExperimentContext } from '../../GlobalHeader';
+import { login, requestTeamsDemo, signUp, signUpTextButton } from '../../GlobalHeader/GlobalHeaderItems';
 import { AppHeaderSubNavMobile } from '../AppHeaderSubMenuMobile';
 import { MobileUlWrapper } from '../AppHeaderSubMenuMobile/elements';
 import { AppHeaderSubMenuRow } from '../AppHeaderSubMenuTarget';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const isBusinessPageExperiment = isBlpHeroExperimentVariant => {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === '/business' && isBlpHeroExperimentVariant;
+};
 export const AppHeaderMainMenuMobile = ({
   action,
   items,
@@ -16,6 +21,7 @@ export const AppHeaderMainMenuMobile = ({
   handleCloseMainMenu
 }) => {
   const [subMenuItem, setSubMenuItem] = useState();
+  const isBlpHeroExperimentVariant = useContext(BlpHeroExperimentContext);
   const openSubMenu = (event, item) => {
     action(event, item);
     setSubMenuItem(item);
@@ -86,7 +92,7 @@ export const AppHeaderMainMenuMobile = ({
     tabIndex: -1,
     children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
       as: "ul",
-      children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsxs("div", {
+      children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsx("div", {
         style: {
           display: 'flex',
           alignItems: 'baseline',
@@ -94,17 +100,31 @@ export const AppHeaderMainMenuMobile = ({
           paddingTop: '16px',
           borderTop: '1px solid var(--border-tertiary)'
         },
-        children: [/*#__PURE__*/_jsx(FillButton, {
-          "data-testid": signUp.dataTestId,
-          href: signUp.href,
-          onClick: event => action(event, signUp),
-          children: signUp.text
-        }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
-          "data-testid": login.dataTestId,
-          href: login.href,
-          onClick: event => action(event, login),
-          children: login.text
-        }, login.id)]
+        children: isBusinessPageExperiment(isBlpHeroExperimentVariant) ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TextButton, {
+            "data-testid": signUpTextButton.dataTestId,
+            href: signUpTextButton.href,
+            onClick: event => action(event, signUpTextButton),
+            children: signUpTextButton.text
+          }, signUpTextButton.id), /*#__PURE__*/_jsx(FillButton, {
+            "data-testid": requestTeamsDemo.dataTestId,
+            href: requestTeamsDemo.href,
+            onClick: event => action(event, requestTeamsDemo),
+            children: requestTeamsDemo.text
+          }, requestTeamsDemo.id)]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(FillButton, {
+            "data-testid": signUp.dataTestId,
+            href: signUp.href,
+            onClick: event => action(event, signUp),
+            children: signUp.text
+          }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
+            "data-testid": login.dataTestId,
+            href: login.href,
+            onClick: event => action(event, login),
+            children: login.text
+          }, login.id)]
+        })
       })]
     })
   });