@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/LayoutMenuVariant/LayoutMenu.cjs

@@ -0,0 +1,88 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('../Logos/LogoCodecademy/index.cjs');
+const require_LayoutMenuSection = require('./LayoutMenuSection.cjs');
+const require_AccordionMenu = require('./AccordionMenu.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LayoutMenuVariant/LayoutMenu.tsx
+const StyleBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.variant)({
+	prop: "menuHeight",
+	base: {
+		borderColor: "black",
+		borderStyleBottom: "solid",
+		borderWidthBottom: "1px",
+		overflowY: "auto",
+		overflowX: "hidden",
+		paddingTop: "4px",
+		paddingLeft: "4px"
+	},
+	variants: {
+		sm: { height: "630px" },
+		md: { height: "1000px" },
+		lg: { height: "1370px" }
+	}
+}));
+const LayoutMenu = ({ closeLabel, sections, onSectionToggle, mobileButtonText, mobileButtonIcon, breakpoint = "lg", children, topLinkSections, menuHeight }) => {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const accordionMenuSections = sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionMenu.AccordionMenu, {
+		section,
+		onSectionToggle,
+		onItemClick: () => setExpanded(false)
+	}, section.slug));
+	const topLinkLayoutMenuSections = topLinkSections && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LayoutMenuSection.LayoutMenuSection, {
+		items: topLinkSections,
+		onItemClick: () => setExpanded(false),
+		pb: 32
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+		"aria-label": "Secondary",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			display: {
+				_: "block",
+				[breakpoint]: "none"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Flyout, {
+				closeLabel,
+				expanded,
+				onClose: () => setExpanded(false),
+				title: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.LogoCodecademy, { mb: 32 }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+					px: 24,
+					children: [
+						topLinkLayoutMenuSections,
+						accordionMenuSections,
+						children
+					]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+				"aria-expanded": expanded,
+				variant: "secondary",
+				width: 1,
+				icon: mobileButtonIcon,
+				onClick: () => setExpanded(true),
+				children: mobileButtonText
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyleBox, {
+			menuHeight,
+			display: {
+				_: "none",
+				[breakpoint]: "block"
+			},
+			"data-testid": "desktop-menu",
+			children: [
+				topLinkLayoutMenuSections,
+				accordionMenuSections,
+				children
+			]
+		})]
+	});
+};
+
+//#endregion
+exports.LayoutMenu = LayoutMenu;

package/dist/LayoutMenuVariant/LayoutMenu.d.cts

@@ -0,0 +1,43 @@
+import { Section, SectionItem } from "./AccordionMenu.cjs";
+import { WithChildrenProp } from "@codecademy/gamut";
+import React, { ComponentType } from "react";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+
+//#region src/LayoutMenuVariant/LayoutMenu.d.ts
+interface LayoutMenuProps extends WithChildrenProp {
+  /**
+   * Accessibility label for the mobile Flyout's close button.
+   */
+  closeLabel: string;
+  /**
+   * An array of sections containing the title, slug, and items, each of which will become an accordion. Each item contains a title, slug, and onClick.
+   */
+  sections: Section[];
+  /**
+   * Callback to be run on click of the accordion button
+   */
+  onSectionToggle: (sectionSlug: string) => void;
+  /**
+   * Text shown in mobile button that opens flyout on click
+   */
+  mobileButtonText: string;
+  /**
+   * Icon shown in mobile button that opens flyout on click
+   */
+  mobileButtonIcon?: ComponentType<GamutIconProps>;
+  /**
+   * Breakpoint above which the menu button displays as a full sidebar
+   */
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * An array of section items, each of which become an additional link on top of the accordion section.
+   */
+  topLinkSections?: SectionItem[];
+  /**
+   * Set fixed height for menu with overflow
+   */
+  menuHeight?: 'sm' | 'md' | 'lg';
+}
+declare const LayoutMenu: React.FC<LayoutMenuProps>;
+//#endregion
+export { LayoutMenu, LayoutMenuProps };

package/dist/LayoutMenuVariant/LayoutMenu.d.ts

@@ -1,39 +1,43 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import { GamutIconProps } from '@codecademy/gamut-icons';
-import React, { ComponentType } from 'react';
-import { Section, SectionItem } from './AccordionMenu';
-export interface LayoutMenuProps extends WithChildrenProp {
-    /**
-     * Accessibility label for the mobile Flyout's close button.
-     */
-    closeLabel: string;
-    /**
-     * An array of sections containing the title, slug, and items, each of which will become an accordion. Each item contains a title, slug, and onClick.
-     */
-    sections: Section[];
-    /**
-     * Callback to be run on click of the accordion button
-     */
-    onSectionToggle: (sectionSlug: string) => void;
-    /**
-     * Text shown in mobile button that opens flyout on click
-     */
-    mobileButtonText: string;
-    /**
-     * Icon shown in mobile button that opens flyout on click
-     */
-    mobileButtonIcon?: ComponentType<GamutIconProps>;
-    /**
-     * Breakpoint above which the menu button displays as a full sidebar
-     */
-    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * An array of section items, each of which become an additional link on top of the accordion section.
-     */
-    topLinkSections?: SectionItem[];
-    /**
-     * Set fixed height for menu with overflow
-     */
-    menuHeight?: 'sm' | 'md' | 'lg';
+import { Section, SectionItem } from "./AccordionMenu.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import React, { ComponentType } from "react";
+import { GamutIconProps } from "@codecademy/gamut-icons";
+
+//#region src/LayoutMenuVariant/LayoutMenu.d.ts
+interface LayoutMenuProps extends WithChildrenProp {
+  /**
+   * Accessibility label for the mobile Flyout's close button.
+   */
+  closeLabel: string;
+  /**
+   * An array of sections containing the title, slug, and items, each of which will become an accordion. Each item contains a title, slug, and onClick.
+   */
+  sections: Section[];
+  /**
+   * Callback to be run on click of the accordion button
+   */
+  onSectionToggle: (sectionSlug: string) => void;
+  /**
+   * Text shown in mobile button that opens flyout on click
+   */
+  mobileButtonText: string;
+  /**
+   * Icon shown in mobile button that opens flyout on click
+   */
+  mobileButtonIcon?: ComponentType<GamutIconProps>;
+  /**
+   * Breakpoint above which the menu button displays as a full sidebar
+   */
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * An array of section items, each of which become an additional link on top of the accordion section.
+   */
+  topLinkSections?: SectionItem[];
+  /**
+   * Set fixed height for menu with overflow
+   */
+  menuHeight?: 'sm' | 'md' | 'lg';
 }
-export declare const LayoutMenu: React.FC<LayoutMenuProps>;
+declare const LayoutMenu: React.FC<LayoutMenuProps>;
+//#endregion
+export { LayoutMenu, LayoutMenuProps };

package/dist/LayoutMenuVariant/LayoutMenu.js

@@ -1,93 +1,85 @@
-import _styled from "@emotion/styled/base";
-import { Box, Flyout, StrokeButton } from '@codecademy/gamut';
-import { variant } from '@codecademy/gamut-styles';
-import React, { useState } from 'react';
-import { LogoCodecademy } from '../Logos';
-import { AccordionMenu } from './AccordionMenu';
-import { LayoutMenuSection } from './LayoutMenuSection';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyleBox = /*#__PURE__*/_styled(Box, {
-  target: "eht3vxm0",
-  label: "StyleBox"
-})(variant({
-  prop: 'menuHeight',
-  base: {
-    borderColor: 'black',
-    borderStyleBottom: 'solid',
-    borderWidthBottom: '1px',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    paddingTop: '4px',
-    paddingLeft: '4px'
-  },
-  variants: {
-    sm: {
-      height: '630px'
-    },
-    md: {
-      height: '1000px'
-    },
-    lg: {
-      height: '1370px'
-    }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9MYXlvdXRNZW51LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q2lCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9MYXlvdXRNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmx5b3V0LCBTdHJva2VCdXR0b24sIFdpdGhDaGlsZHJlblByb3AgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IHZhcmlhbnQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudFR5cGUsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMb2dvQ29kZWNhZGVteSB9IGZyb20gJy4uL0xvZ29zJztcbmltcG9ydCB7IEFjY29yZGlvbk1lbnUsIFNlY3Rpb24sIFNlY3Rpb25JdGVtIH0gZnJvbSAnLi9BY2NvcmRpb25NZW51JztcbmltcG9ydCB7IExheW91dE1lbnVTZWN0aW9uIH0gZnJvbSAnLi9MYXlvdXRNZW51U2VjdGlvbic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGF5b3V0TWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIC8qKlxuICAgKiBBY2Nlc3NpYmlsaXR5IGxhYmVsIGZvciB0aGUgbW9iaWxlIEZseW91dCdzIGNsb3NlIGJ1dHRvbi5cbiAgICovXG4gIGNsb3NlTGFiZWw6IHN0cmluZztcbiAgLyoqXG4gICAqIEFuIGFycmF5IG9mIHNlY3Rpb25zIGNvbnRhaW5pbmcgdGhlIHRpdGxlLCBzbHVnLCBhbmQgaXRlbXMsIGVhY2ggb2Ygd2hpY2ggd2lsbCBiZWNvbWUgYW4gYWNjb3JkaW9uLiBFYWNoIGl0ZW0gY29udGFpbnMgYSB0aXRsZSwgc2x1ZywgYW5kIG9uQ2xpY2suXG4gICAqL1xuICBzZWN0aW9uczogU2VjdGlvbltdO1xuICAvKipcbiAgICogQ2FsbGJhY2sgdG8gYmUgcnVuIG9uIGNsaWNrIG9mIHRoZSBhY2NvcmRpb24gYnV0dG9uXG4gICAqL1xuICBvblNlY3Rpb25Ub2dnbGU6IChzZWN0aW9uU2x1Zzogc3RyaW5nKSA9PiB2b2lkO1xuICAvKipcbiAgICogVGV4dCBzaG93biBpbiBtb2JpbGUgYnV0dG9uIHRoYXQgb3BlbnMgZmx5b3V0IG9uIGNsaWNrXG4gICAqL1xuICBtb2JpbGVCdXR0b25UZXh0OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBJY29uIHNob3duIGluIG1vYmlsZSBidXR0b24gdGhhdCBvcGVucyBmbHlvdXQgb24gY2xpY2tcbiAgICovXG4gIG1vYmlsZUJ1dHRvbkljb24/OiBDb21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgLyoqXG4gICAqIEJyZWFrcG9pbnQgYWJvdmUgd2hpY2ggdGhlIG1lbnUgYnV0dG9uIGRpc3BsYXlzIGFzIGEgZnVsbCBzaWRlYmFyXG4gICAqL1xuICBicmVha3BvaW50PzogJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCc7XG4gIC8qKlxuICAgKiBBbiBhcnJheSBvZiBzZWN0aW9uIGl0ZW1zLCBlYWNoIG9mIHdoaWNoIGJlY29tZSBhbiBhZGRpdGlvbmFsIGxpbmsgb24gdG9wIG9mIHRoZSBhY2NvcmRpb24gc2VjdGlvbi5cbiAgICovXG4gIHRvcExpbmtTZWN0aW9ucz86IFNlY3Rpb25JdGVtW107XG4gIC8qKlxuICAgKiBTZXQgZml4ZWQgaGVpZ2h0IGZvciBtZW51IHdpdGggb3ZlcmZsb3dcbiAgICovXG4gIG1lbnVIZWlnaHQ/OiAnc20nIHwgJ21kJyB8ICdsZyc7XG59XG5cbmNvbnN0IFN0eWxlQm94ID0gc3R5bGVkKEJveCkoXG4gIHZhcmlhbnQoe1xuICAgIHByb3A6ICdtZW51SGVpZ2h0JyxcbiAgICBiYXNlOiB7XG4gICAgICBib3JkZXJDb2xvcjogJ2JsYWNrJyxcbiAgICAgIGJvcmRlclN0eWxlQm90dG9tOiAnc29saWQnLFxuICAgICAgYm9yZGVyV2lkdGhCb3R0b206ICcxcHgnLFxuICAgICAgb3ZlcmZsb3dZOiAnYXV0bycsXG4gICAgICBvdmVyZmxvd1g6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZ1RvcDogJzRweCcsXG4gICAgICBwYWRkaW5nTGVmdDogJzRweCcsXG4gICAgfSxcbiAgICB2YXJpYW50czoge1xuICAgICAgc206IHtcbiAgICAgICAgaGVpZ2h0OiAnNjMwcHgnLFxuICAgICAgfSxcbiAgICAgIG1kOiB7XG4gICAgICAgIGhlaWdodDogJzEwMDBweCcsXG4gICAgICB9LFxuICAgICAgbGc6IHtcbiAgICAgICAgaGVpZ2h0OiAnMTM3MHB4JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXRNZW51OiBSZWFjdC5GQzxMYXlvdXRNZW51UHJvcHM+ID0gKHtcbiAgY2xvc2VMYWJlbCxcbiAgc2VjdGlvbnMsXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgbW9iaWxlQnV0dG9uVGV4dCxcbiAgbW9iaWxlQnV0dG9uSWNvbixcbiAgYnJlYWtwb2ludCA9ICdsZycsXG4gIGNoaWxkcmVuLFxuICB0b3BMaW5rU2VjdGlvbnMsXG4gIG1lbnVIZWlnaHQsXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGFjY29yZGlvbk1lbnVTZWN0aW9ucyA9IHNlY3Rpb25zLm1hcCgoc2VjdGlvbikgPT4gKFxuICAgIDxBY2NvcmRpb25NZW51XG4gICAgICBrZXk9e3NlY3Rpb24uc2x1Z31cbiAgICAgIHNlY3Rpb249e3NlY3Rpb259XG4gICAgICBvblNlY3Rpb25Ub2dnbGU9e29uU2VjdGlvblRvZ2dsZX1cbiAgICAgIG9uSXRlbUNsaWNrPXsoKSA9PiBzZXRFeHBhbmRlZChmYWxzZSl9XG4gICAgLz5cbiAgKSk7XG5cbiAgY29uc3QgdG9wTGlua0xheW91dE1lbnVTZWN0aW9ucyA9IHRvcExpbmtTZWN0aW9ucyAmJiAoXG4gICAgPExheW91dE1lbnVTZWN0aW9uXG4gICAgICBpdGVtcz17dG9wTGlua1NlY3Rpb25zfVxuICAgICAgb25JdGVtQ2xpY2s9eygpID0+IHNldEV4cGFuZGVkKGZhbHNlKX1cbiAgICAgIHBiPXszMn1cbiAgICAvPlxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPG5hdiBhcmlhLWxhYmVsPVwiU2Vjb25kYXJ5XCI+XG4gICAgICA8Qm94IGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgW2JyZWFrcG9pbnRdOiAnbm9uZScgfX0+XG4gICAgICAgIDxGbHlvdXRcbiAgICAgICAgICBjbG9zZUxhYmVsPXtjbG9zZUxhYmVsfVxuICAgICAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBvbkNsb3NlPXsoKSA9PiBzZXRFeHBhbmRlZChmYWxzZSl9XG4gICAgICAgICAgdGl0bGU9ezxMb2dvQ29kZWNhZGVteSBtYj17MzJ9IC8+fVxuICAgICAgICA+XG4gICAgICAgICAgPEJveCBweD17MjR9PlxuICAgICAgICAgICAge3RvcExpbmtMYXlvdXRNZW51U2VjdGlvbnN9XG4gICAgICAgICAgICB7YWNjb3JkaW9uTWVudVNlY3Rpb25zfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0ZseW91dD5cbiAgICAgICAgPFN0cm9rZUJ1dHRvblxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgIHdpZHRoPXsxfVxuICAgICAgICAgIGljb249e21vYmlsZUJ1dHRvbkljb259XG4gICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0RXhwYW5kZWQodHJ1ZSl9XG4gICAgICAgID5cbiAgICAgICAgICB7bW9iaWxlQnV0dG9uVGV4dH1cbiAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICA8L0JveD5cbiAgICAgIDxTdHlsZUJveFxuICAgICAgICBtZW51SGVpZ2h0PXttZW51SGVpZ2h0fVxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgW2JyZWFrcG9pbnRdOiAnYmxvY2snIH19XG4gICAgICAgIGRhdGEtdGVzdGlkPVwiZGVza3RvcC1tZW51XCJcbiAgICAgID5cbiAgICAgICAge3RvcExpbmtMYXlvdXRNZW51U2VjdGlvbnN9XG4gICAgICAgIHthY2NvcmRpb25NZW51U2VjdGlvbnN9XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVCb3g+XG4gICAgPC9uYXY+XG4gICk7XG59O1xuIl19 */");
-export const LayoutMenu = ({
-  closeLabel,
-  sections,
-  onSectionToggle,
-  mobileButtonText,
-  mobileButtonIcon,
-  breakpoint = 'lg',
-  children,
-  topLinkSections,
-  menuHeight
-}) => {
-  const [expanded, setExpanded] = useState(false);
-  const accordionMenuSections = sections.map(section => /*#__PURE__*/_jsx(AccordionMenu, {
-    section: section,
-    onSectionToggle: onSectionToggle,
-    onItemClick: () => setExpanded(false)
-  }, section.slug));
-  const topLinkLayoutMenuSections = topLinkSections && /*#__PURE__*/_jsx(LayoutMenuSection, {
-    items: topLinkSections,
-    onItemClick: () => setExpanded(false),
-    pb: 32
-  });
-  return /*#__PURE__*/_jsxs("nav", {
-    "aria-label": "Secondary",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      display: {
-        _: 'block',
-        [breakpoint]: 'none'
-      },
-      children: [/*#__PURE__*/_jsx(Flyout, {
-        closeLabel: closeLabel,
-        expanded: expanded,
-        onClose: () => setExpanded(false),
-        title: /*#__PURE__*/_jsx(LogoCodecademy, {
-          mb: 32
-        }),
-        children: /*#__PURE__*/_jsxs(Box, {
-          px: 24,
-          children: [topLinkLayoutMenuSections, accordionMenuSections, children]
-        })
-      }), /*#__PURE__*/_jsx(StrokeButton, {
-        "aria-expanded": expanded,
-        variant: "secondary",
-        width: 1,
-        icon: mobileButtonIcon,
-        onClick: () => setExpanded(true),
-        children: mobileButtonText
-      })]
-    }), /*#__PURE__*/_jsxs(StyleBox, {
-      menuHeight: menuHeight,
-      display: {
-        _: 'none',
-        [breakpoint]: 'block'
-      },
-      "data-testid": "desktop-menu",
-      children: [topLinkLayoutMenuSections, accordionMenuSections, children]
-    })]
-  });
-};
+import { LogoCodecademy } from "../Logos/LogoCodecademy/index.js";
+import { LayoutMenuSection } from "./LayoutMenuSection.js";
+import { AccordionMenu } from "./AccordionMenu.js";
+import { Box, Flyout, StrokeButton } from "@codecademy/gamut";
+import { variant } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LayoutMenuVariant/LayoutMenu.tsx
+const StyleBox = styled(Box)(variant({
+	prop: "menuHeight",
+	base: {
+		borderColor: "black",
+		borderStyleBottom: "solid",
+		borderWidthBottom: "1px",
+		overflowY: "auto",
+		overflowX: "hidden",
+		paddingTop: "4px",
+		paddingLeft: "4px"
+	},
+	variants: {
+		sm: { height: "630px" },
+		md: { height: "1000px" },
+		lg: { height: "1370px" }
+	}
+}));
+const LayoutMenu = ({ closeLabel, sections, onSectionToggle, mobileButtonText, mobileButtonIcon, breakpoint = "lg", children, topLinkSections, menuHeight }) => {
+	const [expanded, setExpanded] = useState(false);
+	const accordionMenuSections = sections.map((section) => /* @__PURE__ */ jsx(AccordionMenu, {
+		section,
+		onSectionToggle,
+		onItemClick: () => setExpanded(false)
+	}, section.slug));
+	const topLinkLayoutMenuSections = topLinkSections && /* @__PURE__ */ jsx(LayoutMenuSection, {
+		items: topLinkSections,
+		onItemClick: () => setExpanded(false),
+		pb: 32
+	});
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": "Secondary",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			display: {
+				_: "block",
+				[breakpoint]: "none"
+			},
+			children: [/* @__PURE__ */ jsx(Flyout, {
+				closeLabel,
+				expanded,
+				onClose: () => setExpanded(false),
+				title: /* @__PURE__ */ jsx(LogoCodecademy, { mb: 32 }),
+				children: /* @__PURE__ */ jsxs(Box, {
+					px: 24,
+					children: [
+						topLinkLayoutMenuSections,
+						accordionMenuSections,
+						children
+					]
+				})
+			}), /* @__PURE__ */ jsx(StrokeButton, {
+				"aria-expanded": expanded,
+				variant: "secondary",
+				width: 1,
+				icon: mobileButtonIcon,
+				onClick: () => setExpanded(true),
+				children: mobileButtonText
+			})]
+		}), /* @__PURE__ */ jsxs(StyleBox, {
+			menuHeight,
+			display: {
+				_: "none",
+				[breakpoint]: "block"
+			},
+			"data-testid": "desktop-menu",
+			children: [
+				topLinkLayoutMenuSections,
+				accordionMenuSections,
+				children
+			]
+		})]
+	});
+};
+
+//#endregion
+export { LayoutMenu };

package/dist/LayoutMenuVariant/LayoutMenuSection.cjs

@@ -0,0 +1,37 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_SectionItemLink = require('./SectionItemLink.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LayoutMenuVariant/LayoutMenuSection.tsx
+const StyledBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)`
+  list-style: none;
+`;
+const LayoutMenuSection = ({ items, onItemClick, ...styleProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+	...styleProps,
+	as: "menu",
+	px: 4,
+	m: 0,
+	children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBox, {
+		as: "li",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SectionItemLink.SectionItemLink, {
+			href: item.href,
+			onClick: (event) => {
+				item.onClick(event);
+				onItemClick();
+			},
+			variant: item.variant ?? "interface",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+				alignItems: "center",
+				children: [item.title, item.badge]
+			})
+		})
+	}, item.slug))
+});
+
+//#endregion
+exports.LayoutMenuSection = LayoutMenuSection;

package/dist/LayoutMenuVariant/LayoutMenuSection.js

@@ -1,42 +1,34 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { Box, FlexBox } from '@codecademy/gamut';
-import React from 'react';
-import { SectionItemLink } from './SectionItemLink';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const StyledBox = /*#__PURE__*/_styled(Box, {
-  target: "ev4vfkc0",
-  label: "StyledBox"
-})(process.env.NODE_ENV === "production" ? {
-  name: "qr8q5p",
-  styles: "list-style:none"
-} : {
-  name: "qr8q5p",
-  styles: "list-style:none/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9MYXlvdXRNZW51U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0I2QiIsImZpbGUiOiIuLi8uLi9zcmMvTGF5b3V0TWVudVZhcmlhbnQvTGF5b3V0TWVudVNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgc3lzdGVtIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBTZWN0aW9uSXRlbSB9IGZyb20gJy4vQWNjb3JkaW9uTWVudSc7XG5pbXBvcnQgeyBTZWN0aW9uSXRlbUxpbmsgfSBmcm9tICcuL1NlY3Rpb25JdGVtTGluayc7XG5cbmV4cG9ydCB0eXBlIExheW91dE1lbnVTZWN0aW9uU3R5bGVzID0gU3R5bGVQcm9wczx0eXBlb2Ygc3lzdGVtLnNwYWNlPjtcblxuZXhwb3J0IHR5cGUgTGF5b3V0TWVudVNlY3Rpb25Qcm9wcyA9IExheW91dE1lbnVTZWN0aW9uU3R5bGVzICYge1xuICBpdGVtczogU2VjdGlvbkl0ZW1bXTtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG5jb25zdCBTdHlsZWRCb3ggPSBzdHlsZWQoQm94KWBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbmA7XG5leHBvcnQgY29uc3QgTGF5b3V0TWVudVNlY3Rpb246IFJlYWN0LkZDPExheW91dE1lbnVTZWN0aW9uUHJvcHM+ID0gKHtcbiAgaXRlbXMsXG4gIG9uSXRlbUNsaWNrLFxuICAuLi5zdHlsZVByb3BzXG59KSA9PiAoXG4gIDxCb3ggey4uLnN0eWxlUHJvcHN9IGFzPVwibWVudVwiIHB4PXs0fSBtPXswfT5cbiAgICB7aXRlbXMubWFwKChpdGVtKSA9PiAoXG4gICAgICA8U3R5bGVkQm94IGtleT17aXRlbS5zbHVnfSBhcz1cImxpXCI+XG4gICAgICAgIDxTZWN0aW9uSXRlbUxpbmtcbiAgICAgICAgICBocmVmPXtpdGVtLmhyZWZ9XG4gICAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgICBpdGVtLm9uQ2xpY2soZXZlbnQpO1xuICAgICAgICAgICAgb25JdGVtQ2xpY2soKTtcbiAgICAgICAgICB9fVxuICAgICAgICAgIHZhcmlhbnQ9e2l0ZW0udmFyaWFudCA/PyAnaW50ZXJmYWNlJ31cbiAgICAgICAgPlxuICAgICAgICAgIDxGbGV4Qm94IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgIHtpdGVtLnRpdGxlfVxuICAgICAgICAgICAge2l0ZW0uYmFkZ2V9XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L1NlY3Rpb25JdGVtTGluaz5cbiAgICAgIDwvU3R5bGVkQm94PlxuICAgICkpfVxuICA8L0JveD5cbik7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { SectionItemLink } from "./SectionItemLink.js";
+import { Box, FlexBox } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LayoutMenuVariant/LayoutMenuSection.tsx
+const StyledBox = styled(Box)`
+  list-style: none;
+`;
+const LayoutMenuSection = ({ items, onItemClick, ...styleProps }) => /* @__PURE__ */ jsx(Box, {
+	...styleProps,
+	as: "menu",
+	px: 4,
+	m: 0,
+	children: items.map((item) => /* @__PURE__ */ jsx(StyledBox, {
+		as: "li",
+		children: /* @__PURE__ */ jsx(SectionItemLink, {
+			href: item.href,
+			onClick: (event) => {
+				item.onClick(event);
+				onItemClick();
+			},
+			variant: item.variant ?? "interface",
+			children: /* @__PURE__ */ jsxs(FlexBox, {
+				alignItems: "center",
+				children: [item.title, item.badge]
+			})
+		})
+	}, item.slug))
 });
-export const LayoutMenuSection = ({
-  items,
-  onItemClick,
-  ...styleProps
-}) => /*#__PURE__*/_jsx(Box, {
-  ...styleProps,
-  as: "menu",
-  px: 4,
-  m: 0,
-  children: items.map(item => /*#__PURE__*/_jsx(StyledBox, {
-    as: "li",
-    children: /*#__PURE__*/_jsx(SectionItemLink, {
-      href: item.href,
-      onClick: event => {
-        item.onClick(event);
-        onItemClick();
-      },
-      variant: item.variant ?? 'interface',
-      children: /*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "center",
-        children: [item.title, item.badge]
-      })
-    })
-  }, item.slug))
-});
+
+//#endregion
+export { LayoutMenuSection };

package/dist/LayoutMenuVariant/SectionItemLink.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/LayoutMenuVariant/SectionItemLink.tsx
+const SectionItemLink = ({ onClick, href, variant = "interface", children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+		variant,
+		display: "block",
+		href,
+		onClick,
+		children
+	});
+};
+
+//#endregion
+exports.SectionItemLink = SectionItemLink;

package/dist/LayoutMenuVariant/SectionItemLink.d.cts

@@ -0,0 +1,12 @@
+import { Anchor, WithChildrenProp } from "@codecademy/gamut";
+import React from "react";
+
+//#region src/LayoutMenuVariant/SectionItemLink.d.ts
+interface SectionItemLinkProps extends WithChildrenProp {
+  onClick: (event: React.MouseEvent) => void;
+  href: string;
+  variant?: React.ComponentProps<typeof Anchor>['variant'];
+}
+declare const SectionItemLink: React.FC<SectionItemLinkProps>;
+//#endregion
+export { SectionItemLink, SectionItemLinkProps };

package/dist/LayoutMenuVariant/SectionItemLink.d.ts

@@ -1,8 +1,12 @@
-import { Anchor, WithChildrenProp } from '@codecademy/gamut';
-import React from 'react';
-export interface SectionItemLinkProps extends WithChildrenProp {
-    onClick: (event: React.MouseEvent) => void;
-    href: string;
-    variant?: React.ComponentProps<typeof Anchor>['variant'];
+import { Anchor, WithChildrenProp } from "@codecademy/gamut";
+import React from "react";
+
+//#region src/LayoutMenuVariant/SectionItemLink.d.ts
+interface SectionItemLinkProps extends WithChildrenProp {
+  onClick: (event: React.MouseEvent) => void;
+  href: string;
+  variant?: React.ComponentProps<typeof Anchor>['variant'];
 }
-export declare const SectionItemLink: React.FC<SectionItemLinkProps>;
+declare const SectionItemLink: React.FC<SectionItemLinkProps>;
+//#endregion
+export { SectionItemLink, SectionItemLinkProps };

package/dist/LayoutMenuVariant/SectionItemLink.js

@@ -1,17 +1,17 @@
-import { Anchor } from '@codecademy/gamut';
-import React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const SectionItemLink = ({
-  onClick,
-  href,
-  variant = 'interface',
-  children
-}) => {
-  return /*#__PURE__*/_jsx(Anchor, {
-    variant: variant,
-    display: "block",
-    href: href,
-    onClick: onClick,
-    children: children
-  });
-};
+import { Anchor } from "@codecademy/gamut";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/LayoutMenuVariant/SectionItemLink.tsx
+const SectionItemLink = ({ onClick, href, variant = "interface", children }) => {
+	return /* @__PURE__ */ jsx(Anchor, {
+		variant,
+		display: "block",
+		href,
+		onClick,
+		children
+	});
+};
+
+//#endregion
+export { SectionItemLink };

package/dist/LayoutMenuVariant/index.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_SectionItemLink = require('./SectionItemLink.cjs');
+const require_LayoutMenu = require('./LayoutMenu.cjs');
+
+//#region src/LayoutMenuVariant/index.ts
+var LayoutMenuVariant_exports = /* @__PURE__ */ require_rolldown_runtime.__export({
+	LayoutMenu: () => require_LayoutMenu.LayoutMenu,
+	SectionItemLink: () => require_SectionItemLink.SectionItemLink
+});
+
+//#endregion
+exports.LayoutMenu = require_LayoutMenu.LayoutMenu;
+Object.defineProperty(exports, 'LayoutMenuVariant_exports', {
+  enumerable: true,
+  get: function () {
+    return LayoutMenuVariant_exports;
+  }
+});
+exports.SectionItemLink = require_SectionItemLink.SectionItemLink;

package/dist/LayoutMenuVariant/index.d.cts

@@ -0,0 +1,9 @@
+import { LayoutMenu, LayoutMenuProps } from "./LayoutMenu.cjs";
+import { SectionItemLink, SectionItemLinkProps } from "./SectionItemLink.cjs";
+
+//#region src/LayoutMenuVariant/index.d.ts
+declare namespace index_d_exports {
+  export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps };
+}
+//#endregion
+export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps, index_d_exports };