@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

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

@@ -1,89 +1,66 @@
-import { Box, FlexBox, Text } from '@codecademy/gamut';
-import { ArrowLeftIcon } from '@codecademy/gamut-icons';
-import React from 'react';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { NavIconButton, NavigationButton, SmallMenuButton } from './elements';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export 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"
-          })]
-        })
-      })
-    })]
-  });
-};
+import { NavIconButton, NavigationButton, SmallMenuButton } from "./elements.js";
+import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBackButton.js","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

@@ -0,0 +1,47 @@
+const require_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_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

@@ -0,0 +1 @@
+{"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.js

@@ -1,61 +1,45 @@
-import { Box, FlexBox, Text } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { useAppHeaderSectionContext } from './AppHeaderSectionContext';
-import { SmallMenuButton } from './elements';
-import { MobileBackButton } from './MobileBackButton';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export 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: handleClose,
-        type: 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, {})
-    })]
-  });
-};
+import { SmallMenuButton } from "./elements.js";
+import { useAppHeaderSectionContext } from "./AppHeaderSectionContext.js";
+import { MobileBackButton } from "./MobileBackButton.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNavMenu.js","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

@@ -0,0 +1,92 @@
+const require_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_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

@@ -0,0 +1 @@
+{"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"}