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

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

@@ -1,85 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../../GlobalHeader/context.cjs');
-const require_index = require('../AppHeaderDropdownProvider/index.cjs');
-const require_AppHeaderSectionContext = require('./AppHeaderSectionContext.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let react_jsx_runtime = require("react/jsx-runtime");
-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__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-		flexDirection: "column",
-		gap: {
-			_: 8,
-			xs: 8
-		},
-		pr: {
-			_: 0,
-			md: 16,
-			lg: 0
-		},
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-				alignItems: "center",
-				gap: {
-					_: 8,
-					xs: 0
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_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__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-					as: "h2",
-					variant: "title-sm",
-					children: heading
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
-				mb: 16,
-				children: description
-			}),
-			children,
-			linkItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
-				justifyContent: "center",
-				mt: 16,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
-					href: linkItem.href,
-					onClick: (event) => {
-						globalHeaderItemClick(event, linkItem);
-						handleClose();
-					},
-					tabIndex,
-					variant: "standard",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
-						alignItems: "center",
-						gap: 8,
-						children: [
-							linkItem.text,
-							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.MiniArrowRightIcon, {})
-						]
-					})
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-exports.PanelLayout = PanelLayout;
-//# sourceMappingURL=PanelLayout.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PanelLayout.cjs","names":["useGlobalHeaderItemClick","useAppHeaderDropdownContext","useAppHeaderSectionContext","FlexBox","IconButton","ArrowLeftIcon","Text","Anchor","MiniArrowRightIcon"],"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,MAAa,eAAe,EAC1B,SACA,aACA,UACA,eACsB;CACtB,MAAM,EAAE,0BAA0BA,0CAA0B;CAC5D,MAAM,EAAE,gBAAgBC,2CAA6B;CACrD,MAAM,EAAE,gBAAgB,aAAaC,4DAA4B;AAEjE,QACE,4CAACC;EACC,eAAc;EACd,KAAK;GAAE,GAAG;GAAG,IAAI;GAAG;EACpB,IAAI;GAAE,GAAG;GAAG,IAAI;GAAI,IAAI;GAAG;;GAE3B,4CAACA;IAAQ,YAAW;IAAS,KAAK;KAAE,GAAG;KAAG,IAAI;KAAG;eAC/C,2CAACC;KACC,eAAe,eAAe,KAAK;KACnC,MAAMC;KACN,KAAI;KACJ,UAAU;MACR,WAAW;MACX,QAAQ;MACR,WAAW;MACZ;KACD,cAAW;KACX,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ;MAClC,EACF,2CAACC;KAAK,IAAG;KAAK,SAAQ;eACnB;MACI;KACC;GACV,2CAACA;IAAK,IAAI;cAAK;KAAmB;GACjC;GACA,YACC,2CAACH;IAAQ,gBAAe;IAAS,IAAI;cACnC,2CAACI;KACC,MAAM,SAAS;KACf,UAAU,UAA4B;AACpC,4BAAsB,OAAO,SAAS;AACtC,mBAAa;;KAEL;KACV,SAAQ;eAER,4CAACJ;MAAQ,YAAW;MAAS,KAAK;;OAC/B,SAAS;OAAK;OAAC,2CAACK,+CAAqB;;OAC9B;MACH;KACD;;GAEJ"}

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

@@ -1,84 +0,0 @@
-import { useGlobalHeaderItemClick } from "../../../GlobalHeader/context.mjs";
-import { useAppHeaderDropdownContext } from "../AppHeaderDropdownProvider/index.mjs";
-import { useAppHeaderSectionContext } from "./AppHeaderSectionContext.mjs";
-import { Anchor, FlexBox, IconButton, Text } from "@codecademy/gamut";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ 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,
-					variant: "standard",
-					children: /* @__PURE__ */ jsxs(FlexBox, {
-						alignItems: "center",
-						gap: 8,
-						children: [
-							linkItem.text,
-							" ",
-							/* @__PURE__ */ jsx(MiniArrowRightIcon, {})
-						]
-					})
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-export { PanelLayout };
-//# sourceMappingURL=PanelLayout.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PanelLayout.mjs","names":[],"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,MAAa,eAAe,EAC1B,SACA,aACA,UACA,eACsB;CACtB,MAAM,EAAE,0BAA0B,0BAA0B;CAC5D,MAAM,EAAE,gBAAgB,6BAA6B;CACrD,MAAM,EAAE,gBAAgB,aAAa,4BAA4B;AAEjE,QACE,qBAAC;EACC,eAAc;EACd,KAAK;GAAE,GAAG;GAAG,IAAI;GAAG;EACpB,IAAI;GAAE,GAAG;GAAG,IAAI;GAAI,IAAI;GAAG;;GAE3B,qBAAC;IAAQ,YAAW;IAAS,KAAK;KAAE,GAAG;KAAG,IAAI;KAAG;eAC/C,oBAAC;KACC,eAAe,eAAe,KAAK;KACnC,MAAM;KACN,KAAI;KACJ,UAAU;MACR,WAAW;MACX,QAAQ;MACR,WAAW;MACZ;KACD,cAAW;KACX,SAAS;MAAE,GAAG;MAAQ,IAAI;MAAQ;MAClC,EACF,oBAAC;KAAK,IAAG;KAAK,SAAQ;eACnB;MACI;KACC;GACV,oBAAC;IAAK,IAAI;cAAK;KAAmB;GACjC;GACA,YACC,oBAAC;IAAQ,gBAAe;IAAS,IAAI;cACnC,oBAAC;KACC,MAAM,SAAS;KACf,UAAU,UAA4B;AACpC,4BAAsB,OAAO,SAAS;AACtC,mBAAa;;KAEL;KACV,SAAQ;eAER,qBAAC;MAAQ,YAAW;MAAS,KAAK;;OAC/B,SAAS;OAAK;OAAC,oBAAC,uBAAqB;;OAC9B;MACH;KACD;;GAEJ"}

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

@@ -1,180 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx
-const StyledSection = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
-  border-radius: 16px;
-  overflow: hidden;
-  background-color: ${({ activePanelSelected, theme }) => activePanelSelected ? theme.colors["gray-100"] : theme.colors.background};
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 480px) {
-    background-color: ${({ theme }) => theme.colors["gray-100"]};
-  }
-
-  // at this breakpoint the menu becomes a dropdown
-  @media (min-width: 1200px) {
-    width: calc(100dvw - 11rem);
-    max-width: calc(1440px - 11rem);
-    max-height: 85vh;
-  }
-`;
-const ScrollableContent = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border-radius: 16px;
-
-  /* Custom scrollbar styling to maintain border-radius */
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 0 16px 16px 0;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    background-clip: content-box;
-    opacity: 0.8;
-  }
-
-  /* For Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => theme.colors["gray-300"]} transparent;
-`;
-const NavTabContainer = (0, _emotion_styled.default)(_codecademy_gamut.GridBox)`
-  grid-template-columns: 297px 32px 1fr;
-
-  @media (max-width: 767px) {
-    grid-template-columns: 64px 1fr 1fr;
-  }
-  @media (max-width: 479px) {
-    display: none;
-  }
-`;
-const GradientBackground = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 7.65%,
-    rgba(0, 0, 0, 0.15) 100%
-  );
-`;
-const SmallMenuButton = _emotion_styled.default.button`
-  grid-column: 1;
-  grid-row: ${({ index }) => index + 1};
-  padding: 16px;
-  border: none;
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-  color: ${({ theme }) => theme.colors.text};
-  width: 100%;
-  text-align: left;
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme }) => theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-`;
-const OverflowText = (0, _emotion_styled.default)(_codecademy_gamut.Text)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-const StyledNavTabPanel = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  border-radius: ${({ isFirst }) => isFirst ? "0 8px 8px 8px" : "8px"};
-
-  @media (max-width: 1200px) {
-    border-radius: 8px;
-  }
-`;
-const NavigationButton = _emotion_styled.default.button`
-  grid-column: 1;
-  padding: 16px;
-  border: none;
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-  background: none;
-  cursor: pointer;
-  color: ${({ theme, isActive }) => isActive ? theme.colors.primary : theme.colors.text};
-  text-align: left;
-  width: ${({ isActive }) => isActive ? "100%" : "calc(100% - 8px)"};
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ isActive, theme }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  padding-right: ${({ isActive }) => isActive ? "24px" : "16px"};
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: ${({ theme, isActive }) => isActive ? "none" : `0 0 0 2px ${theme.colors.primary}`};
-  }
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-const NavIconButtonContainer = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
-  background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-
-  grid-column: 1;
-  padding: 8px;
-
-  &:focus {
-    border-color: ${({ theme }) => theme.colors.primary};
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 8px;
-  }
-`;
-const NavIconButton = (0, _emotion_styled.default)(_codecademy_gamut.IconButton)`
-  &:hover,
-  &:focus svg {
-    &:hover,
-    &:focus {
-      color: ${({ theme }) => theme.colors.primary};
-      background-color: ${({ theme }) => theme.colors["navy-100"]};
-    }
-  }
-`;
-
-//#endregion
-exports.GradientBackground = GradientBackground;
-exports.NavIconButton = NavIconButton;
-exports.NavIconButtonContainer = NavIconButtonContainer;
-exports.NavTabContainer = NavTabContainer;
-exports.NavigationButton = NavigationButton;
-exports.OverflowText = OverflowText;
-exports.ScrollableContent = ScrollableContent;
-exports.SmallMenuButton = SmallMenuButton;
-exports.StyledNavTabPanel = StyledNavTabPanel;
-exports.StyledSection = StyledSection;
-//# sourceMappingURL=elements.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"elements.cjs","names":["Box","GridBox","Text","IconButton"],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx"],"sourcesContent":["import { Box, GridBox, IconButton, Text } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\nexport const StyledSection = styled(Box)<{ activePanelSelected: boolean }>`\n  width: 100%;\n  max-width: 100%;\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ${({ activePanelSelected, theme }) =>\n    activePanelSelected ? theme.colors['gray-100'] : theme.colors.background};\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 480px) {\n    background-color: ${({ theme }) => theme.colors['gray-100']};\n  }\n\n  // at this breakpoint the menu becomes a dropdown\n  @media (min-width: 1200px) {\n    width: calc(100dvw - 11rem);\n    max-width: calc(1440px - 11rem);\n    max-height: 85vh;\n  }\n`;\n\nexport const ScrollableContent = styled(Box)`\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: 16px;\n\n  /* Custom scrollbar styling to maintain border-radius */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 0 16px 16px 0;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    border-radius: 4px;\n    border: 2px solid transparent;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    background-clip: content-box;\n    opacity: 0.8;\n  }\n\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors['gray-300']} transparent;\n`;\n\nexport const NavTabContainer = styled(GridBox)`\n  grid-template-columns: 297px 32px 1fr;\n\n  @media (max-width: 767px) {\n    grid-template-columns: 64px 1fr 1fr;\n  }\n  @media (max-width: 479px) {\n    display: none;\n  }\n`;\n\nexport const GradientBackground = styled(Box)`\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  );\n`;\n\nexport const SmallMenuButton = styled.button<{ index: number }>`\n  grid-column: 1;\n  grid-row: ${({ index }) => index + 1};\n  padding: 16px;\n  border: none;\n  border-radius: 8px;\n  background: none;\n  cursor: pointer;\n  color: ${({ theme }) => theme.colors.text};\n  width: 100%;\n  text-align: left;\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const OverflowText = styled(Text)`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n\nexport const StyledNavTabPanel = styled(Box)<{\n  isFirst: boolean;\n}>`\n  border-radius: ${({ isFirst }) => (isFirst ? '0 8px 8px 8px' : '8px')};\n\n  @media (max-width: 1200px) {\n    border-radius: 8px;\n  }\n`;\n\nexport const NavigationButton = styled.button<{\n  isActive: boolean;\n}>`\n  grid-column: 1;\n  padding: 16px;\n  border: none;\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n  background: none;\n  cursor: pointer;\n  color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.primary : theme.colors.text};\n  text-align: left;\n  width: ${({ isActive }) => (isActive ? '100%' : 'calc(100% - 8px)')};\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: ${({ isActive, theme }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  padding-right: ${({ isActive }) => (isActive ? '24px' : '16px')};\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme, isActive }) =>\n      isActive ? theme.colors.background : theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: ${({ theme, isActive }) =>\n      isActive ? 'none' : `0 0 0 2px ${theme.colors.primary}`};\n  }\n\n  @media (max-width: 767px) {\n    display: none;\n  }\n`;\n\nexport const NavIconButtonContainer = styled(Box)<{\n  isActive: boolean;\n}>`\n  background-color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n\n  grid-column: 1;\n  padding: 8px;\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n`;\n\nexport const NavIconButton = styled(IconButton)`\n  &:hover,\n  &:focus svg {\n    &:hover,\n    &:focus {\n      color: ${({ theme }) => theme.colors.primary};\n      background-color: ${({ theme }) => theme.colors['navy-100']};\n    }\n  }\n`;\n"],"mappings":";;;;;;AAGA,MAAa,gBAAgB,6BAAOA,sBAAI,AAAkC;;;uBAGnD,EAAE,YAAY,MAAM,OAAO,mBAAmB;;;uBAG9C,EAAE,qBAAqB,YAC1C,sBAAsB,MAAM,OAAO,cAAc,MAAM,OAAO,WAAW;;;;;yBAKpD,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;;;;AAWhE,MAAa,oBAAoB,6BAAOA,sBAAI;;;;;;;;;;;;;;;;;mBAiBzB,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;mBAOvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;sBAOpC,EAAE,YAAY,MAAM,OAAO,YAAY;;AAG7D,MAAa,kBAAkB,6BAAOC,0BAAQ;;;;;;;;;;AAW9C,MAAa,qBAAqB,6BAAOD,sBAAI;;;;;;;AAQ7C,MAAa,kBAAkB,wBAAO,MAAyB;;eAEhD,EAAE,YAAY,QAAQ,EAAE;;;;;;YAM3B,EAAE,YAAY,MAAM,OAAO,KAAK;;;;;;;;;;yBAUnB,EAAE,YAAY,MAAM,OAAO,YAAY;cAClD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;AAIjD,MAAa,eAAe,6BAAOE,uBAAK;;;;;AAMxC,MAAa,oBAAoB,6BAAOF,sBAAI,AAE1C;oBACkB,EAAE,cAAe,UAAU,kBAAkB,MAAO;;;;;;AAOxE,MAAa,mBAAmB,wBAAO,MAErC;;;;oBAIkB,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;YAG5D,EAAE,OAAO,eACjB,WAAW,MAAM,OAAO,UAAU,MAAM,OAAO,KAAK;;YAE5C,EAAE,eAAgB,WAAW,SAAS,mBAAoB;;;;;uBAK/C,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,SAAS,OAAQ;;;;yBAIzC,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;cACtD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;mBAK9B,EAAE,OAAO,eACtB,WAAW,SAAS,aAAa,MAAM,OAAO,UAAU;;;;;;;AAQ9D,MAAa,yBAAyB,6BAAOA,sBAAI,AAE/C;uBACqB,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;;;;qBAMnD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;;AAOxD,MAAa,gBAAgB,6BAAOG,6BAAW;;;;;gBAK/B,EAAE,YAAY,MAAM,OAAO,QAAQ;2BACxB,EAAE,YAAY,MAAM,OAAO,YAAY"}

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

@@ -1,169 +0,0 @@
-import { Box, GridBox, IconButton, Text } from "@codecademy/gamut";
-import styled from "@emotion/styled";
-
-//#region src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx
-const StyledSection = styled(Box)`
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid ${({ theme }) => theme.colors["border-tertiary"]};
-  border-radius: 16px;
-  overflow: hidden;
-  background-color: ${({ activePanelSelected, theme }) => activePanelSelected ? theme.colors["gray-100"] : theme.colors.background};
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 480px) {
-    background-color: ${({ theme }) => theme.colors["gray-100"]};
-  }
-
-  // at this breakpoint the menu becomes a dropdown
-  @media (min-width: 1200px) {
-    width: calc(100dvw - 11rem);
-    max-width: calc(1440px - 11rem);
-    max-height: 85vh;
-  }
-`;
-const ScrollableContent = styled(Box)`
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border-radius: 16px;
-
-  /* Custom scrollbar styling to maintain border-radius */
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 0 16px 16px 0;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme }) => theme.colors["gray-300"]};
-    background-clip: content-box;
-    opacity: 0.8;
-  }
-
-  /* For Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: ${({ theme }) => theme.colors["gray-300"]} transparent;
-`;
-const NavTabContainer = styled(GridBox)`
-  grid-template-columns: 297px 32px 1fr;
-
-  @media (max-width: 767px) {
-    grid-template-columns: 64px 1fr 1fr;
-  }
-  @media (max-width: 479px) {
-    display: none;
-  }
-`;
-const GradientBackground = styled(Box)`
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 7.65%,
-    rgba(0, 0, 0, 0.15) 100%
-  );
-`;
-const SmallMenuButton = styled.button`
-  grid-column: 1;
-  grid-row: ${({ index }) => index + 1};
-  padding: 16px;
-  border: none;
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-  color: ${({ theme }) => theme.colors.text};
-  width: 100%;
-  text-align: left;
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme }) => theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-`;
-const OverflowText = styled(Text)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-const StyledNavTabPanel = styled(Box)`
-  border-radius: ${({ isFirst }) => isFirst ? "0 8px 8px 8px" : "8px"};
-
-  @media (max-width: 1200px) {
-    border-radius: 8px;
-  }
-`;
-const NavigationButton = styled.button`
-  grid-column: 1;
-  padding: 16px;
-  border: none;
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-  background: none;
-  cursor: pointer;
-  color: ${({ theme, isActive }) => isActive ? theme.colors.primary : theme.colors.text};
-  text-align: left;
-  width: ${({ isActive }) => isActive ? "100%" : "calc(100% - 8px)"};
-  height: 60px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ isActive, theme }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  padding-right: ${({ isActive }) => isActive ? "24px" : "16px"};
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["navy-100"]};
-    color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: ${({ theme, isActive }) => isActive ? "none" : `0 0 0 2px ${theme.colors.primary}`};
-  }
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-const NavIconButtonContainer = styled(Box)`
-  background-color: ${({ theme, isActive }) => isActive ? theme.colors.background : theme.colors["gray-100"]};
-  border-radius: ${({ isActive }) => isActive ? "8px 0 0 8px" : "8px"};
-
-  grid-column: 1;
-  padding: 8px;
-
-  &:focus {
-    border-color: ${({ theme }) => theme.colors.primary};
-    border-width: 2px;
-    border-style: solid;
-    border-radius: 8px;
-  }
-`;
-const NavIconButton = styled(IconButton)`
-  &:hover,
-  &:focus svg {
-    &:hover,
-    &:focus {
-      color: ${({ theme }) => theme.colors.primary};
-      background-color: ${({ theme }) => theme.colors["navy-100"]};
-    }
-  }
-`;
-
-//#endregion
-export { GradientBackground, NavIconButton, NavIconButtonContainer, NavTabContainer, NavigationButton, OverflowText, ScrollableContent, SmallMenuButton, StyledNavTabPanel, StyledSection };
-//# sourceMappingURL=elements.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"elements.mjs","names":[],"sources":["../../../../src/AppHeader/AppHeaderElements/AppHeaderSection/elements.tsx"],"sourcesContent":["import { Box, GridBox, IconButton, Text } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\n\nexport const StyledSection = styled(Box)<{ activePanelSelected: boolean }>`\n  width: 100%;\n  max-width: 100%;\n  border: 1px solid ${({ theme }) => theme.colors['border-tertiary']};\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ${({ activePanelSelected, theme }) =>\n    activePanelSelected ? theme.colors['gray-100'] : theme.colors.background};\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 480px) {\n    background-color: ${({ theme }) => theme.colors['gray-100']};\n  }\n\n  // at this breakpoint the menu becomes a dropdown\n  @media (min-width: 1200px) {\n    width: calc(100dvw - 11rem);\n    max-width: calc(1440px - 11rem);\n    max-height: 85vh;\n  }\n`;\n\nexport const ScrollableContent = styled(Box)`\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: 16px;\n\n  /* Custom scrollbar styling to maintain border-radius */\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n    border-radius: 0 16px 16px 0;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    border-radius: 4px;\n    border: 2px solid transparent;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: ${({ theme }) => theme.colors['gray-300']};\n    background-clip: content-box;\n    opacity: 0.8;\n  }\n\n  /* For Firefox */\n  scrollbar-width: thin;\n  scrollbar-color: ${({ theme }) => theme.colors['gray-300']} transparent;\n`;\n\nexport const NavTabContainer = styled(GridBox)`\n  grid-template-columns: 297px 32px 1fr;\n\n  @media (max-width: 767px) {\n    grid-template-columns: 64px 1fr 1fr;\n  }\n  @media (max-width: 479px) {\n    display: none;\n  }\n`;\n\nexport const GradientBackground = styled(Box)`\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0) 7.65%,\n    rgba(0, 0, 0, 0.15) 100%\n  );\n`;\n\nexport const SmallMenuButton = styled.button<{ index: number }>`\n  grid-column: 1;\n  grid-row: ${({ index }) => index + 1};\n  padding: 16px;\n  border: none;\n  border-radius: 8px;\n  background: none;\n  cursor: pointer;\n  color: ${({ theme }) => theme.colors.text};\n  width: 100%;\n  text-align: left;\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nexport const OverflowText = styled(Text)`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n\nexport const StyledNavTabPanel = styled(Box)<{\n  isFirst: boolean;\n}>`\n  border-radius: ${({ isFirst }) => (isFirst ? '0 8px 8px 8px' : '8px')};\n\n  @media (max-width: 1200px) {\n    border-radius: 8px;\n  }\n`;\n\nexport const NavigationButton = styled.button<{\n  isActive: boolean;\n}>`\n  grid-column: 1;\n  padding: 16px;\n  border: none;\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n  background: none;\n  cursor: pointer;\n  color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.primary : theme.colors.text};\n  text-align: left;\n  width: ${({ isActive }) => (isActive ? '100%' : 'calc(100% - 8px)')};\n  height: 60px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: ${({ isActive, theme }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  padding-right: ${({ isActive }) => (isActive ? '24px' : '16px')};\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme, isActive }) =>\n      isActive ? theme.colors.background : theme.colors['navy-100']};\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: ${({ theme, isActive }) =>\n      isActive ? 'none' : `0 0 0 2px ${theme.colors.primary}`};\n  }\n\n  @media (max-width: 767px) {\n    display: none;\n  }\n`;\n\nexport const NavIconButtonContainer = styled(Box)<{\n  isActive: boolean;\n}>`\n  background-color: ${({ theme, isActive }) =>\n    isActive ? theme.colors.background : theme.colors['gray-100']};\n  border-radius: ${({ isActive }) => (isActive ? '8px 0 0 8px' : '8px')};\n\n  grid-column: 1;\n  padding: 8px;\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n`;\n\nexport const NavIconButton = styled(IconButton)`\n  &:hover,\n  &:focus svg {\n    &:hover,\n    &:focus {\n      color: ${({ theme }) => theme.colors.primary};\n      background-color: ${({ theme }) => theme.colors['navy-100']};\n    }\n  }\n`;\n"],"mappings":";;;;AAGA,MAAa,gBAAgB,OAAO,IAAI,AAAkC;;;uBAGnD,EAAE,YAAY,MAAM,OAAO,mBAAmB;;;uBAG9C,EAAE,qBAAqB,YAC1C,sBAAsB,MAAM,OAAO,cAAc,MAAM,OAAO,WAAW;;;;;yBAKpD,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;;;;AAWhE,MAAa,oBAAoB,OAAO,IAAI;;;;;;;;;;;;;;;;;mBAiBzB,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;mBAOvC,EAAE,YAAY,MAAM,OAAO,YAAY;;;;;;;sBAOpC,EAAE,YAAY,MAAM,OAAO,YAAY;;AAG7D,MAAa,kBAAkB,OAAO,QAAQ;;;;;;;;;;AAW9C,MAAa,qBAAqB,OAAO,IAAI;;;;;;;AAQ7C,MAAa,kBAAkB,OAAO,MAAyB;;eAEhD,EAAE,YAAY,QAAQ,EAAE;;;;;;YAM3B,EAAE,YAAY,MAAM,OAAO,KAAK;;;;;;;;;;yBAUnB,EAAE,YAAY,MAAM,OAAO,YAAY;cAClD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;AAIjD,MAAa,eAAe,OAAO,KAAK;;;;;AAMxC,MAAa,oBAAoB,OAAO,IAAI,AAE1C;oBACkB,EAAE,cAAe,UAAU,kBAAkB,MAAO;;;;;;AAOxE,MAAa,mBAAmB,OAAO,MAErC;;;;oBAIkB,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;YAG5D,EAAE,OAAO,eACjB,WAAW,MAAM,OAAO,UAAU,MAAM,OAAO,KAAK;;YAE5C,EAAE,eAAgB,WAAW,SAAS,mBAAoB;;;;;uBAK/C,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,SAAS,OAAQ;;;;yBAIzC,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;cACtD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;mBAK9B,EAAE,OAAO,eACtB,WAAW,SAAS,aAAa,MAAM,OAAO,UAAU;;;;;;;AAQ9D,MAAa,yBAAyB,OAAO,IAAI,AAE/C;uBACqB,EAAE,OAAO,eAC5B,WAAW,MAAM,OAAO,aAAa,MAAM,OAAO,YAAY;oBAC9C,EAAE,eAAgB,WAAW,gBAAgB,MAAO;;;;;;qBAMnD,EAAE,YAAY,MAAM,OAAO,QAAQ;;;;;;AAOxD,MAAa,gBAAgB,OAAO,WAAW;;;;;gBAK/B,EAAE,YAAY,MAAM,OAAO,QAAQ;2BACxB,EAAE,YAAY,MAAM,OAAO,YAAY"}