@codecademy/brand 2.8.0-alpha.ee8d477ea2.0 → 2.9.0-alpha.1b05c8bc21.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/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/AppHeaderSubMenuMobile/index.js

@@ -2,13 +2,15 @@ import _styled from "@emotion/styled/base";
 import { Anchor, Menu, Text } from '@codecademy/gamut';
 import { ArrowChevronLeftIcon } from '@codecademy/gamut-icons';
 import { css } from '@codecademy/gamut-styles';
-import { useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import * as React from 'react';
 import { AppHeaderCatalogSection } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogSection';
 import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
 import { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';
 import { AppHeaderResourcesSection } from '../../AppHeader/AppHeaderElements/AppHeaderResourcesSection';
+import { GlobalNavRedesignContext } from '../../GlobalHeader';
 import { getHeaderResourcesList } from '../../lib/resourcesList';
+import AppHeaderCatalogSectionVariantMobile from '../AppHeaderCatalogSectonVariantMobile';
 import { MobileSubMenuWrapper, MobileUlWrapper } from './elements';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
@@ -20,11 +22,15 @@ const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
   my: 24,
   padding: 0,
   width: 'calc(100% - 64px)'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBNZW51LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uTGVmdEljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dEcm9wZG93bic7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvbiB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRyb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlckxpbmtTZWN0aW9ucyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlzdEl0ZW0gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlzdEl0ZW0nO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlclJlc291cmNlc1NlY3Rpb24gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbic7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJDbGlja0hhbmRsZXIsXG4gIEFwcEhlYWRlckRyb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvc2hhcmVkJztcbmltcG9ydCB7IGdldEhlYWRlclJlc291cmNlc0xpc3QgfSBmcm9tICcuLi8uLi9saWIvcmVzb3VyY2VzTGlzdCc7XG5pbXBvcnQgeyBNb2JpbGVTdWJNZW51V3JhcHBlciwgTW9iaWxlVWxXcmFwcGVyIH0gZnJvbSAnLi9lbGVtZW50cyc7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlclN1Yk1lbnVNb2JpbGVQcm9wcyA9IChcbiAgfCBBcHBIZWFkZXJEcm9wZG93blByb3BzXG4gIHwgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duUHJvcHNcbiAgfCBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHNcbikgJiB7XG4gIGhhbmRsZUNsb3NlU3ViTWVudTogKCkgPT4gdm9pZDtcbiAgaGFuZGxlQ2xvc2VNYWluTWVudTogKCkgPT4gdm9pZDtcbn07XG5cbnR5cGUgQXBwSGVhZGVyU2VjdGlvbkl0ZW0gPVxuICB8IEFwcEhlYWRlckRyb3Bkb3duSXRlbVxuICB8IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW1cbiAgfCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG5cbmNvbnN0IFN0eWxlZEFuY2hvciA9IHN0eWxlZChBbmNob3IpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6IGBjZW50ZXJgLFxuICAgIGRpc3BsYXk6IGBmbGV4YCxcbiAgICBteTogMjQsXG4gICAgcGFkZGluZzogMCxcbiAgICB3aWR0aDogJ2NhbGMoMTAwJSAtIDY0cHgpJyxcbiAgfSlcbik7XG5cbmNvbnN0IHJlbmRlckhlYWRlclNlY3Rpb24gPSAoXG4gIGl0ZW06IEFwcEhlYWRlclNlY3Rpb25JdGVtLFxuICBhY3Rpb246IEFwcEhlYWRlckNsaWNrSGFuZGxlcixcbiAgaGFuZGxlQ2xvc2VNYWluTWVudTogKCkgPT4gdm9pZFxuKSA9PiB7XG4gIHN3aXRjaCAoaXRlbS50eXBlKSB7XG4gICAgY2FzZSAnY2F0YWxvZy1kcm9wZG93bic6XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8QXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb25cbiAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZU1haW5NZW51fVxuICAgICAgICAvPlxuICAgICAgKTtcbiAgICBjYXNlICdyZXNvdXJjZXMtZHJvcGRvd24nOlxuICAgICAgcmV0dXJuIChcbiAgICAgICAgPEFwcEhlYWRlclJlc291cmNlc1NlY3Rpb25cbiAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2VNYWluTWVudX1cbiAgICAgICAgICByZXNvdXJjZXM9e2dldEhlYWRlclJlc291cmNlc0xpc3QoKX1cbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiA8QXBwSGVhZGVyTGlua1NlY3Rpb25zIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBtb2JpbGUgLz47XG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTdWJOYXZNb2JpbGU6IFJlYWN0LkZDPEFwcEhlYWRlclN1Yk1lbnVNb2JpbGVQcm9wcz4gPSAoe1xuICBhY3Rpb24sXG4gIGhhbmRsZUNsb3NlU3ViTWVudSxcbiAgaGFuZGxlQ2xvc2VNYWluTWVudSxcbiAgaXRlbSxcbn0pID0+IHtcbiAgY29uc3QgbWFpblVsV3JhcHBlciA9IHVzZVJlZjxIVE1MVUxpc3RFbGVtZW50PihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChtYWluVWxXcmFwcGVyPy5jdXJyZW50KSB7XG4gICAgICBtYWluVWxXcmFwcGVyLmN1cnJlbnQuZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBpc1Byb2ZpbGVNZW51ID0gaXRlbS50eXBlID09PSAncHJvZmlsZS1kcm9wZG93bic7XG5cbiAgcmV0dXJuIChcbiAgICA8TW9iaWxlVWxXcmFwcGVyIHJlZj17bWFpblVsV3JhcHBlcn0gdGFiSW5kZXg9ey0xfT5cbiAgICAgIDxBcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgPFN0eWxlZEFuY2hvclxuICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgICBhcz1cImJ1dHRvblwiXG4gICAgICAgICAgbWw9e3sgXzogMTYsIHhzOiAzMiwgc206IDY0LCBtZDogNDggfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxBcnJvd0NoZXZyb25MZWZ0SWNvbiBzaXplPXsxMn0gYXJpYS1oaWRkZW4gLz5cbiAgICAgICAgICA8VGV4dCBmb250U2l6ZT17MTZ9IHBsPXs4fT5cbiAgICAgICAgICAgIEJhY2sgdG8gbWFpbiBuYXZpZ2F0aW9uXG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICA8L1N0eWxlZEFuY2hvcj5cbiAgICAgIDwvQXBwSGVhZGVyTGlzdEl0ZW0+XG4gICAgICA8TW9iaWxlU3ViTWVudVdyYXBwZXJcbiAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgaXNNZW51Um9sZT17aXNQcm9maWxlTWVudX1cbiAgICAgID5cbiAgICAgICAgPFRleHRcbiAgICAgICAgICBhcz1cImgxXCJcbiAgICAgICAgICBmb250U2l6ZT17MjJ9XG4gICAgICAgICAgbWI9ezE2fVxuICAgICAgICAgIG1sPXt7IF86IDE2LCB4czogMzIsIHNtOiA2NCwgbWQ6IDQ4IH19XG4gICAgICAgID5cbiAgICAgICAgICB7aXNQcm9maWxlTWVudSA/IGl0ZW0udXNlckRpc3BsYXlOYW1lIDogaXRlbS50ZXh0fVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIDxNZW51IHZhcmlhbnQ9XCJmaXhlZFwiIG14PXs4fSB3aWR0aD1cImNhbGMoMTAwJSAtIDE2cHgpXCI+XG4gICAgICAgICAge3JlbmRlckhlYWRlclNlY3Rpb24oaXRlbSwgYWN0aW9uLCBoYW5kbGVDbG9zZU1haW5NZW51KX1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Nb2JpbGVTdWJNZW51V3JhcHBlcj5cbiAgICA8L01vYmlsZVVsV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
-const renderHeaderSection = (item, action, handleCloseMainMenu) => {
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBNZW51LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uTGVmdEljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ29udGV4dCwgdXNlRWZmZWN0LCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dEcm9wZG93bic7XG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nU2VjdGlvbiB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRyb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlckxpbmtTZWN0aW9ucyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlzdEl0ZW0gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlzdEl0ZW0nO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlclJlc291cmNlc1NlY3Rpb24gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzU2VjdGlvbic7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJDbGlja0hhbmRsZXIsXG4gIEFwcEhlYWRlckRyb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvc2hhcmVkJztcbmltcG9ydCB7IEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCB9IGZyb20gJy4uLy4uL0dsb2JhbEhlYWRlcic7XG5pbXBvcnQgeyBnZXRIZWFkZXJSZXNvdXJjZXNMaXN0IH0gZnJvbSAnLi4vLi4vbGliL3Jlc291cmNlc0xpc3QnO1xuaW1wb3J0IEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uVmFyaWFudE1vYmlsZSBmcm9tICcuLi9BcHBIZWFkZXJDYXRhbG9nU2VjdG9uVmFyaWFudE1vYmlsZSc7XG5pbXBvcnQgeyBNb2JpbGVTdWJNZW51V3JhcHBlciwgTW9iaWxlVWxXcmFwcGVyIH0gZnJvbSAnLi9lbGVtZW50cyc7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlclN1Yk1lbnVNb2JpbGVQcm9wcyA9IChcbiAgfCBBcHBIZWFkZXJEcm9wZG93blByb3BzXG4gIHwgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duUHJvcHNcbiAgfCBBcHBIZWFkZXJSZXNvdXJjZURyb3Bkb3duUHJvcHNcbikgJiB7XG4gIGhhbmRsZUNsb3NlU3ViTWVudTogKCkgPT4gdm9pZDtcbiAgaGFuZGxlQ2xvc2VNYWluTWVudTogKCkgPT4gdm9pZDtcbn07XG5cbnR5cGUgQXBwSGVhZGVyU2VjdGlvbkl0ZW0gPVxuICB8IEFwcEhlYWRlckRyb3Bkb3duSXRlbVxuICB8IEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW1cbiAgfCBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW07XG5cbmNvbnN0IFN0eWxlZEFuY2hvciA9IHN0eWxlZChBbmNob3IpKFxuICBjc3Moe1xuICAgIGFsaWduSXRlbXM6IGBjZW50ZXJgLFxuICAgIGRpc3BsYXk6IGBmbGV4YCxcbiAgICBteTogMjQsXG4gICAgcGFkZGluZzogMCxcbiAgICB3aWR0aDogJ2NhbGMoMTAwJSAtIDY0cHgpJyxcbiAgfSlcbik7XG5cbmNvbnN0IHJlbmRlckhlYWRlclNlY3Rpb24gPSAoXG4gIGl0ZW06IEFwcEhlYWRlclNlY3Rpb25JdGVtLFxuICBhY3Rpb246IEFwcEhlYWRlckNsaWNrSGFuZGxlcixcbiAgaGFuZGxlQ2xvc2VNYWluTWVudTogKCkgPT4gdm9pZCxcbiAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduOiBib29sZWFuXG4pID0+IHtcbiAgc3dpdGNoIChpdGVtLnR5cGUpIHtcbiAgICBjYXNlICdjYXRhbG9nLWRyb3Bkb3duJzpcbiAgICAgIHJldHVybiBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ24gPyAoXG4gICAgICAgIDxBcHBIZWFkZXJDYXRhbG9nU2VjdGlvblZhcmlhbnRNb2JpbGVcbiAgICAgICAgICBhY3Rpb249e2FjdGlvbn1cbiAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZU1haW5NZW51fVxuICAgICAgICAvPlxuICAgICAgKSA6IChcbiAgICAgICAgPEFwcEhlYWRlckNhdGFsb2dTZWN0aW9uXG4gICAgICAgICAgYWN0aW9uPXthY3Rpb259XG4gICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2VNYWluTWVudX1cbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgY2FzZSAncmVzb3VyY2VzLWRyb3Bkb3duJzpcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBcHBIZWFkZXJSZXNvdXJjZXNTZWN0aW9uXG4gICAgICAgICAgYWN0aW9uPXthY3Rpb259XG4gICAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlTWFpbk1lbnV9XG4gICAgICAgICAgcmVzb3VyY2VzPXtnZXRIZWFkZXJSZXNvdXJjZXNMaXN0KCl9XG4gICAgICAgIC8+XG4gICAgICApO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gPEFwcEhlYWRlckxpbmtTZWN0aW9ucyBhY3Rpb249e2FjdGlvbn0gaXRlbT17aXRlbX0gbW9iaWxlIC8+O1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgQXBwSGVhZGVyU3ViTmF2TW9iaWxlOiBSZWFjdC5GQzxBcHBIZWFkZXJTdWJNZW51TW9iaWxlUHJvcHM+ID0gKHtcbiAgYWN0aW9uLFxuICBoYW5kbGVDbG9zZVN1Yk1lbnUsXG4gIGhhbmRsZUNsb3NlTWFpbk1lbnUsXG4gIGl0ZW0sXG59KSA9PiB7XG4gIGNvbnN0IG1haW5VbFdyYXBwZXIgPSB1c2VSZWY8SFRNTFVMaXN0RWxlbWVudD4obnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobWFpblVsV3JhcHBlcj8uY3VycmVudCkge1xuICAgICAgbWFpblVsV3JhcHBlci5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgaXNQcm9maWxlTWVudSA9IGl0ZW0udHlwZSA9PT0gJ3Byb2ZpbGUtZHJvcGRvd24nO1xuXG4gIGNvbnN0IGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA9IHVzZUNvbnRleHQoR2xvYmFsTmF2UmVkZXNpZ25Db250ZXh0KTtcblxuICByZXR1cm4gKFxuICAgIDxNb2JpbGVVbFdyYXBwZXIgcmVmPXttYWluVWxXcmFwcGVyfSB0YWJJbmRleD17LTF9PlxuICAgICAgPEFwcEhlYWRlckxpc3RJdGVtPlxuICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgb25DbGljaz17aGFuZGxlQ2xvc2VTdWJNZW51fVxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIGFzPVwiYnV0dG9uXCJcbiAgICAgICAgICBtbD17eyBfOiAxNiwgeHM6IDMyLCBzbTogNjQsIG1kOiA0OCB9fVxuICAgICAgICA+XG4gICAgICAgICAgPEFycm93Q2hldnJvbkxlZnRJY29uIHNpemU9ezEyfSBhcmlhLWhpZGRlbiAvPlxuICAgICAgICAgIDxUZXh0IGZvbnRTaXplPXsxNn0gcGw9ezh9PlxuICAgICAgICAgICAgQmFjayB0byBtYWluIG5hdmlnYXRpb25cbiAgICAgICAgICA8L1RleHQ+XG4gICAgICAgIDwvU3R5bGVkQW5jaG9yPlxuICAgICAgPC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgIDxNb2JpbGVTdWJNZW51V3JhcHBlclxuICAgICAgICBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2VTdWJNZW51fVxuICAgICAgICBpc01lbnVSb2xlPXtpc1Byb2ZpbGVNZW51fVxuICAgICAgPlxuICAgICAgICA8VGV4dFxuICAgICAgICAgIGFzPVwiaDFcIlxuICAgICAgICAgIGZvbnRTaXplPXsyMn1cbiAgICAgICAgICBtYj17MTZ9XG4gICAgICAgICAgbWw9e3sgXzogMTYsIHhzOiAzMiwgc206IDY0LCBtZDogNDggfX1cbiAgICAgICAgPlxuICAgICAgICAgIHtpc1Byb2ZpbGVNZW51ID8gaXRlbS51c2VyRGlzcGxheU5hbWUgOiBpdGVtLnRleHR9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICAgPE1lbnUgdmFyaWFudD1cImZpeGVkXCIgbXg9ezh9IHdpZHRoPVwiY2FsYygxMDAlIC0gMTZweClcIj5cbiAgICAgICAgICB7cmVuZGVySGVhZGVyU2VjdGlvbihcbiAgICAgICAgICAgIGl0ZW0sXG4gICAgICAgICAgICBhY3Rpb24sXG4gICAgICAgICAgICBoYW5kbGVDbG9zZU1haW5NZW51LFxuICAgICAgICAgICAgZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduXG4gICAgICAgICAgKX1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Nb2JpbGVTdWJNZW51V3JhcHBlcj5cbiAgICA8L01vYmlsZVVsV3JhcHBlcj5cbiAgKTtcbn07XG4iXX0= */");
+const renderHeaderSection = (item, action, handleCloseMainMenu, displayGlobalNavRedesign) => {
   switch (item.type) {
     case 'catalog-dropdown':
-      return /*#__PURE__*/_jsx(AppHeaderCatalogSection, {
+      return displayGlobalNavRedesign ? /*#__PURE__*/_jsx(AppHeaderCatalogSectionVariantMobile, {
+        action: action,
+        item: item,
+        handleClose: handleCloseMainMenu
+      }) : /*#__PURE__*/_jsx(AppHeaderCatalogSection, {
         action: action,
         item: item,
         handleClose: handleCloseMainMenu
@@ -56,6 +62,7 @@ export const AppHeaderSubNavMobile = ({
     }
   }, []);
   const isProfileMenu = item.type === 'profile-dropdown';
+  const displayGlobalNavRedesign = useContext(GlobalNavRedesignContext);
   return /*#__PURE__*/_jsxs(MobileUlWrapper, {
     ref: mainUlWrapper,
     tabIndex: -1,
@@ -97,7 +104,7 @@ export const AppHeaderSubNavMobile = ({
         variant: "fixed",
         mx: 8,
         width: "calc(100% - 16px)",
-        children: renderHeaderSection(item, action, handleCloseMainMenu)
+        children: renderHeaderSection(item, action, handleCloseMainMenu, displayGlobalNavRedesign)
       })]
     })]
   });

package/dist/GlobalHeader/context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AppHeaderItem } from '../AppHeader/shared';
+export interface GlobalHeaderItemClickContextType {
+    globalHeaderItemClick: (event: React.MouseEvent, item: AppHeaderItem) => void;
+}
+declare const GlobalHeaderItemClickContext: React.Context<GlobalHeaderItemClickContextType>;
+export declare const useGlobalHeaderItemClick: () => GlobalHeaderItemClickContextType;
+export { GlobalHeaderItemClickContext };

package/dist/GlobalHeader/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+const GlobalHeaderItemClickContext = /*#__PURE__*/createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  globalHeaderItemClick: () => {}
+});
+export const useGlobalHeaderItemClick = () => {
+  return useContext(GlobalHeaderItemClickContext);
+};
+export { GlobalHeaderItemClickContext };