@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

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

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

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

@@ -0,0 +1,11 @@
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+type AppHeaderDietCardProps = {
+    title: string;
+    hours: number | null;
+    icon: React.ReactNode;
+    difficulty: CourseDifficulty | null;
+    href: string;
+    trackingTarget?: string;
+};
+export declare const AppHeaderDietCard: ({ title, hours, icon, difficulty, href, trackingTarget, }: AppHeaderDietCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,124 @@
+import _styled from "@emotion/styled/base";
+import { Anchor, Box, Card, FlexBox, Text } from '@codecademy/gamut';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { css } from '@codecademy/gamut-styles';
+import { CourseDifficulty } from '../../../ContentGroupBaseCard/types';
+import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCard = /*#__PURE__*/_styled(Card, {
+  target: "e1d52gk02",
+  label: "StyledCard"
+})("&:hover{border-color:", ({
+  theme
+}) => theme.colors.black, ";cursor:pointer;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
+const DottedLine = /*#__PURE__*/_styled(CheckerDense, {
+  target: "e1d52gk01",
+  label: "DottedLine"
+})(css({
+  height: '1px',
+  display: 'flex',
+  position: 'absolute',
+  marginTop: '-1px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVtQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */");
+const DifficultyTextContainer = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1d52gk00",
+  label: "DifficultyTextContainer"
+})("@media (min-width: 768px) and (max-width: 880px){max-width:", ({
+  isBeginnerContainer
+}) => isBeginnerContainer ? '60%' : 'none', ";}@media (min-width: 1024px) and (max-width: 1136px){max-width:", ({
+  isBeginnerContainer
+}) => isBeginnerContainer ? '60%' : 'none', ";}@media (min-width: 1200px) and (max-width: 1230px){max-width:", ({
+  isBeginnerContainer
+}) => isBeginnerContainer ? '60%' : 'none', ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyRGlldENhcmQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRpZXRDYXJkL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQm94LCBDYXJkLCBGbGV4Qm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQ2hlY2tlckRlbnNlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtcGF0dGVybnMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgQ291cnNlRGlmZmljdWx0eSB9IGZyb20gJy4uLy4uLy4uL0NvbnRlbnRHcm91cEJhc2VDYXJkL3R5cGVzJztcbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcblxuY29uc3QgU3R5bGVkQ2FyZCA9IHN0eWxlZChDYXJkKWBcbiAgJjpob3ZlciB7XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5ibGFja307XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICB9XG5gO1xuXG5jb25zdCBEb3R0ZWRMaW5lID0gc3R5bGVkKENoZWNrZXJEZW5zZSkoXG4gIGNzcyh7XG4gICAgaGVpZ2h0OiAnMXB4JyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgbWFyZ2luVG9wOiAnLTFweCcsXG4gIH0pXG4pO1xuXG5jb25zdCBEaWZmaWN1bHR5VGV4dENvbnRhaW5lciA9IHN0eWxlZChGbGV4Qm94KTx7XG4gIGlzQmVnaW5uZXJDb250YWluZXI6IGJvb2xlYW47XG59PmBcbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogODgwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMDI0cHgpIGFuZCAobWF4LXdpZHRoOiAxMTM2cHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIGFuZCAobWF4LXdpZHRoOiAxMjMwcHgpIHtcbiAgICBtYXgtd2lkdGg6ICR7KHsgaXNCZWdpbm5lckNvbnRhaW5lciB9KSA9PlxuICAgICAgaXNCZWdpbm5lckNvbnRhaW5lciA/ICc2MCUnIDogJ25vbmUnfTtcbiAgfVxuYDtcblxudHlwZSBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBob3VyczogbnVtYmVyIHwgbnVsbDtcbiAgaWNvbjogUmVhY3QuUmVhY3ROb2RlO1xuICBkaWZmaWN1bHR5OiBDb3Vyc2VEaWZmaWN1bHR5IHwgbnVsbDtcbiAgaHJlZjogc3RyaW5nO1xuICB0cmFja2luZ1RhcmdldD86IHN0cmluZztcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJEaWV0Q2FyZCA9ICh7XG4gIHRpdGxlLFxuICBob3VycyxcbiAgaWNvbixcbiAgZGlmZmljdWx0eSxcbiAgaHJlZixcbiAgdHJhY2tpbmdUYXJnZXQsXG59OiBBcHBIZWFkZXJEaWV0Q2FyZFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBpc0JlZ2lubmVyQ29udGFpbmVyID0gZGlmZmljdWx0eSA9PT0gQ291cnNlRGlmZmljdWx0eS5CZWdpbm5lcjtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxBbmNob3JcbiAgICAgICAgaHJlZj17aHJlZn1cbiAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgIGRpc3BsYXk9XCJibG9ja1wiXG4gICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudCwgTW91c2VFdmVudD4pID0+XG4gICAgICAgICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICAgICAgICB0eXBlOiAnbGluaycsXG4gICAgICAgICAgICBpZDogYHRvcG5hdl9jYXRhbG9nXyR7dGl0bGV9YCxcbiAgICAgICAgICAgIGhyZWYsXG4gICAgICAgICAgICB0ZXh0OiB0aXRsZSxcbiAgICAgICAgICAgIHRyYWNraW5nVGFyZ2V0OiBgdG9wbmF2X2NhdGFsb2dfJHt0cmFja2luZ1RhcmdldCA/PyB0aXRsZX1gLFxuICAgICAgICAgIH0pXG4gICAgICAgIH1cbiAgICAgID5cbiAgICAgICAgPFN0eWxlZENhcmRcbiAgICAgICAgICBib3JkZXJSYWRpdXM9XCJtZFwiXG4gICAgICAgICAgYm9yZGVyQ29sb3I9XCJib3JkZXItdGVydGlhcnlcIlxuICAgICAgICAgIG1pbkhlaWdodD17MTIwfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICBmbGV4RGlyZWN0aW9uPVwiY29sdW1uXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICAgIHB4PXsxMn1cbiAgICAgICAgICBweT17OH1cbiAgICAgICAgICBpc0ludGVyYWN0aXZlXG4gICAgICAgID5cbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJoM1wiXG4gICAgICAgICAgICB2YXJpYW50PVwicC1sYXJnZVwiXG4gICAgICAgICAgICBmb250V2VpZ2h0PXs3MDB9XG4gICAgICAgICAgICB0cnVuY2F0ZT1cImVsbGlwc2lzXCJcbiAgICAgICAgICAgIHRydW5jYXRlTGluZXM9ezJ9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8Qm94PlxuICAgICAgICAgICAgPEJveCBweT17NH0gbWI9ezR9IGhlaWdodD17MH0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIGFyaWEtaGlkZGVuPlxuICAgICAgICAgICAgICA8RG90dGVkTGluZSBjb2xvcj1cImJvcmRlci10ZXJ0aWFyeVwiIC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxGbGV4Qm94IGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgICAge2RpZmZpY3VsdHkgJiYgKFxuICAgICAgICAgICAgICAgIDxEaWZmaWN1bHR5VGV4dENvbnRhaW5lclxuICAgICAgICAgICAgICAgICAgaXNCZWdpbm5lckNvbnRhaW5lcj17aXNCZWdpbm5lckNvbnRhaW5lcn1cbiAgICAgICAgICAgICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgICAgICAgICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICAgICAgICAgICAgZ2FwPXs4fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHtpY29ufVxuICAgICAgICAgICAgICAgICAgPFRleHQgc2NyZWVucmVhZGVyPntgJHtkaWZmaWN1bHR5fSR7XG4gICAgICAgICAgICAgICAgICAgIGlzQmVnaW5uZXJDb250YWluZXIgPyAnIEZyaWVuZGx5JyA6ICcnXG4gICAgICAgICAgICAgICAgICB9LmB9PC9UZXh0PlxuICAgICAgICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZT17MTR9XG4gICAgICAgICAgICAgICAgICAgIGNvbG9yPVwidGV4dC1zZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD1cImNhcmQtZGlmZmljdWx0eVwiXG4gICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgICAgICAgICAgICAgIHRydW5jYXRlPVwiZWxsaXBzaXNcIlxuICAgICAgICAgICAgICAgICAgICB0cnVuY2F0ZUxpbmVzPXsxfVxuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdz1cImhpZGRlblwiXG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxiPntkaWZmaWN1bHR5fTwvYj5cbiAgICAgICAgICAgICAgICAgICAge2lzQmVnaW5uZXJDb250YWluZXIgJiYgPD4gRnJpZW5kbHk8Lz59XG4gICAgICAgICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICAgICAgPC9EaWZmaWN1bHR5VGV4dENvbnRhaW5lcj5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2hvdXJzICYmIChcbiAgICAgICAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgICAgICAgZm9udFNpemU9ezE0fVxuICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAgICAgY29sb3I9XCJ0ZXh0LXNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICB3aGl0ZVNwYWNlPVwibm93cmFwXCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8Yj57aG91cnN9PC9iPiBob3Vyc1xuICAgICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvRmxleEJveD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRDYXJkPlxuICAgICAgPC9BbmNob3I+XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
+export const AppHeaderDietCard = ({
+  title,
+  hours,
+  icon,
+  difficulty,
+  href,
+  trackingTarget
+}) => {
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
+  const isBeginnerContainer = difficulty === CourseDifficulty.Beginner;
+  return /*#__PURE__*/_jsx("li", {
+    children: /*#__PURE__*/_jsx(Anchor, {
+      href: href,
+      variant: "interface",
+      display: "block",
+      onClick: event => globalHeaderItemClick(event, {
+        type: 'link',
+        id: `topnav_catalog_${title}`,
+        href,
+        text: title,
+        trackingTarget: `topnav_catalog_${trackingTarget ?? title}`
+      }),
+      children: /*#__PURE__*/_jsxs(StyledCard, {
+        borderRadius: "md",
+        borderColor: "border-tertiary",
+        minHeight: 120,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        px: 12,
+        py: 8,
+        isInteractive: true,
+        children: [/*#__PURE__*/_jsx(Text, {
+          as: "h3",
+          variant: "p-large",
+          fontWeight: 700,
+          truncate: "ellipsis",
+          truncateLines: 2,
+          children: title
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            py: 4,
+            mb: 4,
+            height: 0,
+            position: "relative",
+            "aria-hidden": true,
+            children: /*#__PURE__*/_jsx(DottedLine, {
+              color: "border-tertiary"
+            })
+          }), /*#__PURE__*/_jsxs(FlexBox, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [difficulty && /*#__PURE__*/_jsxs(DifficultyTextContainer, {
+              isBeginnerContainer: isBeginnerContainer,
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 8,
+              children: [icon, /*#__PURE__*/_jsx(Text, {
+                screenreader: true,
+                children: `${difficulty}${isBeginnerContainer ? ' Friendly' : ''}.`
+              }), /*#__PURE__*/_jsxs(Text, {
+                variant: "p-small",
+                fontSize: 14,
+                color: "text-secondary",
+                "data-testid": "card-difficulty",
+                "aria-hidden": true,
+                truncate: "ellipsis",
+                truncateLines: 1,
+                overflow: "hidden",
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: difficulty
+                }), isBeginnerContainer && /*#__PURE__*/_jsx(_Fragment, {
+                  children: " Friendly"
+                })]
+              })]
+            }), hours && /*#__PURE__*/_jsxs(Text, {
+              fontSize: 14,
+              variant: "p-small",
+              color: "text-secondary",
+              whiteSpace: "nowrap",
+              children: [/*#__PURE__*/_jsx("b", {
+                children: hours
+              }), " hours"]
+            })]
+          })]
+        })]
+      })
+    })
+  });
+};

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

@@ -0,0 +1,12 @@
+import { Menu } from '@codecademy/gamut';
+import * as React from 'react';
+import { AppHeaderAction, AppHeaderDropdownItem } from '../../shared';
+export type AppHeaderDropdownProps = AppHeaderAction & Pick<React.ComponentProps<typeof Menu>, 'spacing'> & {
+    item: AppHeaderDropdownItem;
+    /**
+     * If true, the dropdown is being rendered as a standalone component, rather than
+     * part of the global header.
+     */
+    standalone?: boolean;
+};
+export declare const AppHeaderDropdown: React.FC<AppHeaderDropdownProps>;

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

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

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

@@ -0,0 +1,13 @@
+import React, { Dispatch, ReactNode, SetStateAction } from 'react';
+import { AnchorRefItemType } from '../../shared';
+export interface AppHeaderDropdownContextType {
+    firstItemRef?: AnchorRefItemType;
+    setFirstItemRef: Dispatch<SetStateAction<AnchorRefItemType>> | undefined;
+    handleClose: () => void;
+}
+export declare const AppHeaderDropdownContext: React.Context<AppHeaderDropdownContextType>;
+export declare const AppHeaderDropdownProvider: React.FC<{
+    children: ReactNode;
+    handleClose: () => void;
+}>;
+export declare const useAppHeaderDropdownContext: () => AppHeaderDropdownContextType;

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

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

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

@@ -0,0 +1,4 @@
+import { AppHeaderCardItem } from '../AppHeaderResourcesDropdown/consts';
+export declare const AppHeaderFeatureCard: ({ item }: {
+    item: AppHeaderCardItem;
+}) => import("react/jsx-runtime").JSX.Element;

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

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