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

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

@@ -1,103 +1,76 @@
-import { IconButton, TextButton } from '@codecademy/gamut';
-import { useEffect } from 'react';
-import { Avatar } from '../../../Avatar';
-import { DropdownAnchor, DropdownIcon, StyledText } from '../../shared';
-import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AppHeaderNavButton = ({
-  buttonRef,
-  handleOnClick,
-  isOpen,
-  item,
-  text,
-  onFocus
-}) => {
-  const sharedProps = {
-    'aria-expanded': isOpen,
-    'aria-haspopup': true,
-    onClick: handleOnClick,
-    ref: buttonRef
-  };
-  if (item?.type === 'profile-dropdown') {
-    return /*#__PURE__*/_jsx(TextButton, {
-      "data-testid": "avatar-dropdown-button"
-      // this resets our programatic menu index to 0 in case someone clicks out of the dropdown
-      ,
-      variant: "interface",
-      onFocus: onFocus,
-      ...sharedProps,
-      children: /*#__PURE__*/_jsx(Avatar, {
-        alt: "User profile avatar",
-        disableDropshadow: true,
-        size: 40,
-        src: item.avatar
-      })
-    });
-  }
-  if (item?.icon && 'isIconOnly' in item) {
-    return /*#__PURE__*/_jsx(IconButton, {
-      icon: item.icon,
-      tip: item.text ?? 'Dropdown',
-      tipProps: {
-        alignment: 'bottom-center',
-        placement: 'floating'
-      },
-      onFocus: onFocus,
-      ...sharedProps
-    });
-  }
-  return /*#__PURE__*/_jsxs(DropdownAnchor, {
-    title: item?.text ?? text,
-    variant: "interface",
-    onFocus: onFocus,
-    ...sharedProps,
-    children: [/*#__PURE__*/_jsx(StyledText, {
-      fontWeight: isOpen ? 'bold' : 'normal',
-      textAlign: "center",
-      title: item?.text ?? text,
-      children: item?.text ?? text
-    }), /*#__PURE__*/_jsx(DropdownIcon, {
-      open: isOpen,
-      size: 12
-    })]
-  });
+import { DropdownAnchor, DropdownIcon, StyledText } from "../../shared/elements.js";
+import "../../shared/index.js";
+import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { Avatar } from "../../../Avatar/index.js";
+import { useAppHeaderMenuContext } from "../AppHeaderMenuProvider/index.js";
+import { IconButton, TextButton } from "@codecademy/gamut";
+import { useEffect } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderNavButton/index.tsx
+const AppHeaderNavButton = ({ buttonRef, handleOnClick, isOpen, item, text, onFocus }) => {
+	const sharedProps = {
+		"aria-expanded": isOpen,
+		"aria-haspopup": true,
+		onClick: handleOnClick,
+		ref: buttonRef
+	};
+	if (item?.type === "profile-dropdown") return /* @__PURE__ */ React.createElement(TextButton, {
+		"data-testid": "avatar-dropdown-button",
+		variant: "interface",
+		onFocus,
+		...sharedProps
+	}, /* @__PURE__ */ React.createElement(Avatar, {
+		alt: "User profile avatar",
+		disableDropshadow: true,
+		size: 40,
+		src: item.avatar
+	}));
+	if (item?.icon && "isIconOnly" in item) return /* @__PURE__ */ React.createElement(IconButton, {
+		icon: item.icon,
+		tip: item.text ?? "Dropdown",
+		tipProps: {
+			alignment: "bottom-center",
+			placement: "floating"
+		},
+		onFocus,
+		...sharedProps
+	});
+	return /* @__PURE__ */ React.createElement(DropdownAnchor, {
+		title: item?.text ?? text,
+		variant: "interface",
+		onFocus,
+		...sharedProps
+	}, /* @__PURE__ */ React.createElement(StyledText, {
+		fontWeight: isOpen ? "bold" : "normal",
+		textAlign: "center",
+		title: item?.text ?? text
+	}, item?.text ?? text), /* @__PURE__ */ React.createElement(DropdownIcon, {
+		open: isOpen,
+		size: 12
+	}));
 };
-export const AppHeaderMenuNavButton = ({
-  isOpen,
-  ...props
-}) => {
-  const {
-    menuItems,
-    resetIndex
-  } = useAppHeaderMenuContext();
-  useEffect(() => {
-    if (isOpen) {
-      const menuItemsArray = menuItems.values();
-      const firstMenuItem = menuItemsArray.next().value;
-      firstMenuItem?.focus();
-    }
-  }, [isOpen, menuItems]);
-  return /*#__PURE__*/_jsx(AppHeaderNavButton, {
-    isOpen: isOpen,
-    onFocus: resetIndex,
-    ...props
-  });
+const AppHeaderMenuNavButton = ({ isOpen, ...props }) => {
+	const { menuItems, resetIndex } = useAppHeaderMenuContext();
+	useEffect(() => {
+		if (isOpen) menuItems.values().next().value?.focus();
+	}, [isOpen, menuItems]);
+	return /* @__PURE__ */ React.createElement(AppHeaderNavButton, {
+		isOpen,
+		onFocus: resetIndex,
+		...props
+	});
 };
-export const AppHeaderDropdownNavButton = ({
-  isOpen,
-  ...props
-}) => {
-  const {
-    firstItemRef
-  } = useAppHeaderDropdownContext();
-  useEffect(() => {
-    if (isOpen) {
-      firstItemRef?.focus();
-    }
-  }, [isOpen, firstItemRef]);
-  return /*#__PURE__*/_jsx(AppHeaderNavButton, {
-    isOpen: isOpen,
-    ...props
-  });
-};
+const AppHeaderDropdownNavButton = ({ isOpen, ...props }) => {
+	const { firstItemRef } = useAppHeaderDropdownContext();
+	useEffect(() => {
+		if (isOpen) firstItemRef?.focus();
+	}, [isOpen, firstItemRef]);
+	return /* @__PURE__ */ React.createElement(AppHeaderNavButton, {
+		isOpen,
+		...props
+	});
+};
+
+//#endregion
+export { AppHeaderDropdownNavButton, AppHeaderMenuNavButton };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderNavButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["IconButton","TextButton","useEffect","Avatar","DropdownAnchor","DropdownIcon","StyledText","useAppHeaderDropdownContext","useAppHeaderMenuContext","AppHeaderNavButton","buttonRef","handleOnClick","isOpen","item","text","onFocus","sharedProps","onClick","ref","type","data-testid","variant","alt","disableDropshadow","size","src","avatar","icon","tip","tipProps","alignment","placement","title","fontWeight","textAlign","open","AppHeaderMenuNavButton","props","menuItems","resetIndex","menuItemsArray","values","firstMenuItem","next","value","focus","AppHeaderDropdownNavButton","firstItemRef"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderNavButton/index.tsx"],"sourcesContent":["import { IconButton, TextButton } from '@codecademy/gamut';\nimport { useEffect } from 'react';\n\nimport { Avatar } from '../../../Avatar';\nimport {\n  AppHeaderDropdownItem,\n  DropdownAnchor,\n  DropdownIcon,\n  StyledText,\n} from '../../shared';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { useAppHeaderMenuContext } from '../AppHeaderMenuProvider';\n\ninterface AppHeaderNavButtonProps {\n  buttonRef: React.RefObject<HTMLButtonElement>;\n  handleOnClick: (event: React.MouseEvent) => void;\n  isOpen: boolean;\n  item?: AppHeaderDropdownItem;\n  text?: string;\n  onFocus?: () => void;\n}\n\nconst AppHeaderNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  buttonRef,\n  handleOnClick,\n  isOpen,\n  item,\n  text,\n  onFocus,\n}) => {\n  const sharedProps = {\n    'aria-expanded': isOpen,\n    'aria-haspopup': true,\n    onClick: handleOnClick,\n    ref: buttonRef,\n  };\n\n  if (item?.type === 'profile-dropdown') {\n    return (\n      <TextButton\n        data-testid=\"avatar-dropdown-button\"\n        // this resets our programatic menu index to 0 in case someone clicks out of the dropdown\n        variant=\"interface\"\n        onFocus={onFocus}\n        {...sharedProps}\n      >\n        <Avatar\n          alt=\"User profile avatar\"\n          disableDropshadow\n          size={40}\n          src={item.avatar}\n        />\n      </TextButton>\n    );\n  }\n\n  if (item?.icon && 'isIconOnly' in item) {\n    return (\n      <IconButton\n        icon={item.icon}\n        tip={item.text ?? 'Dropdown'}\n        tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n        onFocus={onFocus}\n        {...sharedProps}\n      />\n    );\n  }\n\n  return (\n    <DropdownAnchor\n      title={item?.text ?? text}\n      variant=\"interface\"\n      onFocus={onFocus}\n      {...sharedProps}\n    >\n      <StyledText\n        fontWeight={isOpen ? 'bold' : 'normal'}\n        textAlign=\"center\"\n        title={item?.text ?? text}\n      >\n        {item?.text ?? text}\n      </StyledText>\n      <DropdownIcon open={isOpen} size={12} />\n    </DropdownAnchor>\n  );\n};\n\nexport const AppHeaderMenuNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { menuItems, resetIndex } = useAppHeaderMenuContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      const menuItemsArray = menuItems.values();\n      const firstMenuItem = menuItemsArray.next().value;\n      firstMenuItem?.focus();\n    }\n  }, [isOpen, menuItems]);\n\n  return <AppHeaderNavButton isOpen={isOpen} onFocus={resetIndex} {...props} />;\n};\n\nexport const AppHeaderDropdownNavButton: React.FC<AppHeaderNavButtonProps> = ({\n  isOpen,\n  ...props\n}) => {\n  const { firstItemRef } = useAppHeaderDropdownContext();\n\n  useEffect(() => {\n    if (isOpen) {\n      firstItemRef?.focus();\n    }\n  }, [isOpen, firstItemRef]);\n\n  return <AppHeaderNavButton isOpen={isOpen} {...props} />;\n};\n"],"mappings":";;;;;;;;;AAsBA,MAAMS,sBAAyD,EAC7DC,WACAC,eACAC,QACAC,MACAC,MACAC,cACD;CACC,MAAMC,cAAc;EAClB,iBAAiBJ;EACjB,iBAAiB;EACjBK,SAASN;EACTO,KAAKR;EACP;AAEA,KAAIG,MAAMM,SAAS,mBACjB,QACE,sBAAA,cAAClB,YAAAA;EACCmB,eAAY;EAEZC,SAAQ;EACCN;EACR,GAAGC;IAEJ,sBAAA,cAACb,QAAAA;EACCmB,KAAI;EACJC,mBAAAA;EACAC,MAAM;EACNC,KAAKZ,KAAKa;;AAMlB,KAAIb,MAAMc,QAAQ,gBAAgBd,KAChC,QACE,sBAAA,cAACb,YAAAA;EACC2B,MAAMd,KAAKc;EACXC,KAAKf,KAAKC,QAAQ;EAClBe,UAAU;GAAEC,WAAW;GAAiBC,WAAW;GAAW;EACrDhB;EACR,GAAGC;;AAKV,QACE,sBAAA,cAACZ,gBAAAA;EACC4B,OAAOnB,MAAMC,QAAQA;EACrBO,SAAQ;EACCN;EACR,GAAGC;IAEJ,sBAAA,cAACV,YAAAA;EACC2B,YAAYrB,SAAS,SAAS;EAC9BsB,WAAU;EACVF,OAAOnB,MAAMC,QAAQA;IAEpBD,MAAMC,QAAQA,KAAAA,EAEjB,sBAAA,cAACT,cAAAA;EAAa8B,MAAMvB;EAAQY,MAAM;;;AAKxC,MAAaY,0BAA6D,EACxExB,QACA,GAAGyB,YACJ;CACC,MAAM,EAAEC,WAAWC,eAAe/B,yBAAAA;AAElCN,iBAAU;AACR,MAAIU,OAGF8B,CAFuBJ,UAAUG,QAAM,CACFE,MAAI,CAAGC,OAC7BC,OAAAA;IAEhB,CAACjC,QAAQ0B,UAAU,CAAA;AAEtB,QAAO,sBAAA,cAAC7B,oBAAAA;EAA2BG;EAAQG,SAASwB;EAAa,GAAGF;;;AAGtE,MAAaS,8BAAiE,EAC5ElC,QACA,GAAGyB,YACJ;CACC,MAAM,EAAEU,iBAAiBxC,6BAAAA;AAEzBL,iBAAU;AACR,MAAIU,OACFmC,eAAcF,OAAAA;IAEf,CAACjC,QAAQmC,aAAa,CAAA;AAEzB,QAAO,sBAAA,cAACtC,oBAAAA;EAA2BG;EAAS,GAAGyB"}

package/dist/AppHeader/AppHeaderElements/AppHeaderProvider/index.cjs

@@ -0,0 +1,22 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderProvider/index.tsx
+const AppHeaderContext = /* @__PURE__ */ (0, react.createContext)({
+	lastOpenedDropdown: void 0,
+	setLastOpenedDropdown: void 0
+});
+const AppHeaderProvider = ({ children }) => {
+	const [lastOpenedDropdown, setLastOpenedDropdown] = (0, react.useState)();
+	return /* @__PURE__ */ react.default.createElement(AppHeaderContext.Provider, { value: {
+		lastOpenedDropdown,
+		setLastOpenedDropdown
+	} }, children);
+};
+const useAppHeaderContext = () => (0, react.useContext)(AppHeaderContext);
+
+//#endregion
+exports.AppHeaderProvider = AppHeaderProvider;
+exports.useAppHeaderContext = useAppHeaderContext;
+//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderProvider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","createContext","useContext","useState","AppHeaderContext","lastOpenedDropdown","undefined","setLastOpenedDropdown","AppHeaderProvider","children","Provider","value","useAppHeaderContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderProvider/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\nexport interface AppHeaderContextType {\n  lastOpenedDropdown: string | undefined;\n  setLastOpenedDropdown:\n    | Dispatch<SetStateAction<string | undefined>>\n    | undefined;\n}\n\nexport const AppHeaderContext = createContext<AppHeaderContextType>({\n  lastOpenedDropdown: undefined,\n  setLastOpenedDropdown: undefined,\n});\n\nexport const AppHeaderProvider: React.FC<{ children: ReactNode }> = ({\n  children,\n}) => {\n  const [lastOpenedDropdown, setLastOpenedDropdown] = useState<\n    string | undefined\n  >();\n\n  return (\n    <AppHeaderContext.Provider\n      value={{ lastOpenedDropdown, setLastOpenedDropdown }}\n    >\n      {children}\n    </AppHeaderContext.Provider>\n  );\n};\n\nexport const useAppHeaderContext = () => useContext(AppHeaderContext);\n"],"mappings":";;;;;AAgBA,MAAaI,mBAAmBH,yCAAoC;CAClEI,oBAAoBC;CACpBC,uBAAuBD;CACzB,CAAA;AAEA,MAAaE,qBAAwD,EACnEC,eACD;CACC,MAAM,CAACJ,oBAAoBE,8CAAyBJ;AAIpD,QACE,8BAAA,cAACC,iBAAiBM,UAAQ,EACxBC,OAAO;EAAEN;EAAoBE;EAAsB,IAElDE,SAAAA;;AAKP,MAAaG,kDAAuCR,iBAAAA"}

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

@@ -1,19 +1,19 @@
-import React, { createContext, useContext, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const AppHeaderContext = /*#__PURE__*/createContext({
-  lastOpenedDropdown: undefined,
-  setLastOpenedDropdown: undefined
+import React, { createContext, useContext, useState } from "react";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderProvider/index.tsx
+const AppHeaderContext = /* @__PURE__ */ createContext({
+	lastOpenedDropdown: void 0,
+	setLastOpenedDropdown: void 0
 });
-export const AppHeaderProvider = ({
-  children
-}) => {
-  const [lastOpenedDropdown, setLastOpenedDropdown] = useState();
-  return /*#__PURE__*/_jsx(AppHeaderContext.Provider, {
-    value: {
-      lastOpenedDropdown,
-      setLastOpenedDropdown
-    },
-    children: children
-  });
+const AppHeaderProvider = ({ children }) => {
+	const [lastOpenedDropdown, setLastOpenedDropdown] = useState();
+	return /* @__PURE__ */ React.createElement(AppHeaderContext.Provider, { value: {
+		lastOpenedDropdown,
+		setLastOpenedDropdown
+	} }, children);
 };
-export const useAppHeaderContext = () => useContext(AppHeaderContext);
+const useAppHeaderContext = () => useContext(AppHeaderContext);
+
+//#endregion
+export { AppHeaderProvider, useAppHeaderContext };
+//# sourceMappingURL=index.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","createContext","useContext","useState","AppHeaderContext","lastOpenedDropdown","undefined","setLastOpenedDropdown","AppHeaderProvider","children","Provider","value","useAppHeaderContext"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderProvider/index.tsx"],"sourcesContent":["import React, {\n  createContext,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\nexport interface AppHeaderContextType {\n  lastOpenedDropdown: string | undefined;\n  setLastOpenedDropdown:\n    | Dispatch<SetStateAction<string | undefined>>\n    | undefined;\n}\n\nexport const AppHeaderContext = createContext<AppHeaderContextType>({\n  lastOpenedDropdown: undefined,\n  setLastOpenedDropdown: undefined,\n});\n\nexport const AppHeaderProvider: React.FC<{ children: ReactNode }> = ({\n  children,\n}) => {\n  const [lastOpenedDropdown, setLastOpenedDropdown] = useState<\n    string | undefined\n  >();\n\n  return (\n    <AppHeaderContext.Provider\n      value={{ lastOpenedDropdown, setLastOpenedDropdown }}\n    >\n      {children}\n    </AppHeaderContext.Provider>\n  );\n};\n\nexport const useAppHeaderContext = () => useContext(AppHeaderContext);\n"],"mappings":";;;AAgBA,MAAaI,mBAAmBH,8BAAoC;CAClEI,oBAAoBC;CACpBC,uBAAuBD;CACzB,CAAA;AAEA,MAAaE,qBAAwD,EACnEC,eACD;CACC,MAAM,CAACJ,oBAAoBE,yBAAyBJ,UAAAA;AAIpD,QACE,sBAAA,cAACC,iBAAiBM,UAAQ,EACxBC,OAAO;EAAEN;EAAoBE;EAAsB,IAElDE,SAAAA;;AAKP,MAAaG,4BAA4BV,WAAWE,iBAAAA"}

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.cjs

@@ -0,0 +1,88 @@
+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('../AppHeaderSection/AppHeaderSectionContext.cjs');
+const require_PanelLayout = require('../AppHeaderSection/PanelLayout.cjs');
+const require_index$1 = require('../AppHeaderSkillTile/index.cjs');
+const require_index$2 = require('../AppHeaderFeatureCard/index.cjs');
+const require_consts = require('./consts.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.tsx
+const DocsPanel = () => {
+	const description = /* @__PURE__ */ React.createElement(_codecademy_gamut.Box, { mb: 8 }, "Definitions and guides to help you understand programming languages, frameworks, and concepts.");
+	return /* @__PURE__ */ React.createElement(require_PanelLayout.PanelLayout, {
+		heading: "Docs",
+		description,
+		linkItem: {
+			type: "link",
+			href: "/docs",
+			text: "Explore all Docs",
+			trackingTarget: "topnav_resources_docs",
+			id: "docs"
+		}
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			xs: "1fr 1fr",
+			md: "1fr 1fr 1fr"
+		},
+		gap: 8,
+		pl: 0,
+		as: "ul",
+		listStyle: "none"
+	}, require_consts.docsLinks.map((item) => /* @__PURE__ */ React.createElement("li", { key: item.id }, /* @__PURE__ */ React.createElement(require_index$1.SkillTile, { item })))));
+};
+const LearningToolsPanel = () => {
+	return /* @__PURE__ */ React.createElement(require_PanelLayout.PanelLayout, {
+		heading: "Learning tools",
+		description: "Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: require_consts.learningToolsLinks }));
+};
+const PracticeToolsPanel = () => {
+	return /* @__PURE__ */ React.createElement(require_PanelLayout.PanelLayout, {
+		heading: "Practice tools",
+		description: "Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: require_consts.practiceToolsLinks }));
+};
+const InspirationPanel = () => {
+	return /* @__PURE__ */ React.createElement(require_PanelLayout.PanelLayout, {
+		heading: "Inspiration",
+		description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: require_consts.inspirationLinks }));
+};
+const FeatureCardPanel = ({ links }) => {
+	const { tabIndex } = require_AppHeaderSectionContext.useAppHeaderSectionContext();
+	const { globalHeaderItemClick } = require_context.useGlobalHeaderItemClick();
+	const { handleClose } = require_index.useAppHeaderDropdownContext();
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			sm: "1fr 1fr"
+		},
+		gridTemplateRows: {
+			_: "1fr",
+			sm: "1fr 1fr"
+		},
+		gap: 16,
+		pl: 0,
+		as: "ul",
+		listStyle: "none"
+	}, links.map((item) => /* @__PURE__ */ React.createElement("li", { key: `${item.linkItem.id}` }, /* @__PURE__ */ React.createElement(_codecademy_gamut.Anchor, {
+		variant: "interface",
+		href: item.linkItem.href,
+		onClick: (event) => {
+			globalHeaderItemClick(event, item.linkItem);
+			handleClose();
+		},
+		tabIndex,
+		height: "100%"
+	}, /* @__PURE__ */ React.createElement(require_index$2.AppHeaderFeatureCard, { item })))));
+};
+
+//#endregion
+exports.DocsPanel = DocsPanel;
+exports.InspirationPanel = InspirationPanel;
+exports.LearningToolsPanel = LearningToolsPanel;
+exports.PracticeToolsPanel = PracticeToolsPanel;
+//# sourceMappingURL=NavPanels.cjs.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavPanels.cjs","names":["Anchor","Box","GridBox","useGlobalHeaderItemClick","useAppHeaderDropdownContext","AppHeaderFeatureCard","useAppHeaderSectionContext","PanelLayout","SkillTile","docsLinks","inspirationLinks","learningToolsLinks","practiceToolsLinks","DocsPanel","description","mb","heading","linkItem","type","href","text","trackingTarget","id","gridTemplateColumns","_","xs","md","gap","pl","as","listStyle","map","item","li","key","LearningToolsPanel","FeatureCardPanel","links","PracticeToolsPanel","InspirationPanel","tabIndex","globalHeaderItemClick","handleClose","sm","gridTemplateRows","variant","onClick","event","height"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.tsx"],"sourcesContent":["import { Anchor, Box, GridBox } from '@codecademy/gamut';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\nimport { PanelLayout } from '../AppHeaderSection/PanelLayout';\nimport { SkillTile } from '../AppHeaderSkillTile';\nimport {\n  AppHeaderCardItem,\n  docsLinks,\n  inspirationLinks,\n  learningToolsLinks,\n  practiceToolsLinks,\n} from './consts';\n\ntype NavPanelProps = {\n  links: AppHeaderCardItem[];\n};\n\nexport const DocsPanel = () => {\n  const description = (\n    <Box mb={8}>\n      Definitions and guides to help you understand programming languages,\n      frameworks, and concepts.\n    </Box>\n  );\n\n  return (\n    <PanelLayout\n      heading=\"Docs\"\n      description={description}\n      linkItem={{\n        type: 'link',\n        href: '/docs',\n        text: 'Explore all Docs',\n        trackingTarget: 'topnav_resources_docs',\n        id: 'docs',\n      }}\n    >\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n      >\n        {docsLinks.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nexport const LearningToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Learning tools\"\n      description=\"Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey.\"\n    >\n      <FeatureCardPanel links={learningToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const PracticeToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Practice tools\"\n      description=\"Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces.\"\n    >\n      <FeatureCardPanel links={practiceToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const InspirationPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Inspiration\"\n      description=\"Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.\"\n    >\n      <FeatureCardPanel links={inspirationLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const FeatureCardPanel = ({ links }: NavPanelProps) => {\n  const { tabIndex } = useAppHeaderSectionContext();\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  return (\n    <GridBox\n      gridTemplateColumns={{ _: '1fr', sm: '1fr 1fr' }}\n      gridTemplateRows={{ _: '1fr', sm: '1fr 1fr' }}\n      gap={16}\n      pl={0}\n      as=\"ul\"\n      listStyle=\"none\"\n    >\n      {links.map((item) => (\n        <li key={`${item.linkItem.id}`}>\n          <Anchor\n            variant=\"interface\"\n            href={item.linkItem.href}\n            onClick={(\n              event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n            ) => {\n              globalHeaderItemClick(event, item.linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            height=\"100%\"\n          >\n            <AppHeaderFeatureCard item={item} />\n          </Anchor>\n        </li>\n      ))}\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAaa,kBAAY;CACvB,MAAMC,cACJ,sBAAA,cAACb,uBAAAA,EAAIc,IAAI,KAAG,iGAAA;AAMd,QACE,sBAAA,cAACR,iCAAAA;EACCS,SAAQ;EACKF;EACbG,UAAU;GACRC,MAAM;GACNC,MAAM;GACNC,MAAM;GACNC,gBAAgB;GAChBC,IAAI;GACN;IAEA,sBAAA,cAACpB,2BAAAA;EACCqB,qBAAqB;GAAEC,GAAG;GAAOC,IAAI;GAAWC,IAAI;GAAc;EAClEC,KAAK;EACLC,IAAI;EACJC,IAAG;EACHC,WAAU;IAETrB,yBAAUsB,KAAKC,SACd,sBAAA,cAACC,MAAAA,EAAGC,KAAKF,KAAKV,MACZ,sBAAA,cAACd,2BAAAA,EAAgBwB;;AAQ7B,MAAaG,2BAAqB;AAChC,QACE,sBAAA,cAAC5B,iCAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAO1B;;AAK/B,MAAa2B,2BAAqB;AAChC,QACE,sBAAA,cAAC/B,iCAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAOzB;;AAK/B,MAAa2B,yBAAmB;AAC9B,QACE,sBAAA,cAAChC,iCAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAO3B;;AAK/B,MAAa0B,oBAAoB,EAAEC,YAAsB;CACvD,MAAM,EAAEG,aAAalC,4DAAAA;CACrB,MAAM,EAAEmC,0BAA0BtC,0CAAAA;CAClC,MAAM,EAAEuC,gBAAgBtC,2CAAAA;AAExB,QACE,sBAAA,cAACF,2BAAAA;EACCqB,qBAAqB;GAAEC,GAAG;GAAOmB,IAAI;GAAU;EAC/CC,kBAAkB;GAAEpB,GAAG;GAAOmB,IAAI;GAAU;EAC5ChB,KAAK;EACLC,IAAI;EACJC,IAAG;EACHC,WAAU;IAETO,MAAMN,KAAKC,SACV,sBAAA,cAACC,MAAAA,EAAGC,KAAK,GAAGF,KAAKf,SAASK,QACxB,sBAAA,cAACtB,0BAAAA;EACC6C,SAAQ;EACR1B,MAAMa,KAAKf,SAASE;EACpB2B,UACEC,UAAAA;AAEAN,yBAAsBM,OAAOf,KAAKf,SAAQ;AAC1CyB,gBAAAA;;EAEQF;EACVQ,QAAO;IAEP,sBAAA,cAAC3C,sCAAAA,EAA2B2B"}

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js

@@ -1,111 +1,84 @@
-import { Anchor, Box, GridBox } from '@codecademy/gamut';
-import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';
-import { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';
-import { PanelLayout } from '../AppHeaderSection/PanelLayout';
-import { SkillTile } from '../AppHeaderSkillTile';
-import { docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks } from './consts';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DocsPanel = () => {
-  const description = /*#__PURE__*/_jsx(Box, {
-    mb: 8,
-    children: "Definitions and guides to help you understand programming languages, frameworks, and concepts."
-  });
-  return /*#__PURE__*/_jsx(PanelLayout, {
-    heading: "Docs",
-    description: description,
-    linkItem: {
-      type: 'link',
-      href: '/docs',
-      text: 'Explore all Docs',
-      trackingTarget: 'topnav_resources_docs',
-      id: 'docs'
-    },
-    children: /*#__PURE__*/_jsx(GridBox, {
-      gridTemplateColumns: {
-        _: '1fr',
-        xs: '1fr 1fr',
-        md: '1fr 1fr 1fr'
-      },
-      gap: 8,
-      pl: 0,
-      as: "ul",
-      listStyle: "none",
-      children: docsLinks.map(item => /*#__PURE__*/_jsx("li", {
-        children: /*#__PURE__*/_jsx(SkillTile, {
-          item: item
-        })
-      }, item.id))
-    })
-  });
+import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.js";
+import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.js";
+import { useAppHeaderSectionContext } from "../AppHeaderSection/AppHeaderSectionContext.js";
+import { PanelLayout } from "../AppHeaderSection/PanelLayout.js";
+import { SkillTile } from "../AppHeaderSkillTile/index.js";
+import { AppHeaderFeatureCard } from "../AppHeaderFeatureCard/index.js";
+import { docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks } from "./consts.js";
+import { Anchor, Box, GridBox } from "@codecademy/gamut";
+
+//#region src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.tsx
+const DocsPanel = () => {
+	const description = /* @__PURE__ */ React.createElement(Box, { mb: 8 }, "Definitions and guides to help you understand programming languages, frameworks, and concepts.");
+	return /* @__PURE__ */ React.createElement(PanelLayout, {
+		heading: "Docs",
+		description,
+		linkItem: {
+			type: "link",
+			href: "/docs",
+			text: "Explore all Docs",
+			trackingTarget: "topnav_resources_docs",
+			id: "docs"
+		}
+	}, /* @__PURE__ */ React.createElement(GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			xs: "1fr 1fr",
+			md: "1fr 1fr 1fr"
+		},
+		gap: 8,
+		pl: 0,
+		as: "ul",
+		listStyle: "none"
+	}, docsLinks.map((item) => /* @__PURE__ */ React.createElement("li", { key: item.id }, /* @__PURE__ */ React.createElement(SkillTile, { item })))));
 };
-export const LearningToolsPanel = () => {
-  return /*#__PURE__*/_jsx(PanelLayout, {
-    heading: "Learning tools",
-    description: "Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey.",
-    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
-      links: learningToolsLinks
-    })
-  });
+const LearningToolsPanel = () => {
+	return /* @__PURE__ */ React.createElement(PanelLayout, {
+		heading: "Learning tools",
+		description: "Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: learningToolsLinks }));
 };
-export const PracticeToolsPanel = () => {
-  return /*#__PURE__*/_jsx(PanelLayout, {
-    heading: "Practice tools",
-    description: "Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces.",
-    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
-      links: practiceToolsLinks
-    })
-  });
+const PracticeToolsPanel = () => {
+	return /* @__PURE__ */ React.createElement(PanelLayout, {
+		heading: "Practice tools",
+		description: "Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: practiceToolsLinks }));
 };
-export const InspirationPanel = () => {
-  return /*#__PURE__*/_jsx(PanelLayout, {
-    heading: "Inspiration",
-    description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.",
-    children: /*#__PURE__*/_jsx(FeatureCardPanel, {
-      links: inspirationLinks
-    })
-  });
+const InspirationPanel = () => {
+	return /* @__PURE__ */ React.createElement(PanelLayout, {
+		heading: "Inspiration",
+		description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners."
+	}, /* @__PURE__ */ React.createElement(FeatureCardPanel, { links: inspirationLinks }));
 };
-export const FeatureCardPanel = ({
-  links
-}) => {
-  const {
-    tabIndex
-  } = useAppHeaderSectionContext();
-  const {
-    globalHeaderItemClick
-  } = useGlobalHeaderItemClick();
-  const {
-    handleClose
-  } = useAppHeaderDropdownContext();
-  return /*#__PURE__*/_jsx(GridBox, {
-    gridTemplateColumns: {
-      _: '1fr',
-      sm: '1fr 1fr'
-    },
-    gridTemplateRows: {
-      _: '1fr',
-      sm: '1fr 1fr'
-    },
-    gap: 16,
-    pl: 0,
-    as: "ul",
-    listStyle: "none",
-    children: links.map(item => /*#__PURE__*/_jsx("li", {
-      children: /*#__PURE__*/_jsx(Anchor, {
-        variant: "interface",
-        href: item.linkItem.href,
-        onClick: event => {
-          globalHeaderItemClick(event, item.linkItem);
-          handleClose();
-        },
-        tabIndex: tabIndex,
-        height: "100%",
-        children: /*#__PURE__*/_jsx(AppHeaderFeatureCard, {
-          item: item
-        })
-      })
-    }, `${item.linkItem.id}`))
-  });
-};
+const FeatureCardPanel = ({ links }) => {
+	const { tabIndex } = useAppHeaderSectionContext();
+	const { globalHeaderItemClick } = useGlobalHeaderItemClick();
+	const { handleClose } = useAppHeaderDropdownContext();
+	return /* @__PURE__ */ React.createElement(GridBox, {
+		gridTemplateColumns: {
+			_: "1fr",
+			sm: "1fr 1fr"
+		},
+		gridTemplateRows: {
+			_: "1fr",
+			sm: "1fr 1fr"
+		},
+		gap: 16,
+		pl: 0,
+		as: "ul",
+		listStyle: "none"
+	}, links.map((item) => /* @__PURE__ */ React.createElement("li", { key: `${item.linkItem.id}` }, /* @__PURE__ */ React.createElement(Anchor, {
+		variant: "interface",
+		href: item.linkItem.href,
+		onClick: (event) => {
+			globalHeaderItemClick(event, item.linkItem);
+			handleClose();
+		},
+		tabIndex,
+		height: "100%"
+	}, /* @__PURE__ */ React.createElement(AppHeaderFeatureCard, { item })))));
+};
+
+//#endregion
+export { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel };
+//# sourceMappingURL=NavPanels.js.map

package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavPanels.js","names":["Anchor","Box","GridBox","useGlobalHeaderItemClick","useAppHeaderDropdownContext","AppHeaderFeatureCard","useAppHeaderSectionContext","PanelLayout","SkillTile","docsLinks","inspirationLinks","learningToolsLinks","practiceToolsLinks","DocsPanel","description","mb","heading","linkItem","type","href","text","trackingTarget","id","gridTemplateColumns","_","xs","md","gap","pl","as","listStyle","map","item","li","key","LearningToolsPanel","FeatureCardPanel","links","PracticeToolsPanel","InspirationPanel","tabIndex","globalHeaderItemClick","handleClose","sm","gridTemplateRows","variant","onClick","event","height"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.tsx"],"sourcesContent":["import { Anchor, Box, GridBox } from '@codecademy/gamut';\n\nimport { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';\nimport { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';\nimport { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';\nimport { useAppHeaderSectionContext } from '../AppHeaderSection/AppHeaderSectionContext';\nimport { PanelLayout } from '../AppHeaderSection/PanelLayout';\nimport { SkillTile } from '../AppHeaderSkillTile';\nimport {\n  AppHeaderCardItem,\n  docsLinks,\n  inspirationLinks,\n  learningToolsLinks,\n  practiceToolsLinks,\n} from './consts';\n\ntype NavPanelProps = {\n  links: AppHeaderCardItem[];\n};\n\nexport const DocsPanel = () => {\n  const description = (\n    <Box mb={8}>\n      Definitions and guides to help you understand programming languages,\n      frameworks, and concepts.\n    </Box>\n  );\n\n  return (\n    <PanelLayout\n      heading=\"Docs\"\n      description={description}\n      linkItem={{\n        type: 'link',\n        href: '/docs',\n        text: 'Explore all Docs',\n        trackingTarget: 'topnav_resources_docs',\n        id: 'docs',\n      }}\n    >\n      <GridBox\n        gridTemplateColumns={{ _: '1fr', xs: '1fr 1fr', md: '1fr 1fr 1fr' }}\n        gap={8}\n        pl={0}\n        as=\"ul\"\n        listStyle=\"none\"\n      >\n        {docsLinks.map((item) => (\n          <li key={item.id}>\n            <SkillTile item={item} />\n          </li>\n        ))}\n      </GridBox>\n    </PanelLayout>\n  );\n};\n\nexport const LearningToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Learning tools\"\n      description=\"Explore free resources that help you understand key concepts and stay on track. From articles and cheatsheets to videos and projects, these tools support you throughout your learning journey.\"\n    >\n      <FeatureCardPanel links={learningToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const PracticeToolsPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Practice tools\"\n      description=\"Build confidence and reinforce what you've learned through hands-on practice. Tackle real coding challenges, simulate job interviews, and test your skills in interactive workspaces.\"\n    >\n      <FeatureCardPanel links={practiceToolsLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const InspirationPanel = () => {\n  return (\n    <PanelLayout\n      heading=\"Inspiration\"\n      description=\"Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.\"\n    >\n      <FeatureCardPanel links={inspirationLinks} />\n    </PanelLayout>\n  );\n};\n\nexport const FeatureCardPanel = ({ links }: NavPanelProps) => {\n  const { tabIndex } = useAppHeaderSectionContext();\n  const { globalHeaderItemClick } = useGlobalHeaderItemClick();\n  const { handleClose } = useAppHeaderDropdownContext();\n\n  return (\n    <GridBox\n      gridTemplateColumns={{ _: '1fr', sm: '1fr 1fr' }}\n      gridTemplateRows={{ _: '1fr', sm: '1fr 1fr' }}\n      gap={16}\n      pl={0}\n      as=\"ul\"\n      listStyle=\"none\"\n    >\n      {links.map((item) => (\n        <li key={`${item.linkItem.id}`}>\n          <Anchor\n            variant=\"interface\"\n            href={item.linkItem.href}\n            onClick={(\n              event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n            ) => {\n              globalHeaderItemClick(event, item.linkItem);\n              handleClose();\n            }}\n            tabIndex={tabIndex}\n            height=\"100%\"\n          >\n            <AppHeaderFeatureCard item={item} />\n          </Anchor>\n        </li>\n      ))}\n    </GridBox>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA,MAAaa,kBAAY;CACvB,MAAMC,cACJ,sBAAA,cAACb,KAAAA,EAAIc,IAAI,KAAG,iGAAA;AAMd,QACE,sBAAA,cAACR,aAAAA;EACCS,SAAQ;EACKF;EACbG,UAAU;GACRC,MAAM;GACNC,MAAM;GACNC,MAAM;GACNC,gBAAgB;GAChBC,IAAI;GACN;IAEA,sBAAA,cAACpB,SAAAA;EACCqB,qBAAqB;GAAEC,GAAG;GAAOC,IAAI;GAAWC,IAAI;GAAc;EAClEC,KAAK;EACLC,IAAI;EACJC,IAAG;EACHC,WAAU;IAETrB,UAAUsB,KAAKC,SACd,sBAAA,cAACC,MAAAA,EAAGC,KAAKF,KAAKV,MACZ,sBAAA,cAACd,WAAAA,EAAgBwB;;AAQ7B,MAAaG,2BAAqB;AAChC,QACE,sBAAA,cAAC5B,aAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAO1B;;AAK/B,MAAa2B,2BAAqB;AAChC,QACE,sBAAA,cAAC/B,aAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAOzB;;AAK/B,MAAa2B,yBAAmB;AAC9B,QACE,sBAAA,cAAChC,aAAAA;EACCS,SAAQ;EACRF,aAAY;IAEZ,sBAAA,cAACsB,kBAAAA,EAAiBC,OAAO3B;;AAK/B,MAAa0B,oBAAoB,EAAEC,YAAsB;CACvD,MAAM,EAAEG,aAAalC,4BAAAA;CACrB,MAAM,EAAEmC,0BAA0BtC,0BAAAA;CAClC,MAAM,EAAEuC,gBAAgBtC,6BAAAA;AAExB,QACE,sBAAA,cAACF,SAAAA;EACCqB,qBAAqB;GAAEC,GAAG;GAAOmB,IAAI;GAAU;EAC/CC,kBAAkB;GAAEpB,GAAG;GAAOmB,IAAI;GAAU;EAC5ChB,KAAK;EACLC,IAAI;EACJC,IAAG;EACHC,WAAU;IAETO,MAAMN,KAAKC,SACV,sBAAA,cAACC,MAAAA,EAAGC,KAAK,GAAGF,KAAKf,SAASK,QACxB,sBAAA,cAACtB,QAAAA;EACC6C,SAAQ;EACR1B,MAAMa,KAAKf,SAASE;EACpB2B,UACEC,UAAAA;AAEAN,yBAAsBM,OAAOf,KAAKf,SAAQ;AAC1CyB,gBAAAA;;EAEQF;EACVQ,QAAO;IAEP,sBAAA,cAAC3C,sBAAAA,EAA2B2B"}