@codecademy/brand 5.10.0 → 6.0.0-alpha.0839dde39.0

package/dist/LayoutMenu/LayoutMenu.js

@@ -1,119 +1,85 @@
-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"
+import { LogoCodecademy } from "../Logos/LogoCodecademy/index.js";
+import "../Logos/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";
+
+//#region src/LayoutMenu/LayoutMenu.tsx
+const StyleBox = /*#__PURE__*/ styled(Box, {
+	target: "ekp6pth0",
+	label: "brand-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]
-    })]
-  });
-};
+	prop: "menuHeight",
+	base: {
+		overflowY: "auto",
+		overflowX: "hidden",
+		paddingTop: "4px",
+		paddingLeft: "4px"
+	},
+	variants: {
+		sm: { height: "630px" },
+		md: { height: "1000px" },
+		lg: {
+			height: "1370px",
+			paddingLeft: "8px"
+		}
+	}
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnUvTGF5b3V0TWVudS50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9MYXlvdXRNZW51L0xheW91dE1lbnUudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmx5b3V0LCBTdHJva2VCdXR0b24sIFdpdGhDaGlsZHJlblByb3AgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyB2YXJpYW50IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFNjYWxlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UvZGlzdC90eXBlcy9jb25maWcnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IExvZ29Db2RlY2FkZW15IH0gZnJvbSAnLi4vTG9nb3MnO1xuaW1wb3J0IHtcbiAgQWNjb3JkaW9uTWVudSxcbiAgaXNTZWN0aW9uLFxuICBTZWN0aW9uLFxuICBTZWN0aW9uSXRlbSxcbn0gZnJvbSAnLi9BY2NvcmRpb25NZW51JztcbmltcG9ydCB7IExheW91dE1lbnVTZWN0aW9uIH0gZnJvbSAnLi9MYXlvdXRNZW51U2VjdGlvbic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGF5b3V0TWVudVByb3BzIGV4dGVuZHMgV2l0aENoaWxkcmVuUHJvcCB7XG4gIC8qKlxuICAgKiBBY2Nlc3NpYmlsaXR5IGxhYmVsIGZvciB0aGUgbW9iaWxlIEZseW91dCdzIGNsb3NlIGJ1dHRvbi5cbiAgICovXG4gIGNsb3NlTGFiZWw6IHN0cmluZztcbiAgLyoqXG4gICAqIEFuIGFycmF5IG9mIHNlY3Rpb25zIGNvbnRhaW5pbmcgdGhlIHRpdGxlLCBzbHVnLCBhbmQgaXRlbXMsIGVhY2ggb2Ygd2hpY2ggd2lsbCBiZWNvbWUgYW4gYWNjb3JkaW9uLiBFYWNoIGl0ZW0gY29udGFpbnMgYSB0aXRsZSwgc2x1ZywgYW5kIG9uQ2xpY2suXG4gICAqIEFyYml0cmFyeSByZWFjdCBub2RlcyBjYW4gYWxzbyBiZSBwYXNzZWQgYW5kIHdpbGwgYmUgcmVuZGVyZWQgYXMtaXMuXG4gICAqL1xuICBzZWN0aW9uczogKFNlY3Rpb24gfCBSZWFjdC5SZWFjdE5vZGUpW107XG4gIC8qKlxuICAgKiBUaGUgc2x1ZyBvZiB0aGUgY3VycmVudCBzZWxlY3RlZCBpdGVtXG4gICAqL1xuICBzZWxlY3RlZEl0ZW0/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayB0byBiZSBydW4gb24gY2xpY2sgb2YgdGhlIGFjY29yZGlvbiBidXR0b25cbiAgICovXG4gIG9uU2VjdGlvblRvZ2dsZTogKHNlY3Rpb25TbHVnOiBzdHJpbmcpID0+IHZvaWQ7XG4gIC8qKlxuICAgKiBUZXh0IHNob3duIGluIG1vYmlsZSBidXR0b24gdGhhdCBvcGVucyBmbHlvdXQgb24gY2xpY2tcbiAgICovXG4gIG1vYmlsZUJ1dHRvblRleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqIEJyZWFrcG9pbnQgYWJvdmUgd2hpY2ggdGhlIG1lbnUgYnV0dG9uIGRpc3BsYXlzIGFzIGEgZnVsbCBzaWRlYmFyXG4gICAqL1xuICBicmVha3BvaW50PzogJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCc7XG4gIC8qKlxuICAgKiBBbiBhcnJheSBvZiBzZWN0aW9uIGl0ZW1zLCBlYWNoIG9mIHdoaWNoIGJlY29tZSBhbiBhZGRpdGlvbmFsIGxpbmsgb24gdG9wIG9mIHRoZSBhY2NvcmRpb24gc2VjdGlvbi5cbiAgICovXG4gIHRvcExpbmtTZWN0aW9ucz86IFNlY3Rpb25JdGVtW107XG4gIC8qKlxuICAgKiBTZXQgZml4ZWQgaGVpZ2h0IGZvciBtZW51IHdpdGggb3ZlcmZsb3dcbiAgICovXG4gIG1lbnVIZWlnaHQ/OiAnc20nIHwgJ21kJyB8ICdsZyc7XG4gIHZlcnRpY2FsU3BhY2luZz86IFNjYWxlPHtcbiAgICByZWFkb25seSBwcm9wZXJ0eTogJ3BhZGRpbmcnO1xuICAgIHJlYWRvbmx5IHNjYWxlOiAnc3BhY2luZyc7XG4gIH0+O1xufVxuXG5jb25zdCBTdHlsZUJveCA9IHN0eWxlZChCb3gpKFxuICB2YXJpYW50KHtcbiAgICBwcm9wOiAnbWVudUhlaWdodCcsXG4gICAgYmFzZToge1xuICAgICAgb3ZlcmZsb3dZOiAnYXV0bycsXG4gICAgICBvdmVyZmxvd1g6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZ1RvcDogJzRweCcsXG4gICAgICBwYWRkaW5nTGVmdDogJzRweCcsXG4gICAgfSxcbiAgICB2YXJpYW50czoge1xuICAgICAgc206IHtcbiAgICAgICAgaGVpZ2h0OiAnNjMwcHgnLFxuICAgICAgfSxcbiAgICAgIG1kOiB7XG4gICAgICAgIGhlaWdodDogJzEwMDBweCcsXG4gICAgICB9LFxuICAgICAgbGc6IHtcbiAgICAgICAgaGVpZ2h0OiAnMTM3MHB4JyxcbiAgICAgICAgcGFkZGluZ0xlZnQ6ICc4cHgnLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IExheW91dE1lbnU6IFJlYWN0LkZDPExheW91dE1lbnVQcm9wcz4gPSAoe1xuICBjbG9zZUxhYmVsLFxuICBzZWN0aW9ucyxcbiAgb25TZWN0aW9uVG9nZ2xlLFxuICBzZWxlY3RlZEl0ZW0sXG4gIG1vYmlsZUJ1dHRvblRleHQsXG4gIGJyZWFrcG9pbnQgPSAnbGcnLFxuICBjaGlsZHJlbixcbiAgdG9wTGlua1NlY3Rpb25zLFxuICBtZW51SGVpZ2h0LFxuICB2ZXJ0aWNhbFNwYWNpbmcsXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IGFjY29yZGlvbk1lbnVTZWN0aW9ucyA9IHNlY3Rpb25zLm1hcCgoc2VjdGlvbiwgaSkgPT4gKFxuICAgIDxCb3ggYXM9XCJsaVwiIGtleT17aXNTZWN0aW9uKHNlY3Rpb24pID8gc2VjdGlvbi5zbHVnIDogaX0+XG4gICAgICB7aXNTZWN0aW9uKHNlY3Rpb24pID8gKFxuICAgICAgICA8QWNjb3JkaW9uTWVudVxuICAgICAgICAgIHNlY3Rpb249e3NlY3Rpb259XG4gICAgICAgICAgb25TZWN0aW9uVG9nZ2xlPXtvblNlY3Rpb25Ub2dnbGV9XG4gICAgICAgICAgb25JdGVtQ2xpY2s9eygpID0+IHNldEV4cGFuZGVkKGZhbHNlKX1cbiAgICAgICAgICBzZWxlY3RlZEl0ZW09e3NlbGVjdGVkSXRlbX1cbiAgICAgICAgICB2ZXJ0aWNhbFNwYWNpbmc9e3ZlcnRpY2FsU3BhY2luZ31cbiAgICAgICAgLz5cbiAgICAgICkgOiAoXG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC9uby1hcnJheS1pbmRleC1rZXlcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50IGtleT17aX0+e3NlY3Rpb259PC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICl9XG4gICAgPC9Cb3g+XG4gICkpO1xuXG4gIGNvbnN0IHRvcExpbmtMYXlvdXRNZW51U2VjdGlvbnMgPSB0b3BMaW5rU2VjdGlvbnMgJiYgKFxuICAgIDxCb3ggYXM9XCJsaVwiPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uXG4gICAgICAgIGl0ZW1zPXt0b3BMaW5rU2VjdGlvbnN9XG4gICAgICAgIG9uSXRlbUNsaWNrPXsoKSA9PiBzZXRFeHBhbmRlZChmYWxzZSl9XG4gICAgICAgIHNlbGVjdGVkSXRlbT17c2VsZWN0ZWRJdGVtfVxuICAgICAgICBwYj17MzJ9XG4gICAgICAvPlxuICAgIDwvQm94PlxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPG5hdj5cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiAnYmxvY2snLCBbYnJlYWtwb2ludF06ICdub25lJyB9fT5cbiAgICAgICAgPEZseW91dFxuICAgICAgICAgIGNsb3NlTGFiZWw9e2Nsb3NlTGFiZWx9XG4gICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgIG9uQ2xvc2U9eygpID0+IHNldEV4cGFuZGVkKGZhbHNlKX1cbiAgICAgICAgICB0aXRsZT17PExvZ29Db2RlY2FkZW15IG1iPXszMn0gLz59XG4gICAgICAgID5cbiAgICAgICAgICA8Qm94IGFzPVwidWxcIiBsaXN0U3R5bGVUeXBlPVwibm9uZVwiIHB5PXswfSBweD17MTZ9IG09ezB9PlxuICAgICAgICAgICAge3RvcExpbmtMYXlvdXRNZW51U2VjdGlvbnN9XG4gICAgICAgICAgICB7YWNjb3JkaW9uTWVudVNlY3Rpb25zfVxuICAgICAgICAgICAge2NoaWxkcmVuID8gPEJveCBhcz1cImxpXCI+e2NoaWxkcmVufTwvQm94PiA6IG51bGx9XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgIDwvRmx5b3V0PlxuICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgd2lkdGg9ezF9XG4gICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0RXhwYW5kZWQodHJ1ZSl9XG4gICAgICAgID5cbiAgICAgICAgICB7bW9iaWxlQnV0dG9uVGV4dH1cbiAgICAgICAgPC9TdHJva2VCdXR0b24+XG4gICAgICA8L0JveD5cbiAgICAgIDxTdHlsZUJveFxuICAgICAgICBhcz1cInVsXCJcbiAgICAgICAgbGlzdFN0eWxlVHlwZT1cIm5vbmVcIlxuICAgICAgICBwPXswfVxuICAgICAgICBtPXswfVxuICAgICAgICBtZW51SGVpZ2h0PXttZW51SGVpZ2h0fVxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgW2JyZWFrcG9pbnRdOiAnYmxvY2snIH19XG4gICAgICAgIGRhdGEtdGVzdGlkPVwiZGVza3RvcC1tZW51XCJcbiAgICAgID5cbiAgICAgICAge3RvcExpbmtMYXlvdXRNZW51U2VjdGlvbnN9XG4gICAgICAgIHthY2NvcmRpb25NZW51U2VjdGlvbnN9XG4gICAgICAgIHtjaGlsZHJlbiA/IDxCb3ggYXM9XCJsaVwiPntjaGlsZHJlbn08L0JveD4gOiBudWxsfVxuICAgICAgPC9TdHlsZUJveD5cbiAgICA8L25hdj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0RpQiJ9 */");
+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__*/ React$1.createElement(Box, {
+		as: "li",
+		key: isSection(section) ? section.slug : i
+	}, isSection(section) ? /*#__PURE__*/ React$1.createElement(AccordionMenu, {
+		section,
+		onSectionToggle,
+		onItemClick: () => setExpanded(false),
+		selectedItem,
+		verticalSpacing
+	}) : /*#__PURE__*/ React$1.createElement(React$1.Fragment, { key: i }, section)));
+	const topLinkLayoutMenuSections = topLinkSections && /*#__PURE__*/ React$1.createElement(Box, { as: "li" }, /*#__PURE__*/ React$1.createElement(LayoutMenuSection, {
+		items: topLinkSections,
+		onItemClick: () => setExpanded(false),
+		selectedItem,
+		pb: 32
+	}));
+	return /*#__PURE__*/ React$1.createElement("nav", null, /*#__PURE__*/ React$1.createElement(Box, { display: {
+		_: "block",
+		[breakpoint]: "none"
+	} }, /*#__PURE__*/ React$1.createElement(Flyout, {
+		closeLabel,
+		expanded,
+		onClose: () => setExpanded(false),
+		title: /*#__PURE__*/ React$1.createElement(LogoCodecademy, { mb: 32 })
+	}, /*#__PURE__*/ React$1.createElement(Box, {
+		as: "ul",
+		listStyleType: "none",
+		py: 0,
+		px: 16,
+		m: 0
+	}, topLinkLayoutMenuSections, accordionMenuSections, children ? /*#__PURE__*/ React$1.createElement(Box, { as: "li" }, children) : null)), /*#__PURE__*/ React$1.createElement(StrokeButton, {
+		"aria-expanded": expanded,
+		variant: "secondary",
+		width: 1,
+		onClick: () => setExpanded(true)
+	}, mobileButtonText)), /*#__PURE__*/ React$1.createElement(StyleBox, {
+		as: "ul",
+		listStyleType: "none",
+		p: 0,
+		m: 0,
+		menuHeight,
+		display: {
+			_: "none",
+			[breakpoint]: "block"
+		},
+		"data-testid": "desktop-menu"
+	}, topLinkLayoutMenuSections, accordionMenuSections, children ? /*#__PURE__*/ React$1.createElement(Box, { as: "li" }, children) : null));
+};
+
+//#endregion
+export { LayoutMenu };
+//# sourceMappingURL=LayoutMenu.js.map

package/dist/LayoutMenu/LayoutMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.js","names":["Box","Flyout","StrokeButton","variant","styled","useState","React","LogoCodecademy","AccordionMenu","isSection","LayoutMenuSection","StyleBox","prop","base","overflowY","overflowX","paddingTop","paddingLeft","variants","sm","height","md","lg","LayoutMenu","closeLabel","sections","onSectionToggle","selectedItem","mobileButtonText","breakpoint","children","topLinkSections","menuHeight","verticalSpacing","expanded","setExpanded","accordionMenuSections","map","section","i","as","key","slug","onItemClick","Fragment","topLinkLayoutMenuSections","items","pb","nav","display","_","onClose","title","mb","listStyleType","py","px","m","aria-expanded","width","onClick","p","data-testid"],"sources":["../../src/LayoutMenu/LayoutMenu.tsx"],"sourcesContent":["import { Box, Flyout, StrokeButton, WithChildrenProp } from '@codecademy/gamut';\nimport { variant } from '@codecademy/gamut-styles';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport styled from '@emotion/styled';\nimport { useState } from 'react';\nimport * as React from 'react';\n\nimport { LogoCodecademy } from '../Logos';\nimport {\n  AccordionMenu,\n  isSection,\n  Section,\n  SectionItem,\n} from './AccordionMenu';\nimport { LayoutMenuSection } from './LayoutMenuSection';\n\nexport interface LayoutMenuProps extends WithChildrenProp {\n  /**\n   * Accessibility label for the mobile Flyout's close button.\n   */\n  closeLabel: string;\n  /**\n   * 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.\n   * Arbitrary react nodes can also be passed and will be rendered as-is.\n   */\n  sections: (Section | React.ReactNode)[];\n  /**\n   * The slug of the current selected item\n   */\n  selectedItem?: string;\n  /**\n   * Callback to be run on click of the accordion button\n   */\n  onSectionToggle: (sectionSlug: string) => void;\n  /**\n   * Text shown in mobile button that opens flyout on click\n   */\n  mobileButtonText: string;\n  /**\n   * Breakpoint above which the menu button displays as a full sidebar\n   */\n  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * An array of section items, each of which become an additional link on top of the accordion section.\n   */\n  topLinkSections?: SectionItem[];\n  /**\n   * Set fixed height for menu with overflow\n   */\n  menuHeight?: 'sm' | 'md' | 'lg';\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n}\n\nconst StyleBox = styled(Box)(\n  variant({\n    prop: 'menuHeight',\n    base: {\n      overflowY: 'auto',\n      overflowX: 'hidden',\n      paddingTop: '4px',\n      paddingLeft: '4px',\n    },\n    variants: {\n      sm: {\n        height: '630px',\n      },\n      md: {\n        height: '1000px',\n      },\n      lg: {\n        height: '1370px',\n        paddingLeft: '8px',\n      },\n    },\n  })\n);\n\nexport const LayoutMenu: React.FC<LayoutMenuProps> = ({\n  closeLabel,\n  sections,\n  onSectionToggle,\n  selectedItem,\n  mobileButtonText,\n  breakpoint = 'lg',\n  children,\n  topLinkSections,\n  menuHeight,\n  verticalSpacing,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const accordionMenuSections = sections.map((section, i) => (\n    <Box as=\"li\" key={isSection(section) ? section.slug : i}>\n      {isSection(section) ? (\n        <AccordionMenu\n          section={section}\n          onSectionToggle={onSectionToggle}\n          onItemClick={() => setExpanded(false)}\n          selectedItem={selectedItem}\n          verticalSpacing={verticalSpacing}\n        />\n      ) : (\n        // eslint-disable-next-line react/no-array-index-key\n        <React.Fragment key={i}>{section}</React.Fragment>\n      )}\n    </Box>\n  ));\n\n  const topLinkLayoutMenuSections = topLinkSections && (\n    <Box as=\"li\">\n      <LayoutMenuSection\n        items={topLinkSections}\n        onItemClick={() => setExpanded(false)}\n        selectedItem={selectedItem}\n        pb={32}\n      />\n    </Box>\n  );\n\n  return (\n    <nav>\n      <Box display={{ _: 'block', [breakpoint]: 'none' }}>\n        <Flyout\n          closeLabel={closeLabel}\n          expanded={expanded}\n          onClose={() => setExpanded(false)}\n          title={<LogoCodecademy mb={32} />}\n        >\n          <Box as=\"ul\" listStyleType=\"none\" py={0} px={16} m={0}>\n            {topLinkLayoutMenuSections}\n            {accordionMenuSections}\n            {children ? <Box as=\"li\">{children}</Box> : null}\n          </Box>\n        </Flyout>\n        <StrokeButton\n          aria-expanded={expanded}\n          variant=\"secondary\"\n          width={1}\n          onClick={() => setExpanded(true)}\n        >\n          {mobileButtonText}\n        </StrokeButton>\n      </Box>\n      <StyleBox\n        as=\"ul\"\n        listStyleType=\"none\"\n        p={0}\n        m={0}\n        menuHeight={menuHeight}\n        display={{ _: 'none', [breakpoint]: 'block' }}\n        data-testid=\"desktop-menu\"\n      >\n        {topLinkLayoutMenuSections}\n        {accordionMenuSections}\n        {children ? <Box as=\"li\">{children}</Box> : null}\n      </StyleBox>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAwDA,MAAMW,WAAWP,qBAAOJ,KAAAA;;;GACtBG,QAAQ;CACNS,MAAM;CACNC,MAAM;EACJC,WAAW;EACXC,WAAW;EACXC,YAAY;EACZC,aAAa;CACf;CACAC,UAAU;EACRC,IAAI,EACFC,QAAQ,QACV;EACAC,IAAI,EACFD,QAAQ,SACV;EACAE,IAAI;GACFF,QAAQ;GACRH,aAAa;EACf;CACF;AACF,CAAA,GAAA,6sMAAA;AAGF,MAAaM,cAAyC,EACpDC,YACAC,UACAC,iBACAC,cACAC,kBACAC,aAAa,MACbC,UACAC,iBACAC,YACAC,sBACD;CACC,MAAM,CAACC,UAAUC,eAAe9B,SAAS,KAAA;CAEzC,MAAM+B,wBAAwBX,SAASY,KAAKC,SAASC,MACnD,sBAAA,cAACvC,KAAAA;EAAIwC,IAAG;EAAKC,KAAKhC,UAAU6B,OAAAA,IAAWA,QAAQI,OAAOH;IACnD9B,UAAU6B,OAAAA,IACT,sBAAA,cAAC9B,eAAAA;EACU8B;EACQZ;EACjBiB,mBAAmBR,YAAY,KAAA;EACjBR;EACGM;MAInB,sBAAA,cAAC3B,QAAMsC,UAAQ,EAACH,KAAKF,KAAID,OAAAA,CAAAA,CAAAA;CAK/B,MAAMO,4BAA4Bd,mBAChC,sBAAA,cAAC/B,KAAAA,EAAIwC,IAAG,QACN,sBAAA,cAAC9B,mBAAAA;EACCoC,OAAOf;EACPY,mBAAmBR,YAAY,KAAA;EACjBR;EACdoB,IAAI;;CAKV,OACE,sBAAA,cAACC,OAAAA,MACC,sBAAA,cAAChD,KAAAA,EAAIiD,SAAS;EAAEC,GAAG;GAAUrB,aAAa;CAAO,KAC/C,sBAAA,cAAC5B,QAAAA;EACauB;EACFU;EACViB,eAAehB,YAAY,KAAA;EAC3BiB,OAAO,sBAAA,cAAC7C,gBAAAA,EAAe8C,IAAI;IAE3B,sBAAA,cAACrD,KAAAA;EAAIwC,IAAG;EAAKc,eAAc;EAAOC,IAAI;EAAGC,IAAI;EAAIC,GAAG;IACjDZ,2BACAT,uBACAN,WAAW,sBAAA,cAAC9B,KAAAA,EAAIwC,IAAG,QAAMV,QAAAA,IAAkB,IAAA,CAAA,GAGhD,sBAAA,cAAC5B,cAAAA;EACCwD,iBAAexB;EACf/B,SAAQ;EACRwD,OAAO;EACPC,eAAezB,YAAY,IAAA;IAE1BP,gBAAAA,CAAAA,GAGL,sBAAA,cAACjB,UAAAA;EACC6B,IAAG;EACHc,eAAc;EACdO,GAAG;EACHJ,GAAG;EACSzB;EACZiB,SAAS;GAAEC,GAAG;IAASrB,aAAa;EAAQ;EAC5CiC,eAAY;IAEXjB,2BACAT,uBACAN,WAAW,sBAAA,cAAC9B,KAAAA,EAAIwC,IAAG,QAAMV,QAAAA,IAAkB,IAAA,CAAA;AAIpD"}

package/dist/LayoutMenu/LayoutMenuSection.cjs

@@ -0,0 +1,30 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_SectionItemLink = require('./SectionItemLink.cjs');
+const require_SelectedSectionItem = require('./SelectedSectionItem.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/LayoutMenu/LayoutMenuSection.tsx
+const LayoutMenuSection = ({ items, selectedItem, onItemClick, verticalSpacing = 8, ...styleProps }) => /*#__PURE__*/ react.createElement(_codecademy_gamut.Box, {
+	as: "ul",
+	listStyleType: "none",
+	p: 0,
+	m: 0,
+	...styleProps
+}, items.map((item) => /*#__PURE__*/ react.createElement(_codecademy_gamut.Box, {
+	as: "li",
+	key: item.slug,
+	py: verticalSpacing,
+	px: 4
+}, selectedItem === item.slug ? /*#__PURE__*/ react.createElement(require_SelectedSectionItem.SelectedSectionItem, null, /*#__PURE__*/ react.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, item.title, item.badge)) : /*#__PURE__*/ react.createElement(require_SectionItemLink.SectionItemLink, {
+	href: item.href,
+	onClick: (event) => {
+		item.onClick(event);
+		onItemClick();
+	}
+}, /*#__PURE__*/ react.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, item.title, item.badge)))));
+
+//#endregion
+exports.LayoutMenuSection = LayoutMenuSection;
+//# sourceMappingURL=LayoutMenuSection.cjs.map

package/dist/LayoutMenu/LayoutMenuSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.cjs","names":["Box","FlexBox","React","SectionItemLink","SelectedSectionItem","LayoutMenuSection","items","selectedItem","onItemClick","verticalSpacing","styleProps","as","listStyleType","p","m","map","item","key","slug","py","px","alignItems","title","badge","href","onClick","event"],"sources":["../../src/LayoutMenu/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport * as React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\nimport { SelectedSectionItem } from './SelectedSectionItem';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  selectedItem?: string;\n  onItemClick: () => void;\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n};\n\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  selectedItem,\n  onItemClick,\n  verticalSpacing = 8,\n  ...styleProps\n}) => (\n  <Box as=\"ul\" listStyleType=\"none\" p={0} m={0} {...styleProps}>\n    {items.map((item) => (\n      <Box as=\"li\" key={item.slug} py={verticalSpacing} px={4}>\n        {selectedItem === item.slug ? (\n          <SelectedSectionItem>\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SelectedSectionItem>\n        ) : (\n          <SectionItemLink\n            href={item.href}\n            onClick={(event) => {\n              item.onClick(event);\n              onItemClick();\n            }}\n          >\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SectionItemLink>\n        )}\n      </Box>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;;;AAsBA,MAAaK,qBAAuD,EAClEC,OACAC,cACAC,aACAC,kBAAkB,GAClB,GAAGC,iBAEH,oBAAA,cAACV,uBAAAA;CAAIW,IAAG;CAAKC,eAAc;CAAOC,GAAG;CAAGC,GAAG;CAAI,GAAGJ;GAC/CJ,MAAMS,KAAKC,SACV,oBAAA,cAAChB,uBAAAA;CAAIW,IAAG;CAAKM,KAAKD,KAAKE;CAAMC,IAAIV;CAAiBW,IAAI;GACnDb,iBAAiBS,KAAKE,OACrB,oBAAA,cAACd,iDAAAA,MACC,oBAAA,cAACH,2BAAAA,EAAQoB,YAAW,YACjBL,KAAKM,OACLN,KAAKO,KAAK,CAAA,IAIf,oBAAA,cAACpB,yCAAAA;CACCqB,MAAMR,KAAKQ;CACXC,UAAUC,UAAAA;EACRV,KAAKS,QAAQC,KAAAA;EACblB,YAAAA;CACF;GAEA,oBAAA,cAACP,2BAAAA,EAAQoB,YAAW,YACjBL,KAAKM,OACLN,KAAKO,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/LayoutMenu/LayoutMenuSection.js

@@ -1,39 +1,28 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import * as React from 'react';
-import { SectionItemLink } from './SectionItemLink';
-import { SelectedSectionItem } from './SelectedSectionItem';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-export const LayoutMenuSection = ({
-  items,
-  selectedItem,
-  onItemClick,
-  verticalSpacing = 8,
-  ...styleProps
-}) => /*#__PURE__*/_jsx(Box, {
-  as: "ul",
-  listStyleType: "none",
-  p: 0,
-  m: 0,
-  ...styleProps,
-  children: items.map(item => /*#__PURE__*/_jsx(Box, {
-    as: "li",
-    py: verticalSpacing,
-    px: 4,
-    children: selectedItem === item.slug ? /*#__PURE__*/_jsx(SelectedSectionItem, {
-      children: /*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "center",
-        children: [item.title, item.badge]
-      })
-    }) : /*#__PURE__*/_jsx(SectionItemLink, {
-      href: item.href,
-      onClick: event => {
-        item.onClick(event);
-        onItemClick();
-      },
-      children: /*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "center",
-        children: [item.title, item.badge]
-      })
-    })
-  }, item.slug))
-});
+import { SectionItemLink } from "./SectionItemLink.js";
+import { SelectedSectionItem } from "./SelectedSectionItem.js";
+import { Box, FlexBox } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/LayoutMenuSection.tsx
+const LayoutMenuSection = ({ items, selectedItem, onItemClick, verticalSpacing = 8, ...styleProps }) => /*#__PURE__*/ React$1.createElement(Box, {
+	as: "ul",
+	listStyleType: "none",
+	p: 0,
+	m: 0,
+	...styleProps
+}, items.map((item) => /*#__PURE__*/ React$1.createElement(Box, {
+	as: "li",
+	key: item.slug,
+	py: verticalSpacing,
+	px: 4
+}, selectedItem === item.slug ? /*#__PURE__*/ React$1.createElement(SelectedSectionItem, null, /*#__PURE__*/ React$1.createElement(FlexBox, { alignItems: "center" }, item.title, item.badge)) : /*#__PURE__*/ React$1.createElement(SectionItemLink, {
+	href: item.href,
+	onClick: (event) => {
+		item.onClick(event);
+		onItemClick();
+	}
+}, /*#__PURE__*/ React$1.createElement(FlexBox, { alignItems: "center" }, item.title, item.badge)))));
+
+//#endregion
+export { LayoutMenuSection };
+//# sourceMappingURL=LayoutMenuSection.js.map

package/dist/LayoutMenu/LayoutMenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.js","names":["Box","FlexBox","React","SectionItemLink","SelectedSectionItem","LayoutMenuSection","items","selectedItem","onItemClick","verticalSpacing","styleProps","as","listStyleType","p","m","map","item","key","slug","py","px","alignItems","title","badge","href","onClick","event"],"sources":["../../src/LayoutMenu/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport { Scale } from '@codecademy/variance/dist/types/config';\nimport * as React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\nimport { SelectedSectionItem } from './SelectedSectionItem';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  selectedItem?: string;\n  onItemClick: () => void;\n  verticalSpacing?: Scale<{\n    readonly property: 'padding';\n    readonly scale: 'spacing';\n  }>;\n};\n\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  selectedItem,\n  onItemClick,\n  verticalSpacing = 8,\n  ...styleProps\n}) => (\n  <Box as=\"ul\" listStyleType=\"none\" p={0} m={0} {...styleProps}>\n    {items.map((item) => (\n      <Box as=\"li\" key={item.slug} py={verticalSpacing} px={4}>\n        {selectedItem === item.slug ? (\n          <SelectedSectionItem>\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SelectedSectionItem>\n        ) : (\n          <SectionItemLink\n            href={item.href}\n            onClick={(event) => {\n              item.onClick(event);\n              onItemClick();\n            }}\n          >\n            <FlexBox alignItems=\"center\">\n              {item.title}\n              {item.badge}\n            </FlexBox>\n          </SectionItemLink>\n        )}\n      </Box>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;AAsBA,MAAaK,qBAAuD,EAClEC,OACAC,cACAC,aACAC,kBAAkB,GAClB,GAAGC,iBAEH,sBAAA,cAACV,KAAAA;CAAIW,IAAG;CAAKC,eAAc;CAAOC,GAAG;CAAGC,GAAG;CAAI,GAAGJ;GAC/CJ,MAAMS,KAAKC,SACV,sBAAA,cAAChB,KAAAA;CAAIW,IAAG;CAAKM,KAAKD,KAAKE;CAAMC,IAAIV;CAAiBW,IAAI;GACnDb,iBAAiBS,KAAKE,OACrB,sBAAA,cAACd,qBAAAA,MACC,sBAAA,cAACH,SAAAA,EAAQoB,YAAW,YACjBL,KAAKM,OACLN,KAAKO,KAAK,CAAA,IAIf,sBAAA,cAACpB,iBAAAA;CACCqB,MAAMR,KAAKQ;CACXC,UAAUC,UAAAA;EACRV,KAAKS,QAAQC,KAAAA;EACblB,YAAAA;CACF;GAEA,sBAAA,cAACP,SAAAA,EAAQoB,YAAW,YACjBL,KAAKM,OACLN,KAAKO,KAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/LayoutMenu/SectionItemLink.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/LayoutMenu/SectionItemLink.tsx
+const SectionItemLink = ({ onClick, href, children }) => {
+	return /*#__PURE__*/ react.createElement(_codecademy_gamut.Anchor, {
+		variant: "interface",
+		display: "block",
+		href,
+		onClick
+	}, children);
+};
+
+//#endregion
+exports.SectionItemLink = SectionItemLink;
+//# sourceMappingURL=SectionItemLink.cjs.map

package/dist/LayoutMenu/SectionItemLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.cjs","names":["Anchor","React","SectionItemLink","onClick","href","children","variant","display"],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  children,\n}) => {\n  return (\n    <Anchor variant=\"interface\" display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;;AAQA,MAAaE,mBAAmD,EAC9DC,SACAC,MACAC,eACD;CACC,OACE,oBAAA,cAACL,0BAAAA;EAAOM,SAAQ;EAAYC,SAAQ;EAAcH;EAAeD;IAC9DE,QAAAA;AAGP"}

package/dist/LayoutMenu/SectionItemLink.d.cts

@@ -0,0 +1,12 @@
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/SectionItemLink.d.ts
+interface SectionItemLinkProps extends WithChildrenProp {
+  onClick: (event: React$1.MouseEvent) => void;
+  href: string;
+}
+declare const SectionItemLink: React$1.FC<SectionItemLinkProps>;
+//#endregion
+export { SectionItemLink, SectionItemLinkProps };
+//# sourceMappingURL=SectionItemLink.d.cts.map

package/dist/LayoutMenu/SectionItemLink.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.d.cts","names":[],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"mappings":";;;;UAGiB,oBAAA,SAA6B,gBAAgB;EAC5D,OAAA,GAAU,KAAA,EAAO,OAAA,CAAM,UAAA;EACvB,IAAA;AAAA;AAAA,cAGW,eAAA,EAAiB,OAAA,CAAM,EAAE,CAAC,oBAAA"}

package/dist/LayoutMenu/SectionItemLink.d.ts

@@ -1,7 +1,12 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export interface SectionItemLinkProps extends WithChildrenProp {
-    onClick: (event: React.MouseEvent) => void;
-    href: string;
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/SectionItemLink.d.ts
+interface SectionItemLinkProps extends WithChildrenProp {
+  onClick: (event: React$1.MouseEvent) => void;
+  href: string;
 }
-export declare const SectionItemLink: React.FC<SectionItemLinkProps>;
+declare const SectionItemLink: React$1.FC<SectionItemLinkProps>;
+//#endregion
+export { SectionItemLink, SectionItemLinkProps };
+//# sourceMappingURL=SectionItemLink.d.ts.map

package/dist/LayoutMenu/SectionItemLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.d.ts","names":[],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"mappings":";;;;UAGiB,oBAAA,SAA6B,gBAAA;EAC5C,OAAA,GAAU,KAAA,EAAO,OAAA,CAAM,UAAA;EACvB,IAAA;AAAA;AAAA,cAGW,eAAA,EAAiB,OAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/LayoutMenu/SectionItemLink.js

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

package/dist/LayoutMenu/SectionItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.js","names":["Anchor","React","SectionItemLink","onClick","href","children","variant","display"],"sources":["../../src/LayoutMenu/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  children,\n}) => {\n  return (\n    <Anchor variant=\"interface\" display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;AAQA,MAAaE,mBAAmD,EAC9DC,SACAC,MACAC,eACD;CACC,OACE,sBAAA,cAACL,QAAAA;EAAOM,SAAQ;EAAYC,SAAQ;EAAcH;EAAeD;IAC9DE,QAAAA;AAGP"}

package/dist/LayoutMenu/SelectedSectionItem.cjs

@@ -0,0 +1,18 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/LayoutMenu/SelectedSectionItem.tsx
+const SelectedSectionItem = ({ children }) => {
+	return /*#__PURE__*/ react.createElement(_codecademy_gamut.Box, {
+		borderLeft: 1,
+		borderWidthLeft: "6px",
+		pl: 12,
+		"aria-current": "true"
+	}, /*#__PURE__*/ react.createElement(_codecademy_gamut.Text, { fontWeight: "title" }, children));
+};
+
+//#endregion
+exports.SelectedSectionItem = SelectedSectionItem;
+//# sourceMappingURL=SelectedSectionItem.cjs.map

package/dist/LayoutMenu/SelectedSectionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.cjs","names":["Box","Text","React","SelectedSectionItem","children","borderLeft","borderWidthLeft","pl","aria-current","fontWeight"],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"sourcesContent":["import { Box, Text, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport const SelectedSectionItem: React.FC<WithChildrenProp> = ({\n  children,\n}) => {\n  return (\n    <Box borderLeft={1} borderWidthLeft=\"6px\" pl={12} aria-current=\"true\">\n      <Text fontWeight=\"title\">{children}</Text>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAGA,MAAaG,uBAAmD,EAC9DC,eACD;CACC,OACE,oBAAA,cAACJ,uBAAAA;EAAIK,YAAY;EAAGC,iBAAgB;EAAMC,IAAI;EAAIC,gBAAa;IAC7D,oBAAA,cAACP,wBAAAA,EAAKQ,YAAW,WAASL,QAAAA,CAAAA;AAGhC"}

package/dist/LayoutMenu/SelectedSectionItem.d.cts

@@ -0,0 +1,8 @@
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/SelectedSectionItem.d.ts
+declare const SelectedSectionItem: React$1.FC<WithChildrenProp>;
+//#endregion
+export { SelectedSectionItem };
+//# sourceMappingURL=SelectedSectionItem.d.cts.map

package/dist/LayoutMenu/SelectedSectionItem.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.d.cts","names":[],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"mappings":";;;;cAGa,mBAAA,EAAqB,OAAA,CAAM,EAAE,CAAC,gBAAA"}

package/dist/LayoutMenu/SelectedSectionItem.d.ts

@@ -1,3 +1,8 @@
-import { WithChildrenProp } from '@codecademy/gamut';
-import * as React from 'react';
-export declare const SelectedSectionItem: React.FC<WithChildrenProp>;
+import { WithChildrenProp } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/SelectedSectionItem.d.ts
+declare const SelectedSectionItem: React$1.FC<WithChildrenProp>;
+//#endregion
+export { SelectedSectionItem };
+//# sourceMappingURL=SelectedSectionItem.d.ts.map

package/dist/LayoutMenu/SelectedSectionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.d.ts","names":[],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"mappings":";;;;cAGa,mBAAA,EAAqB,OAAA,CAAM,EAAA,CAAG,gBAAA"}

package/dist/LayoutMenu/SelectedSectionItem.js

@@ -1,17 +1,16 @@
-import { Box, Text } from '@codecademy/gamut';
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const SelectedSectionItem = ({
-  children
-}) => {
-  return /*#__PURE__*/_jsx(Box, {
-    borderLeft: 1,
-    borderWidthLeft: "6px",
-    pl: 12,
-    "aria-current": "true",
-    children: /*#__PURE__*/_jsx(Text, {
-      fontWeight: "title",
-      children: children
-    })
-  });
-};
+import { Box, Text } from "@codecademy/gamut";
+import * as React$1 from "react";
+
+//#region src/LayoutMenu/SelectedSectionItem.tsx
+const SelectedSectionItem = ({ children }) => {
+	return /*#__PURE__*/ React$1.createElement(Box, {
+		borderLeft: 1,
+		borderWidthLeft: "6px",
+		pl: 12,
+		"aria-current": "true"
+	}, /*#__PURE__*/ React$1.createElement(Text, { fontWeight: "title" }, children));
+};
+
+//#endregion
+export { SelectedSectionItem };
+//# sourceMappingURL=SelectedSectionItem.js.map

package/dist/LayoutMenu/SelectedSectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedSectionItem.js","names":["Box","Text","React","SelectedSectionItem","children","borderLeft","borderWidthLeft","pl","aria-current","fontWeight"],"sources":["../../src/LayoutMenu/SelectedSectionItem.tsx"],"sourcesContent":["import { Box, Text, WithChildrenProp } from '@codecademy/gamut';\nimport * as React from 'react';\n\nexport const SelectedSectionItem: React.FC<WithChildrenProp> = ({\n  children,\n}) => {\n  return (\n    <Box borderLeft={1} borderWidthLeft=\"6px\" pl={12} aria-current=\"true\">\n      <Text fontWeight=\"title\">{children}</Text>\n    </Box>\n  );\n};\n"],"mappings":";;;;AAGA,MAAaG,uBAAmD,EAC9DC,eACD;CACC,OACE,sBAAA,cAACJ,KAAAA;EAAIK,YAAY;EAAGC,iBAAgB;EAAMC,IAAI;EAAIC,gBAAa;IAC7D,sBAAA,cAACP,MAAAA,EAAKQ,YAAW,WAASL,QAAAA,CAAAA;AAGhC"}

package/dist/LayoutMenu/index.cjs

@@ -0,0 +1,3 @@
+const require_SectionItemLink = require('./SectionItemLink.cjs');
+const require_SelectedSectionItem = require('./SelectedSectionItem.cjs');
+const require_LayoutMenu = require('./LayoutMenu.cjs');

package/dist/LayoutMenu/index.d.cts

@@ -0,0 +1,3 @@
+import { LayoutMenu, LayoutMenuProps } from "./LayoutMenu.cjs";
+import { SectionItemLink, SectionItemLinkProps } from "./SectionItemLink.cjs";
+import { SelectedSectionItem } from "./SelectedSectionItem.cjs";

package/dist/LayoutMenu/index.d.ts

@@ -1,3 +1,3 @@
-export * from './LayoutMenu';
-export * from './SectionItemLink';
-export * from './SelectedSectionItem';
+import { LayoutMenu, LayoutMenuProps } from "./LayoutMenu.js";
+import { SectionItemLink, SectionItemLinkProps } from "./SectionItemLink.js";
+import { SelectedSectionItem } from "./SelectedSectionItem.js";

package/dist/LayoutMenu/index.js

@@ -1,3 +1,3 @@
-export * from './LayoutMenu';
-export * from './SectionItemLink';
-export * from './SelectedSectionItem';
+import { SectionItemLink } from "./SectionItemLink.js";
+import { SelectedSectionItem } from "./SelectedSectionItem.js";
+import { LayoutMenu } from "./LayoutMenu.js";