@codecademy/brand 4.0.0-alpha.0ae245495b.0 → 4.0.0-alpha.65b0979c7d.0

package/dist/AbbreviatedCommunityEventCard/index.d.ts

@@ -8,4 +8,5 @@ interface AbbreviatedEventCardProps {
 }
 declare const AbbreviatedEventCard: React.FC<AbbreviatedEventCardProps>;
 //#endregion
-export { AbbreviatedEventCard, AbbreviatedEventCardProps };
+export { AbbreviatedEventCard, AbbreviatedEventCardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/AbbreviatedCommunityEventCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AbbreviatedCommunityEventCard/index.tsx"],"sourcesContent":[],"mappings":";UASiB,yBAAA;EAAA,KAAA,EAAA,MAAA;EAQJ,SAAA,EAAA,MAAA;;;;;cAAA,sBAAsB,KAAA,CAAM,GAAG"}

package/dist/AbbreviatedCommunityEventCard/index.js

@@ -83,4 +83,5 @@ const AbbreviatedEventCard = ({ title, startDate, endDate, url, type }) => {
 };
 
 //#endregion
-export { AbbreviatedEventCard };
+export { AbbreviatedEventCard };
+//# sourceMappingURL=index.js.map

package/dist/AbbreviatedCommunityEventCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AbbreviatedEventCard: React.FC<AbbreviatedEventCardProps>"],"sources":["../../src/AbbreviatedCommunityEventCard/index.tsx"],"sourcesContent":["import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon, ClockIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\nimport { format, parseJSON } from 'date-fns';\nimport upperCase from 'lodash/upperCase';\n\nimport { formatTime } from '../CommunityEventCard';\nimport { EventTypeIcon } from '../CommunityEventCard/EventTypeIcon';\n\nexport interface AbbreviatedEventCardProps {\n  title: string;\n  startDate: string;\n  endDate: string;\n  url: string;\n  type?: string | null;\n}\n\nexport const AbbreviatedEventCard: React.FC<AbbreviatedEventCardProps> = ({\n  title,\n  startDate,\n  endDate,\n  url,\n  type,\n}) => {\n  const StyledLink = styled(Anchor)`\n    text-decoration: none;\n    &:focus {\n      text-decoration: none;\n    }\n  `;\n\n  return (\n    <StyledLink href={url} target=\"_blank\">\n      <Card isInteractive>\n        <FlexBox gap={16} height=\"100%\">\n          <Box\n            alignContent=\"center\"\n            bg=\"navy\"\n            borderRadius=\"md\"\n            color=\"white\"\n            height={80}\n            justifyContent=\"center\"\n            px={12}\n            width={80}\n          >\n            <Text fontFamily=\"accent\" fontSize={26} lineHeight=\"normal\">\n              {upperCase(format(parseJSON(startDate), 'LLL dd'))}\n            </Text>\n          </Box>\n          <FlexBox\n            alignItems=\"center\"\n            gap={16}\n            justifyContent=\"space-between\"\n            minWidth={0}\n            width=\"100%\"\n          >\n            <FlexBox flexDirection=\"column\" gap={8} minWidth={0} width=\"100%\">\n              <Text as=\"h3\" fontSize={22} truncate=\"ellipsis\" truncateLines={1}>\n                {title}\n              </Text>\n              <FlexBox alignItems=\"center\" justifyContent=\"space-between\">\n                <FlexBox alignItems=\"center\" gap={8} minWidth={0}>\n                  <ClockIcon />\n                  <Text\n                    fontFamily=\"accent\"\n                    fontSize={14}\n                    truncate=\"ellipsis\"\n                    truncateLines={1}\n                  >\n                    {formatTime(startDate, endDate)}\n                  </Text>\n                </FlexBox>\n                {type && (\n                  <FlexBox alignItems=\"center\" gap={8} minWidth={0}>\n                    <EventTypeIcon eventType={type} />\n                  </FlexBox>\n                )}\n              </FlexBox>\n            </FlexBox>\n            <ArrowChevronRightIcon size={24} />\n          </FlexBox>\n        </FlexBox>\n      </Card>\n    </StyledLink>\n  );\n};\n"],"mappings":";;;;;;;;;;AAiBA,MAAaA,wBAA6D,EACxE,OACA,WACA,SACA,KACA,WACI;AAQJ,QACE,oBARiB,OAAO,OAAO;;;;;;EAQnB,MAAM;EAAK,QAAO;YAC5B,oBAAC;GAAK;aACJ,qBAAC;IAAQ,KAAK;IAAI,QAAO;eACvB,oBAAC;KACC,cAAa;KACb,IAAG;KACH,cAAa;KACb,OAAM;KACN,QAAQ;KACR,gBAAe;KACf,IAAI;KACJ,OAAO;eAEP,oBAAC;MAAK,YAAW;MAAS,UAAU;MAAI,YAAW;gBAChD,UAAU,OAAO,UAAU,UAAU,EAAE,SAAS,CAAC;OAC7C;MACH,EACN,qBAAC;KACC,YAAW;KACX,KAAK;KACL,gBAAe;KACf,UAAU;KACV,OAAM;gBAEN,qBAAC;MAAQ,eAAc;MAAS,KAAK;MAAG,UAAU;MAAG,OAAM;iBACzD,oBAAC;OAAK,IAAG;OAAK,UAAU;OAAI,UAAS;OAAW,eAAe;iBAC5D;QACI,EACP,qBAAC;OAAQ,YAAW;OAAS,gBAAe;kBAC1C,qBAAC;QAAQ,YAAW;QAAS,KAAK;QAAG,UAAU;mBAC7C,oBAAC,cAAY,EACb,oBAAC;SACC,YAAW;SACX,UAAU;SACV,UAAS;SACT,eAAe;mBAEd,WAAW,WAAW,QAAQ;UAC1B;SACC,EACT,QACC,oBAAC;QAAQ,YAAW;QAAS,KAAK;QAAG,UAAU;kBAC7C,oBAAC,iBAAc,WAAW,OAAQ;SAC1B;QAEJ;OACF,EACV,oBAAC,yBAAsB,MAAM,KAAM;MAC3B;KACF;IACL;GACI"}

package/dist/AppBar/AppBarSection.d.ts

@@ -2,14 +2,15 @@ import { WithChildrenProp } from "@codecademy/gamut";
 import * as React$1 from "react";
 import * as _codecademy_variance0 from "@codecademy/variance";
 import { StyleProps } from "@codecademy/variance";
-import * as _emotion_react8 from "@emotion/react";
+import * as _emotion_react11 from "@emotion/react";
 import * as _codecademy_variance_dist_types_config0 from "@codecademy/variance/dist/types/config";
 
 //#region src/AppBar/AppBarSection.d.ts
 declare const positionVariants: (props: _codecademy_variance_dist_types_config0.VariantProps<"position", false | "center" | "left" | "right"> & {
-  theme?: _emotion_react8.Theme;
+  theme?: _emotion_react11.Theme;
 }) => _codecademy_variance0.CSSObject;
 interface AppBarSectionProps extends StyleProps<typeof positionVariants>, WithChildrenProp {}
 declare const AppBarSection: React$1.FC<AppBarSectionProps>;
 //#endregion
-export { AppBarSection, AppBarSectionProps };
+export { AppBarSection, AppBarSectionProps };
+//# sourceMappingURL=AppBarSection.d.ts.map

package/dist/AppBar/AppBarSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSection.d.ts","names":[],"sources":["../../src/AppBar/AppBarSection.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAMM,0BAsBJ,uCAAA,CAtBoB;UAAA,gBAAA,CAAA;;UAwBL,kBAAA,SACP,kBAAkB,mBACxB;AA1BE,cAiCO,aAXX,EAW0B,OAAA,CAAM,EAXhC,CAWmC,kBAXnC,CAAA"}

package/dist/AppBar/AppBarSection.js

@@ -34,4 +34,5 @@ const AppBarSection = ({ position, children }) => {
 };
 
 //#endregion
-export { AppBarSection };
+export { AppBarSection };
+//# sourceMappingURL=AppBarSection.js.map

package/dist/AppBar/AppBarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSection.js","names":["AppBarSection: React.FC<AppBarSectionProps>"],"sources":["../../src/AppBar/AppBarSection.tsx"],"sourcesContent":["import { WithChildrenProp } from '@codecademy/gamut';\nimport { styledOptions, variant } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst positionVariants = variant({\n  prop: 'position',\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%',\n    zIndex: 1,\n  },\n  variants: {\n    left: {\n      flex: 1,\n    },\n    right: {\n      flex: 1,\n      justifyContent: 'flex-end',\n    },\n    center: {\n      flex: 2,\n      justifyContent: 'center',\n      textAlign: 'center',\n    },\n  },\n});\n\nexport interface AppBarSectionProps\n  extends StyleProps<typeof positionVariants>,\n    WithChildrenProp {}\n\nconst StyledSection = styled(\n  'div',\n  styledOptions\n)<AppBarSectionProps>(positionVariants);\n\nexport const AppBarSection: React.FC<AppBarSectionProps> = ({\n  position,\n  children,\n}) => {\n  return <StyledSection position={position}>{children}</StyledSection>;\n};\n"],"mappings":";;;;;;AAMA,MAAM,mBAAmB,QAAQ;CAC/B,MAAM;CACN,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,QAAQ;EACT;CACD,UAAU;EACR,MAAM,EACJ,MAAM,GACP;EACD,OAAO;GACL,MAAM;GACN,gBAAgB;GACjB;EACD,QAAQ;GACN,MAAM;GACN,gBAAgB;GAChB,WAAW;GACZ;EACF;CACF,CAAC;AAMF,MAAM,gBAAgB,OACpB,OACA,cACD,CAAqB,iBAAiB;AAEvC,MAAaA,iBAA+C,EAC1D,UACA,eACI;AACJ,QAAO,oBAAC;EAAwB;EAAW;GAAyB"}

package/dist/AppBar/index.d.ts

@@ -10,4 +10,5 @@ interface AppBarProps extends WithChildrenProp, Pick<React$1.ComponentProps<type
 }
 declare const AppBar: React$1.FC<AppBarProps>;
 //#endregion
-export { AppBar, AppBarProps };
+export { AppBar, AppBarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AppBar/index.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,WAAA,SACP,kBACN,KAAK,OAAA,CAAM,sBAAsB;;AAFrC;;EAES,IAAA,CAAM,EAAA,OAAA;;AAAX,cAOS,MAPT,EAOiB,OAAA,CAAM,EAPvB,CAO0B,WAP1B,CAAA"}

package/dist/AppBar/index.js

@@ -17,4 +17,5 @@ const AppBar = ({ "aria-label": ariaLabel, as, wide, children }) => {
 };
 
 //#endregion
-export { AppBar };
+export { AppBar };
+//# sourceMappingURL=index.js.map

package/dist/AppBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppBar: React.FC<AppBarProps>"],"sources":["../../src/AppBar/index.tsx"],"sourcesContent":["import { ContentContainer, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface AppBarProps\n  extends WithChildrenProp,\n    Pick<React.ComponentProps<typeof ContentContainer>, 'aria-label' | 'as'> {\n  /**\n   * Whether the container should be larger than the default content size.\n   */\n  wide?: boolean;\n}\n\nexport const AppBar: React.FC<AppBarProps> = ({\n  'aria-label': ariaLabel,\n  as,\n  wide,\n  children,\n}) => {\n  return (\n    <ContentContainer\n      aria-label={ariaLabel}\n      as={as}\n      display=\"flex\"\n      alignItems=\"center\"\n      height=\"100%\"\n      size={wide ? 'wide' : 'medium'}\n      zIndex={14}\n    >\n      {children}\n    </ContentContainer>\n  );\n};\n"],"mappings":";;;;;AAYA,MAAaA,UAAiC,EAC5C,cAAc,WACd,IACA,MACA,eACI;AACJ,QACE,oBAAC;EACC,cAAY;EACR;EACJ,SAAQ;EACR,YAAW;EACX,QAAO;EACP,MAAM,OAAO,SAAS;EACtB,QAAQ;EAEP;GACgB"}

package/dist/AppBarDeprecated/AppBarSectionDeprecated.d.ts

@@ -15,4 +15,5 @@ interface AppBarSectionPropsDeprecated extends WithChildrenProp {
  */
 declare const AppBarSectionDeprecated: React$1.FC<AppBarSectionPropsDeprecated>;
 //#endregion
-export { AppBarSectionDeprecated, AppBarSectionPropsDeprecated };
+export { AppBarSectionDeprecated, AppBarSectionPropsDeprecated };
+//# sourceMappingURL=AppBarSectionDeprecated.d.ts.map

package/dist/AppBarDeprecated/AppBarSectionDeprecated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSectionDeprecated.d.ts","names":[],"sources":["../../src/AppBarDeprecated/AppBarSectionDeprecated.tsx"],"sourcesContent":[],"mappings":";;;;UAOiB,4BAAA,SAAqC;;AAAtD;AAYA;;;;;;;;cAAa,yBAAyB,OAAA,CAAM,GAC1C"}

package/dist/AppBarDeprecated/AppBarSectionDeprecated.js

@@ -20,4 +20,5 @@ const AppBarSectionDeprecated = ({ position, className, children }) => {
 };
 
 //#endregion
-export { AppBarSectionDeprecated };
+export { AppBarSectionDeprecated };
+//# sourceMappingURL=AppBarSectionDeprecated.js.map

package/dist/AppBarDeprecated/AppBarSectionDeprecated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSectionDeprecated.js","names":["AppBarSectionDeprecated: React.FC<\n  AppBarSectionPropsDeprecated\n>","styles"],"sources":["../../src/AppBarDeprecated/AppBarSectionDeprecated.tsx"],"sourcesContent":["import { WithChildrenProp } from '@codecademy/gamut';\nimport cx from 'classnames';\nimport * as React from 'react';\n\n// eslint-disable-next-line gamut/no-css-standalone\nimport styles from './styles/index.module.scss';\n\nexport interface AppBarSectionPropsDeprecated extends WithChildrenProp {\n  /**\n   * Position of the the section within the AppBar.\n   */\n  position?: 'left' | 'center' | 'right';\n  className?: string;\n}\n\n/**\n * @deprecated use `<AppBarSection>` instead\n * this component still exists since `<Footer>` in le-shared uses classnames\n */\nexport const AppBarSectionDeprecated: React.FC<\n  AppBarSectionPropsDeprecated\n> = ({ position, className, children }) => {\n  const classes = cx(\n    styles.section,\n    {\n      [styles.sectionRight]: position === 'right',\n      [styles.sectionLeft]: position === 'left',\n      [styles.sectionCenter]: position === 'center',\n    },\n    className\n  );\n  return <div className={classes}>{children}</div>;\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAaA,2BAER,EAAE,UAAU,WAAW,eAAe;AAUzC,QAAO,oBAAC;EAAI,WATI,GACdC,qBAAO,SACP;IACGA,qBAAO,eAAe,aAAa;IACnCA,qBAAO,cAAc,aAAa;IAClCA,qBAAO,gBAAgB,aAAa;GACtC,EACD,UACD;EACgC;GAAe"}

package/dist/AppBarDeprecated/index.d.ts

@@ -15,4 +15,5 @@ interface AppBarPropsDeprecated extends WithChildrenProp {
  */
 declare const AppBarDeprecated: React$1.FC<AppBarPropsDeprecated>;
 //#endregion
-export { AppBarDeprecated, AppBarPropsDeprecated };
+export { AppBarDeprecated, AppBarPropsDeprecated };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppBarDeprecated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AppBarDeprecated/index.tsx"],"sourcesContent":[],"mappings":";;;;UAOiB,qBAAA,SAA8B;;EAA9B;AAYjB;;;;;;;;cAAa,kBAAkB,OAAA,CAAM,GAAG"}

package/dist/AppBarDeprecated/index.js

@@ -21,4 +21,5 @@ const AppBarDeprecated = ({ wide, children, className }) => {
 };
 
 //#endregion
-export { AppBarDeprecated };
+export { AppBarDeprecated };
+//# sourceMappingURL=index.js.map

package/dist/AppBarDeprecated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppBarDeprecated: React.FC<AppBarPropsDeprecated>","styles"],"sources":["../../src/AppBarDeprecated/index.tsx"],"sourcesContent":["import { ContentContainer, WithChildrenProp } from '@codecademy/gamut';\nimport cx from 'classnames';\nimport * as React from 'react';\n\n// eslint-disable-next-line gamut/no-css-standalone\nimport styles from './styles/index.module.scss';\n\nexport interface AppBarPropsDeprecated extends WithChildrenProp {\n  className?: string;\n  /**\n   * Whether the container should be larger than the default content size.\n   */\n  wide?: boolean;\n}\n\n/**\n * @deprecated use `<AppBar>` instead\n * this component still exists since `<Footer>` in le-shared uses classnames\n */\nexport const AppBarDeprecated: React.FC<AppBarPropsDeprecated> = ({\n  wide,\n  children,\n  className,\n}) => {\n  const classes = cx(styles.wrapper, className);\n\n  return (\n    <ContentContainer\n      className={classes}\n      display=\"flex\"\n      alignItems=\"center\"\n      height=\"100%\"\n      size={wide ? 'wide' : 'medium'}\n    >\n      {children}\n    </ContentContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,oBAAqD,EAChE,MACA,UACA,gBACI;AAGJ,QACE,oBAAC;EACC,WAJY,GAAGC,qBAAO,SAAS,UAAU;EAKzC,SAAQ;EACR,YAAW;EACX,QAAO;EACP,MAAM,OAAO,SAAS;EAErB;GACgB"}

package/dist/AppBarDeprecated/styles/index.module.js

@@ -2,4 +2,5 @@
 var index_module_default = "assets/index.module-Dz0I2VL5.scss";
 
 //#endregion
-export { index_module_default as default };
+export { index_module_default as default };
+//# sourceMappingURL=index.module.js.map

package/dist/AppBarDeprecated/styles/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","names":[],"sources":["../../../src/AppBarDeprecated/styles/index.module.scss"],"sourcesContent":["__ROLLDOWN_ASSET_FILENAME__"],"mappings":";2BAAA,mCAAA"}

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

@@ -129,4 +129,5 @@ const MarketingBanner = ({ tabIndex, text, href }) => {
 };
 
 //#endregion
-export { MarketingBanner };
+export { MarketingBanner };
+//# sourceMappingURL=MarketingBanner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingBanner.js","names":["MarketingBanner: React.FC<MarketingBannerProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner.tsx"],"sourcesContent":["import { Anchor, Badge, Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowRightIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\n\nconst MarketingBannerAnchor = styled(Anchor)`\n  display: flex;\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n    text-decoration: none;\n  }\n`;\n\nconst MarketingBannerBox = styled(FlexBox)`\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']},\n    'rgba(255, 255, 255, 0.20)';\n  border-radius: 12px;\n  position: relative;\n  background: linear-gradient(\n    145deg,\n    ${({ theme }) => theme.colors['navy-800']} 50%,\n    ${({ theme }) => theme.colors['blue-400']} 100%\n  );\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(\n      145deg,\n      ${({ theme }) => theme.colors['navy-800']} 85%,\n      ${({ theme }) => theme.colors['blue-400']} 100%\n    );\n    opacity: 0;\n    transition: opacity 0.4s ease-in-out;\n    border-radius: 12px;\n  }\n\n  ${MarketingBannerAnchor}:hover &, ${MarketingBannerAnchor}:focus-visible & {\n    &::after {\n      opacity: 1;\n    }\n  }\n`;\n\nconst MarketingArrowIcon = styled(ArrowRightIcon)`\n  transition: transform 0.2s ease-in-out;\n\n  ${MarketingBannerAnchor}:hover &, ${MarketingBannerAnchor}:focus-visible & {\n    transform: translateX(10px);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nexport type MarketingBannerProps = {\n  tabIndex: number;\n  text: string;\n  href: string;\n};\n\nexport const MarketingBanner: React.FC<MarketingBannerProps> = ({\n  tabIndex,\n  text,\n  href,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  return (\n    <MarketingBannerAnchor\n      variant=\"interface\"\n      href={href}\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>\n        globalHeaderItemClick(event, {\n          type: 'link',\n          href,\n          text,\n          id: 'topnav_catalog_banner',\n          trackingTarget: 'topnav_catalog_banner',\n        })\n      }\n      tabIndex={tabIndex}\n      data-testid=\"marketing-banner\"\n    >\n      <MarketingBannerBox\n        width=\"100%\"\n        justifyContent=\"space-between\"\n        alignItems={{ _: 'flex-end', lg: 'center' }}\n        height={{ _: 'auto', lg: '40px' }}\n        color=\"white\"\n        mx={8}\n        mt={8}\n        px={24}\n        py={{ _: 16, lg: 8 }}\n        borderRadius=\"lg\"\n      >\n        <FlexBox\n          alignItems={{ _: 'flex-start', lg: 'center' }}\n          flexDirection={{ _: 'column', lg: 'row' }}\n          gap={{ _: 8, lg: 0 }}\n          zIndex={1}\n        >\n          <Badge\n            bg=\"yellow-500\"\n            color=\"navy-800\"\n            variant=\"custom\"\n            size=\"sm\"\n            mr={8}\n          >\n            New\n          </Badge>\n          <Text variant=\"p-base\">{text}</Text>\n        </FlexBox>\n        <Box height={16} width={16} zIndex={1}>\n          <MarketingArrowIcon />\n        </Box>\n      </MarketingBannerBox>\n    </MarketingBannerAnchor>\n  );\n};\n"],"mappings":";;;;;;;AAMA,MAAM,wBAAwB,OAAO,OAAO;;;;;;;;;AAU5C,MAAM,qBAAqB,OAAO,QAAQ;uBACnB,EAAE,YAAY,MAAM,OAAO,mBAAmB;;;;;;OAM9D,EAAE,YAAY,MAAM,OAAO,YAAY;OACvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;;;;;;SAYrC,EAAE,YAAY,MAAM,OAAO,YAAY;SACvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;IAO5C,sBAAsB,YAAY,sBAAsB;;;;;;AAO5D,MAAM,qBAAqB,OAAO,eAAe;;;IAG7C,sBAAsB,YAAY,sBAAsB;;;;;;;;AAe5D,MAAaA,mBAAmD,EAC9D,UACA,MACA,WACI;CACJ,MAAM,EAAE,0BAA0B,0BAA0B;AAE5D,QACE,oBAAC;EACC,SAAQ;EACF;EACN,UAAU,UACR,sBAAsB,OAAO;GAC3B,MAAM;GACN;GACA;GACA,IAAI;GACJ,gBAAgB;GACjB,CAAC;EAEM;EACV,eAAY;YAEZ,qBAAC;GACC,OAAM;GACN,gBAAe;GACf,YAAY;IAAE,GAAG;IAAY,IAAI;IAAU;GAC3C,QAAQ;IAAE,GAAG;IAAQ,IAAI;IAAQ;GACjC,OAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IAAE,GAAG;IAAI,IAAI;IAAG;GACpB,cAAa;cAEb,qBAAC;IACC,YAAY;KAAE,GAAG;KAAc,IAAI;KAAU;IAC7C,eAAe;KAAE,GAAG;KAAU,IAAI;KAAO;IACzC,KAAK;KAAE,GAAG;KAAG,IAAI;KAAG;IACpB,QAAQ;eAER,oBAAC;KACC,IAAG;KACH,OAAM;KACN,SAAQ;KACR,MAAK;KACL,IAAI;eACL;MAEO,EACR,oBAAC;KAAK,SAAQ;eAAU;MAAY;KAC5B,EACV,oBAAC;IAAI,QAAQ;IAAI,OAAO;IAAI,QAAQ;cAClC,oBAAC,uBAAqB;KAClB;IACa;GACC"}

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

@@ -291,4 +291,5 @@ const LiveLearningPanel = () => {
 };
 
 //#endregion
-export { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel };
+export { CareerPathsPanel, CertificationPathsPanel, CourseTopicsPanel, LiveLearningPanel, SkillPathsPanel };
+//# sourceMappingURL=NavPanels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavPanels.js","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/NavPanels.tsx"],"sourcesContent":["import { Anchor, Box, Card, FlexBox, GridBox, Text } from '@codecademy/gamut';\nimport { LevelIcon } from '@codecademy/gamut-icons';\nimport styled from '@emotion/styled';\n\nimport { CourseDifficulty } from '../../../ContentGroupBaseCard/types';\nimport {\n  useGlobalHeaderDynamicDataContext,\n  useGlobalHeaderItemClick,\n} from '../../../GlobalHeader/context';\nimport { liveLearningNavPanelItems } from '../../../lib/catalogList';\nimport { AppHeaderDietCard } from '../AppHeaderDietCard';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\nimport { PanelLayout } from '../AppHeaderSection/PanelLayout';\nimport { SkillTile } from '../AppHeaderSkillTile';\nimport {\n  CERTIFICATION_PROVIDERS,\n  popularLanguages,\n  popularSubjects,\n} from './consts';\n\nexport const CourseTopicsPanel = () => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { tabIndex } = useAppHeaderSectionContext();\n\n  const description = (\n    <>\n      Explore free or paid courses in a wide variety of topics. With something\n      for every skill level, it&apos;s easy to find a course that fits your\n      goals. Not sure where to start? &nbsp;\n      <Anchor\n        tabIndex={tabIndex}\n        href=\"/welcome/find-a-course\"\n        onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>\n          globalHeaderItemClick(event, {\n            type: 'link',\n            href: '/welcome/find-a-course',\n            text: 'Take the quiz',\n            id: 'take-the-quiz',\n          })\n        }\n      >\n        Take the quiz\n      </Anchor>\n    </>\n  );\n\n  return (\n    <PanelLayout\n      heading=\"Course topics\"\n      description={description}\n      linkItem={{\n        type: 'link',\n        href: '/catalog',\n        text: 'Explore the full catalog',\n        trackingTarget: 'topnav_catalog',\n        id: 'explore-all-courses',\n      }}\n    >\n      <Text variant=\"p-large\" fontWeight={700} as=\"h3\">\n        Popular languages\n      </Text>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n        mb={24}\n      >\n        {popularLanguages.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n\n      <Text variant=\"p-large\" fontWeight={700} as=\"h3\">\n        Popular subjects\n      </Text>\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n      >\n        {popularSubjects.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nexport const DietCardGrid = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <GridBox\n      as=\"ul\"\n      gridTemplateColumns={{\n        _: '1fr',\n        sm: 'repeat(2, minmax(0, 1fr))',\n        md: 'repeat(3, minmax(0, 1fr))',\n      }}\n      gap={16}\n      m={0}\n      p={0}\n      listStyleType=\"none\"\n    >\n      {children}\n    </GridBox>\n  );\n};\n\nexport const CareerPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const totalCareerPathCount =\n    globalHeaderDynamicData?.catalogDropdown.careerPaths.totalCareerPathCount;\n  const linkText = `Explore all${\n    totalCareerPathCount ? ` ${totalCareerPathCount}` : ''\n  } career paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Career paths\"\n      description=\"Choose your career and we'll teach you the skills to get job-ready. Each Career Path contains a curated list of lessons, quizzes, videos, and projects to help you learn and practice real-world skills.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog?type=career-path',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_career_paths',\n        id: 'explore-all-career-paths',\n      }}\n    >\n      <DietCardGrid>\n        {globalHeaderDynamicData?.catalogDropdown.careerPaths.promotedCareerPaths.map(\n          (path) => {\n            return (\n              <AppHeaderDietCard\n                key={`${path.title}-card`}\n                title={path.title}\n                hours={path.durationHours}\n                icon={<LevelIcon />}\n                difficulty={path.difficulty as CourseDifficulty}\n                href={path.urlPath}\n                trackingTarget={`careerpath_${path.title}`}\n              />\n            );\n          }\n        )}\n      </DietCardGrid>\n    </PanelLayout>\n  );\n};\n\nexport const SkillPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const totalSkillPathCount =\n    globalHeaderDynamicData?.catalogDropdown.skillPaths.totalSkillPathCount;\n  const linkText = `Explore all${\n    totalSkillPathCount ? ` ${totalSkillPathCount}` : ''\n  } skill paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Skill paths\"\n      description=\"Build in demand skills fast with a short, curated path. Each one includes interactive content to help you learn and apply your new skill in just a few months.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog?type=skill-path',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_skill_paths',\n        id: 'explore-all-skill-paths',\n      }}\n    >\n      <DietCardGrid>\n        {globalHeaderDynamicData?.catalogDropdown.skillPaths.promotedSkillPaths.map(\n          (path) => {\n            return (\n              <AppHeaderDietCard\n                key={`${path.title}-card`}\n                title={path.title}\n                hours={path.durationHours}\n                icon={<LevelIcon />}\n                difficulty={path.difficulty as CourseDifficulty}\n                href={path.urlPath}\n                trackingTarget={`skill_${path.title}`}\n              />\n            );\n          }\n        )}\n      </DietCardGrid>\n    </PanelLayout>\n  );\n};\n\nconst Image = Box.withComponent('img');\n\nconst GrayscaleToColorHoverLink = styled(Anchor)<{\n  overrideImgFilters?: boolean;\n}>`\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 8px;\n  filter: grayscale(1);\n  transition: filter 0.2s ease-out;\n  img {\n    filter: ${({ overrideImgFilters }) =>\n      overrideImgFilters ? 'contrast(5)' : 'brightness(0.25)'};\n    transition: filter 0.2s ease-out;\n  }\n  &:hover,\n  &:focus {\n    filter: grayscale(0);\n    img {\n      filter: brightness(1);\n    }\n    border-color: ${({ theme }) => theme.colors.hyper};\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n  }\n`;\n\nconst ProviderTile = ({\n  name,\n  href,\n  imgSrc,\n  tabIndex,\n}: {\n  name: string;\n  href: string;\n  imgSrc: string;\n  tabIndex: number;\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  const lowercasedProviderName = name.toLowerCase();\n\n  return (\n    <GrayscaleToColorHoverLink\n      href={href}\n      variant=\"interface\"\n      key={name}\n      tabIndex={tabIndex}\n      width=\"100%\"\n      height={48}\n      p={8}\n      display=\"block\"\n      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        globalHeaderItemClick(event, {\n          type: 'link',\n          id: `topnav_catalog_cert_${lowercasedProviderName}`,\n          href,\n          text: name,\n          trackingTarget: `topnav_catalog_cert_${lowercasedProviderName}`,\n        });\n        handleClose();\n      }}\n      overrideImgFilters={name.toLowerCase() === 'kubernetes'}\n    >\n      <Image src={imgSrc} alt={name} display=\"block\" m=\"auto\" />\n    </GrayscaleToColorHoverLink>\n  );\n};\n\nexport const CertificationPathsPanel = () => {\n  const { globalHeaderDynamicData } = useGlobalHeaderDynamicDataContext();\n  const { tabIndex } = useAppHeaderSectionContext();\n  const totalCertificationPathCount =\n    globalHeaderDynamicData?.catalogDropdown.certificationPaths\n      .totalCertificationPathCount;\n  const linkText = `Explore all${\n    totalCertificationPathCount ? ` ${totalCertificationPathCount}` : ''\n  } certification paths`;\n\n  return (\n    <PanelLayout\n      heading=\"Certification paths\"\n      description=\"Prepare for top industry certifications with a guided path. Each one includes expert-reviewed lessons, hands-on projects, and practice tests to help you pass the exam.\"\n      linkItem={{\n        type: 'link',\n        href: '/catalog/certification-prep',\n        text: linkText,\n        trackingTarget: 'topnav_catalog_header_explore_all_certification_paths',\n        id: 'explore-all-certification-paths',\n      }}\n    >\n      <Text as=\"h3\" fontSize={18} fontWeight=\"bold\">\n        Providers\n      </Text>\n      <GridBox\n        gridTemplateColumns={{\n          _: '1fr',\n          xs: 'repeat(2, 1fr)',\n          sm: 'repeat(3, 1fr)',\n          md: 'repeat(4, 1fr)',\n        }}\n        gap={16}\n        width=\"100%\"\n        as=\"ul\"\n        listStyle=\"none\"\n        p={0}\n        m={0}\n      >\n        {CERTIFICATION_PROVIDERS.map(({ name, logoUrl, hubType }) => (\n          <Box as=\"li\" key={name} width=\"100%\">\n            <ProviderTile\n              name={name}\n              href={\n                hubType === 'subhub'\n                  ? `/search?query=${name} certifications`\n                  : `/catalog/certification-prep?provider=${name.toLowerCase()}`\n              }\n              imgSrc={logoUrl}\n              tabIndex={tabIndex}\n            />\n          </Box>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nconst LiveLearningImage = styled.img`\n  object-fit: cover;\n  width: 100%;\n`;\n\nexport const LiveLearningPanel = () => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { isCoachingEnabled, tabIndex } = useAppHeaderSectionContext();\n  const getImageUrl = (id: string) =>\n    `https://static-assets.codecademy.com/assets/components/cards/global-header/live-learning/v1/${id}.webp`;\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  const liveLearningItems = liveLearningNavPanelItems(isCoachingEnabled);\n\n  return (\n    <PanelLayout\n      heading=\"Live learning\"\n      description={liveLearningItems.description}\n    >\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', md: 'repeat(2, 1fr)' }}\n        gap={16}\n      >\n        {liveLearningItems.data.map((item) => (\n          <Anchor\n            href={item.href}\n            key={item.id}\n            variant=\"interface\"\n            onClick={(\n              event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n            ) => {\n              globalHeaderItemClick(event, item);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n          >\n            <Card\n              key={item.id}\n              overflow=\"hidden\"\n              border={1}\n              borderColor=\"border-tertiary\"\n              borderRadius=\"lg\"\n              isInteractive\n              p={0}\n            >\n              <LiveLearningImage\n                src={getImageUrl(item.id)}\n                alt=\"\"\n                loading=\"lazy\"\n              />\n              <FlexBox flexDirection=\"column\" gap={8} p={16}>\n                <Text variant=\"title-xs\">{item.text}</Text>\n                {'description' in item && <Text>{item.description}</Text>}\n              </FlexBox>\n            </Card>\n          </Anchor>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n"],"mappings":"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"}

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

@@ -267,4 +267,5 @@ const popularSubjects = [
 ];
 
 //#endregion
-export { CATALOG_NAV_SECTIONS, CERTIFICATION_PROVIDERS, popularLanguages, popularSubjects };
+export { CATALOG_NAV_SECTIONS, CERTIFICATION_PROVIDERS, popularLanguages, popularSubjects };
+//# sourceMappingURL=consts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","names":["CATALOG_NAV_SECTIONS: NavSectionConfig[]","popularLanguages: AppHeaderLinkItem[]","popularSubjects: AppHeaderLinkItem[]"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts.tsx"],"sourcesContent":["import {\n  ArtificialIntelligenceIcon,\n  BookLibraryIcon,\n  BriefcaseIcon,\n  CIcon,\n  CloudComputingIcon,\n  CPlusIcon,\n  CSharpIcon,\n  CybersecurityIcon,\n  DataEngineeringIcon,\n  DataScienceIcon,\n  GrowthIcon,\n  HtmlCssIcon,\n  JavaIcon,\n  JavascriptIcon,\n  OnlineClassStudentIcon,\n  PhpIcon,\n  ProfessionalCertificateIcon,\n  ProgrammingBrowserIcon,\n  PythonIcon,\n  SqlIcon,\n  StudyBookIcon,\n  WebDesignIcon,\n  WebDevelopmentIcon,\n} from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { AppHeaderCatalogDropdownItem, AppHeaderLinkItem } from '../../shared';\nimport {\n  CareerPathsPanel,\n  CertificationPathsPanel,\n  CourseTopicsPanel,\n  LiveLearningPanel,\n  SkillPathsPanel,\n} from './NavPanels';\n\nexport type NavSectionConfig = {\n  item: AppHeaderCatalogDropdownItem;\n  panel: React.ComponentType<{ tabIndex?: number }>;\n};\n\nexport const getCertificationProviderLogoUrl = (fileName: string) =>\n  `https://static-assets.codecademy.com/assets/certification-provider-logos/catalog-dropdown/v2/${fileName}`;\n\nexport const CATALOG_NAV_SECTIONS: NavSectionConfig[] = [\n  {\n    item: {\n      icon: StudyBookIcon,\n      text: 'Course topics',\n      id: 'course-topics',\n      type: 'catalog-dropdown',\n      trackingTarget: 'topnav_catalog_tab_course_topics',\n    },\n    panel: CourseTopicsPanel,\n  },\n  {\n    item: {\n      icon: OnlineClassStudentIcon,\n      text: 'Live learning',\n      id: 'live-learning',\n      type: 'catalog-dropdown',\n      trackingTarget: 'topnav_catalog_tab_live_learning',\n    },\n    panel: LiveLearningPanel,\n  },\n  {\n    item: {\n      icon: BookLibraryIcon,\n      text: 'Skill paths',\n      id: 'skill-paths',\n      type: 'catalog-dropdown',\n      trackingTarget: 'topnav_catalog_tab_skill_paths',\n    },\n    panel: SkillPathsPanel,\n  },\n  {\n    item: {\n      icon: BriefcaseIcon,\n      text: 'Career paths',\n      id: 'career-paths',\n      type: 'catalog-dropdown',\n      trackingTarget: 'topnav_catalog_tab_career_paths',\n    },\n    panel: CareerPathsPanel,\n  },\n  {\n    item: {\n      icon: ProfessionalCertificateIcon,\n      text: 'Certification paths',\n      id: 'certification-paths',\n      type: 'catalog-dropdown',\n      trackingTarget: 'topnav_catalog_tab_certification_paths',\n    },\n    panel: CertificationPathsPanel,\n  },\n];\n\nexport const CERTIFICATION_PROVIDERS = [\n  {\n    name: 'Microsoft',\n    logoUrl: getCertificationProviderLogoUrl('microsoft.svg'),\n    hubType: 'subhub',\n  },\n  {\n    name: 'CompTIA',\n    logoUrl: getCertificationProviderLogoUrl('comptia.svg'),\n    hubType: 'subhub',\n  },\n  {\n    name: 'ISC2',\n    logoUrl: getCertificationProviderLogoUrl('isc2.svg'),\n    hubType: 'subhub',\n  },\n  {\n    name: 'AWS',\n    logoUrl: getCertificationProviderLogoUrl('aws.svg'),\n    hubType: 'subhub',\n  },\n  {\n    name: 'Google',\n    logoUrl: getCertificationProviderLogoUrl('google.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'Cisco',\n    logoUrl: getCertificationProviderLogoUrl('cisco.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'IIBA',\n    logoUrl: getCertificationProviderLogoUrl('iiba.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'ISTQB',\n    logoUrl: getCertificationProviderLogoUrl('istqb.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'ISACA',\n    logoUrl: getCertificationProviderLogoUrl('isaca.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'Kubernetes',\n    logoUrl: getCertificationProviderLogoUrl('kubernetes.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'Oracle',\n    logoUrl: getCertificationProviderLogoUrl('oracle.svg'),\n    hubType: 'certification-prep',\n  },\n  {\n    name: 'Project Management Institute',\n    logoUrl: getCertificationProviderLogoUrl('pmi.svg'),\n    hubType: 'certification-prep',\n  },\n];\n\nexport const popularLanguages: AppHeaderLinkItem[] = [\n  {\n    id: 'python',\n    href: '/catalog/language/python',\n    trackingTarget: 'topnav_catalog_skill_python',\n    text: 'Python',\n    type: 'link',\n    icon: PythonIcon,\n  },\n  {\n    id: 'javascript',\n    href: '/catalog/language/javascript',\n    trackingTarget: 'topnav_catalog_skill_javascript',\n    text: 'JavaScript',\n    type: 'link',\n    icon: JavascriptIcon,\n  },\n  {\n    id: 'html-css',\n    href: '/catalog/language/html-css',\n    trackingTarget: 'topnav_catalog_skill_html-css',\n    text: 'HTML & CSS',\n    type: 'link',\n    icon: HtmlCssIcon,\n  },\n  {\n    id: 'c-sharp',\n    href: '/catalog/language/c-sharp',\n    trackingTarget: 'topnav_catalog_skill_c-sharp',\n    text: 'C#',\n    type: 'link',\n    icon: CSharpIcon,\n  },\n  {\n    id: 'c-plus-plus',\n    href: '/catalog/language/c-plus-plus',\n    trackingTarget: 'topnav_catalog_skill_c-plus-plus',\n    text: 'C++',\n    type: 'link',\n    icon: CPlusIcon,\n  },\n  {\n    id: 'c',\n    href: '/catalog/language/c',\n    trackingTarget: 'topnav_catalog_skill_c',\n    text: 'C',\n    type: 'link',\n    icon: CIcon,\n  },\n  {\n    id: 'php',\n    href: '/catalog/language/php',\n    trackingTarget: 'topnav_catalog_skill_php',\n    text: 'PHP',\n    type: 'link',\n    icon: PhpIcon,\n  },\n  {\n    id: 'java',\n    href: '/catalog/language/java',\n    trackingTarget: 'topnav_catalog_skill_java',\n    text: 'Java',\n    type: 'link',\n    icon: JavaIcon,\n  },\n  {\n    id: 'sql',\n    href: '/catalog/language/sql',\n    trackingTarget: 'topnav_catalog_skill_sql',\n    text: 'SQL',\n    type: 'link',\n    icon: SqlIcon,\n  },\n];\n\nexport const popularSubjects: AppHeaderLinkItem[] = [\n  {\n    id: 'artificial-intelligence',\n    href: '/catalog/subject/artificial-intelligence',\n    trackingTarget: 'topnav_catalog_skill_ai',\n    text: 'AI',\n    type: 'link',\n    icon: ArtificialIntelligenceIcon,\n  },\n\n  {\n    id: 'it',\n    href: '/catalog/subject/information-technology',\n    trackingTarget: 'topnav_catalog_skill_it',\n    text: 'IT',\n    type: 'link',\n    icon: DataEngineeringIcon,\n  },\n  {\n    id: 'cybersecurity',\n    href: '/catalog/subject/cybersecurity',\n    trackingTarget: 'topnav_catalog_skill_cybersecurity',\n    text: 'Cybersecurity',\n    type: 'link',\n    icon: CybersecurityIcon,\n  },\n\n  {\n    id: 'cloud-computing',\n    href: '/catalog/subject/cloud-computing',\n    trackingTarget: 'topnav_catalog_skill_cloud-computing',\n    text: 'Cloud computing',\n    type: 'link',\n    icon: CloudComputingIcon,\n  },\n  {\n    id: 'web-development',\n    href: '/catalog/subject/web-development',\n    trackingTarget: 'topnav_catalog_skill_web_development',\n    text: 'Web development',\n    type: 'link',\n    icon: WebDevelopmentIcon,\n  },\n  {\n    id: 'data-science',\n    href: '/catalog/subject/data-science',\n    trackingTarget: 'topnav_catalog_skill_data-science',\n    text: 'Data science',\n    type: 'link',\n    icon: DataScienceIcon,\n  },\n  {\n    id: 'web-design',\n    href: '/catalog/subject/web-design',\n    trackingTarget: 'topnav_catalog_skill_web-design',\n    text: 'Web design',\n    type: 'link',\n    icon: WebDesignIcon,\n  },\n  {\n    id: 'professional-skills',\n    href: '/catalog/subject/professional-skills',\n    trackingTarget: 'topnav_catalog_skill_professional-skills',\n    text: 'Professional skills',\n    type: 'link',\n    icon: GrowthIcon,\n  },\n  {\n    id: 'code-foundations',\n    href: '/catalog/subject/code-foundations',\n    trackingTarget: 'topnav_catalog_skill_code-foundations',\n    text: 'Code foundations',\n    type: 'link',\n    icon: ProgrammingBrowserIcon,\n  },\n];\n"],"mappings":";;;;AAyCA,MAAa,mCAAmC,aAC9C,gGAAgG;AAElG,MAAaA,uBAA2C;CACtD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACD;EACE,MAAM;GACJ,MAAM;GACN,MAAM;GACN,IAAI;GACJ,MAAM;GACN,gBAAgB;GACjB;EACD,OAAO;EACR;CACF;AAED,MAAa,0BAA0B;CACrC;EACE,MAAM;EACN,SAAS,gCAAgC,gBAAgB;EACzD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,cAAc;EACvD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,WAAW;EACpD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,UAAU;EACnD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,aAAa;EACtD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,YAAY;EACrD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,WAAW;EACpD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,YAAY;EACrD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,YAAY;EACrD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,iBAAiB;EAC1D,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,aAAa;EACtD,SAAS;EACV;CACD;EACE,MAAM;EACN,SAAS,gCAAgC,UAAU;EACnD,SAAS;EACV;CACF;AAED,MAAaC,mBAAwC;CACnD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF;AAED,MAAaC,kBAAuC;CAClD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CAED;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CAED;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD;EACE,IAAI;EACJ,MAAM;EACN,gBAAgB;EAChB,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF"}

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

@@ -7,4 +7,5 @@ type AppHeaderCatalogDropdownProps = AppHeaderAction & {
   item: AppHeaderCatalogDropdownItem;
 };
 //#endregion
-export { AppHeaderCatalogDropdownProps };
+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"],"sourcesContent":[],"mappings":";;;;;KAqBY,6BAAA,GAAgC;QACpC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderCatalogDropdown: React.FC<\n  AppHeaderCatalogDropdownProps\n>"],"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            isCoachingEnabled={item.isCoachingEnabled}\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,iCAAiC,OAAO,0BAA0B,EAEtE,oBAAoB,SAClB,SAAS,mCACT,SAAS,+BACZ,CAAC,AAGA;;WAES,EAAE,oCAAoC;AAC7C,QAAO;EACP;;;aAGS,EAAE,kCAAkC;AAC3C,QAAO;EACP;;;AAIN,MAAaA,4BAER,EAAE,QAAQ,WAAW;CACxB,MAAM,EAAE,SAAS;CACjB,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,cAAc,OAA8B,KAAK;CACvD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,oBAAoB,0BAA0B,qBAAqB;CAC3E,MAAM,EAAE,eAAe,yBAAyB;CAChD,MAAM,EAAE,oBAAoB,kBAAkB;CAC9C,MAAM,gCAAgC,gBAAgB;CACtD,MAAM,8BAA8B,gBAAgB;CAEpD,MAAM,0BAA0B;AAC9B,MAAI,UAAU,YAAY,QACxB,aAAY,QAAQ,YAAY;;CAIpC,MAAM,oBAAoB;AACxB,aAAW,SAAS,OAAO;;CAG7B,MAAM,iBAAiB,UAA4B;AACjD,MAAI,CAAC,QAAQ;AACX,UAAO,OAAO,KAAK;AACnB,OAAI,sBACF,uBAAsB,KAAK;;AAG/B,aAAW,SAAS,CAAC,KAAK;;CAG5B,MAAM,cAAc,kBAAkB;AACpC,YAAU,MAAM;AAChB,eAAa;IACZ,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,uBAAuB,QAAQ,OACjC,WAAU,MAAM;IAGjB,CAAC,mBAAmB,CAAC;AAExB,iBAAgB;EACd,SAAS,mBAAmB,OAA2B;GACrD,MAAM,YAAY,cAAc;GAChC,MAAM,SAAS,WAAW;AAC1B,OACE,UACA,aACA,CAAC,UAAU,SAAS,MAAM,OAAe,IACzC,UACA,CAAC,OAAO,SAAS,MAAM,OAAe,CAEtC,cAAa;;AAIjB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,WAAS,iBAAiB,QAAQ,mBAAmB;AACrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,YAAS,oBAAoB,QAAQ,mBAAmB;;IAEzD;EAAC;EAAc;EAAa;EAAO,CAAC;AAEvC,QACE,qBAAC;EAAuC;aACtC,oBAAC;GACY;GACI;GACP;GACF;IACN,EACF,oBAAC;GACS;GACuB;GACF;GAC7B,UAAU;GACV,eAAY;GACZ,qBAAqB;GACrB,KAAK;aAEL,oBAAC;IAAU,MAAK;cACd,oBAAC;KACS;KACR,KAAK;KACL,aAAa;KACI;KACjB,mBAAmB,UAAU,MAAM;KACnC,MAAK;KACL,mBAAmB,KAAK;MACxB;KACQ;IACmB;GACP"}

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

@@ -109,4 +109,5 @@ const AppHeaderDietCard = ({ title, hours, icon, difficulty, href, trackingTarge
 };
 
 //#endregion
-export { AppHeaderDietCard };
+export { AppHeaderDietCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["theme"],"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,MAAM,aAAa,OAAO,KAAK;;qBAEV,EAAE,qBAAYA,QAAM,OAAO,MAAM;;;;AAKtD,MAAM,aAAa,OAAO,aAAa,CACrC,IAAI;CACF,QAAQ;CACR,SAAS;CACT,UAAU;CACV,WAAW;CACZ,CAAC,CACH;AAED,MAAM,0BAA0B,OAAO,QAAQ,AAE7C;;kBAEgB,EAAE,0BACd,sBAAsB,QAAQ,OAAO;;;;kBAIzB,EAAE,0BACd,sBAAsB,QAAQ,OAAO;;;;kBAIzB,EAAE,0BACd,sBAAsB,QAAQ,OAAO;;;AAa3C,MAAa,qBAAqB,EAChC,OACA,OACA,MACA,YACA,MACA,qBAC4B;CAC5B,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,sBAAsB,eAAe,iBAAiB;AAE5D,QACE,oBAAC,kBACC,oBAAC;EACO;EACN,SAAQ;EACR,SAAQ;EACR,UAAU,UACR,sBAAsB,OAAO;GAC3B,MAAM;GACN,IAAI,kBAAkB;GACtB;GACA,MAAM;GACN,gBAAgB,kBAAkB,kBAAkB;GACrD,CAAC;YAGJ,qBAAC;GACC,cAAa;GACb,aAAY;GACZ,WAAW;GACX,SAAQ;GACR,eAAc;GACd,gBAAe;GACf,IAAI;GACJ,IAAI;GACJ;cAEA,oBAAC;IACC,IAAG;IACH,SAAQ;IACR,YAAY;IACZ,UAAS;IACT,eAAe;cAEd;KACI,EACP,qBAAC,kBACC,oBAAC;IAAI,IAAI;IAAG,IAAI;IAAG,QAAQ;IAAG,UAAS;IAAW;cAChD,oBAAC,cAAW,OAAM,oBAAoB;KAClC,EACN,qBAAC;IAAQ,gBAAe;IAAgB,YAAW;eAChD,cACC,qBAAC;KACsB;KACrB,gBAAe;KACf,YAAW;KACX,KAAK;;MAEJ;MACD,oBAAC;OAAK;iBAAc,GAAG,aACrB,sBAAsB,cAAc,GACrC;QAAU;MACX,qBAAC;OACC,SAAQ;OACR,UAAU;OACV,OAAM;OACN,eAAY;OACZ;OACA,UAAS;OACT,eAAe;OACf,UAAS;kBAET,oBAAC,iBAAG,aAAe,EAClB,uBAAuB,0CAAE,cAAY;QACjC;;MACiB,EAE3B,SACC,qBAAC;KACC,UAAU;KACV,SAAQ;KACR,OAAM;KACN,YAAW;gBAEX,oBAAC,iBAAG,QAAU;MACT;KAED,IACN;IACK;GACN,GACN"}

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

@@ -14,4 +14,5 @@ type AppHeaderDropdownProps = AppHeaderAction & Pick<React$1.ComponentProps<type
 };
 declare const AppHeaderDropdown: React$1.FC<AppHeaderDropdownProps>;
 //#endregion
-export { AppHeaderDropdown, AppHeaderDropdownProps };
+export { AppHeaderDropdown, AppHeaderDropdownProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderDropdown/index.tsx"],"sourcesContent":[],"mappings":";;;;;;KA+BY,sBAAA,GAAyB,kBACnC,KAAK,OAAA,CAAM,sBAAsB;QACzB;;AAFV;;;EACO,UAAM,CAAA,EAAA,OAAA;CAAX;AACQ,cAQG,iBARH,EAQsB,OAAA,CAAM,EAR5B,CAQ+B,sBAR/B,CAAA"}

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

@@ -91,4 +91,5 @@ const AppHeaderDropdown = ({ action, item, spacing = "normal", standalone }) =>
 };
 
 //#endregion
-export { AppHeaderDropdown };
+export { AppHeaderDropdown };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderDropdown: React.FC<AppHeaderDropdownProps>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderDropdown/index.tsx"],"sourcesContent":["import { Menu } from '@codecademy/gamut';\nimport { ColorMode, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  AnimatedSimpleDropdown,\n  AppHeaderAction,\n  AppHeaderDropdownItem,\n} from '../../shared';\nimport { AppHeaderLinkSections } from '../AppHeaderLinkSections';\nimport { AppHeaderMenuProvider } from '../AppHeaderMenuProvider';\nimport { AppHeaderMenuNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\n\nconst StyledLinkSection = styled(AppHeaderLinkSections)(\n  css({\n    padding: `0.75rem 0`,\n    position: `absolute`,\n  })\n);\n\nconst StyledDropdownMenu = styled(Menu)(\n  css({\n    border: 1,\n    borderColor: 'border-tertiary',\n    borderRadius: 'lg',\n  })\n);\n\nexport type AppHeaderDropdownProps = AppHeaderAction &\n  Pick<React.ComponentProps<typeof Menu>, 'spacing'> & {\n    item: AppHeaderDropdownItem;\n    /**\n     * If true, the dropdown is being rendered as a standalone component, rather than\n     * part of the global header.\n     */\n    standalone?: boolean;\n  };\n\nexport const AppHeaderDropdown: React.FC<AppHeaderDropdownProps> = ({\n  action,\n  item,\n  spacing = 'normal',\n  standalone,\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const [isOpen, setIsOpen] = useState(false);\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n\n  const dropdownId = item?.text ?? item?.type;\n\n  const toggleIsOpen = () => setIsOpen((prev) => !prev);\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    toggleIsOpen();\n    if (!isOpen) {\n      if (action) action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(dropdownId);\n      }\n    }\n  };\n\n  const handleKeyboardClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== dropdownId && 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 list = listRef?.current;\n      const button = buttonRef?.current;\n      if (\n        isOpen &&\n        list &&\n        !list.contains(event.target as Node) &&\n        button &&\n        !button.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\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  }, [listRef, isOpen]);\n\n  const isProfileDropdown = item.type === 'profile-dropdown';\n  const isGenericDropdown = ['dropdown', 'resources-simple-dropdown'].includes(\n    item.type\n  );\n\n  return (\n    <AppHeaderMenuProvider handleClose={handleKeyboardClose}>\n      <AppHeaderMenuNavButton\n        buttonRef={buttonRef}\n        handleOnClick={handleOnClick}\n        isOpen={isOpen}\n        item={item}\n      />\n      <AnimatedSimpleDropdown\n        isOpen={isOpen}\n        // eslint-disable-next-line gamut/no-inline-style\n        style={{\n          right: isProfileDropdown ? '0.5rem' : '',\n          top: isGenericDropdown && standalone ? '2.75rem' : '3.5rem',\n        }}\n      >\n        <ColorMode mode=\"light\">\n          <StyledDropdownMenu\n            minWidth=\"202px\"\n            ref={listRef}\n            role={isProfileDropdown ? 'menu' : undefined}\n            spacing={spacing}\n            variant=\"popover\"\n            width=\"fit-content\"\n            zIndex={1}\n            py={spacing === 'normal' ? 12 : 0}\n          >\n            <StyledLinkSection action={action} item={item} isOpen={isOpen} />\n          </StyledDropdownMenu>\n        </ColorMode>\n      </AnimatedSimpleDropdown>\n    </AppHeaderMenuProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,oBAAoB,OAAO,sBAAsB,CACrD,IAAI;CACF,SAAS;CACT,UAAU;CACX,CAAC,CACH;AAED,MAAM,qBAAqB,OAAO,KAAK,CACrC,IAAI;CACF,QAAQ;CACR,aAAa;CACb,cAAc;CACf,CAAC,CACH;AAYD,MAAaA,qBAAuD,EAClE,QACA,MACA,UAAU,UACV,iBACI;CACJ,MAAM,UAAU,OAAyB,KAAK;CAC9C,MAAM,YAAY,OAA0B,KAAK;CAEjD,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,oBAAoB,0BAA0B,qBAAqB;CAE3E,MAAM,aAAa,MAAM,QAAQ,MAAM;CAEvC,MAAM,qBAAqB,WAAW,SAAS,CAAC,KAAK;CAErD,MAAM,iBAAiB,UAA4B;AACjD,gBAAc;AACd,MAAI,CAAC,QAAQ;AACX,OAAI,OAAQ,QAAO,OAAO,KAAK;AAC/B,OAAI,sBACF,uBAAsB,WAAW;;;CAKvC,MAAM,sBAAsB,kBAAkB;AAC5C,YAAU,MAAM;AAChB,YAAU,SAAS,OAAO;IACzB,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,uBAAuB,cAAc,OACvC,WAAU,MAAM;IAGjB,CAAC,mBAAmB,CAAC;AAExB,iBAAgB;EACd,SAAS,mBAAmB,OAA2B;GACrD,MAAM,OAAO,SAAS;GACtB,MAAM,SAAS,WAAW;AAC1B,OACE,UACA,QACA,CAAC,KAAK,SAAS,MAAM,OAAe,IACpC,UACA,CAAC,OAAO,SAAS,MAAM,OAAe,CAEtC,WAAU,MAAM;;AAIpB,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,WAAS,iBAAiB,QAAQ,mBAAmB;AACrD,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;AAC7D,YAAS,oBAAoB,QAAQ,mBAAmB;;IAEzD,CAAC,SAAS,OAAO,CAAC;CAErB,MAAM,oBAAoB,KAAK,SAAS;CACxC,MAAM,oBAAoB,CAAC,YAAY,4BAA4B,CAAC,SAClE,KAAK,KACN;AAED,QACE,qBAAC;EAAsB,aAAa;aAClC,oBAAC;GACY;GACI;GACP;GACF;IACN,EACF,oBAAC;GACS;GAER,OAAO;IACL,OAAO,oBAAoB,WAAW;IACtC,KAAK,qBAAqB,aAAa,YAAY;IACpD;aAED,oBAAC;IAAU,MAAK;cACd,oBAAC;KACC,UAAS;KACT,KAAK;KACL,MAAM,oBAAoB,SAAS;KAC1B;KACT,SAAQ;KACR,OAAM;KACN,QAAQ;KACR,IAAI,YAAY,WAAW,KAAK;eAEhC,oBAAC;MAA0B;MAAc;MAAc;OAAU;MAC9C;KACX;IACW;GACH"}

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

@@ -28,4 +28,5 @@ const AppHeaderDropdownProvider = ({ children, handleClose }) => {
 const useAppHeaderDropdownContext = () => useContext(AppHeaderDropdownContext);
 
 //#endregion
-export { AppHeaderDropdownContext, AppHeaderDropdownProvider, useAppHeaderDropdownContext };
+export { AppHeaderDropdownContext, AppHeaderDropdownProvider, useAppHeaderDropdownContext };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderDropdownProvider: React.FC<{\n  children: ReactNode;\n  handleClose: () => void;\n}>"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderDropdownProvider/index.tsx"],"sourcesContent":["import { Box } from '@codecademy/gamut';\nimport noop from 'lodash/fp/noop';\nimport React, {\n  createContext,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\nimport { AnchorRefItemType, useOnEscHandler } from '../../shared';\n\nexport interface AppHeaderDropdownContextType {\n  firstItemRef?: AnchorRefItemType;\n  setFirstItemRef: Dispatch<SetStateAction<AnchorRefItemType>> | undefined;\n  handleClose: () => void;\n}\n\nexport const AppHeaderDropdownContext =\n  createContext<AppHeaderDropdownContextType>({\n    firstItemRef: undefined,\n    setFirstItemRef: undefined,\n    handleClose: () => noop,\n  });\n\nexport const AppHeaderDropdownProvider: React.FC<{\n  children: ReactNode;\n  handleClose: () => void;\n}> = ({ children, handleClose }) => {\n  const [firstItemRef, setFirstItemRef] = useState<\n    AnchorRefItemType | undefined\n  >(undefined);\n\n  const onKeyDown = useOnEscHandler(handleClose);\n\n  return (\n    <AppHeaderDropdownContext.Provider\n      value={{ firstItemRef, setFirstItemRef, handleClose }}\n    >\n      <Box onKeyDown={onKeyDown}>{children}</Box>\n    </AppHeaderDropdownContext.Provider>\n  );\n};\n\nexport const useAppHeaderDropdownContext = () =>\n  useContext(AppHeaderDropdownContext);\n"],"mappings":";;;;;;;AAmBA,MAAa,2BACX,cAA4C;CAC1C,cAAc;CACd,iBAAiB;CACjB,mBAAmB;CACpB,CAAC;AAEJ,MAAaA,6BAGP,EAAE,UAAU,kBAAkB;CAClC,MAAM,CAAC,cAAc,mBAAmB,SAEtC,OAAU;CAEZ,MAAM,YAAY,gBAAgB,YAAY;AAE9C,QACE,oBAAC,yBAAyB;EACxB,OAAO;GAAE;GAAc;GAAiB;GAAa;YAErD,oBAAC;GAAe;GAAY;IAAe;GACT;;AAIxC,MAAa,oCACX,WAAW,yBAAyB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["theme"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.tsx"],"sourcesContent":["import { Box, Card, FlexBox, Text } from '@codecademy/gamut';\nimport { GridDense } from '@codecademy/gamut-patterns';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nimport { AppHeaderCardItem } from '../AppHeaderResourcesDropdown/consts';\n\nconst StyledCard = styled(Card)`\n  &:hover {\n    color: ${({ theme }) => theme.colors.primary};\n    border-color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const AppHeaderFeatureCard = ({ item }: { item: AppHeaderCardItem }) => {\n  return (\n    <StyledCard\n      isInteractive\n      px={16}\n      py={24}\n      borderRadius=\"lg\"\n      border={1}\n      borderColor=\"border-tertiary\"\n      display=\"flex\"\n      alignItems=\"flex-start\"\n      flexDirection=\"column\"\n      height=\"100%\"\n    >\n      <FlexBox alignItems=\"center\" gap={8}>\n        <FlexBox\n          background={theme.colors['navy-200']}\n          borderRadius=\"md\"\n          p={4}\n          height={32}\n          width={32}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {item.icon}\n        </FlexBox>\n        <Text variant=\"p-large\" fontWeight={700} as=\"h3\">\n          {item.linkItem.text}\n        </Text>\n      </FlexBox>\n      <Box width=\"100%\">\n        <GridDense height={4} />\n      </Box>\n      <Text variant=\"p-small\">{item.description}</Text>\n    </StyledCard>\n  );\n};\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,OAAO,KAAK;;cAEjB,EAAE,qBAAYA,QAAM,OAAO,QAAQ;qBAC5B,EAAE,qBAAYA,QAAM,OAAO,QAAQ;;;AAIxD,MAAa,wBAAwB,EAAE,WAAwC;AAC7E,QACE,qBAAC;EACC;EACA,IAAI;EACJ,IAAI;EACJ,cAAa;EACb,QAAQ;EACR,aAAY;EACZ,SAAQ;EACR,YAAW;EACX,eAAc;EACd,QAAO;;GAEP,qBAAC;IAAQ,YAAW;IAAS,KAAK;eAChC,oBAAC;KACC,YAAY,MAAM,OAAO;KACzB,cAAa;KACb,GAAG;KACH,QAAQ;KACR,OAAO;KACP,YAAW;KACX,gBAAe;eAEd,KAAK;MACE,EACV,oBAAC;KAAK,SAAQ;KAAU,YAAY;KAAK,IAAG;eACzC,KAAK,SAAS;MACV;KACC;GACV,oBAAC;IAAI,OAAM;cACT,oBAAC,aAAU,QAAQ,IAAK;KACpB;GACN,oBAAC;IAAK,SAAQ;cAAW,KAAK;KAAmB;;GACtC"}