@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["ColorMode","styled","useCallback","useEffect","useRef","useState","React","DropdownPositions","useHeaderDisplayContext","AnimatedMegaMenuDropdown","AppHeaderDropdownProvider","AppHeaderDropdownNavButton","useAppHeaderContext","AppHeaderSection","CATALOG_NAV_SECTIONS","MarketingBanner","StyledAnimatedMegaMenuDropdown","shouldForwardProp","prop","narrowCatalogDropdownPosition","wideCatalogDropdownPosition","AppHeaderCatalogDropdown","action","item","text","containerRef","buttonRef","dropdownRef","isOpen","setIsOpen","lastOpenedDropdown","setLastOpenedDropdown","headerType","catalogDropdown","narrow","wide","animationFinished","current","scrollTop","focusButton","focus","handleOnClick","event","prev","handleClose","handleClickOutside","container","button","contains","target","document","addEventListener","removeEventListener","tabIndex","data-testid","onAnimationComplete","ref","mode","navSections","type"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/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  AppHeaderCatalogDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { CATALOG_NAV_SECTIONS } from './consts';\nimport { MarketingBanner } from './MarketingBanner';\n\nexport type AppHeaderCatalogDropdownProps = AppHeaderAction & {\n  item: AppHeaderCatalogDropdownItem;\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 !== 'narrowCatalogDropdownPosition' &&\n    prop !== 'wideCatalogDropdownPosition',\n})<{\n  narrowCatalogDropdownPosition: string;\n  wideCatalogDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowCatalogDropdownPosition }) => {\n    return narrowCatalogDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideCatalogDropdownPosition }) => {\n      return wideCatalogDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderCatalogDropdown: React.FC<\n  AppHeaderCatalogDropdownProps\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 { catalogDropdown } = DropdownPositions[headerType];\n  const narrowCatalogDropdownPosition = catalogDropdown.narrow;\n  const wideCatalogDropdownPosition = catalogDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const focusButton = () => {\n    buttonRef?.current?.focus();\n  };\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    focusButton();\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        narrowCatalogDropdownPosition={narrowCatalogDropdownPosition}\n        wideCatalogDropdownPosition={wideCatalogDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        data-testid=\"catalog-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n        ref={dropdownRef}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={CATALOG_NAV_SECTIONS}\n            MarketingBanner={MarketingBanner}\n            handleClose={() => setIsOpen(false)}\n            type=\"catalog-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAMgB,iCAAiCf,6CAAOQ,2CAA0B;CAEtEQ,oBAAoBC,SAClBA,SAAS,mCACTA,SAAS;;;CACb,CAAA,CAAA,qBAKW,EAAEC,oCAA+B;AACxC,QAAOA;GACT,qCAGW,EAAEC,kCAA6B;AACtC,QAAOA;GACT,MAAA,ssNAAA;AAIJ,MAAaC,4BAER,EAAEC,QAAQC,WAAM;CACnB,MAAM,EAAEC,SAASD;CACjB,MAAME,iCAA6C,KAAA;CACnD,MAAMC,8BAAsC,KAAA;CAC5C,MAAMC,gCAA4C,KAAA;CAClD,MAAM,CAACC,QAAQC,iCAAsB,MAAA;CACrC,MAAM,EAAEC,oBAAoBC,0BAA0BnB,qCAAAA;CACtD,MAAM,EAAEoB,eAAexB,yCAAAA;CACvB,MAAM,EAAEyB,oBAAoB1B,kCAAkByB;CAC9C,MAAMb,gCAAgCc,gBAAgBC;CACtD,MAAMd,8BAA8Ba,gBAAgBE;CAEpD,MAAMC,0BAAoB;AACxB,MAAIR,UAAUD,YAAYU,QACxBV,aAAYU,QAAQC,YAAY;;CAIpC,MAAMC,oBAAc;AAClBb,aAAWW,SAASG,OAAAA;;CAGtB,MAAMC,iBAAiBC,UAAAA;AACrB,MAAI,CAACd,QAAQ;AACXN,UAAOoB,OAAOnB,KAAAA;AACd,OAAIQ,sBACFA,uBAAsBP,KAAAA;;AAG1BK,aAAWc,SAAS,CAACA,KAAAA;;CAGvB,MAAMC,2CAA0B;AAC9Bf,YAAU,MAAA;AACVU,eAAAA;IACC,EAAE,CAAA;AAELpC,4BAAU;AACR,MAAI2B,uBAAuBN,QAAQI,OACjCC,WAAU,MAAA;IAGX,CAACC,mBAAmB,CAAA;AAEvB3B,4BAAU;EACR,SAAS0C,mBAAmBH,OAAyB;GACnD,MAAMI,YAAYrB,cAAcY;GAChC,MAAMU,SAASrB,WAAWW;AAC1B,OACET,UACAkB,aACA,CAACA,UAAUE,SAASN,MAAMO,OAAM,IAChCF,UACA,CAACA,OAAOC,SAASN,MAAMO,OAAM,CAE7BL,cAAAA;;AAIJM,WAASC,iBAAiB,aAAaN,mBAAAA;AACvCK,WAASC,iBAAiB,QAAQN,mBAAAA;AAClC,eAAO;AACLK,YAASE,oBAAoB,aAAaP,mBAAAA;AAC1CK,YAASE,oBAAoB,QAAQP,mBAAAA;;IAEtC;EAACpB;EAAcmB;EAAahB;EAAO,CAAA;AAEtC,QACE,sBAAA,cAAClB,2CAAAA,EAAuCkC,eACtC,sBAAA,cAACjC,4CAAAA;EACYe;EACIe;EACPb;EACFJ;KAER,sBAAA,cAACR,gCAAAA;EACSY;EACuBT;EACFC;EAC7BiC,UAAU;EACVC,eAAY;EACZC,qBAAqBnB;EACrBoB,KAAK7B;IAEL,sBAAA,cAAC3B,oCAAAA,EAAUyD,MAAK,WACd,sBAAA,cAAC5C,kCAAAA;EACSe;EACR4B,KAAK/B;EACLiC,aAAa5C;EACbC,iBAAiBA;EACjB6B,mBAAmBf,UAAU,MAAA;EAC7B8B,MAAK"}

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.cts

@@ -0,0 +1,9 @@
+import { AppHeaderAction, AppHeaderCatalogDropdownItem } from "../../shared/types.cjs";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.ts
+type AppHeaderCatalogDropdownProps = AppHeaderAction & {
+  item: AppHeaderCatalogDropdownItem;
+};
+//#endregion
+export { AppHeaderCatalogDropdownProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.tsx"],"mappings":";;;KAqBY,6BAAA,GAAgC,eAAA;EAC1C,IAAA,EAAM,4BAAA;AAAA"}

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

@@ -1,6 +1,11 @@
-import * as React from 'react';
-import { AppHeaderAction, AppHeaderCatalogDropdownItem } from '../../shared';
-export type AppHeaderCatalogDropdownProps = AppHeaderAction & {
-    item: AppHeaderCatalogDropdownItem;
+import { AppHeaderAction, AppHeaderCatalogDropdownItem } from "../../shared/types.js";
+import "../../shared/index.js";
+import "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.d.ts
+type AppHeaderCatalogDropdownProps = AppHeaderAction & {
+  item: AppHeaderCatalogDropdownItem;
 };
-export declare const AppHeaderCatalogDropdown: React.FC<AppHeaderCatalogDropdownProps>;
+//#endregion
+export { AppHeaderCatalogDropdownProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.tsx"],"mappings":";;;;;KAqBY,6BAAA,GAAgC,eAAA;EAC1C,IAAA,EAAM,4BAAA;AAAA"}

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

@@ -1,122 +1,98 @@
-import _styled from "@emotion/styled/base";
-import { ColorMode } from '@codecademy/gamut-styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import { DropdownPositions, useHeaderDisplayContext } from '../../../GlobalHeader/context';
-import { AnimatedMegaMenuDropdown } from '../../shared';
-import { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';
-import { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';
-import { useAppHeaderContext } from '../AppHeaderProvider';
-import { AppHeaderSection } from '../AppHeaderSection';
-import { CATALOG_NAV_SECTIONS } from './consts';
-import { MarketingBanner } from './MarketingBanner';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAnimatedMegaMenuDropdown = /*#__PURE__*/_styled(AnimatedMegaMenuDropdown, {
-  // prevent the props from being passed to the DOM element, which would cause a React warning.
-  shouldForwardProp: prop => prop !== 'narrowCatalogDropdownPosition' && prop !== 'wideCatalogDropdownPosition',
-  target: "eaa3s9f0",
-  label: "StyledAnimatedMegaMenuDropdown"
-})("top:3.5rem;left:", ({
-  narrowCatalogDropdownPosition
-}) => {
-  return narrowCatalogDropdownPosition;
-}, ";@media (min-width: 1261px){left:", ({
-  wideCatalogDropdownPosition
-}) => {
-  return wideCatalogDropdownPosition;
-}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ0UiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIERyb3Bkb3duUG9zaXRpb25zLFxuICB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCxcbn0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLFxuICBBcHBIZWFkZXJBY3Rpb24sXG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuL2NvbnN0cyc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuL01hcmtldGluZ0Jhbm5lcic7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtO1xufTtcblxuY29uc3QgU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duID0gc3R5bGVkKEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biwge1xuICAvLyBwcmV2ZW50IHRoZSBwcm9wcyBmcm9tIGJlaW5nIHBhc3NlZCB0byB0aGUgRE9NIGVsZW1lbnQsIHdoaWNoIHdvdWxkIGNhdXNlIGEgUmVhY3Qgd2FybmluZy5cbiAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm9wKSA9PlxuICAgIHByb3AgIT09ICduYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb246IHN0cmluZztcbiAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6ICR7KHsgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbjtcbiAgfX07XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6IDEyNjFweCkge1xuICAgIGxlZnQ6ICR7KHsgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICAgIHJldHVybiB3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd246IFJlYWN0LkZDPFxuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IGNhdGFsb2dEcm9wZG93biB9ID0gRHJvcGRvd25Qb3NpdGlvbnNbaGVhZGVyVHlwZV07XG4gIGNvbnN0IG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLndpZGU7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGZvY3VzQnV0dG9uID0gKCkgPT4ge1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVPbkNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKCFpc09wZW4pIHtcbiAgICAgIGFjdGlvbihldmVudCwgaXRlbSk7XG4gICAgICBpZiAoc2V0TGFzdE9wZW5lZERyb3Bkb3duKSB7XG4gICAgICAgIHNldExhc3RPcGVuZWREcm9wZG93bih0ZXh0KTtcbiAgICAgIH1cbiAgICB9XG4gICAgc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2xvc2UgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICBmb2N1c0J1dHRvbigpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uPXtuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uPXt3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb259XG4gICAgICAgIHRhYkluZGV4PXstMX0gLy8gcHJldmVudCBmcm9tIGludGVyZmVyaW5nIHdpdGggQXBwSGVhZGVyIGZvY3VzIGxvZ2ljXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiY2F0YWxvZy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICAgIHJlZj17ZHJvcGRvd25SZWZ9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17Q0FUQUxPR19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBNYXJrZXRpbmdCYW5uZXI9e01hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgdHlwZT1cImNhdGFsb2ctZHJvcGRvd25cIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdfQ== */"));
-export const AppHeaderCatalogDropdown = ({
-  action,
-  item
-}) => {
-  const {
-    text
-  } = item;
-  const containerRef = useRef(null);
-  const buttonRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    lastOpenedDropdown,
-    setLastOpenedDropdown
-  } = useAppHeaderContext();
-  const {
-    headerType
-  } = useHeaderDisplayContext();
-  const {
-    catalogDropdown
-  } = DropdownPositions[headerType];
-  const narrowCatalogDropdownPosition = catalogDropdown.narrow;
-  const wideCatalogDropdownPosition = catalogDropdown.wide;
-  const animationFinished = () => {
-    if (isOpen && dropdownRef.current) {
-      dropdownRef.current.scrollTop = 0;
-    }
-  };
-  const focusButton = () => {
-    buttonRef?.current?.focus();
-  };
-  const handleOnClick = event => {
-    if (!isOpen) {
-      action(event, item);
-      if (setLastOpenedDropdown) {
-        setLastOpenedDropdown(text);
-      }
-    }
-    setIsOpen(prev => !prev);
-  };
-  const handleClose = useCallback(() => {
-    setIsOpen(false);
-    focusButton();
-  }, []);
-  useEffect(() => {
-    if (lastOpenedDropdown !== text && isOpen) {
-      setIsOpen(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastOpenedDropdown]);
-  useEffect(() => {
-    function handleClickOutside(event) {
-      const container = containerRef?.current;
-      const button = buttonRef?.current;
-      if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) {
-        handleClose();
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('blur', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('blur', handleClickOutside);
-    };
-  }, [containerRef, handleClose, isOpen]);
-  return /*#__PURE__*/_jsxs(AppHeaderDropdownProvider, {
-    handleClose: handleClose,
-    children: [/*#__PURE__*/_jsx(AppHeaderDropdownNavButton, {
-      buttonRef: buttonRef,
-      handleOnClick: handleOnClick,
-      isOpen: isOpen,
-      text: text
-    }), /*#__PURE__*/_jsx(StyledAnimatedMegaMenuDropdown, {
-      isOpen: isOpen,
-      narrowCatalogDropdownPosition: narrowCatalogDropdownPosition,
-      wideCatalogDropdownPosition: wideCatalogDropdownPosition,
-      tabIndex: -1 // prevent from interfering with AppHeader focus logic
-      ,
-      "data-testid": "catalog-menu-dropdown",
-      onAnimationComplete: animationFinished,
-      ref: dropdownRef,
-      children: /*#__PURE__*/_jsx(ColorMode, {
-        mode: "light",
-        children: /*#__PURE__*/_jsx(AppHeaderSection, {
-          isOpen: isOpen,
-          ref: containerRef,
-          navSections: CATALOG_NAV_SECTIONS,
-          MarketingBanner: MarketingBanner,
-          handleClose: () => setIsOpen(false),
-          type: "catalog-dropdown"
-        })
-      })
-    })]
-  });
-};
+import { AnimatedMegaMenuDropdown } from "../../shared/elements.js";
+import "../../shared/index.js";
+import { useAppHeaderContext } from "../AppHeaderProvider/index.js";
+import { DropdownPositions, useHeaderDisplayContext } from "../../../GlobalHeader/context.js";
+import { MarketingBanner } from "./MarketingBanner.js";
+import { AppHeaderDropdownProvider } from "../AppHeaderDropdownProvider/index.js";
+import { AppHeaderDropdownNavButton } from "../AppHeaderNavButton/index.js";
+import { AppHeaderSection } from "../AppHeaderSection/index.js";
+import { CATALOG_NAV_SECTIONS } from "./consts.js";
+import { ColorMode } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.tsx
+const StyledAnimatedMegaMenuDropdown = /* @__PURE__ */ styled(AnimatedMegaMenuDropdown, {
+	shouldForwardProp: (prop) => prop !== "narrowCatalogDropdownPosition" && prop !== "wideCatalogDropdownPosition",
+	target: "edz5aa30",
+	label: "brand-StyledAnimatedMegaMenuDropdown"
+})("top:3.5rem;left:", ({ narrowCatalogDropdownPosition }) => {
+	return narrowCatalogDropdownPosition;
+}, ";@media (min-width:1261px){left:", ({ wideCatalogDropdownPosition }) => {
+	return wideCatalogDropdownPosition;
+}, ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24vaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dEcm9wZG93bi9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29sb3JNb2RlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIERyb3Bkb3duUG9zaXRpb25zLFxuICB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCxcbn0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duLFxuICBBcHBIZWFkZXJBY3Rpb24sXG4gIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyRHJvcGRvd25Qcm92aWRlcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93bk5hdkJ1dHRvbiB9IGZyb20gJy4uL0FwcEhlYWRlck5hdkJ1dHRvbic7XG5pbXBvcnQgeyB1c2VBcHBIZWFkZXJDb250ZXh0IH0gZnJvbSAnLi4vQXBwSGVhZGVyUHJvdmlkZXInO1xuaW1wb3J0IHsgQXBwSGVhZGVyU2VjdGlvbiB9IGZyb20gJy4uL0FwcEhlYWRlclNlY3Rpb24nO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuL2NvbnN0cyc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuL01hcmtldGluZ0Jhbm5lcic7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlckNhdGFsb2dEcm9wZG93blByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtO1xufTtcblxuY29uc3QgU3R5bGVkQW5pbWF0ZWRNZWdhTWVudURyb3Bkb3duID0gc3R5bGVkKEFuaW1hdGVkTWVnYU1lbnVEcm9wZG93biwge1xuICAvLyBwcmV2ZW50IHRoZSBwcm9wcyBmcm9tIGJlaW5nIHBhc3NlZCB0byB0aGUgRE9NIGVsZW1lbnQsIHdoaWNoIHdvdWxkIGNhdXNlIGEgUmVhY3Qgd2FybmluZy5cbiAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm9wKSA9PlxuICAgIHByb3AgIT09ICduYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbicgJiZcbiAgICBwcm9wICE9PSAnd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uJyxcbn0pPHtcbiAgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb246IHN0cmluZztcbiAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uOiBzdHJpbmc7XG59PmBcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6ICR7KHsgbmFycm93Q2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb24gfSkgPT4ge1xuICAgIHJldHVybiBuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbjtcbiAgfX07XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6IDEyNjFweCkge1xuICAgIGxlZnQ6ICR7KHsgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uIH0pID0+IHtcbiAgICAgIHJldHVybiB3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb247XG4gICAgfX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd246IFJlYWN0LkZDPFxuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbSB9KSA9PiB7XG4gIGNvbnN0IHsgdGV4dCB9ID0gaXRlbTtcbiAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IGJ1dHRvblJlZiA9IHVzZVJlZjxIVE1MQnV0dG9uRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGRyb3Bkb3duUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgbGFzdE9wZW5lZERyb3Bkb3duLCBzZXRMYXN0T3BlbmVkRHJvcGRvd24gfSA9IHVzZUFwcEhlYWRlckNvbnRleHQoKTtcbiAgY29uc3QgeyBoZWFkZXJUeXBlIH0gPSB1c2VIZWFkZXJEaXNwbGF5Q29udGV4dCgpO1xuICBjb25zdCB7IGNhdGFsb2dEcm9wZG93biB9ID0gRHJvcGRvd25Qb3NpdGlvbnNbaGVhZGVyVHlwZV07XG4gIGNvbnN0IG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLm5hcnJvdztcbiAgY29uc3Qgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uID0gY2F0YWxvZ0Ryb3Bkb3duLndpZGU7XG5cbiAgY29uc3QgYW5pbWF0aW9uRmluaXNoZWQgPSAoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBkcm9wZG93blJlZi5jdXJyZW50KSB7XG4gICAgICBkcm9wZG93blJlZi5jdXJyZW50LnNjcm9sbFRvcCA9IDA7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGZvY3VzQnV0dG9uID0gKCkgPT4ge1xuICAgIGJ1dHRvblJlZj8uY3VycmVudD8uZm9jdXMoKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVPbkNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKCFpc09wZW4pIHtcbiAgICAgIGFjdGlvbihldmVudCwgaXRlbSk7XG4gICAgICBpZiAoc2V0TGFzdE9wZW5lZERyb3Bkb3duKSB7XG4gICAgICAgIHNldExhc3RPcGVuZWREcm9wZG93bih0ZXh0KTtcbiAgICAgIH1cbiAgICB9XG4gICAgc2V0SXNPcGVuKChwcmV2KSA9PiAhcHJldik7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2xvc2UgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICBmb2N1c0J1dHRvbigpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobGFzdE9wZW5lZERyb3Bkb3duICE9PSB0ZXh0ICYmIGlzT3Blbikge1xuICAgICAgc2V0SXNPcGVuKGZhbHNlKTtcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbbGFzdE9wZW5lZERyb3Bkb3duXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGlja091dHNpZGUoZXZlbnQ6IE1vdXNlRXZlbnQgfCBFdmVudCkge1xuICAgICAgY29uc3QgY29udGFpbmVyID0gY29udGFpbmVyUmVmPy5jdXJyZW50O1xuICAgICAgY29uc3QgYnV0dG9uID0gYnV0dG9uUmVmPy5jdXJyZW50O1xuICAgICAgaWYgKFxuICAgICAgICBpc09wZW4gJiZcbiAgICAgICAgY29udGFpbmVyICYmXG4gICAgICAgICFjb250YWluZXIuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpICYmXG4gICAgICAgIGJ1dHRvbiAmJlxuICAgICAgICAhYnV0dG9uLmNvbnRhaW5zKGV2ZW50LnRhcmdldCBhcyBOb2RlKVxuICAgICAgKSB7XG4gICAgICAgIGhhbmRsZUNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKTtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2JsdXInLCBoYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH07XG4gIH0sIFtjb250YWluZXJSZWYsIGhhbmRsZUNsb3NlLCBpc09wZW5dKTtcblxuICByZXR1cm4gKFxuICAgIDxBcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZX0+XG4gICAgICA8QXBwSGVhZGVyRHJvcGRvd25OYXZCdXR0b25cbiAgICAgICAgYnV0dG9uUmVmPXtidXR0b25SZWZ9XG4gICAgICAgIGhhbmRsZU9uQ2xpY2s9e2hhbmRsZU9uQ2xpY2t9XG4gICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICB0ZXh0PXt0ZXh0fVxuICAgICAgLz5cbiAgICAgIDxTdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd25cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG5hcnJvd0NhdGFsb2dEcm9wZG93blBvc2l0aW9uPXtuYXJyb3dDYXRhbG9nRHJvcGRvd25Qb3NpdGlvbn1cbiAgICAgICAgd2lkZUNhdGFsb2dEcm9wZG93blBvc2l0aW9uPXt3aWRlQ2F0YWxvZ0Ryb3Bkb3duUG9zaXRpb259XG4gICAgICAgIHRhYkluZGV4PXstMX0gLy8gcHJldmVudCBmcm9tIGludGVyZmVyaW5nIHdpdGggQXBwSGVhZGVyIGZvY3VzIGxvZ2ljXG4gICAgICAgIGRhdGEtdGVzdGlkPVwiY2F0YWxvZy1tZW51LWRyb3Bkb3duXCJcbiAgICAgICAgb25BbmltYXRpb25Db21wbGV0ZT17YW5pbWF0aW9uRmluaXNoZWR9XG4gICAgICAgIHJlZj17ZHJvcGRvd25SZWZ9XG4gICAgICA+XG4gICAgICAgIDxDb2xvck1vZGUgbW9kZT1cImxpZ2h0XCI+XG4gICAgICAgICAgPEFwcEhlYWRlclNlY3Rpb25cbiAgICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgICAgcmVmPXtjb250YWluZXJSZWZ9XG4gICAgICAgICAgICBuYXZTZWN0aW9ucz17Q0FUQUxPR19OQVZfU0VDVElPTlN9XG4gICAgICAgICAgICBNYXJrZXRpbmdCYW5uZXI9e01hcmtldGluZ0Jhbm5lcn1cbiAgICAgICAgICAgIGhhbmRsZUNsb3NlPXsoKSA9PiBzZXRJc09wZW4oZmFsc2UpfVxuICAgICAgICAgICAgdHlwZT1cImNhdGFsb2ctZHJvcGRvd25cIlxuICAgICAgICAgIC8+XG4gICAgICAgIDwvQ29sb3JNb2RlPlxuICAgICAgPC9TdHlsZWRBbmltYXRlZE1lZ2FNZW51RHJvcGRvd24+XG4gICAgPC9BcHBIZWFkZXJEcm9wZG93blByb3ZpZGVyPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QnVDIn0= */");
+const AppHeaderCatalogDropdown = ({ action, item }) => {
+	const { text } = item;
+	const containerRef = useRef(null);
+	const buttonRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
+	const { headerType } = useHeaderDisplayContext();
+	const { catalogDropdown } = DropdownPositions[headerType];
+	const narrowCatalogDropdownPosition = catalogDropdown.narrow;
+	const wideCatalogDropdownPosition = catalogDropdown.wide;
+	const animationFinished = () => {
+		if (isOpen && dropdownRef.current) dropdownRef.current.scrollTop = 0;
+	};
+	const focusButton = () => {
+		buttonRef?.current?.focus();
+	};
+	const handleOnClick = (event) => {
+		if (!isOpen) {
+			action(event, item);
+			if (setLastOpenedDropdown) setLastOpenedDropdown(text);
+		}
+		setIsOpen((prev) => !prev);
+	};
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+		focusButton();
+	}, []);
+	useEffect(() => {
+		if (lastOpenedDropdown !== text && isOpen) setIsOpen(false);
+	}, [lastOpenedDropdown]);
+	useEffect(() => {
+		function handleClickOutside(event) {
+			const container = containerRef?.current;
+			const button = buttonRef?.current;
+			if (isOpen && container && !container.contains(event.target) && button && !button.contains(event.target)) handleClose();
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("blur", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("blur", handleClickOutside);
+		};
+	}, [
+		containerRef,
+		handleClose,
+		isOpen
+	]);
+	return /* @__PURE__ */ React$1.createElement(AppHeaderDropdownProvider, { handleClose }, /* @__PURE__ */ React$1.createElement(AppHeaderDropdownNavButton, {
+		buttonRef,
+		handleOnClick,
+		isOpen,
+		text
+	}), /* @__PURE__ */ React$1.createElement(StyledAnimatedMegaMenuDropdown, {
+		isOpen,
+		narrowCatalogDropdownPosition,
+		wideCatalogDropdownPosition,
+		tabIndex: -1,
+		"data-testid": "catalog-menu-dropdown",
+		onAnimationComplete: animationFinished,
+		ref: dropdownRef
+	}, /* @__PURE__ */ React$1.createElement(ColorMode, { mode: "light" }, /* @__PURE__ */ React$1.createElement(AppHeaderSection, {
+		isOpen,
+		ref: containerRef,
+		navSections: CATALOG_NAV_SECTIONS,
+		MarketingBanner,
+		handleClose: () => setIsOpen(false),
+		type: "catalog-dropdown"
+	}))));
+};
+
+//#endregion
+export { AppHeaderCatalogDropdown };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ColorMode","styled","useCallback","useEffect","useRef","useState","React","DropdownPositions","useHeaderDisplayContext","AnimatedMegaMenuDropdown","AppHeaderDropdownProvider","AppHeaderDropdownNavButton","useAppHeaderContext","AppHeaderSection","CATALOG_NAV_SECTIONS","MarketingBanner","StyledAnimatedMegaMenuDropdown","shouldForwardProp","prop","narrowCatalogDropdownPosition","wideCatalogDropdownPosition","AppHeaderCatalogDropdown","action","item","text","containerRef","buttonRef","dropdownRef","isOpen","setIsOpen","lastOpenedDropdown","setLastOpenedDropdown","headerType","catalogDropdown","narrow","wide","animationFinished","current","scrollTop","focusButton","focus","handleOnClick","event","prev","handleClose","handleClickOutside","container","button","contains","target","document","addEventListener","removeEventListener","tabIndex","data-testid","onAnimationComplete","ref","mode","navSections","type"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/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  AppHeaderCatalogDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { CATALOG_NAV_SECTIONS } from './consts';\nimport { MarketingBanner } from './MarketingBanner';\n\nexport type AppHeaderCatalogDropdownProps = AppHeaderAction & {\n  item: AppHeaderCatalogDropdownItem;\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 !== 'narrowCatalogDropdownPosition' &&\n    prop !== 'wideCatalogDropdownPosition',\n})<{\n  narrowCatalogDropdownPosition: string;\n  wideCatalogDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowCatalogDropdownPosition }) => {\n    return narrowCatalogDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideCatalogDropdownPosition }) => {\n      return wideCatalogDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderCatalogDropdown: React.FC<\n  AppHeaderCatalogDropdownProps\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 { catalogDropdown } = DropdownPositions[headerType];\n  const narrowCatalogDropdownPosition = catalogDropdown.narrow;\n  const wideCatalogDropdownPosition = catalogDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const focusButton = () => {\n    buttonRef?.current?.focus();\n  };\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n    setIsOpen((prev) => !prev);\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    focusButton();\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        narrowCatalogDropdownPosition={narrowCatalogDropdownPosition}\n        wideCatalogDropdownPosition={wideCatalogDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        data-testid=\"catalog-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n        ref={dropdownRef}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={CATALOG_NAV_SECTIONS}\n            MarketingBanner={MarketingBanner}\n            handleClose={() => setIsOpen(false)}\n            type=\"catalog-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMgB,iCAAiCf,uBAAOQ,0BAA0B;CAEtEQ,oBAAoBC,SAClBA,SAAS,mCACTA,SAAS;;;CACb,CAAA,CAAA,qBAKW,EAAEC,oCAA+B;AACxC,QAAOA;GACT,qCAGW,EAAEC,kCAA6B;AACtC,QAAOA;GACT,MAAA,ssNAAA;AAIJ,MAAaC,4BAER,EAAEC,QAAQC,WAAM;CACnB,MAAM,EAAEC,SAASD;CACjB,MAAME,eAAerB,OAA8B,KAAA;CACnD,MAAMsB,YAAYtB,OAA0B,KAAA;CAC5C,MAAMuB,cAAcvB,OAA8B,KAAA;CAClD,MAAM,CAACwB,QAAQC,aAAaxB,SAAS,MAAA;CACrC,MAAM,EAAEyB,oBAAoBC,0BAA0BnB,qBAAAA;CACtD,MAAM,EAAEoB,eAAexB,yBAAAA;CACvB,MAAM,EAAEyB,oBAAoB1B,kBAAkByB;CAC9C,MAAMb,gCAAgCc,gBAAgBC;CACtD,MAAMd,8BAA8Ba,gBAAgBE;CAEpD,MAAMC,0BAAoB;AACxB,MAAIR,UAAUD,YAAYU,QACxBV,aAAYU,QAAQC,YAAY;;CAIpC,MAAMC,oBAAc;AAClBb,aAAWW,SAASG,OAAAA;;CAGtB,MAAMC,iBAAiBC,UAAAA;AACrB,MAAI,CAACd,QAAQ;AACXN,UAAOoB,OAAOnB,KAAAA;AACd,OAAIQ,sBACFA,uBAAsBP,KAAAA;;AAG1BK,aAAWc,SAAS,CAACA,KAAAA;;CAGvB,MAAMC,cAAc1C,kBAAY;AAC9B2B,YAAU,MAAA;AACVU,eAAAA;IACC,EAAE,CAAA;AAELpC,iBAAU;AACR,MAAI2B,uBAAuBN,QAAQI,OACjCC,WAAU,MAAA;IAGX,CAACC,mBAAmB,CAAA;AAEvB3B,iBAAU;EACR,SAAS0C,mBAAmBH,OAAyB;GACnD,MAAMI,YAAYrB,cAAcY;GAChC,MAAMU,SAASrB,WAAWW;AAC1B,OACET,UACAkB,aACA,CAACA,UAAUE,SAASN,MAAMO,OAAM,IAChCF,UACA,CAACA,OAAOC,SAASN,MAAMO,OAAM,CAE7BL,cAAAA;;AAIJM,WAASC,iBAAiB,aAAaN,mBAAAA;AACvCK,WAASC,iBAAiB,QAAQN,mBAAAA;AAClC,eAAO;AACLK,YAASE,oBAAoB,aAAaP,mBAAAA;AAC1CK,YAASE,oBAAoB,QAAQP,mBAAAA;;IAEtC;EAACpB;EAAcmB;EAAahB;EAAO,CAAA;AAEtC,QACE,wBAAA,cAAClB,2BAAAA,EAAuCkC,eACtC,wBAAA,cAACjC,4BAAAA;EACYe;EACIe;EACPb;EACFJ;KAER,wBAAA,cAACR,gCAAAA;EACSY;EACuBT;EACFC;EAC7BiC,UAAU;EACVC,eAAY;EACZC,qBAAqBnB;EACrBoB,KAAK7B;IAEL,wBAAA,cAAC3B,WAAAA,EAAUyD,MAAK,WACd,wBAAA,cAAC5C,kBAAAA;EACSe;EACR4B,KAAK/B;EACLiC,aAAa5C;EACIC;EACjB6B,mBAAmBf,UAAU,MAAA;EAC7B8B,MAAK"}

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

@@ -0,0 +1,91 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_context = require('../../../GlobalHeader/context.cjs');
+const require_types = require('../../../ContentGroupBaseCard/types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderDietCard/index.tsx
+const StyledCard = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Card, {
+	target: "evo9rp90",
+	label: "brand-StyledCard"
+})("&:hover{border-color:", ({ theme }) => theme.colors.black, ";cursor:pointer;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEaWV0Q2FyZC9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUW1CIn0= */");
+const DottedLine = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_patterns.CheckerDense, {
+	target: "evo9rp91",
+	label: "brand-DottedLine"
+})((0, _codecademy_gamut_styles.css)({
+	height: "1px",
+	display: "flex",
+	position: "absolute",
+	marginTop: "-1px"
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEaWV0Q2FyZC9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZW1CIn0= */");
+const DifficultyTextContainer = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.FlexBox, {
+	target: "evo9rp92",
+	label: "brand-DifficultyTextContainer"
+})("@media (min-width:768px) and (max-width:880px){max-width:", ({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none", ";}@media (min-width:1024px) and (max-width:1136px){max-width:", ({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none", ";}@media (min-width:1200px) and (max-width:1230px){max-width:", ({ isBeginnerContainer }) => isBeginnerContainer ? "60%" : "none", ";}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJEaWV0Q2FyZC9pbmRleC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JnQyJ9 */");
+const AppHeaderDietCard = ({ title, hours, icon, difficulty, href, trackingTarget }) => {
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const isBeginnerContainer = difficulty === require_types.CourseDifficulty.Beginner;
+	return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(_codecademy_gamut.Anchor, {
+		href,
+		variant: "interface",
+		display: "block",
+		onClick: (event) => globalHeaderItemClick(event, {
+			type: "link",
+			id: `topnav_catalog_${title}`,
+			href,
+			text: title,
+			trackingTarget: `topnav_catalog_${trackingTarget ?? title}`
+		})
+	}, /* @__PURE__ */ React.createElement(StyledCard, {
+		borderRadius: "md",
+		borderColor: "border-tertiary",
+		minHeight: 120,
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "space-between",
+		px: 12,
+		py: 8,
+		isInteractive: true
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		as: "h3",
+		variant: "p-large",
+		fontWeight: 700,
+		truncate: "ellipsis",
+		truncateLines: 2
+	}, title), /* @__PURE__ */ React.createElement(_codecademy_gamut.Box, null, /* @__PURE__ */ React.createElement(_codecademy_gamut.Box, {
+		py: 4,
+		mb: 4,
+		height: 0,
+		position: "relative",
+		"aria-hidden": true
+	}, /* @__PURE__ */ React.createElement(DottedLine, { color: "border-tertiary" })), /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		justifyContent: "space-between",
+		alignItems: "center"
+	}, difficulty && /* @__PURE__ */ React.createElement(DifficultyTextContainer, {
+		isBeginnerContainer,
+		justifyContent: "center",
+		alignItems: "center",
+		gap: 8
+	}, icon, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { screenreader: true }, `${difficulty}${isBeginnerContainer ? " Friendly" : ""}.`), /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		variant: "p-small",
+		fontSize: 14,
+		color: "text-secondary",
+		"data-testid": "card-difficulty",
+		"aria-hidden": true,
+		truncate: "ellipsis",
+		truncateLines: 1,
+		overflow: "hidden"
+	}, /* @__PURE__ */ React.createElement("b", null, difficulty), isBeginnerContainer && /* @__PURE__ */ React.createElement(React.Fragment, null, " Friendly"))), hours && /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		fontSize: 14,
+		variant: "p-small",
+		color: "text-secondary",
+		whiteSpace: "nowrap"
+	}, /* @__PURE__ */ React.createElement("b", null, hours), " hours"))))));
+};
+
+//#endregion
+exports.AppHeaderDietCard = AppHeaderDietCard;
+//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderDietCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Anchor","Box","Card","FlexBox","Text","CheckerDense","css","styled","CourseDifficulty","useGlobalHeaderItemClick","StyledCard","theme","colors","black","DottedLine","height","display","position","marginTop","DifficultyTextContainer","isBeginnerContainer","AppHeaderDietCard","title","hours","icon","difficulty","href","trackingTarget","globalHeaderItemClick","Beginner","li","variant","onClick","event","type","id","text","borderRadius","borderColor","minHeight","flexDirection","justifyContent","px","py","isInteractive","as","fontWeight","truncate","truncateLines","mb","aria-hidden","color","alignItems","gap","screenreader","fontSize","data-testid","overflow","b","whiteSpace"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderDietCard/index.tsx"],"sourcesContent":["import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport { CheckerDense } from '@codecademy/gamut-patterns';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { CourseDifficulty } from '../../../ContentGroupBaseCard/types';\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\n\nconst StyledCard = styled(Card)`\n  &:hover {\n    border-color: ${({ theme }) => theme.colors.black};\n    cursor: pointer;\n  }\n`;\n\nconst DottedLine = styled(CheckerDense)(\n  css({\n    height: '1px',\n    display: 'flex',\n    position: 'absolute',\n    marginTop: '-1px',\n  })\n);\n\nconst DifficultyTextContainer = styled(FlexBox)<{\n  isBeginnerContainer: boolean;\n}>`\n  @media (min-width: 768px) and (max-width: 880px) {\n    max-width: ${({ isBeginnerContainer }) =>\n      isBeginnerContainer ? '60%' : 'none'};\n  }\n\n  @media (min-width: 1024px) and (max-width: 1136px) {\n    max-width: ${({ isBeginnerContainer }) =>\n      isBeginnerContainer ? '60%' : 'none'};\n  }\n\n  @media (min-width: 1200px) and (max-width: 1230px) {\n    max-width: ${({ isBeginnerContainer }) =>\n      isBeginnerContainer ? '60%' : 'none'};\n  }\n`;\n\ntype AppHeaderDietCardProps = {\n  title: string;\n  hours: number | null;\n  icon: React.ReactNode;\n  difficulty: CourseDifficulty | null;\n  href: string;\n  trackingTarget?: string;\n};\n\nexport const AppHeaderDietCard = ({\n  title,\n  hours,\n  icon,\n  difficulty,\n  href,\n  trackingTarget,\n}: AppHeaderDietCardProps) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;\n\n  return (\n    <li>\n      <Anchor\n        href={href}\n        variant=\"interface\"\n        display=\"block\"\n        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>\n          globalHeaderItemClick(event, {\n            type: 'link',\n            id: `topnav_catalog_${title}`,\n            href,\n            text: title,\n            trackingTarget: `topnav_catalog_${trackingTarget ?? title}`,\n          })\n        }\n      >\n        <StyledCard\n          borderRadius=\"md\"\n          borderColor=\"border-tertiary\"\n          minHeight={120}\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"space-between\"\n          px={12}\n          py={8}\n          isInteractive\n        >\n          <Text\n            as=\"h3\"\n            variant=\"p-large\"\n            fontWeight={700}\n            truncate=\"ellipsis\"\n            truncateLines={2}\n          >\n            {title}\n          </Text>\n          <Box>\n            <Box py={4} mb={4} height={0} position=\"relative\" aria-hidden>\n              <DottedLine color=\"border-tertiary\" />\n            </Box>\n            <FlexBox justifyContent=\"space-between\" alignItems=\"center\">\n              {difficulty && (\n                <DifficultyTextContainer\n                  isBeginnerContainer={isBeginnerContainer}\n                  justifyContent=\"center\"\n                  alignItems=\"center\"\n                  gap={8}\n                >\n                  {icon}\n                  <Text screenreader>{`${difficulty}${\n                    isBeginnerContainer ? ' Friendly' : ''\n                  }.`}</Text>\n                  <Text\n                    variant=\"p-small\"\n                    fontSize={14}\n                    color=\"text-secondary\"\n                    data-testid=\"card-difficulty\"\n                    aria-hidden\n                    truncate=\"ellipsis\"\n                    truncateLines={1}\n                    overflow=\"hidden\"\n                  >\n                    <b>{difficulty}</b>\n                    {isBeginnerContainer && <> Friendly</>}\n                  </Text>\n                </DifficultyTextContainer>\n              )}\n              {hours && (\n                <Text\n                  fontSize={14}\n                  variant=\"p-small\"\n                  color=\"text-secondary\"\n                  whiteSpace=\"nowrap\"\n                >\n                  <b>{hours}</b> hours\n                </Text>\n              )}\n            </FlexBox>\n          </Box>\n        </StyledCard>\n      </Anchor>\n    </li>\n  );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAMU,aAAaH,6CAAOL,wBAAAA;;;6BAEL,EAAES,YAAYA,MAAMC,OAAOC,OAAK,qBAAA,0nMAAA;AAKrD,MAAMC,aAAaP,6CAAOF,yCAAAA;;;qCACpB;CACFU,QAAQ;CACRC,SAAS;CACTC,UAAU;CACVC,WAAW;CACb,CAAA,EAAA,0nMAAA;AAGF,MAAMC,0BAA0BZ,6CAAOJ,2BAAAA;;;iEAIrB,EAAEiB,0BACdA,sBAAsB,QAAQ,QAAA,kEAIlB,EAAEA,0BACdA,sBAAsB,QAAQ,QAAA,kEAIlB,EAAEA,0BACdA,sBAAsB,QAAQ,QAAA,MAAA,0nMAAA;AAapC,MAAaC,qBAAqB,EAChCC,OACAC,OACAC,MACAC,YACAC,MACAC,qBACuB;CACvB,MAAM,EAAEC,0BAA0BnB,0CAAAA;CAElC,MAAMW,sBAAsBK,eAAejB,+BAAiBqB;AAE5D,QACE,sBAAA,cAACC,MAAAA,MACC,sBAAA,cAAC9B,0BAAAA;EACO0B;EACNK,SAAQ;EACRf,SAAQ;EACRgB,UAAUC,UACRL,sBAAsBK,OAAO;GAC3BC,MAAM;GACNC,IAAI,kBAAkBb;GACtBI;GACAU,MAAMd;GACNK,gBAAgB,kBAAkBA,kBAAkBL;GACtD,CAAA;IAGF,sBAAA,cAACZ,YAAAA;EACC2B,cAAa;EACbC,aAAY;EACZC,WAAW;EACXvB,SAAQ;EACRwB,eAAc;EACdC,gBAAe;EACfC,IAAI;EACJC,IAAI;EACJC,eAAAA;IAEA,sBAAA,cAACxC,wBAAAA;EACCyC,IAAG;EACHd,SAAQ;EACRe,YAAY;EACZC,UAAS;EACTC,eAAe;IAEd1B,MAAAA,EAEH,sBAAA,cAACrB,uBAAAA,MACC,sBAAA,cAACA,uBAAAA;EAAI0C,IAAI;EAAGM,IAAI;EAAGlC,QAAQ;EAAGE,UAAS;EAAWiC,eAAAA;IAChD,sBAAA,cAACpC,YAAAA,EAAWqC,OAAM,uBAEpB,sBAAA,cAAChD,2BAAAA;EAAQsC,gBAAe;EAAgBW,YAAW;IAChD3B,cACC,sBAAA,cAACN,yBAAAA;EACsBC;EACrBqB,gBAAe;EACfW,YAAW;EACXC,KAAK;IAEJ7B,MACD,sBAAA,cAACpB,wBAAAA,EAAKkD,cAAAA,QAAc,GAAG7B,aACrBL,sBAAsB,cAAc,GACrC,GAAE,EACH,sBAAA,cAAChB,wBAAAA;EACC2B,SAAQ;EACRwB,UAAU;EACVJ,OAAM;EACNK,eAAY;EACZN,eAAAA;EACAH,UAAS;EACTC,eAAe;EACfS,UAAS;IAET,sBAAA,cAACC,KAAAA,MAAGjC,WAAAA,EACHL,uBAAuB,sBAAA,cAAA,MAAA,UAAA,MAAE,YAAA,CAAA,CAAA,EAI/BG,SACC,sBAAA,cAACnB,wBAAAA;EACCmD,UAAU;EACVxB,SAAQ;EACRoB,OAAM;EACNQ,YAAW;IAEX,sBAAA,cAACD,KAAAA,MAAGnC,MAAAA,EAAU,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}