@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

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

@@ -1,113 +1,94 @@
-import _styled from "@emotion/styled/base";
-import { Menu } from '@codecademy/gamut';
-import { ColorMode, css } from '@codecademy/gamut-styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import { AnimatedSimpleDropdown } from '../../shared';
-import { AppHeaderLinkSections } from '../AppHeaderLinkSections';
-import { AppHeaderMenuProvider } from '../AppHeaderMenuProvider';
-import { AppHeaderMenuNavButton } from '../AppHeaderNavButton';
-import { useAppHeaderContext } from '../AppHeaderProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledLinkSection = /*#__PURE__*/_styled(AppHeaderLinkSections, {
-  target: "efmcgmc1",
-  label: "StyledLinkSection"
-})(css({
-  padding: `0.75rem 0`,
-  position: `absolute`
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCMEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZW51IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ29sb3JNb2RlLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQW5pbWF0ZWRTaW1wbGVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaW5rU2VjdGlvbnMgfSBmcm9tICcuLi9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWVudVByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyTWVudVByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlck1lbnVOYXZCdXR0b24gfSBmcm9tICcuLi9BcHBIZWFkZXJOYXZCdXR0b24nO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclByb3ZpZGVyJztcblxuY29uc3QgU3R5bGVkTGlua1NlY3Rpb24gPSBzdHlsZWQoQXBwSGVhZGVyTGlua1NlY3Rpb25zKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiBgMC43NXJlbSAwYCxcbiAgICBwb3NpdGlvbjogYGFic29sdXRlYCxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZERyb3Bkb3duTWVudSA9IHN0eWxlZChNZW51KShcbiAgY3NzKHtcbiAgICBib3JkZXI6IDEsXG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckRyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJlxuICBQaWNrPFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBNZW51PiwgJ3NwYWNpbmcnPiAmIHtcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW07XG4gICAgLyoqXG4gICAgICogSWYgdHJ1ZSwgdGhlIGRyb3Bkb3duIGlzIGJlaW5nIHJlbmRlcmVkIGFzIGEgc3RhbmRhbG9uZSBjb21wb25lbnQsIHJhdGhlciB0aGFuXG4gICAgICogcGFydCBvZiB0aGUgZ2xvYmFsIGhlYWRlci5cbiAgICAgKi9cbiAgICBzdGFuZGFsb25lPzogYm9vbGVhbjtcbiAgfTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRyb3Bkb3duOiBSZWFjdC5GQzxBcHBIZWFkZXJEcm9wZG93blByb3BzPiA9ICh7XG4gIGFjdGlvbixcbiAgaXRlbSxcbiAgc3BhY2luZyA9ICdub3JtYWwnLFxuICBzdGFuZGFsb25lLFxufSkgPT4ge1xuICBjb25zdCBsaXN0UmVmID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBkcm9wZG93bklkID0gaXRlbT8udGV4dCA/PyBpdGVtPy50eXBlO1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgaWYgKGFjdGlvbikgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKGRyb3Bkb3duSWQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlib2FyZENsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChsYXN0T3BlbmVkRHJvcGRvd24gIT09IGRyb3Bkb3duSWQgJiYgaXNPcGVuKSB7XG4gICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIH1cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3QtaG9va3MvZXhoYXVzdGl2ZS1kZXBzXG4gIH0sIFtsYXN0T3BlbmVkRHJvcGRvd25dKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIGhhbmRsZUNsaWNrT3V0c2lkZShldmVudDogTW91c2VFdmVudCB8IEV2ZW50KSB7XG4gICAgICBjb25zdCBsaXN0ID0gbGlzdFJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGxpc3QgJiZcbiAgICAgICAgIWxpc3QuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtsaXN0UmVmLCBpc09wZW5dKTtcblxuICBjb25zdCBpc1Byb2ZpbGVEcm9wZG93biA9IGl0ZW0udHlwZSA9PT0gJ3Byb2ZpbGUtZHJvcGRvd24nO1xuICBjb25zdCBpc0dlbmVyaWNEcm9wZG93biA9IFsnZHJvcGRvd24nLCAncmVzb3VyY2VzLXNpbXBsZS1kcm9wZG93biddLmluY2x1ZGVzKFxuICAgIGl0ZW0udHlwZVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlck1lbnVQcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlS2V5Ym9hcmRDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyTWVudU5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAvPlxuICAgICAgPEFuaW1hdGVkU2ltcGxlRHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICByaWdodDogaXNQcm9maWxlRHJvcGRvd24gPyAnMC41cmVtJyA6ICcnLFxuICAgICAgICAgIHRvcDogaXNHZW5lcmljRHJvcGRvd24gJiYgc3RhbmRhbG9uZSA/ICcyLjc1cmVtJyA6ICczLjVyZW0nLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxTdHlsZWREcm9wZG93bk1lbnVcbiAgICAgICAgICAgIG1pbldpZHRoPVwiMjAycHhcIlxuICAgICAgICAgICAgcmVmPXtsaXN0UmVmfVxuICAgICAgICAgICAgcm9sZT17aXNQcm9maWxlRHJvcGRvd24gPyAnbWVudScgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBzcGFjaW5nPXtzcGFjaW5nfVxuICAgICAgICAgICAgdmFyaWFudD1cInBvcG92ZXJcIlxuICAgICAgICAgICAgd2lkdGg9XCJmaXQtY29udGVudFwiXG4gICAgICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgICAgICBweT17c3BhY2luZyA9PT0gJ25vcm1hbCcgPyAxMiA6IDB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZExpbmtTZWN0aW9uIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBpc09wZW49e2lzT3Blbn0gLz5cbiAgICAgICAgICA8L1N0eWxlZERyb3Bkb3duTWVudT5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L0FuaW1hdGVkU2ltcGxlRHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJNZW51UHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */");
-const StyledDropdownMenu = /*#__PURE__*/_styled(Menu, {
-  target: "efmcgmc0",
-  label: "StyledDropdownMenu"
-})(css({
-  border: 1,
-  borderColor: 'border-tertiary',
-  borderRadius: 'lg'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRHJvcGRvd24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCMkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEcm9wZG93bi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNZW51IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ29sb3JNb2RlLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQW5pbWF0ZWRTaW1wbGVEcm9wZG93bixcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaW5rU2VjdGlvbnMgfSBmcm9tICcuLi9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTWVudVByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyTWVudVByb3ZpZGVyJztcbmltcG9ydCB7IEFwcEhlYWRlck1lbnVOYXZCdXR0b24gfSBmcm9tICcuLi9BcHBIZWFkZXJOYXZCdXR0b24nO1xuaW1wb3J0IHsgdXNlQXBwSGVhZGVyQ29udGV4dCB9IGZyb20gJy4uL0FwcEhlYWRlclByb3ZpZGVyJztcblxuY29uc3QgU3R5bGVkTGlua1NlY3Rpb24gPSBzdHlsZWQoQXBwSGVhZGVyTGlua1NlY3Rpb25zKShcbiAgY3NzKHtcbiAgICBwYWRkaW5nOiBgMC43NXJlbSAwYCxcbiAgICBwb3NpdGlvbjogYGFic29sdXRlYCxcbiAgfSlcbik7XG5cbmNvbnN0IFN0eWxlZERyb3Bkb3duTWVudSA9IHN0eWxlZChNZW51KShcbiAgY3NzKHtcbiAgICBib3JkZXI6IDEsXG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgfSlcbik7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckRyb3Bkb3duUHJvcHMgPSBBcHBIZWFkZXJBY3Rpb24gJlxuICBQaWNrPFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBNZW51PiwgJ3NwYWNpbmcnPiAmIHtcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW07XG4gICAgLyoqXG4gICAgICogSWYgdHJ1ZSwgdGhlIGRyb3Bkb3duIGlzIGJlaW5nIHJlbmRlcmVkIGFzIGEgc3RhbmRhbG9uZSBjb21wb25lbnQsIHJhdGhlciB0aGFuXG4gICAgICogcGFydCBvZiB0aGUgZ2xvYmFsIGhlYWRlci5cbiAgICAgKi9cbiAgICBzdGFuZGFsb25lPzogYm9vbGVhbjtcbiAgfTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckRyb3Bkb3duOiBSZWFjdC5GQzxBcHBIZWFkZXJEcm9wZG93blByb3BzPiA9ICh7XG4gIGFjdGlvbixcbiAgaXRlbSxcbiAgc3BhY2luZyA9ICdub3JtYWwnLFxuICBzdGFuZGFsb25lLFxufSkgPT4ge1xuICBjb25zdCBsaXN0UmVmID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBidXR0b25SZWYgPSB1c2VSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcblxuICBjb25zdCBkcm9wZG93bklkID0gaXRlbT8udGV4dCA/PyBpdGVtPy50eXBlO1xuXG4gIGNvbnN0IHRvZ2dsZUlzT3BlbiA9ICgpID0+IHNldElzT3BlbigocHJldikgPT4gIXByZXYpO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICB0b2dnbGVJc09wZW4oKTtcbiAgICBpZiAoIWlzT3Blbikge1xuICAgICAgaWYgKGFjdGlvbikgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICAgIGlmIChzZXRMYXN0T3BlbmVkRHJvcGRvd24pIHtcbiAgICAgICAgc2V0TGFzdE9wZW5lZERyb3Bkb3duKGRyb3Bkb3duSWQpO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBjb25zdCBoYW5kbGVLZXlib2FyZENsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgYnV0dG9uUmVmLmN1cnJlbnQ/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChsYXN0T3BlbmVkRHJvcGRvd24gIT09IGRyb3Bkb3duSWQgJiYgaXNPcGVuKSB7XG4gICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgIH1cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3QtaG9va3MvZXhoYXVzdGl2ZS1kZXBzXG4gIH0sIFtsYXN0T3BlbmVkRHJvcGRvd25dKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZ1bmN0aW9uIGhhbmRsZUNsaWNrT3V0c2lkZShldmVudDogTW91c2VFdmVudCB8IEV2ZW50KSB7XG4gICAgICBjb25zdCBsaXN0ID0gbGlzdFJlZj8uY3VycmVudDtcbiAgICAgIGNvbnN0IGJ1dHRvbiA9IGJ1dHRvblJlZj8uY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIGxpc3QgJiZcbiAgICAgICAgIWxpc3QuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIHNldElzT3BlbihmYWxzZSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtsaXN0UmVmLCBpc09wZW5dKTtcblxuICBjb25zdCBpc1Byb2ZpbGVEcm9wZG93biA9IGl0ZW0udHlwZSA9PT0gJ3Byb2ZpbGUtZHJvcGRvd24nO1xuICBjb25zdCBpc0dlbmVyaWNEcm9wZG93biA9IFsnZHJvcGRvd24nLCAncmVzb3VyY2VzLXNpbXBsZS1kcm9wZG93biddLmluY2x1ZGVzKFxuICAgIGl0ZW0udHlwZVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEFwcEhlYWRlck1lbnVQcm92aWRlciBoYW5kbGVDbG9zZT17aGFuZGxlS2V5Ym9hcmRDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyTWVudU5hdkJ1dHRvblxuICAgICAgICBidXR0b25SZWY9e2J1dHRvblJlZn1cbiAgICAgICAgaGFuZGxlT25DbGljaz17aGFuZGxlT25DbGlja31cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAvPlxuICAgICAgPEFuaW1hdGVkU2ltcGxlRHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICByaWdodDogaXNQcm9maWxlRHJvcGRvd24gPyAnMC41cmVtJyA6ICcnLFxuICAgICAgICAgIHRvcDogaXNHZW5lcmljRHJvcGRvd24gJiYgc3RhbmRhbG9uZSA/ICcyLjc1cmVtJyA6ICczLjVyZW0nLFxuICAgICAgICB9fVxuICAgICAgPlxuICAgICAgICA8Q29sb3JNb2RlIG1vZGU9XCJsaWdodFwiPlxuICAgICAgICAgIDxTdHlsZWREcm9wZG93bk1lbnVcbiAgICAgICAgICAgIG1pbldpZHRoPVwiMjAycHhcIlxuICAgICAgICAgICAgcmVmPXtsaXN0UmVmfVxuICAgICAgICAgICAgcm9sZT17aXNQcm9maWxlRHJvcGRvd24gPyAnbWVudScgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICBzcGFjaW5nPXtzcGFjaW5nfVxuICAgICAgICAgICAgdmFyaWFudD1cInBvcG92ZXJcIlxuICAgICAgICAgICAgd2lkdGg9XCJmaXQtY29udGVudFwiXG4gICAgICAgICAgICB6SW5kZXg9ezF9XG4gICAgICAgICAgICBweT17c3BhY2luZyA9PT0gJ25vcm1hbCcgPyAxMiA6IDB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFN0eWxlZExpbmtTZWN0aW9uIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBpc09wZW49e2lzT3Blbn0gLz5cbiAgICAgICAgICA8L1N0eWxlZERyb3Bkb3duTWVudT5cbiAgICAgICAgPC9Db2xvck1vZGU+XG4gICAgICA8L0FuaW1hdGVkU2ltcGxlRHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJNZW51UHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */");
-export const AppHeaderDropdown = ({
-  action,
-  item,
-  spacing = 'normal',
-  standalone
-}) => {
-  const listRef = useRef(null);
-  const buttonRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    lastOpenedDropdown,
-    setLastOpenedDropdown
-  } = useAppHeaderContext();
-  const dropdownId = item?.text ?? item?.type;
-  const toggleIsOpen = () => setIsOpen(prev => !prev);
-  const handleOnClick = event => {
-    toggleIsOpen();
-    if (!isOpen) {
-      if (action) action(event, item);
-      if (setLastOpenedDropdown) {
-        setLastOpenedDropdown(dropdownId);
-      }
-    }
-  };
-  const handleKeyboardClose = useCallback(() => {
-    setIsOpen(false);
-    buttonRef.current?.focus();
-  }, []);
-  useEffect(() => {
-    if (lastOpenedDropdown !== dropdownId && isOpen) {
-      setIsOpen(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastOpenedDropdown]);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      const list = listRef?.current;
-      const button = buttonRef?.current;
-      if (isOpen && list && !list.contains(event.target) && button && !button.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('blur', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('blur', handleClickOutside);
-    };
-  }, [listRef, isOpen]);
-  const isProfileDropdown = item.type === 'profile-dropdown';
-  const isGenericDropdown = ['dropdown', 'resources-simple-dropdown'].includes(item.type);
-  return /*#__PURE__*/_jsxs(AppHeaderMenuProvider, {
-    handleClose: handleKeyboardClose,
-    children: [/*#__PURE__*/_jsx(AppHeaderMenuNavButton, {
-      buttonRef: buttonRef,
-      handleOnClick: handleOnClick,
-      isOpen: isOpen,
-      item: item
-    }), /*#__PURE__*/_jsx(AnimatedSimpleDropdown, {
-      isOpen: isOpen
-      // eslint-disable-next-line gamut/no-inline-style
-      ,
-      style: {
-        right: isProfileDropdown ? '0.5rem' : '',
-        top: isGenericDropdown && standalone ? '2.75rem' : '3.5rem'
-      },
-      children: /*#__PURE__*/_jsx(ColorMode, {
-        mode: "light",
-        children: /*#__PURE__*/_jsx(StyledDropdownMenu, {
-          minWidth: "202px",
-          ref: listRef,
-          role: isProfileDropdown ? 'menu' : undefined,
-          spacing: spacing,
-          variant: "popover",
-          width: "fit-content",
-          zIndex: 1,
-          py: spacing === 'normal' ? 12 : 0,
-          children: /*#__PURE__*/_jsx(StyledLinkSection, {
-            action: action,
-            item: item,
-            isOpen: isOpen
-          })
-        })
-      })
-    })]
-  });
-};
+import { AnimatedSimpleDropdown } from "../../shared/elements.js";
+import { useAppHeaderContext } from "../AppHeaderProvider/index.js";
+import { AppHeaderMenuProvider } from "../AppHeaderMenuProvider/index.js";
+import { AppHeaderMenuNavButton } from "../AppHeaderNavButton/index.js";
+import { AppHeaderLinkSections } from "../AppHeaderLinkSections/index.js";
+import { Menu } from "@codecademy/gamut";
+import { ColorMode, css } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderDropdown/index.tsx
+const StyledLinkSection = styled(AppHeaderLinkSections)(css({
+	padding: `0.75rem 0`,
+	position: `absolute`
+}));
+const StyledDropdownMenu = styled(Menu)(css({
+	border: 1,
+	borderColor: "border-tertiary",
+	borderRadius: "lg"
+}));
+const AppHeaderDropdown = ({ action, item, spacing = "normal", standalone }) => {
+	const listRef = useRef(null);
+	const buttonRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
+	const dropdownId = item?.text ?? item?.type;
+	const toggleIsOpen = () => setIsOpen((prev) => !prev);
+	const handleOnClick = (event) => {
+		toggleIsOpen();
+		if (!isOpen) {
+			if (action) action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(dropdownId);
+		}
+	};
+	const handleKeyboardClose = useCallback(() => {
+		setIsOpen(false);
+		buttonRef.current?.focus();
+	}, []);
+	useEffect(() => {
+		if (lastOpenedDropdown !== dropdownId && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	useEffect(() => {
+		function handleClickOutside(event) {
+			const list = listRef?.current;
+			const button = buttonRef?.current;
+			if (isOpen && list && !list.contains(event.target) && button && !button.contains(event.target)) setIsOpen(false);
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("blur", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("blur", handleClickOutside);
+		};
+	}, [listRef, isOpen]);
+	const isProfileDropdown = item.type === "profile-dropdown";
+	const isGenericDropdown = ["dropdown", "resources-simple-dropdown"].includes(item.type);
+	return /* @__PURE__ */ jsxs(AppHeaderMenuProvider, {
+		handleClose: handleKeyboardClose,
+		children: [/* @__PURE__ */ jsx(AppHeaderMenuNavButton, {
+			buttonRef,
+			handleOnClick,
+			isOpen,
+			item
+		}), /* @__PURE__ */ jsx(AnimatedSimpleDropdown, {
+			isOpen,
+			style: {
+				right: isProfileDropdown ? "0.5rem" : "",
+				top: isGenericDropdown && standalone ? "2.75rem" : "3.5rem"
+			},
+			children: /* @__PURE__ */ jsx(ColorMode, {
+				mode: "light",
+				children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
+					minWidth: "202px",
+					ref: listRef,
+					role: isProfileDropdown ? "menu" : void 0,
+					spacing,
+					variant: "popover",
+					width: "fit-content",
+					zIndex: 1,
+					py: spacing === "normal" ? 12 : 0,
+					children: /* @__PURE__ */ jsx(StyledLinkSection, {
+						action,
+						item,
+						isOpen
+					})
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { AppHeaderDropdown };

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

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_keyboardNav = require('../../shared/keyboardNav.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_fp_noop = require("lodash/fp/noop");
+lodash_fp_noop = require_rolldown_runtime.__toESM(lodash_fp_noop);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.tsx
+const AppHeaderDropdownContext = (0, react.createContext)({
+	firstItemRef: void 0,
+	setFirstItemRef: void 0,
+	handleClose: () => lodash_fp_noop.default
+});
+const AppHeaderDropdownProvider = ({ children, handleClose }) => {
+	const [firstItemRef, setFirstItemRef] = (0, react.useState)(void 0);
+	const onKeyDown = require_keyboardNav.useOnEscHandler(handleClose);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppHeaderDropdownContext.Provider, {
+		value: {
+			firstItemRef,
+			setFirstItemRef,
+			handleClose
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			onKeyDown,
+			children
+		})
+	});
+};
+const useAppHeaderDropdownContext = () => (0, react.useContext)(AppHeaderDropdownContext);
+
+//#endregion
+exports.AppHeaderDropdownContext = AppHeaderDropdownContext;
+exports.AppHeaderDropdownProvider = AppHeaderDropdownProvider;
+exports.useAppHeaderDropdownContext = useAppHeaderDropdownContext;

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

@@ -1,29 +1,31 @@
-import { Box } from '@codecademy/gamut';
-import noop from 'lodash/fp/noop';
-import React, { createContext, useContext, useState } from 'react';
-import { useOnEscHandler } from '../../shared';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const AppHeaderDropdownContext = /*#__PURE__*/createContext({
-  firstItemRef: undefined,
-  setFirstItemRef: undefined,
-  handleClose: () => noop
+import { useOnEscHandler } from "../../shared/keyboardNav.js";
+import { Box } from "@codecademy/gamut";
+import React, { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import noop from "lodash/fp/noop";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.tsx
+const AppHeaderDropdownContext = createContext({
+	firstItemRef: void 0,
+	setFirstItemRef: void 0,
+	handleClose: () => noop
 });
-export const AppHeaderDropdownProvider = ({
-  children,
-  handleClose
-}) => {
-  const [firstItemRef, setFirstItemRef] = useState(undefined);
-  const onKeyDown = useOnEscHandler(handleClose);
-  return /*#__PURE__*/_jsx(AppHeaderDropdownContext.Provider, {
-    value: {
-      firstItemRef,
-      setFirstItemRef,
-      handleClose
-    },
-    children: /*#__PURE__*/_jsx(Box, {
-      onKeyDown: onKeyDown,
-      children: children
-    })
-  });
+const AppHeaderDropdownProvider = ({ children, handleClose }) => {
+	const [firstItemRef, setFirstItemRef] = useState(void 0);
+	const onKeyDown = useOnEscHandler(handleClose);
+	return /* @__PURE__ */ jsx(AppHeaderDropdownContext.Provider, {
+		value: {
+			firstItemRef,
+			setFirstItemRef,
+			handleClose
+		},
+		children: /* @__PURE__ */ jsx(Box, {
+			onKeyDown,
+			children
+		})
+	});
 };
-export const useAppHeaderDropdownContext = () => useContext(AppHeaderDropdownContext);
+const useAppHeaderDropdownContext = () => useContext(AppHeaderDropdownContext);
+
+//#endregion
+export { AppHeaderDropdownContext, AppHeaderDropdownProvider, useAppHeaderDropdownContext };

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

@@ -0,0 +1,61 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.tsx
+const StyledCard = (0, _emotion_styled.default)(_codecademy_gamut.Card)`
+  &:hover {
+    color: ${({ theme: theme$1 }) => theme$1.colors.primary};
+    border-color: ${({ theme: theme$1 }) => theme$1.colors.primary};
+  }
+`;
+const AppHeaderFeatureCard = ({ item }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCard, {
+		isInteractive: true,
+		px: 16,
+		py: 24,
+		borderRadius: "lg",
+		border: 1,
+		borderColor: "border-tertiary",
+		display: "flex",
+		alignItems: "flex-start",
+		flexDirection: "column",
+		height: "100%",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				alignItems: "center",
+				gap: 8,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+					background: _codecademy_gamut_styles.theme.colors["navy-200"],
+					borderRadius: "md",
+					p: 4,
+					height: 32,
+					width: 32,
+					alignItems: "center",
+					justifyContent: "center",
+					children: item.icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					variant: "p-large",
+					fontWeight: 700,
+					as: "h3",
+					children: item.linkItem.text
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				width: "100%",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.GridDense, { height: 4 })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "p-small",
+				children: item.description
+			})
+		]
+	});
+};
+
+//#endregion
+exports.AppHeaderFeatureCard = AppHeaderFeatureCard;

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

@@ -1,56 +1,59 @@
-import _styled from "@emotion/styled/base";
-import { Box, Card, FlexBox, Text } from '@codecademy/gamut';
-import { GridDense } from '@codecademy/gamut-patterns';
-import { theme } from '@codecademy/gamut-styles';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledCard = /*#__PURE__*/_styled(Card, {
-  target: "e1lwunvl0",
-  label: "StyledCard"
-})("&:hover{color:", ({
-  theme
-}) => theme.colors.primary, ";border-color:", ({
-  theme
-}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRmVhdHVyZUNhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU8rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckZlYXR1cmVDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgQ2FyZCwgRmxleEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdyaWREZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQXBwSGVhZGVyQ2FyZEl0ZW0gfSBmcm9tICcuLi9BcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bi9jb25zdHMnO1xuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkKENhcmQpYFxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlckZlYXR1cmVDYXJkID0gKHsgaXRlbSB9OiB7IGl0ZW06IEFwcEhlYWRlckNhcmRJdGVtIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQ2FyZFxuICAgICAgaXNJbnRlcmFjdGl2ZVxuICAgICAgcHg9ezE2fVxuICAgICAgcHk9ezI0fVxuICAgICAgYm9yZGVyUmFkaXVzPVwibGdcIlxuICAgICAgYm9yZGVyPXsxfVxuICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICBoZWlnaHQ9XCIxMDAlXCJcbiAgICA+XG4gICAgICA8RmxleEJveCBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgZ2FwPXs4fT5cbiAgICAgICAgPEZsZXhCb3hcbiAgICAgICAgICBiYWNrZ3JvdW5kPXt0aGVtZS5jb2xvcnNbJ25hdnktMjAwJ119XG4gICAgICAgICAgYm9yZGVyUmFkaXVzPVwibWRcIlxuICAgICAgICAgIHA9ezR9XG4gICAgICAgICAgaGVpZ2h0PXszMn1cbiAgICAgICAgICB3aWR0aD17MzJ9XG4gICAgICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgICA+XG4gICAgICAgICAge2l0ZW0uaWNvbn1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1sYXJnZVwiIGZvbnRXZWlnaHQ9ezcwMH0gYXM9XCJoM1wiPlxuICAgICAgICAgIHtpdGVtLmxpbmtJdGVtLnRleHR9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvRmxleEJveD5cbiAgICAgIDxCb3ggd2lkdGg9XCIxMDAlXCI+XG4gICAgICAgIDxHcmlkRGVuc2UgaGVpZ2h0PXs0fSAvPlxuICAgICAgPC9Cb3g+XG4gICAgICA8VGV4dCB2YXJpYW50PVwicC1zbWFsbFwiPntpdGVtLmRlc2NyaXB0aW9ufTwvVGV4dD5cbiAgICA8L1N0eWxlZENhcmQ+XG4gICk7XG59O1xuIl19 */"));
-export const AppHeaderFeatureCard = ({
-  item
-}) => {
-  return /*#__PURE__*/_jsxs(StyledCard, {
-    isInteractive: true,
-    px: 16,
-    py: 24,
-    borderRadius: "lg",
-    border: 1,
-    borderColor: "border-tertiary",
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    height: "100%",
-    children: [/*#__PURE__*/_jsxs(FlexBox, {
-      alignItems: "center",
-      gap: 8,
-      children: [/*#__PURE__*/_jsx(FlexBox, {
-        background: theme.colors['navy-200'],
-        borderRadius: "md",
-        p: 4,
-        height: 32,
-        width: 32,
-        alignItems: "center",
-        justifyContent: "center",
-        children: item.icon
-      }), /*#__PURE__*/_jsx(Text, {
-        variant: "p-large",
-        fontWeight: 700,
-        as: "h3",
-        children: item.linkItem.text
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      width: "100%",
-      children: /*#__PURE__*/_jsx(GridDense, {
-        height: 4
-      })
-    }), /*#__PURE__*/_jsx(Text, {
-      variant: "p-small",
-      children: item.description
-    })]
-  });
-};
+import { Box, Card, FlexBox, Text } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GridDense } from "@codecademy/gamut-patterns";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.tsx
+const StyledCard = styled(Card)`
+  &:hover {
+    color: ${({ theme: theme$1 }) => theme$1.colors.primary};
+    border-color: ${({ theme: theme$1 }) => theme$1.colors.primary};
+  }
+`;
+const AppHeaderFeatureCard = ({ item }) => {
+	return /* @__PURE__ */ jsxs(StyledCard, {
+		isInteractive: true,
+		px: 16,
+		py: 24,
+		borderRadius: "lg",
+		border: 1,
+		borderColor: "border-tertiary",
+		display: "flex",
+		alignItems: "flex-start",
+		flexDirection: "column",
+		height: "100%",
+		children: [
+			/* @__PURE__ */ jsxs(FlexBox, {
+				alignItems: "center",
+				gap: 8,
+				children: [/* @__PURE__ */ jsx(FlexBox, {
+					background: theme.colors["navy-200"],
+					borderRadius: "md",
+					p: 4,
+					height: 32,
+					width: 32,
+					alignItems: "center",
+					justifyContent: "center",
+					children: item.icon
+				}), /* @__PURE__ */ jsx(Text, {
+					variant: "p-large",
+					fontWeight: 700,
+					as: "h3",
+					children: item.linkItem.text
+				})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				width: "100%",
+				children: /* @__PURE__ */ jsx(GridDense, { height: 4 })
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "p-small",
+				children: item.description
+			})
+		]
+	});
+};
+
+//#endregion
+export { AppHeaderFeatureCard };

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

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderLink/index.tsx
+const StyledAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
+	alignContent: "center",
+	alignItems: "center",
+	display: "flex",
+	fontWeight: "normal",
+	lineHeight: "base",
+	minWidth: "0",
+	textAlign: "left",
+	whiteSpace: "nowrap"
+}));
+const StyledMenuItem = (0, _emotion_styled.default)(_codecademy_gamut.MenuItem)((0, _codecademy_gamut_styles.css)({ whiteSpace: "nowrap" }));
+const ResponsiveMiniOpenIcon = (0, _emotion_styled.default)(_codecademy_gamut_icons.MiniOpenIcon)((0, _codecademy_gamut_styles.css)({ display: { _: "block" } }));
+const AppHeaderLink = (0, react.forwardRef)(({ action, item, mobile, isInDropdown, role, ...props }, ref) => {
+	const Item = isInDropdown ? StyledMenuItem : StyledAnchor;
+	const Icon = item.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Item, {
+		"aria-label": item.ariaLabel ? item.ariaLabel : item.text,
+		"data-testid": item.dataTestId,
+		href: item.href,
+		onClick: (event) => action(event, item),
+		target: item.newTab ? "blank" : void 0,
+		role,
+		...props,
+		ref,
+		icon: Icon && !mobile && isInDropdown ? Icon : void 0,
+		variant: !isInDropdown && "interface",
+		py: mobile && !isInDropdown ? 16 : void 0,
+		children: [
+			mobile && Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				mr: 16,
+				mb: 4,
+				size: 24,
+				"aria-hidden": true
+			}),
+			item.text,
+			item.badge,
+			item.newTab && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveMiniOpenIcon, {
+				ml: 16,
+				mb: 4,
+				size: 16,
+				"aria-hidden": true
+			})
+		]
+	});
+});
+
+//#endregion
+exports.AppHeaderLink = AppHeaderLink;