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

package/dist/LayoutMenu/AccordionMenu.js

@@ -1,71 +1,60 @@
-import _styled from "@emotion/styled/base";
-import { AccordionAreaDeprecated, Anchor, Text } from '@codecademy/gamut';
-import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
-import { css, states, transitionConcat } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { LayoutMenuSection } from './LayoutMenuSection';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAccordionArea = /*#__PURE__*/_styled(AccordionAreaDeprecated, {
-  target: "e1erzfk91",
-  label: "StyledAccordionArea"
-})("padding-bottom:", ({
-  theme
-}) => theme.spacing[32], ";position:relative;left:-4px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0FjY29yZGlvbk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVUyRCIsImZpbGUiOiIuLi8uLi9zcmMvTGF5b3V0TWVudS9BY2NvcmRpb25NZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkLCBBbmNob3IsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBNaW5pQ2hldnJvbkRvd25JY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRyYW5zaXRpb25Db25jYXQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IFNjYWxlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UvZGlzdC90eXBlcy9jb25maWcnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMYXlvdXRNZW51U2VjdGlvbiB9IGZyb20gJy4vTGF5b3V0TWVudVNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRBY2NvcmRpb25BcmVhID0gc3R5bGVkKEFjY29yZGlvbkFyZWFEZXByZWNhdGVkKWBcbiAgcGFkZGluZy1ib3R0b206ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2luZ1szMl19O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGxlZnQ6IC00cHg7XG5gO1xuXG5jb25zdCBjaGV2cm9uU3RhdGVzID0gc3RhdGVzKHtcbiAgZXhwYW5kZWQ6IHsgdHJhbnNmb3JtOiAncm90YXRlKDE4MGRlZyknIH0sXG59KTtcblxuY29uc3QgRXhwYW5kQ2hldnJvbiA9IHN0eWxlZChNaW5pQ2hldnJvbkRvd25JY29uKTxcbiAgU3R5bGVQcm9wczx0eXBlb2YgY2hldnJvblN0YXRlcz5cbj4oXG4gIGNzcyh7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFsndHJhbnNmb3JtJ10sICdzbG93JywgJ2Vhc2Utb3V0JyksXG4gIH0pLFxuICBjaGV2cm9uU3RhdGVzXG4pO1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uSXRlbSA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBocmVmOiBzdHJpbmc7XG4gIG9uQ2xpY2s6IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gdm9pZDtcbiAgYmFkZ2U/OiBKU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFNlY3Rpb24gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaXRlbXM6IFNlY3Rpb25JdGVtW107XG59O1xuXG5leHBvcnQgY29uc3QgaXNTZWN0aW9uID0gKGl0ZW06IFNlY3Rpb24gfCBSZWFjdC5SZWFjdE5vZGUpOiBpdGVtIGlzIFNlY3Rpb24gPT4ge1xuICByZXR1cm4gKFxuICAgIHR5cGVvZiBpdGVtID09PSAnb2JqZWN0JyAmJlxuICAgIGl0ZW0gIT09IG51bGwgJiZcbiAgICAndGl0bGUnIGluIGl0ZW0gJiZcbiAgICAnc2x1ZycgaW4gaXRlbSAmJlxuICAgICdpdGVtcycgaW4gaXRlbVxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uTWVudVByb3BzID0ge1xuICBzZWN0aW9uOiBTZWN0aW9uO1xuICBvblNlY3Rpb25Ub2dnbGU6IChzZWN0aW9uU2x1Zzogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkl0ZW1DbGljazogKCkgPT4gdm9pZDtcbiAgc2VsZWN0ZWRJdGVtPzogc3RyaW5nO1xuICB2ZXJ0aWNhbFNwYWNpbmc/OiBTY2FsZTx7XG4gICAgcmVhZG9ubHkgcHJvcGVydHk6ICdwYWRkaW5nJztcbiAgICByZWFkb25seSBzY2FsZTogJ3NwYWNpbmcnO1xuICB9Pjtcbn07XG5cbmV4cG9ydCBjb25zdCBBY2NvcmRpb25NZW51OiBSZWFjdC5GQzxBY2NvcmRpb25NZW51UHJvcHM+ID0gKHtcbiAgc2VjdGlvbixcbiAgb25TZWN0aW9uVG9nZ2xlLFxuICBvbkl0ZW1DbGljayxcbiAgc2VsZWN0ZWRJdGVtLFxuICB2ZXJ0aWNhbFNwYWNpbmcsXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gUmVhY3QudXNlU3RhdGUodHJ1ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYVxuICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgdG9wPXtcbiAgICAgICAgPEFuY2hvclxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIHB5PXsxMn1cbiAgICAgICAgICBweD17NH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKTtcbiAgICAgICAgICAgIHNldEV4cGFuZGVkKChwcmV2KSA9PiAhcHJldik7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgID5cbiAgICAgICAgICB7LyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZSAqL31cbiAgICAgICAgICA8VGV4dCB2YXJpYW50PVwidGl0bGUteHNcIiBzdHlsZT17eyBmbGV4OiAxIH19IHRleHRBbGlnbj1cImxlZnRcIj5cbiAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8RXhwYW5kQ2hldnJvblxuICAgICAgICAgICAgbWw9ezEyfVxuICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICBleHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICAgIHRvcD17NH1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0FuY2hvcj5cbiAgICAgIH1cbiAgICA+XG4gICAgICA8TGF5b3V0TWVudVNlY3Rpb25cbiAgICAgICAgaXRlbXM9e3NlY3Rpb24uaXRlbXN9XG4gICAgICAgIHNlbGVjdGVkSXRlbT17c2VsZWN0ZWRJdGVtfVxuICAgICAgICBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9XG4gICAgICAgIHZlcnRpY2FsU3BhY2luZz17dmVydGljYWxTcGFjaW5nfVxuICAgICAgLz5cbiAgICA8L1N0eWxlZEFjY29yZGlvbkFyZWE+XG4gICk7XG59O1xuIl19 */"));
-const chevronStates = states({
-  expanded: {
-    transform: 'rotate(180deg)'
-  }
-});
-const ExpandChevron = /*#__PURE__*/_styled(MiniChevronDownIcon, {
-  target: "e1erzfk90",
-  label: "ExpandChevron"
-})(css({
-  transform: 'rotate(0deg)',
-  transition: transitionConcat(['transform'], 'slow', 'ease-out')
-}), chevronStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0FjY29yZGlvbk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Cc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0xheW91dE1lbnUvQWNjb3JkaW9uTWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZCwgQW5jaG9yLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaUNoZXZyb25Eb3duSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgc3RhdGVzLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBTY2FsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlL2Rpc3QvdHlwZXMvY29uZmlnJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgTGF5b3V0TWVudVNlY3Rpb24gfSBmcm9tICcuL0xheW91dE1lbnVTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQXJlYSA9IHN0eWxlZChBY2NvcmRpb25BcmVhRGVwcmVjYXRlZClgXG4gIHBhZGRpbmctYm90dG9tOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNpbmdbMzJdfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBsZWZ0OiAtNHB4O1xuYDtcblxuY29uc3QgY2hldnJvblN0YXRlcyA9IHN0YXRlcyh7XG4gIGV4cGFuZGVkOiB7IHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyB9LFxufSk7XG5cbmNvbnN0IEV4cGFuZENoZXZyb24gPSBzdHlsZWQoTWluaUNoZXZyb25Eb3duSWNvbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIGNoZXZyb25TdGF0ZXM+XG4+KFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChbJ3RyYW5zZm9ybSddLCAnc2xvdycsICdlYXNlLW91dCcpLFxuICB9KSxcbiAgY2hldnJvblN0YXRlc1xuKTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbkl0ZW0gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xuICBvbkNsaWNrOiAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIGJhZGdlPzogSlNYLkVsZW1lbnQ7XG59O1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBzbHVnOiBzdHJpbmc7XG4gIGl0ZW1zOiBTZWN0aW9uSXRlbVtdO1xufTtcblxuZXhwb3J0IGNvbnN0IGlzU2VjdGlvbiA9IChpdGVtOiBTZWN0aW9uIHwgUmVhY3QuUmVhY3ROb2RlKTogaXRlbSBpcyBTZWN0aW9uID0+IHtcbiAgcmV0dXJuIChcbiAgICB0eXBlb2YgaXRlbSA9PT0gJ29iamVjdCcgJiZcbiAgICBpdGVtICE9PSBudWxsICYmXG4gICAgJ3RpdGxlJyBpbiBpdGVtICYmXG4gICAgJ3NsdWcnIGluIGl0ZW0gJiZcbiAgICAnaXRlbXMnIGluIGl0ZW1cbiAgKTtcbn07XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbk1lbnVQcm9wcyA9IHtcbiAgc2VjdGlvbjogU2VjdGlvbjtcbiAgb25TZWN0aW9uVG9nZ2xlOiAoc2VjdGlvblNsdWc6IHN0cmluZykgPT4gdm9pZDtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG4gIHNlbGVjdGVkSXRlbT86IHN0cmluZztcbiAgdmVydGljYWxTcGFjaW5nPzogU2NhbGU8e1xuICAgIHJlYWRvbmx5IHByb3BlcnR5OiAncGFkZGluZyc7XG4gICAgcmVhZG9ubHkgc2NhbGU6ICdzcGFjaW5nJztcbiAgfT47XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uTWVudTogUmVhY3QuRkM8QWNjb3JkaW9uTWVudVByb3BzPiA9ICh7XG4gIHNlY3Rpb24sXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgb25JdGVtQ2xpY2ssXG4gIHNlbGVjdGVkSXRlbSxcbiAgdmVydGljYWxTcGFjaW5nLFxufSkgPT4ge1xuICBjb25zdCBbZXhwYW5kZWQsIHNldEV4cGFuZGVkXSA9IFJlYWN0LnVzZVN0YXRlKHRydWUpO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEFjY29yZGlvbkFyZWFcbiAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgIHRvcD17XG4gICAgICAgIDxBbmNob3JcbiAgICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgICBweT17MTJ9XG4gICAgICAgICAgcHg9ezR9XG4gICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgb25TZWN0aW9uVG9nZ2xlKHNlY3Rpb24uc2x1Zyk7XG4gICAgICAgICAgICBzZXRFeHBhbmRlZCgocHJldikgPT4gIXByZXYpO1xuICAgICAgICAgIH19XG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgICA+XG4gICAgICAgICAgey8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGUgKi99XG4gICAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLXhzXCIgc3R5bGU9e3sgZmxleDogMSB9fSB0ZXh0QWxpZ249XCJsZWZ0XCI+XG4gICAgICAgICAgICB7c2VjdGlvbi50aXRsZX1cbiAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPEV4cGFuZENoZXZyb25cbiAgICAgICAgICAgIG1sPXsxMn1cbiAgICAgICAgICAgIHNpemU9ezE0fVxuICAgICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgICAgICAgICB0b3A9ezR9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9BbmNob3I+XG4gICAgICB9XG4gICAgPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uXG4gICAgICAgIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfVxuICAgICAgICBzZWxlY3RlZEl0ZW09e3NlbGVjdGVkSXRlbX1cbiAgICAgICAgb25JdGVtQ2xpY2s9e29uSXRlbUNsaWNrfVxuICAgICAgICB2ZXJ0aWNhbFNwYWNpbmc9e3ZlcnRpY2FsU3BhY2luZ31cbiAgICAgIC8+XG4gICAgPC9TdHlsZWRBY2NvcmRpb25BcmVhPlxuICApO1xufTtcbiJdfQ== */");
-export const isSection = item => {
-  return typeof item === 'object' && item !== null && 'title' in item && 'slug' in item && 'items' in item;
+import { LayoutMenuSection } from "./LayoutMenuSection.js";
+import { AccordionAreaDeprecated, Anchor, Text } from "@codecademy/gamut";
+import { css, states, transitionConcat } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MiniChevronDownIcon } from "@codecademy/gamut-icons";
+
+//#region src/LayoutMenu/AccordionMenu.tsx
+const StyledAccordionArea = styled(AccordionAreaDeprecated)`
+  padding-bottom: ${({ theme: theme$1 }) => theme$1.spacing[32]};
+  position: relative;
+  left: -4px;
+`;
+const chevronStates = states({ expanded: { transform: "rotate(180deg)" } });
+const ExpandChevron = styled(MiniChevronDownIcon)(css({
+	transform: "rotate(0deg)",
+	transition: transitionConcat(["transform"], "slow", "ease-out")
+}), chevronStates);
+const isSection = (item) => {
+	return typeof item === "object" && item !== null && "title" in item && "slug" in item && "items" in item;
 };
-export const AccordionMenu = ({
-  section,
-  onSectionToggle,
-  onItemClick,
-  selectedItem,
-  verticalSpacing
-}) => {
-  const [expanded, setExpanded] = React.useState(true);
-  return /*#__PURE__*/_jsx(StyledAccordionArea, {
-    expanded: expanded,
-    top: /*#__PURE__*/_jsxs(Anchor, {
-      variant: "interface",
-      py: 12,
-      px: 4,
-      onClick: () => {
-        onSectionToggle(section.slug);
-        setExpanded(prev => !prev);
-      },
-      "aria-expanded": expanded,
-      display: "flex",
-      children: [/*#__PURE__*/_jsx(Text, {
-        variant: "title-xs",
-        style: {
-          flex: 1
-        },
-        textAlign: "left",
-        children: section.title
-      }), /*#__PURE__*/_jsx(ExpandChevron, {
-        ml: 12,
-        size: 14,
-        expanded: expanded,
-        position: "relative",
-        top: 4
-      })]
-    }),
-    children: /*#__PURE__*/_jsx(LayoutMenuSection, {
-      items: section.items,
-      selectedItem: selectedItem,
-      onItemClick: onItemClick,
-      verticalSpacing: verticalSpacing
-    })
-  });
-};
+const AccordionMenu = ({ section, onSectionToggle, onItemClick, selectedItem, verticalSpacing }) => {
+	const [expanded, setExpanded] = React$1.useState(true);
+	return /* @__PURE__ */ jsx(StyledAccordionArea, {
+		expanded,
+		top: /* @__PURE__ */ jsxs(Anchor, {
+			variant: "interface",
+			py: 12,
+			px: 4,
+			onClick: () => {
+				onSectionToggle(section.slug);
+				setExpanded((prev) => !prev);
+			},
+			"aria-expanded": expanded,
+			display: "flex",
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "title-xs",
+				style: { flex: 1 },
+				textAlign: "left",
+				children: section.title
+			}), /* @__PURE__ */ jsx(ExpandChevron, {
+				ml: 12,
+				size: 14,
+				expanded,
+				position: "relative",
+				top: 4
+			})]
+		}),
+		children: /* @__PURE__ */ jsx(LayoutMenuSection, {
+			items: section.items,
+			selectedItem,
+			onItemClick,
+			verticalSpacing
+		})
+	});
+};
+
+//#endregion
+export { AccordionMenu, isSection };

package/dist/LayoutMenu/LayoutMenu.cjs

@@ -0,0 +1,107 @@
+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/LayoutMenu/LayoutMenu.tsx
+const StyleBox = (0, _emotion_styled.default)(_codecademy_gamut.Box)((0, _codecademy_gamut_styles.variant)({
+	prop: "menuHeight",
+	base: {
+		overflowY: "auto",
+		overflowX: "hidden",
+		paddingTop: "4px",
+		paddingLeft: "4px"
+	},
+	variants: {
+		sm: { height: "630px" },
+		md: { height: "1000px" },
+		lg: {
+			height: "1370px",
+			paddingLeft: "8px"
+		}
+	}
+}));
+const LayoutMenu = ({ closeLabel, sections, onSectionToggle, selectedItem, mobileButtonText, breakpoint = "lg", children, topLinkSections, menuHeight, verticalSpacing }) => {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const accordionMenuSections = sections.map((section, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		as: "li",
+		children: require_AccordionMenu.isSection(section) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionMenu.AccordionMenu, {
+			section,
+			onSectionToggle,
+			onItemClick: () => setExpanded(false),
+			selectedItem,
+			verticalSpacing
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: section }, i)
+	}, require_AccordionMenu.isSection(section) ? section.slug : i));
+	const topLinkLayoutMenuSections = topLinkSections && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		as: "li",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LayoutMenuSection.LayoutMenuSection, {
+			items: topLinkSections,
+			onItemClick: () => setExpanded(false),
+			selectedItem,
+			pb: 32
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", { 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, {
+				as: "ul",
+				listStyleType: "none",
+				py: 0,
+				px: 16,
+				m: 0,
+				children: [
+					topLinkLayoutMenuSections,
+					accordionMenuSections,
+					children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+						as: "li",
+						children
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+			"aria-expanded": expanded,
+			variant: "secondary",
+			width: 1,
+			onClick: () => setExpanded(true),
+			children: mobileButtonText
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyleBox, {
+		as: "ul",
+		listStyleType: "none",
+		p: 0,
+		m: 0,
+		menuHeight,
+		display: {
+			_: "none",
+			[breakpoint]: "block"
+		},
+		"data-testid": "desktop-menu",
+		children: [
+			topLinkLayoutMenuSections,
+			accordionMenuSections,
+			children ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+				as: "li",
+				children
+			}) : null
+		]
+	})] });
+};
+
+//#endregion
+exports.LayoutMenu = LayoutMenu;

package/dist/LayoutMenu/LayoutMenu.d.cts

@@ -0,0 +1,48 @@
+import { Section, SectionItem } from "./AccordionMenu.cjs";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { Scale } from "@codecademy/variance/dist/types/config";
+
+//#region src/LayoutMenu/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.
+   * Arbitrary react nodes can also be passed and will be rendered as-is.
+   */
+  sections: (Section | React$1.ReactNode)[];
+  /**
+   * The slug of the current selected item
+   */
+  selectedItem?: string;
+  /**
+   * 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;
+  /**
+   * 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';
+  verticalSpacing?: Scale<{
+    readonly property: 'padding';
+    readonly scale: 'spacing';
+  }>;
+}
+declare const LayoutMenu: React$1.FC<LayoutMenuProps>;
+//#endregion
+export { LayoutMenu, LayoutMenuProps };

package/dist/LayoutMenu/LayoutMenu.d.ts

@@ -1,44 +1,48 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import { Scale } from '@codecademy/variance/dist/types/config';
-import * as React 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.
-     * Arbitrary react nodes can also be passed and will be rendered as-is.
-     */
-    sections: (Section | React.ReactNode)[];
-    /**
-     * The slug of the current selected item
-     */
-    selectedItem?: string;
-    /**
-     * 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;
-    /**
-     * 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';
-    verticalSpacing?: Scale<{
-        readonly property: 'padding';
-        readonly scale: 'spacing';
-    }>;
+import { Section, SectionItem } from "./AccordionMenu.js";
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { Scale } from "@codecademy/variance/dist/types/config";
+
+//#region src/LayoutMenu/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.
+   * Arbitrary react nodes can also be passed and will be rendered as-is.
+   */
+  sections: (Section | React$1.ReactNode)[];
+  /**
+   * The slug of the current selected item
+   */
+  selectedItem?: string;
+  /**
+   * 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;
+  /**
+   * 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';
+  verticalSpacing?: Scale<{
+    readonly property: 'padding';
+    readonly scale: 'spacing';
+  }>;
 }
-export declare const LayoutMenu: React.FC<LayoutMenuProps>;
+declare const LayoutMenu: React$1.FC<LayoutMenuProps>;
+//#endregion
+export { LayoutMenu, LayoutMenuProps };

package/dist/LayoutMenu/LayoutMenu.js

@@ -1,119 +1,105 @@
-import _styled from "@emotion/styled/base";
-import { Box, Flyout, StrokeButton } from '@codecademy/gamut';
-import { variant } from '@codecademy/gamut-styles';
-import { useState } from 'react';
-import * as React from 'react';
-import { LogoCodecademy } from '../Logos';
-import { AccordionMenu, isSection } from './AccordionMenu';
-import { LayoutMenuSection } from './LayoutMenuSection';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyleBox = /*#__PURE__*/_styled(Box, {
-  target: "e1uif67f0",
-  label: "StyleBox"
-})(variant({
-  prop: 'menuHeight',
-  base: {
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    paddingTop: '4px',
-    paddingLeft: '4px'
-  },
-  variants: {
-    sm: {
-      height: '630px'
-    },
-    md: {
-      height: '1000px'
-    },
-    lg: {
-      height: '1370px',
-      paddingLeft: '8px'
-    }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0xheW91dE1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEaUIiLCJmaWxlIjoiLi4vLi4vc3JjL0xheW91dE1lbnUvTGF5b3V0TWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZseW91dCwgU3Ryb2tlQnV0dG9uLCBXaXRoQ2hpbGRyZW5Qcm9wIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTY2FsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlL2Rpc3QvdHlwZXMvY29uZmlnJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMb2dvQ29kZWNhZGVteSB9IGZyb20gJy4uL0xvZ29zJztcbmltcG9ydCB7XG4gIEFjY29yZGlvbk1lbnUsXG4gIGlzU2VjdGlvbixcbiAgU2VjdGlvbixcbiAgU2VjdGlvbkl0ZW0sXG59IGZyb20gJy4vQWNjb3JkaW9uTWVudSc7XG5pbXBvcnQgeyBMYXlvdXRNZW51U2VjdGlvbiB9IGZyb20gJy4vTGF5b3V0TWVudVNlY3Rpb24nO1xuXG5leHBvcnQgaW50ZXJmYWNlIExheW91dE1lbnVQcm9wcyBleHRlbmRzIFdpdGhDaGlsZHJlblByb3Age1xuICAvKipcbiAgICogQWNjZXNzaWJpbGl0eSBsYWJlbCBmb3IgdGhlIG1vYmlsZSBGbHlvdXQncyBjbG9zZSBidXR0b24uXG4gICAqL1xuICBjbG9zZUxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBBbiBhcnJheSBvZiBzZWN0aW9ucyBjb250YWluaW5nIHRoZSB0aXRsZSwgc2x1ZywgYW5kIGl0ZW1zLCBlYWNoIG9mIHdoaWNoIHdpbGwgYmVjb21lIGFuIGFjY29yZGlvbi4gRWFjaCBpdGVtIGNvbnRhaW5zIGEgdGl0bGUsIHNsdWcsIGFuZCBvbkNsaWNrLlxuICAgKiBBcmJpdHJhcnkgcmVhY3Qgbm9kZXMgY2FuIGFsc28gYmUgcGFzc2VkIGFuZCB3aWxsIGJlIHJlbmRlcmVkIGFzLWlzLlxuICAgKi9cbiAgc2VjdGlvbnM6IChTZWN0aW9uIHwgUmVhY3QuUmVhY3ROb2RlKVtdO1xuICAvKipcbiAgICogVGhlIHNsdWcgb2YgdGhlIGN1cnJlbnQgc2VsZWN0ZWQgaXRlbVxuICAgKi9cbiAgc2VsZWN0ZWRJdGVtPzogc3RyaW5nO1xuICAvKipcbiAgICogQ2FsbGJhY2sgdG8gYmUgcnVuIG9uIGNsaWNrIG9mIHRoZSBhY2NvcmRpb24gYnV0dG9uXG4gICAqL1xuICBvblNlY3Rpb25Ub2dnbGU6IChzZWN0aW9uU2x1Zzogc3RyaW5nKSA9PiB2b2lkO1xuICAvKipcbiAgICogVGV4dCBzaG93biBpbiBtb2JpbGUgYnV0dG9uIHRoYXQgb3BlbnMgZmx5b3V0IG9uIGNsaWNrXG4gICAqL1xuICBtb2JpbGVCdXR0b25UZXh0OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBCcmVha3BvaW50IGFib3ZlIHdoaWNoIHRoZSBtZW51IGJ1dHRvbiBkaXNwbGF5cyBhcyBhIGZ1bGwgc2lkZWJhclxuICAgKi9cbiAgYnJlYWtwb2ludD86ICd4cycgfCAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnO1xuICAvKipcbiAgICogQW4gYXJyYXkgb2Ygc2VjdGlvbiBpdGVtcywgZWFjaCBvZiB3aGljaCBiZWNvbWUgYW4gYWRkaXRpb25hbCBsaW5rIG9uIHRvcCBvZiB0aGUgYWNjb3JkaW9uIHNlY3Rpb24uXG4gICAqL1xuICB0b3BMaW5rU2VjdGlvbnM/OiBTZWN0aW9uSXRlbVtdO1xuICAvKipcbiAgICogU2V0IGZpeGVkIGhlaWdodCBmb3IgbWVudSB3aXRoIG92ZXJmbG93XG4gICAqL1xuICBtZW51SGVpZ2h0PzogJ3NtJyB8ICdtZCcgfCAnbGcnO1xuICB2ZXJ0aWNhbFNwYWNpbmc/OiBTY2FsZTx7XG4gICAgcmVhZG9ubHkgcHJvcGVydHk6ICdwYWRkaW5nJztcbiAgICByZWFkb25seSBzY2FsZTogJ3NwYWNpbmcnO1xuICB9Pjtcbn1cblxuY29uc3QgU3R5bGVCb3ggPSBzdHlsZWQoQm94KShcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ21lbnVIZWlnaHQnLFxuICAgIGJhc2U6IHtcbiAgICAgIG92ZXJmbG93WTogJ2F1dG8nLFxuICAgICAgb3ZlcmZsb3dYOiAnaGlkZGVuJyxcbiAgICAgIHBhZGRpbmdUb3A6ICc0cHgnLFxuICAgICAgcGFkZGluZ0xlZnQ6ICc0cHgnLFxuICAgIH0sXG4gICAgdmFyaWFudHM6IHtcbiAgICAgIHNtOiB7XG4gICAgICAgIGhlaWdodDogJzYzMHB4JyxcbiAgICAgIH0sXG4gICAgICBtZDoge1xuICAgICAgICBoZWlnaHQ6ICcxMDAwcHgnLFxuICAgICAgfSxcbiAgICAgIGxnOiB7XG4gICAgICAgIGhlaWdodDogJzEzNzBweCcsXG4gICAgICAgIHBhZGRpbmdMZWZ0OiAnOHB4JyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXRNZW51OiBSZWFjdC5GQzxMYXlvdXRNZW51UHJvcHM+ID0gKHtcbiAgY2xvc2VMYWJlbCxcbiAgc2VjdGlvbnMsXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgc2VsZWN0ZWRJdGVtLFxuICBtb2JpbGVCdXR0b25UZXh0LFxuICBicmVha3BvaW50ID0gJ2xnJyxcbiAgY2hpbGRyZW4sXG4gIHRvcExpbmtTZWN0aW9ucyxcbiAgbWVudUhlaWdodCxcbiAgdmVydGljYWxTcGFjaW5nLFxufSkgPT4ge1xuICBjb25zdCBbZXhwYW5kZWQsIHNldEV4cGFuZGVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBhY2NvcmRpb25NZW51U2VjdGlvbnMgPSBzZWN0aW9ucy5tYXAoKHNlY3Rpb24sIGkpID0+IChcbiAgICA8Qm94IGFzPVwibGlcIiBrZXk9e2lzU2VjdGlvbihzZWN0aW9uKSA/IHNlY3Rpb24uc2x1ZyA6IGl9PlxuICAgICAge2lzU2VjdGlvbihzZWN0aW9uKSA/IChcbiAgICAgICAgPEFjY29yZGlvbk1lbnVcbiAgICAgICAgICBzZWN0aW9uPXtzZWN0aW9ufVxuICAgICAgICAgIG9uU2VjdGlvblRvZ2dsZT17b25TZWN0aW9uVG9nZ2xlfVxuICAgICAgICAgIG9uSXRlbUNsaWNrPXsoKSA9PiBzZXRFeHBhbmRlZChmYWxzZSl9XG4gICAgICAgICAgc2VsZWN0ZWRJdGVtPXtzZWxlY3RlZEl0ZW19XG4gICAgICAgICAgdmVydGljYWxTcGFjaW5nPXt2ZXJ0aWNhbFNwYWNpbmd9XG4gICAgICAgIC8+XG4gICAgICApIDogKFxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tYXJyYXktaW5kZXgta2V5XG4gICAgICAgIDxSZWFjdC5GcmFnbWVudCBrZXk9e2l9PntzZWN0aW9ufTwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICApfVxuICAgIDwvQm94PlxuICApKTtcblxuICBjb25zdCB0b3BMaW5rTGF5b3V0TWVudVNlY3Rpb25zID0gdG9wTGlua1NlY3Rpb25zICYmIChcbiAgICA8Qm94IGFzPVwibGlcIj5cbiAgICAgIDxMYXlvdXRNZW51U2VjdGlvblxuICAgICAgICBpdGVtcz17dG9wTGlua1NlY3Rpb25zfVxuICAgICAgICBvbkl0ZW1DbGljaz17KCkgPT4gc2V0RXhwYW5kZWQoZmFsc2UpfVxuICAgICAgICBzZWxlY3RlZEl0ZW09e3NlbGVjdGVkSXRlbX1cbiAgICAgICAgcGI9ezMyfVxuICAgICAgLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxuYXY+XG4gICAgICA8Qm94IGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgW2JyZWFrcG9pbnRdOiAnbm9uZScgfX0+XG4gICAgICAgIDxGbHlvdXRcbiAgICAgICAgICBjbG9zZUxhYmVsPXtjbG9zZUxhYmVsfVxuICAgICAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBvbkNsb3NlPXsoKSA9PiBzZXRFeHBhbmRlZChmYWxzZSl9XG4gICAgICAgICAgdGl0bGU9ezxMb2dvQ29kZWNhZGVteSBtYj17MzJ9IC8+fVxuICAgICAgICA+XG4gICAgICAgICAgPEJveCBhcz1cInVsXCIgbGlzdFN0eWxlVHlwZT1cIm5vbmVcIiBweT17MH0gcHg9ezE2fSBtPXswfT5cbiAgICAgICAgICAgIHt0b3BMaW5rTGF5b3V0TWVudVNlY3Rpb25zfVxuICAgICAgICAgICAge2FjY29yZGlvbk1lbnVTZWN0aW9uc31cbiAgICAgICAgICAgIHtjaGlsZHJlbiA/IDxCb3ggYXM9XCJsaVwiPntjaGlsZHJlbn08L0JveD4gOiBudWxsfVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L0ZseW91dD5cbiAgICAgICAgPFN0cm9rZUJ1dHRvblxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgIHdpZHRoPXsxfVxuICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHNldEV4cGFuZGVkKHRydWUpfVxuICAgICAgICA+XG4gICAgICAgICAge21vYmlsZUJ1dHRvblRleHR9XG4gICAgICAgIDwvU3Ryb2tlQnV0dG9uPlxuICAgICAgPC9Cb3g+XG4gICAgICA8U3R5bGVCb3hcbiAgICAgICAgYXM9XCJ1bFwiXG4gICAgICAgIGxpc3RTdHlsZVR5cGU9XCJub25lXCJcbiAgICAgICAgcD17MH1cbiAgICAgICAgbT17MH1cbiAgICAgICAgbWVudUhlaWdodD17bWVudUhlaWdodH1cbiAgICAgICAgZGlzcGxheT17eyBfOiAnbm9uZScsIFticmVha3BvaW50XTogJ2Jsb2NrJyB9fVxuICAgICAgICBkYXRhLXRlc3RpZD1cImRlc2t0b3AtbWVudVwiXG4gICAgICA+XG4gICAgICAgIHt0b3BMaW5rTGF5b3V0TWVudVNlY3Rpb25zfVxuICAgICAgICB7YWNjb3JkaW9uTWVudVNlY3Rpb25zfVxuICAgICAgICB7Y2hpbGRyZW4gPyA8Qm94IGFzPVwibGlcIj57Y2hpbGRyZW59PC9Cb3g+IDogbnVsbH1cbiAgICAgIDwvU3R5bGVCb3g+XG4gICAgPC9uYXY+XG4gICk7XG59O1xuIl19 */");
-export const LayoutMenu = ({
-  closeLabel,
-  sections,
-  onSectionToggle,
-  selectedItem,
-  mobileButtonText,
-  breakpoint = 'lg',
-  children,
-  topLinkSections,
-  menuHeight,
-  verticalSpacing
-}) => {
-  const [expanded, setExpanded] = useState(false);
-  const accordionMenuSections = sections.map((section, i) => /*#__PURE__*/_jsx(Box, {
-    as: "li",
-    children: isSection(section) ? /*#__PURE__*/_jsx(AccordionMenu, {
-      section: section,
-      onSectionToggle: onSectionToggle,
-      onItemClick: () => setExpanded(false),
-      selectedItem: selectedItem,
-      verticalSpacing: verticalSpacing
-    }) :
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    _jsx(React.Fragment, {
-      children: section
-    }, i)
-  }, isSection(section) ? section.slug : i));
-  const topLinkLayoutMenuSections = topLinkSections && /*#__PURE__*/_jsx(Box, {
-    as: "li",
-    children: /*#__PURE__*/_jsx(LayoutMenuSection, {
-      items: topLinkSections,
-      onItemClick: () => setExpanded(false),
-      selectedItem: selectedItem,
-      pb: 32
-    })
-  });
-  return /*#__PURE__*/_jsxs("nav", {
-    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, {
-          as: "ul",
-          listStyleType: "none",
-          py: 0,
-          px: 16,
-          m: 0,
-          children: [topLinkLayoutMenuSections, accordionMenuSections, children ? /*#__PURE__*/_jsx(Box, {
-            as: "li",
-            children: children
-          }) : null]
-        })
-      }), /*#__PURE__*/_jsx(StrokeButton, {
-        "aria-expanded": expanded,
-        variant: "secondary",
-        width: 1,
-        onClick: () => setExpanded(true),
-        children: mobileButtonText
-      })]
-    }), /*#__PURE__*/_jsxs(StyleBox, {
-      as: "ul",
-      listStyleType: "none",
-      p: 0,
-      m: 0,
-      menuHeight: menuHeight,
-      display: {
-        _: 'none',
-        [breakpoint]: 'block'
-      },
-      "data-testid": "desktop-menu",
-      children: [topLinkLayoutMenuSections, accordionMenuSections, children ? /*#__PURE__*/_jsx(Box, {
-        as: "li",
-        children: children
-      }) : null]
-    })]
-  });
-};
+import { LogoCodecademy } from "../Logos/LogoCodecademy/index.js";
+import { LayoutMenuSection } from "./LayoutMenuSection.js";
+import { AccordionMenu, isSection } from "./AccordionMenu.js";
+import { Box, Flyout, StrokeButton } from "@codecademy/gamut";
+import { variant } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LayoutMenu/LayoutMenu.tsx
+const StyleBox = styled(Box)(variant({
+	prop: "menuHeight",
+	base: {
+		overflowY: "auto",
+		overflowX: "hidden",
+		paddingTop: "4px",
+		paddingLeft: "4px"
+	},
+	variants: {
+		sm: { height: "630px" },
+		md: { height: "1000px" },
+		lg: {
+			height: "1370px",
+			paddingLeft: "8px"
+		}
+	}
+}));
+const LayoutMenu = ({ closeLabel, sections, onSectionToggle, selectedItem, mobileButtonText, breakpoint = "lg", children, topLinkSections, menuHeight, verticalSpacing }) => {
+	const [expanded, setExpanded] = useState(false);
+	const accordionMenuSections = sections.map((section, i) => /* @__PURE__ */ jsx(Box, {
+		as: "li",
+		children: isSection(section) ? /* @__PURE__ */ jsx(AccordionMenu, {
+			section,
+			onSectionToggle,
+			onItemClick: () => setExpanded(false),
+			selectedItem,
+			verticalSpacing
+		}) : /* @__PURE__ */ jsx(React$1.Fragment, { children: section }, i)
+	}, isSection(section) ? section.slug : i));
+	const topLinkLayoutMenuSections = topLinkSections && /* @__PURE__ */ jsx(Box, {
+		as: "li",
+		children: /* @__PURE__ */ jsx(LayoutMenuSection, {
+			items: topLinkSections,
+			onItemClick: () => setExpanded(false),
+			selectedItem,
+			pb: 32
+		})
+	});
+	return /* @__PURE__ */ jsxs("nav", { 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, {
+				as: "ul",
+				listStyleType: "none",
+				py: 0,
+				px: 16,
+				m: 0,
+				children: [
+					topLinkLayoutMenuSections,
+					accordionMenuSections,
+					children ? /* @__PURE__ */ jsx(Box, {
+						as: "li",
+						children
+					}) : null
+				]
+			})
+		}), /* @__PURE__ */ jsx(StrokeButton, {
+			"aria-expanded": expanded,
+			variant: "secondary",
+			width: 1,
+			onClick: () => setExpanded(true),
+			children: mobileButtonText
+		})]
+	}), /* @__PURE__ */ jsxs(StyleBox, {
+		as: "ul",
+		listStyleType: "none",
+		p: 0,
+		m: 0,
+		menuHeight,
+		display: {
+			_: "none",
+			[breakpoint]: "block"
+		},
+		"data-testid": "desktop-menu",
+		children: [
+			topLinkLayoutMenuSections,
+			accordionMenuSections,
+			children ? /* @__PURE__ */ jsx(Box, {
+				as: "li",
+				children
+			}) : null
+		]
+	})] });
+};
+
+//#endregion
+export { LayoutMenu };