@codecademy/brand 4.0.0-alpha.af4a3e14fc.0 → 4.0.0-alpha.bec91dc078.0

package/dist/AppHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeader: React.FC<AppHeaderProps>","items"],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":["import { Menu } from '@codecademy/gamut';\nimport * as React from 'react';\nimport { useContext, useMemo, useRef } from 'react';\n\nimport {\n  AppHeaderAction,\n  AppHeaderItem,\n  AppHeaderSearch,\n  FormattedAppHeaderItems,\n  LogErrorContext,\n} from '..';\nimport { HeaderHeightArea } from '../HeaderHeightArea';\nimport { NotificationsDropdown } from '../Notifications/NotificationsDropdown';\nimport { AppHeaderNotificationSettings } from '../Notifications/types';\nimport { useHeaderNotifications } from '../Notifications/useHeaderNotifications';\nimport { AppHeaderListItem } from './AppHeaderElements/AppHeaderListItem';\nimport { AppHeaderProvider } from './AppHeaderElements/AppHeaderProvider';\nimport { SearchTrackingProvider } from './Search/SearchTrackingProvider';\nimport { useHeaderSearch } from './Search/useHeaderSearch';\nimport {\n  appHeaderMobileBreakpoint,\n  appHeaderSpacing,\n  StyledAppBar,\n  StyledNavBar,\n} from './shared';\nimport { mapAppHeaderItemToElement } from './shared/utils';\n\nexport * from './Search/consts';\n\nexport type AppHeaderProps = AppHeaderAction & {\n  items: FormattedAppHeaderItems;\n  notifications?: AppHeaderNotificationSettings;\n  redirectParam?: string;\n  search: AppHeaderSearch;\n  /**\n   * used to conditonally hide the default search icon and notification bell\n   */\n  hideRightButtonDefaults?: boolean;\n  /**\n   * temporary solution to allow this to be used in LXStudio. Future Header epic here: GM-1024\n   */\n  isStandalone?: boolean;\n  isTeams?: boolean;\n  dropdownSpacing?: React.ComponentProps<typeof Menu>['spacing'];\n  type?: 'standard' | 'enterprise';\n};\n\nexport const AppHeader: React.FC<AppHeaderProps> = ({\n  action,\n  hideRightButtonDefaults,\n  items,\n  notifications,\n  redirectParam,\n  search,\n  isStandalone,\n  isTeams,\n  dropdownSpacing,\n  type = 'standard',\n}) => {\n  const menuContainerRef = useRef<HTMLUListElement>(null);\n\n  const [notificationsBell, notificationsView] = useHeaderNotifications({\n    settings: notifications,\n    Renderer: NotificationsDropdown,\n  });\n  const [searchButton, searchPane] = useHeaderSearch({\n    ...search,\n  });\n\n  const right = useMemo(() => {\n    const defaultItems = hideRightButtonDefaults\n      ? []\n      : [searchButton, ...(notificationsBell ? [notificationsBell] : [])];\n\n    if (isTeams) {\n      const teamsSpecificMenuItems = items.right.slice(0, -1);\n      const profile = items.right[items.right.length - 1];\n\n      return [...teamsSpecificMenuItems, ...defaultItems, profile];\n    }\n\n    return [...defaultItems, ...items.right];\n  }, [\n    searchButton,\n    notificationsBell,\n    hideRightButtonDefaults,\n    items,\n    isTeams,\n  ]);\n\n  const { logError } = useContext(LogErrorContext);\n\n  const mapItemsToElement = <T extends AppHeaderItem[]>(\n    items: T,\n    side: 'left' | 'right'\n  ) => {\n    // logging error to help with debugging\n    if (items && items.some((item) => !item)) {\n      try {\n        const itemTypesString = items\n          .map((item) => {\n            if (!item) return '**UNDEFINED ITEM**';\n            return item.type;\n          })\n          .join(', ');\n\n        logError?.(\n          `Error: Found an undefined app header item on the ${side} side of the header.`,\n          {\n            message: `The current array of items includes the following header item types: ${itemTypesString}`,\n          }\n        );\n      } catch (e) {\n        logError?.(`Error while logging undefined header items: ${e}`);\n      }\n    }\n\n    return (\n      items\n        // preventative measure to handle a possibly undefined item from being rendered\n        .filter((item) => !!item)\n        .map((item, index) => {\n          const margin = appHeaderSpacing[type];\n          return (\n            <AppHeaderListItem\n              key={item.id}\n              mr={margin}\n              ml={side === 'right' && index === 0 ? 'auto' : margin}\n            >\n              {mapAppHeaderItemToElement({\n                action,\n                item,\n                isStandalone,\n                isTeams,\n                redirectParam,\n                spacing: dropdownSpacing,\n              })}\n            </AppHeaderListItem>\n          );\n        })\n    );\n  };\n\n  return (\n    <HeaderHeightArea\n      display={{ _: 'none', [appHeaderMobileBreakpoint]: 'block' }}\n    >\n      <AppHeaderProvider>\n        <SearchTrackingProvider>\n          <StyledAppBar aria-label=\"Main\" as=\"nav\">\n            <StyledNavBar ref={menuContainerRef}>\n              {mapItemsToElement(items.left, 'left')}\n              {mapItemsToElement(right, 'right')}\n            </StyledNavBar>\n          </StyledAppBar>\n          {notificationsView}\n          {searchPane}\n        </SearchTrackingProvider>\n      </AppHeaderProvider>\n    </HeaderHeightArea>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,MAAaA,aAAuC,EAClD,QACA,yBACA,OACA,eACA,eACA,QACA,cACA,SACA,iBACA,OAAO,iBACH;CACJ,MAAM,mBAAmB,OAAyB,KAAK;CAEvD,MAAM,CAAC,mBAAmB,qBAAqB,uBAAuB;EACpE,UAAU;EACV,UAAU;EACX,CAAC;CACF,MAAM,CAAC,cAAc,cAAc,gBAAgB,EACjD,GAAG,QACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;EAC1B,MAAM,eAAe,0BACjB,EAAE,GACF,CAAC,cAAc,GAAI,oBAAoB,CAAC,kBAAkB,GAAG,EAAE,CAAE;AAErE,MAAI,SAAS;GACX,MAAM,yBAAyB,MAAM,MAAM,MAAM,GAAG,GAAG;GACvD,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,SAAS;AAEjD,UAAO;IAAC,GAAG;IAAwB,GAAG;IAAc;IAAQ;;AAG9D,SAAO,CAAC,GAAG,cAAc,GAAG,MAAM,MAAM;IACvC;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,aAAa,WAAW,gBAAgB;CAEhD,MAAM,qBACJ,SACA,SACG;AAEH,MAAIC,WAASA,QAAM,MAAM,SAAS,CAAC,KAAK,CACtC,KAAI;GACF,MAAM,kBAAkBA,QACrB,KAAK,SAAS;AACb,QAAI,CAAC,KAAM,QAAO;AAClB,WAAO,KAAK;KACZ,CACD,KAAK,KAAK;AAEb,cACE,oDAAoD,KAAK,uBACzD,EACE,SAAS,wEAAwE,mBAClF,CACF;WACM,GAAG;AACV,cAAW,+CAA+C,IAAI;;AAIlE,SACEA,QAEG,QAAQ,SAAS,CAAC,CAAC,KAAK,CACxB,KAAK,MAAM,UAAU;GACpB,MAAM,SAAS,iBAAiB;AAChC,UACE,oBAAC;IAEC,IAAI;IACJ,IAAI,SAAS,WAAW,UAAU,IAAI,SAAS;cAE9C,0BAA0B;KACzB;KACA;KACA;KACA;KACA;KACA,SAAS;KACV,CAAC;MAXG,KAAK,GAYQ;IAEtB;;AAIR,QACE,oBAAC;EACC,SAAS;GAAE,GAAG;IAAS,4BAA4B;GAAS;YAE5D,oBAAC,+BACC,qBAAC;GACC,oBAAC;IAAa,cAAW;IAAO,IAAG;cACjC,qBAAC;KAAa,KAAK;gBAChB,kBAAkB,MAAM,MAAM,OAAO,EACrC,kBAAkB,OAAO,QAAQ;MACrB;KACF;GACd;GACA;MACsB,GACP;GACH"}

package/dist/AppHeader/shared/elements.js

@@ -157,4 +157,5 @@ const appHeaderSpacing = {
 };
 
 //#endregion
-export { AnimatedHeaderZone, AnimatedMegaMenuDropdown, AnimatedSimpleDropdown, DropdownAnchor, DropdownIcon, StyledAppBar, StyledNavBar, StyledText, appHeaderMobileBreakpoint, appHeaderSpacing };
+export { AnimatedHeaderZone, AnimatedMegaMenuDropdown, AnimatedSimpleDropdown, DropdownAnchor, DropdownIcon, StyledAppBar, StyledNavBar, StyledText, appHeaderMobileBreakpoint, appHeaderSpacing };
+//# sourceMappingURL=elements.js.map

package/dist/AppHeader/shared/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["animatedPopoverVariants: Variants","AnimatedHeaderZone: React.FC<AnimatedHeaderZoneProps>","React"],"sources":["../../../src/AppHeader/shared/elements.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  FlexBox,\n  LayoutGrid,\n  Text,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { ArrowChevronDownFilledIcon } from '@codecademy/gamut-icons';\nimport {\n  Colors,\n  css,\n  pxRem,\n  states,\n  useCurrentMode,\n} from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  Variants,\n} from 'framer-motion';\nimport * as React from 'react';\n\nimport { AppBar } from '../../AppBar';\nimport { GradientBackground } from '../AppHeaderElements/AppHeaderSection/elements';\n\nexport const appHeaderMobileBreakpoint = 'lg' as const;\n\nexport interface AnimatedHeaderZoneProps extends WithChildrenProp {\n  visible?: boolean;\n}\n\nconst animatedPopoverVariants: Variants = {\n  enter: { opacity: 1, transition: { duration: 0.2 } },\n  exit: { opacity: 0, transition: { duration: 0.2 } },\n};\n\nexport const useMegaMenuHeaderResponsiveStyles = (): {\n  bg: Colors;\n  borderColor: Colors;\n  color: Colors;\n} => {\n  const mode = useCurrentMode();\n\n  const bg = mode === 'dark' ? 'white' : 'navy-800';\n  const color = mode === 'dark' ? 'navy-900' : 'blue-0';\n\n  return { bg, borderColor: color, color };\n};\n\nexport const AnimatedHeaderZone: React.FC<AnimatedHeaderZoneProps> = ({\n  children,\n  visible,\n}) => {\n  return visible ? (\n    <AnimatePresence>\n      <motion.div\n        animate=\"enter\"\n        exit=\"exit\"\n        initial=\"exit\"\n        variants={animatedPopoverVariants}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  ) : null;\n};\n\nexport const DropdownAnchor = styled(Anchor)(\n  css({\n    alignItems: `center`,\n    display: `flex`,\n    padding: `0.5rem 0`,\n    textAlign: `center`,\n    whiteSpace: `nowrap`,\n\n    '&:focus::before': {\n      opacity: 1,\n    },\n  })\n);\n\nconst dropdownStates = states({\n  open: {\n    transform: `rotate(-180deg)`,\n  },\n});\n\nexport const DropdownIcon = styled(ArrowChevronDownFilledIcon)<\n  StyleProps<typeof dropdownStates>\n>(\n  css({\n    marginLeft: pxRem(5),\n    transition: `transform 0.35s ease-out`,\n    transformOrigin: `center ${pxRem(5)}`,\n  }),\n  dropdownStates\n);\n\nexport const StyledText = styled(Text)(\n  css({\n    '&::after': {\n      display: `block`,\n      content: `attr(title)`,\n      fontWeight: `bold`,\n      height: `1px`,\n      color: `transparent`,\n      overflow: `hidden`,\n      visibility: `hidden`,\n    },\n  })\n);\n\nconst getDropdownAnimations = ({\n  isOpen,\n  prefersReducedMotion,\n}: {\n  isOpen: boolean;\n  prefersReducedMotion: boolean | null;\n}) => {\n  const openState = {\n    transform: 'translateY(0)',\n    opacity: 1,\n  };\n  const closedState = {\n    transform: prefersReducedMotion ? 'none' : 'translateY(-8px)',\n    opacity: 0,\n  };\n\n  return {\n    animate: isOpen ? openState : closedState,\n    initial: closedState,\n    transition: {\n      duration: 0.15,\n      ease: 'easeOut',\n    },\n  };\n};\n\nconst BaseDropdown = styled(motion.create('div'))(() =>\n  css({ position: `absolute` })\n);\n\nconst MegaMenuBackdrop = styled(motion.create('div'))(\n  css({\n    position: 'relative',\n    zIndex: -1,\n  })\n);\n\nexport const AnimatedMegaMenuDropdown = React.forwardRef(\n  (\n    {\n      isOpen,\n      ...props\n    }: React.ComponentProps<typeof BaseDropdown> & {\n      isOpen: boolean;\n    },\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [isAnimating, setIsAnimating] = React.useState(false);\n    const prefersReducedMotion = useReducedMotion();\n\n    return (\n      <>\n        <AnimatePresence>\n          {isOpen && (\n            <MegaMenuBackdrop\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.15, ease: 'easeOut' }}\n            >\n              <GradientBackground\n                key=\"dropdown-backdrop\"\n                position=\"fixed\"\n                top=\"0\"\n                left=\"0\"\n                right=\"0\"\n                bottom=\"0\"\n              />\n            </MegaMenuBackdrop>\n          )}\n        </AnimatePresence>\n        {/* the preferred way to animate this would be via AnimatePresence, but it is unclear if\n            keeping closed dropdown content in the DOM has a positive effect on SEO */}\n        <Box display={isOpen || isAnimating ? 'block' : 'none'}>\n          <BaseDropdown\n            key=\"dropdown-content\"\n            ref={ref}\n            {...getDropdownAnimations({ isOpen, prefersReducedMotion })}\n            {...props}\n            onAnimationComplete={(anim) => {\n              if (!isOpen) {\n                // only consider animation complete when dropdown is closed to prevent flickering from rapid state changes\n                setIsAnimating(false);\n              }\n              props.onAnimationComplete?.(anim);\n            }}\n            onAnimationStart={(anim) => {\n              setIsAnimating(true);\n              props.onAnimationStart?.(anim);\n            }}\n          />\n        </Box>\n      </>\n    );\n  }\n);\n\nexport const AnimatedSimpleDropdown = ({\n  isOpen,\n  ...props\n}: React.ComponentProps<typeof BaseDropdown> & {\n  isOpen: boolean;\n}) => {\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  const prefersReducedMotion = useReducedMotion();\n\n  // the preferred way to animate this would be via AnimatePresence, but it is unclear if\n  // keeping closed dropdown content in the DOM has a positive effect on SEO\n  return (\n    <Box display={isOpen || isAnimating ? 'block' : 'none'}>\n      <BaseDropdown\n        {...getDropdownAnimations({ isOpen, prefersReducedMotion })}\n        {...props}\n        onAnimationComplete={(anim) => {\n          if (!isOpen) {\n            // only consider animation complete when dropdown is closed to prevent flickering from rapid state changes\n            setIsAnimating(false);\n          }\n          props.onAnimationComplete?.(anim);\n        }}\n        onAnimationStart={(anim) => {\n          setIsAnimating(true);\n          props.onAnimationStart?.(anim);\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const LayoutGridAntiAliased = styled(LayoutGrid)`\n  -webkit-font-smoothing: antialiased;\n`;\n\n/* for Resources & Catalog menus */\nexport const DescriptionSectionContainer = styled(FlexBox)(\n  css({\n    '&:focus-visible': {\n      color: 'text',\n      outline: '1px solid currentColor !important',\n    },\n  })\n);\n\nexport const StyledAppBar = styled(AppBar)(\n  css({\n    boxShadow: `none`,\n  })\n);\n\nexport const StyledNavBar = styled.ul(\n  css({\n    alignItems: 'stretch',\n    display: `flex`,\n    padding: 0,\n    listStyle: `none`,\n    margin: 0,\n    width: `100%`,\n  })\n);\n\nexport const appHeaderSpacing = {\n  standard: 8,\n\n  enterprise: 12,\n} as const;\n"],"mappings":"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"}

package/dist/AppHeader/shared/keyboardNav.js

@@ -62,4 +62,5 @@ const useMenuKeyboardNavigation = ({ back, next, first, last, closeDropdown }) =
 };
 
 //#endregion
-export { useMenuKeyboardNavigation, useOnEscHandler };
+export { useMenuKeyboardNavigation, useOnEscHandler };
+//# sourceMappingURL=keyboardNav.js.map

package/dist/AppHeader/shared/keyboardNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardNav.js","names":[],"sources":["../../../src/AppHeader/shared/keyboardNav.tsx"],"sourcesContent":["import { KeyboardEvent } from 'react';\n\ninterface KeyboardNavigation {\n  back: (arg0: boolean) => void;\n  next: (arg0: boolean) => void;\n  first: () => void;\n  last: () => void;\n  closeDropdown: () => void;\n}\n\nexport const KEY_CODES = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  LEFT: 'ArrowLeft',\n  RIGHT: 'ArrowRight',\n  END: 'End',\n  ENTER: 'Enter',\n  ESC: 'Escape',\n  HOME: 'Home',\n  SPACE: ' ',\n  TAB: 'Tab',\n} as const;\n\nexport const useOnEscHandler = (\n  escapeHandler: (e?: KeyboardEvent<HTMLDivElement>) => void\n) => {\n  return (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.code === KEY_CODES.ESC) {\n      e.stopPropagation();\n      e.preventDefault();\n      escapeHandler(e);\n    }\n  };\n};\n\nexport const useMenuKeyboardNavigation = ({\n  back,\n  next,\n  first,\n  last,\n  closeDropdown,\n}: KeyboardNavigation) => {\n  return (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.shiftKey && e.code === KEY_CODES.TAB) {\n      e.stopPropagation();\n      back(false);\n      return;\n    }\n    switch (e.code) {\n      case KEY_CODES.TAB:\n        e.stopPropagation();\n        next(false);\n        break;\n      case KEY_CODES.DOWN:\n        e.stopPropagation();\n        e.preventDefault();\n        next(true);\n        break;\n      case KEY_CODES.UP:\n        e.stopPropagation();\n        e.preventDefault();\n        back(true);\n        break;\n      case KEY_CODES.HOME:\n        e.stopPropagation();\n        e.preventDefault();\n        first();\n        break;\n      case KEY_CODES.END:\n        e.stopPropagation();\n        e.preventDefault();\n        last();\n        break;\n      case KEY_CODES.ESC:\n        e.stopPropagation();\n        e.preventDefault();\n        closeDropdown();\n        break;\n    }\n  };\n};\n"],"mappings":";AAUA,MAAa,YAAY;CACvB,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,KAAK;CACL,MAAM;CACN,OAAO;CACP,KAAK;CACN;AAED,MAAa,mBACX,kBACG;AACH,SAAQ,MAAqC;AAC3C,MAAI,EAAE,SAAS,UAAU,KAAK;AAC5B,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;;;AAKtB,MAAa,6BAA6B,EACxC,MACA,MACA,OACA,MACA,oBACwB;AACxB,SAAQ,MAAqC;AAC3C,MAAI,EAAE,YAAY,EAAE,SAAS,UAAU,KAAK;AAC1C,KAAE,iBAAiB;AACnB,QAAK,MAAM;AACX;;AAEF,UAAQ,EAAE,MAAV;GACE,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,SAAK,MAAM;AACX;GACF,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;AAClB,SAAK,KAAK;AACV;GACF,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;AAClB,SAAK,KAAK;AACV;GACF,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;AAClB,WAAO;AACP;GACF,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;AAClB,UAAM;AACN;GACF,KAAK,UAAU;AACb,MAAE,iBAAiB;AACnB,MAAE,gBAAgB;AAClB,mBAAe;AACf"}

package/dist/AppHeader/shared/types.d.ts

@@ -108,4 +108,5 @@ type FormattedMobileAppHeaderItems = FormattedAppHeaderItems & {
 };
 type AnchorRefItemType = RefObject<HTMLAnchorElement>['current'] | RefObject<HTMLButtonElement>['current'] | null;
 //#endregion
-export { AnchorRefItemType, AppFooterResourcesDataItem, AppHeaderAction, AppHeaderCatalogDropdownItem, AppHeaderClickHandler, AppHeaderDescriptiveLinkItem, AppHeaderDropdownItem, AppHeaderFillButtonItem, AppHeaderIconButtonItem, AppHeaderItem, AppHeaderItemWithHref, AppHeaderLinkItem, AppHeaderLogoItem, AppHeaderProfileDropdownItem, AppHeaderRenderElementItem, AppHeaderResourcesDataItem, AppHeaderResourcesDropdownItem, AppHeaderResourcesSimpleDropdownItem, AppHeaderSimpleDropdownItem, AppHeaderStrokeButtonItem, AppHeaderTextButtonItem, FormattedAppHeaderItems, FormattedMobileAppHeaderItems, isAppHeaderItemWithHref };
+export { AnchorRefItemType, AppFooterResourcesDataItem, AppHeaderAction, AppHeaderCatalogDropdownItem, AppHeaderClickHandler, AppHeaderDescriptiveLinkItem, AppHeaderDropdownItem, AppHeaderFillButtonItem, AppHeaderIconButtonItem, AppHeaderItem, AppHeaderItemWithHref, AppHeaderLinkItem, AppHeaderLogoItem, AppHeaderProfileDropdownItem, AppHeaderRenderElementItem, AppHeaderResourcesDataItem, AppHeaderResourcesDropdownItem, AppHeaderResourcesSimpleDropdownItem, AppHeaderSimpleDropdownItem, AppHeaderStrokeButtonItem, AppHeaderTextButtonItem, FormattedAppHeaderItems, FormattedMobileAppHeaderItems, isAppHeaderItemWithHref };
+//# sourceMappingURL=types.d.ts.map

package/dist/AppHeader/shared/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/AppHeader/shared/types.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/AppHeader/shared/types.js

@@ -2,4 +2,5 @@
 const isAppHeaderItemWithHref = (item) => !!item.href;
 
 //#endregion
-export { isAppHeaderItemWithHref };
+export { isAppHeaderItemWithHref };
+//# sourceMappingURL=types.js.map

package/dist/AppHeader/shared/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/AppHeader/shared/types.ts"],"sourcesContent":["import {\n  Anchor,\n  BadgeProps,\n  FillButtonProps,\n  IconButtonProps,\n  StrokeButtonProps,\n  TextButtonProps,\n} from '@codecademy/gamut';\nimport { GamutIconProps } from '@codecademy/gamut-icons';\nimport React, { ComponentProps, ReactNode, RefObject } from 'react';\n\nexport type AppHeaderItem =\n  | AppHeaderItemWithHref\n  | AppHeaderSimpleDropdownItem\n  | AppHeaderProfileDropdownItem\n  | AppHeaderRenderElementItem\n  | AppHeaderCatalogDropdownItem\n  | AppHeaderDescriptiveLinkItem\n  | AppHeaderResourcesDropdownItem\n  | AppHeaderResourcesSimpleDropdownItem;\n\nexport type AppHeaderItemWithHref =\n  | AppHeaderLogoItem\n  | AppHeaderLinkItem\n  | AppHeaderTextButtonItem\n  | AppHeaderFillButtonItem\n  | AppHeaderStrokeButtonItem\n  | AppHeaderIconButtonItem;\n\ntype AppHeaderBaseItem<Type extends string> = {\n  dataTestId?: string;\n  id: string;\n  redirect?: boolean;\n  type: Type;\n};\n\ntype AppHeaderBaseHrefItem<Type extends string> = AppHeaderBaseItem<Type> & {\n  href: string;\n  trackingTarget?: string;\n};\n\nexport type AppHeaderLogoItem = AppHeaderBaseHrefItem<'logo'> & {\n  enterprise: boolean;\n  pro: boolean;\n  checkMini?: boolean;\n  removeAnchorLink?: boolean;\n};\n\nexport type AppHeaderLinkItem = AppHeaderBaseHrefItem<'link'> &\n  Pick<ComponentProps<typeof Anchor>, 'icon' | 'iconPosition'> & {\n    ariaLabel?: string;\n    newTab?: boolean;\n    text: string;\n    badge?: React.ReactElement<BadgeProps>;\n  };\n\nexport type AppHeaderStrokeButtonItem = AppHeaderBaseHrefItem<'stroke-button'> &\n  Pick<StrokeButtonProps, 'variant' | 'icon' | 'iconPosition'> & {\n    text: string;\n  };\n\nexport type AppHeaderTextButtonItem = AppHeaderBaseHrefItem<'text-button'> &\n  Pick<TextButtonProps, 'variant' | 'icon' | 'iconPosition'> & {\n    text: string;\n  };\n\nexport type AppHeaderFillButtonItem = AppHeaderBaseHrefItem<'fill-button'> &\n  Pick<FillButtonProps, 'variant' | 'icon' | 'iconPosition'> & {\n    text: string;\n  };\n\nexport type AppHeaderIconButtonItem = AppHeaderBaseHrefItem<'icon-button'> &\n  Pick<IconButtonProps, 'variant' | 'icon'> & {\n    text: string;\n  };\n\nexport type AppHeaderDropdownItem =\n  | AppHeaderSimpleDropdownItem\n  | AppHeaderProfileDropdownItem\n  | AppHeaderResourcesSimpleDropdownItem;\n\nexport type AppHeaderSimpleDropdownItem = AppHeaderBaseItem<'dropdown'> & {\n  popover: AppHeaderLinkItem[];\n  text: string;\n  trackingTarget: string;\n  icon?: React.ComponentType<GamutIconProps>;\n  isIconOnly?: boolean;\n};\n\nexport type AppHeaderProfileDropdownItem =\n  AppHeaderBaseItem<'profile-dropdown'> & {\n    avatar: string;\n    userDisplayName: string;\n    //* * AppHeader items that go into the AppHeader. Each array will be in its own section */\n    popover: AppHeaderLinkItem[][];\n    text: string;\n    trackingTarget?: string;\n  };\n\nexport type AppHeaderRenderElementItem = AppHeaderBaseItem<'render-element'> & {\n  renderElement: () => ReactNode;\n};\n\nexport type AppHeaderCatalogDropdownItem =\n  AppHeaderBaseItem<'catalog-dropdown'> & {\n    icon?: React.ComponentType<GamutIconProps>;\n    text: string;\n    trackingTarget?: string;\n    hideCareerPaths?: boolean;\n    isCoachingEnabled?: boolean;\n  };\n\nexport type AppHeaderResourcesDropdownItem =\n  AppHeaderBaseItem<'resources-dropdown'> & {\n    text: string;\n    trackingTarget?: string;\n    hideCareerPaths?: boolean;\n    icon?: React.ComponentType<GamutIconProps>;\n  };\n\nexport type AppHeaderResourcesSimpleDropdownItem =\n  AppHeaderBaseItem<'resources-simple-dropdown'> & {\n    icon?: React.ComponentType<GamutIconProps>;\n    text: string;\n    trackingTarget?: string;\n    hideCareerPaths?: boolean;\n    popover: AppHeaderLinkItem[];\n  };\n\nexport type AppHeaderClickHandler<ItemType = AppHeaderItem> = (\n  event: React.MouseEvent,\n  item: ItemType\n) => void;\n\nexport type AppHeaderAction = {\n  /** A method to be called on click/activating a header item */\n  action: AppHeaderClickHandler;\n};\n\nexport const isAppHeaderItemWithHref = (\n  item: AppHeaderItem\n): item is AppHeaderItemWithHref => !!(item as AppHeaderItemWithHref).href;\n\nexport type AppHeaderDescriptiveLinkItem = AppHeaderLinkItem & {\n  description: string;\n};\n\nexport type AppHeaderResourcesDataItem = {\n  title: string;\n  description?: string;\n  links?: AppHeaderLinkItem[];\n  data: (AppHeaderLinkItem | AppHeaderDescriptiveLinkItem)[];\n};\n\nexport type AppFooterResourcesDataItem = {\n  id: string;\n  href: string;\n  trackingTarget: string;\n  text: string;\n  newTab?: boolean;\n};\n\nexport type FormattedAppHeaderItems = {\n  left: AppHeaderItem[];\n  right: AppHeaderItem[];\n};\n\nexport type FormattedMobileAppHeaderItems = FormattedAppHeaderItems & {\n  mainMenu: AppHeaderItem[];\n};\n\nexport type AnchorRefItemType =\n  | RefObject<HTMLAnchorElement>['current']\n  | RefObject<HTMLButtonElement>['current']\n  | null;\n"],"mappings":";AA2IA,MAAa,2BACX,SACkC,CAAC,CAAE,KAA+B"}

package/dist/AppHeader/shared/utils.js

@@ -81,4 +81,5 @@ const mapAppHeaderItemToElement = ({ action, item, isStandalone, isTeams, redire
 };
 
 //#endregion
-export { mapAppHeaderItemToElement };
+export { mapAppHeaderItemToElement };
+//# sourceMappingURL=utils.js.map

package/dist/AppHeader/shared/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/AppHeader/shared/utils.tsx"],"sourcesContent":["import {\n  FillButton,\n  IconButton,\n  Menu,\n  StrokeButton,\n  TextButton,\n} from '@codecademy/gamut';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport { formatUrlWithRedirect } from '../../GlobalHeader/urlHelpers';\nimport { AppHeaderCatalogDropdown } from '../AppHeaderElements/AppHeaderCatalogDropdown';\nimport { AppHeaderDropdown } from '../AppHeaderElements/AppHeaderDropdown';\nimport { AppHeaderLink } from '../AppHeaderElements/AppHeaderLink';\nimport { AppHeaderLogo } from '../AppHeaderElements/AppHeaderLogo';\nimport { AppHeaderResourcesDropdown } from '../AppHeaderElements/AppHeaderResourcesDropdown';\nimport { AppHeaderClickHandler, AppHeaderItem } from './types';\n\ntype AppHeaderItemToElementType = {\n  action: AppHeaderClickHandler;\n  item: AppHeaderItem;\n  isStandalone?: boolean;\n  isTeams?: boolean;\n  redirectParam?: string;\n  mobile?: boolean;\n  spacing?: ComponentProps<typeof Menu>['spacing'];\n};\n\nexport const mapAppHeaderItemToElement = ({\n  action,\n  item,\n  isStandalone,\n  isTeams,\n  redirectParam,\n  mobile = false,\n  spacing = 'normal',\n}: AppHeaderItemToElementType): ReactNode => {\n  // preventative measure to handle a possibly undefined item from being rendered\n  if (!item) return null;\n\n  switch (item.type) {\n    case 'logo':\n      return <AppHeaderLogo action={action} item={item} />;\n    case 'link':\n      return <AppHeaderLink mx={0} action={action} item={item} />;\n    case 'dropdown':\n    case 'resources-simple-dropdown':\n    case 'profile-dropdown':\n      return (\n        <AppHeaderDropdown\n          action={action}\n          item={item}\n          standalone={isStandalone}\n          spacing={spacing}\n        />\n      );\n    case 'catalog-dropdown':\n      return <AppHeaderCatalogDropdown action={action} item={item} />;\n    case 'resources-dropdown':\n      return <AppHeaderResourcesDropdown action={action} item={item} />;\n\n    case 'render-element':\n      return item.renderElement();\n    case 'text-button':\n      return (\n        <TextButton\n          size={mobile ? 'small' : 'normal'}\n          onClick={(event: React.MouseEvent) => action(event, item)}\n          data-testid={item.dataTestId}\n          href={\n            item.redirect\n              ? formatUrlWithRedirect(item.href, redirectParam)\n              : item.href\n          }\n          variant={isTeams ? 'primary' : 'interface'}\n          icon={item.icon}\n          iconPosition={item.iconPosition}\n        >\n          {item.text}\n        </TextButton>\n      );\n    case 'fill-button':\n      return (\n        <FillButton\n          size={mobile ? 'small' : 'normal'}\n          data-testid={item.dataTestId}\n          href={\n            item.redirect\n              ? formatUrlWithRedirect(item.href, redirectParam)\n              : item.href\n          }\n          onClick={(event: React.MouseEvent) => action(event, item)}\n          variant={item.variant || 'interface'}\n          icon={item.icon}\n          iconPosition={item.iconPosition}\n        >\n          {item.text}\n        </FillButton>\n      );\n    case 'stroke-button':\n      return (\n        <StrokeButton\n          size={mobile ? 'small' : 'normal'}\n          data-testid={item.dataTestId}\n          href={\n            item.redirect\n              ? formatUrlWithRedirect(item.href, redirectParam)\n              : item.href\n          }\n          onClick={(event: React.MouseEvent) => action(event, item)}\n          variant={item.variant || 'interface'}\n          icon={item.icon}\n          iconPosition={item.iconPosition}\n        >\n          {item.text}\n        </StrokeButton>\n      );\n    case 'icon-button':\n      return (\n        <IconButton\n          size={mobile ? 'small' : 'normal'}\n          data-testid={item.dataTestId}\n          href={\n            item.redirect\n              ? formatUrlWithRedirect(item.href, redirectParam)\n              : item.href\n          }\n          onClick={(event: React.MouseEvent) => action(event, item)}\n          variant={item.variant || 'interface'}\n          icon={item.icon}\n          tip={item.text}\n          tipProps={{ alignment: 'bottom-center' }}\n        />\n      );\n  }\n};\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,6BAA6B,EACxC,QACA,MACA,cACA,SACA,eACA,SAAS,OACT,UAAU,eACiC;AAE3C,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,KAAK,MAAb;EACE,KAAK,OACH,QAAO,oBAAC;GAAsB;GAAc;IAAQ;EACtD,KAAK,OACH,QAAO,oBAAC;GAAc,IAAI;GAAW;GAAc;IAAQ;EAC7D,KAAK;EACL,KAAK;EACL,KAAK,mBACH,QACE,oBAAC;GACS;GACF;GACN,YAAY;GACH;IACT;EAEN,KAAK,mBACH,QAAO,oBAAC;GAAiC;GAAc;IAAQ;EACjE,KAAK,qBACH,QAAO,oBAAC;GAAmC;GAAc;IAAQ;EAEnE,KAAK,iBACH,QAAO,KAAK,eAAe;EAC7B,KAAK,cACH,QACE,oBAAC;GACC,MAAM,SAAS,UAAU;GACzB,UAAU,UAA4B,OAAO,OAAO,KAAK;GACzD,eAAa,KAAK;GAClB,MACE,KAAK,WACD,sBAAsB,KAAK,MAAM,cAAc,GAC/C,KAAK;GAEX,SAAS,UAAU,YAAY;GAC/B,MAAM,KAAK;GACX,cAAc,KAAK;aAElB,KAAK;IACK;EAEjB,KAAK,cACH,QACE,oBAAC;GACC,MAAM,SAAS,UAAU;GACzB,eAAa,KAAK;GAClB,MACE,KAAK,WACD,sBAAsB,KAAK,MAAM,cAAc,GAC/C,KAAK;GAEX,UAAU,UAA4B,OAAO,OAAO,KAAK;GACzD,SAAS,KAAK,WAAW;GACzB,MAAM,KAAK;GACX,cAAc,KAAK;aAElB,KAAK;IACK;EAEjB,KAAK,gBACH,QACE,oBAAC;GACC,MAAM,SAAS,UAAU;GACzB,eAAa,KAAK;GAClB,MACE,KAAK,WACD,sBAAsB,KAAK,MAAM,cAAc,GAC/C,KAAK;GAEX,UAAU,UAA4B,OAAO,OAAO,KAAK;GACzD,SAAS,KAAK,WAAW;GACzB,MAAM,KAAK;GACX,cAAc,KAAK;aAElB,KAAK;IACO;EAEnB,KAAK,cACH,QACE,oBAAC;GACC,MAAM,SAAS,UAAU;GACzB,eAAa,KAAK;GAClB,MACE,KAAK,WACD,sBAAsB,KAAK,MAAM,cAAc,GAC/C,KAAK;GAEX,UAAU,UAA4B,OAAO,OAAO,KAAK;GACzD,SAAS,KAAK,WAAW;GACzB,MAAM,KAAK;GACX,KAAK,KAAK;GACV,UAAU,EAAE,WAAW,iBAAiB;IACxC"}

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.d.ts

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

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/AppHeaderMobile/AppHeaderMainMenuMobile/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAgDY,4BAAA,GAA+B;SAClC;;EADG,MAAA,EAAA,OAAA;AAMZ,CAAA;cAAa,yBAAyB,OAAA,CAAM,GAC1C"}

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js

@@ -120,4 +120,5 @@ const AppHeaderMainMenuMobile = ({ action, items, getItemType, isAnon }) => {
 };
 
 //#endregion
-export { AppHeaderMainMenuMobile };
+export { AppHeaderMainMenuMobile };
+//# sourceMappingURL=index.js.map

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderMainMenuMobile: React.FC<\n  AppHeaderMainMenuMobileProps\n>","action"],"sources":["../../../src/AppHeaderMobile/AppHeaderMainMenuMobile/index.tsx"],"sourcesContent":["import {\n  Box,\n  ContentContainer,\n  FillButton,\n  Text,\n  TextButton,\n} from '@codecademy/gamut';\nimport { css, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { AppHeaderLink } from '../../AppHeader/AppHeaderElements/AppHeaderLink';\nimport { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';\nimport {\n  AppHeaderAction,\n  AppHeaderClickHandler,\n  AppHeaderDropdownItem,\n  AppHeaderItem,\n} from '../../AppHeader/shared';\nimport {\n  login,\n  requestTeamsDemo,\n  signUp,\n  signUpTextButton,\n} from '../../GlobalHeader/GlobalHeaderItems';\nimport { AppHeaderSubNavMobile } from '../AppHeaderSubMenuMobile';\nimport { MobileUlWrapper } from '../AppHeaderSubMenuMobile/elements';\nimport { AppHeaderSubMenuRow } from '../AppHeaderSubMenuTarget';\n\nconst isBusinessPage = () => {\n  if (typeof window === 'undefined') return false;\n  return (\n    window.location.pathname === '/business' ||\n    window.location.pathname === '/business/pricing'\n  );\n};\n\nconst BackgroundWrapper = styled(Box)(\n  css({\n    background: theme.colors.white,\n    border: 1,\n    borderColor: 'border-tertiary',\n    borderRadius: 'lg',\n    padding: '16px',\n  })\n);\n\nexport type AppHeaderMainMenuMobileProps = AppHeaderAction & {\n  items: AppHeaderItem[];\n  getItemType: (type: string | undefined) => void;\n  isAnon: boolean;\n};\n\nexport const AppHeaderMainMenuMobile: React.FC<\n  AppHeaderMainMenuMobileProps\n> = ({ action, items, getItemType, isAnon }) => {\n  const [subMenuItem, setSubMenuItem] = useState<AppHeaderDropdownItem>();\n\n  const openSubMenu = (\n    event: React.MouseEvent,\n    item: AppHeaderDropdownItem\n  ) => {\n    action(event, item);\n    setSubMenuItem(item);\n    getItemType(item.type);\n  };\n\n  const closeSubMenu = () => {\n    setSubMenuItem(undefined);\n    getItemType(undefined);\n  };\n\n  const mapItemToElement = (\n    item: AppHeaderItem,\n    action: AppHeaderClickHandler\n  ) => {\n    switch (item.type) {\n      case 'link':\n        return (\n          <AppHeaderLink action={action} item={item} key={item.id} mobile />\n        );\n      case 'dropdown':\n      case 'profile-dropdown':\n      case 'catalog-dropdown':\n      case 'resources-dropdown':\n        return (\n          <AppHeaderSubMenuRow\n            key={item.id}\n            item={item}\n            openSubMenu={openSubMenu}\n          />\n        );\n      case 'resources-simple-dropdown':\n        return (\n          <>\n            <Text as=\"h2\" fontSize={22} mt={16} mb={16}>\n              {item.text}\n            </Text>\n            <AppHeaderLinkSections action={action} item={item} mobile />\n          </>\n        );\n      case 'fill-button':\n        return (\n          <FillButton\n            data-testid={item.dataTestId}\n            href={item.href}\n            onClick={(event: React.MouseEvent) => action(event, item)}\n            mt={24}\n            key={item.id}\n          >\n            {item.text}\n          </FillButton>\n        );\n      case 'text-button':\n        return (\n          <TextButton\n            mt={16}\n            key={item.id}\n            data-testid={item.dataTestId}\n            href={item.href}\n            onClick={(event: React.MouseEvent) => action(event, item)}\n          >\n            {item.text}\n          </TextButton>\n        );\n      default:\n        return <></>;\n    }\n  };\n\n  return subMenuItem ? (\n    <AppHeaderSubNavMobile\n      handleCloseSubMenu={closeSubMenu}\n      action={action}\n      item={subMenuItem}\n    />\n  ) : (\n    <ContentContainer\n      role=\"navigation\"\n      aria-label=\"site navigation\"\n      tabIndex={-1}\n    >\n      <BackgroundWrapper>\n        <MobileUlWrapper as=\"ul\">\n          {items.map((item) => mapItemToElement(item, action))}\n          {isAnon && (\n            <div\n              // eslint-disable-next-line gamut/no-inline-style\n              style={{\n                display: 'flex',\n                alignItems: 'baseline',\n                justifyContent: 'center',\n                paddingTop: '16px',\n                borderTop: '1px solid var(--border-tertiary)',\n              }}\n            >\n              {isBusinessPage() ? (\n                <>\n                  <TextButton\n                    data-testid={signUpTextButton.dataTestId}\n                    href={signUpTextButton.href}\n                    onClick={(event: React.MouseEvent) =>\n                      action(event, signUpTextButton)\n                    }\n                    key={signUpTextButton.id}\n                  >\n                    {signUpTextButton.text}\n                  </TextButton>\n\n                  <FillButton\n                    data-testid={requestTeamsDemo.dataTestId}\n                    href={requestTeamsDemo.href}\n                    onClick={(event: React.MouseEvent) =>\n                      action(event, requestTeamsDemo)\n                    }\n                    key={requestTeamsDemo.id}\n                  >\n                    {requestTeamsDemo.text}\n                  </FillButton>\n                </>\n              ) : (\n                <>\n                  <FillButton\n                    data-testid={signUp.dataTestId}\n                    href={signUp.href}\n                    onClick={(event: React.MouseEvent) => action(event, signUp)}\n                    key={signUp.id}\n                  >\n                    {signUp.text}\n                  </FillButton>\n\n                  <TextButton\n                    key={login.id}\n                    data-testid={login.dataTestId}\n                    href={login.href}\n                    onClick={(event: React.MouseEvent) => action(event, login)}\n                  >\n                    {login.text}\n                  </TextButton>\n                </>\n              )}\n            </div>\n          )}\n        </MobileUlWrapper>\n      </BackgroundWrapper>\n    </ContentContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,uBAAuB;AAC3B,KAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QACE,OAAO,SAAS,aAAa,eAC7B,OAAO,SAAS,aAAa;;AAIjC,MAAM,oBAAoB,OAAO,IAAI,CACnC,IAAI;CACF,YAAY,MAAM,OAAO;CACzB,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;CACV,CAAC,CACH;AAQD,MAAaA,2BAER,EAAE,QAAQ,OAAO,aAAa,aAAa;CAC9C,MAAM,CAAC,aAAa,kBAAkB,UAAiC;CAEvE,MAAM,eACJ,OACA,SACG;AACH,SAAO,OAAO,KAAK;AACnB,iBAAe,KAAK;AACpB,cAAY,KAAK,KAAK;;CAGxB,MAAM,qBAAqB;AACzB,iBAAe,OAAU;AACzB,cAAY,OAAU;;CAGxB,MAAM,oBACJ,MACA,aACG;AACH,UAAQ,KAAK,MAAb;GACE,KAAK,OACH,QACE,oBAAC;IAAc,QAAQC;IAAc;IAAoB;MAAT,KAAK,GAAa;GAEtE,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK,qBACH,QACE,oBAAC;IAEO;IACO;MAFR,KAAK,GAGV;GAEN,KAAK,4BACH,QACE,4CACE,oBAAC;IAAK,IAAG;IAAK,UAAU;IAAI,IAAI;IAAI,IAAI;cACrC,KAAK;KACD,EACP,oBAAC;IAAsB,QAAQA;IAAc;IAAM;KAAS,IAC3D;GAEP,KAAK,cACH,QACE,oBAAC;IACC,eAAa,KAAK;IAClB,MAAM,KAAK;IACX,UAAU,UAA4BA,SAAO,OAAO,KAAK;IACzD,IAAI;cAGH,KAAK;MAFD,KAAK,GAGC;GAEjB,KAAK,cACH,QACE,oBAAC;IACC,IAAI;IAEJ,eAAa,KAAK;IAClB,MAAM,KAAK;IACX,UAAU,UAA4BA,SAAO,OAAO,KAAK;cAExD,KAAK;MALD,KAAK,GAMC;GAEjB,QACE,QAAO,iCAAK;;;AAIlB,QAAO,cACL,oBAAC;EACC,oBAAoB;EACZ;EACR,MAAM;GACN,GAEF,oBAAC;EACC,MAAK;EACL,cAAW;EACX,UAAU;YAEV,oBAAC,+BACC,qBAAC;GAAgB,IAAG;cACjB,MAAM,KAAK,SAAS,iBAAiB,MAAM,OAAO,CAAC,EACnD,UACC,oBAAC;IAEC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,YAAY;KACZ,WAAW;KACZ;cAEA,gBAAgB,GACf,4CACE,oBAAC;KACC,eAAa,iBAAiB;KAC9B,MAAM,iBAAiB;KACvB,UAAU,UACR,OAAO,OAAO,iBAAiB;eAIhC,iBAAiB;OAFb,iBAAiB,GAGX,EAEb,oBAAC;KACC,eAAa,iBAAiB;KAC9B,MAAM,iBAAiB;KACvB,UAAU,UACR,OAAO,OAAO,iBAAiB;eAIhC,iBAAiB;OAFb,iBAAiB,GAGX,IACZ,GAEH,4CACE,oBAAC;KACC,eAAa,OAAO;KACpB,MAAM,OAAO;KACb,UAAU,UAA4B,OAAO,OAAO,OAAO;eAG1D,OAAO;OAFH,OAAO,GAGD,EAEb,oBAAC;KAEC,eAAa,MAAM;KACnB,MAAM,MAAM;KACZ,UAAU,UAA4B,OAAO,OAAO,MAAM;eAEzD,MAAM;OALF,MAAM,GAMA,IACZ;KAED;IAEQ,GACA;GACH"}

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/elements.js

@@ -23,4 +23,5 @@ const MobileSubMenuWrapper = ({ children, handleClose, isMenuRole }) => {
 };
 
 //#endregion
-export { MobileSubMenuWrapper, MobileUlWrapper };
+export { MobileSubMenuWrapper, MobileUlWrapper };
+//# sourceMappingURL=elements.js.map

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../src/AppHeaderMobile/AppHeaderSubMenuMobile/elements.tsx"],"sourcesContent":["import { focusVisibleStyle } from '@codecademy/gamut';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { PropsWithChildren } from 'react';\n\nimport { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';\nimport {\n  AppHeaderMenuProvider,\n  AppHeaderMenuProviderProps,\n} from '../../AppHeader/AppHeaderElements/AppHeaderMenuProvider';\n\nconst uiWrapperFocus = focusVisibleStyle('-4px');\n\nexport const MobileUlWrapper = styled.ul(\n  css({\n    listStyle: 'none',\n    p: 0,\n    m: 0,\n    pb: 4,\n    ...uiWrapperFocus,\n  })\n);\n\ntype MobileSubMenuWrapperProps =\n  | Pick<AppHeaderMenuProviderProps, 'handleClose'> & { isMenuRole: boolean };\n\nexport const MobileSubMenuWrapper = ({\n  children,\n  handleClose,\n  isMenuRole,\n}: PropsWithChildren<MobileSubMenuWrapperProps>) => {\n  return isMenuRole ? (\n    <AppHeaderMenuProvider as={AppHeaderListItem} handleClose={handleClose}>\n      {children}\n    </AppHeaderMenuProvider>\n  ) : (\n    <AppHeaderListItem>{children}</AppHeaderListItem>\n  );\n};\n"],"mappings":";;;;;;;;AAWA,MAAM,iBAAiB,kBAAkB,OAAO;AAEhD,MAAa,kBAAkB,OAAO,GACpC,IAAI;CACF,WAAW;CACX,GAAG;CACH,GAAG;CACH,IAAI;CACJ,GAAG;CACJ,CAAC,CACH;AAKD,MAAa,wBAAwB,EACnC,UACA,aACA,iBACkD;AAClD,QAAO,aACL,oBAAC;EAAsB,IAAI;EAAgC;EACxD;GACqB,GAExB,oBAAC,qBAAmB,WAA6B"}

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.d.ts

@@ -9,4 +9,5 @@ type AppHeaderSubMenuMobileProps = (AppHeaderDropdownProps | AppHeaderCatalogDro
 };
 declare const AppHeaderSubNavMobile: React$1.FC<AppHeaderSubMenuMobileProps>;
 //#endregion
-export { AppHeaderSubMenuMobileProps, AppHeaderSubNavMobile };
+export { AppHeaderSubMenuMobileProps, AppHeaderSubNavMobile };
+//# sourceMappingURL=index.d.ts.map

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/AppHeaderMobile/AppHeaderSubMenuMobile/index.tsx"],"sourcesContent":[],"mappings":";;;;;;KAwBY,2BAAA,IACR,yBACA,gCACA;;AAHJ,CAAA;AACI,cAqES,qBArET,EAqEgC,OAAA,CAAM,EArEtC,CAqEyC,2BArEzC,CAAA"}

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.js

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

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderSubNavMobile: React.FC<AppHeaderSubMenuMobileProps>"],"sources":["../../../src/AppHeaderMobile/AppHeaderSubMenuMobile/index.tsx"],"sourcesContent":["import { Anchor, Box, Menu, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport { css, states, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useEffect, useRef } from 'react';\nimport * as React from 'react';\n\nimport { AppHeaderCatalogDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown';\nimport { CATALOG_NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts';\nimport { MarketingBanner } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner';\nimport { AppHeaderDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderDropdown';\nimport { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';\nimport { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';\nimport { AppHeaderResourceDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown';\nimport { RESOURCES_NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts';\nimport { AppHeaderSection } from '../../AppHeader/AppHeaderElements/AppHeaderSection';\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderClickHandler,\n  AppHeaderDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../AppHeader/shared';\nimport { MobileSubMenuWrapper, MobileUlWrapper } from './elements';\n\nexport type AppHeaderSubMenuMobileProps = (\n  | AppHeaderDropdownProps\n  | AppHeaderCatalogDropdownProps\n  | AppHeaderResourceDropdownProps\n) & {\n  handleCloseSubMenu: () => void;\n};\n\ntype AppHeaderSectionItem =\n  | AppHeaderDropdownItem\n  | AppHeaderCatalogDropdownItem\n  | AppHeaderResourcesDropdownItem;\n\nconst StyledAnchor = styled(Anchor)(\n  css({\n    alignItems: `center`,\n    display: `flex`,\n    width: 'calc(100% - 64px)',\n    py: 8,\n    mt: 0,\n    mb: 16,\n  })\n);\n\nconst BackgroundWrapper = styled(Box)<{\n  isNotCatalogOrResources: boolean;\n}>(\n  states({\n    isNotCatalogOrResources: {\n      background: theme.colors.white,\n      border: 1,\n      borderColor: 'border-tertiary',\n      borderRadius: 'lg',\n      padding: '16px',\n      mx: 16,\n    },\n  })\n);\n\nconst renderHeaderSection = (\n  item: AppHeaderSectionItem,\n  action: AppHeaderClickHandler,\n  handleCloseSubMenu: () => void\n) => {\n  switch (item.type) {\n    case 'catalog-dropdown':\n      return (\n        <AppHeaderSection\n          navSections={CATALOG_NAV_SECTIONS}\n          MarketingBanner={MarketingBanner}\n          isMobile\n          handleClose={handleCloseSubMenu}\n          type=\"catalog-dropdown\"\n          isCoachingEnabled={item.isCoachingEnabled}\n        />\n      );\n    case 'resources-dropdown':\n      return (\n        <AppHeaderSection\n          navSections={RESOURCES_NAV_SECTIONS}\n          isMobile\n          handleClose={handleCloseSubMenu}\n          type=\"resources-dropdown\"\n        />\n      );\n    default:\n      return <AppHeaderLinkSections action={action} item={item} mobile />;\n  }\n};\n\nexport const AppHeaderSubNavMobile: React.FC<AppHeaderSubMenuMobileProps> = ({\n  action,\n  handleCloseSubMenu,\n  item,\n}) => {\n  const mainUlWrapper = useRef<HTMLUListElement>(null);\n\n  useEffect(() => {\n    if (mainUlWrapper?.current) {\n      mainUlWrapper.current.focus();\n    }\n  }, []);\n\n  const isProfileMenu = item.type === 'profile-dropdown';\n\n  const isCatalogOrResourcesMenu =\n    item.type === 'catalog-dropdown' || item.type === 'resources-dropdown';\n\n  const renderBackButton = () => {\n    if (!isCatalogOrResourcesMenu) {\n      return (\n        <AppHeaderListItem>\n          <StyledAnchor\n            onClick={handleCloseSubMenu}\n            variant=\"interface\"\n            as=\"button\"\n          >\n            <ArrowLeftIcon size={24} aria-hidden />\n            <Text pl={8}>Back</Text>\n          </StyledAnchor>\n        </AppHeaderListItem>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BackgroundWrapper isNotCatalogOrResources={!isCatalogOrResourcesMenu}>\n      <MobileUlWrapper ref={mainUlWrapper} tabIndex={-1}>\n        {renderBackButton()}\n        <MobileSubMenuWrapper\n          handleClose={handleCloseSubMenu}\n          isMenuRole={isProfileMenu}\n        >\n          {!isCatalogOrResourcesMenu && (\n            <Text as=\"h1\" fontSize={20} mb={16} ml={0}>\n              {isProfileMenu ? item.userDisplayName : item.text}\n            </Text>\n          )}\n          <Menu\n            variant=\"fixed\"\n            mx={isCatalogOrResourcesMenu ? { _: 16, sm: 32 } : 0}\n            width=\"auto\"\n            bg=\"transparent\"\n          >\n            {renderHeaderSection(item, action, handleCloseSubMenu)}\n          </Menu>\n        </MobileSubMenuWrapper>\n      </MobileUlWrapper>\n    </BackgroundWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAM,eAAe,OAAO,OAAO,CACjC,IAAI;CACF,YAAY;CACZ,SAAS;CACT,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,CAAC,CACH;AAED,MAAM,oBAAoB,OAAO,IAAI,CAGnC,OAAO,EACL,yBAAyB;CACvB,YAAY,MAAM,OAAO;CACzB,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;CACT,IAAI;CACL,EACF,CAAC,CACH;AAED,MAAM,uBACJ,MACA,QACA,uBACG;AACH,SAAQ,KAAK,MAAb;EACE,KAAK,mBACH,QACE,oBAAC;GACC,aAAa;GACI;GACjB;GACA,aAAa;GACb,MAAK;GACL,mBAAmB,KAAK;IACxB;EAEN,KAAK,qBACH,QACE,oBAAC;GACC,aAAa;GACb;GACA,aAAa;GACb,MAAK;IACL;EAEN,QACE,QAAO,oBAAC;GAA8B;GAAc;GAAM;IAAS;;;AAIzE,MAAaA,yBAAgE,EAC3E,QACA,oBACA,WACI;CACJ,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,iBAAgB;AACd,MAAI,eAAe,QACjB,eAAc,QAAQ,OAAO;IAE9B,EAAE,CAAC;CAEN,MAAM,gBAAgB,KAAK,SAAS;CAEpC,MAAM,2BACJ,KAAK,SAAS,sBAAsB,KAAK,SAAS;CAEpD,MAAM,yBAAyB;AAC7B,MAAI,CAAC,yBACH,QACE,oBAAC,+BACC,qBAAC;GACC,SAAS;GACT,SAAQ;GACR,IAAG;cAEH,oBAAC;IAAc,MAAM;IAAI;KAAc,EACvC,oBAAC;IAAK,IAAI;cAAG;KAAW;IACX,GACG;AAGxB,SAAO;;AAGT,QACE,oBAAC;EAAkB,yBAAyB,CAAC;YAC3C,qBAAC;GAAgB,KAAK;GAAe,UAAU;cAC5C,kBAAkB,EACnB,qBAAC;IACC,aAAa;IACb,YAAY;eAEX,CAAC,4BACA,oBAAC;KAAK,IAAG;KAAK,UAAU;KAAI,IAAI;KAAI,IAAI;eACrC,gBAAgB,KAAK,kBAAkB,KAAK;MACxC,EAET,oBAAC;KACC,SAAQ;KACR,IAAI,2BAA2B;MAAE,GAAG;MAAI,IAAI;MAAI,GAAG;KACnD,OAAM;KACN,IAAG;eAEF,oBAAoB,MAAM,QAAQ,mBAAmB;MACjD;KACc;IACP;GACA"}

package/dist/AppHeaderMobile/AppHeaderSubMenuTarget/index.js

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

package/dist/AppHeaderMobile/AppHeaderSubMenuTarget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderSubMenuRow: React.FC<AppHeaderSubMenuTargetProps>"],"sources":["../../../src/AppHeaderMobile/AppHeaderSubMenuTarget/index.tsx"],"sourcesContent":["import { Anchor, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../AppHeader/shared/types';\nimport { Avatar } from '../../Avatar';\n\nexport type AppHeaderSubMenuTargetProps = {\n  item:\n    | AppHeaderDropdownItem\n    | AppHeaderCatalogDropdownItem\n    | AppHeaderResourcesDropdownItem;\n  openSubMenu: (\n    event: React.MouseEvent,\n    item:\n      | AppHeaderDropdownItem\n      | AppHeaderCatalogDropdownItem\n      | AppHeaderResourcesDropdownItem\n  ) => void;\n};\n\nconst StyledAnchor = styled(Anchor)(\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    py: 16,\n    width: '100%',\n  })\n);\n\nconst StyledText = styled(Text)(\n  css({\n    ml: 16,\n    maxWidth: `70vw`,\n    overflow: `hidden`,\n    textOverflow: `ellipsis`,\n  })\n);\n\nexport const AppHeaderSubMenuRow: React.FC<AppHeaderSubMenuTargetProps> = ({\n  item,\n  openSubMenu,\n}) => {\n  const getIcon = () => {\n    if (item.type !== 'profile-dropdown') {\n      const Icon = item.icon;\n      return Icon && <Icon size={24} aria-hidden />;\n    }\n    return (\n      <Avatar\n        src={item.avatar}\n        alt=\"User profile avatar\"\n        disableDropshadow\n        size={24}\n      />\n    );\n  };\n\n  return (\n    <StyledAnchor\n      aria-label={`Open ${item.text} navigation`}\n      data-testid={item.dataTestId}\n      onClick={(event: React.MouseEvent) => openSubMenu(event, item)}\n      variant=\"interface\"\n    >\n      {getIcon()}\n      <StyledText>\n        {item.type === 'profile-dropdown' ? item.userDisplayName : item.text}\n      </StyledText>\n      <ArrowChevronRightIcon ml=\"auto\" my=\"auto\" size={12} aria-hidden />\n    </StyledAnchor>\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAM,eAAe,OAAO,OAAO,CACjC,IAAI;CACF,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,IAAI;CACJ,OAAO;CACR,CAAC,CACH;AAED,MAAM,aAAa,OAAO,KAAK,CAC7B,IAAI;CACF,IAAI;CACJ,UAAU;CACV,UAAU;CACV,cAAc;CACf,CAAC,CACH;AAED,MAAaA,uBAA8D,EACzE,MACA,kBACI;CACJ,MAAM,gBAAgB;AACpB,MAAI,KAAK,SAAS,oBAAoB;GACpC,MAAM,OAAO,KAAK;AAClB,UAAO,QAAQ,oBAAC;IAAK,MAAM;IAAI;KAAc;;AAE/C,SACE,oBAAC;GACC,KAAK,KAAK;GACV,KAAI;GACJ;GACA,MAAM;IACN;;AAIN,QACE,qBAAC;EACC,cAAY,QAAQ,KAAK,KAAK;EAC9B,eAAa,KAAK;EAClB,UAAU,UAA4B,YAAY,OAAO,KAAK;EAC9D,SAAQ;;GAEP,SAAS;GACV,oBAAC,wBACE,KAAK,SAAS,qBAAqB,KAAK,kBAAkB,KAAK,OACrD;GACb,oBAAC;IAAsB,IAAG;IAAO,IAAG;IAAO,MAAM;IAAI;KAAc;;GACtD"}

package/dist/AppHeaderMobile/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AppHeaderMobile/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;KA8BY,oBAAA,GAAuB;SAC1B;kBACS;;UAER;EAJE,MAAA,EAAA,OAAA;EAAuB;;;EAIzB,YAAA,CAAA,EAAA,OAAA;EAQuB,QAAA,CAAA,EAAA,OAAA;EAA4B,mBAAA,CAAA,EAAA,OAAA;EAoChD,4BA+LZ,CAAA,EAnOgC,4BAoCH;;cAAjB,iBAAiB,OAAA,CAAM,GAAG"}

package/dist/AppHeaderMobile/index.js

@@ -188,4 +188,5 @@ const AppHeaderMobile = ({ action, items, notifications, search, redirectParam,
 };
 
 //#endregion
-export { AppHeaderMobile };
+export { AppHeaderMobile };
+//# sourceMappingURL=index.js.map

package/dist/AppHeaderMobile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AppHeaderMobile: React.FC<AppHeaderMobileProps>","items"],"sources":["../../src/AppHeaderMobile/index.tsx"],"sourcesContent":["import {\n  Box,\n  ButtonBaseElements,\n  IconButton,\n  Overlay,\n} from '@codecademy/gamut';\nimport { MenuIcon } from '@codecademy/gamut-icons';\nimport { Background, css, states, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { AppHeaderSearch } from '..';\nimport { AppHeaderListItem } from '../AppHeader/AppHeaderElements/AppHeaderListItem';\nimport { useHeaderSearch } from '../AppHeader/Search/useHeaderSearch';\nimport {\n  AppHeaderAction,\n  AppHeaderItem,\n  appHeaderMobileBreakpoint,\n  FormattedMobileAppHeaderItems,\n  StyledAppBar,\n} from '../AppHeader/shared';\nimport { mapAppHeaderItemToElement } from '../AppHeader/shared/utils';\nimport { AppHeaderMainMenuMobile } from '../AppHeaderMobile/AppHeaderMainMenuMobile';\nimport { NavigationMenuFormattedLabel } from '../GlobalHeader';\nimport { HeaderHeightArea } from '../HeaderHeightArea';\nimport { NotificationsContents } from '../Notifications/NotificationsContents';\nimport { AppHeaderNotificationSettings } from '../Notifications/types';\nimport { useHeaderNotifications } from '../Notifications/useHeaderNotifications';\n\nexport type AppHeaderMobileProps = AppHeaderAction & {\n  items: FormattedMobileAppHeaderItems;\n  notifications?: AppHeaderNotificationSettings;\n  redirectParam?: string;\n  search: AppHeaderSearch;\n  isAnon: boolean;\n  /**\n   * used to conditonally hide the default search icon and notification bell\n   */\n  isEnterprise?: boolean;\n  isSimple?: boolean;\n  hideRightMenuButton?: boolean;\n  navigationMenuFormattedLabel?: NavigationMenuFormattedLabel;\n};\n\nconst StyledOverlay = styled(Overlay)(\n  css({\n    display: { _: `block`, [appHeaderMobileBreakpoint]: `none` },\n    width: `100vw`,\n    height: `100vh`,\n    opacity: 1,\n    bg: `beige`,\n    position: `fixed`,\n    left: 0,\n    top: 0,\n    overflowX: `hidden`,\n  })\n);\n\nconst StyledNavBar = styled.ul<{ center?: boolean }>(\n  css({\n    display: `flex`,\n    padding: 0,\n    listStyle: `none`,\n    margin: 0,\n    width: `100%`,\n    alignItems: 'center',\n  }),\n  states({\n    center: {\n      justifyContent: {\n        _: 'center',\n        sm: 'flex-start',\n      },\n    },\n  })\n);\n\nexport const AppHeaderMobile: React.FC<AppHeaderMobileProps> = ({\n  action,\n  items,\n  notifications,\n  search,\n  redirectParam,\n  isAnon,\n  isEnterprise,\n  isSimple,\n  hideRightMenuButton,\n  navigationMenuFormattedLabel,\n}) => {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean | undefined>(\n    undefined\n  );\n  const [allowScroll, setAllowScroll] = useState<boolean>(false);\n  const openButtonRef = useRef<ButtonBaseElements>(null);\n  const closeButtonRef = useRef<ButtonBaseElements>(null);\n\n  const [notificationsBell, notificationsView] = useHeaderNotifications({\n    settings: notifications,\n    Renderer: NotificationsContents,\n  });\n\n  const [searchButton, searchPane] = useHeaderSearch({\n    ...search,\n  });\n\n  const openMobileMenu = () => {\n    setMobileMenuOpen(true);\n\n    if (closeButtonRef.current) {\n      closeButtonRef.current.focus();\n    }\n  };\n\n  useEffect(() => {\n    if (mobileMenuOpen === false && openButtonRef.current) {\n      setTimeout(() => {\n        if (openButtonRef.current) openButtonRef.current.focus();\n      }, 0);\n    }\n  }, [mobileMenuOpen]);\n\n  const mapItemsToElement = <T extends AppHeaderItem[]>(\n    items: T,\n    side: 'left' | 'right',\n    hideExtraItems?: boolean\n  ) => {\n    const shouldHideItems = hideExtraItems === true && items.length > 1;\n    return items.map((item, index) => {\n      const isLastItem = index + 1 === items.length;\n      const isHidable = !isLastItem && shouldHideItems;\n      return (\n        <AppHeaderListItem\n          key={item.id}\n          ml={side === 'right' && index === 0 ? 'auto' : 0}\n          display={{\n            _: isHidable ? 'none' : 'flex',\n            xs: 'flex',\n          }}\n        >\n          {mapAppHeaderItemToElement({\n            action,\n            isStandalone: undefined,\n            isTeams: undefined,\n            item,\n            mobile: true,\n            redirectParam,\n          })}\n        </AppHeaderListItem>\n      );\n    });\n  };\n\n  const right = [\n    ...(!isEnterprise ? [searchButton] : []),\n    ...(notificationsBell && !isEnterprise ? [notificationsBell] : []),\n    ...items.right,\n  ];\n\n  const onItemType = (type: string | undefined) => {\n    if (\n      type &&\n      (type === 'catalog-dropdown' || type === 'resources-dropdown')\n    ) {\n      setAllowScroll(true);\n    } else {\n      setAllowScroll(false);\n    }\n  };\n\n  return (\n    <>\n      {!mobileMenuOpen && ( // need this bc AppBar has a hardcoded z-Index of 15\n        <HeaderHeightArea\n          display={{ _: `block`, [appHeaderMobileBreakpoint]: `none` }}\n        >\n          <StyledAppBar as=\"nav\" aria-label=\"Main\">\n            <StyledNavBar center={!!isSimple}>\n              {mapItemsToElement(items.left, 'left')}\n              {mapItemsToElement(right, 'right', true)}\n              {!hideRightMenuButton && (\n                <AppHeaderListItem ml={right.length === 0 ? 'auto' : 0}>\n                  <IconButton\n                    aria-expanded={mobileMenuOpen}\n                    aria-label={\n                      navigationMenuFormattedLabel?.siteNavigation ||\n                      'Site navigation'\n                    }\n                    tip={'Site\\nnavigation'}\n                    tipProps={{\n                      alignment: 'bottom-center',\n                      placement: 'floating',\n                    }}\n                    data-testid=\"header-mobile-menu\"\n                    onClick={() => {\n                      openMobileMenu();\n                    }}\n                    icon={MenuIcon}\n                    variant=\"interface\"\n                    ref={openButtonRef}\n                  />\n                </AppHeaderListItem>\n              )}\n            </StyledNavBar>\n          </StyledAppBar>\n        </HeaderHeightArea>\n      )}\n      <StyledOverlay\n        clickOutsideCloses\n        escapeCloses\n        isOpen={mobileMenuOpen}\n        onRequestClose={() => setMobileMenuOpen(false)}\n        allowScroll={allowScroll}\n      >\n        <Background bg=\"beige\">\n          <HeaderHeightArea\n            display={{ _: `block`, [appHeaderMobileBreakpoint]: `none` }}\n            as=\"nav\"\n            ariaLabel=\"Main\"\n            data-testid=\"header-mobile-menu-dropdown\"\n          >\n            <StyledAppBar>\n              <StyledNavBar>\n                {mapItemsToElement(items.left, 'left')}\n                <AppHeaderListItem ml=\"auto\">\n                  <IconButton\n                    aria-expanded={mobileMenuOpen}\n                    onClick={() => {\n                      setMobileMenuOpen(false);\n                    }}\n                    icon={MenuIcon}\n                    aria-label={\n                      navigationMenuFormattedLabel?.siteNavigation ||\n                      'Site navigation'\n                    }\n                    tip={\n                      navigationMenuFormattedLabel?.siteNavigation ||\n                      'Site navigation'\n                    }\n                    tipProps={{\n                      alignment: 'bottom-center',\n                      placement: 'floating',\n                    }}\n                    ref={closeButtonRef}\n                  />\n                </AppHeaderListItem>\n              </StyledNavBar>\n            </StyledAppBar>\n            <Box background={theme.colors.beige} height=\"auto\">\n              <AppHeaderMainMenuMobile\n                action={action}\n                items={items.mainMenu}\n                getItemType={onItemType}\n                isAnon={isAnon}\n              />\n            </Box>\n          </HeaderHeightArea>\n        </Background>\n      </StyledOverlay>\n      {!isEnterprise && (\n        <Box display={{ _: `block`, [appHeaderMobileBreakpoint]: `none` }}>\n          {searchPane}\n        </Box>\n      )}\n      <Box display={{ _: `block`, [appHeaderMobileBreakpoint]: `none` }}>\n        {notificationsView}\n      </Box>\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/Avatar/index.d.ts

@@ -37,4 +37,5 @@ type AvatarBaseProps = {
 type AvatarProps = AvatarBaseProps & AvatarImageProps;
 declare const Avatar: React$1.FC<AvatarProps>;
 //#endregion
-export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };
+export { Avatar, AvatarBaseProps, AvatarImageProps, AvatarProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAiDY,gBAAA;;EAAA,iBAAA,CAAA,EAAgB,KAAA;AAI5B,CAAA,GAAY;EA6BA,GAAA,CAAA,EAAA,KAAA;EAEC,iBAgBZ,EAAA,MAhB6B;;KA/BlB,eAAA;;;;;;;;;;;;SAcH;;;;;;;;;;SAYA;;KAGG,WAAA,GAAc,kBAAkB;cAE/B,QAAQ,OAAA,CAAM,GAAG"}

package/dist/Avatar/index.js

@@ -46,4 +46,5 @@ const Avatar = ({ mode, disableDropshadow, size = 24, className, ...avatarImageP
 });
 
 //#endregion
-export { Avatar };
+export { Avatar };
+//# sourceMappingURL=index.js.map

package/dist/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Avatar: React.FC<AvatarProps>"],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import { VisualTheme } from '@codecademy/gamut';\nimport { styledOptions, system, theme } from '@codecademy/gamut-styles';\nimport { ResponsiveProp } from '@codecademy/variance';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst Image = styled('img', styledOptions<'img'>())(system.layout);\n\nconst AvatarContainer = styled.div<{\n  mode?: VisualTheme;\n  disableDropshadow?: boolean;\n}>`\n  position: relative;\n  display: table;\n\n  ${({ disableDropshadow, mode }) =>\n    !disableDropshadow &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        transform: scale(0.92);\n        transform-origin: bottom right;\n        height: 100%;\n        width: 100%;\n        background-color: ${mode\n          ? mode === 'light'\n            ? theme.colors.lightGreen\n            : theme.colors.green\n          : theme.colors['feedback-success']};\n      }\n    `}\n\n  ${Image} {\n    position: relative;\n    border-radius: 50%;\n    object-fit: cover;\n\n    ${({ disableDropshadow }) =>\n      !disableDropshadow &&\n      css`\n        transform: scale(0.92);\n        transform-origin: top left;\n      `}\n  }\n`;\n\nexport type AvatarImageProps =\n  | { alt: string; 'aria-labelledby'?: never }\n  | { alt?: never; 'aria-labelledby': string };\n\nexport type AvatarBaseProps = {\n  /**\n   * path to image asset\n   */\n  src: string;\n\n  /**\n   * Disables the drop shadow entirely.\n   */\n  disableDropshadow?: boolean;\n\n  /**\n   * Size of the Avatar.\n   */\n  size?: ResponsiveProp<24 | 32 | 40 | 48 | 64 | 118> | '100%';\n\n  /**\n   * Overrides styles on the Avatar container.\n   */\n  className?: string;\n\n  /**\n   * @deprecated\n   * This will be determined automatically by the theme moving forward.\n   * Supplying it will determine the color of drop shadow.\n   */\n  mode?: VisualTheme;\n};\n\nexport type AvatarProps = AvatarBaseProps & AvatarImageProps;\n\nexport const Avatar: React.FC<AvatarProps> = ({\n  mode,\n  disableDropshadow,\n  // ENT-361 Fixed Firefox Issue, set default size to 24 from 118\n  size = 24,\n  className,\n  ...avatarImageProps\n}) => (\n  <AvatarContainer\n    className={className}\n    mode={mode}\n    disableDropshadow={disableDropshadow}\n    data-testid=\"avatar-container\"\n  >\n    <Image dimensions={size} {...avatarImageProps} />\n  </AvatarContainer>\n);\n"],"mappings":";;;;;;;AAOA,MAAM,QAAQ,OAAO,OAAO,eAAsB,CAAC,CAAC,OAAO,OAAO;AAElE,MAAM,kBAAkB,OAAO,GAG7B;;;;KAIG,EAAE,mBAAmB,WACtB,CAAC,qBACD,KAAG;;;;;;;;;4BASqB,OAChB,SAAS,UACP,MAAM,OAAO,aACb,MAAM,OAAO,QACf,MAAM,OAAO,oBAAoB;;MAEvC;;IAEF,MAAM;;;;;OAKH,EAAE,wBACH,CAAC,qBACD,KAAG;;;QAGD;;;AAuCR,MAAaA,UAAiC,EAC5C,MACA,mBAEA,OAAO,IACP,WACA,GAAG,uBAEH,oBAAC;CACY;CACL;CACa;CACnB,eAAY;WAEZ,oBAAC;EAAM,YAAY;EAAM,GAAI;GAAoB;EACjC"}

package/dist/AvatarChooser/index.d.ts

@@ -12,4 +12,5 @@ type AvatarChooserProps = {
 };
 declare const AvatarChooser: React$1.FC<AvatarChooserProps>;
 //#endregion
-export { AvatarChooser };
+export { AvatarChooser };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/AvatarChooser/index.tsx"],"sourcesContent":[],"mappings":";;;;KAeK,kBAAA;;EAAA,IAAA,CAAA,EAAA,MAAA;EAGQ,QAAA,CAAA,EAAA,aAAA,CAAA,UAAA,CAAA;EACsB,cAAA,CAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,GAAA,IAAA;EAEpB,QAAA,CAAA,EAAT,QAAS,CAAA,QAAA,EAAA,CAAW,QAAX,CAAA,CAAA,GACT,MADS,CAAA,MAAA,EACM,QADN,CACe,QADf,EAAA,CAC0B,QAD1B,CAAA,CAAA,CAAA;EAAW,KAAA,CAAA,EAAA,MAAA;CAApB;AACwB,cA8BjB,aA9BiB,EA8BF,OAAA,CAAM,EA9BJ,CA8BO,kBA9BP,CAAA"}

package/dist/AvatarChooser/index.js

@@ -93,4 +93,5 @@ const validatePhotoUpload = (files) => {
 };
 
 //#endregion
-export { AvatarChooser };
+export { AvatarChooser };
+//# sourceMappingURL=index.js.map

package/dist/AvatarChooser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["AvatarChooser: React.FC<AvatarChooserProps>"],"sources":["../../src/AvatarChooser/index.tsx"],"sourcesContent":["import {\n  FlexBox,\n  FormError,\n  Input,\n  TextButton,\n  UseFormReturn,\n  Validate,\n} from '@codecademy/gamut';\nimport { pxRem, theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { Avatar } from '../Avatar';\n\ntype AvatarChooserProps = {\n  src: string;\n  name?: string;\n  register?: UseFormReturn['register'];\n  onImageChanged?: (imageFileList: FileList) => void;\n  validate?:\n    | Validate<FileList, [FileList]>\n    | Record<string, Validate<FileList, [FileList]>>;\n  error?: string;\n};\n\nconst baseSize = 75;\nconst smBreakpointSize = 120;\n\nconst StyledAvatar = styled(Avatar)`\n  img {\n    width: ${pxRem(baseSize)};\n    height: ${pxRem(baseSize)};\n  }\n\n  ${theme.breakpoints.sm} {\n    img {\n      width: ${pxRem(smBreakpointSize)};\n      height: ${pxRem(smBreakpointSize)};\n    }\n  }\n`;\n\nconst HiddenInput = styled(Input)`\n  display: none;\n`;\n\nconst StyledFormError = styled(FormError)`\n  position: initial;\n  text-align: center;\n`;\n\nexport const AvatarChooser: React.FC<AvatarChooserProps> = ({\n  src: existingSrc,\n  onImageChanged,\n  error,\n  register,\n  validate = validatePhotoUpload,\n  name = 'Avatar Photo',\n}) => {\n  const [imageSrc, setImageSrc] = useState<string>(existingSrc);\n  const choosePhotoLabelRef = useRef<HTMLLabelElement>(null);\n\n  const onChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const target = event?.target as HTMLInputElement;\n      const imageFilelist = target?.files;\n      const imageFile = imageFilelist?.[0];\n\n      if (imageFilelist) onImageChanged?.(imageFilelist);\n      if (imageFile) setImageSrc(URL.createObjectURL(imageFile));\n    },\n    [setImageSrc, onImageChanged]\n  );\n\n  return (\n    <FlexBox\n      alignItems=\"center\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      width=\"fit-content\"\n      maxWidth={pxRem(120)}\n      aria-live=\"polite\"\n    >\n      <StyledAvatar src={imageSrc} disableDropshadow alt=\"Avatar Photo\" />\n      <TextButton\n        mt={{ _: 4, sm: 12 }}\n        onClick={() => choosePhotoLabelRef.current?.click()}\n      >\n        {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md */}\n        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}\n        <label ref={choosePhotoLabelRef} htmlFor=\"avatar-chooser\">\n          Choose Photo\n        </label>\n      </TextButton>\n\n      <HiddenInput\n        type=\"file\"\n        id=\"avatar-chooser\"\n        aria-invalid={Boolean(error)}\n        name={name}\n        onChange={onChange}\n        {...register?.(name, {\n          onChange,\n          validate,\n          required: false,\n        })}\n      />\n      {error && <StyledFormError role=\"alert\">{error}</StyledFormError>}\n    </FlexBox>\n  );\n};\n\nconst validatePhotoUpload = (files: FileList): boolean | string => {\n  const MAX_FILE_SIZE = 5242880;\n  const MAX_FILE_SIZE_IN_MB = 5;\n\n  const file = files?.item(0);\n  if (!file) return true;\n\n  const { type, size } = file;\n  if (!['image/jpeg', 'image/png'].includes(type))\n    return 'Please upload a jpeg or png file.';\n\n  if (size > MAX_FILE_SIZE)\n    return `Sorry, we cannot accept files larger than ${MAX_FILE_SIZE_IN_MB} MB.`;\n\n  return true;\n};\n"],"mappings":";;;;;;;;AA0BA,MAAM,WAAW;AACjB,MAAM,mBAAmB;AAEzB,MAAM,eAAe,OAAO,OAAO;;aAEtB,MAAM,SAAS,CAAC;cACf,MAAM,SAAS,CAAC;;;IAG1B,MAAM,YAAY,GAAG;;eAEV,MAAM,iBAAiB,CAAC;gBACvB,MAAM,iBAAiB,CAAC;;;;AAKxC,MAAM,cAAc,OAAO,MAAM;;;AAIjC,MAAM,kBAAkB,OAAO,UAAU;;;;AAKzC,MAAaA,iBAA+C,EAC1D,KAAK,aACL,gBACA,OACA,UACA,WAAW,qBACX,OAAO,qBACH;CACJ,MAAM,CAAC,UAAU,eAAe,SAAiB,YAAY;CAC7D,MAAM,sBAAsB,OAAyB,KAAK;CAE1D,MAAM,WAAW,aACd,UAA6C;EAE5C,MAAM,iBADS,OAAO,SACQ;EAC9B,MAAM,YAAY,gBAAgB;AAElC,MAAI,cAAe,kBAAiB,cAAc;AAClD,MAAI,UAAW,aAAY,IAAI,gBAAgB,UAAU,CAAC;IAE5D,CAAC,aAAa,eAAe,CAC9B;AAED,QACE,qBAAC;EACC,YAAW;EACX,eAAc;EACd,gBAAe;EACf,OAAM;EACN,UAAU,MAAM,IAAI;EACpB,aAAU;;GAEV,oBAAC;IAAa,KAAK;IAAU;IAAkB,KAAI;KAAiB;GACpE,oBAAC;IACC,IAAI;KAAE,GAAG;KAAG,IAAI;KAAI;IACpB,eAAe,oBAAoB,SAAS,OAAO;cAInD,oBAAC;KAAM,KAAK;KAAqB,SAAQ;eAAiB;MAElD;KACG;GAEb,oBAAC;IACC,MAAK;IACL,IAAG;IACH,gBAAc,QAAQ,MAAM;IACtB;IACI;IACV,GAAI,WAAW,MAAM;KACnB;KACA;KACA,UAAU;KACX,CAAC;KACF;GACD,SAAS,oBAAC;IAAgB,MAAK;cAAS;KAAwB;;GACzD;;AAId,MAAM,uBAAuB,UAAsC;CACjE,MAAM,gBAAgB;CACtB,MAAM,sBAAsB;CAE5B,MAAM,OAAO,OAAO,KAAK,EAAE;AAC3B,KAAI,CAAC,KAAM,QAAO;CAElB,MAAM,EAAE,MAAM,SAAS;AACvB,KAAI,CAAC,CAAC,cAAc,YAAY,CAAC,SAAS,KAAK,CAC7C,QAAO;AAET,KAAI,OAAO,cACT,QAAO,6CAA6C,oBAAoB;AAE1E,QAAO"}

package/dist/BackToTopAnchor/index.d.ts

@@ -12,4 +12,5 @@ type BackToTopAnchorProps = {
 };
 declare const BackToTopAnchor: React.FC<BackToTopAnchorProps>;
 //#endregion
-export { BackToTopAnchor };
+export { BackToTopAnchor };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/BackToTopAnchor/index.tsx"],"sourcesContent":[],"mappings":";KAGK,oBAAA;EAAA;EAYQ,QAAA,EAAA,MAAA;;;;;;;;;cAAA,iBAAiB,KAAA,CAAM,GAAG"}

package/dist/BackToTopAnchor/index.js

@@ -29,4 +29,5 @@ const BackToTopAnchor = ({ targetId, showIcon = true, size = "base", onClick, va
 };
 
 //#endregion
-export { BackToTopAnchor };
+export { BackToTopAnchor };
+//# sourceMappingURL=index.js.map

package/dist/BackToTopAnchor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BackToTopAnchor: React.FC<BackToTopAnchorProps>"],"sources":["../../src/BackToTopAnchor/index.tsx"],"sourcesContent":["import { Anchor, FlexBox } from '@codecademy/gamut';\nimport { ArrowUpIcon } from '@codecademy/gamut-icons';\n\ntype BackToTopAnchorProps = {\n  /** The id of the element to scroll to */\n  targetId: string;\n  /** Whether to show the arrow icon */\n  showIcon?: boolean;\n  /** The size of the anchor */\n  size?: 'small' | 'base';\n  /**  The onClick here usually contains tracking data */\n  onClick?: () => void;\n  variant?: false | 'inline' | 'standard' | 'interface';\n};\n\nexport const BackToTopAnchor: React.FC<BackToTopAnchorProps> = ({\n  targetId,\n  showIcon = true,\n  size = 'base',\n  onClick,\n  variant,\n}) => {\n  return (\n    <Anchor\n      onClick={() => {\n        // move focus to page title without scrolling page\n        document.getElementById(targetId)?.focus({ preventScroll: true });\n\n        // scroll to top (or jump to top if user prefers reduced motion)\n        window.scrollTo({\n          top: 0,\n          behavior: window.matchMedia('(prefers-reduced-motion: reduce)')\n            .matches\n            ? undefined\n            : 'smooth',\n        });\n\n        onClick?.();\n      }}\n      variant={variant || 'interface'}\n      fontSize={size === 'small' ? 14 : 18}\n      alignSelf=\"end\"\n      mt={64}\n    >\n      <FlexBox alignItems=\"center\" justifyContent=\"center\">\n        {showIcon && <ArrowUpIcon size={24} mr={8} />} Back to top\n      </FlexBox>\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAaA,mBAAmD,EAC9D,UACA,WAAW,MACX,OAAO,QACP,SACA,cACI;AACJ,QACE,oBAAC;EACC,eAAe;AAEb,YAAS,eAAe,SAAS,EAAE,MAAM,EAAE,eAAe,MAAM,CAAC;AAGjE,UAAO,SAAS;IACd,KAAK;IACL,UAAU,OAAO,WAAW,mCAAmC,CAC5D,UACC,SACA;IACL,CAAC;AAEF,cAAW;;EAEb,SAAS,WAAW;EACpB,UAAU,SAAS,UAAU,KAAK;EAClC,WAAU;EACV,IAAI;YAEJ,qBAAC;GAAQ,YAAW;GAAS,gBAAe;cACzC,YAAY,oBAAC;IAAY,MAAM;IAAI,IAAI;KAAK,EAAC;IACtC;GACH"}

package/dist/Banner/CountdownTimer.d.ts

@@ -7,4 +7,5 @@ interface CountdownTimerProps {
 }
 declare const CountdownTimer: React.FC<CountdownTimerProps>;
 //#endregion
-export { CountdownTimer };
+export { CountdownTimer };
+//# sourceMappingURL=CountdownTimer.d.ts.map

package/dist/Banner/CountdownTimer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownTimer.d.ts","names":[],"sources":["../../src/Banner/CountdownTimer.tsx"],"sourcesContent":[],"mappings":";;;UAGU,mBAAA;;EAAA,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;AAmEV;cAAa,gBAAgB,KAAA,CAAM,GAAG"}

package/dist/Banner/CountdownTimer.js

@@ -106,4 +106,5 @@ const CountdownTimer = ({ targetDate, onExpire }) => {
 };
 
 //#endregion
-export { CountdownTimer };
+export { CountdownTimer };
+//# sourceMappingURL=CountdownTimer.js.map

package/dist/Banner/CountdownTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownTimer.js","names":["CountdownTimer: React.FC<CountdownTimerProps>"],"sources":["../../src/Banner/CountdownTimer.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport React, { useEffect, useMemo, useState } from 'react';\n\ninterface CountdownTimerProps {\n  targetDate: string;\n  onExpire?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n}\n\nconst MS_SECOND = 1000;\nconst MS_MINUTE = 60 * MS_SECOND;\nconst MS_HOUR = 60 * MS_MINUTE;\nconst MS_DAY = 24 * MS_HOUR;\n\nconst getTimeRemaining = (target: number): TimeRemaining => {\n  const diff = Math.max(0, target - Date.now());\n\n  return {\n    days: Math.floor(diff / MS_DAY),\n    hours: Math.floor((diff % MS_DAY) / MS_HOUR),\n    minutes: Math.floor((diff % MS_HOUR) / MS_MINUTE),\n    seconds: Math.floor((diff % MS_MINUTE) / MS_SECOND),\n  };\n};\n\nconst TimeUnit = React.memo<{ value: number; label: string }>(\n  ({ value, label }) => (\n    <FlexBox alignItems=\"center\">\n      <Text\n        fontFamily=\"accent\"\n        fontWeight={700}\n        variant=\"title-md\"\n        fontSize={{ _: 20, md: 26 }}\n        as=\"span\"\n        color=\"inherit\"\n      >\n        {value.toString().padStart(2, '0')}\n      </Text>\n      <Text\n        fontFamily=\"accent\"\n        fontWeight={700}\n        variant=\"title-md\"\n        fontSize={{ _: 20, md: 26 }}\n        as=\"span\"\n        color=\"inherit\"\n      >\n        {label}\n      </Text>\n    </FlexBox>\n  )\n);\n\nconst Separator = React.memo(() => (\n  <Text\n    fontFamily=\"accent\"\n    variant=\"title-md\"\n    fontSize={16}\n    color=\"inherit\"\n    fontWeight=\"bold\"\n  >\n    :\n  </Text>\n));\n\nexport const CountdownTimer: React.FC<CountdownTimerProps> = ({\n  targetDate,\n  onExpire,\n}) => {\n  const targetTimestamp = useMemo(\n    () => new Date(targetDate).getTime(),\n    [targetDate]\n  );\n\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining>(() =>\n    getTimeRemaining(targetTimestamp)\n  );\n\n  useEffect(() => {\n    setTimeRemaining(getTimeRemaining(targetTimestamp));\n\n    if (targetTimestamp <= Date.now()) {\n      onExpire?.();\n      return;\n    }\n\n    const id = window.setInterval(() => {\n      const next = getTimeRemaining(targetTimestamp);\n      setTimeRemaining(next);\n\n      if (targetTimestamp <= Date.now()) {\n        onExpire?.();\n        window.clearInterval(id);\n      }\n    }, MS_SECOND);\n\n    return () => window.clearInterval(id);\n  }, [targetTimestamp, onExpire]);\n\n  if (targetTimestamp <= Date.now()) {\n    return null;\n  }\n\n  const { days, hours, minutes, seconds } = timeRemaining;\n\n  return (\n    <Box\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      py={8}\n      px={16}\n      bg=\"yellow-0\"\n      borderRadius={6 as never}\n      color=\"navy\"\n      data-testid=\"branded-countdown-timer\"\n      boxShadow=\"minimal\"\n      gap={2 as never}\n    >\n      <TimeUnit value={days} label=\"d\" />\n      <Separator />\n      <TimeUnit value={hours} label=\"h\" />\n      <Separator />\n      <TimeUnit value={minutes} label=\"m\" />\n      <Separator />\n      <TimeUnit value={seconds} label=\"s\" />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAM,YAAY;AAClB,MAAM,YAAY,KAAK;AACvB,MAAM,UAAU,KAAK;AACrB,MAAM,SAAS,KAAK;AAEpB,MAAM,oBAAoB,WAAkC;CAC1D,MAAM,OAAO,KAAK,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC;AAE7C,QAAO;EACL,MAAM,KAAK,MAAM,OAAO,OAAO;EAC/B,OAAO,KAAK,MAAO,OAAO,SAAU,QAAQ;EAC5C,SAAS,KAAK,MAAO,OAAO,UAAW,UAAU;EACjD,SAAS,KAAK,MAAO,OAAO,YAAa,UAAU;EACpD;;AAGH,MAAM,WAAW,MAAM,MACpB,EAAE,OAAO,YACR,qBAAC;CAAQ,YAAW;YAClB,oBAAC;EACC,YAAW;EACX,YAAY;EACZ,SAAQ;EACR,UAAU;GAAE,GAAG;GAAI,IAAI;GAAI;EAC3B,IAAG;EACH,OAAM;YAEL,MAAM,UAAU,CAAC,SAAS,GAAG,IAAI;GAC7B,EACP,oBAAC;EACC,YAAW;EACX,YAAY;EACZ,SAAQ;EACR,UAAU;GAAE,GAAG;GAAI,IAAI;GAAI;EAC3B,IAAG;EACH,OAAM;YAEL;GACI;EACC,CAEb;AAED,MAAM,YAAY,MAAM,WACtB,oBAAC;CACC,YAAW;CACX,SAAQ;CACR,UAAU;CACV,OAAM;CACN,YAAW;WACZ;EAEM,CACP;AAEF,MAAaA,kBAAiD,EAC5D,YACA,eACI;CACJ,MAAM,kBAAkB,cAChB,IAAI,KAAK,WAAW,CAAC,SAAS,EACpC,CAAC,WAAW,CACb;CAED,MAAM,CAAC,eAAe,oBAAoB,eACxC,iBAAiB,gBAAgB,CAClC;AAED,iBAAgB;AACd,mBAAiB,iBAAiB,gBAAgB,CAAC;AAEnD,MAAI,mBAAmB,KAAK,KAAK,EAAE;AACjC,eAAY;AACZ;;EAGF,MAAM,KAAK,OAAO,kBAAkB;AAElC,oBADa,iBAAiB,gBAAgB,CACxB;AAEtB,OAAI,mBAAmB,KAAK,KAAK,EAAE;AACjC,gBAAY;AACZ,WAAO,cAAc,GAAG;;KAEzB,UAAU;AAEb,eAAa,OAAO,cAAc,GAAG;IACpC,CAAC,iBAAiB,SAAS,CAAC;AAE/B,KAAI,mBAAmB,KAAK,KAAK,CAC/B,QAAO;CAGT,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY;AAE1C,QACE,qBAAC;EACC,SAAQ;EACR,YAAW;EACX,IAAI;EACJ,IAAI;EACJ,IAAG;EACH,cAAc;EACd,OAAM;EACN,eAAY;EACZ,WAAU;EACV,KAAK;;GAEL,oBAAC;IAAS,OAAO;IAAM,OAAM;KAAM;GACnC,oBAAC,cAAY;GACb,oBAAC;IAAS,OAAO;IAAO,OAAM;KAAM;GACpC,oBAAC,cAAY;GACb,oBAAC;IAAS,OAAO;IAAS,OAAM;KAAM;GACtC,oBAAC,cAAY;GACb,oBAAC;IAAS,OAAO;IAAS,OAAM;KAAM;;GAClC"}

package/dist/Banner/EnhancedBanner.d.ts

@@ -17,4 +17,5 @@ interface EnhancedBannerProps extends Omit<BackgroundProps, 'bg' | 'containerTyp
   onCountdownExpire?: () => void;
 }
 //#endregion
-export { EnhancedBannerProps };
+export { EnhancedBannerProps };
+//# sourceMappingURL=EnhancedBanner.d.ts.map

package/dist/Banner/EnhancedBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedBanner.d.ts","names":[],"sources":["../../src/Banner/EnhancedBanner.tsx"],"sourcesContent":[],"mappings":";;;;UAiBiB,mBAAA,SACP,KAAK;YACH;EAFK,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACF,UAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACH,YAAA,CAAA,EAAA,MAAA;EADF,MAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAAI,SAAA,CAAA,EAAA,MAAA,GAAA,IAAA"}

package/dist/Banner/EnhancedBanner.js

@@ -137,4 +137,5 @@ const EnhancedBanner = ({ variant: variant$1 = "navy", onClose, onCtaClick, ctaA
 };
 
 //#endregion
-export { EnhancedBanner };
+export { EnhancedBanner };
+//# sourceMappingURL=EnhancedBanner.js.map

package/dist/Banner/EnhancedBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedBanner.js","names":["EnhancedBanner: React.FC<EnhancedBannerProps>","variant"],"sources":["../../src/Banner/EnhancedBanner.tsx"],"sourcesContent":["import {\n  Box,\n  FillButton,\n  FlexBox,\n  IconButton,\n  Markdown,\n  Text,\n} from '@codecademy/gamut';\nimport { MiniDeleteIcon } from '@codecademy/gamut-icons';\nimport { Background, BackgroundProps, css } from '@codecademy/gamut-styles';\nimport { useTheme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { useMemo } from 'react';\n\nimport { BannerVariant } from '.';\nimport { CountdownTimer } from './CountdownTimer';\n\nexport interface EnhancedBannerProps\n  extends Omit<BackgroundProps, 'bg' | 'containerType'> {\n  variant?: BannerVariant | null;\n  onClose?: () => void;\n  onCtaClick?: () => void;\n  ctaAriaLabel?: string;\n  header?: string | null;\n  subheader?: string | null;\n  cta?: { title: string; href: string } | null;\n  countdownTo?: string | null;\n  onCountdownExpire?: () => void;\n}\n\nconst bannerVariants = {\n  navy: 'navy',\n  yellow: 'yellow',\n  subtle: 'background-hover',\n} as const;\n\nconst bannerStyles = {\n  width: '100%',\n  p: 4,\n  display: 'grid',\n  gridTemplateColumns: '2rem minmax(0, 1fr) 2rem',\n  gridTemplateAreas: \"'empty content close'\",\n  columnGap: 8,\n  alignItems: 'center',\n  textAlign: 'center',\n} as const;\n\nconst BannerBg = styled(Background)(css(bannerStyles));\nconst BannerBox = styled(Box)(css(bannerStyles));\n\nconst StyledMarkdown = styled(Markdown)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n`;\n\nconst StyledTitle = styled(StyledMarkdown)`\n  p {\n    font-size: 22px;\n    font-weight: 700;\n  }\n`;\n\nconst StyledSubheader = styled(StyledMarkdown)`\n  p {\n    font-size: 16px;\n  }\n`;\n\nexport const EnhancedBanner: React.FC<EnhancedBannerProps> = ({\n  variant = 'navy',\n  onClose,\n  onCtaClick,\n  ctaAriaLabel,\n  header,\n  subheader,\n  cta,\n  countdownTo,\n  onCountdownExpire,\n  ...rest\n}) => {\n  const validCta = useMemo(\n    () => (cta && cta.title && cta.href ? cta : undefined),\n    [cta]\n  );\n  const { mode } = useTheme();\n  const isDarkMode = mode === 'dark';\n\n  if (!header) return null;\n\n  const renderEnhanced = () => {\n    const textBlock = (\n      <Box textAlign={{ _: 'center', md: 'left' }} width=\"100%\">\n        <StyledTitle text={header} />\n        {subheader && <StyledSubheader text={subheader} />}\n      </Box>\n    );\n\n    return (\n      <FlexBox\n        flexDirection={{ _: 'column', md: 'row' }}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        width=\"100%\"\n        p={8}\n        gap={{ _: 16, md: 40 }}\n      >\n        <FlexBox gap={16} alignItems=\"center\">\n          {countdownTo && (\n            <CountdownTimer\n              targetDate={countdownTo}\n              onExpire={onCountdownExpire}\n            />\n          )}\n          {validCta && (\n            <Box display={{ _: 'flex', md: 'none' }} ml={0}>\n              <FillButton\n                variant=\"primary\"\n                href={validCta.href}\n                onClick={onCtaClick}\n              >\n                {validCta.title}\n              </FillButton>\n            </Box>\n          )}\n        </FlexBox>\n\n        <Text maxWidth={{ _: '100%', md: '50%' }}>{textBlock}</Text>\n\n        {validCta && (\n          <Box display={{ _: 'none', md: 'flex' }}>\n            <FillButton\n              variant={isDarkMode ? 'secondary' : 'primary'}\n              href={validCta.href}\n              onClick={onCtaClick}\n            >\n              {validCta.title}\n            </FillButton>\n          </Box>\n        )}\n      </FlexBox>\n    );\n  };\n\n  const backgroundVariant = isDarkMode ? 'yellow' : variant;\n  const Container = backgroundVariant === 'subtle' ? BannerBox : BannerBg;\n\n  return (\n    <Container {...rest} bg={bannerVariants[backgroundVariant ?? 'navy']}>\n      <Box gridArea=\"content\" fontSize=\"inherit\">\n        {renderEnhanced()}\n      </Box>\n      {onClose && (\n        <Box gridArea=\"close\" alignSelf=\"center\">\n          <IconButton\n            variant=\"secondary\"\n            size=\"small\"\n            icon={MiniDeleteIcon}\n            onClick={onClose}\n            tip=\"Close banner\"\n            tipProps={{ alignment: 'left-center' }}\n          />\n        </Box>\n      )}\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB;CACrB,MAAM;CACN,QAAQ;CACR,QAAQ;CACT;AAED,MAAM,eAAe;CACnB,OAAO;CACP,GAAG;CACH,SAAS;CACT,qBAAqB;CACrB,mBAAmB;CACnB,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,MAAM,WAAW,OAAO,WAAW,CAAC,IAAI,aAAa,CAAC;AACtD,MAAM,YAAY,OAAO,IAAI,CAAC,IAAI,aAAa,CAAC;AAEhD,MAAM,iBAAiB,OAAO,SAAS;;;;;;;AAQvC,MAAM,cAAc,OAAO,eAAe;;;;;;AAO1C,MAAM,kBAAkB,OAAO,eAAe;;;;;AAM9C,MAAaA,kBAAiD,EAC5D,qBAAU,QACV,SACA,YACA,cACA,QACA,WACA,KACA,aACA,mBACA,GAAG,WACC;CACJ,MAAM,WAAW,cACR,OAAO,IAAI,SAAS,IAAI,OAAO,MAAM,QAC5C,CAAC,IAAI,CACN;CACD,MAAM,EAAE,SAAS,UAAU;CAC3B,MAAM,aAAa,SAAS;AAE5B,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,uBAAuB;EAC3B,MAAM,YACJ,qBAAC;GAAI,WAAW;IAAE,GAAG;IAAU,IAAI;IAAQ;GAAE,OAAM;cACjD,oBAAC,eAAY,MAAM,SAAU,EAC5B,aAAa,oBAAC,mBAAgB,MAAM,YAAa;IAC9C;AAGR,SACE,qBAAC;GACC,eAAe;IAAE,GAAG;IAAU,IAAI;IAAO;GACzC,YAAW;GACX,gBAAe;GACf,OAAM;GACN,GAAG;GACH,KAAK;IAAE,GAAG;IAAI,IAAI;IAAI;;IAEtB,qBAAC;KAAQ,KAAK;KAAI,YAAW;gBAC1B,eACC,oBAAC;MACC,YAAY;MACZ,UAAU;OACV,EAEH,YACC,oBAAC;MAAI,SAAS;OAAE,GAAG;OAAQ,IAAI;OAAQ;MAAE,IAAI;gBAC3C,oBAAC;OACC,SAAQ;OACR,MAAM,SAAS;OACf,SAAS;iBAER,SAAS;QACC;OACT;MAEA;IAEV,oBAAC;KAAK,UAAU;MAAE,GAAG;MAAQ,IAAI;MAAO;eAAG;MAAiB;IAE3D,YACC,oBAAC;KAAI,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ;eACrC,oBAAC;MACC,SAAS,aAAa,cAAc;MACpC,MAAM,SAAS;MACf,SAAS;gBAER,SAAS;OACC;MACT;;IAEA;;CAId,MAAM,oBAAoB,aAAa,WAAWC;AAGlD,QACE,qBAHgB,sBAAsB,WAAW,YAAY;EAGlD,GAAI;EAAM,IAAI,eAAe,qBAAqB;aAC3D,oBAAC;GAAI,UAAS;GAAU,UAAS;aAC9B,gBAAgB;IACb,EACL,WACC,oBAAC;GAAI,UAAS;GAAQ,WAAU;aAC9B,oBAAC;IACC,SAAQ;IACR,MAAK;IACL,MAAM;IACN,SAAS;IACT,KAAI;IACJ,UAAU,EAAE,WAAW,eAAe;KACtC;IACE;GAEE"}

package/dist/Banner/index.d.ts

@@ -21,4 +21,5 @@ interface BannerProps extends Omit<BackgroundProps, 'bg' | 'containerType'> {
 }
 declare const Banner: React$1.FC<BannerProps>;
 //#endregion
-export { Banner, BannerProps, BannerVariant };
+export { Banner, BannerProps, BannerVariant };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/Banner/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAOY,aAAA,gBAA6B;cACnC;EADM,SAAA,IAAA,EAAA,MAAa;EACnB,SAAA,MAAA,EAII,QAAA;EAOO,SAAA,MACf,EAAA,kBAAA;CAAa;AACH,UAFK,WAAA,SACP,IACE,CADG,eACH,EAAA,IAAA,GAAA,eAAA,CAAA,CAAA;EAEA,QAAA,EAFA,SAEA,GAAA,MAAA;EAHF;EAAI,OAAA,CAAA,EAGF,aAHE,GAAA,IAAA;EAkDD;;;;;;cAAA,QAAQ,OAAA,CAAM,GAAG"}

package/dist/Banner/index.js

@@ -77,4 +77,5 @@ const Banner = ({ children, ctaAriaLabel, variant: variant$1 = "navy", onCtaClic
 };
 
 //#endregion
-export { Banner };
+export { Banner };
+//# sourceMappingURL=index.js.map

package/dist/Banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["variant","Banner: React.FC<BannerProps>","safeVariant: BannerVariant"],"sources":["../../src/Banner/index.tsx"],"sourcesContent":["import { Box, IconButton, Markdown, TextButton } from '@codecademy/gamut';\nimport { MiniDeleteIcon } from '@codecademy/gamut-icons';\nimport { Background, BackgroundProps, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { ReactNode, useMemo } from 'react';\nimport * as React from 'react';\n\nexport type BannerVariant = keyof typeof bannerVariants;\nconst bannerVariants = {\n  navy: 'navy',\n  yellow: 'yellow',\n  subtle: 'background-hover',\n} as const;\n\nconst isAllowedVariant = (\n  variant: string | undefined | null\n): variant is BannerVariant =>\n  Object.keys(bannerVariants).includes(variant as BannerVariant);\n\nexport interface BannerProps\n  extends Omit<BackgroundProps, 'bg' | 'containerType'> {\n  children: ReactNode | string;\n  /** Visual variation for banners, defaults to navy */\n  variant?: BannerVariant | null;\n  /**  Callback called when the user closes the banner. */\n  onClose?: () => void;\n  /** Call to action click callback */\n  onCtaClick?: () => void;\n  ctaAriaLabel?: string;\n}\n\nconst bannerStyles = {\n  width: '100%',\n  p: 4,\n  display: 'grid',\n  gridTemplateColumns: '2rem minmax(0, 1fr) 2rem',\n  gridTemplateAreas: \"'empty content close'\",\n  columnGap: 8,\n  alignItems: 'center',\n  textAlign: 'center',\n} as const;\n\nconst BannerContainerBackground = styled(Background)(css(bannerStyles));\n\nconst BannerContainerBox = styled(Box)(css(bannerStyles));\n\nconst BannerMarkdown = styled(Markdown)(css({ fontSize: 'inherit' }));\n\nconst bindBannerAnchor = (\n  onCtaClick?: BannerProps['onCtaClick'],\n  ctaAriaLabel?: string\n) => ({\n  allowedAttributes: ['href', 'target'],\n  component: TextButton,\n  processNode: (_node: unknown, props: { onClick?: () => void }) => (\n    <TextButton\n      {...props}\n      onClick={() => {\n        onCtaClick?.();\n        props?.onClick?.();\n      }}\n      mx={4}\n      size=\"small\"\n      target=\"_BLANK\"\n      aria-label={ctaAriaLabel}\n      display={{ _: 'block', xs: 'inline-flex' }}\n    />\n  ),\n});\n\nexport const Banner: React.FC<BannerProps> = ({\n  children,\n  ctaAriaLabel,\n  variant = 'navy',\n  onCtaClick,\n  onClose,\n  ...rest\n}) => {\n  const overrides = useMemo(\n    () => ({\n      a: bindBannerAnchor(onCtaClick, ctaAriaLabel),\n    }),\n    [onCtaClick, ctaAriaLabel]\n  );\n\n  // Contentful is unable to programmatically communicate what values it does/doesn't allow in these kinds of fields,\n  // which makes it difficult for us to ensure the Contentful configuration hasn't diverged from Gamut restrictions.\n  const safeVariant: BannerVariant = isAllowedVariant(variant)\n    ? variant\n    : 'navy';\n\n  const BannerContainer =\n    safeVariant === 'subtle' ? BannerContainerBox : BannerContainerBackground;\n\n  return (\n    <BannerContainer {...rest} bg={bannerVariants[safeVariant]}>\n      <Box gridArea=\"content\" fontSize=\"inherit\">\n        {typeof children === 'string' ? (\n          <BannerMarkdown\n            overrides={overrides}\n            text={children}\n            skipDefaultOverrides={{ a: true }}\n          />\n        ) : (\n          children\n        )}\n      </Box>\n      {onClose && (\n        <Box gridArea=\"close\" alignSelf=\"start\">\n          <IconButton\n            variant=\"secondary\"\n            size=\"small\"\n            icon={MiniDeleteIcon}\n            onClick={onClose}\n            tip=\"Close banner\"\n            tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n          />\n        </Box>\n      )}\n    </BannerContainer>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,MAAM,iBAAiB;CACrB,MAAM;CACN,QAAQ;CACR,QAAQ;CACT;AAED,MAAM,oBACJ,cAEA,OAAO,KAAK,eAAe,CAAC,SAASA,UAAyB;AAchE,MAAM,eAAe;CACnB,OAAO;CACP,GAAG;CACH,SAAS;CACT,qBAAqB;CACrB,mBAAmB;CACnB,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,MAAM,4BAA4B,OAAO,WAAW,CAAC,IAAI,aAAa,CAAC;AAEvE,MAAM,qBAAqB,OAAO,IAAI,CAAC,IAAI,aAAa,CAAC;AAEzD,MAAM,iBAAiB,OAAO,SAAS,CAAC,IAAI,EAAE,UAAU,WAAW,CAAC,CAAC;AAErE,MAAM,oBACJ,YACA,kBACI;CACJ,mBAAmB,CAAC,QAAQ,SAAS;CACrC,WAAW;CACX,cAAc,OAAgB,UAC5B,oBAAC;EACC,GAAI;EACJ,eAAe;AACb,iBAAc;AACd,UAAO,WAAW;;EAEpB,IAAI;EACJ,MAAK;EACL,QAAO;EACP,cAAY;EACZ,SAAS;GAAE,GAAG;GAAS,IAAI;GAAe;GAC1C;CAEL;AAED,MAAaC,UAAiC,EAC5C,UACA,cACA,qBAAU,QACV,YACA,SACA,GAAG,WACC;CACJ,MAAM,YAAY,eACT,EACL,GAAG,iBAAiB,YAAY,aAAa,EAC9C,GACD,CAAC,YAAY,aAAa,CAC3B;CAID,MAAMC,cAA6B,iBAAiBF,UAAQ,GACxDA,YACA;AAKJ,QACE,qBAHA,gBAAgB,WAAW,qBAAqB;EAG/B,GAAI;EAAM,IAAI,eAAe;aAC5C,oBAAC;GAAI,UAAS;GAAU,UAAS;aAC9B,OAAO,aAAa,WACnB,oBAAC;IACY;IACX,MAAM;IACN,sBAAsB,EAAE,GAAG,MAAM;KACjC,GAEF;IAEE,EACL,WACC,oBAAC;GAAI,UAAS;GAAQ,WAAU;aAC9B,oBAAC;IACC,SAAQ;IACR,MAAK;IACL,MAAM;IACN,SAAS;IACT,KAAI;IACJ,UAAU;KAAE,WAAW;KAAiB,WAAW;KAAY;KAC/D;IACE;GAEQ"}

package/dist/BetaSticker/index.d.ts

@@ -6,4 +6,5 @@ type BetaStickerProps = {
 };
 declare const BetaSticker: React$1.FC<BetaStickerProps>;
 //#endregion
-export { BetaSticker };
+export { BetaSticker };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/BetaSticker/index.tsx"],"sourcesContent":[],"mappings":";;;KA2BK,gBAAA;;AAzB0B,CAAA;AA6BlB,cAAA,WAAsB,EAAT,OAAA,CAAM,EAAG,CAAA,gBAAH,CAAE"}

package/dist/BetaSticker/index.js

@@ -57,4 +57,5 @@ const BetaSticker = ({ size = "normal" }) => {
 };
 
 //#endregion
-export { BetaSticker };
+export { BetaSticker };
+//# sourceMappingURL=index.js.map

package/dist/BetaSticker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BetaSticker: React.FC<BetaStickerProps>"],"sources":["../../src/BetaSticker/index.tsx"],"sourcesContent":["import { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport * as React from 'react';\n\nconst BetaStickerContainer = styled.svg(\n  variant({\n    defaultVariant: 'normal',\n    base: {\n      lineHeight: 0,\n    },\n    variants: {\n      small: {\n        height: 16,\n        width: 32,\n      },\n      normal: {\n        height: 26,\n        width: 52,\n      },\n      medium: {\n        height: 22,\n        width: 42,\n      },\n    },\n  })\n);\n\ntype BetaStickerProps = {\n  size?: 'normal' | 'small' | 'medium';\n};\n\nexport const BetaSticker: React.FC<BetaStickerProps> = ({\n  size = 'normal',\n}) => {\n  return (\n    <BetaStickerContainer\n      variant={size}\n      viewBox=\"0 0 52 27\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Beta</title>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M2 0.5H0V24.5V26.5H2H52V24.5H2V0.5Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M8 19.1H11.792C14.256 19.1 15.936 18.092 15.936 15.5C15.936 14.092 15.232 13.292 14.288 12.876C15.056 12.348 15.536 11.484 15.536 10.492C15.536 8.076 13.84 7.5 11.6 7.5H8V19.1ZM10.4 12.268V9.452H11.568C12.544 9.452 13.024 9.932 13.024 10.86C13.024 11.788 12.544 12.268 11.568 12.268H10.4ZM13.392 15.58C13.392 16.604 12.88 17.116 11.696 17.116H10.4V14.028H11.696C12.88 14.028 13.392 14.54 13.392 15.58Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M18.5677 19.1H25.5917V17.036H20.9677V14.204H25.2717V12.14H20.9677V9.564H25.5917V7.5H18.5677V19.1Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M31.1675 19.1H33.5675V9.564H36.8475V7.5H27.8875V9.564H31.1675V19.1Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M38.2312 19.1H40.7913L41.3193 16.684H44.0393L44.5673 19.1H47.1913L44.1992 7.5H41.2073L38.2312 19.1ZM42.6953 10.556L43.6233 14.812H41.7353L42.6953 10.556Z\"\n        fill=\"currentColor\"\n      />\n    </BetaStickerContainer>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAM,uBAAuB,OAAO,IAClC,QAAQ;CACN,gBAAgB;CAChB,MAAM,EACJ,YAAY,GACb;CACD,UAAU;EACR,OAAO;GACL,QAAQ;GACR,OAAO;GACR;EACD,QAAQ;GACN,QAAQ;GACR,OAAO;GACR;EACD,QAAQ;GACN,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC,CACH;AAMD,MAAaA,eAA2C,EACtD,OAAO,eACH;AACJ,QACE,qBAAC;EACC,SAAS;EACT,SAAQ;EACR,MAAK;EACL,OAAM;;GAEN,oBAAC,qBAAM,SAAY;GACnB,oBAAC;IACC,UAAS;IACT,UAAS;IACT,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;;GACmB"}

package/dist/CareerPathCard/index.d.ts

@@ -1,6 +1,6 @@
 import { CourseDifficulty, EnrollmentStatus } from "../ContentGroupBaseCard/types.js";
 import { HeadingTags } from "@codecademy/gamut";
-import * as react0 from "react";
+import * as react7 from "react";
 
 //#region src/CareerPathCard/index.d.ts
 type CareerPathCardProps = {
@@ -21,6 +21,7 @@ type CareerPathCardProps = {
   href: string;
   onClick: () => void;
 };
-declare const CareerPathCard: react0.ForwardRefExoticComponent<CareerPathCardProps & react0.RefAttributes<HTMLAnchorElement>>;
+declare const CareerPathCard: react7.ForwardRefExoticComponent<CareerPathCardProps & react7.RefAttributes<HTMLAnchorElement>>;
 //#endregion
-export { CareerPathCard };
+export { CareerPathCard };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/CareerPathCard/index.tsx"],"sourcesContent":[],"mappings":";;;;;KAcK,mBAAA;;;EAAA,gBAAA,EAGe,gBAHI;EAGJ,gBAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAEL,UAAA,CAAA,EAAA,gBAAA,GAAA,IAAA;EAKE,gBAAA,CAAA,EAAA,OAAA;EAEN,QAAM,EAAA,MAAA;EACN,WAAM,EAAA,MAAA;EAAS,UAAA,CAAA,EAAA,OAAA;EAMb,YAAA,CAAA,EATI,WA4DhB;EAnD0B,cAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAAA,MAAA,CAAA,EAPhB,KAAA,CAAM,SAOU;EAAA,MAAA,CAAA,EANhB,KAAA,CAAM,SAMU;EAAA,YAAA,CAAA,EAAA,OAAA;EAAA,IAAA,EAAA,MAAA;;;cAAd,gBAAc,MAAA,CAAA,0BAAA,sBAAA,MAAA,CAAA,cAAA"}

package/dist/CareerPathCard/index.js

@@ -30,4 +30,5 @@ const CareerPathCard = forwardRef(({ imageUrl, courseCount, shortDescription, di
 });
 
 //#endregion
-export { CareerPathCard };
+export { CareerPathCard };
+//# sourceMappingURL=index.js.map

package/dist/CareerPathCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/CareerPathCard/index.tsx"],"sourcesContent":["import { HeadingTags } from '@codecademy/gamut';\nimport { forwardRef, PropsWithRef } from 'react';\n\nimport { getPathImageUrl } from '../ContentGroupBaseCard/helpers';\nimport { ContentGroupBaseCard } from '../ContentGroupBaseCard/index';\nimport {\n  CertificateComponent,\n  CourseCountComponent,\n} from '../ContentGroupBaseCard/shared';\nimport {\n  CourseDifficulty,\n  EnrollmentStatus,\n} from '../ContentGroupBaseCard/types';\n\ntype CareerPathCardProps = {\n  title: string;\n  lessonCount: number;\n  enrollmentStatus: EnrollmentStatus;\n  shortDescription?: string | null;\n  difficulty?: CourseDifficulty | null;\n  hasCareerJourney?: boolean;\n  imageUrl: string;\n  courseCount: number;\n  isFullSize?: boolean;\n  headingLevel?: HeadingTags;\n  timeToComplete?: number | null;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  openInNewTab?: boolean;\n  href: string;\n  onClick: () => void;\n};\n\nexport const CareerPathCard = forwardRef<\n  HTMLAnchorElement,\n  PropsWithRef<CareerPathCardProps>\n>(\n  (\n    {\n      imageUrl,\n      courseCount,\n      shortDescription,\n      difficulty,\n      enrollmentStatus,\n      lessonCount,\n      title,\n      isFullSize,\n      hasCareerJourney,\n      headingLevel = 'h3',\n      timeToComplete,\n      header,\n      footer,\n      openInNewTab = false,\n      href,\n      onClick,\n    },\n    ref\n  ) => {\n    return (\n      <ContentGroupBaseCard\n        headerBackgroundColor=\"navy\"\n        headerText=\"Career path\"\n        title={title}\n        headingLevel={headingLevel}\n        description={shortDescription}\n        difficulty={difficulty}\n        numLessons={lessonCount}\n        shadow=\"outline\"\n        imageSrc={getPathImageUrl(enrollmentStatus, imageUrl)}\n        isFullSize={isFullSize}\n        enrollmentStatus={enrollmentStatus}\n        timeToComplete={timeToComplete}\n        header={header}\n        footer={footer}\n        href={href}\n        openInNewTab={openInNewTab}\n        onClick={onClick}\n        ref={ref}\n      >\n        <CourseCountComponent count={courseCount} />\n        <CertificateComponent professionalCert={!!hasCareerJourney} />\n      </ContentGroupBaseCard>\n    );\n  }\n);\n"],"mappings":";;;;;;;AAiCA,MAAa,iBAAiB,YAK1B,EACE,UACA,aACA,kBACA,YACA,kBACA,aACA,OACA,YACA,kBACA,eAAe,MACf,gBACA,QACA,QACA,eAAe,OACf,MACA,WAEF,QACG;AACH,QACE,qBAAC;EACC,uBAAsB;EACtB,YAAW;EACJ;EACO;EACd,aAAa;EACD;EACZ,YAAY;EACZ,QAAO;EACP,UAAU,gBAAgB,kBAAkB,SAAS;EACzC;EACM;EACF;EACR;EACA;EACF;EACQ;EACL;EACJ;aAEL,oBAAC,wBAAqB,OAAO,cAAe,EAC5C,oBAAC,wBAAqB,kBAAkB,CAAC,CAAC,mBAAoB;GACzC;EAG5B"}