@codecademy/brand 4.0.0-alpha.b1cfc89ee2.0 → 4.0.0-alpha.b5e5d575e.0

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 = 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":[],"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,MAAa,0BACX,cAA2C;CACzC,aAAa;CACb,gBAAgB;CAChB,UAAU;CACV,mBAAmB;CACpB,CAAC;AAEJ,MAAa,mCAAmC;AAC9C,QAAO,WAAW,wBAAwB"}

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

@@ -1,86 +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 react_jsx_runtime = require("react/jsx-runtime");
-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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			display: {
-				_: "none",
-				sm: "block"
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavigationButton, {
-				isActive: false,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: "Back" })]
-				})
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			display: {
-				_: "none",
-				xs: "grid",
-				sm: "none"
-			},
-			ml: 8,
-			gridColumn: "1",
-			gridRow: "1",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			display: {
-				_: "flex",
-				xs: "none"
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.SmallMenuButton, {
-				index: 0,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: "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":["MobileBackButton: React.FC<MobileBackButtonProps>","useGlobalHeaderItemClick","Box","NavigationButton","FlexBox","ArrowLeftIcon","Text","NavIconButton","SmallMenuButton"],"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,MAAaA,oBAAqD,EAChE,aACA,WACI;CACJ,MAAM,EAAE,0BAA0BC,0CAA0B;CAE5D,MAAM,yBACJ,UACG;AACH,wBAAsB,OAAO;GAC3B,IAAI;GACJ,MAAM;GACN;GACD,CAAC;AACF,eAAa;;AAGf,QACE;EACE,2CAACC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAS;aACtC,2CAACC;IAAiB,UAAU;IAAO,SAAS;cAC1C,4CAACC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,2CAACF;MAAI,QAAQ;MAAI,OAAO;gBACtB,2CAACG,yCAAc,MAAM,KAAM;OACvB,EACN,2CAACC,oCAAK,SAAW;MACT;KACO;IACf;EACN,2CAACJ;GACC,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ,IAAI;IAAQ;GAC9C,IAAI;GACJ,YAAW;GACX,SAAQ;aAER,2CAACK;IACC,SAAS;IACT,MAAMF;IACN,KAAI;IACJ,UAAU;KACR,WAAW;KACX,QAAQ;KACR,WAAW;KACZ;IACD,cAAW;KACX;IACE;EACN,2CAACH;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ;aACrC,2CAACM;IAAgB,OAAO;IAAG,SAAS;cAClC,4CAACJ;KAAQ,KAAK;KAAG,YAAW;gBAC1B,2CAACF;MAAI,QAAQ;MAAI,OAAO;gBACtB,2CAACG,yCAAc,MAAM,KAAM;OACvB,EACN,2CAACC,oCAAK,SAAW;MACT;KACM;IACd;KACL"}

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

@@ -1,84 +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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: "none",
-				sm: "block"
-			},
-			children: /* @__PURE__ */ jsx(NavigationButton, {
-				isActive: false,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: "Back" })]
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			display: {
-				_: "none",
-				xs: "grid",
-				sm: "none"
-			},
-			ml: 8,
-			gridColumn: "1",
-			gridRow: "1",
-			children: /* @__PURE__ */ jsx(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__ */ jsx(Box, {
-			display: {
-				_: "flex",
-				xs: "none"
-			},
-			children: /* @__PURE__ */ jsx(SmallMenuButton, {
-				index: 0,
-				onClick: handleBackButtonClick,
-				children: /* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: "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":["MobileBackButton: React.FC<MobileBackButtonProps>"],"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,MAAaA,oBAAqD,EAChE,aACA,WACI;CACJ,MAAM,EAAE,0BAA0B,0BAA0B;CAE5D,MAAM,yBACJ,UACG;AACH,wBAAsB,OAAO;GAC3B,IAAI;GACJ,MAAM;GACN;GACD,CAAC;AACF,eAAa;;AAGf,QACE;EACE,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAS;aACtC,oBAAC;IAAiB,UAAU;IAAO,SAAS;cAC1C,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACO;IACf;EACN,oBAAC;GACC,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ,IAAI;IAAQ;GAC9C,IAAI;GACJ,YAAW;GACX,SAAQ;aAER,oBAAC;IACC,SAAS;IACT,MAAM;IACN,KAAI;IACJ,UAAU;KACR,WAAW;KACX,QAAQ;KACR,WAAW;KACZ;IACD,cAAW;KACX;IACE;EACN,oBAAC;GAAI,SAAS;IAAE,GAAG;IAAQ,IAAI;IAAQ;aACrC,oBAAC;IAAgB,OAAO;IAAG,SAAS;cAClC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBAC1B,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,iBAAc,MAAM,KAAM;OACvB,EACN,oBAAC,kBAAK,SAAW;MACT;KACM;IACd;KACL"}

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

@@ -1,52 +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 react_jsx_runtime = require("react/jsx-runtime");
-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__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16,
-		children: [activePanel === null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MobileBackButton.MobileBackButton, {
-			handleClose,
-			type
-		}), navSections.map(({ item }, index) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.SmallMenuButton, {
-				index: index + 1,
-				onClick: () => setActivePanel(index),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.icon, { size: 24 })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, { children: item.text })]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowChevronRightIcon, {}) })]
-			}, item.id);
-		})] }), activePanel !== null && ActivePanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-			background: _codecademy_gamut_styles.theme.colors.background,
-			borderRadius: "lg",
-			p: 16,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivePanel, {})
-		})]
-	});
-};
-
-//#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":["MobileNavMenu: React.FC<MobileNavMenuProps>","useAppHeaderSectionContext","FlexBox","MobileBackButton","SmallMenuButton","Box","Text","ArrowChevronRightIcon","theme"],"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,MAAaA,iBAA+C,EAC1D,aACA,MACA,kBACI;CACJ,MAAM,EAAE,aAAa,mBAAmBC,4DAA4B;CAEpE,MAAM,cAAc,YAAY,eAAe,GAAG;AAElD,QACE,4CAACC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ;EAClC,eAAc;EACd,KAAK;EACL,GAAG;aAEF,gBAAgB,QACf,qFACE,2CAACC;GAA8B;GAAmB;IAAQ,EACzD,YAAY,KAAK,EAAE,QAAQ,UAAU;AACpC,UACE,4CAACC;IAEC,OAAO,QAAQ;IACf,eAAe,eAAe,MAAM;eAEpC,4CAACF;KAAQ,KAAK;KAAG,YAAW;gBACzB,KAAK,QACJ,2CAACG;MAAI,QAAQ;MAAI,OAAO;gBACtB,2CAAC,KAAK,QAAK,MAAM,KAAM;OACnB,EAER,2CAACC,oCAAM,KAAK,OAAY;MAChB,EACV,2CAACJ,uCACC,2CAACK,kDAAwB,GACjB;MAdL,KAAK,GAeM;IAEpB,IACD,EAGJ,gBAAgB,QAAQ,eACvB,2CAACF;GAAI,YAAYG,+BAAM,OAAO;GAAY,cAAa;GAAK,GAAG;aAC7D,2CAAC,gBAAc;IACX;GAEA"}

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

@@ -1,50 +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 "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs(FlexBox, {
-		display: {
-			_: "flex",
-			xs: "none"
-		},
-		flexDirection: "column",
-		gap: 8,
-		p: 16,
-		children: [activePanel === null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileBackButton, {
-			handleClose,
-			type
-		}), navSections.map(({ item }, index) => {
-			return /* @__PURE__ */ jsxs(SmallMenuButton, {
-				index: index + 1,
-				onClick: () => setActivePanel(index),
-				children: [/* @__PURE__ */ jsxs(FlexBox, {
-					gap: 8,
-					alignItems: "center",
-					children: [item.icon && /* @__PURE__ */ jsx(Box, {
-						height: 24,
-						width: 24,
-						children: /* @__PURE__ */ jsx(item.icon, { size: 24 })
-					}), /* @__PURE__ */ jsx(Text, { children: item.text })]
-				}), /* @__PURE__ */ jsx(FlexBox, { children: /* @__PURE__ */ jsx(ArrowChevronRightIcon, {}) })]
-			}, item.id);
-		})] }), activePanel !== null && ActivePanel && /* @__PURE__ */ jsx(Box, {
-			background: theme.colors.background,
-			borderRadius: "lg",
-			p: 16,
-			children: /* @__PURE__ */ jsx(ActivePanel, {})
-		})]
-	});
-};
-
-//#endregion
-export { MobileNavMenu };
-//# sourceMappingURL=MobileNavMenu.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MobileNavMenu.mjs","names":["MobileNavMenu: React.FC<MobileNavMenuProps>"],"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,MAAaA,iBAA+C,EAC1D,aACA,MACA,kBACI;CACJ,MAAM,EAAE,aAAa,mBAAmB,4BAA4B;CAEpE,MAAM,cAAc,YAAY,eAAe,GAAG;AAElD,QACE,qBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ;EAClC,eAAc;EACd,KAAK;EACL,GAAG;aAEF,gBAAgB,QACf,4CACE,oBAAC;GAA8B;GAAmB;IAAQ,EACzD,YAAY,KAAK,EAAE,QAAQ,UAAU;AACpC,UACE,qBAAC;IAEC,OAAO,QAAQ;IACf,eAAe,eAAe,MAAM;eAEpC,qBAAC;KAAQ,KAAK;KAAG,YAAW;gBACzB,KAAK,QACJ,oBAAC;MAAI,QAAQ;MAAI,OAAO;gBACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;OACnB,EAER,oBAAC,kBAAM,KAAK,OAAY;MAChB,EACV,oBAAC,qBACC,oBAAC,0BAAwB,GACjB;MAdL,KAAK,GAeM;IAEpB,IACD,EAGJ,gBAAgB,QAAQ,eACvB,oBAAC;GAAI,YAAY,MAAM,OAAO;GAAY,cAAa;GAAK,GAAG;aAC7D,oBAAC,gBAAc;IACX;GAEA"}

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

@@ -1,106 +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 react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
-const NavTabPanel = ({ children, isActiveTab, index, id }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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 = react.default.forwardRef(({ children, type }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.NavigationButton, {
-		ref: buttonRef,
-		...sharedButtonProps,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-			gap: 8,
-			alignItems: "center",
-			children: [item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				height: 24,
-				width: 24,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.icon, { size: 24 })
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.OverflowText, {
-				maxWidth: {
-					_: "110px",
-					md: "none"
-				},
-				children: item.text
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-			alignItems: "center",
-			children: isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-				display: {
-					_: "none",
-					sm: "block"
-				},
-				mt: 4,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })
-			})
-		})]
-	}), item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.NavIconButtonContainer, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		...sharedButtonProps,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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":["StyledNavTabPanel","React","FlexBox","AppHeaderDropdownContext","NavigationButton","Box","OverflowText","ArrowChevronRightIcon","NavIconButtonContainer","NavIconButton"],"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,MAAM,eAAe,EACnB,UACA,aACA,OACA,SACsB;AACtB,QACE,2CAACA;EACC,SAAS,UAAU;EACnB,MAAK;EACL,IAAI,GAAG,GAAG;EACV,mBAAiB,GAAG,GAAG;EACvB,SAAS,cAAc,UAAU;EACjC,YAAW;EACX,SAAQ;EACR,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EAEH;GACiB;;AAKxB,MAAM,aAAaC,cAAM,YAMtB,EAAE,UAAU,QAAQ,QAAQ;AAC7B,QACE,2CAACC;EACC,MAAK;EACL,cAAY,GAAG,KAAK,QAAQ,aAAa,GAAG,CAAC;EAC7C,oBAAiB;EACjB,eAAc;EACd,KAAK;EACA;EAEJ;GACO;EAEZ;AAKF,MAAM,UAAU,EACd,MACA,UACA,UACA,WACA,YAWI;CACJ,MAAM,oBAAoB;EACxB,MAAM;EACN,iBAAiB;EACjB,iBAAiB,GAAG,KAAK,GAAG;EAC5B,UAAU,UAA4B,SAAS,KAAK,IAAI,OAAO,KAAK;EACpE;EACA,UAAU,WAAW,IAAI;EACzB;EACA,IAAI,GAAG,KAAK,GAAG;EAChB;CAED,MAAM,8BAAsC,KAAK;CACjD,MAAM,EAAE,0CAA+BC,uCAAyB;AAEhE,4BAAgB;AACd,MAAI,UAAU,KAAK,UAAU,QAC3B,mBAAkB,UAAU,QAAQ;IAErC,CAAC,OAAO,gBAAgB,CAAC;AAE5B,QACE,qFACE,4CAACC;EAAiB,KAAK;EAAW,GAAI;aACpC,4CAACF;GAAQ,KAAK;GAAG,YAAW;cACzB,KAAK,QACJ,2CAACG;IAAI,QAAQ;IAAI,OAAO;cACtB,2CAAC,KAAK,QAAK,MAAM,KAAM;KACnB,EAER,2CAACC;IAAa,UAAU;KAAE,GAAG;KAAS,IAAI;KAAQ;cAC/C,KAAK;KACO;IACP,EAEV,2CAACJ;GAAQ,YAAW;aACjB,YACC,2CAACG;IAAI,SAAS;KAAE,GAAG;KAAQ,IAAI;KAAS;IAAE,IAAI;cAC5C,2CAACE,iDAAsB,eAAY,uBAAuB;KACtD;IAEA;GACO,EAClB,KAAK,QACJ,2CAACC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ,IAAI;GAAQ;EAC9C,GAAI;YAEJ,2CAACC;GACC,MAAM,KAAK;GACX,KAAK,KAAK;GACV,UAAU;IACR,WAAW;IACX,QAAQ;IACR,WAAW;IACZ;GACD,cAAY,KAAK;IACjB;GACqB,IAE1B"}

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

@@ -1,102 +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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.tsx
-const NavTabPanel = ({ children, isActiveTab, index, id }) => {
-	return /* @__PURE__ */ jsx(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 = React.forwardRef(({ children, type }, ref) => {
-	return /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(NavigationButton, {
-		ref: buttonRef,
-		...sharedButtonProps,
-		children: [/* @__PURE__ */ jsxs(FlexBox, {
-			gap: 8,
-			alignItems: "center",
-			children: [item.icon && /* @__PURE__ */ jsx(Box, {
-				height: 24,
-				width: 24,
-				children: /* @__PURE__ */ jsx(item.icon, { size: 24 })
-			}), /* @__PURE__ */ jsx(OverflowText, {
-				maxWidth: {
-					_: "110px",
-					md: "none"
-				},
-				children: item.text
-			})]
-		}), /* @__PURE__ */ jsx(FlexBox, {
-			alignItems: "center",
-			children: isActive && /* @__PURE__ */ jsx(Box, {
-				display: {
-					_: "none",
-					sm: "block"
-				},
-				mt: 4,
-				children: /* @__PURE__ */ jsx(ArrowChevronRightIcon, { "data-testid": "chevron-right-icon" })
-			})
-		})]
-	}), item.icon && /* @__PURE__ */ jsx(NavIconButtonContainer, {
-		display: {
-			_: "none",
-			xs: "grid",
-			sm: "none"
-		},
-		...sharedButtonProps,
-		children: /* @__PURE__ */ jsx(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":[],"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,MAAM,eAAe,EACnB,UACA,aACA,OACA,SACsB;AACtB,QACE,oBAAC;EACC,SAAS,UAAU;EACnB,MAAK;EACL,IAAI,GAAG,GAAG;EACV,mBAAiB,GAAG,GAAG;EACvB,SAAS,cAAc,UAAU;EACjC,YAAW;EACX,SAAQ;EACR,IAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EAEH;GACiB;;AAKxB,MAAM,aAAa,MAAM,YAMtB,EAAE,UAAU,QAAQ,QAAQ;AAC7B,QACE,oBAAC;EACC,MAAK;EACL,cAAY,GAAG,KAAK,QAAQ,aAAa,GAAG,CAAC;EAC7C,oBAAiB;EACjB,eAAc;EACd,KAAK;EACA;EAEJ;GACO;EAEZ;AAKF,MAAM,UAAU,EACd,MACA,UACA,UACA,WACA,YAWI;CACJ,MAAM,oBAAoB;EACxB,MAAM;EACN,iBAAiB;EACjB,iBAAiB,GAAG,KAAK,GAAG;EAC5B,UAAU,UAA4B,SAAS,KAAK,IAAI,OAAO,KAAK;EACpE;EACA,UAAU,WAAW,IAAI;EACzB;EACA,IAAI,GAAG,KAAK,GAAG;EAChB;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,oBAAoB,WAAW,yBAAyB;AAEhE,iBAAgB;AACd,MAAI,UAAU,KAAK,UAAU,QAC3B,mBAAkB,UAAU,QAAQ;IAErC,CAAC,OAAO,gBAAgB,CAAC;AAE5B,QACE,4CACE,qBAAC;EAAiB,KAAK;EAAW,GAAI;aACpC,qBAAC;GAAQ,KAAK;GAAG,YAAW;cACzB,KAAK,QACJ,oBAAC;IAAI,QAAQ;IAAI,OAAO;cACtB,oBAAC,KAAK,QAAK,MAAM,KAAM;KACnB,EAER,oBAAC;IAAa,UAAU;KAAE,GAAG;KAAS,IAAI;KAAQ;cAC/C,KAAK;KACO;IACP,EAEV,oBAAC;GAAQ,YAAW;aACjB,YACC,oBAAC;IAAI,SAAS;KAAE,GAAG;KAAQ,IAAI;KAAS;IAAE,IAAI;cAC5C,oBAAC,yBAAsB,eAAY,uBAAuB;KACtD;IAEA;GACO,EAClB,KAAK,QACJ,oBAAC;EACC,SAAS;GAAE,GAAG;GAAQ,IAAI;GAAQ,IAAI;GAAQ;EAC9C,GAAI;YAEJ,oBAAC;GACC,MAAM,KAAK;GACX,KAAK,KAAK;GACV,UAAU;IACR,WAAW;IACX,QAAQ;IACR,WAAW;IACZ;GACD,cAAY,KAAK;IACjB;GACqB,IAE1B"}