@codecademy/brand 3.6.0 → 3.7.0

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.js

@@ -1,14 +1,14 @@
-import { Anchor, Box, FlexBox, Text } from '@codecademy/gamut';
-import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';
+import { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
 import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
 import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
+import { useAppHeaderSectionContext } from './AppHeaderSectionContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PanelLayout = ({
   heading,
   description,
   linkItem,
-  children,
-  tabIndex = 0
+  children
 }) => {
   const {
     globalHeaderItemClick
@@ -16,25 +16,52 @@ export const PanelLayout = ({
   const {
     handleClose
   } = useAppHeaderDropdownContext();
+  const {
+    setActivePanel,
+    tabIndex
+  } = useAppHeaderSectionContext();
   return /*#__PURE__*/_jsxs(FlexBox, {
     flexDirection: "column",
-    gap: 24,
+    gap: {
+      _: 8,
+      xs: 8
+    },
     pr: {
-      _: 32,
+      _: 0,
       md: 16,
       lg: 0
     },
-    children: [/*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      gap: {
+        _: 8,
+        xs: 0
+      },
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setActivePanel(null),
+        icon: ArrowLeftIcon,
+        tip: "Back to main navigation",
+        tipProps: {
+          alignment: 'right-center',
+          narrow: false,
+          placement: 'floating'
+        },
+        "aria-label": "Back to main navigation",
+        display: {
+          _: 'flex',
+          xs: 'none'
+        }
+      }), /*#__PURE__*/_jsx(Text, {
         as: "h2",
         variant: "title-sm",
         children: heading
-      }), /*#__PURE__*/_jsx(Text, {
-        mt: 8,
-        children: description
       })]
+    }), /*#__PURE__*/_jsx(Text, {
+      mb: 16,
+      children: description
     }), children, linkItem && /*#__PURE__*/_jsx(FlexBox, {
       justifyContent: "center",
+      mt: 16,
       children: /*#__PURE__*/_jsx(Anchor, {
         href: linkItem.href,
         onClick: event => {

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.d.ts

@@ -0,0 +1,26 @@
+export declare const StyledSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    activePanelSelected: boolean;
+}, {}, {}>;
+export declare const StyledGridBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut/dist/Box/props").GridBoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const GradientBackground: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const SmallMenuButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    index: number;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.js

@@ -0,0 +1,48 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Box, GridBox } from '@codecademy/gamut';
+export const StyledSection = /*#__PURE__*/_styled(Box, {
+  target: "e2xtrjc3",
+  label: "StyledSection"
+})("width:calc(100dvw - 11rem);max-width:calc(1440px - 11rem);border:1px solid ", ({
+  theme
+}) => theme.colors['border-tertiary'], ";border-radius:16px;background-color:", ({
+  theme
+}) => theme.colors['gray-100'], ";@media (max-width: 1200px){width:100%;max-width:100%;}@media (max-width: 480px){background-color:", ({
+  activePanelSelected,
+  theme
+}) => activePanelSelected ? theme.colors['gray-100'] : theme.colors.background, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRzBFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEdyaWRCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWN0aW9uID0gc3R5bGVkKEJveCk8eyBhY3RpdmVQYW5lbFNlbGVjdGVkOiBib29sZWFuIH0+YFxuICB3aWR0aDogY2FsYygxMDBkdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcblxuICBAbWVkaWEgKG1heC13aWR0aDogMTIwMHB4KSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyBhY3RpdmVQYW5lbFNlbGVjdGVkLCB0aGVtZSB9KSA9PlxuICAgICAgYWN0aXZlUGFuZWxTZWxlY3RlZCA/IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXSA6IHRoZW1lLmNvbG9ycy5iYWNrZ3JvdW5kfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiAxMDI0cHgpIHtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDE5MXB4IDMycHggMWZyO1xuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiA2NHB4IDFmciAxZnI7XG4gIH1cblxuICBAbWVkaWEgKG1heC13aWR0aDogNDgwcHgpIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBTbWFsbE1lbnVCdXR0b24gPSBzdHlsZWQuYnV0dG9uPHsgaW5kZXg6IG51bWJlciB9PmBcbiAgZ3JpZC1jb2x1bW46IDE7XG4gIGdyaWQtcm93OiAkeyh7IGluZGV4IH0pID0+IGluZGV4ICsgMX07XG4gIHBhZGRpbmc6IDE2cHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWyduYXZ5LTEwMCddfTtcbiAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gIH1cbmA7XG4iXX0= */"));
+export const StyledGridBox = /*#__PURE__*/_styled(GridBox, {
+  target: "e2xtrjc2",
+  label: "StyledGridBox"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1981ite",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr;@media (max-width: 1024px){grid-template-columns:191px 32px 1fr;}@media (max-width: 768px){grid-template-columns:64px 1fr 1fr;}@media (max-width: 480px){display:none;}"
+} : {
+  name: "1981ite",
+  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr;@media (max-width: 1024px){grid-template-columns:191px 32px 1fr;}@media (max-width: 768px){grid-template-columns:64px 1fr 1fr;}@media (max-width: 480px){display:none;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUI0QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb24vZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBHcmlkQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChCb3gpPHsgYWN0aXZlUGFuZWxTZWxlY3RlZDogYm9vbGVhbiB9PmBcbiAgd2lkdGg6IGNhbGMoMTAwZHZ3IC0gMTFyZW0pO1xuICBtYXgtd2lkdGg6IGNhbGMoMTQ0MHB4IC0gMTFyZW0pO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDEyMDBweCkge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA0ODBweCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgYWN0aXZlUGFuZWxTZWxlY3RlZCwgdGhlbWUgfSkgPT5cbiAgICAgIGFjdGl2ZVBhbmVsU2VsZWN0ZWQgPyB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ10gOiB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcmlkQm94ID0gc3R5bGVkKEdyaWRCb3gpYFxuICBwYWRkaW5nOiA4cHg7XG4gIHJvdy1nYXA6IDhweDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyNjVweCAzMnB4IDFmcjtcblxuICBAbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxOTFweCAzMnB4IDFmcjtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA3NjhweCkge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogNjRweCAxZnIgMWZyO1xuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyYWRpZW50QmFja2dyb3VuZCA9IHN0eWxlZChCb3gpYFxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgMTgwZGVnLFxuICAgIHJnYmEoMCwgMCwgMCwgMCkgNy42NSUsXG4gICAgcmdiYSgwLCAwLCAwLCAwLjE1KSAxMDAlXG4gICk7XG5gO1xuXG5leHBvcnQgY29uc3QgU21hbGxNZW51QnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGluZGV4OiBudW1iZXIgfT5gXG4gIGdyaWQtY29sdW1uOiAxO1xuICBncmlkLXJvdzogJHsoeyBpbmRleCB9KSA9PiBpbmRleCArIDF9O1xuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHdpZHRoOiAxMDAlO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICB9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const GradientBackground = /*#__PURE__*/_styled(Box, {
+  target: "e2xtrjc1",
+  label: "GradientBackground"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )"
+} : {
+  name: "1n848ez",
+  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUM2QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb24vZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBHcmlkQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChCb3gpPHsgYWN0aXZlUGFuZWxTZWxlY3RlZDogYm9vbGVhbiB9PmBcbiAgd2lkdGg6IGNhbGMoMTAwZHZ3IC0gMTFyZW0pO1xuICBtYXgtd2lkdGg6IGNhbGMoMTQ0MHB4IC0gMTFyZW0pO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDEyMDBweCkge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA0ODBweCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgYWN0aXZlUGFuZWxTZWxlY3RlZCwgdGhlbWUgfSkgPT5cbiAgICAgIGFjdGl2ZVBhbmVsU2VsZWN0ZWQgPyB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ10gOiB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcmlkQm94ID0gc3R5bGVkKEdyaWRCb3gpYFxuICBwYWRkaW5nOiA4cHg7XG4gIHJvdy1nYXA6IDhweDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyNjVweCAzMnB4IDFmcjtcblxuICBAbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxOTFweCAzMnB4IDFmcjtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA3NjhweCkge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogNjRweCAxZnIgMWZyO1xuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyYWRpZW50QmFja2dyb3VuZCA9IHN0eWxlZChCb3gpYFxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgMTgwZGVnLFxuICAgIHJnYmEoMCwgMCwgMCwgMCkgNy42NSUsXG4gICAgcmdiYSgwLCAwLCAwLCAwLjE1KSAxMDAlXG4gICk7XG5gO1xuXG5leHBvcnQgY29uc3QgU21hbGxNZW51QnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGluZGV4OiBudW1iZXIgfT5gXG4gIGdyaWQtY29sdW1uOiAxO1xuICBncmlkLXJvdzogJHsoeyBpbmRleCB9KSA9PiBpbmRleCArIDF9O1xuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHdpZHRoOiAxMDAlO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICB9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const SmallMenuButton = /*#__PURE__*/_styled("button", {
+  target: "e2xtrjc0",
+  label: "SmallMenuButton"
+})("grid-column:1;grid-row:", ({
+  index
+}) => index + 1, ";padding:16px;border:none;border-radius:8px;background:none;cursor:pointer;color:", ({
+  theme
+}) => theme.colors.text, ";width:100%;text-align:left;height:60px;display:flex;justify-content:space-between;align-items:center;&:hover,&:focus{background-color:", ({
+  theme
+}) => theme.colors['navy-100'], ";color:", ({
+  theme
+}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0MrRCIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb24vZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBHcmlkQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChCb3gpPHsgYWN0aXZlUGFuZWxTZWxlY3RlZDogYm9vbGVhbiB9PmBcbiAgd2lkdGg6IGNhbGMoMTAwZHZ3IC0gMTFyZW0pO1xuICBtYXgtd2lkdGg6IGNhbGMoMTQ0MHB4IC0gMTFyZW0pO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDEyMDBweCkge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA0ODBweCkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgYWN0aXZlUGFuZWxTZWxlY3RlZCwgdGhlbWUgfSkgPT5cbiAgICAgIGFjdGl2ZVBhbmVsU2VsZWN0ZWQgPyB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ10gOiB0aGVtZS5jb2xvcnMuYmFja2dyb3VuZH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRHcmlkQm94ID0gc3R5bGVkKEdyaWRCb3gpYFxuICBwYWRkaW5nOiA4cHg7XG4gIHJvdy1nYXA6IDhweDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyNjVweCAzMnB4IDFmcjtcblxuICBAbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxOTFweCAzMnB4IDFmcjtcbiAgfVxuXG4gIEBtZWRpYSAobWF4LXdpZHRoOiA3NjhweCkge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogNjRweCAxZnIgMWZyO1xuICB9XG5cbiAgQG1lZGlhIChtYXgtd2lkdGg6IDQ4MHB4KSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdyYWRpZW50QmFja2dyb3VuZCA9IHN0eWxlZChCb3gpYFxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgMTgwZGVnLFxuICAgIHJnYmEoMCwgMCwgMCwgMCkgNy42NSUsXG4gICAgcmdiYSgwLCAwLCAwLCAwLjE1KSAxMDAlXG4gICk7XG5gO1xuXG5leHBvcnQgY29uc3QgU21hbGxNZW51QnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGluZGV4OiBudW1iZXIgfT5gXG4gIGdyaWQtY29sdW1uOiAxO1xuICBncmlkLXJvdzogJHsoeyBpbmRleCB9KSA9PiBpbmRleCArIDF9O1xuICBwYWRkaW5nOiAxNnB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMudGV4dH07XG4gIHdpZHRoOiAxMDAlO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBoZWlnaHQ6IDYwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnl9O1xuICB9XG5gO1xuIl19 */"));

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

@@ -1,4 +1,5 @@
-import React, { RefObject } from 'react';
+import { RefObject } from 'react';
+import * as React from 'react';
 import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
 export type AppHeaderSectionProps = {
     isOpen?: boolean;
@@ -6,12 +7,13 @@ export type AppHeaderSectionProps = {
     ref?: RefObject<HTMLDivElement>;
     navSections: {
         item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-        panel: React.ComponentType<{
-            tabIndex?: number;
-        }>;
+        panel: React.ComponentType;
     }[];
     MarketingBanner?: ({ tabIndex }: {
         tabIndex: number;
     }) => JSX.Element;
+    isMobile?: boolean;
+    handleClose: () => void;
+    type: 'catalog-dropdown' | 'resources-dropdown';
 };
 export declare const AppHeaderSection: React.ForwardRefExoticComponent<Omit<AppHeaderSectionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,60 +1,53 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { Box, GridBox } from '@codecademy/gamut';
-import React, { useEffect, useState } from 'react';
+import { Box } from '@codecademy/gamut';
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { AppHeaderSectionContext } from './AppHeaderSectionContext';
+import { GradientBackground, StyledGridBox, StyledSection } from './elements';
+import { MobileBackButton } from './MobileBackButton';
+import { MobileNavMenu } from './MobileNavMenu';
 import NavSection from './NavSection';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const StyledBox = /*#__PURE__*/_styled(Box, {
-  target: "e1c0yudv2",
-  label: "StyledBox"
-})("width:calc(100vw - 11rem);max-width:calc(1440px - 11rem);border:1px solid ", ({
-  theme
-}) => theme.colors['border-tertiary'], ";border-radius:16px;background-color:", ({
-  theme
-}) => theme.colors['gray-100'], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEdyaWRCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgUmVmT2JqZWN0LCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJSZXNvdXJjZXNEcm9wZG93bkl0ZW0sXG59IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgTmF2U2VjdGlvbiBmcm9tICcuL05hdlNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgd2lkdGg6IGNhbGMoMTAwdncgLSAxMXJlbSk7XG4gIG1heC13aWR0aDogY2FsYygxNDQwcHggLSAxMXJlbSk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydib3JkZXItdGVydGlhcnknXX07XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbmA7XG5cbmNvbnN0IFN0eWxlZEdyaWRCb3ggPSBzdHlsZWQoR3JpZEJveClgXG4gIHBhZGRpbmc6IDhweDtcbiAgcm93LWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDI2NXB4IDMycHggMWZyO1xuYDtcblxuY29uc3QgR3JhZGllbnRCYWNrZ3JvdW5kID0gc3R5bGVkKEJveClgXG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAxODBkZWcsXG4gICAgcmdiYSgwLCAwLCAwLCAwKSA3LjY1JSxcbiAgICByZ2JhKDAsIDAsIDAsIDAuMTUpIDEwMCVcbiAgKTtcbmA7XG5cbmV4cG9ydCB0eXBlIEFwcEhlYWRlclNlY3Rpb25Qcm9wcyA9IHtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAga2V5RG93bkV2ZW50cz86IChldmVudDogUmVhY3QuS2V5Ym9hcmRFdmVudCkgPT4gdm9pZDtcbiAgcmVmPzogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50PjtcbiAgbmF2U2VjdGlvbnM6IHtcbiAgICBpdGVtOiBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtIHwgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtO1xuICAgIHBhbmVsOiBSZWFjdC5Db21wb25lbnRUeXBlPHsgdGFiSW5kZXg/OiBudW1iZXIgfT47XG4gIH1bXTtcbiAgTWFya2V0aW5nQmFubmVyPzogKHsgdGFiSW5kZXggfTogeyB0YWJJbmRleDogbnVtYmVyIH0pID0+IEpTWC5FbGVtZW50O1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlclNlY3Rpb24gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MRGl2RWxlbWVudCxcbiAgQXBwSGVhZGVyU2VjdGlvblByb3BzXG4+KCh7IGlzT3Blbiwga2V5RG93bkV2ZW50cywgbmF2U2VjdGlvbnMsIE1hcmtldGluZ0Jhbm5lciB9LCByZWYpID0+IHtcbiAgY29uc3QgW2FjdGl2ZVRhYiwgc2V0QWN0aXZlVGFiXSA9IHVzZVN0YXRlPG51bWJlcj4oMCk7XG5cbiAgY29uc3QgdGFiSW5kZXggPSBpc09wZW4gPyAwIDogLTE7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICBzZXRBY3RpdmVUYWIoMCk7XG4gICAgfVxuICB9LCBbaXNPcGVuXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPFN0eWxlZEJveD5cbiAgICAgICAge01hcmtldGluZ0Jhbm5lciAmJiA8TWFya2V0aW5nQmFubmVyIHRhYkluZGV4PXt0YWJJbmRleH0gLz59XG4gICAgICAgIDxTdHlsZWRHcmlkQm94IHJlZj17cmVmfSBvbktleURvd249e2tleURvd25FdmVudHN9PlxuICAgICAgICAgIHtuYXZTZWN0aW9ucy5tYXAoKHNlY3Rpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCB7IGl0ZW0sIHBhbmVsOiBQYW5lbCB9ID0gc2VjdGlvbjtcbiAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgIDxOYXZTZWN0aW9uXG4gICAgICAgICAgICAgICAgYWN0aXZlVGFiPXthY3RpdmVUYWJ9XG4gICAgICAgICAgICAgICAgc2V0QWN0aXZlVGFiPXtzZXRBY3RpdmVUYWJ9XG4gICAgICAgICAgICAgICAgaWNvbj17aXRlbS5pY29ufVxuICAgICAgICAgICAgICAgIHRleHQ9e2l0ZW0udGV4dH1cbiAgICAgICAgICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgICAgICB0YWJJbmRleD17dGFiSW5kZXh9XG4gICAgICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPFBhbmVsIHRhYkluZGV4PXt0YWJJbmRleH0gLz5cbiAgICAgICAgICAgICAgPC9OYXZTZWN0aW9uPlxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9TdHlsZWRHcmlkQm94PlxuICAgICAgPC9TdHlsZWRCb3g+XG5cbiAgICAgIDxHcmFkaWVudEJhY2tncm91bmRcbiAgICAgICAgcG9zaXRpb249XCJmaXhlZFwiXG4gICAgICAgIHRvcD1cIjBcIlxuICAgICAgICBsZWZ0PVwiMFwiXG4gICAgICAgIHJpZ2h0PVwiMFwiXG4gICAgICAgIGJvdHRvbT1cIjBcIlxuICAgICAgICB6SW5kZXg9ey0xfVxuICAgICAgICBkaXNwbGF5PXtpc09wZW4gPyAnYmxvY2snIDogJ25vbmUnfVxuICAgICAgLz5cbiAgICA8Lz5cbiAgKTtcbn0pO1xuIl19 */"));
-const StyledGridBox = /*#__PURE__*/_styled(GridBox, {
-  target: "e1c0yudv1",
-  label: "StyledGridBox"
-})(process.env.NODE_ENV === "production" ? {
-  name: "29co2b",
-  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr"
-} : {
-  name: "29co2b",
-  styles: "padding:8px;row-gap:8px;grid-template-columns:265px 32px 1fr/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JxQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBHcmlkQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFJlZk9iamVjdCwgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQm94ID0gc3R5bGVkKEJveClgXG4gIHdpZHRoOiBjYWxjKDEwMHZ3IC0gMTFyZW0pO1xuICBtYXgtd2lkdGg6IGNhbGMoMTQ0MHB4IC0gMTFyZW0pO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5gO1xuXG5jb25zdCBTdHlsZWRHcmlkQm94ID0gc3R5bGVkKEdyaWRCb3gpYFxuICBwYWRkaW5nOiA4cHg7XG4gIHJvdy1nYXA6IDhweDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyNjVweCAzMnB4IDFmcjtcbmA7XG5cbmNvbnN0IEdyYWRpZW50QmFja2dyb3VuZCA9IHN0eWxlZChCb3gpYFxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgMTgwZGVnLFxuICAgIHJnYmEoMCwgMCwgMCwgMCkgNy42NSUsXG4gICAgcmdiYSgwLCAwLCAwLCAwLjE1KSAxMDAlXG4gICk7XG5gO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJTZWN0aW9uUHJvcHMgPSB7XG4gIGlzT3Blbj86IGJvb2xlYW47XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD47XG4gIG5hdlNlY3Rpb25zOiB7XG4gICAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgICBwYW5lbDogUmVhY3QuQ29tcG9uZW50VHlwZTx7IHRhYkluZGV4PzogbnVtYmVyIH0+O1xuICB9W107XG4gIE1hcmtldGluZ0Jhbm5lcj86ICh7IHRhYkluZGV4IH06IHsgdGFiSW5kZXg6IG51bWJlciB9KSA9PiBKU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTZWN0aW9uID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTERpdkVsZW1lbnQsXG4gIEFwcEhlYWRlclNlY3Rpb25Qcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMsIG5hdlNlY3Rpb25zLCBNYXJrZXRpbmdCYW5uZXIgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIHtNYXJrZXRpbmdCYW5uZXIgJiYgPE1hcmtldGluZ0Jhbm5lciB0YWJJbmRleD17dGFiSW5kZXh9IC8+fVxuICAgICAgICA8U3R5bGVkR3JpZEJveCByZWY9e3JlZn0gb25LZXlEb3duPXtrZXlEb3duRXZlbnRzfT5cbiAgICAgICAgICB7bmF2U2VjdGlvbnMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const GradientBackground = /*#__PURE__*/_styled(Box, {
-  target: "e1c0yudv0",
-  label: "GradientBackground"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1n848ez",
-  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )"
-} : {
-  name: "1n848ez",
-  styles: "background:linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  )/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0JzQyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb24vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBHcmlkQm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFJlZk9iamVjdCwgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IE5hdlNlY3Rpb24gZnJvbSAnLi9OYXZTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQm94ID0gc3R5bGVkKEJveClgXG4gIHdpZHRoOiBjYWxjKDEwMHZ3IC0gMTFyZW0pO1xuICBtYXgtd2lkdGg6IGNhbGMoMTQ0MHB4IC0gMTFyZW0pO1xuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snYm9yZGVyLXRlcnRpYXJ5J119O1xuICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snZ3JheS0xMDAnXX07XG5gO1xuXG5jb25zdCBTdHlsZWRHcmlkQm94ID0gc3R5bGVkKEdyaWRCb3gpYFxuICBwYWRkaW5nOiA4cHg7XG4gIHJvdy1nYXA6IDhweDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAyNjVweCAzMnB4IDFmcjtcbmA7XG5cbmNvbnN0IEdyYWRpZW50QmFja2dyb3VuZCA9IHN0eWxlZChCb3gpYFxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgMTgwZGVnLFxuICAgIHJnYmEoMCwgMCwgMCwgMCkgNy42NSUsXG4gICAgcmdiYSgwLCAwLCAwLCAwLjE1KSAxMDAlXG4gICk7XG5gO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJTZWN0aW9uUHJvcHMgPSB7XG4gIGlzT3Blbj86IGJvb2xlYW47XG4gIGtleURvd25FdmVudHM/OiAoZXZlbnQ6IFJlYWN0LktleWJvYXJkRXZlbnQpID0+IHZvaWQ7XG4gIHJlZj86IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD47XG4gIG5hdlNlY3Rpb25zOiB7XG4gICAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgICBwYW5lbDogUmVhY3QuQ29tcG9uZW50VHlwZTx7IHRhYkluZGV4PzogbnVtYmVyIH0+O1xuICB9W107XG4gIE1hcmtldGluZ0Jhbm5lcj86ICh7IHRhYkluZGV4IH06IHsgdGFiSW5kZXg6IG51bWJlciB9KSA9PiBKU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTZWN0aW9uID0gUmVhY3QuZm9yd2FyZFJlZjxcbiAgSFRNTERpdkVsZW1lbnQsXG4gIEFwcEhlYWRlclNlY3Rpb25Qcm9wc1xuPigoeyBpc09wZW4sIGtleURvd25FdmVudHMsIG5hdlNlY3Rpb25zLCBNYXJrZXRpbmdCYW5uZXIgfSwgcmVmKSA9PiB7XG4gIGNvbnN0IFthY3RpdmVUYWIsIHNldEFjdGl2ZVRhYl0gPSB1c2VTdGF0ZTxudW1iZXI+KDApO1xuXG4gIGNvbnN0IHRhYkluZGV4ID0gaXNPcGVuID8gMCA6IC0xO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgc2V0QWN0aXZlVGFiKDApO1xuICAgIH1cbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxTdHlsZWRCb3g+XG4gICAgICAgIHtNYXJrZXRpbmdCYW5uZXIgJiYgPE1hcmtldGluZ0Jhbm5lciB0YWJJbmRleD17dGFiSW5kZXh9IC8+fVxuICAgICAgICA8U3R5bGVkR3JpZEJveCByZWY9e3JlZn0gb25LZXlEb3duPXtrZXlEb3duRXZlbnRzfT5cbiAgICAgICAgICB7bmF2U2VjdGlvbnMubWFwKChzZWN0aW9uLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgeyBpdGVtLCBwYW5lbDogUGFuZWwgfSA9IHNlY3Rpb247XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8TmF2U2VjdGlvblxuICAgICAgICAgICAgICAgIGFjdGl2ZVRhYj17YWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIHNldEFjdGl2ZVRhYj17c2V0QWN0aXZlVGFifVxuICAgICAgICAgICAgICAgIGljb249e2l0ZW0uaWNvbn1cbiAgICAgICAgICAgICAgICB0ZXh0PXtpdGVtLnRleHR9XG4gICAgICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgICAgIGl0ZW09e2l0ZW19XG4gICAgICAgICAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxQYW5lbCB0YWJJbmRleD17dGFiSW5kZXh9IC8+XG4gICAgICAgICAgICAgIDwvTmF2U2VjdGlvbj5cbiAgICAgICAgICAgICk7XG4gICAgICAgICAgfSl9XG4gICAgICAgIDwvU3R5bGVkR3JpZEJveD5cbiAgICAgIDwvU3R5bGVkQm94PlxuXG4gICAgICA8R3JhZGllbnRCYWNrZ3JvdW5kXG4gICAgICAgIHBvc2l0aW9uPVwiZml4ZWRcIlxuICAgICAgICB0b3A9XCIwXCJcbiAgICAgICAgbGVmdD1cIjBcIlxuICAgICAgICByaWdodD1cIjBcIlxuICAgICAgICBib3R0b209XCIwXCJcbiAgICAgICAgekluZGV4PXstMX1cbiAgICAgICAgZGlzcGxheT17aXNPcGVuID8gJ2Jsb2NrJyA6ICdub25lJ31cbiAgICAgIC8+XG4gICAgPC8+XG4gICk7XG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
-  isOpen,
+  isOpen = true,
   keyDownEvents,
   navSections,
-  MarketingBanner
+  MarketingBanner,
+  isMobile = false,
+  handleClose,
+  type
 }, ref) => {
   const [activeTab, setActiveTab] = useState(0);
+  const [activePanel, setActivePanel] = useState(null);
   const tabIndex = isOpen ? 0 : -1;
+  const activePanelSelected = activePanel !== null;
   useEffect(() => {
     if (isOpen) {
       setActiveTab(0);
     }
   }, [isOpen]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(StyledBox, {
-      children: [MarketingBanner && /*#__PURE__*/_jsx(MarketingBanner, {
-        tabIndex: tabIndex
-      }), /*#__PURE__*/_jsx(StyledGridBox, {
+  return /*#__PURE__*/_jsxs(AppHeaderSectionContext.Provider, {
+    value: {
+      activePanel,
+      setActivePanel,
+      tabIndex
+    },
+    children: [/*#__PURE__*/_jsxs(StyledSection, {
+      activePanelSelected: activePanelSelected,
+      children: [MarketingBanner && /*#__PURE__*/_jsx(Box, {
+        display: {
+          _: activePanelSelected ? 'block' : 'none',
+          xs: 'block'
+        },
+        children: /*#__PURE__*/_jsx(MarketingBanner, {
+          tabIndex: tabIndex
+        })
+      }), /*#__PURE__*/_jsxs(StyledGridBox, {
         ref: ref,
         onKeyDown: keyDownEvents,
-        children: navSections.map((section, index) => {
+        children: [isMobile && /*#__PURE__*/_jsx(MobileBackButton, {
+          handleClose: handleClose,
+          type: type
+        }), navSections.map((section, index) => {
           const {
             item,
             panel: Panel
@@ -67,13 +60,15 @@ export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
             index: index,
             item: item,
             tabIndex: tabIndex,
-            children: /*#__PURE__*/_jsx(Panel, {
-              tabIndex: tabIndex
-            })
+            children: /*#__PURE__*/_jsx(Panel, {})
           }, item.id);
-        })
+        })]
+      }), /*#__PURE__*/_jsx(MobileNavMenu, {
+        handleClose: handleClose,
+        type: type,
+        navSections: navSections
       })]
-    }), /*#__PURE__*/_jsx(GradientBackground, {
+    }), !isMobile && /*#__PURE__*/_jsx(GradientBackground, {
       position: "fixed",
       top: "0",
       left: "0",

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js

@@ -1,9 +1,11 @@
-import { ContentContainer, FillButton, Text, TextButton } from '@codecademy/gamut';
+import _styled from "@emotion/styled/base";
+import { Box, ContentContainer, FillButton, Text, TextButton } from '@codecademy/gamut';
+import { css, states, theme } from '@codecademy/gamut-styles';
 import { useContext, useState } from 'react';
 import * as React from 'react';
 import { AppHeaderLink } from '../../AppHeader/AppHeaderElements/AppHeaderLink';
 import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
-import { BlpHeroExperimentContext } from '../../GlobalHeader';
+import { BlpHeroExperimentContext, GlobalNavRedesignContext } from '../../GlobalHeader';
 import { login, requestTeamsDemo, signUp, signUpTextButton } from '../../GlobalHeader/GlobalHeaderItems';
 import { AppHeaderSubNavMobile } from '../AppHeaderSubMenuMobile';
 import { MobileUlWrapper } from '../AppHeaderSubMenuMobile/elements';
@@ -13,6 +15,18 @@ const isBusinessPageExperiment = isBlpHeroExperimentVariant => {
   if (typeof window === 'undefined') return false;
   return (window.location.pathname === '/business' || window.location.pathname === '/business/pricing') && isBlpHeroExperimentVariant;
 };
+const BackgroundWrapper = /*#__PURE__*/_styled(Box, {
+  target: "emi0o3k0",
+  label: "BackgroundWrapper"
+})(css({}), states({
+  displayGlobalNavRedesign: {
+    background: theme.colors.white,
+    border: 1,
+    borderColor: 'border-tertiary',
+    borderRadius: 'lg',
+    padding: '16px'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FwcEhlYWRlck1vYmlsZS9BcHBIZWFkZXJNYWluTWVudU1vYmlsZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIENvbnRlbnRDb250YWluZXIsXG4gIEZpbGxCdXR0b24sXG4gIFRleHQsXG4gIFRleHRCdXR0b24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcywgc3RhdGVzLCB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXBwSGVhZGVyTGluayB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rJztcbmltcG9ydCB7IEFwcEhlYWRlckxpbmtTZWN0aW9ucyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQWN0aW9uLFxuICBBcHBIZWFkZXJDbGlja0hhbmRsZXIsXG4gIEFwcEhlYWRlckRyb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVySXRlbSxcbn0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL3NoYXJlZCc7XG5pbXBvcnQge1xuICBCbHBIZXJvRXhwZXJpbWVudENvbnRleHQsXG4gIEdsb2JhbE5hdlJlZGVzaWduQ29udGV4dCxcbn0gZnJvbSAnLi4vLi4vR2xvYmFsSGVhZGVyJztcbmltcG9ydCB7XG4gIGxvZ2luLFxuICByZXF1ZXN0VGVhbXNEZW1vLFxuICBzaWduVXAsXG4gIHNpZ25VcFRleHRCdXR0b24sXG59IGZyb20gJy4uLy4uL0dsb2JhbEhlYWRlci9HbG9iYWxIZWFkZXJJdGVtcyc7XG5pbXBvcnQgeyBBcHBIZWFkZXJTdWJOYXZNb2JpbGUgfSBmcm9tICcuLi9BcHBIZWFkZXJTdWJNZW51TW9iaWxlJztcbmltcG9ydCB7IE1vYmlsZVVsV3JhcHBlciB9IGZyb20gJy4uL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUvZWxlbWVudHMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyU3ViTWVudVJvdyB9IGZyb20gJy4uL0FwcEhlYWRlclN1Yk1lbnVUYXJnZXQnO1xuXG5jb25zdCBpc0J1c2luZXNzUGFnZUV4cGVyaW1lbnQgPSAoXG4gIGlzQmxwSGVyb0V4cGVyaW1lbnRWYXJpYW50OiBib29sZWFuXG4pOiBib29sZWFuID0+IHtcbiAgaWYgKHR5cGVvZiB3aW5kb3cgPT09ICd1bmRlZmluZWQnKSByZXR1cm4gZmFsc2U7XG4gIHJldHVybiAoXG4gICAgKHdpbmRvdy5sb2NhdGlvbi5wYXRobmFtZSA9PT0gJy9idXNpbmVzcycgfHxcbiAgICAgIHdpbmRvdy5sb2NhdGlvbi5wYXRobmFtZSA9PT0gJy9idXNpbmVzcy9wcmljaW5nJykgJiZcbiAgICBpc0JscEhlcm9FeHBlcmltZW50VmFyaWFudFxuICApO1xufTtcblxuY29uc3QgQmFja2dyb3VuZFdyYXBwZXIgPSBzdHlsZWQoQm94KTx7XG4gIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjogYm9vbGVhbjtcbn0+KFxuICBjc3Moe30pLFxuICBzdGF0ZXMoe1xuICAgIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjoge1xuICAgICAgYmFja2dyb3VuZDogdGhlbWUuY29sb3JzLndoaXRlLFxuICAgICAgYm9yZGVyOiAxLFxuICAgICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgICAgcGFkZGluZzogJzE2cHgnLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJNYWluTWVudU1vYmlsZVByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtczogQXBwSGVhZGVySXRlbVtdO1xuICBnZXRJdGVtVHlwZTogKHR5cGU6IHN0cmluZyB8IHVuZGVmaW5lZCkgPT4gdm9pZDtcbiAgaXNBbm9uOiBib29sZWFuO1xuICBoYW5kbGVDbG9zZU1haW5NZW51OiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlck1haW5NZW51TW9iaWxlOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGVQcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbXMsIGdldEl0ZW1UeXBlLCBpc0Fub24sIGhhbmRsZUNsb3NlTWFpbk1lbnUgfSkgPT4ge1xuICBjb25zdCBbc3ViTWVudUl0ZW0sIHNldFN1Yk1lbnVJdGVtXSA9IHVzZVN0YXRlPEFwcEhlYWRlckRyb3Bkb3duSXRlbT4oKTtcbiAgY29uc3QgaXNCbHBIZXJvRXhwZXJpbWVudFZhcmlhbnQgPSB1c2VDb250ZXh0KEJscEhlcm9FeHBlcmltZW50Q29udGV4dCk7XG4gIGNvbnN0IGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbiA9IHVzZUNvbnRleHQoR2xvYmFsTmF2UmVkZXNpZ25Db250ZXh0KTtcblxuICBjb25zdCBvcGVuU3ViTWVudSA9IChcbiAgICBldmVudDogUmVhY3QuTW91c2VFdmVudCxcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW1cbiAgKSA9PiB7XG4gICAgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICBzZXRTdWJNZW51SXRlbShpdGVtKTtcbiAgICBnZXRJdGVtVHlwZShpdGVtLnR5cGUpO1xuICB9O1xuXG4gIGNvbnN0IGNsb3NlU3ViTWVudSA9ICgpID0+IHtcbiAgICBzZXRTdWJNZW51SXRlbSh1bmRlZmluZWQpO1xuICAgIGdldEl0ZW1UeXBlKHVuZGVmaW5lZCk7XG4gIH07XG5cbiAgY29uc3QgbWFwSXRlbVRvRWxlbWVudCA9IChcbiAgICBpdGVtOiBBcHBIZWFkZXJJdGVtLFxuICAgIGFjdGlvbjogQXBwSGVhZGVyQ2xpY2tIYW5kbGVyXG4gICkgPT4ge1xuICAgIHN3aXRjaCAoaXRlbS50eXBlKSB7XG4gICAgICBjYXNlICdsaW5rJzpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8QXBwSGVhZGVyTGluayBhY3Rpb249e2FjdGlvbn0gaXRlbT17aXRlbX0ga2V5PXtpdGVtLmlkfSBtb2JpbGUgLz5cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2Ryb3Bkb3duJzpcbiAgICAgIGNhc2UgJ3Byb2ZpbGUtZHJvcGRvd24nOlxuICAgICAgY2FzZSAnY2F0YWxvZy1kcm9wZG93bic6XG4gICAgICBjYXNlICdyZXNvdXJjZXMtZHJvcGRvd24nOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxBcHBIZWFkZXJTdWJNZW51Um93XG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgb3BlblN1Yk1lbnU9e29wZW5TdWJNZW51fVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICBjYXNlICdyZXNvdXJjZXMtc2ltcGxlLWRyb3Bkb3duJzpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgYXM9XCJoMlwiIGZvbnRTaXplPXsyMn0gbXQ9ezE2fSBtYj17MTZ9PlxuICAgICAgICAgICAgICB7aXRlbS50ZXh0fVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPEFwcEhlYWRlckxpbmtTZWN0aW9ucyBhY3Rpb249e2FjdGlvbn0gaXRlbT17aXRlbX0gbW9iaWxlIC8+XG4gICAgICAgICAgPC8+XG4gICAgICAgICk7XG4gICAgICBjYXNlICdmaWxsLWJ1dHRvbic6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpdGVtLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICBocmVmPXtpdGVtLmhyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgaXRlbSl9XG4gICAgICAgICAgICBtdD17MjR9XG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgICAgICA8L0ZpbGxCdXR0b24+XG4gICAgICAgICk7XG4gICAgICBjYXNlICd0ZXh0LWJ1dHRvbic6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPFRleHRCdXR0b25cbiAgICAgICAgICAgIG10PXsxNn1cbiAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpdGVtLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICBocmVmPXtpdGVtLmhyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgaXRlbSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgICAgICA8L1RleHRCdXR0b24+XG4gICAgICAgICk7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gPD48Lz47XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiBzdWJNZW51SXRlbSA/IChcbiAgICA8QXBwSGVhZGVyU3ViTmF2TW9iaWxlXG4gICAgICBoYW5kbGVDbG9zZVN1Yk1lbnU9e2Nsb3NlU3ViTWVudX1cbiAgICAgIGFjdGlvbj17YWN0aW9ufVxuICAgICAgaXRlbT17c3ViTWVudUl0ZW19XG4gICAgICBoYW5kbGVDbG9zZU1haW5NZW51PXtoYW5kbGVDbG9zZU1haW5NZW51fVxuICAgIC8+XG4gICkgOiAoXG4gICAgPENvbnRlbnRDb250YWluZXJcbiAgICAgIHJvbGU9XCJuYXZpZ2F0aW9uXCJcbiAgICAgIGFyaWEtbGFiZWw9XCJzaXRlIG5hdmlnYXRpb25cIlxuICAgICAgdGFiSW5kZXg9ey0xfVxuICAgID5cbiAgICAgIDxCYWNrZ3JvdW5kV3JhcHBlciBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ249e2Rpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbn0+XG4gICAgICAgIDxNb2JpbGVVbFdyYXBwZXIgYXM9XCJ1bFwiPlxuICAgICAgICAgIHtpdGVtcy5tYXAoKGl0ZW0pID0+IG1hcEl0ZW1Ub0VsZW1lbnQoaXRlbSwgYWN0aW9uKSl9XG4gICAgICAgICAge2lzQW5vbiAmJiAoXG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6ICdiYXNlbGluZScsXG4gICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICAgICAgICAgICAgICAgIHBhZGRpbmdUb3A6ICcxNnB4JyxcbiAgICAgICAgICAgICAgICBib3JkZXJUb3A6ICcxcHggc29saWQgdmFyKC0tYm9yZGVyLXRlcnRpYXJ5KScsXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtpc0J1c2luZXNzUGFnZUV4cGVyaW1lbnQoaXNCbHBIZXJvRXhwZXJpbWVudFZhcmlhbnQpID8gKFxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17c2lnblVwVGV4dEJ1dHRvbi5kYXRhVGVzdElkfVxuICAgICAgICAgICAgICAgICAgICBocmVmPXtzaWduVXBUZXh0QnV0dG9uLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT5cbiAgICAgICAgICAgICAgICAgICAgICBhY3Rpb24oZXZlbnQsIHNpZ25VcFRleHRCdXR0b24pXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtzaWduVXBUZXh0QnV0dG9uLmlkfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7c2lnblVwVGV4dEJ1dHRvbi50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9UZXh0QnV0dG9uPlxuXG4gICAgICAgICAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17cmVxdWVzdFRlYW1zRGVtby5kYXRhVGVzdElkfVxuICAgICAgICAgICAgICAgICAgICBocmVmPXtyZXF1ZXN0VGVhbXNEZW1vLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT5cbiAgICAgICAgICAgICAgICAgICAgICBhY3Rpb24oZXZlbnQsIHJlcXVlc3RUZWFtc0RlbW8pXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtyZXF1ZXN0VGVhbXNEZW1vLmlkfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7cmVxdWVzdFRlYW1zRGVtby50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9GaWxsQnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17c2lnblVwLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICAgICAgICAgIGhyZWY9e3NpZ25VcC5ocmVmfVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgc2lnblVwKX1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtzaWduVXAuaWR9XG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHtzaWduVXAudGV4dH1cbiAgICAgICAgICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cblxuICAgICAgICAgICAgICAgICAgPFRleHRCdXR0b25cbiAgICAgICAgICAgICAgICAgICAga2V5PXtsb2dpbi5pZH1cbiAgICAgICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9e2xvZ2luLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICAgICAgICAgIGhyZWY9e2xvZ2luLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gYWN0aW9uKGV2ZW50LCBsb2dpbil9XG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHtsb2dpbi50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9Nb2JpbGVVbFdyYXBwZXI+XG4gICAgICA8L0JhY2tncm91bmRXcmFwcGVyPlxuICAgIDwvQ29udGVudENvbnRhaW5lcj5cbiAgKTtcbn07XG4iXX0= */");
 export const AppHeaderMainMenuMobile = ({
   action,
   items,
@@ -22,6 +36,7 @@ export const AppHeaderMainMenuMobile = ({
 }) => {
   const [subMenuItem, setSubMenuItem] = useState();
   const isBlpHeroExperimentVariant = useContext(BlpHeroExperimentContext);
+  const displayGlobalNavRedesign = useContext(GlobalNavRedesignContext);
   const openSubMenu = (event, item) => {
     action(event, item);
     setSubMenuItem(item);
@@ -90,42 +105,45 @@ export const AppHeaderMainMenuMobile = ({
     role: "navigation",
     "aria-label": "site navigation",
     tabIndex: -1,
-    children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
-      as: "ul",
-      children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsx("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'baseline',
-          justifyContent: 'center',
-          paddingTop: '16px',
-          borderTop: '1px solid var(--border-tertiary)'
-        },
-        children: isBusinessPageExperiment(isBlpHeroExperimentVariant) ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TextButton, {
-            "data-testid": signUpTextButton.dataTestId,
-            href: signUpTextButton.href,
-            onClick: event => action(event, signUpTextButton),
-            children: signUpTextButton.text
-          }, signUpTextButton.id), /*#__PURE__*/_jsx(FillButton, {
-            "data-testid": requestTeamsDemo.dataTestId,
-            href: requestTeamsDemo.href,
-            onClick: event => action(event, requestTeamsDemo),
-            children: requestTeamsDemo.text
-          }, requestTeamsDemo.id)]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(FillButton, {
-            "data-testid": signUp.dataTestId,
-            href: signUp.href,
-            onClick: event => action(event, signUp),
-            children: signUp.text
-          }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
-            "data-testid": login.dataTestId,
-            href: login.href,
-            onClick: event => action(event, login),
-            children: login.text
-          }, login.id)]
-        })
-      })]
+    children: /*#__PURE__*/_jsx(BackgroundWrapper, {
+      displayGlobalNavRedesign: displayGlobalNavRedesign,
+      children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
+        as: "ul",
+        children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsx("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'center',
+            paddingTop: '16px',
+            borderTop: '1px solid var(--border-tertiary)'
+          },
+          children: isBusinessPageExperiment(isBlpHeroExperimentVariant) ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TextButton, {
+              "data-testid": signUpTextButton.dataTestId,
+              href: signUpTextButton.href,
+              onClick: event => action(event, signUpTextButton),
+              children: signUpTextButton.text
+            }, signUpTextButton.id), /*#__PURE__*/_jsx(FillButton, {
+              "data-testid": requestTeamsDemo.dataTestId,
+              href: requestTeamsDemo.href,
+              onClick: event => action(event, requestTeamsDemo),
+              children: requestTeamsDemo.text
+            }, requestTeamsDemo.id)]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(FillButton, {
+              "data-testid": signUp.dataTestId,
+              href: signUp.href,
+              onClick: event => action(event, signUp),
+              children: signUp.text
+            }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
+              "data-testid": login.dataTestId,
+              href: login.href,
+              onClick: event => action(event, login),
+              children: login.text
+            }, login.id)]
+          })
+        })]
+      })
     })
   });
 };