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

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

@@ -1,128 +1,88 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React, { useContext, useEffect, useRef } from 'react';
-import { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from './elements';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Tab content, only one should be visible at a time
-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: children
-  });
-};
+import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from "./elements.js";
+import { AppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { Box, FlexBox } from "@codecademy/gamut";
+import React, { useContext, useEffect, useRef } from "react";
+import { ArrowChevronRightIcon } from "@codecademy/gamut-icons";
 
-// Holds all of the tab buttons
-const NavTabList = /*#__PURE__*/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: ref,
-    children: children
-  });
+//#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);
 });
-
-// Tab button, lets you switch between tabs
-// at larger breakpoints we use a normal button, at smaller
-// breakpoints we use an IconButton.
-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
-      })
-    })]
-  });
+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
+	})));
 };
-export { NavTabPanel, NavTabList, NavTab };
+
+//#endregion
+export { NavTab, NavTabList, NavTabPanel };
+//# sourceMappingURL=NavTabs.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelLayout.cjs","names":["Anchor","FlexBox","IconButton","Text","ArrowLeftIcon","MiniArrowRightIcon","useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","PanelLayout","heading","description","linkItem","children","globalHeaderItemClick","handleClose","setActivePanel","tabIndex","flexDirection","gap","_","xs","pr","md","lg","alignItems","onClick","icon","tip","tipProps","alignment","narrow","placement","aria-label","display","as","variant","mb","justifyContent","mt","href","event","text"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx"],"sourcesContent":["import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';\nimport { PropsWithChildren, ReactNode } from 'react';\n\nimport { AppHeaderLinkItem } from '../../..';\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\n\ntype PanelLayoutProps = PropsWithChildren & {\n  heading: string;\n  description: ReactNode;\n  linkItem?: AppHeaderLinkItem;\n};\n\nexport const PanelLayout = ({\n  heading,\n  description,\n  linkItem,\n  children,\n}: PanelLayoutProps) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { setActivePanel, tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <FlexBox\n      flexDirection=\"column\"\n      gap={{ _: 8, xs: 8 }}\n      pr={{ _: 0, md: 16, lg: 0 }}\n    >\n      <FlexBox alignItems=\"center\" gap={{ _: 8, xs: 0 }}>\n        <IconButton\n          onClick={() => setActivePanel(null)}\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          display={{ _: 'flex', xs: 'none' }}\n        />\n        <Text as=\"h2\" variant=\"title-sm\">\n          {heading}\n        </Text>\n      </FlexBox>\n      <Text mb={16}>{description}</Text>\n      {children}\n      {linkItem && (\n        <FlexBox justifyContent=\"center\" mt={16}>\n          <Anchor\n            href={linkItem.href}\n            onClick={(event: React.MouseEvent) => {\n              globalHeaderItemClick(event, linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            variant=\"standard\"\n          >\n            <FlexBox alignItems=\"center\" gap={8}>\n              {linkItem.text} <MiniArrowRightIcon />\n            </FlexBox>\n          </Anchor>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,MAAaS,eAAe,EAC1BC,SACAC,aACAC,UACAC,eACiB;CACjB,MAAM,EAAEC,0BAA0BR,0CAAAA;CAClC,MAAM,EAAES,gBAAgBR,2CAAAA;CACxB,MAAM,EAAES,gBAAgBC,aAAaT,4DAAAA;AAErC,QACE,sBAAA,cAACP,2BAAAA;EACCiB,eAAc;EACdC,KAAK;GAAEC,GAAG;GAAGC,IAAI;GAAE;EACnBC,IAAI;GAAEF,GAAG;GAAGG,IAAI;GAAIC,IAAI;GAAE;IAE1B,sBAAA,cAACvB,2BAAAA;EAAQwB,YAAW;EAASN,KAAK;GAAEC,GAAG;GAAGC,IAAI;GAAE;IAC9C,sBAAA,cAACnB,8BAAAA;EACCwB,eAAeV,eAAe,KAAA;EAC9BW,MAAMvB;EACNwB,KAAI;EACJC,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAC,cAAW;EACXC,SAAS;GAAEd,GAAG;GAAQC,IAAI;GAAO;KAEnC,sBAAA,cAAClB,wBAAAA;EAAKgC,IAAG;EAAKC,SAAQ;IACnB1B,QAAAA,CAAAA,EAGL,sBAAA,cAACP,wBAAAA,EAAKkC,IAAI,MAAK1B,YAAAA,EACdE,UACAD,YACC,sBAAA,cAACX,2BAAAA;EAAQqC,gBAAe;EAASC,IAAI;IACnC,sBAAA,cAACvC,0BAAAA;EACCwC,MAAM5B,SAAS4B;EACfd,UAAUe,UAAAA;AACR3B,yBAAsB2B,OAAO7B,SAAAA;AAC7BG,gBAAAA;;EAEQE;EACVmB,SAAQ;IAER,sBAAA,cAACnC,2BAAAA;EAAQwB,YAAW;EAASN,KAAK;IAC/BP,SAAS8B,MAAK,KAAC,sBAAA,cAACrC,4CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelLayout.js","names":["Anchor","FlexBox","IconButton","Text","ArrowLeftIcon","MiniArrowRightIcon","useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","PanelLayout","heading","description","linkItem","children","globalHeaderItemClick","handleClose","setActivePanel","tabIndex","flexDirection","gap","_","xs","pr","md","lg","alignItems","onClick","icon","tip","tipProps","alignment","narrow","placement","aria-label","display","as","variant","mb","justifyContent","mt","href","event","text"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/PanelLayout.tsx"],"sourcesContent":["import { Anchor, FlexBox, IconButton, Text } from '@codecademy/gamut';\nimport { ArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';\nimport { PropsWithChildren, ReactNode } from 'react';\n\nimport { AppHeaderLinkItem } from '../../..';\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderSectionContext } from './AppHeaderSectionContext';\n\ntype PanelLayoutProps = PropsWithChildren & {\n  heading: string;\n  description: ReactNode;\n  linkItem?: AppHeaderLinkItem;\n};\n\nexport const PanelLayout = ({\n  heading,\n  description,\n  linkItem,\n  children,\n}: PanelLayoutProps) => {\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n  const { setActivePanel, tabIndex } = useAppHeaderSectionContext();\n\n  return (\n    <FlexBox\n      flexDirection=\"column\"\n      gap={{ _: 8, xs: 8 }}\n      pr={{ _: 0, md: 16, lg: 0 }}\n    >\n      <FlexBox alignItems=\"center\" gap={{ _: 8, xs: 0 }}>\n        <IconButton\n          onClick={() => setActivePanel(null)}\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          display={{ _: 'flex', xs: 'none' }}\n        />\n        <Text as=\"h2\" variant=\"title-sm\">\n          {heading}\n        </Text>\n      </FlexBox>\n      <Text mb={16}>{description}</Text>\n      {children}\n      {linkItem && (\n        <FlexBox justifyContent=\"center\" mt={16}>\n          <Anchor\n            href={linkItem.href}\n            onClick={(event: React.MouseEvent) => {\n              globalHeaderItemClick(event, linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            variant=\"standard\"\n          >\n            <FlexBox alignItems=\"center\" gap={8}>\n              {linkItem.text} <MiniArrowRightIcon />\n            </FlexBox>\n          </Anchor>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;AAeA,MAAaS,eAAe,EAC1BC,SACAC,aACAC,UACAC,eACiB;CACjB,MAAM,EAAEC,0BAA0BR,0BAAAA;CAClC,MAAM,EAAES,gBAAgBR,6BAAAA;CACxB,MAAM,EAAES,gBAAgBC,aAAaT,4BAAAA;AAErC,QACE,sBAAA,cAACP,SAAAA;EACCiB,eAAc;EACdC,KAAK;GAAEC,GAAG;GAAGC,IAAI;GAAE;EACnBC,IAAI;GAAEF,GAAG;GAAGG,IAAI;GAAIC,IAAI;GAAE;IAE1B,sBAAA,cAACvB,SAAAA;EAAQwB,YAAW;EAASN,KAAK;GAAEC,GAAG;GAAGC,IAAI;GAAE;IAC9C,sBAAA,cAACnB,YAAAA;EACCwB,eAAeV,eAAe,KAAA;EAC9BW,MAAMvB;EACNwB,KAAI;EACJC,UAAU;GACRC,WAAW;GACXC,QAAQ;GACRC,WAAW;GACb;EACAC,cAAW;EACXC,SAAS;GAAEd,GAAG;GAAQC,IAAI;GAAO;KAEnC,sBAAA,cAAClB,MAAAA;EAAKgC,IAAG;EAAKC,SAAQ;IACnB1B,QAAAA,CAAAA,EAGL,sBAAA,cAACP,MAAAA,EAAKkC,IAAI,MAAK1B,YAAAA,EACdE,UACAD,YACC,sBAAA,cAACX,SAAAA;EAAQqC,gBAAe;EAASC,IAAI;IACnC,sBAAA,cAACvC,QAAAA;EACCwC,MAAM5B,SAAS4B;EACfd,UAAUe,UAAAA;AACR3B,yBAAsB2B,OAAO7B,SAAAA;AAC7BG,gBAAAA;;EAEQE;EACVmB,SAAQ;IAER,sBAAA,cAACnC,SAAAA;EAAQwB,YAAW;EAASN,KAAK;IAC/BP,SAAS8B,MAAK,KAAC,sBAAA,cAACrC,oBAAAA,KAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}