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

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["ColorMode","styled","useCallback","useEffect","useRef","useState","React","DropdownPositions","useHeaderDisplayContext","AnimatedMegaMenuDropdown","AppHeaderDropdownProvider","AppHeaderDropdownNavButton","useAppHeaderContext","AppHeaderSection","RESOURCES_NAV_SECTIONS","StyledAnimatedMegaMenuDropdown","shouldForwardProp","prop","narrowResourceDropdownPosition","wideResourceDropdownPosition","AppHeaderResourcesDropdown","action","item","text","containerRef","buttonRef","dropdownRef","isOpen","setIsOpen","lastOpenedDropdown","setLastOpenedDropdown","headerType","resourceDropdown","narrow","wide","animationFinished","current","scrollTop","toggleIsOpen","prev","handleOnClick","event","handleClose","focus","handleClickOutside","container","button","contains","target","document","addEventListener","removeEventListener","tabIndex","ref","data-testid","onAnimationComplete","mode","navSections","type"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.tsx"],"sourcesContent":["import { ColorMode } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  DropdownPositions,\n  useHeaderDisplayContext,\n} from '../../../GlobalHeader/context';\nimport {\n  AnimatedMegaMenuDropdown,\n  AppHeaderAction,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownProvider } from '../AppHeaderDropdownProvider';\nimport { AppHeaderDropdownNavButton } from '../AppHeaderNavButton';\nimport { useAppHeaderContext } from '../AppHeaderProvider';\nimport { AppHeaderSection } from '../AppHeaderSection';\nimport { RESOURCES_NAV_SECTIONS } from './consts';\n\nexport type AppHeaderResourceDropdownProps = AppHeaderAction & {\n  item: AppHeaderResourcesDropdownItem;\n};\n\nconst StyledAnimatedMegaMenuDropdown = styled(AnimatedMegaMenuDropdown, {\n  // prevent the props from being passed to the DOM element, which would cause a React warning.\n  shouldForwardProp: (prop) =>\n    prop !== 'narrowResourceDropdownPosition' &&\n    prop !== 'wideResourceDropdownPosition',\n})<{\n  narrowResourceDropdownPosition: string;\n  wideResourceDropdownPosition: string;\n}>`\n  top: 3.5rem;\n  left: ${({ narrowResourceDropdownPosition }) => {\n    return narrowResourceDropdownPosition;\n  }};\n\n  @media (min-width: 1261px) {\n    left: ${({ wideResourceDropdownPosition }) => {\n      return wideResourceDropdownPosition;\n    }};\n  }\n`;\n\nexport const AppHeaderResourcesDropdown: React.FC<\n  AppHeaderResourceDropdownProps\n> = ({ action, item }) => {\n  const { text } = item;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();\n  const { headerType } = useHeaderDisplayContext();\n  const { resourceDropdown } = DropdownPositions[headerType];\n  const narrowResourceDropdownPosition = resourceDropdown.narrow;\n  const wideResourceDropdownPosition = resourceDropdown.wide;\n\n  const animationFinished = () => {\n    if (isOpen && dropdownRef.current) {\n      dropdownRef.current.scrollTop = 0;\n    }\n  };\n\n  const toggleIsOpen = () => setIsOpen((prev) => !prev);\n\n  const handleOnClick = (event: React.MouseEvent) => {\n    toggleIsOpen();\n    if (!isOpen) {\n      action(event, item);\n      if (setLastOpenedDropdown) {\n        setLastOpenedDropdown(text);\n      }\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef?.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (lastOpenedDropdown !== text && isOpen) {\n      setIsOpen(false);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastOpenedDropdown]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent | Event) {\n      const container = containerRef?.current;\n      const button = buttonRef?.current;\n      if (\n        isOpen &&\n        container &&\n        !container.contains(event.target as Node) &&\n        button &&\n        !button.contains(event.target as Node)\n      ) {\n        handleClose();\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('blur', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('blur', handleClickOutside);\n    };\n  }, [containerRef, handleClose, isOpen]);\n\n  return (\n    <AppHeaderDropdownProvider handleClose={handleClose}>\n      <AppHeaderDropdownNavButton\n        buttonRef={buttonRef}\n        handleOnClick={handleOnClick}\n        isOpen={isOpen}\n        text={text}\n      />\n      <StyledAnimatedMegaMenuDropdown\n        isOpen={isOpen}\n        narrowResourceDropdownPosition={narrowResourceDropdownPosition}\n        wideResourceDropdownPosition={wideResourceDropdownPosition}\n        tabIndex={-1} // prevent from interfering with AppHeader focus logic\n        ref={dropdownRef}\n        data-testid=\"resources-menu-dropdown\"\n        onAnimationComplete={animationFinished}\n      >\n        <ColorMode mode=\"light\">\n          <AppHeaderSection\n            isOpen={isOpen}\n            ref={containerRef}\n            navSections={RESOURCES_NAV_SECTIONS}\n            handleClose={() => setIsOpen(false)}\n            type=\"resources-dropdown\"\n          />\n        </ColorMode>\n      </StyledAnimatedMegaMenuDropdown>\n    </AppHeaderDropdownProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAMe,iCAAiCd,uBAAOQ,0BAA0B;CAEtEO,oBAAoBC,SAClBA,SAAS,oCACTA,SAAS;;;CACb,CAAA,CAAA,qBAKW,EAAEC,qCAAgC;AACzC,QAAOA;GACT,qCAGW,EAAEC,mCAA8B;AACvC,QAAOA;GACT,MAAA,kmNAAA;AAIJ,MAAaC,8BAER,EAAEC,QAAQC,WAAM;CACnB,MAAM,EAAEC,SAASD;CACjB,MAAME,eAAepB,OAA8B,KAAA;CACnD,MAAMqB,YAAYrB,OAA0B,KAAA;CAC5C,MAAMsB,cAActB,OAA8B,KAAA;CAClD,MAAM,CAACuB,QAAQC,aAAavB,SAAS,MAAA;CACrC,MAAM,EAAEwB,oBAAoBC,0BAA0BlB,qBAAAA;CACtD,MAAM,EAAEmB,eAAevB,yBAAAA;CACvB,MAAM,EAAEwB,qBAAqBzB,kBAAkBwB;CAC/C,MAAMb,iCAAiCc,iBAAiBC;CACxD,MAAMd,+BAA+Ba,iBAAiBE;CAEtD,MAAMC,0BAAoB;AACxB,MAAIR,UAAUD,YAAYU,QACxBV,aAAYU,QAAQC,YAAY;;CAIpC,MAAMC,qBAAqBV,WAAWW,SAAS,CAACA,KAAAA;CAEhD,MAAMC,iBAAiBC,UAAAA;AACrBH,gBAAAA;AACA,MAAI,CAACX,QAAQ;AACXN,UAAOoB,OAAOnB,KAAAA;AACd,OAAIQ,sBACFA,uBAAsBP,KAAAA;;;CAK5B,MAAMmB,cAAcxC,kBAAY;AAC9B0B,YAAU,MAAA;AACVH,aAAWW,SAASO,OAAAA;IACnB,EAAE,CAAA;AAELxC,iBAAU;AACR,MAAI0B,uBAAuBN,QAAQI,OACjCC,WAAU,MAAA;IAGX,CAACC,mBAAmB,CAAA;AAEvB1B,iBAAU;EACR,SAASyC,mBAAmBH,OAAyB;GACnD,MAAMI,YAAYrB,cAAcY;GAChC,MAAMU,SAASrB,WAAWW;AAC1B,OACET,UACAkB,aACA,CAACA,UAAUE,SAASN,MAAMO,OAAM,IAChCF,UACA,CAACA,OAAOC,SAASN,MAAMO,OAAM,CAE7BN,cAAAA;;AAIJO,WAASC,iBAAiB,aAAaN,mBAAAA;AACvCK,WAASC,iBAAiB,QAAQN,mBAAAA;AAClC,eAAO;AACLK,YAASE,oBAAoB,aAAaP,mBAAAA;AAC1CK,YAASE,oBAAoB,QAAQP,mBAAAA;;IAEtC;EAACpB;EAAckB;EAAaf;EAAO,CAAA;AAEtC,QACE,wBAAA,cAACjB,2BAAAA,EAAuCgC,eACtC,wBAAA,cAAC/B,4BAAAA;EACYc;EACIe;EACPb;EACFJ;KAER,wBAAA,cAACR,gCAAAA;EACSY;EACwBT;EACFC;EAC9BiC,UAAU;EACVC,KAAK3B;EACL4B,eAAY;EACZC,qBAAqBpB;IAErB,wBAAA,cAACnC,WAAAA,EAAUwD,MAAK,WACd,wBAAA,cAAC3C,kBAAAA;EACSc;EACR0B,KAAK7B;EACLiC,aAAa3C;EACb4B,mBAAmBd,UAAU,MAAA;EAC7B8B,MAAK"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.cjs

@@ -1,19 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
-let lodash_fp = require("lodash/fp");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx
-const AppHeaderSectionContext = /* @__PURE__ */ (0, react.createContext)({
-	activePanel: null,
-	setActivePanel: lodash_fp.noop,
-	tabIndex: 0,
-	isCoachingEnabled: void 0
-});
-const useAppHeaderSectionContext = () => {
-	return (0, react.useContext)(AppHeaderSectionContext);
-};
-
-//#endregion
-exports.AppHeaderSectionContext = AppHeaderSectionContext;
-exports.useAppHeaderSectionContext = useAppHeaderSectionContext;
-//# sourceMappingURL=AppHeaderSectionContext.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeaderSectionContext.cjs","names":["noop","createContext","useContext","AppHeaderSectionContext","activePanel","setActivePanel","tabIndex","isCoachingEnabled","undefined","useAppHeaderSectionContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n  isCoachingEnabled?: boolean;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n    isCoachingEnabled: undefined,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;;AAUA,MAAaG,0BACXF,yCAA2C;CACzCG,aAAa;CACbC,gBAAgBL;CAChBM,UAAU;CACVC,mBAAmBC;CACrB,CAAA;AAEF,MAAaC,mCAA6B;AACxC,8BAAkBN,wBAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.mjs

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react";
-import { noop } from "lodash/fp";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx
-const AppHeaderSectionContext = /* @__PURE__ */ createContext({
-	activePanel: null,
-	setActivePanel: noop,
-	tabIndex: 0,
-	isCoachingEnabled: void 0
-});
-const useAppHeaderSectionContext = () => {
-	return useContext(AppHeaderSectionContext);
-};
-
-//#endregion
-export { AppHeaderSectionContext, useAppHeaderSectionContext };
-//# sourceMappingURL=AppHeaderSectionContext.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeaderSectionContext.mjs","names":["noop","createContext","useContext","AppHeaderSectionContext","activePanel","setActivePanel","tabIndex","isCoachingEnabled","undefined","useAppHeaderSectionContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSectionContext.tsx"],"sourcesContent":["import { noop } from 'lodash/fp';\nimport { createContext, useContext } from 'react';\n\nexport interface AppHeaderSectionContextType {\n  activePanel: number | null;\n  setActivePanel: (panel: number | null) => void;\n  tabIndex: number;\n  isCoachingEnabled?: boolean;\n}\n\nexport const AppHeaderSectionContext =\n  createContext<AppHeaderSectionContextType>({\n    activePanel: null,\n    setActivePanel: noop,\n    tabIndex: 0,\n    isCoachingEnabled: undefined,\n  });\n\nexport const useAppHeaderSectionContext = () => {\n  return useContext(AppHeaderSectionContext);\n};\n"],"mappings":";;;;AAUA,MAAaG,0BACXF,8BAA2C;CACzCG,aAAa;CACbC,gBAAgBL;CAChBM,UAAU;CACVC,mBAAmBC;CACrB,CAAA;AAEF,MAAaC,mCAA6B;AACxC,QAAOP,WAAWC,wBAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.cjs

@@ -1,68 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_context = require('../../../GlobalHeader/context.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx
-const MobileBackButton = ({ handleClose, type }) => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const handleBackButtonClick = (event) => {
-		globalHeaderItemClick(event, {
-			id: "back",
-			text: "Back",
-			type
-		});
-		handleClose();
-	};
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { display: {
-		_: "none",
-		sm: "block"
-	} }, /* @__PURE__ */ react.default.createElement(require_elements.NavigationButton, {
-		isActive: false,
-		onClick: handleBackButtonClick
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, null, "Back")))), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		ml: 8,
-		gridColumn: "1",
-		gridRow: "1"
-	}, /* @__PURE__ */ react.default.createElement(require_elements.NavIconButton, {
-		onClick: handleBackButtonClick,
-		icon: _codecademy_gamut_icons.ArrowLeftIcon,
-		tip: "Back to main navigation",
-		tipProps: {
-			alignment: "right-center",
-			narrow: false,
-			placement: "floating"
-		},
-		"aria-label": "Back to main navigation"
-	})), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, { display: {
-		_: "flex",
-		xs: "none"
-	} }, /* @__PURE__ */ react.default.createElement(require_elements.SmallMenuButton, {
-		index: 0,
-		onClick: handleBackButtonClick
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, null, "Back")))));
-};
-
-//#endregion
-exports.MobileBackButton = MobileBackButton;
-//# sourceMappingURL=MobileBackButton.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileBackButton.cjs","names":["Box","FlexBox","Text","ArrowLeftIcon","React","useGlobalHeaderItemClick","NavIconButton","NavigationButton","SmallMenuButton","MobileBackButton","handleClose","type","globalHeaderItemClick","handleBackButtonClick","event","id","text","display","_","sm","isActive","onClick","gap","alignItems","height","width","size","xs","ml","gridColumn","gridRow","icon","tip","tipProps","alignment","narrow","placement","aria-label","index"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { NavIconButton, NavigationButton, SmallMenuButton } from './elements';\n\nexport type MobileBackButtonProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n};\n\nexport const MobileBackButton: React.FC<MobileBackButtonProps> = ({\n  handleClose,\n  type,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const handleBackButtonClick = (\n    event: React.MouseEvent<HTMLButtonElement>\n  ) => {\n    globalHeaderItemClick(event, {\n      id: 'back',\n      text: 'Back',\n      type,\n    });\n    handleClose();\n  };\n\n  return (\n    <>\n      <Box display={{ _: 'none', sm: 'block' }}>\n        <NavigationButton isActive={false} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </NavigationButton>\n      </Box>\n      <Box\n        display={{ _: 'none', xs: 'grid', sm: 'none' }}\n        ml={8}\n        gridColumn=\"1\"\n        gridRow=\"1\"\n      >\n        <NavIconButton\n          onClick={handleBackButtonClick}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n        />\n      </Box>\n      <Box display={{ _: 'flex', xs: 'none' }}>\n        <SmallMenuButton index={0} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </SmallMenuButton>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAaS,oBAAqD,EAChEC,aACAC,WACD;CACC,MAAM,EAAEC,0BAA0BP,0CAAAA;CAElC,MAAMQ,yBACJC,UAAAA;AAEAF,wBAAsBE,OAAO;GAC3BC,IAAI;GACJC,MAAM;GACNL;GACF,CAAA;AACAD,eAAAA;;AAGF,QACE,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACV,uBAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQC,IAAI;EAAQ,IACrC,8BAAA,cAACZ,mCAAAA;EAAiBa,UAAU;EAAOC,SAASR;IAC1C,8BAAA,cAACZ,2BAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,8BAAA,cAACvB,uBAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,8BAAA,cAACtB,uCAAAA,EAAcuB,MAAM,QAEvB,8BAAA,cAACxB,wBAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,EAIZ,8BAAA,cAACF,uBAAAA;EACCiB,SAAS;GAAEC,GAAG;GAAQS,IAAI;GAAQR,IAAI;GAAO;EAC7CS,IAAI;EACJC,YAAW;EACXC,SAAQ;IAER,8BAAA,cAACxB,gCAAAA;EACCe,SAASR;EACTkB,MAAM5B;EACN6B,KAAI;EACJC,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAC,cAAW;MAGf,8BAAA,cAACrC,uBAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQS,IAAI;EAAO,IACpC,8BAAA,cAACnB,kCAAAA;EAAgB8B,OAAO;EAAGjB,SAASR;IAClC,8BAAA,cAACZ,2BAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,8BAAA,cAACvB,uBAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,8BAAA,cAACtB,uCAAAA,EAAcuB,MAAM,QAEvB,8BAAA,cAACxB,wBAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.mjs

@@ -1,66 +0,0 @@
-import { NavIconButton, NavigationButton, SmallMenuButton } from "./elements.mjs";
-import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.mjs";
-import { Box, FlexBox, Text } from "@codecademy/gamut";
-import React from "react";
-import { ArrowLeftIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx
-const MobileBackButton = ({ handleClose, type }) => {
-	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
-	const handleBackButtonClick = (event) => {
-		globalHeaderItemClick(event, {
-			id: "back",
-			text: "Back",
-			type
-		});
-		handleClose();
-	};
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { display: {
-		_: "none",
-		sm: "block"
-	} }, /* @__PURE__ */ React.createElement(NavigationButton, {
-		isActive: false,
-		onClick: handleBackButtonClick
-	}, /* @__PURE__ */ React.createElement(FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, /* @__PURE__ */ React.createElement(Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ React.createElement(ArrowLeftIcon, { size: 24 })), /* @__PURE__ */ React.createElement(Text, null, "Back")))), /* @__PURE__ */ React.createElement(Box, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		ml: 8,
-		gridColumn: "1",
-		gridRow: "1"
-	}, /* @__PURE__ */ React.createElement(NavIconButton, {
-		onClick: handleBackButtonClick,
-		icon: ArrowLeftIcon,
-		tip: "Back to main navigation",
-		tipProps: {
-			alignment: "right-center",
-			narrow: false,
-			placement: "floating"
-		},
-		"aria-label": "Back to main navigation"
-	})), /* @__PURE__ */ React.createElement(Box, { display: {
-		_: "flex",
-		xs: "none"
-	} }, /* @__PURE__ */ React.createElement(SmallMenuButton, {
-		index: 0,
-		onClick: handleBackButtonClick
-	}, /* @__PURE__ */ React.createElement(FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, /* @__PURE__ */ React.createElement(Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ React.createElement(ArrowLeftIcon, { size: 24 })), /* @__PURE__ */ React.createElement(Text, null, "Back")))));
-};
-
-//#endregion
-export { MobileBackButton };
-//# sourceMappingURL=MobileBackButton.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileBackButton.mjs","names":["Box","FlexBox","Text","ArrowLeftIcon","React","useGlobalHeaderItemClick","NavIconButton","NavigationButton","SmallMenuButton","MobileBackButton","handleClose","type","globalHeaderItemClick","handleBackButtonClick","event","id","text","display","_","sm","isActive","onClick","gap","alignItems","height","width","size","xs","ml","gridColumn","gridRow","icon","tip","tipProps","alignment","narrow","placement","aria-label","index"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon } from '@codecademy/gamut-icons';\nimport React from 'react';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { NavIconButton, NavigationButton, SmallMenuButton } from './elements';\n\nexport type MobileBackButtonProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n};\n\nexport const MobileBackButton: React.FC<MobileBackButtonProps> = ({\n  handleClose,\n  type,\n}) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n\n  const handleBackButtonClick = (\n    event: React.MouseEvent<HTMLButtonElement>\n  ) => {\n    globalHeaderItemClick(event, {\n      id: 'back',\n      text: 'Back',\n      type,\n    });\n    handleClose();\n  };\n\n  return (\n    <>\n      <Box display={{ _: 'none', sm: 'block' }}>\n        <NavigationButton isActive={false} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </NavigationButton>\n      </Box>\n      <Box\n        display={{ _: 'none', xs: 'grid', sm: 'none' }}\n        ml={8}\n        gridColumn=\"1\"\n        gridRow=\"1\"\n      >\n        <NavIconButton\n          onClick={handleBackButtonClick}\n          icon={ArrowLeftIcon}\n          tip=\"Back to main navigation\"\n          tipProps={{\n            alignment: 'right-center',\n            narrow: false,\n            placement: 'floating',\n          }}\n          aria-label=\"Back to main navigation\"\n        />\n      </Box>\n      <Box display={{ _: 'flex', xs: 'none' }}>\n        <SmallMenuButton index={0} onClick={handleBackButtonClick}>\n          <FlexBox gap={8} alignItems=\"center\">\n            <Box height={24} width={24}>\n              <ArrowLeftIcon size={24} />\n            </Box>\n            <Text>Back</Text>\n          </FlexBox>\n        </SmallMenuButton>\n      </Box>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAYA,MAAaS,oBAAqD,EAChEC,aACAC,WACD;CACC,MAAM,EAAEC,0BAA0BP,0BAAAA;CAElC,MAAMQ,yBACJC,UAAAA;AAEAF,wBAAsBE,OAAO;GAC3BC,IAAI;GACJC,MAAM;GACNL;GACF,CAAA;AACAD,eAAAA;;AAGF,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACV,KAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQC,IAAI;EAAQ,IACrC,sBAAA,cAACZ,kBAAAA;EAAiBa,UAAU;EAAOC,SAASR;IAC1C,sBAAA,cAACZ,SAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,sBAAA,cAACvB,KAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,sBAAA,cAACtB,eAAAA,EAAcuB,MAAM,QAEvB,sBAAA,cAACxB,MAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,EAIZ,sBAAA,cAACF,KAAAA;EACCiB,SAAS;GAAEC,GAAG;GAAQS,IAAI;GAAQR,IAAI;GAAO;EAC7CS,IAAI;EACJC,YAAW;EACXC,SAAQ;IAER,sBAAA,cAACxB,eAAAA;EACCe,SAASR;EACTkB,MAAM5B;EACN6B,KAAI;EACJC,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAC,cAAW;MAGf,sBAAA,cAACrC,KAAAA,EAAIiB,SAAS;EAAEC,GAAG;EAAQS,IAAI;EAAO,IACpC,sBAAA,cAACnB,iBAAAA;EAAgB8B,OAAO;EAAGjB,SAASR;IAClC,sBAAA,cAACZ,SAAAA;EAAQqB,KAAK;EAAGC,YAAW;IAC1B,sBAAA,cAACvB,KAAAA;EAAIwB,QAAQ;EAAIC,OAAO;IACtB,sBAAA,cAACtB,eAAAA,EAAcuB,MAAM,QAEvB,sBAAA,cAACxB,MAAAA,MAAK,OAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.cjs

@@ -1,47 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
-const require_MobileBackButton = require('./MobileBackButton.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx
-const MobileNavMenu = ({ handleClose, type, navSections }) => {
-	const { activePanel, setActivePanel } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	const ActivePanel = navSections[activePanel ?? 0].panel;
-	return /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16
-	}, activePanel === null && /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(require_MobileBackButton.MobileBackButton, {
-		handleClose,
-		type
-	}), navSections.map(({ item }, index) => {
-		return /* @__PURE__ */ react.createElement(require_elements.SmallMenuButton, {
-			key: item.id,
-			index: index + 1,
-			onClick: () => setActivePanel(index)
-		}, /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
-			gap: 8,
-			alignItems: "center"
-		}, item.icon && /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
-			height: 24,
-			width: 24
-		}, /* @__PURE__ */ react.createElement(item.icon, { size: 24 })), /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, null, item.text)), /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, null, /* @__PURE__ */ react.createElement(_codecademy_gamut_icons.ArrowChevronRightIcon, null)));
-	})), activePanel !== null && ActivePanel && /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
-		background: _codecademy_gamut_styles.theme.colors.background,
-		borderRadius: "lg",
-		p: 16
-	}, /* @__PURE__ */ react.createElement(ActivePanel, null)));
-};
-
-//#endregion
-exports.MobileNavMenu = MobileNavMenu;
-//# sourceMappingURL=MobileNavMenu.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileNavMenu.cjs","names":["Box","FlexBox","Text","ArrowChevronRightIcon","theme","React","useAppHeaderSectionContext","SmallMenuButton","MobileBackButton","MobileNavMenu","handleClose","type","navSections","activePanel","setActivePanel","ActivePanel","panel","display","_","xs","flexDirection","gap","p","map","item","index","key","id","onClick","alignItems","icon","height","width","size","text","background","colors","borderRadius"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport * as React from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { SmallMenuButton } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\n\nexport type MobileNavMenuProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: React.ComponentType;\n  }[];\n};\n\nexport const MobileNavMenu: React.FC<MobileNavMenuProps> = ({\n  handleClose,\n  type,\n  navSections,\n}) => {\n  const { activePanel, setActivePanel } = useAppHeaderSectionContext();\n\n  const ActivePanel = navSections[activePanel ?? 0].panel;\n\n  return (\n    <FlexBox\n      display={{ _: 'flex', xs: 'none' }}\n      flexDirection=\"column\"\n      gap={8}\n      p={16}\n    >\n      {activePanel === null && (\n        <>\n          <MobileBackButton handleClose={handleClose} type={type} />\n          {navSections.map(({ item }, index) => {\n            return (\n              <SmallMenuButton\n                key={item.id}\n                index={index + 1}\n                onClick={() => setActivePanel(index)}\n              >\n                <FlexBox gap={8} alignItems=\"center\">\n                  {item.icon && (\n                    <Box height={24} width={24}>\n                      <item.icon size={24} />\n                    </Box>\n                  )}\n                  <Text>{item.text}</Text>\n                </FlexBox>\n                <FlexBox>\n                  <ArrowChevronRightIcon />\n                </FlexBox>\n              </SmallMenuButton>\n            );\n          })}\n        </>\n      )}\n\n      {activePanel !== null && ActivePanel && (\n        <Box background={theme.colors.background} borderRadius=\"lg\" p={16}>\n          <ActivePanel />\n        </Box>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAaS,iBAA+C,EAC1DC,aACAC,MACAC,kBACD;CACC,MAAM,EAAEC,aAAaC,mBAAmBR,4DAAAA;CAExC,MAAMS,cAAcH,YAAYC,eAAe,GAAGG;AAElD,QACE,sBAAA,cAACf,2BAAAA;EACCgB,SAAS;GAAEC,GAAG;GAAQC,IAAI;GAAO;EACjCC,eAAc;EACdC,KAAK;EACLC,GAAG;IAEFT,gBAAgB,QACf,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACL,2CAAAA;EAA8BE;EAAmBC;KACjDC,YAAYW,KAAK,EAAEC,QAAQC,UAAAA;AAC1B,SACE,sBAAA,cAAClB,kCAAAA;GACCmB,KAAKF,KAAKG;GACVF,OAAOA,QAAQ;GACfG,eAAed,eAAeW,MAAAA;KAE9B,sBAAA,cAACxB,2BAAAA;GAAQoB,KAAK;GAAGQ,YAAW;KACzBL,KAAKM,QACJ,sBAAA,cAAC9B,uBAAAA;GAAI+B,QAAQ;GAAIC,OAAO;KACtB,sBAAA,cAACR,KAAKM,MAAI,EAACG,MAAM,QAGrB,sBAAA,cAAC/B,wBAAAA,MAAMsB,KAAKU,KAAI,CAAA,EAElB,sBAAA,cAACjC,2BAAAA,MACC,sBAAA,cAACE,+CAAAA,KAAAA,CAAAA,CAAAA;GAIT,CAAA,EAIHU,gBAAgB,QAAQE,eACvB,sBAAA,cAACf,uBAAAA;EAAImC,YAAY/B,+BAAMgC,OAAOD;EAAYE,cAAa;EAAKf,GAAG;IAC7D,sBAAA,cAACP,aAAAA,KAAAA,CAAAA,CAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.mjs

@@ -1,45 +0,0 @@
-import { SmallMenuButton } from "./elements.mjs";
-import { useAppHeaderSectionContext } from "./AppHeaderSectionContext.mjs";
-import { MobileBackButton } from "./MobileBackButton.mjs";
-import { Box, FlexBox, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import * as React$1 from "react";
-import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx
-const MobileNavMenu = ({ handleClose, type, navSections }) => {
-	const { activePanel, setActivePanel } = useAppHeaderSectionContext();
-	const ActivePanel = navSections[activePanel ?? 0].panel;
-	return /* @__PURE__ */ React$1.createElement(FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16
-	}, activePanel === null && /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(MobileBackButton, {
-		handleClose,
-		type
-	}), navSections.map(({ item }, index) => {
-		return /* @__PURE__ */ React$1.createElement(SmallMenuButton, {
-			key: item.id,
-			index: index + 1,
-			onClick: () => setActivePanel(index)
-		}, /* @__PURE__ */ React$1.createElement(FlexBox, {
-			gap: 8,
-			alignItems: "center"
-		}, item.icon && /* @__PURE__ */ React$1.createElement(Box, {
-			height: 24,
-			width: 24
-		}, /* @__PURE__ */ React$1.createElement(item.icon, { size: 24 })), /* @__PURE__ */ React$1.createElement(Text, null, item.text)), /* @__PURE__ */ React$1.createElement(FlexBox, null, /* @__PURE__ */ React$1.createElement(ArrowChevronRightIcon, null)));
-	})), activePanel !== null && ActivePanel && /* @__PURE__ */ React$1.createElement(Box, {
-		background: theme.colors.background,
-		borderRadius: "lg",
-		p: 16
-	}, /* @__PURE__ */ React$1.createElement(ActivePanel, null)));
-};
-
-//#endregion
-export { MobileNavMenu };
-//# sourceMappingURL=MobileNavMenu.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileNavMenu.mjs","names":["Box","FlexBox","Text","ArrowChevronRightIcon","theme","React","useAppHeaderSectionContext","SmallMenuButton","MobileBackButton","MobileNavMenu","handleClose","type","navSections","activePanel","setActivePanel","ActivePanel","panel","display","_","xs","flexDirection","gap","p","map","item","index","key","id","onClick","alignItems","icon","height","width","size","text","background","colors","borderRadius"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport { theme } from '@codecademy/gamut-styles';\nimport * as React from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\nimport { SmallMenuButton } from './elements';\nimport { MobileBackButton } from './MobileBackButton';\n\nexport type MobileNavMenuProps = {\n  handleClose: () => void;\n  type: 'catalog-dropdown' | 'resources-dropdown';\n  navSections: {\n    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n    panel: React.ComponentType;\n  }[];\n};\n\nexport const MobileNavMenu: React.FC<MobileNavMenuProps> = ({\n  handleClose,\n  type,\n  navSections,\n}) => {\n  const { activePanel, setActivePanel } = useAppHeaderSectionContext();\n\n  const ActivePanel = navSections[activePanel ?? 0].panel;\n\n  return (\n    <FlexBox\n      display={{ _: 'flex', xs: 'none' }}\n      flexDirection=\"column\"\n      gap={8}\n      p={16}\n    >\n      {activePanel === null && (\n        <>\n          <MobileBackButton handleClose={handleClose} type={type} />\n          {navSections.map(({ item }, index) => {\n            return (\n              <SmallMenuButton\n                key={item.id}\n                index={index + 1}\n                onClick={() => setActivePanel(index)}\n              >\n                <FlexBox gap={8} alignItems=\"center\">\n                  {item.icon && (\n                    <Box height={24} width={24}>\n                      <item.icon size={24} />\n                    </Box>\n                  )}\n                  <Text>{item.text}</Text>\n                </FlexBox>\n                <FlexBox>\n                  <ArrowChevronRightIcon />\n                </FlexBox>\n              </SmallMenuButton>\n            );\n          })}\n        </>\n      )}\n\n      {activePanel !== null && ActivePanel && (\n        <Box background={theme.colors.background} borderRadius=\"lg\" p={16}>\n          <ActivePanel />\n        </Box>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;;AAsBA,MAAaS,iBAA+C,EAC1DC,aACAC,MACAC,kBACD;CACC,MAAM,EAAEC,aAAaC,mBAAmBR,4BAAAA;CAExC,MAAMS,cAAcH,YAAYC,eAAe,GAAGG;AAElD,QACE,wBAAA,cAACf,SAAAA;EACCgB,SAAS;GAAEC,GAAG;GAAQC,IAAI;GAAO;EACjCC,eAAc;EACdC,KAAK;EACLC,GAAG;IAEFT,gBAAgB,QACf,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAACL,kBAAAA;EAA8BE;EAAmBC;KACjDC,YAAYW,KAAK,EAAEC,QAAQC,UAAAA;AAC1B,SACE,wBAAA,cAAClB,iBAAAA;GACCmB,KAAKF,KAAKG;GACVF,OAAOA,QAAQ;GACfG,eAAed,eAAeW,MAAAA;KAE9B,wBAAA,cAACxB,SAAAA;GAAQoB,KAAK;GAAGQ,YAAW;KACzBL,KAAKM,QACJ,wBAAA,cAAC9B,KAAAA;GAAI+B,QAAQ;GAAIC,OAAO;KACtB,wBAAA,cAACR,KAAKM,MAAI,EAACG,MAAM,QAGrB,wBAAA,cAAC/B,MAAAA,MAAMsB,KAAKU,KAAI,CAAA,EAElB,wBAAA,cAACjC,SAAAA,MACC,wBAAA,cAACE,uBAAAA,KAAAA,CAAAA,CAAAA;GAIT,CAAA,EAIHU,gBAAgB,QAAQE,eACvB,wBAAA,cAACf,KAAAA;EAAImC,YAAY/B,MAAMgC,OAAOD;EAAYE,cAAa;EAAKf,GAAG;IAC7D,wBAAA,cAACP,aAAAA,KAAAA,CAAAA,CAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.cjs

@@ -1,92 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('./elements.cjs');
-const require_index = require('../AppHeaderDropdownProvider/index.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
-const NavTabPanel = ({ children, isActiveTab, index, id }) => {
-	return /* @__PURE__ */ react.default.createElement(require_elements.StyledNavTabPanel, {
-		isFirst: index === 0,
-		role: "tabpanel",
-		id: `${id}-panel`,
-		"aria-labelledby": `${id}-tab`,
-		display: isActiveTab ? "block" : "none",
-		gridColumn: "2 / span 12",
-		gridRow: "1 / span 8",
-		bg: "background",
-		px: 32,
-		pt: 16,
-		pb: 24
-	}, children);
-};
-const NavTabList = /* @__PURE__ */ react.default.forwardRef(({ children, type }, ref) => {
-	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
-		role: "tablist",
-		"aria-label": `${type.replace("-dropdown", "")} navigation`,
-		"aria-orientation": "vertical",
-		flexDirection: "column",
-		gap: 8,
-		ref
-	}, children);
-});
-const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
-	const sharedButtonProps = {
-		role: "tab",
-		"aria-selected": isActive,
-		"aria-controls": `${item.id}-panel`,
-		onClick: (event) => onSelect(item.id, event, item),
-		onKeyDown,
-		tabIndex: isActive ? 0 : -1,
-		isActive,
-		id: `${item.id}-tab`
-	};
-	const buttonRef = (0, react.useRef)(null);
-	const { setFirstItemRef } = (0, react.useContext)(require_index.AppHeaderDropdownContext);
-	(0, react.useEffect)(() => {
-		if (index === 0 && buttonRef.current) setFirstItemRef?.(buttonRef.current);
-	}, [index, setFirstItemRef]);
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(require_elements.NavigationButton, {
-		ref: buttonRef,
-		...sharedButtonProps
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, item.icon && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ react.default.createElement(item.icon, { size: 24 })), /* @__PURE__ */ react.default.createElement(require_elements.OverflowText, { maxWidth: {
-		_: "110px",
-		md: "none"
-	} }, item.text)), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, isActive && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
-		display: {
-			_: "none",
-			sm: "block"
-		},
-		mt: 4
-	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut_icons.ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })))), item.icon && /* @__PURE__ */ react.default.createElement(require_elements.NavIconButtonContainer, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		...sharedButtonProps
-	}, /* @__PURE__ */ react.default.createElement(require_elements.NavIconButton, {
-		icon: item.icon,
-		tip: item.text,
-		tipProps: {
-			alignment: "right-center",
-			narrow: false,
-			placement: "floating"
-		},
-		"aria-label": item.text
-	})));
-};
-
-//#endregion
-exports.NavTab = NavTab;
-exports.NavTabList = NavTabList;
-exports.NavTabPanel = NavTabPanel;
-//# sourceMappingURL=NavTabs.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavTabs.cjs","names":["Box","FlexBox","ArrowChevronRightIcon","React","useContext","useEffect","useRef","AppHeaderDropdownContext","NavIconButton","NavIconButtonContainer","NavigationButton","OverflowText","StyledNavTabPanel","NavTabPanel","children","isActiveTab","index","id","isFirst","role","aria-labelledby","display","gridColumn","gridRow","bg","px","pt","pb","NavTabList","forwardRef","type","ref","aria-label","replace","aria-orientation","flexDirection","gap","NavTab","item","onSelect","isActive","onKeyDown","sharedButtonProps","onClick","event","tabIndex","buttonRef","setFirstItemRef","current","alignItems","icon","height","width","size","maxWidth","_","md","text","sm","mt","data-testid","xs","tip","tipProps","alignment","narrow","placement"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport React, { PropsWithChildren, useContext, useEffect, useRef } from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport {\n  NavIconButton,\n  NavIconButtonContainer,\n  NavigationButton,\n  OverflowText,\n  StyledNavTabPanel,\n} from './elements';\n\ninterface NavTabPanelProps extends PropsWithChildren {\n  isActiveTab: boolean;\n  index: number;\n  id: string;\n}\n\n// Tab content, only one should be visible at a time\nconst NavTabPanel = ({\n  children,\n  isActiveTab,\n  index,\n  id,\n}: NavTabPanelProps) => {\n  return (\n    <StyledNavTabPanel\n      isFirst={index === 0}\n      role=\"tabpanel\"\n      id={`${id}-panel`}\n      aria-labelledby={`${id}-tab`}\n      display={isActiveTab ? 'block' : 'none'}\n      gridColumn=\"2 / span 12\"\n      gridRow=\"1 / span 8\"\n      bg=\"background\"\n      px={32}\n      pt={16}\n      pb={24}\n    >\n      {children}\n    </StyledNavTabPanel>\n  );\n};\n\n// Holds all of the tab buttons\nconst NavTabList = React.forwardRef<\n  HTMLDivElement,\n  {\n    children: React.ReactNode;\n    type: string;\n  }\n>(({ children, type }, ref) => {\n  return (\n    <FlexBox\n      role=\"tablist\"\n      aria-label={`${type.replace('-dropdown', '')} navigation`}\n      aria-orientation=\"vertical\"\n      flexDirection=\"column\"\n      gap={8}\n      ref={ref}\n    >\n      {children}\n    </FlexBox>\n  );\n});\n\n// Tab button, lets you switch between tabs\n// at larger breakpoints we use a normal button, at smaller\n// breakpoints we use an IconButton.\nconst NavTab = ({\n  item,\n  onSelect,\n  isActive,\n  onKeyDown,\n  index,\n}: {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  onSelect: (\n    id: string,\n    event?: React.MouseEvent,\n    item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n  ) => void;\n  isActive: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  index: number;\n}) => {\n  const sharedButtonProps = {\n    role: 'tab',\n    'aria-selected': isActive,\n    'aria-controls': `${item.id}-panel`,\n    onClick: (event: React.MouseEvent) => onSelect(item.id, event, item),\n    onKeyDown,\n    tabIndex: isActive ? 0 : -1,\n    isActive,\n    id: `${item.id}-tab`,\n  } as const;\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { setFirstItemRef } = useContext(AppHeaderDropdownContext);\n\n  useEffect(() => {\n    if (index === 0 && buttonRef.current) {\n      setFirstItemRef?.(buttonRef.current);\n    }\n  }, [index, setFirstItemRef]);\n\n  return (\n    <>\n      <NavigationButton ref={buttonRef} {...sharedButtonProps}>\n        <FlexBox gap={8} alignItems=\"center\">\n          {item.icon && (\n            <Box height={24} width={24}>\n              <item.icon size={24} />\n            </Box>\n          )}\n          <OverflowText maxWidth={{ _: '110px', md: 'none' }}>\n            {item.text}\n          </OverflowText>\n        </FlexBox>\n\n        <FlexBox alignItems=\"center\">\n          {isActive && (\n            <Box display={{ _: 'none', sm: 'block' }} mt={4}>\n              <ArrowChevronRightIcon data-testid=\"chevron-right-icon\" />\n            </Box>\n          )}\n        </FlexBox>\n      </NavigationButton>\n      {item.icon && (\n        <NavIconButtonContainer\n          display={{ _: 'none', xs: 'grid', sm: 'none' }}\n          {...sharedButtonProps}\n        >\n          <NavIconButton\n            icon={item.icon}\n            tip={item.text}\n            tipProps={{\n              alignment: 'right-center',\n              narrow: false,\n              placement: 'floating',\n            }}\n            aria-label={item.text}\n          />\n        </NavIconButtonContainer>\n      )}\n    </>\n  );\n};\n\nexport { NavTabPanel, NavTabList, NavTab };\n"],"mappings":";;;;;;;;;AAwBA,MAAMa,eAAe,EACnBC,UACAC,aACAC,OACAC,SACiB;AACjB,QACE,8BAAA,cAACL,oCAAAA;EACCM,SAASF,UAAU;EACnBG,MAAK;EACLF,IAAI,GAAGA,GAAG;EACVG,mBAAiB,GAAGH,GAAG;EACvBI,SAASN,cAAc,UAAU;EACjCO,YAAW;EACXC,SAAQ;EACRC,IAAG;EACHC,IAAI;EACJC,IAAI;EACJC,IAAI;IAEHb,SAAAA;;AAMP,MAAMc,aAAazB,8BAAM0B,YAMtB,EAAEf,UAAUgB,QAAQC,QAAAA;AACrB,QACE,8BAAA,cAAC9B,2BAAAA;EACCkB,MAAK;EACLa,cAAY,GAAGF,KAAKG,QAAQ,aAAa,GAAA,CAAI;EAC7CC,oBAAiB;EACjBC,eAAc;EACdC,KAAK;EACAL;IAEJjB,SAAAA;EAGP;AAKA,MAAMuB,UAAU,EACdC,MACAC,UACAC,UACAC,WACAzB,YAWD;CACC,MAAM0B,oBAAoB;EACxBvB,MAAM;EACN,iBAAiBqB;EACjB,iBAAiB,GAAGF,KAAKrB,GAAG;EAC5B0B,UAAUC,UAA4BL,SAASD,KAAKrB,IAAI2B,OAAON,KAAAA;EAC/DG;EACAI,UAAUL,WAAW,IAAI;EACzBA;EACAvB,IAAI,GAAGqB,KAAKrB,GAAG;EACjB;CAEA,MAAM6B,8BAAsC,KAAA;CAC5C,MAAM,EAAEC,0CAA+BxC,uCAAAA;AAEvCF,4BAAU;AACR,MAAIW,UAAU,KAAK8B,UAAUE,QAC3BD,mBAAkBD,UAAUE,QAAO;IAEpC,CAAChC,OAAO+B,gBAAgB,CAAA;AAE3B,QACE,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACrC,mCAAAA;EAAiBqB,KAAKe;EAAY,GAAGJ;IACpC,8BAAA,cAACzC,2BAAAA;EAAQmC,KAAK;EAAGa,YAAW;IACzBX,KAAKY,QACJ,8BAAA,cAAClD,uBAAAA;EAAImD,QAAQ;EAAIC,OAAO;IACtB,8BAAA,cAACd,KAAKY,MAAI,EAACG,MAAM,QAGrB,8BAAA,cAAC1C,+BAAAA,EAAa2C,UAAU;EAAEC,GAAG;EAASC,IAAI;EAAO,IAC9ClB,KAAKmB,KAAI,CAAA,EAId,8BAAA,cAACxD,2BAAAA,EAAQgD,YAAW,YACjBT,YACC,8BAAA,cAACxC,uBAAAA;EAAIqB,SAAS;GAAEkC,GAAG;GAAQG,IAAI;GAAQ;EAAGC,IAAI;IAC5C,8BAAA,cAACzD,+CAAAA,EAAsB0D,eAAY,4BAK1CtB,KAAKY,QACJ,8BAAA,cAACzC,yCAAAA;EACCY,SAAS;GAAEkC,GAAG;GAAQM,IAAI;GAAQH,IAAI;GAAO;EAC5C,GAAGhB;IAEJ,8BAAA,cAAClC,gCAAAA;EACC0C,MAAMZ,KAAKY;EACXY,KAAKxB,KAAKmB;EACVM,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAlC,cAAYM,KAAKmB"}

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.mjs

@@ -1,88 +0,0 @@
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from "./elements.mjs";
-import { AppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.mjs";
-import { Box, FlexBox } from "@codecademy/gamut";
-import React, { useContext, useEffect, useRef } from "react";
-import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
-const NavTabPanel = ({ children, isActiveTab, index, id }) => {
-	return /* @__PURE__ */ React.createElement(StyledNavTabPanel, {
-		isFirst: index === 0,
-		role: "tabpanel",
-		id: `${id}-panel`,
-		"aria-labelledby": `${id}-tab`,
-		display: isActiveTab ? "block" : "none",
-		gridColumn: "2 / span 12",
-		gridRow: "1 / span 8",
-		bg: "background",
-		px: 32,
-		pt: 16,
-		pb: 24
-	}, children);
-};
-const NavTabList = /* @__PURE__ */ React.forwardRef(({ children, type }, ref) => {
-	return /* @__PURE__ */ React.createElement(FlexBox, {
-		role: "tablist",
-		"aria-label": `${type.replace("-dropdown", "")} navigation`,
-		"aria-orientation": "vertical",
-		flexDirection: "column",
-		gap: 8,
-		ref
-	}, children);
-});
-const NavTab = ({ item, onSelect, isActive, onKeyDown, index }) => {
-	const sharedButtonProps = {
-		role: "tab",
-		"aria-selected": isActive,
-		"aria-controls": `${item.id}-panel`,
-		onClick: (event) => onSelect(item.id, event, item),
-		onKeyDown,
-		tabIndex: isActive ? 0 : -1,
-		isActive,
-		id: `${item.id}-tab`
-	};
-	const buttonRef = useRef(null);
-	const { setFirstItemRef } = useContext(AppHeaderDropdownContext);
-	useEffect(() => {
-		if (index === 0 && buttonRef.current) setFirstItemRef?.(buttonRef.current);
-	}, [index, setFirstItemRef]);
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(NavigationButton, {
-		ref: buttonRef,
-		...sharedButtonProps
-	}, /* @__PURE__ */ React.createElement(FlexBox, {
-		gap: 8,
-		alignItems: "center"
-	}, item.icon && /* @__PURE__ */ React.createElement(Box, {
-		height: 24,
-		width: 24
-	}, /* @__PURE__ */ React.createElement(item.icon, { size: 24 })), /* @__PURE__ */ React.createElement(OverflowText, { maxWidth: {
-		_: "110px",
-		md: "none"
-	} }, item.text)), /* @__PURE__ */ React.createElement(FlexBox, { alignItems: "center" }, isActive && /* @__PURE__ */ React.createElement(Box, {
-		display: {
-			_: "none",
-			sm: "block"
-		},
-		mt: 4
-	}, /* @__PURE__ */ React.createElement(ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })))), item.icon && /* @__PURE__ */ React.createElement(NavIconButtonContainer, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		...sharedButtonProps
-	}, /* @__PURE__ */ React.createElement(NavIconButton, {
-		icon: item.icon,
-		tip: item.text,
-		tipProps: {
-			alignment: "right-center",
-			narrow: false,
-			placement: "floating"
-		},
-		"aria-label": item.text
-	})));
-};
-
-//#endregion
-export { NavTab, NavTabList, NavTabPanel };
-//# sourceMappingURL=NavTabs.mjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavTabs.mjs","names":["Box","FlexBox","ArrowChevronRightIcon","React","useContext","useEffect","useRef","AppHeaderDropdownContext","NavIconButton","NavIconButtonContainer","NavigationButton","OverflowText","StyledNavTabPanel","NavTabPanel","children","isActiveTab","index","id","isFirst","role","aria-labelledby","display","gridColumn","gridRow","bg","px","pt","pb","NavTabList","forwardRef","type","ref","aria-label","replace","aria-orientation","flexDirection","gap","NavTab","item","onSelect","isActive","onKeyDown","sharedButtonProps","onClick","event","tabIndex","buttonRef","setFirstItemRef","current","alignItems","icon","height","width","size","maxWidth","_","md","text","sm","mt","data-testid","xs","tip","tipProps","alignment","narrow","placement"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { ArrowChevronRightIcon } from '@codecademy/gamut-icons';\nimport React, { PropsWithChildren, useContext, useEffect, useRef } from 'react';\n\nimport {\n  AppHeaderCatalogDropdownItem,\n  AppHeaderResourcesDropdownItem,\n} from '../../shared';\nimport { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport {\n  NavIconButton,\n  NavIconButtonContainer,\n  NavigationButton,\n  OverflowText,\n  StyledNavTabPanel,\n} from './elements';\n\ninterface NavTabPanelProps extends PropsWithChildren {\n  isActiveTab: boolean;\n  index: number;\n  id: string;\n}\n\n// Tab content, only one should be visible at a time\nconst NavTabPanel = ({\n  children,\n  isActiveTab,\n  index,\n  id,\n}: NavTabPanelProps) => {\n  return (\n    <StyledNavTabPanel\n      isFirst={index === 0}\n      role=\"tabpanel\"\n      id={`${id}-panel`}\n      aria-labelledby={`${id}-tab`}\n      display={isActiveTab ? 'block' : 'none'}\n      gridColumn=\"2 / span 12\"\n      gridRow=\"1 / span 8\"\n      bg=\"background\"\n      px={32}\n      pt={16}\n      pb={24}\n    >\n      {children}\n    </StyledNavTabPanel>\n  );\n};\n\n// Holds all of the tab buttons\nconst NavTabList = React.forwardRef<\n  HTMLDivElement,\n  {\n    children: React.ReactNode;\n    type: string;\n  }\n>(({ children, type }, ref) => {\n  return (\n    <FlexBox\n      role=\"tablist\"\n      aria-label={`${type.replace('-dropdown', '')} navigation`}\n      aria-orientation=\"vertical\"\n      flexDirection=\"column\"\n      gap={8}\n      ref={ref}\n    >\n      {children}\n    </FlexBox>\n  );\n});\n\n// Tab button, lets you switch between tabs\n// at larger breakpoints we use a normal button, at smaller\n// breakpoints we use an IconButton.\nconst NavTab = ({\n  item,\n  onSelect,\n  isActive,\n  onKeyDown,\n  index,\n}: {\n  item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;\n  onSelect: (\n    id: string,\n    event?: React.MouseEvent,\n    item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem\n  ) => void;\n  isActive: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  index: number;\n}) => {\n  const sharedButtonProps = {\n    role: 'tab',\n    'aria-selected': isActive,\n    'aria-controls': `${item.id}-panel`,\n    onClick: (event: React.MouseEvent) => onSelect(item.id, event, item),\n    onKeyDown,\n    tabIndex: isActive ? 0 : -1,\n    isActive,\n    id: `${item.id}-tab`,\n  } as const;\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { setFirstItemRef } = useContext(AppHeaderDropdownContext);\n\n  useEffect(() => {\n    if (index === 0 && buttonRef.current) {\n      setFirstItemRef?.(buttonRef.current);\n    }\n  }, [index, setFirstItemRef]);\n\n  return (\n    <>\n      <NavigationButton ref={buttonRef} {...sharedButtonProps}>\n        <FlexBox gap={8} alignItems=\"center\">\n          {item.icon && (\n            <Box height={24} width={24}>\n              <item.icon size={24} />\n            </Box>\n          )}\n          <OverflowText maxWidth={{ _: '110px', md: 'none' }}>\n            {item.text}\n          </OverflowText>\n        </FlexBox>\n\n        <FlexBox alignItems=\"center\">\n          {isActive && (\n            <Box display={{ _: 'none', sm: 'block' }} mt={4}>\n              <ArrowChevronRightIcon data-testid=\"chevron-right-icon\" />\n            </Box>\n          )}\n        </FlexBox>\n      </NavigationButton>\n      {item.icon && (\n        <NavIconButtonContainer\n          display={{ _: 'none', xs: 'grid', sm: 'none' }}\n          {...sharedButtonProps}\n        >\n          <NavIconButton\n            icon={item.icon}\n            tip={item.text}\n            tipProps={{\n              alignment: 'right-center',\n              narrow: false,\n              placement: 'floating',\n            }}\n            aria-label={item.text}\n          />\n        </NavIconButtonContainer>\n      )}\n    </>\n  );\n};\n\nexport { NavTabPanel, NavTabList, NavTab };\n"],"mappings":";;;;;;;AAwBA,MAAMa,eAAe,EACnBC,UACAC,aACAC,OACAC,SACiB;AACjB,QACE,sBAAA,cAACL,mBAAAA;EACCM,SAASF,UAAU;EACnBG,MAAK;EACLF,IAAI,GAAGA,GAAG;EACVG,mBAAiB,GAAGH,GAAG;EACvBI,SAASN,cAAc,UAAU;EACjCO,YAAW;EACXC,SAAQ;EACRC,IAAG;EACHC,IAAI;EACJC,IAAI;EACJC,IAAI;IAEHb,SAAAA;;AAMP,MAAMc,aAAazB,sBAAM0B,YAMtB,EAAEf,UAAUgB,QAAQC,QAAAA;AACrB,QACE,sBAAA,cAAC9B,SAAAA;EACCkB,MAAK;EACLa,cAAY,GAAGF,KAAKG,QAAQ,aAAa,GAAA,CAAI;EAC7CC,oBAAiB;EACjBC,eAAc;EACdC,KAAK;EACAL;IAEJjB,SAAAA;EAGP;AAKA,MAAMuB,UAAU,EACdC,MACAC,UACAC,UACAC,WACAzB,YAWD;CACC,MAAM0B,oBAAoB;EACxBvB,MAAM;EACN,iBAAiBqB;EACjB,iBAAiB,GAAGF,KAAKrB,GAAG;EAC5B0B,UAAUC,UAA4BL,SAASD,KAAKrB,IAAI2B,OAAON,KAAAA;EAC/DG;EACAI,UAAUL,WAAW,IAAI;EACzBA;EACAvB,IAAI,GAAGqB,KAAKrB,GAAG;EACjB;CAEA,MAAM6B,YAAYxC,OAA0B,KAAA;CAC5C,MAAM,EAAEyC,oBAAoB3C,WAAWG,yBAAAA;AAEvCF,iBAAU;AACR,MAAIW,UAAU,KAAK8B,UAAUE,QAC3BD,mBAAkBD,UAAUE,QAAO;IAEpC,CAAChC,OAAO+B,gBAAgB,CAAA;AAE3B,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACrC,kBAAAA;EAAiBqB,KAAKe;EAAY,GAAGJ;IACpC,sBAAA,cAACzC,SAAAA;EAAQmC,KAAK;EAAGa,YAAW;IACzBX,KAAKY,QACJ,sBAAA,cAAClD,KAAAA;EAAImD,QAAQ;EAAIC,OAAO;IACtB,sBAAA,cAACd,KAAKY,MAAI,EAACG,MAAM,QAGrB,sBAAA,cAAC1C,cAAAA,EAAa2C,UAAU;EAAEC,GAAG;EAASC,IAAI;EAAO,IAC9ClB,KAAKmB,KAAI,CAAA,EAId,sBAAA,cAACxD,SAAAA,EAAQgD,YAAW,YACjBT,YACC,sBAAA,cAACxC,KAAAA;EAAIqB,SAAS;GAAEkC,GAAG;GAAQG,IAAI;GAAQ;EAAGC,IAAI;IAC5C,sBAAA,cAACzD,uBAAAA,EAAsB0D,eAAY,4BAK1CtB,KAAKY,QACJ,sBAAA,cAACzC,wBAAAA;EACCY,SAAS;GAAEkC,GAAG;GAAQM,IAAI;GAAQH,IAAI;GAAO;EAC5C,GAAGhB;IAEJ,sBAAA,cAAClC,eAAAA;EACC0C,MAAMZ,KAAKY;EACXY,KAAKxB,KAAKmB;EACVM,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAlC,cAAYM,KAAKmB"}

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

@@ -1,66 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../../GlobalHeader/context.cjs');
-const require_index = require('../AppHeaderDropdownProvider/index.cjs');
-const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx
-const PanelLayout = ({ heading, description, linkItem, children }) => {
-	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
-	const { handleClose } = require_index.useAppHeaderDropdownContext();
-	const { setActivePanel, tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
-	return /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
-		flexDirection: "column",
-		gap: {
-			_: 8,
-			xs: 8
-		},
-		pr: {
-			_: 0,
-			md: 16,
-			lg: 0
-		}
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
-		alignItems: "center",
-		gap: {
-			_: 8,
-			xs: 0
-		}
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.IconButton, {
-		onClick: () => setActivePanel(null),
-		icon: _codecademy_gamut_icons.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__ */ React.createElement(_codecademy_gamut.Text, {
-		as: "h2",
-		variant: "title-sm"
-	}, heading)), /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { mb: 16 }, description), children, linkItem && /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
-		justifyContent: "center",
-		mt: 16
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Anchor, {
-		href: linkItem.href,
-		onClick: (event) => {
-			globalHeaderItemClick(event, linkItem);
-			handleClose();
-		},
-		tabIndex,
-		variant: "standard"
-	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
-		alignItems: "center",
-		gap: 8
-	}, linkItem.text, " ", /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.MiniArrowRightIcon, null)))));
-};
-
-//#endregion
-exports.PanelLayout = PanelLayout;
-//# sourceMappingURL=PanelLayout.cjs.map