@codecademy/brand 4.0.0-alpha.14deb86052.0 → 4.0.0-alpha.4fe773aa87.0

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

@@ -53,4 +53,5 @@ const AppHeaderLink = forwardRef(({ action, item, mobile, isInDropdown, role, ..
 });
 
 //#endregion
-export { AppHeaderLink };
+export { AppHeaderLink };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLink/index.tsx"],"sourcesContent":["import { Anchor, MenuItem } from '@codecademy/gamut';\nimport { MiniOpenIcon } from '@codecademy/gamut-icons';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React, { ComponentProps, forwardRef } from 'react';\n\nimport { AppHeaderAction, AppHeaderLinkItem } from '../../shared';\n\nexport type AppHeaderLinkProps = ComponentProps<typeof Anchor> &\n  AppHeaderAction & {\n    isInDropdown?: boolean;\n    item: AppHeaderLinkItem;\n    mobile?: boolean;\n    onKeyDown?: (event: React.KeyboardEvent) => void;\n    role?: React.AriaRole;\n  };\n\nconst StyledAnchor = styled(Anchor)(\n  css({\n    alignContent: 'center',\n    alignItems: 'center',\n    display: 'flex',\n    fontWeight: 'normal',\n    lineHeight: 'base',\n    minWidth: '0',\n    textAlign: 'left',\n    whiteSpace: 'nowrap',\n  })\n);\n\nconst StyledMenuItem = styled(MenuItem)(\n  css({\n    whiteSpace: 'nowrap',\n  })\n);\n\nconst ResponsiveMiniOpenIcon = styled(MiniOpenIcon)(\n  css({\n    display: { _: 'block' },\n  })\n);\n\nexport const AppHeaderLink = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  AppHeaderLinkProps\n>(({ action, item, mobile, isInDropdown, role, ...props }, ref) => {\n  const Item = isInDropdown ? StyledMenuItem : StyledAnchor;\n  const Icon = item.icon;\n  return (\n    <Item\n      aria-label={item.ariaLabel ? item.ariaLabel : item.text}\n      data-testid={item.dataTestId}\n      href={item.href}\n      // @ts-expect-error - The onClick type for StyledMenuItem is pretty complicated, we are better off expecting an error here for now. Will refactor with new Header work: GM-1025\n      onClick={(event: React.MouseEvent<HTMLElement>) => action(event, item)}\n      target={item.newTab ? 'blank' : undefined}\n      role={role}\n      {...props}\n      ref={ref}\n      icon={Icon && !mobile && isInDropdown ? Icon : undefined}\n      variant={!isInDropdown && 'interface'}\n      py={mobile && !isInDropdown ? 16 : undefined}\n    >\n      {mobile && Icon && <Icon mr={16} mb={4} size={24} aria-hidden />}\n      {item.text}\n      {item.badge}\n      {item.newTab && (\n        <ResponsiveMiniOpenIcon ml={16} mb={4} size={16} aria-hidden />\n      )}\n    </Item>\n  );\n});\n"],"mappings":";;;;;;;;AAiBA,MAAM,eAAe,OAAO,OAAO,CACjC,IAAI;CACF,cAAc;CACd,YAAY;CACZ,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,UAAU;CACV,WAAW;CACX,YAAY;CACb,CAAC,CACH;AAED,MAAM,iBAAiB,OAAO,SAAS,CACrC,IAAI,EACF,YAAY,UACb,CAAC,CACH;AAED,MAAM,yBAAyB,OAAO,aAAa,CACjD,IAAI,EACF,SAAS,EAAE,GAAG,SAAS,EACxB,CAAC,CACH;AAED,MAAa,gBAAgB,YAG1B,EAAE,QAAQ,MAAM,QAAQ,cAAc,MAAM,GAAG,SAAS,QAAQ;CACjE,MAAM,OAAO,eAAe,iBAAiB;CAC7C,MAAM,OAAO,KAAK;AAClB,QACE,qBAAC;EACC,cAAY,KAAK,YAAY,KAAK,YAAY,KAAK;EACnD,eAAa,KAAK;EAClB,MAAM,KAAK;EAEX,UAAU,UAAyC,OAAO,OAAO,KAAK;EACtE,QAAQ,KAAK,SAAS,UAAU;EAC1B;EACN,GAAI;EACC;EACL,MAAM,QAAQ,CAAC,UAAU,eAAe,OAAO;EAC/C,SAAS,CAAC,gBAAgB;EAC1B,IAAI,UAAU,CAAC,eAAe,KAAK;;GAElC,UAAU,QAAQ,oBAAC;IAAK,IAAI;IAAI,IAAI;IAAG,MAAM;IAAI;KAAc;GAC/D,KAAK;GACL,KAAK;GACL,KAAK,UACJ,oBAAC;IAAuB,IAAI;IAAI,IAAI;IAAG,MAAM;IAAI;KAAc;;GAE5D;EAET"}

package/dist/AppHeader/AppHeaderElements/AppHeaderLinkSections/elements.js

@@ -29,4 +29,5 @@ const StyledAppHeaderLink = styled(AppHeaderLink)(css({
 }));
 
 //#endregion
-export { StyledAppHeaderLink };
+export { StyledAppHeaderLink };
+//# sourceMappingURL=elements.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLinkSections/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLinkSections/elements.tsx"],"sourcesContent":["import { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { AppHeaderLink } from '../AppHeaderLink';\n\nexport const StyledAppHeaderLink = styled(AppHeaderLink)(\n  css({\n    display: 'flex',\n    position: 'relative',\n    '@media (max-width: 1199px)': {\n      pl: 0,\n    },\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      width: 'calc(100% - 24px)',\n      left: { _: 0, lg: 12 },\n      borderRadius: 'lg',\n      transition: 'background-color 0.15s ease',\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n    '&:hover::before, &:focus-visible::before': {\n      backgroundColor: theme.colors['navy-100'],\n    },\n    '&:hover, &:focus-visible, &:active': {\n      color: 'hyper-400',\n      borderRadius: 'lg',\n    },\n    '&:active::before': {\n      backgroundColor: theme.colors['navy-200'],\n    },\n  })\n);\n"],"mappings":";;;;;AAKA,MAAa,sBAAsB,OAAO,cAAc,CACtD,IAAI;CACF,SAAS;CACT,UAAU;CACV,8BAA8B,EAC5B,IAAI,GACL;CACD,aAAa;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,MAAM;GAAE,GAAG;GAAG,IAAI;GAAI;EACtB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACT;CACD,4CAA4C,EAC1C,iBAAiB,MAAM,OAAO,aAC/B;CACD,sCAAsC;EACpC,OAAO;EACP,cAAc;EACf;CACD,oBAAoB,EAClB,iBAAiB,MAAM,OAAO,aAC/B;CACF,CAAC,CACH"}

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

@@ -39,4 +39,5 @@ const AppHeaderLinkSections = ({ action, item, isOpen, mobile }) => {
 };
 
 //#endregion
-export { AppHeaderLinkSections };
+export { AppHeaderLinkSections };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLinkSections/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LinkComponent: React.FC<LinkComponentProps>","AppHeaderLinkSections: React.FC<AppHeaderLinkSectionsProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLinkSections/index.tsx"],"sourcesContent":["import { MenuSeparator } from '@codecademy/gamut';\nimport * as React from 'react';\nimport { useEffect, useRef } from 'react';\n\nimport {\n  AppHeaderAction,\n  AppHeaderDropdownItem,\n  AppHeaderLinkItem,\n} from '../../shared';\nimport { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';\nimport { StyledAppHeaderLink } from './elements';\n\nexport type AppHeaderLinkSectionsProps = AppHeaderAction & {\n  item: AppHeaderDropdownItem;\n  isOpen?: boolean;\n  mobile?: boolean;\n};\n\ntype LinkComponentProps = AppHeaderAction & {\n  isOpen?: boolean;\n  role?: string;\n  link: AppHeaderLinkItem;\n  //* This is what renders the MenuSeparator component  for sectioned dropdowns */\n  showLineBreak?: boolean;\n  mobile?: boolean;\n};\n\nconst LinkComponent: React.FC<LinkComponentProps> = ({\n  action,\n  link,\n  mobile,\n  isOpen,\n  role,\n  showLineBreak = false,\n}) => {\n  const { menuItems, setMenuItems } = useAppHeaderMenuContext();\n\n  const ref = useRef<HTMLAnchorElement>(null);\n\n  useEffect(() => {\n    if (setMenuItems && ref?.current) {\n      setMenuItems(menuItems.add(ref.current));\n    }\n    return () => menuItems.clear();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <>\n      {showLineBreak && <MenuSeparator />}\n      <StyledAppHeaderLink\n        ref={ref}\n        action={action}\n        item={link}\n        mobile={mobile}\n        role={role}\n        tabIndex={isOpen || mobile ? 0 : -1}\n        isInDropdown\n      />\n    </>\n  );\n};\n\nexport const AppHeaderLinkSections: React.FC<AppHeaderLinkSectionsProps> = ({\n  action,\n  item,\n  isOpen,\n  mobile,\n}) => {\n  return (\n    <>\n      {item.type === 'profile-dropdown'\n        ? item.popover.map((linkSection: AppHeaderLinkItem[], sectionIndex) =>\n            linkSection.map((link: AppHeaderLinkItem, linkIndex) => (\n              <LinkComponent\n                key={link.id}\n                action={action}\n                link={link}\n                mobile={mobile}\n                isOpen={isOpen}\n                role=\"menuitem\"\n                showLineBreak={sectionIndex !== 0 && linkIndex === 0}\n              />\n            ))\n          )\n        : item.popover.map((link: AppHeaderLinkItem) => (\n            <LinkComponent\n              key={link.id}\n              action={action}\n              link={link}\n              mobile={mobile}\n              isOpen={isOpen}\n            />\n          ))}\n    </>\n  );\n};\n"],"mappings":";;;;;;;AA2BA,MAAMA,iBAA+C,EACnD,QACA,MACA,QACA,QACA,MACA,gBAAgB,YACZ;CACJ,MAAM,EAAE,WAAW,iBAAiB,yBAAyB;CAE7D,MAAM,MAAM,OAA0B,KAAK;AAE3C,iBAAgB;AACd,MAAI,gBAAgB,KAAK,QACvB,cAAa,UAAU,IAAI,IAAI,QAAQ,CAAC;AAE1C,eAAa,UAAU,OAAO;IAE7B,EAAE,CAAC;AAEN,QACE,4CACG,iBAAiB,oBAAC,kBAAgB,EACnC,oBAAC;EACM;EACG;EACR,MAAM;EACE;EACF;EACN,UAAU,UAAU,SAAS,IAAI;EACjC;GACA,IACD;;AAIP,MAAaC,yBAA+D,EAC1E,QACA,MACA,QACA,aACI;AACJ,QACE,0CACG,KAAK,SAAS,qBACX,KAAK,QAAQ,KAAK,aAAkC,iBAClD,YAAY,KAAK,MAAyB,cACxC,oBAAC;EAES;EACF;EACE;EACA;EACR,MAAK;EACL,eAAe,iBAAiB,KAAK,cAAc;IAN9C,KAAK,GAOV,CACF,CACH,GACD,KAAK,QAAQ,KAAK,SAChB,oBAAC;EAES;EACF;EACE;EACA;IAJH,KAAK,GAKV,CACF,GACL"}

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

@@ -20,4 +20,5 @@ const AppHeaderListItem = ({ children, ...props }) => /* @__PURE__ */ jsx(Styled
 });
 
 //#endregion
-export { AppHeaderListItem };
+export { AppHeaderListItem };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderListItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderListItem: React.FC<AppHeaderListItemProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderListItem/index.tsx"],"sourcesContent":["import { Box, BoxProps } from '@codecademy/gamut';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nexport const StyledListItem = styled(Box)(\n  css({\n    display: `flex`,\n    justifyContent: `center`,\n    flexDirection: `column`,\n    position: `relative`,\n\n    '&:first-of-type': {\n      ml: { md: 0 },\n    },\n    '&:last-of-type': {\n      mr: { md: 0 },\n    },\n  })\n);\n\ntype AppHeaderListItemProps = {\n  onBlur?: () => void;\n  onFocus?: () => void;\n} & BoxProps;\n\nexport const AppHeaderListItem: React.FC<AppHeaderListItemProps> = ({\n  children,\n  ...props\n}) => (\n  <StyledListItem as=\"li\" {...props}>\n    {children}\n  </StyledListItem>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,iBAAiB,OAAO,IAAI,CACvC,IAAI;CACF,SAAS;CACT,gBAAgB;CAChB,eAAe;CACf,UAAU;CAEV,mBAAmB,EACjB,IAAI,EAAE,IAAI,GAAG,EACd;CACD,kBAAkB,EAChB,IAAI,EAAE,IAAI,GAAG,EACd;CACF,CAAC,CACH;AAOD,MAAaA,qBAAuD,EAClE,UACA,GAAG,YAEH,oBAAC;CAAe,IAAG;CAAK,GAAI;CACzB;EACc"}

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

@@ -8,4 +8,5 @@ type AppHeaderLogoProps = AppHeaderAction & {
 };
 declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
 //#endregion
-export { AppHeaderLogo, AppHeaderLogoProps };
+export { AppHeaderLogo, AppHeaderLogoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBY,kBAAA,GAAqB;QACzB;;AADI,cAIC,aAJiB,EAIF,KAAA,CAAM,EAJD,CAII,kBAH7B,CAAA"}

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

@@ -48,4 +48,5 @@ const AppHeaderLogo = ({ action, item }) => {
 };
 
 //#endregion
-export { AppHeaderLogo };
+export { AppHeaderLogo };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderLogo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderLogo: React.FC<AppHeaderLogoProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderLogo/index.tsx"],"sourcesContent":["import { Anchor } from '@codecademy/gamut';\nimport React, { MouseEvent, useEffect, useState } from 'react';\n\nimport {\n  LogoCodecademy,\n  LogoCodecademyMini,\n  LogoCodecademyPro,\n  LogoFromSkillsoft,\n} from '../../../Logos';\nimport { AppHeaderAction, AppHeaderLogoItem } from '../../shared';\n\nconst getLogoComponent = (item: AppHeaderLogoItem, showMini: boolean) => {\n  if (item.checkMini && showMini) return LogoCodecademyMini;\n  if (item.enterprise) return LogoFromSkillsoft;\n  return item.pro ? LogoCodecademyPro : LogoCodecademy;\n};\n\nexport type AppHeaderLogoProps = AppHeaderAction & {\n  item: AppHeaderLogoItem;\n};\n\nexport const AppHeaderLogo: React.FC<AppHeaderLogoProps> = ({\n  action,\n  item,\n}) => {\n  const [showMini, setShowMini] = useState(false);\n\n  useEffect(() => {\n    if (!item.checkMini) {\n      return;\n    }\n    const handleResize = () => {\n      const showMiniWithSearch = window.innerWidth < 480;\n      const shouldShowMini =\n        showMiniWithSearch ||\n        (window.innerWidth <= 1285 && window.innerWidth >= 1200);\n      // avoid unnecessary setState actions if val doesnt change\n      if (showMini !== shouldShowMini) {\n        setShowMini(shouldShowMini);\n      }\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    // Remove event listener on cleanup\n    return () => window.removeEventListener('resize', handleResize);\n  }, [item.checkMini, showMini]);\n\n  const LogoComponent = getLogoComponent(item, showMini);\n\n  return (\n    <>\n      {item.removeAnchorLink ? (\n        <LogoComponent\n          color=\"text\"\n          data-testid={item.dataTestId}\n          height={item.enterprise ? 36 : 27}\n          verticalAlign=\"text-bottom\"\n          role=\"img\"\n          {...(item.enterprise\n            ? { 'aria-label': 'Codecademy from Skillsoft' }\n            : {})}\n        />\n      ) : (\n        <Anchor\n          variant=\"interface\"\n          data-testid={item.dataTestId}\n          py={4}\n          onClick={(event: MouseEvent<HTMLAnchorElement>) =>\n            action(event, item)\n          }\n          href={item.href}\n          tabIndex={0}\n        >\n          <LogoComponent\n            color=\"currentColor\"\n            height={item.enterprise ? 36 : 27}\n            verticalAlign=\"text-bottom\"\n          />\n        </Anchor>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,oBAAoB,MAAyB,aAAsB;AACvE,KAAI,KAAK,aAAa,SAAU,QAAO;AACvC,KAAI,KAAK,WAAY,QAAO;AAC5B,QAAO,KAAK,MAAM,oBAAoB;;AAOxC,MAAaA,iBAA+C,EAC1D,QACA,WACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,MAAI,CAAC,KAAK,UACR;EAEF,MAAM,qBAAqB;GAEzB,MAAM,iBADqB,OAAO,aAAa,OAG5C,OAAO,cAAc,QAAQ,OAAO,cAAc;AAErD,OAAI,aAAa,eACf,aAAY,eAAe;;AAG/B,SAAO,iBAAiB,UAAU,aAAa;AAC/C,gBAAc;AAEd,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,CAAC,KAAK,WAAW,SAAS,CAAC;CAE9B,MAAM,gBAAgB,iBAAiB,MAAM,SAAS;AAEtD,QACE,0CACG,KAAK,mBACJ,oBAAC;EACC,OAAM;EACN,eAAa,KAAK;EAClB,QAAQ,KAAK,aAAa,KAAK;EAC/B,eAAc;EACd,MAAK;EACL,GAAK,KAAK,aACN,EAAE,cAAc,6BAA6B,GAC7C,EAAE;GACN,GAEF,oBAAC;EACC,SAAQ;EACR,eAAa,KAAK;EAClB,IAAI;EACJ,UAAU,UACR,OAAO,OAAO,KAAK;EAErB,MAAM,KAAK;EACX,UAAU;YAEV,oBAAC;GACC,OAAM;GACN,QAAQ,KAAK,aAAa,KAAK;GAC/B,eAAc;IACd;GACK,GAEV"}

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

@@ -79,4 +79,5 @@ const AppHeaderMenuProvider = ({ as, children, handleClose }) => {
 const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);
 
 //#endregion
-export { AppHeaderMenuProvider, useAppHeaderMenuContext };
+export { AppHeaderMenuProvider, useAppHeaderMenuContext };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderMenuProvider: React.FC<AppHeaderMenuProviderProps>","shouldFocus"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderMenuProvider/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport React, {\n  ComponentProps,\n  createContext,\n  Dispatch,\n  PropsWithChildren,\n  SetStateAction,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { AnchorRefItemType, useMenuKeyboardNavigation } from '../../shared';\n\nexport interface AppHeaderMenuContextType {\n  menuItems: Set<AnchorRefItemType>;\n  setMenuItems: Dispatch<SetStateAction<Set<AnchorRefItemType>>> | undefined;\n  resetIndex?: () => void;\n}\n\nexport const AppHeaderMenuContext = createContext<AppHeaderMenuContextType>({\n  menuItems: new Set(),\n  setMenuItems: undefined,\n});\n\nexport type AppHeaderMenuProviderProps = PropsWithChildren<{\n  handleClose: () => void;\n}> &\n  Pick<ComponentProps<typeof Box>, 'as'>;\n\nexport const AppHeaderMenuProvider: React.FC<AppHeaderMenuProviderProps> = ({\n  as,\n  children,\n  handleClose,\n}) => {\n  const [menuItems, setMenuItems] = useState<Set<AnchorRefItemType>>(\n    () => new Set()\n  );\n  const [index, setIndex] = useState<number>(0);\n  const [shouldFocus, setShouldFocus] = useState<boolean>(false);\n  const menuItemsArray = Array.from(menuItems);\n\n  const length = menuItems.size - 1;\n\n  const first = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const back = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (shouldFocus && index === 0) {\n      // should only cycle for arrow keys, not shift tab\n      setIndex(length);\n    } else if (index !== 0) {\n      setIndex(index - 1);\n    }\n  };\n\n  const next = (shouldFocus: boolean) => {\n    setShouldFocus(shouldFocus);\n    if (index === length) {\n      setIndex(0);\n    } else {\n      setIndex(index + 1);\n    }\n  };\n\n  const last = () => {\n    setShouldFocus(true);\n    setIndex(0);\n  };\n\n  const resetIndex = () => {\n    if (index !== 0) setIndex(0);\n  };\n\n  const closeDropdown = () => {\n    handleClose();\n    setShouldFocus(false);\n    setIndex(0);\n  };\n\n  const checkUnsetFocusHandler = (\n    event: React.FocusEvent<unknown, Element>\n  ) => {\n    if (event?.target === menuItemsArray[0] && index !== 0) {\n      setIndex(0);\n    }\n    if (event?.target === menuItemsArray[length] && index !== length) {\n      setIndex(length);\n    }\n  };\n\n  const keyDown = useMenuKeyboardNavigation({\n    first,\n    back,\n    next,\n    last,\n    closeDropdown,\n  });\n\n  useEffect(() => {\n    const itemToFocus = menuItemsArray[index];\n    if (itemToFocus && shouldFocus) {\n      itemToFocus.focus();\n      setShouldFocus(false);\n    }\n  }, [menuItemsArray, index, shouldFocus]);\n\n  return (\n    <AppHeaderMenuContext.Provider\n      value={{ menuItems, resetIndex, setMenuItems }}\n    >\n      <Box\n        as={as}\n        onKeyDown={keyDown}\n        onFocusCapture={(e) => checkUnsetFocusHandler(e)}\n      >\n        {children}\n      </Box>\n    </AppHeaderMenuContext.Provider>\n  );\n};\n\nexport const useAppHeaderMenuContext = () => useContext(AppHeaderMenuContext);\n"],"mappings":";;;;;;AAoBA,MAAa,uBAAuB,cAAwC;CAC1E,2BAAW,IAAI,KAAK;CACpB,cAAc;CACf,CAAC;AAOF,MAAaA,yBAA+D,EAC1E,IACA,UACA,kBACI;CACJ,MAAM,CAAC,WAAW,gBAAgB,+BAC1B,IAAI,KAAK,CAChB;CACD,MAAM,CAAC,OAAO,YAAY,SAAiB,EAAE;CAC7C,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,iBAAiB,MAAM,KAAK,UAAU;CAE5C,MAAM,SAAS,UAAU,OAAO;CAEhC,MAAM,cAAc;AAClB,iBAAe,KAAK;AACpB,WAAS,EAAE;;CAGb,MAAM,QAAQ,kBAAyB;AACrC,iBAAeC,cAAY;AAC3B,MAAIA,iBAAe,UAAU,EAE3B,UAAS,OAAO;WACP,UAAU,EACnB,UAAS,QAAQ,EAAE;;CAIvB,MAAM,QAAQ,kBAAyB;AACrC,iBAAeA,cAAY;AAC3B,MAAI,UAAU,OACZ,UAAS,EAAE;MAEX,UAAS,QAAQ,EAAE;;CAIvB,MAAM,aAAa;AACjB,iBAAe,KAAK;AACpB,WAAS,EAAE;;CAGb,MAAM,mBAAmB;AACvB,MAAI,UAAU,EAAG,UAAS,EAAE;;CAG9B,MAAM,sBAAsB;AAC1B,eAAa;AACb,iBAAe,MAAM;AACrB,WAAS,EAAE;;CAGb,MAAM,0BACJ,UACG;AACH,MAAI,OAAO,WAAW,eAAe,MAAM,UAAU,EACnD,UAAS,EAAE;AAEb,MAAI,OAAO,WAAW,eAAe,WAAW,UAAU,OACxD,UAAS,OAAO;;CAIpB,MAAM,UAAU,0BAA0B;EACxC;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;EACd,MAAM,cAAc,eAAe;AACnC,MAAI,eAAe,aAAa;AAC9B,eAAY,OAAO;AACnB,kBAAe,MAAM;;IAEtB;EAAC;EAAgB;EAAO;EAAY,CAAC;AAExC,QACE,oBAAC,qBAAqB;EACpB,OAAO;GAAE;GAAW;GAAY;GAAc;YAE9C,oBAAC;GACK;GACJ,WAAW;GACX,iBAAiB,MAAM,uBAAuB,EAAE;GAE/C;IACG;GACwB;;AAIpC,MAAa,gCAAgC,WAAW,qBAAqB"}

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

@@ -75,4 +75,5 @@ const AppHeaderDropdownNavButton = ({ isOpen, ...props }) => {
 };
 
 //#endregion
-export { AppHeaderDropdownNavButton, AppHeaderMenuNavButton };
+export { AppHeaderDropdownNavButton, AppHeaderMenuNavButton };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderNavButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderNavButton: React.FC<AppHeaderNavButtonProps>","AppHeaderMenuNavButton: React.FC<AppHeaderNavButtonProps>","AppHeaderDropdownNavButton: React.FC<AppHeaderNavButtonProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderNavButton/index.tsx"],"sourcesContent":["import { IconButton, TextButton } from '@codecademy/gamut';\nimport { useEffect } from 'react';\n\nimport { Avatar } from '../../../Avatar';\nimport {\n  AppHeaderDropdownItem,\n  DropdownAnchor,\n  DropdownIcon,\n  StyledText,\n} from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';\n\ninterface AppHeaderNavButtonProps {\n  buttonRef: React.RefObject<HTMLButtonElement>;\n  handleOnClick: (event: React.MouseEvent) => void;\n  isOpen: boolean;\n  item?: AppHeaderDropdownItem;\n  text?: string;\n  onFocus?: () => void;\n}\n\nconst AppHeaderNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  buttonRef,\n  handleOnClick,\n  isOpen,\n  item,\n  text,\n  onFocus,\n}) => {\n  const sharedProps = {\n    'aria-expanded': isOpen,\n    'aria-haspopup': true,\n    onClick: handleOnClick,\n    ref: buttonRef,\n  };\n\n  if (item?.type === 'profile-dropdown') {\n    return (\n      <TextButton\n        data-testid=\"avatar-dropdown-button\"\n        // this resets our programatic menu index to 0 in case someone clicks out of the dropdown\n        variant=\"interface\"\n        onFocus={onFocus}\n        {...sharedProps}\n      >\n        <Avatar\n          alt=\"User profile avatar\"\n          disableDropshadow\n          size={40}\n          src={item.avatar}\n        />\n      </TextButton>\n    );\n  }\n\n  if (item?.icon && 'isIconOnly' in item) {\n    return (\n      <IconButton\n        icon={item.icon}\n        tip={item.text ?? 'Dropdown'}\n        tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n        onFocus={onFocus}\n        {...sharedProps}\n      />\n    );\n  }\n\n  return (\n    <DropdownAnchor\n      title={item?.text ?? text}\n      variant=\"interface\"\n      onFocus={onFocus}\n      {...sharedProps}\n    >\n      <StyledText\n        fontWeight={isOpen ? 'bold' : 'normal'}\n        textAlign=\"center\"\n        title={item?.text ?? text}\n      >\n        {item?.text ?? text}\n      </StyledText>\n      <DropdownIcon open={isOpen} size={12} />\n    </DropdownAnchor>\n  );\n};\n\nexport const AppHeaderMenuNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { menuItems, resetIndex } = useAppHeaderMenuContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      const menuItemsArray = menuItems.values();\n      const firstMenuItem = menuItemsArray.next().value;\n      firstMenuItem?.focus();\n    }\n  }, [isOpen, menuItems]);\n\n  return <AppHeaderNavButton isOpen={isOpen} onFocus={resetIndex} {...props} />;\n};\n\nexport const AppHeaderDropdownNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { firstItemRef } = useAppHeaderDropdownContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      firstItemRef?.focus();\n    }\n  }, [isOpen, firstItemRef]);\n\n  return <AppHeaderNavButton isOpen={isOpen} {...props} />;\n};\n"],"mappings":";;;;;;;;;AAsBA,MAAMA,sBAAyD,EAC7D,WACA,eACA,QACA,MACA,MACA,cACI;CACJ,MAAM,cAAc;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,SAAS;EACT,KAAK;EACN;AAED,KAAI,MAAM,SAAS,mBACjB,QACE,oBAAC;EACC,eAAY;EAEZ,SAAQ;EACC;EACT,GAAI;YAEJ,oBAAC;GACC,KAAI;GACJ;GACA,MAAM;GACN,KAAK,KAAK;IACV;GACS;AAIjB,KAAI,MAAM,QAAQ,gBAAgB,KAChC,QACE,oBAAC;EACC,MAAM,KAAK;EACX,KAAK,KAAK,QAAQ;EAClB,UAAU;GAAE,WAAW;GAAiB,WAAW;GAAY;EACtD;EACT,GAAI;GACJ;AAIN,QACE,qBAAC;EACC,OAAO,MAAM,QAAQ;EACrB,SAAQ;EACC;EACT,GAAI;aAEJ,oBAAC;GACC,YAAY,SAAS,SAAS;GAC9B,WAAU;GACV,OAAO,MAAM,QAAQ;aAEpB,MAAM,QAAQ;IACJ,EACb,oBAAC;GAAa,MAAM;GAAQ,MAAM;IAAM;GACzB;;AAIrB,MAAaC,0BAA6D,EACxE,QACA,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,eAAe,yBAAyB;AAE3D,iBAAgB;AACd,MAAI,OAGF,CAFuB,UAAU,QAAQ,CACJ,MAAM,CAAC,OAC7B,OAAO;IAEvB,CAAC,QAAQ,UAAU,CAAC;AAEvB,QAAO,oBAAC;EAA2B;EAAQ,SAAS;EAAY,GAAI;GAAS;;AAG/E,MAAaC,8BAAiE,EAC5E,QACA,GAAG,YACC;CACJ,MAAM,EAAE,iBAAiB,6BAA6B;AAEtD,iBAAgB;AACd,MAAI,OACF,eAAc,OAAO;IAEtB,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAO,oBAAC;EAA2B;EAAQ,GAAI;GAAS"}

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

@@ -19,4 +19,5 @@ const AppHeaderProvider = ({ children }) => {
 const useAppHeaderContext = () => useContext(AppHeaderContext);
 
 //#endregion
-export { AppHeaderProvider, useAppHeaderContext };
+export { AppHeaderProvider, useAppHeaderContext };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderProvider: React.FC<{ children: ReactNode }>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderProvider/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\nexport interface AppHeaderContextType {\n  lastOpenedDropdown: string | undefined;\n  setLastOpenedDropdown:\n    | Dispatch<SetStateAction<string | undefined>>\n    | undefined;\n}\n\nexport const AppHeaderContext = createContext<AppHeaderContextType>({\n  lastOpenedDropdown: undefined,\n  setLastOpenedDropdown: undefined,\n});\n\nexport const AppHeaderProvider: React.FC<{ children: ReactNode }> = ({\n  children,\n}) => {\n  const [lastOpenedDropdown, setLastOpenedDropdown] = useState<\n    string | undefined\n  >();\n\n  return (\n    <AppHeaderContext.Provider\n      value={{ lastOpenedDropdown, setLastOpenedDropdown }}\n    >\n      {children}\n    </AppHeaderContext.Provider>\n  );\n};\n\nexport const useAppHeaderContext = () => useContext(AppHeaderContext);\n"],"mappings":";;;;AAgBA,MAAa,mBAAmB,cAAoC;CAClE,oBAAoB;CACpB,uBAAuB;CACxB,CAAC;AAEF,MAAaA,qBAAwD,EACnE,eACI;CACJ,MAAM,CAAC,oBAAoB,yBAAyB,UAEjD;AAEH,QACE,oBAAC,iBAAiB;EAChB,OAAO;GAAE;GAAoB;GAAuB;EAEnD;GACyB;;AAIhC,MAAa,4BAA4B,WAAW,iBAAiB"}

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js

@@ -111,4 +111,5 @@ const FeatureCardPanel = ({ links }) => {
 };
 
 //#endregion
-export { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel };
+export { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel };
+//# sourceMappingURL=NavPanels.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavPanels.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.tsx"],"sourcesContent":["import { Anchor, Box, GridBox } from '@codecademy/gamut';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\nimport { PanelLayout } from '../AppHeaderSection/PanelLayout';\nimport { SkillTile } from '../AppHeaderSkillTile';\nimport {\n  AppHeaderCardItem,\n  docsLinks,\n  inspirationLinks,\n  learningToolsLinks,\n  practiceToolsLinks,\n} from './consts';\n\ntype NavPanelProps = {\n  links: AppHeaderCardItem[];\n};\n\nexport const DocsPanel = () => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { tabIndex } = useAppHeaderSectionContext();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  const description = (\n    <>\n      <Box mb={8}>\n        Definitions and guides to help you understand programming languages,\n        frameworks, and concepts. Built and maintained by the coding community.\n      </Box>\n      Interested in helping build it?{' '}\n      <Anchor\n        tabIndex={tabIndex}\n        href=\"/pages/contribute-docs\"\n        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n          globalHeaderItemClick(event, {\n            type: 'link',\n            href: '/pages/contribute-docs',\n            text: 'Contribute to Docs',\n            id: 'contribute-to-docs',\n          });\n          handleClose();\n        }}\n      >\n        Contribute to Docs\n      </Anchor>\n    </>\n  );\n\n  return (\n    <PanelLayout\n      heading=\"Docs\"\n      description={description}\n      linkItem={{\n        type: 'link',\n        href: '/docs',\n        text: 'Explore all Docs',\n        trackingTarget: 'topnav_resources_docs',\n        id: 'docs',\n      }}\n    >\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n      >\n        {docsLinks.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nexport const LearningToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Learning tools\"\n      description=\"Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey.\"\n    >\n      <FeatureCardPanel links={learningToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const PracticeToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Practice tools\"\n      description=\"Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces.\"\n    >\n      <FeatureCardPanel links={practiceToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const InspirationPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Inspiration\"\n      description=\"Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.\"\n    >\n      <FeatureCardPanel links={inspirationLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const FeatureCardPanel = ({ links }: NavPanelProps) => {\n  const { tabIndex } = useAppHeaderSectionContext();\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  return (\n    <GridBox\n      gridTemplateColumns={{ _: '1fr', sm: '1fr 1fr' }}\n      gridTemplateRows={{ _: '1fr', sm: '1fr 1fr' }}\n      gap={16}\n      pl={0}\n      as=\"ul\"\n      listStyle=\"none\"\n    >\n      {links.map((item) => (\n        <li key={`${item.linkItem.id}`}>\n          <Anchor\n            variant=\"interface\"\n            href={item.linkItem.href}\n            onClick={(\n              event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n            ) => {\n              globalHeaderItemClick(event, item.linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            height=\"100%\"\n          >\n            <AppHeaderFeatureCard item={item} />\n          </Anchor>\n        </li>\n      ))}\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,kBAAkB;CAC7B,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,aAAa,4BAA4B;CACjD,MAAM,EAAE,gBAAgB,6BAA6B;AA2BrD,QACE,oBAAC;EACC,SAAQ;EACR,aA3BF;GACE,oBAAC;IAAI,IAAI;cAAG;KAGN;;GAC0B;GAChC,oBAAC;IACW;IACV,MAAK;IACL,UAAU,UAA2D;AACnE,2BAAsB,OAAO;MAC3B,MAAM;MACN,MAAM;MACN,MAAM;MACN,IAAI;MACL,CAAC;AACF,kBAAa;;cAEhB;KAEQ;MACR;EAOD,UAAU;GACR,MAAM;GACN,MAAM;GACN,MAAM;GACN,gBAAgB;GAChB,IAAI;GACL;YAED,oBAAC;GACC,qBAAqB;IAAE,GAAG;IAAO,IAAI;IAAW,IAAI;IAAe;GACnE,KAAK;GACL,IAAI;GACJ,IAAG;GACH,WAAU;aAET,UAAU,KAAK,SACd,oBAAC,kBACC,oBAAC,aAAgB,OAAQ,IADlB,KAAK,GAET,CACL;IACM;GACE;;AAIlB,MAAa,2BAA2B;AACtC,QACE,oBAAC;EACC,SAAQ;EACR,aAAY;YAEZ,oBAAC,oBAAiB,OAAO,qBAAsB;GACnC;;AAIlB,MAAa,2BAA2B;AACtC,QACE,oBAAC;EACC,SAAQ;EACR,aAAY;YAEZ,oBAAC,oBAAiB,OAAO,qBAAsB;GACnC;;AAIlB,MAAa,yBAAyB;AACpC,QACE,oBAAC;EACC,SAAQ;EACR,aAAY;YAEZ,oBAAC,oBAAiB,OAAO,mBAAoB;GACjC;;AAIlB,MAAa,oBAAoB,EAAE,YAA2B;CAC5D,MAAM,EAAE,aAAa,4BAA4B;CACjD,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;AAErD,QACE,oBAAC;EACC,qBAAqB;GAAE,GAAG;GAAO,IAAI;GAAW;EAChD,kBAAkB;GAAE,GAAG;GAAO,IAAI;GAAW;EAC7C,KAAK;EACL,IAAI;EACJ,IAAG;EACH,WAAU;YAET,MAAM,KAAK,SACV,oBAAC,kBACC,oBAAC;GACC,SAAQ;GACR,MAAM,KAAK,SAAS;GACpB,UACE,UACG;AACH,0BAAsB,OAAO,KAAK,SAAS;AAC3C,iBAAa;;GAEL;GACV,QAAO;aAEP,oBAAC,wBAA2B,OAAQ;IAC7B,IAdF,GAAG,KAAK,SAAS,KAerB,CACL;GACM"}

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

@@ -332,4 +332,5 @@ const inspirationLinks = [
 ];
 
 //#endregion
-export { RESOURCES_NAV_SECTIONS, docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks };
+export { RESOURCES_NAV_SECTIONS, docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks };
+//# sourceMappingURL=consts.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["RESOURCES_NAV_SECTIONS: NavSectionConfig[]","docsLinks: AppHeaderLinkItem[]","learningToolsLinks: AppHeaderCardItem[]","practiceToolsLinks: AppHeaderCardItem[]","inspirationLinks: AppHeaderCardItem[]"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.tsx"],"sourcesContent":["import {\n  ArticleIcon,\n  BriefcaseIcon,\n  BulbIcon,\n  CIcon,\n  CommentsIcon,\n  ComputerScienceIcon,\n  CPlusIcon,\n  FileIcon,\n  GameDevelopmentIcon,\n  GaugeDashboardIcon,\n  GitIcon,\n  GoIcon,\n  HammerWrenchIcon,\n  HtmlCssIcon,\n  InfoCircleIcon,\n  JavaIcon,\n  JavascriptIcon,\n  LearnIcon,\n  MarkdownIcon,\n  NotebookIcon,\n  PeopleIcon,\n  PhpIcon,\n  ProgrammingBrowserIcon,\n  ProjectsIcon,\n  PythonIcon,\n  ReactIcon,\n  RulerTriangleIcon,\n  SearchIcon,\n  SqlIcon,\n  SwiftIcon,\n  TerminalIcon,\n  TypescriptIcon,\n  VideoPlayerMovieIcon,\n} from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport {\n  AppHeaderLinkItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport {\n  DocsPanel,\n  InspirationPanel,\n  LearningToolsPanel,\n  PracticeToolsPanel,\n} from './NavPanels';\n\nexport type NavSectionConfig = {\n  item: AppHeaderResourcesDropdownItem;\n  panel: React.ComponentType<{ tabIndex?: number }>;\n};\n\nexport const RESOURCES_NAV_SECTIONS: NavSectionConfig[] = [\n  {\n    item: {\n      icon: FileIcon,\n      text: 'Docs',\n      id: 'docs',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_docs',\n    },\n    panel: DocsPanel,\n  },\n  {\n    item: {\n      icon: RulerTriangleIcon,\n      text: 'Learning tools',\n      id: 'learning-tools',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_learning_tools',\n    },\n    panel: LearningToolsPanel,\n  },\n  {\n    item: {\n      icon: HammerWrenchIcon,\n      text: 'Practice tools',\n      id: 'practice-tools',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_practice_tools',\n    },\n    panel: PracticeToolsPanel,\n  },\n  {\n    item: {\n      icon: BulbIcon,\n      text: 'Inspiration',\n      id: 'inspiration',\n      type: 'resources-dropdown',\n      trackingTarget: 'topnav_resources_tab_inspiration',\n    },\n    panel: InspirationPanel,\n  },\n];\n\nexport const docsLinks: AppHeaderLinkItem[] = [\n  {\n    id: 'c',\n    href: '/resources/docs/c',\n    trackingTarget: 'topnav_resources_docs_c',\n    text: 'C',\n    type: 'link',\n    icon: CIcon,\n  },\n  {\n    id: 'html',\n    href: '/resources/docs/html',\n    trackingTarget: 'topnav_resources_docs_html',\n    text: 'HTML',\n    type: 'link',\n    icon: HtmlCssIcon,\n  },\n  {\n    id: 'python',\n    href: '/resources/docs/python',\n    trackingTarget: 'topnav_resources_docs_python',\n    text: 'Python',\n    type: 'link',\n    icon: PythonIcon,\n  },\n  {\n    id: 'cpp',\n    href: '/resources/docs/cpp',\n    trackingTarget: 'topnav_resources_docs_cpp',\n    text: 'C++',\n    type: 'link',\n    icon: CPlusIcon,\n  },\n  {\n    id: 'java',\n    href: '/resources/docs/java',\n    trackingTarget: 'topnav_resources_docs_java',\n    text: 'Java',\n    type: 'link',\n    icon: JavaIcon,\n  },\n  {\n    id: 'react',\n    href: '/resources/docs/react',\n    trackingTarget: 'topnav_resources_docs_react',\n    text: 'React',\n    type: 'link',\n    icon: ReactIcon,\n  },\n  {\n    id: 'css',\n    href: '/resources/docs/css',\n    trackingTarget: 'topnav_resources_docs_css',\n    text: 'CSS',\n    type: 'link',\n    icon: HtmlCssIcon,\n  },\n  {\n    id: 'javascript',\n    href: '/resources/docs/javascript',\n    trackingTarget: 'topnav_resources_docs_javascript',\n    text: 'JavaScript',\n    type: 'link',\n    icon: JavascriptIcon,\n  },\n  {\n    id: 'sql',\n    href: '/resources/docs/sql',\n    trackingTarget: 'topnav_resources_docs_sql',\n    text: 'SQL',\n    type: 'link',\n    icon: SqlIcon,\n  },\n  {\n    id: 'git',\n    href: '/resources/docs/git',\n    trackingTarget: 'topnav_resources_docs_git',\n    text: 'Git',\n    type: 'link',\n    icon: GitIcon,\n  },\n  {\n    id: 'php',\n    href: '/resources/docs/php',\n    trackingTarget: 'topnav_resources_docs_php',\n    text: 'PHP',\n    type: 'link',\n    icon: PhpIcon,\n  },\n  {\n    id: 'markdown',\n    href: '/resources/docs/markdown',\n    trackingTarget: 'topnav_resources_docs_markdown',\n    text: 'Markdown',\n    type: 'link',\n    icon: MarkdownIcon,\n  },\n  {\n    id: 'typescript',\n    href: '/resources/docs/typescript',\n    trackingTarget: 'topnav_resources_docs_typescript',\n    text: 'TypeScript',\n    type: 'link',\n    icon: TypescriptIcon,\n  },\n  {\n    id: 'lua',\n    href: '/resources/docs/lua',\n    trackingTarget: 'topnav_resources_docs_lua',\n    text: 'Lua',\n    type: 'link',\n    icon: GameDevelopmentIcon,\n  },\n  {\n    id: 'go',\n    href: '/resources/docs/go',\n    trackingTarget: 'topnav_resources_docs_go',\n    text: 'Go',\n    type: 'link',\n    icon: GoIcon,\n  },\n  {\n    id: 'command-line',\n    href: '/resources/docs/command-line',\n    trackingTarget: 'topnav_resources_docs_command_line',\n    text: 'Command line',\n    type: 'link',\n    icon: TerminalIcon,\n  },\n  {\n    id: 'powershell',\n    href: '/resources/docs/powershell',\n    trackingTarget: 'topnav_resources_docs_powershell',\n    text: 'Powershell',\n    type: 'link',\n    icon: ComputerScienceIcon,\n  },\n  {\n    id: 'swift',\n    href: '/resources/docs/swift',\n    trackingTarget: 'topnav_resources_docs_swift',\n    text: 'Swift',\n    type: 'link',\n    icon: SwiftIcon,\n  },\n];\n\nexport type AppHeaderCardItem = {\n  linkItem: AppHeaderLinkItem;\n  icon: React.ReactNode;\n  description: string;\n};\n\nexport const learningToolsLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'articles',\n      href: '/articles',\n      trackingTarget: 'topnav_resources_learning_articles',\n      text: 'Articles',\n      type: 'link',\n    },\n    icon: <ArticleIcon />,\n    description:\n      'Dive deeper into coding concepts and developer workflows to level up your skills.',\n  },\n  {\n    linkItem: {\n      id: 'cheatsheets',\n      href: '/resources/cheatsheets/all',\n      trackingTarget: 'topnav_resources_learning_cheatsheets',\n      text: 'Cheatsheets',\n      type: 'link',\n    },\n    icon: <NotebookIcon />,\n    description:\n      'Quick guides that summarize key concepts across languages, tools, and technologies.',\n  },\n  {\n    linkItem: {\n      id: 'videos',\n      href: '/resources/videos',\n      trackingTarget: 'topnav_resources_learning_videos',\n      text: 'Videos',\n      type: 'link',\n    },\n    icon: <VideoPlayerMovieIcon />,\n    description:\n      'Learn from videos on languages, frameworks, and more—at any skill level.',\n  },\n\n  {\n    linkItem: {\n      id: 'projects',\n      href: '/projects',\n      trackingTarget: 'topnav_resources_learning_projects',\n      text: 'Projects',\n      type: 'link',\n    },\n    icon: <ProjectsIcon />,\n    description:\n      'Apply your skills, connect concepts, and build something of your own.',\n  },\n];\n\nexport const practiceToolsLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'code-challenges',\n      href: '/code-challenges',\n      trackingTarget: 'topnav_resources_learning_code_challenges',\n      text: 'Code challenges',\n      type: 'link',\n    },\n    icon: <ProgrammingBrowserIcon />,\n    description:\n      'Sharpen your skills with real interview challenges from top tech companies, with guidance if you get stuck.',\n  },\n  {\n    linkItem: {\n      id: 'workspaces',\n      href: '/pages/workspaces',\n      trackingTarget: 'topnav_resources_learning_workspaces',\n      text: 'Workspaces',\n      type: 'link',\n    },\n    icon: <LearnIcon />,\n    description:\n      'Build and share projects in 13 popular languages, all right in your browser.',\n  },\n  {\n    linkItem: {\n      id: 'job-readiness',\n      href: '/job-readiness',\n      trackingTarget: 'topnav_resources_learning_job_readiness',\n      text: 'Job-readiness checker',\n      type: 'link',\n    },\n    icon: <PeopleIcon />,\n    description:\n      'See how your skills match a job posting and get tips on what to improve.',\n  },\n\n  {\n    linkItem: {\n      id: 'interview-simulator',\n      href: '/interview-simulator',\n      trackingTarget: 'topnav_resources_learning_interview_simulator',\n      text: 'Interview Simulator',\n      type: 'link',\n    },\n    icon: <GaugeDashboardIcon />,\n    description:\n      'Practice interviews, get feedback, and build confidence at any stage of your tech career.',\n  },\n];\n\nexport const inspirationLinks: AppHeaderCardItem[] = [\n  {\n    linkItem: {\n      id: 'learner-stories',\n      href: '/resources/blog/category/get-inspired',\n      trackingTarget: 'topnav_resources_inspiration_learner_stories',\n      text: 'Learner stories',\n      type: 'link',\n    },\n    icon: <CommentsIcon />,\n    description:\n      'Learn how coding can change your life (and the world) for the better.',\n  },\n  {\n    linkItem: {\n      id: 'learning-tips',\n      href: '/resources/blog/category/learning-tips',\n      trackingTarget: 'topnav_resources_inspiration_learning_tips',\n      text: 'Learning tips',\n      type: 'link',\n    },\n    icon: <InfoCircleIcon />,\n    description:\n      \"Learning to code — or thinking about it? Here's how to get started, plus tips and tricks for staying motivated.\",\n  },\n  {\n    linkItem: {\n      id: 'career-advice',\n      href: '/resources/blog/category/career',\n      trackingTarget: 'topnav_resources_inspiration_career_advice',\n      text: 'Career advice',\n      type: 'link',\n    },\n    icon: <BriefcaseIcon />,\n    description:\n      'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.',\n  },\n  {\n    linkItem: {\n      id: 'finding-a-job',\n      href: '/resources/blog/category/finding-a-job',\n      trackingTarget: 'topnav_resources_inspiration_finding_a_job',\n      text: 'Finding a job',\n      type: 'link',\n    },\n    icon: <SearchIcon />,\n    description:\n      'Master the skills to land a tech job, from resumes and portfolios to interviews and offers.',\n  },\n];\n"],"mappings":";;;;;;AAqDA,MAAaA,yBAA6C;CACxD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACF;AAED,MAAaC,YAAiC;CAC5C;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF;AAQD,MAAaC,qBAA0C;CACrD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,gBAAc;EACrB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,iBAAe;EACtB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,yBAAuB;EAC9B,aACE;EACH;CAED;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,iBAAe;EACtB,aACE;EACH;CACF;AAED,MAAaC,qBAA0C;CACrD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,2BAAyB;EAChC,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,cAAY;EACnB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,eAAa;EACpB,aACE;EACH;CAED;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,uBAAqB;EAC5B,aACE;EACH;CACF;AAED,MAAaC,mBAAwC;CACnD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,iBAAe;EACtB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,mBAAiB;EACxB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,kBAAgB;EACvB,aACE;EACH;CACD;EACE,UAAU;GACR,IAAI;GACJ,MAAM;GACN,gBAAgB;GAChB,MAAM;GACN,MAAM;GACP;EACD,MAAM,oBAAC,eAAa;EACpB,aACE;EACH;CACF"}

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

@@ -7,4 +7,5 @@ type AppHeaderResourceDropdownProps = AppHeaderAction & {
   item: AppHeaderResourcesDropdownItem;
 };
 //#endregion
-export { AppHeaderResourceDropdownProps };
+export { AppHeaderResourceDropdownProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAoBY,8BAAA,GAAiC;QACrC"}

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

@@ -99,4 +99,5 @@ const AppHeaderResourcesDropdown = ({ action, item }) => {
 };
 
 //#endregion
-export { AppHeaderResourcesDropdown };
+export { AppHeaderResourcesDropdown };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderResourcesDropdown: React.FC<\n  AppHeaderResourceDropdownProps\n>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  DropdownPositions,\n  useHeaderDisplayContext,\n} from '../../../GlobalHeader/context';\nimport {\n  AnimatedMegaMenuDropdown,\n  AppHeaderAction,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { RESOURCES_NAV_SECTIONS } from './consts';\n\nexport type AppHeaderResourceDropdownProps = AppHeaderAction & {\n  item: AppHeaderResourcesDropdownItem;\n};\n\nconst StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, {\n  // prevent the props from being passed to the DOM element, which would cause a React warning.\n  shouldForwardProp: (prop) =>\n    prop !== 'narrowResourceDropdownPosition' &&\n    prop !== 'wideResourceDropdownPosition',\n})<{\n  narrowResourceDropdownPosition: string;\n  wideResourceDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowResourceDropdownPosition }) => {\n    return narrowResourceDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideResourceDropdownPosition }) => {\n      return wideResourceDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderResourcesDropdown: React.FC<\n  AppHeaderResourceDropdownProps\n> = ({ action, item }) => {\n  const { text } = item;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { headerType } = useHeaderDisplayContext();\n  const { resourceDropdown } = DropdownPositions[headerType];\n  const narrowResourceDropdownPosition = resourceDropdown.narrow;\n  const wideResourceDropdownPosition = resourceDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const toggleIsOpen = () => setIsOpen((prev) => !prev);\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    toggleIsOpen();\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef?.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== text && isOpen) {\n      setIsOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent | Event) {\n      const container = containerRef?.current;\n      const button = buttonRef?.current;\n      if (\n        isOpen &&\n        container &&\n        !container.contains(event.target as Node) &&\n        button &&\n        !button.contains(event.target as Node)\n      ) {\n        handleClose();\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('blur', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('blur', handleClickOutside);\n    };\n  }, [containerRef, handleClose, isOpen]);\n\n  return (\n    <AppHeaderDropdownProvider handleClose={handleClose}>\n      <AppHeaderDropdownNavButton\n        buttonRef={buttonRef}\n        handleOnClick={handleOnClick}\n        isOpen={isOpen}\n        text={text}\n      />\n      <StyledAnimatedMegaMenuDropdown\n        isOpen={isOpen}\n        narrowResourceDropdownPosition={narrowResourceDropdownPosition}\n        wideResourceDropdownPosition={wideResourceDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        ref={dropdownRef}\n        data-testid=\"resources-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={RESOURCES_NAV_SECTIONS}\n            handleClose={() => setIsOpen(false)}\n            type=\"resources-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,iCAAiC,OAAO,0BAA0B,EAEtE,oBAAoB,SAClB,SAAS,oCACT,SAAS,gCACZ,CAAC,AAGA;;WAES,EAAE,qCAAqC;AAC9C,QAAO;EACP;;;aAGS,EAAE,mCAAmC;AAC5C,QAAO;EACP;;;AAIN,MAAaA,8BAER,EAAE,QAAQ,WAAW;CACxB,MAAM,EAAE,SAAS;CACjB,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,cAAc,OAA8B,KAAK;CACvD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,oBAAoB,0BAA0B,qBAAqB;CAC3E,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,qBAAqB,kBAAkB;CAC/C,MAAM,iCAAiC,iBAAiB;CACxD,MAAM,+BAA+B,iBAAiB;CAEtD,MAAM,0BAA0B;AAC9B,MAAI,UAAU,YAAY,QACxB,aAAY,QAAQ,YAAY;;CAIpC,MAAM,qBAAqB,WAAW,SAAS,CAAC,KAAK;CAErD,MAAM,iBAAiB,UAA4B;AACjD,gBAAc;AACd,MAAI,CAAC,QAAQ;AACX,UAAO,OAAO,KAAK;AACnB,OAAI,sBACF,uBAAsB,KAAK;;;CAKjC,MAAM,cAAc,kBAAkB;AACpC,YAAU,MAAM;AAChB,aAAW,SAAS,OAAO;IAC1B,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,uBAAuB,QAAQ,OACjC,WAAU,MAAM;IAGjB,CAAC,mBAAmB,CAAC;AAExB,iBAAgB;EACd,SAAS,mBAAmB,OAA2B;GACrD,MAAM,YAAY,cAAc;GAChC,MAAM,SAAS,WAAW;AAC1B,OACE,UACA,aACA,CAAC,UAAU,SAAS,MAAM,OAAe,IACzC,UACA,CAAC,OAAO,SAAS,MAAM,OAAe,CAEtC,cAAa;;AAIjB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,WAAS,iBAAiB,QAAQ,mBAAmB;AACrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,YAAS,oBAAoB,QAAQ,mBAAmB;;IAEzD;EAAC;EAAc;EAAa;EAAO,CAAC;AAEvC,QACE,qBAAC;EAAuC;aACtC,oBAAC;GACY;GACI;GACP;GACF;IACN,EACF,oBAAC;GACS;GACwB;GACF;GAC9B,UAAU;GACV,KAAK;GACL,eAAY;GACZ,qBAAqB;aAErB,oBAAC;IAAU,MAAK;cACd,oBAAC;KACS;KACR,KAAK;KACL,aAAa;KACb,mBAAmB,UAAU,MAAM;KACnC,MAAK;MACL;KACQ;IACmB;GACP"}

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

@@ -13,4 +13,5 @@ const useAppHeaderSectionContext = () => {
 };
 
 //#endregion
-export { AppHeaderSectionContext, useAppHeaderSectionContext };
+export { AppHeaderSectionContext, useAppHeaderSectionContext };
+//# sourceMappingURL=AppHeaderSectionContext.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderSectionContext.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n  isCoachingEnabled?: boolean;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n    isCoachingEnabled: undefined,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;AAUA,MAAa,0BACX,cAA2C;CACzC,aAAa;CACb,gBAAgB;CAChB,UAAU;CACV,mBAAmB;CACpB,CAAC;AAEJ,MAAa,mCAAmC;AAC9C,QAAO,WAAW,wBAAwB"}

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

@@ -80,4 +80,5 @@ const MobileBackButton = ({ handleClose, type }) => {
 };
 
 //#endregion
-export { MobileBackButton };
+export { MobileBackButton };
+//# sourceMappingURL=MobileBackButton.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBackButton.js","names":["MobileBackButton: React.FC<MobileBackButtonProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { NavIconButton, NavigationButton, SmallMenuButton } from './elements';\n\nexport type MobileBackButtonProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n};\n\nexport const MobileBackButton: React.FC<MobileBackButtonProps> = ({\n  handleClose,\n  type,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const handleBackButtonClick = (\n    event: React.MouseEvent<HTMLButtonElement>\n  ) => {\n    globalHeaderItemClick(event, {\n      id: 'back',\n      text: 'Back',\n      type,\n    });\n    handleClose();\n  };\n\n  return (\n    <>\n      <Box display={{ _: 'none', sm: 'block' }}>\n        <NavigationButton isActive={false} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </NavigationButton>\n      </Box>\n      <Box\n        display={{ _: 'none', xs: 'grid', sm: 'none' }}\n        ml={8}\n        gridColumn=\"1\"\n        gridRow=\"1\"\n      >\n        <NavIconButton\n          onClick={handleBackButtonClick}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n        />\n      </Box>\n      <Box display={{ _: 'flex', xs: 'none' }}>\n        <SmallMenuButton index={0} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </SmallMenuButton>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAaA,oBAAqD,EAChE,aACA,WACI;CACJ,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,yBACJ,UACG;AACH,wBAAsB,OAAO;GAC3B,IAAI;GACJ,MAAM;GACN;GACD,CAAC;AACF,eAAa;;AAGf,QACE;EACE,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAS;aACtC,oBAAC;IAAiB,UAAU;IAAO,SAAS;cAC1C,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACO;IACf;EACN,oBAAC;GACC,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ,IAAI;IAAQ;GAC9C,IAAI;GACJ,YAAW;GACX,SAAQ;aAER,oBAAC;IACC,SAAS;IACT,MAAM;IACN,KAAI;IACJ,UAAU;KACR,WAAW;KACX,QAAQ;KACR,WAAW;KACZ;IACD,cAAW;KACX;IACE;EACN,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ;aACrC,oBAAC;IAAgB,OAAO;IAAG,SAAS;cAClC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACM;IACd;KACL"}

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

@@ -46,4 +46,5 @@ const MobileNavMenu = ({ handleClose, type, navSections }) => {
 };
 
 //#endregion
-export { MobileNavMenu };
+export { MobileNavMenu };
+//# sourceMappingURL=MobileNavMenu.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNavMenu.js","names":["MobileNavMenu: React.FC<MobileNavMenuProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport * as React from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { SmallMenuButton } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\n\nexport type MobileNavMenuProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: React.ComponentType;\n  }[];\n};\n\nexport const MobileNavMenu: React.FC<MobileNavMenuProps> = ({\n  handleClose,\n  type,\n  navSections,\n}) => {\n  const { activePanel, setActivePanel } = useAppHeaderSectionContext();\n\n  const ActivePanel = navSections[activePanel ?? 0].panel;\n\n  return (\n    <FlexBox\n      display={{ _: 'flex', xs: 'none' }}\n      flexDirection=\"column\"\n      gap={8}\n      p={16}\n    >\n      {activePanel === null && (\n        <>\n          <MobileBackButton handleClose={handleClose} type={type} />\n          {navSections.map(({ item }, index) => {\n            return (\n              <SmallMenuButton\n                key={item.id}\n                index={index + 1}\n                onClick={() => setActivePanel(index)}\n              >\n                <FlexBox gap={8} alignItems=\"center\">\n                  {item.icon && (\n                    <Box height={24} width={24}>\n                      <item.icon size={24} />\n                    </Box>\n                  )}\n                  <Text>{item.text}</Text>\n                </FlexBox>\n                <FlexBox>\n                  <ArrowChevronRightIcon />\n                </FlexBox>\n              </SmallMenuButton>\n            );\n          })}\n        </>\n      )}\n\n      {activePanel !== null && ActivePanel && (\n        <Box background={theme.colors.background} borderRadius=\"lg\" p={16}>\n          <ActivePanel />\n        </Box>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAaA,iBAA+C,EAC1D,aACA,MACA,kBACI;CACJ,MAAM,EAAE,aAAa,mBAAmB,4BAA4B;CAEpE,MAAM,cAAc,YAAY,eAAe,GAAG;AAElD,QACE,qBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ;EAClC,eAAc;EACd,KAAK;EACL,GAAG;aAEF,gBAAgB,QACf,4CACE,oBAAC;GAA8B;GAAmB;IAAQ,EACzD,YAAY,KAAK,EAAE,QAAQ,UAAU;AACpC,UACE,qBAAC;IAEC,OAAO,QAAQ;IACf,eAAe,eAAe,MAAM;eAEpC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBACzB,KAAK,QACJ,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;OACnB,EAER,oBAAC,kBAAM,KAAK,OAAY;MAChB,EACV,oBAAC,qBACC,oBAAC,0BAAwB,GACjB;MAdL,KAAK,GAeM;IAEpB,IACD,EAGJ,gBAAgB,QAAQ,eACvB,oBAAC;GAAI,YAAY,MAAM,OAAO;GAAY,cAAa;GAAK,GAAG;aAC7D,oBAAC,gBAAc;IACX;GAEA"}

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

@@ -98,4 +98,5 @@ const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
 };
 
 //#endregion
-export { NavTab, NavTabList, NavTabPanel };
+export { NavTab, NavTabList, NavTabPanel };
+//# sourceMappingURL=NavTabs.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavTabs.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport React, { PropsWithChildren, useContext, useEffect, useRef } from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport {\n  NavIconButton,\n  NavIconButtonContainer,\n  NavigationButton,\n  OverflowText,\n  StyledNavTabPanel,\n} from './elements';\n\ninterface NavTabPanelProps extends PropsWithChildren {\n  isActiveTab: boolean;\n  index: number;\n  id: string;\n}\n\n// Tab content, only one should be visible at a time\nconst NavTabPanel = ({\n  children,\n  isActiveTab,\n  index,\n  id,\n}: NavTabPanelProps) => {\n  return (\n    <StyledNavTabPanel\n      isFirst={index === 0}\n      role=\"tabpanel\"\n      id={`${id}-panel`}\n      aria-labelledby={`${id}-tab`}\n      display={isActiveTab ? 'block' : 'none'}\n      gridColumn=\"2 / span 12\"\n      gridRow=\"1 / span 8\"\n      bg=\"background\"\n      px={32}\n      pt={16}\n      pb={24}\n    >\n      {children}\n    </StyledNavTabPanel>\n  );\n};\n\n// Holds all of the tab buttons\nconst NavTabList = React.forwardRef<\n  HTMLDivElement,\n  {\n    children: React.ReactNode;\n    type: string;\n  }\n>(({ children, type }, ref) => {\n  return (\n    <FlexBox\n      role=\"tablist\"\n      aria-label={`${type.replace('-dropdown', '')} navigation`}\n      aria-orientation=\"vertical\"\n      flexDirection=\"column\"\n      gap={8}\n      ref={ref}\n    >\n      {children}\n    </FlexBox>\n  );\n});\n\n// Tab button, lets you switch between tabs\n// at larger breakpoints we use a normal button, at smaller\n// breakpoints we use an IconButton.\nconst NavTab = ({\n  item,\n  onSelect,\n  isActive,\n  onKeyDown,\n  index,\n}: {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  onSelect: (\n    id: string,\n    event?: React.MouseEvent,\n    item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n  ) => void;\n  isActive: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  index: number;\n}) => {\n  const sharedButtonProps = {\n    role: 'tab',\n    'aria-selected': isActive,\n    'aria-controls': `${item.id}-panel`,\n    onClick: (event: React.MouseEvent) => onSelect(item.id, event, item),\n    onKeyDown,\n    tabIndex: isActive ? 0 : -1,\n    isActive,\n    id: `${item.id}-tab`,\n  } as const;\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { setFirstItemRef } = useContext(AppHeaderDropdownContext);\n\n  useEffect(() => {\n    if (index === 0 && buttonRef.current) {\n      setFirstItemRef?.(buttonRef.current);\n    }\n  }, [index, setFirstItemRef]);\n\n  return (\n    <>\n      <NavigationButton ref={buttonRef} {...sharedButtonProps}>\n        <FlexBox gap={8} alignItems=\"center\">\n          {item.icon && (\n            <Box height={24} width={24}>\n              <item.icon size={24} />\n            </Box>\n          )}\n          <OverflowText maxWidth={{ _: '110px', md: 'none' }}>\n            {item.text}\n          </OverflowText>\n        </FlexBox>\n\n        <FlexBox alignItems=\"center\">\n          {isActive && (\n            <Box display={{ _: 'none', sm: 'block' }} mt={4}>\n              <ArrowChevronRightIcon data-testid=\"chevron-right-icon\" />\n            </Box>\n          )}\n        </FlexBox>\n      </NavigationButton>\n      {item.icon && (\n        <NavIconButtonContainer\n          display={{ _: 'none', xs: 'grid', sm: 'none' }}\n          {...sharedButtonProps}\n        >\n          <NavIconButton\n            icon={item.icon}\n            tip={item.text}\n            tipProps={{\n              alignment: 'right-center',\n              narrow: false,\n              placement: 'floating',\n            }}\n            aria-label={item.text}\n          />\n        </NavIconButtonContainer>\n      )}\n    </>\n  );\n};\n\nexport { NavTabPanel, NavTabList, NavTab };\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAAe,EACnB,UACA,aACA,OACA,SACsB;AACtB,QACE,oBAAC;EACC,SAAS,UAAU;EACnB,MAAK;EACL,IAAI,GAAG,GAAG;EACV,mBAAiB,GAAG,GAAG;EACvB,SAAS,cAAc,UAAU;EACjC,YAAW;EACX,SAAQ;EACR,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EAEH;GACiB;;AAKxB,MAAM,aAAa,MAAM,YAMtB,EAAE,UAAU,QAAQ,QAAQ;AAC7B,QACE,oBAAC;EACC,MAAK;EACL,cAAY,GAAG,KAAK,QAAQ,aAAa,GAAG,CAAC;EAC7C,oBAAiB;EACjB,eAAc;EACd,KAAK;EACA;EAEJ;GACO;EAEZ;AAKF,MAAM,UAAU,EACd,MACA,UACA,UACA,WACA,YAWI;CACJ,MAAM,oBAAoB;EACxB,MAAM;EACN,iBAAiB;EACjB,iBAAiB,GAAG,KAAK,GAAG;EAC5B,UAAU,UAA4B,SAAS,KAAK,IAAI,OAAO,KAAK;EACpE;EACA,UAAU,WAAW,IAAI;EACzB;EACA,IAAI,GAAG,KAAK,GAAG;EAChB;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,oBAAoB,WAAW,yBAAyB;AAEhE,iBAAgB;AACd,MAAI,UAAU,KAAK,UAAU,QAC3B,mBAAkB,UAAU,QAAQ;IAErC,CAAC,OAAO,gBAAgB,CAAC;AAE5B,QACE,4CACE,qBAAC;EAAiB,KAAK;EAAW,GAAI;aACpC,qBAAC;GAAQ,KAAK;GAAG,YAAW;cACzB,KAAK,QACJ,oBAAC;IAAI,QAAQ;IAAI,OAAO;cACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;KACnB,EAER,oBAAC;IAAa,UAAU;KAAE,GAAG;KAAS,IAAI;KAAQ;cAC/C,KAAK;KACO;IACP,EAEV,oBAAC;GAAQ,YAAW;aACjB,YACC,oBAAC;IAAI,SAAS;KAAE,GAAG;KAAQ,IAAI;KAAS;IAAE,IAAI;cAC5C,oBAAC,yBAAsB,eAAY,uBAAuB;KACtD;IAEA;GACO,EAClB,KAAK,QACJ,oBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ,IAAI;GAAQ;EAC9C,GAAI;YAEJ,oBAAC;GACC,MAAM,KAAK;GACX,KAAK,KAAK;GACV,UAAU;IACR,WAAW;IACX,QAAQ;IACR,WAAW;IACZ;GACD,cAAY,KAAK;IACjB;GACqB,IAE1B"}

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

@@ -80,4 +80,5 @@ const PanelLayout = ({ heading, description, linkItem, children }) => {
 };
 
 //#endregion
-export { PanelLayout };
+export { PanelLayout };
+//# sourceMappingURL=PanelLayout.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelLayout.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx"],"sourcesContent":["import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';\nimport { PropsWithChildren, ReactNode } from 'react';\n\nimport { AppHeaderLinkItem } from '../../..';\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\n\ntype PanelLayoutProps = PropsWithChildren & {\n  heading: string;\n  description: ReactNode;\n  linkItem?: AppHeaderLinkItem;\n};\n\nexport const PanelLayout = ({\n  heading,\n  description,\n  linkItem,\n  children,\n}: PanelLayoutProps) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { setActivePanel, tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <FlexBox\n      flexDirection=\"column\"\n      gap={{ _: 8, xs: 8 }}\n      pr={{ _: 0, md: 16, lg: 0 }}\n    >\n      <FlexBox alignItems=\"center\" gap={{ _: 8, xs: 0 }}>\n        <IconButton\n          onClick={() => setActivePanel(null)}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n          display={{ _: 'flex', xs: 'none' }}\n        />\n        <Text as=\"h2\" variant=\"title-sm\">\n          {heading}\n        </Text>\n      </FlexBox>\n      <Text mb={16}>{description}</Text>\n      {children}\n      {linkItem && (\n        <FlexBox justifyContent=\"center\" mt={16}>\n          <Anchor\n            href={linkItem.href}\n            onClick={(event: React.MouseEvent) => {\n              globalHeaderItemClick(event, linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            variant=\"standard\"\n          >\n            <FlexBox alignItems=\"center\" gap={8}>\n              {linkItem.text} <MiniArrowRightIcon />\n            </FlexBox>\n          </Anchor>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,MAAa,eAAe,EAC1B,SACA,aACA,UACA,eACsB;CACtB,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,gBAAgB,aAAa,4BAA4B;AAEjE,QACE,qBAAC;EACC,eAAc;EACd,KAAK;GAAE,GAAG;GAAG,IAAI;GAAG;EACpB,IAAI;GAAE,GAAG;GAAG,IAAI;GAAI,IAAI;GAAG;;GAE3B,qBAAC;IAAQ,YAAW;IAAS,KAAK;KAAE,GAAG;KAAG,IAAI;KAAG;eAC/C,oBAAC;KACC,eAAe,eAAe,KAAK;KACnC,MAAM;KACN,KAAI;KACJ,UAAU;MACR,WAAW;MACX,QAAQ;MACR,WAAW;MACZ;KACD,cAAW;KACX,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ;MAClC,EACF,oBAAC;KAAK,IAAG;KAAK,SAAQ;eACnB;MACI;KACC;GACV,oBAAC;IAAK,IAAI;cAAK;KAAmB;GACjC;GACA,YACC,oBAAC;IAAQ,gBAAe;IAAS,IAAI;cACnC,oBAAC;KACC,MAAM,SAAS;KACf,UAAU,UAA4B;AACpC,4BAAsB,OAAO,SAAS;AACtC,mBAAa;;KAEL;KACV,SAAQ;eAER,qBAAC;MAAQ,YAAW;MAAS,KAAK;;OAC/B,SAAS;OAAK;OAAC,oBAAC,uBAAqB;;OAC9B;MACH;KACD;;GAEJ"}

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

@@ -165,4 +165,5 @@ const NavIconButton = styled(IconButton)`
 `;
 
 //#endregion
-export { GradientBackground, NavIconButton, NavIconButtonContainer, NavTabContainer, NavigationButton, OverflowText, ScrollableContent, SmallMenuButton, StyledNavTabPanel, StyledSection };
+export { GradientBackground, NavIconButton, NavIconButtonContainer, NavTabContainer, NavigationButton, OverflowText, ScrollableContent, SmallMenuButton, StyledNavTabPanel, StyledSection };
+//# sourceMappingURL=elements.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx"],"sourcesContent":["import { Box, GridBox, IconButton, Text } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\nexport const StyledSection = styled(Box)<{ activePanelSelected: boolean }>`\n  width: 100%;\n  max-width: 100%;\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ${({ activePanelSelected, theme }) =>\n    activePanelSelected ? theme.colors['gray-100'] : theme.colors.background};\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 480px) {\n    background-color: ${({ theme }) => theme.colors['gray-100']};\n  }\n\n  // at this breakpoint the menu becomes a dropdown\n  @media (min-width: 1200px) {\n    width: calc(100dvw - 11rem);\n    max-width: calc(1440px - 11rem);\n    max-height: 85vh;\n  }\n`;\n\nexport const ScrollableContent = styled(Box)`\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: 16px;\n\n  /* Custom scrollbar styling to maintain border-radius */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 0 16px 16px 0;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    border-radius: 4px;\n    border: 2px solid transparent;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    background-clip: content-box;\n    opacity: 0.8;\n  }\n\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors['gray-300']} transparent;\n`;\n\nexport const NavTabContainer = styled(GridBox)`\n  grid-template-columns: 297px 32px 1fr;\n\n  @media (max-width: 767px) {\n    grid-template-columns: 64px 1fr 1fr;\n  }\n  @media (max-width: 479px) {\n    display: none;\n  }\n`;\n\nexport const GradientBackground = styled(Box)`\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  );\n`;\n\nexport const SmallMenuButton = styled.button<{ index: number }>`\n  grid-column: 1;\n  grid-row: ${({ index }) => index + 1};\n  padding: 16px;\n  border: none;\n  border-radius: 8px;\n  background: none;\n  cursor: pointer;\n  color: ${({ theme }) => theme.colors.text};\n  width: 100%;\n  text-align: left;\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const OverflowText = styled(Text)`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n\nexport const StyledNavTabPanel = styled(Box)<{\n  isFirst: boolean;\n}>`\n  border-radius: ${({ isFirst }) => (isFirst ? '0 8px 8px 8px' : '8px')};\n\n  @media (max-width: 1200px) {\n    border-radius: 8px;\n  }\n`;\n\nexport const NavigationButton = styled.button<{\n  isActive: boolean;\n}>`\n  grid-column: 1;\n  padding: 16px;\n  border: none;\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n  background: none;\n  cursor: pointer;\n  color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.primary : theme.colors.text};\n  text-align: left;\n  width: ${({ isActive }) => (isActive ? '100%' : 'calc(100% - 8px)')};\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: ${({ isActive, theme }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  padding-right: ${({ isActive }) => (isActive ? '24px' : '16px')};\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme, isActive }) =>\n      isActive ? theme.colors.background : theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: ${({ theme, isActive }) =>\n      isActive ? 'none' : `0 0 0 2px ${theme.colors.primary}`};\n  }\n\n  @media (max-width: 767px) {\n    display: none;\n  }\n`;\n\nexport const NavIconButtonContainer = styled(Box)<{\n  isActive: boolean;\n}>`\n  background-color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n\n  grid-column: 1;\n  padding: 8px;\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n`;\n\nexport const NavIconButton = styled(IconButton)`\n  &:hover,\n  &:focus svg {\n    &:hover,\n    &:focus {\n      color: ${({ theme }) => theme.colors.primary};\n      background-color: ${({ theme }) => theme.colors['navy-100']};\n    }\n  }\n`;\n"],"mappings":";;;;AAGA,MAAa,gBAAgB,OAAO,IAAI,AAAkC;;;uBAGnD,EAAE,YAAY,MAAM,OAAO,mBAAmB;;;uBAG9C,EAAE,qBAAqB,YAC1C,sBAAsB,MAAM,OAAO,cAAc,MAAM,OAAO,WAAW;;;;;yBAKpD,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;;;;AAWhE,MAAa,oBAAoB,OAAO,IAAI;;;;;;;;;;;;;;;;;mBAiBzB,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;mBAOvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;sBAOpC,EAAE,YAAY,MAAM,OAAO,YAAY;;AAG7D,MAAa,kBAAkB,OAAO,QAAQ;;;;;;;;;;AAW9C,MAAa,qBAAqB,OAAO,IAAI;;;;;;;AAQ7C,MAAa,kBAAkB,OAAO,MAAyB;;eAEhD,EAAE,YAAY,QAAQ,EAAE;;;;;;YAM3B,EAAE,YAAY,MAAM,OAAO,KAAK;;;;;;;;;;yBAUnB,EAAE,YAAY,MAAM,OAAO,YAAY;cAClD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;AAIjD,MAAa,eAAe,OAAO,KAAK;;;;;AAMxC,MAAa,oBAAoB,OAAO,IAAI,AAE1C;oBACkB,EAAE,cAAe,UAAU,kBAAkB,MAAO;;;;;;AAOxE,MAAa,mBAAmB,OAAO,MAErC;;;;oBAIkB,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;YAG5D,EAAE,OAAO,eACjB,WAAW,MAAM,OAAO,UAAU,MAAM,OAAO,KAAK;;YAE5C,EAAE,eAAgB,WAAW,SAAS,mBAAoB;;;;;uBAK/C,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,SAAS,OAAQ;;;;yBAIzC,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;cACtD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;mBAK9B,EAAE,OAAO,eACtB,WAAW,SAAS,aAAa,MAAM,OAAO,UAAU;;;;;;;AAQ9D,MAAa,yBAAyB,OAAO,IAAI,AAE/C;uBACqB,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;;;;qBAMnD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;;AAOxD,MAAa,gBAAgB,OAAO,WAAW;;;;;gBAK/B,EAAE,YAAY,MAAM,OAAO,QAAQ;2BACxB,EAAE,YAAY,MAAM,OAAO,YAAY"}

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

@@ -115,4 +115,5 @@ const AppHeaderSection = forwardRef(({ isOpen = true, MarketingBanner, isMobile
 });
 
 //#endregion
-export { AppHeaderSection };
+export { AppHeaderSection };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport { motion } from 'framer-motion';\nimport {\n  ComponentType,\n  FC,\n  forwardRef,\n  Key,\n  KeyboardEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { MarketingBannerProps } from '../AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { NavTabContainer, ScrollableContent, StyledSection } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\nimport { MobileNavMenu } from './MobileNavMenu';\nimport { NavTab, NavTabList, NavTabPanel } from './NavTabs';\n\nexport type TabSectionConfig = {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  panel: ComponentType;\n};\n\nexport type AppHeaderSectionProps = {\n  isOpen?: boolean;\n  keyDownEvents?: (event: KeyboardEvent) => void;\n  ref?: RefObject<HTMLDivElement>;\n  MarketingBanner?: FC<MarketingBannerProps>;\n  isMobile?: boolean;\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: ComponentType;\n  }[];\n  ariaLabel?: string;\n  defaultSelectedKey?: string;\n  popularSection?: boolean;\n  isCoachingEnabled?: boolean;\n};\n\nexport const AppHeaderSection = forwardRef<\n  HTMLDivElement,\n  AppHeaderSectionProps\n>(\n  (\n    {\n      isOpen = true,\n      MarketingBanner,\n      isMobile = false,\n      handleClose,\n      type,\n      defaultSelectedKey,\n      navSections,\n      isCoachingEnabled,\n    },\n    ref\n  ) => {\n    const firstTabId = navSections?.[0]?.item?.id;\n    const [activeTab, setActiveTab] = useState<Key>(\n      defaultSelectedKey || firstTabId\n    );\n    const [activePanel, setActivePanel] = useState<number | null>(null);\n    const tabListRef = useRef<HTMLDivElement>(null);\n\n    const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n    const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n    const banner = globalHeaderDynamicData?.catalogDropdown?.banner;\n    const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;\n\n    const tabIndex = isOpen ? 0 : -1;\n    const activePanelSelected = activePanel !== null;\n\n    const onSelect = useCallback(\n      (\n        key: Key,\n        event?: React.MouseEvent,\n        item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n      ) => {\n        setActiveTab(key);\n        if (item && event) {\n          globalHeaderItemClick(event, item);\n        }\n      },\n      [setActiveTab, globalHeaderItemClick]\n    );\n\n    const onKeyDown = useCallback((event: React.KeyboardEvent) => {\n      if (!tabListRef.current) return;\n\n      // get list of tabs available\n      const tabs = Array.from(\n        tabListRef.current?.querySelectorAll('button[role=\"tab\"]') || []\n      );\n      // get the index of the active tab\n      const activeElement = tabs.indexOf(document.activeElement as HTMLElement);\n\n      if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const prevTab = tabs[activeElement - 1];\n        if (prevTab) {\n          (prevTab as HTMLElement).focus();\n        } else {\n          // focus the last tab\n          (tabs[tabs.length - 1] as HTMLElement).focus();\n        }\n      }\n      if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n        // prevent scrollbar from moving when arrow keys are pressed on tabs\n        event.preventDefault();\n        const nextTab = tabs[activeElement + 1];\n        if (nextTab) {\n          (nextTab as HTMLElement).focus();\n        } else {\n          // focus the first tab\n          (tabs[0] as HTMLElement).focus();\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      if (!isOpen) {\n        setActiveTab(firstTabId);\n      }\n    }, [isOpen, firstTabId]);\n\n    return (\n      <AppHeaderSectionContext.Provider\n        value={{ activePanel, setActivePanel, tabIndex, isCoachingEnabled }}\n      >\n        <StyledSection ref={ref} activePanelSelected={activePanelSelected}>\n          <ScrollableContent>\n            {showMarketingBanner && (\n              <Box\n                display={{\n                  _: activePanelSelected ? 'block' : 'none',\n                  xs: 'block',\n                }}\n              >\n                <MarketingBanner\n                  text={banner?.text}\n                  href={banner?.href}\n                  tabIndex={tabIndex}\n                />\n              </Box>\n            )}\n            <NavTabContainer p={8} rowGap={8}>\n              {isMobile && (\n                <MobileBackButton handleClose={handleClose} type={type} />\n              )}\n\n              <NavTabList type={type} ref={tabListRef}>\n                {navSections.map(({ item }, index) => (\n                  <NavTab\n                    key={item.id}\n                    item={item}\n                    onSelect={onSelect}\n                    isActive={activeTab === item.id}\n                    onKeyDown={onKeyDown}\n                    index={index}\n                  />\n                ))}\n              </NavTabList>\n              {navSections.map((section, index) => {\n                const {\n                  item: { id },\n                  panel: Panel,\n                } = section;\n\n                return (\n                  <NavTabPanel\n                    index={index}\n                    isActiveTab={activeTab === id}\n                    key={id}\n                    id={id}\n                  >\n                    {/*  display property ensures multiple elements arent seen at once */}\n                    <motion.div\n                      animate={{ opacity: activeTab === id ? 1 : 0 }}\n                      transition={{ duration: 0.4, ease: 'easeInOut' }}\n                    >\n                      <Panel />\n                    </motion.div>\n                  </NavTabPanel>\n                );\n              })}\n            </NavTabContainer>\n            {/* base nav */}\n            <MobileNavMenu\n              handleClose={handleClose}\n              type={type}\n              navSections={navSections}\n            />\n          </ScrollableContent>\n        </StyledSection>\n      </AppHeaderSectionContext.Provider>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAa,mBAAmB,YAK5B,EACE,SAAS,MACT,iBACA,WAAW,OACX,aACA,MACA,oBACA,aACA,qBAEF,QACG;CACH,MAAM,aAAa,cAAc,IAAI,MAAM;CAC3C,MAAM,CAAC,WAAW,gBAAgB,SAChC,sBAAsB,WACvB;CACD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;CACnE,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,EAAE,4BAA4B,mCAAmC;CACvE,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,SAAS,yBAAyB,iBAAiB;CACzD,MAAM,sBAAsB,QAAQ,QAAQ,QAAQ,QAAQ;CAE5D,MAAM,WAAW,SAAS,IAAI;CAC9B,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,WAAW,aAEb,KACA,OACA,SACG;AACH,eAAa,IAAI;AACjB,MAAI,QAAQ,MACV,uBAAsB,OAAO,KAAK;IAGtC,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,YAAY,aAAa,UAA+B;AAC5D,MAAI,CAAC,WAAW,QAAS;EAGzB,MAAM,OAAO,MAAM,KACjB,WAAW,SAAS,iBAAiB,uBAAqB,IAAI,EAAE,CACjE;EAED,MAAM,gBAAgB,KAAK,QAAQ,SAAS,cAA6B;AAEzE,MAAI,CAAC,WAAW,YAAY,CAAC,SAAS,MAAM,IAAI,EAAE;AAEhD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,KAAK,SAAS,GAAmB,OAAO;;AAGlD,MAAI,CAAC,aAAa,aAAa,CAAC,SAAS,MAAM,IAAI,EAAE;AAEnD,SAAM,gBAAgB;GACtB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QACF,CAAC,QAAwB,OAAO;OAGhC,CAAC,KAAK,GAAmB,OAAO;;IAGnC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,CAAC,OACH,cAAa,WAAW;IAEzB,CAAC,QAAQ,WAAW,CAAC;AAExB,QACE,oBAAC,wBAAwB;EACvB,OAAO;GAAE;GAAa;GAAgB;GAAU;GAAmB;YAEnE,oBAAC;GAAmB;GAA0B;aAC5C,qBAAC;IACE,uBACC,oBAAC;KACC,SAAS;MACP,GAAG,sBAAsB,UAAU;MACnC,IAAI;MACL;eAED,oBAAC;MACC,MAAM,QAAQ;MACd,MAAM,QAAQ;MACJ;OACV;MACE;IAER,qBAAC;KAAgB,GAAG;KAAG,QAAQ;;MAC5B,YACC,oBAAC;OAA8B;OAAmB;QAAQ;MAG5D,oBAAC;OAAiB;OAAM,KAAK;iBAC1B,YAAY,KAAK,EAAE,QAAQ,UAC1B,oBAAC;QAEO;QACI;QACV,UAAU,cAAc,KAAK;QAClB;QACJ;UALF,KAAK,GAMV,CACF;QACS;MACZ,YAAY,KAAK,SAAS,UAAU;OACnC,MAAM,EACJ,MAAM,EAAE,MACR,OAAO,UACL;AAEJ,cACE,oBAAC;QACQ;QACP,aAAa,cAAc;QAEvB;kBAGJ,oBAAC,OAAO;SACN,SAAS,EAAE,SAAS,cAAc,KAAK,IAAI,GAAG;SAC9C,YAAY;UAAE,UAAU;UAAK,MAAM;UAAa;mBAEhD,oBAAC,UAAQ;UACE;UATR,GAUO;QAEhB;;MACc;IAElB,oBAAC;KACc;KACP;KACO;MACb;OACgB;IACN;GACiB;EAGxC"}

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

@@ -50,4 +50,5 @@ const SkillTile = ({ item }) => {
 };
 
 //#endregion
-export { SkillTile };
+export { SkillTile };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SkillTile: React.FC<SkillTileProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSkillTile/index.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextProps } from '@codecademy/gamut';\nimport { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { AppHeaderLinkItem } from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\n\ninterface SkillTileProps {\n  item: AppHeaderLinkItem;\n}\n\nconst SkillAnchor = styled(Anchor)(\n  css({\n    backgroundColor: theme.colors.background,\n    borderColor: theme.colors['border-tertiary'] as TextProps['color'],\n    borderRadius: 'lg',\n    border: 1,\n    '&:hover, &:focus': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-100'],\n    },\n    '&:active': {\n      borderColor: theme.colors.primary as TextProps['color'],\n      background: theme.colors['navy-200'],\n    },\n  })\n);\n\nexport const SkillTile: React.FC<SkillTileProps> = ({ item }) => {\n  const { href, text, icon: Icon } = item;\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <SkillAnchor\n      href={href}\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, item);\n        handleClose();\n      }}\n      variant=\"interface\"\n      width=\"100%\"\n      tabIndex={tabIndex}\n    >\n      <FlexBox py={8} px={16} height={48} alignItems=\"center\">\n        {Icon && <Icon size={24} />}\n        <Text variant=\"p-base\" pl={16}>\n          {text}\n        </Text>\n      </FlexBox>\n    </SkillAnchor>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,cAAc,OAAO,OAAO,CAChC,IAAI;CACF,iBAAiB,MAAM,OAAO;CAC9B,aAAa,MAAM,OAAO;CAC1B,cAAc;CACd,QAAQ;CACR,oBAAoB;EAClB,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACD,YAAY;EACV,aAAa,MAAM,OAAO;EAC1B,YAAY,MAAM,OAAO;EAC1B;CACF,CAAC,CACH;AAED,MAAaA,aAAuC,EAAE,WAAW;CAC/D,MAAM,EAAE,MAAM,MAAM,MAAM,SAAS;CACnC,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,aAAa,4BAA4B;AAEjD,QACE,oBAAC;EACO;EACN,UAAU,UAA2D;AACnE,yBAAsB,OAAO,KAAK;AAClC,gBAAa;;EAEf,SAAQ;EACR,OAAM;EACI;YAEV,qBAAC;GAAQ,IAAI;GAAG,IAAI;GAAI,QAAQ;GAAI,YAAW;cAC5C,QAAQ,oBAAC,QAAK,MAAM,KAAM,EAC3B,oBAAC;IAAK,SAAQ;IAAS,IAAI;cACxB;KACI;IACC;GACE"}

package/dist/AppHeader/Search/DefaultResults.js

@@ -99,4 +99,5 @@ const PopularContent = ({ onTrackingClick }) => {
 };
 
 //#endregion
-export { PopularContent, PopularSearches };
+export { PopularContent, PopularSearches };
+//# sourceMappingURL=DefaultResults.js.map

package/dist/AppHeader/Search/DefaultResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultResults.js","names":["PopularSearches: React.FC<PopularSearchesProps>","PopularContent: React.FC<PopularContentProps>"],"sources":["../../../src/AppHeader/Search/DefaultResults.tsx"],"sourcesContent":["import { Badge, Box, FlexBox, MenuItem, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { popularContent, popularSearchTerms } from './consts';\nimport { SemiboldSearchIcon } from './SearchPane';\n\nconst StyledMenuItem = styled(MenuItem)`\n  &:focus-visible:after {\n    left: -4px;\n  }\n  padding: 8px 0;\n`;\n\ninterface PopularSearchesProps {\n  navigateToSearch: (searchTerm: string) => void;\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularSearches: React.FC<PopularSearchesProps> = ({\n  navigateToSearch,\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        Popular searches\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularSearchTerms.map((term, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={term}\n            id={term}\n            href={`/search?query=${encodeURIComponent(term)}`}\n            onClick={() => {\n              navigateToSearch(term);\n              onTrackingClick('popular_search_term', {\n                misc: JSON.stringify({\n                  value: term.toLowerCase(),\n                  index: i,\n                }),\n              });\n            }}\n            pl={0}\n          >\n            <SemiboldSearchIcon mb={2 as 0} size={14} strokeWidth={8} />\n            <Text variant={isMobile ? 'p-base' : 'p-large'} ml={12}>\n              {term}\n            </Text>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n\ninterface PopularContentProps {\n  onTrackingClick: (\n    target: string,\n    extraTrackingProps?: Record<string, string>\n  ) => void;\n}\n\nexport const PopularContent: React.FC<PopularContentProps> = ({\n  onTrackingClick,\n}) => {\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  return (\n    <Box mb={24} as=\"li\">\n      <Text as=\"h2\" variant=\"title-xs\" mb={12}>\n        What our members are learning\n      </Text>\n      <FlexBox as=\"ul\" listStyle=\"none\" p={0} flexDirection=\"column\">\n        {popularContent.map((c, i) => (\n          <StyledMenuItem\n            itemType=\"link\"\n            key={c.title}\n            href={c.href}\n            pl={0}\n            onClick={() =>\n              onTrackingClick('popular_content', {\n                slug: c.slug,\n                ...(c.contentId ? { content_id: c.contentId } : {}),\n                misc: JSON.stringify({\n                  content_type: c.type.toLowerCase(),\n                  index: i,\n                  href: c.href,\n                }),\n              })\n            }\n          >\n            <FlexBox flexDirection=\"row\" alignItems=\"center\">\n              <Text variant={isMobile ? 'p-base' : 'p-large'} mr={12}>\n                {c.title}\n              </Text>\n              <Badge size=\"sm\" variant=\"tertiary\">\n                {c.type}\n              </Badge>\n            </FlexBox>\n          </StyledMenuItem>\n        ))}\n      </FlexBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB,OAAO,SAAS;;;;;;AAevC,MAAaA,mBAAmD,EAC9D,kBACA,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,mBAAmB,KAAK,MAAM,MAC7B,qBAAC;IACC,UAAS;IAET,IAAI;IACJ,MAAM,iBAAiB,mBAAmB,KAAK;IAC/C,eAAe;AACb,sBAAiB,KAAK;AACtB,qBAAgB,uBAAuB,EACrC,MAAM,KAAK,UAAU;MACnB,OAAO,KAAK,aAAa;MACzB,OAAO;MACR,CAAC,EACH,CAAC;;IAEJ,IAAI;eAEJ,oBAAC;KAAmB,IAAI;KAAQ,MAAM;KAAI,aAAa;MAAK,EAC5D,oBAAC;KAAK,SAAS,WAAW,WAAW;KAAW,IAAI;eACjD;MACI;MAjBF,KAkBU,CACjB;IACM;GACN;;AAWV,MAAaC,kBAAiD,EAC5D,sBACI;CACJ,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAE3D,QACE,qBAAC;EAAI,IAAI;EAAI,IAAG;aACd,oBAAC;GAAK,IAAG;GAAK,SAAQ;GAAW,IAAI;aAAI;IAElC,EACP,oBAAC;GAAQ,IAAG;GAAK,WAAU;GAAO,GAAG;GAAG,eAAc;aACnD,eAAe,KAAK,GAAG,MACtB,oBAAC;IACC,UAAS;IAET,MAAM,EAAE;IACR,IAAI;IACJ,eACE,gBAAgB,mBAAmB;KACjC,MAAM,EAAE;KACR,GAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,GAAG,EAAE;KAClD,MAAM,KAAK,UAAU;MACnB,cAAc,EAAE,KAAK,aAAa;MAClC,OAAO;MACP,MAAM,EAAE;MACT,CAAC;KACH,CAAC;cAGJ,qBAAC;KAAQ,eAAc;KAAM,YAAW;gBACtC,oBAAC;MAAK,SAAS,WAAW,WAAW;MAAW,IAAI;gBACjD,EAAE;OACE,EACP,oBAAC;MAAM,MAAK;MAAK,SAAQ;gBACtB,EAAE;OACG;MACA;MAtBL,EAAE,MAuBQ,CACjB;IACM;GACN"}

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.js

@@ -65,4 +65,5 @@ const QuizAndHelpCenterLinks = ({ onTrackingClick, handleCloseDropdown }) => {
 };
 
 //#endregion
-export { QuizAndHelpCenterLinks };
+export { QuizAndHelpCenterLinks };
+//# sourceMappingURL=QuizAndHelpCenterLinks.js.map

package/dist/AppHeader/Search/QuizAndHelpCenterLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizAndHelpCenterLinks.js","names":["QuizAndHelpCenterLinks: React.FC<{\n  onTrackingClick: (target: string) => void;\n  handleCloseDropdown: () => void;\n}>"],"sources":["../../../src/AppHeader/Search/QuizAndHelpCenterLinks.tsx"],"sourcesContent":["import { Anchor, FlexBox, Text, TextButton } from '@codecademy/gamut';\nimport { MiniArrowRightIcon, SupportIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { useHeaderDisplayContext } from '../../GlobalHeader/context';\n\nexport const BoldSupportIcon = styled(SupportIcon)`\n  path {\n    stroke-width: 2.5;\n  }\n  circle {\n    stroke-width: 2.5;\n  }\n`;\n\nexport const QuizAndHelpCenterLinks: React.FC<{\n  onTrackingClick: (target: string) => void;\n  handleCloseDropdown: () => void;\n}> = ({ onTrackingClick, handleCloseDropdown }) => {\n  const { showOnboardingQuiz, showSortingQuiz } = useHeaderDisplayContext();\n\n  const isMobile = theme.breakpoints.xs || theme.breakpoints.sm;\n\n  const quizLink = showOnboardingQuiz\n    ? '/welcome/find-a-course'\n    : '/explore/sorting-quiz';\n\n  const showQuiz = showOnboardingQuiz || showSortingQuiz;\n\n  return (\n    <FlexBox\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      borderTop={1}\n      borderColor=\"border-tertiary\"\n      py={8}\n    >\n      <FlexBox flexDirection={{ _: 'column', md: 'row' }}>\n        {showQuiz && (\n          <>\n            <Text fontSize={16} mr={10 as 0}>\n              Not sure where to begin?\n            </Text>\n            <Anchor\n              href={quizLink}\n              variant=\"standard\"\n              onClick={() => {\n                onTrackingClick(\n                  showOnboardingQuiz ? 'sorting_quiz' : 'onboarding_quiz'\n                );\n                handleCloseDropdown();\n              }}\n            >\n              <FlexBox alignItems=\"center\" gap={10 as 0} overflow=\"visible\">\n                <Text fontSize={{ _: 14, md: 16 }}>Take our quiz</Text>\n                <MiniArrowRightIcon size={12} />\n              </FlexBox>\n            </Anchor>\n          </>\n        )}\n      </FlexBox>\n      <TextButton\n        href=\"/help\"\n        onClick={() => onTrackingClick('help_center')}\n        size={isMobile ? 'small' : 'normal'}\n      >\n        <BoldSupportIcon mr={8} size={12} />\n        Help Center\n      </TextButton>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,kBAAkB,OAAO,YAAY;;;;;;;;AASlD,MAAaA,0BAGP,EAAE,iBAAiB,0BAA0B;CACjD,MAAM,EAAE,oBAAoB,oBAAoB,yBAAyB;CAEzE,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,YAAY;AAQ3D,QACE,qBAAC;EACC,gBAAe;EACf,YAAW;EACX,WAAW;EACX,aAAY;EACZ,IAAI;aAEJ,oBAAC;GAAQ,eAAe;IAAE,GAAG;IAAU,IAAI;IAAO;cAVrC,sBAAsB,oBAY/B,4CACE,oBAAC;IAAK,UAAU;IAAI,IAAI;cAAS;KAE1B,EACP,oBAAC;IACC,MArBK,qBACb,2BACA;IAoBQ,SAAQ;IACR,eAAe;AACb,qBACE,qBAAqB,iBAAiB,kBACvC;AACD,0BAAqB;;cAGvB,qBAAC;KAAQ,YAAW;KAAS,KAAK;KAAS,UAAS;gBAClD,oBAAC;MAAK,UAAU;OAAE,GAAG;OAAI,IAAI;OAAI;gBAAE;OAAoB,EACvD,oBAAC,sBAAmB,MAAM,KAAM;MACxB;KACH,IACR;IAEG,EACV,qBAAC;GACC,MAAK;GACL,eAAe,gBAAgB,cAAc;GAC7C,MAAM,WAAW,UAAU;cAE3B,oBAAC;IAAgB,IAAI;IAAG,MAAM;KAAM;IAEzB;GACL"}

package/dist/AppHeader/Search/SearchButton.js

@@ -46,4 +46,5 @@ const SearchButton = ({ isSearchVisible, searchButtonRef, setIsSearchVisible, to
 };
 
 //#endregion
-export { SearchButton };
+export { SearchButton };
+//# sourceMappingURL=SearchButton.js.map

package/dist/AppHeader/Search/SearchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchButton.js","names":[],"sources":["../../../src/AppHeader/Search/SearchButton.tsx"],"sourcesContent":["import { IconButton } from '@codecademy/gamut';\nimport { SearchIcon } from '@codecademy/gamut-icons';\nimport { useEffect } from 'react';\n\nimport { useAppHeaderContext } from '../AppHeaderElements/AppHeaderProvider';\nimport { useSearchTrackingContext } from './SearchTrackingProvider';\nimport { SearchButtonProps } from './types';\n\nlet autocompleteCacheWarmed = false;\n\nfunction warmAutocompleteCache() {\n  if (typeof window !== 'undefined' && !autocompleteCacheWarmed) {\n    autocompleteCacheWarmed = true;\n    const { search } = window.location;\n    const apiUrl = `/api/portal/search/autocomplete-preload${search}`;\n    const headers = { 'Warm-Only': 'true' };\n    fetch(apiUrl, { headers });\n  }\n}\n\nexport const SearchButton = ({\n  isSearchVisible,\n  searchButtonRef,\n  setIsSearchVisible,\n  toggleSearch,\n  onSearchAsYouType,\n}: SearchButtonProps) => {\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { onSearchAsYouTypeParams } = useSearchTrackingContext();\n\n  const expandedToggleSearch = () => {\n    // if the search pane is visible (about to be closed) and there are search params with a query,\n    // trigger the search event before toggling\n    if (\n      isSearchVisible &&\n      onSearchAsYouType &&\n      onSearchAsYouTypeParams &&\n      onSearchAsYouTypeParams.query\n    ) {\n      const { query, searchId, resultsCount, queryLoadTime } =\n        onSearchAsYouTypeParams;\n      onSearchAsYouType(query, searchId, resultsCount, queryLoadTime);\n    }\n\n    toggleSearch();\n\n    if (!isSearchVisible && setLastOpenedDropdown) {\n      setLastOpenedDropdown('search');\n    }\n  };\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== 'search' && isSearchVisible) {\n      setIsSearchVisible(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  return (\n    <IconButton\n      aria-expanded={isSearchVisible}\n      data-testid=\"header-search\"\n      icon={SearchIcon}\n      onClick={expandedToggleSearch}\n      onMouseOver={warmAutocompleteCache}\n      ref={searchButtonRef}\n      tip=\"Search\"\n      tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n      variant=\"interface\"\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAI,0BAA0B;AAE9B,SAAS,wBAAwB;AAC/B,KAAI,OAAO,WAAW,eAAe,CAAC,yBAAyB;AAC7D,4BAA0B;EAC1B,MAAM,EAAE,WAAW,OAAO;EAC1B,MAAM,SAAS,0CAA0C;AAEzD,QAAM,QAAQ,EAAE,SADA,EAAE,aAAa,QAAQ,EACd,CAAC;;;AAI9B,MAAa,gBAAgB,EAC3B,iBACA,iBACA,oBACA,cACA,wBACuB;CACvB,MAAM,EAAE,oBAAoB,0BAA0B,qBAAqB;CAC3E,MAAM,EAAE,4BAA4B,0BAA0B;CAE9D,MAAM,6BAA6B;AAGjC,MACE,mBACA,qBACA,2BACA,wBAAwB,OACxB;GACA,MAAM,EAAE,OAAO,UAAU,cAAc,kBACrC;AACF,qBAAkB,OAAO,UAAU,cAAc,cAAc;;AAGjE,gBAAc;AAEd,MAAI,CAAC,mBAAmB,sBACtB,uBAAsB,SAAS;;AAInC,iBAAgB;AACd,MAAI,uBAAuB,YAAY,gBACrC,oBAAmB,MAAM;IAG1B,CAAC,mBAAmB,CAAC;AAExB,QACE,oBAAC;EACC,iBAAe;EACf,eAAY;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACb,KAAK;EACL,KAAI;EACJ,UAAU;GAAE,WAAW;GAAiB,WAAW;GAAY;EAC/D,SAAQ;GACR"}

package/dist/AppHeader/Search/SearchPane.js

@@ -476,4 +476,5 @@ const SearchPane = ({ onSearch, onTrackingClick, searchButtonRef, toggleSearch,
 };
 
 //#endregion
-export { SearchPane, SemiboldSearchIcon };
+export { SearchPane, SemiboldSearchIcon };
+//# sourceMappingURL=SearchPane.js.map