@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/LayoutMenu/AccordionMenu.js

@@ -1,60 +1,71 @@
-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;
+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;
 };
-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 };
+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
+    })
+  });
+};

package/dist/LayoutMenu/LayoutMenu.d.ts

@@ -1,48 +1,44 @@
-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';
-  }>;
+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';
+    }>;
 }
-declare const LayoutMenu: React$1.FC<LayoutMenuProps>;
-//#endregion
-export { LayoutMenu, LayoutMenuProps };
+export declare const LayoutMenu: React.FC<LayoutMenuProps>;

package/dist/LayoutMenu/LayoutMenu.js

@@ -1,105 +1,119 @@
-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 };
+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]
+    })]
+  });
+};

package/dist/LayoutMenu/LayoutMenuSection.d.ts

@@ -0,0 +1,16 @@
+import { system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
+import { Scale } from '@codecademy/variance/dist/types/config';
+import * as React from 'react';
+import { SectionItem } from './AccordionMenu';
+export type LayoutMenuSectionStyles = StyleProps<typeof system.space>;
+export type LayoutMenuSectionProps = LayoutMenuSectionStyles & {
+    items: SectionItem[];
+    selectedItem?: string;
+    onItemClick: () => void;
+    verticalSpacing?: Scale<{
+        readonly property: 'padding';
+        readonly scale: 'spacing';
+    }>;
+};
+export declare const LayoutMenuSection: React.FC<LayoutMenuSectionProps>;

package/dist/LayoutMenu/LayoutMenuSection.js

@@ -1,36 +1,39 @@
-import { SectionItemLink } from "./SectionItemLink.js";
-import { SelectedSectionItem } from "./SelectedSectionItem.js";
-import { Box, FlexBox } from "@codecademy/gamut";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/LayoutMenu/LayoutMenuSection.tsx
-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))
-});
-
-//#endregion
-export { LayoutMenuSection };
+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))
+});

package/dist/LayoutMenu/SectionItemLink.d.ts

@@ -1,11 +1,7 @@
-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;
+import { WithChildrenProp } from '@codecademy/gamut';
+import * as React from 'react';
+export interface SectionItemLinkProps extends WithChildrenProp {
+    onClick: (event: React.MouseEvent) => void;
+    href: string;
 }
-declare const SectionItemLink: React$1.FC<SectionItemLinkProps>;
-//#endregion
-export { SectionItemLink, SectionItemLinkProps };
+export declare const SectionItemLink: React.FC<SectionItemLinkProps>;

package/dist/LayoutMenu/SectionItemLink.js

@@ -1,17 +1,16 @@
-import { Anchor } from "@codecademy/gamut";
-import "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/LayoutMenu/SectionItemLink.tsx
-const SectionItemLink = ({ onClick, href, children }) => {
-	return /* @__PURE__ */ jsx(Anchor, {
-		variant: "interface",
-		display: "block",
-		href,
-		onClick,
-		children
-	});
-};
-
-//#endregion
-export { SectionItemLink };
+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
+  });
+};