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

package/dist/LayoutMenu/LayoutMenu.d.ts

@@ -0,0 +1,44 @@
+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';
+    }>;
+}
+export declare const LayoutMenu: React.FC<LayoutMenuProps>;

package/dist/LayoutMenu/LayoutMenu.js

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,39 @@
+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

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

package/dist/LayoutMenu/SectionItemLink.js

@@ -0,0 +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
+  });
+};

package/dist/LayoutMenu/SelectedSectionItem.d.ts

@@ -0,0 +1,3 @@
+import { WithChildrenProp } from '@codecademy/gamut';
+import * as React from 'react';
+export declare const SelectedSectionItem: React.FC<WithChildrenProp>;

package/dist/LayoutMenu/SelectedSectionItem.js

@@ -0,0 +1,17 @@
+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
+    })
+  });
+};

package/dist/LayoutMenu/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LayoutMenu';
+export * from './SectionItemLink';
+export * from './SelectedSectionItem';

package/dist/LayoutMenu/index.js

@@ -0,0 +1,3 @@
+export * from './LayoutMenu';
+export * from './SectionItemLink';
+export * from './SelectedSectionItem';

package/dist/LayoutMenuVariant/AccordionMenu.d.ts

@@ -0,0 +1,21 @@
+import { Anchor } from '@codecademy/gamut';
+import React from 'react';
+export type SectionItem = {
+    title: string;
+    slug: string;
+    href: string;
+    onClick: (event: React.MouseEvent) => void;
+    badge?: JSX.Element;
+    variant?: React.ComponentProps<typeof Anchor>['variant'];
+};
+export type Section = {
+    title: string;
+    slug: string;
+    items: SectionItem[];
+};
+export type AccordionMenuProps = {
+    section: Section;
+    onSectionToggle: (sectionSlug: string) => void;
+    onItemClick: () => void;
+};
+export declare const AccordionMenu: React.FC<AccordionMenuProps>;

package/dist/LayoutMenuVariant/AccordionMenu.js

@@ -0,0 +1,87 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { AccordionAreaDeprecated, Anchor, Box, Text } from '@codecademy/gamut';
+import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
+import { css, states, transitionConcat } from '@codecademy/gamut-styles';
+import React, { useState } from 'react';
+import { LayoutMenuSection } from './LayoutMenuSection';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAccordionArea = /*#__PURE__*/_styled(AccordionAreaDeprecated, {
+  target: "e12elcd22",
+  label: "StyledAccordionArea"
+})("padding-block:", ({
+  theme
+}) => theme.spacing[16], ";position:relative;left:-4px;&:not(:first-child){border-top:1px solid ", ({
+  theme
+}) => theme.colors['navy-300'], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMkQiLCJmaWxlIjoiLi4vLi4vc3JjL0xheW91dE1lbnVWYXJpYW50L0FjY29yZGlvbk1lbnUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQsIEFuY2hvciwgQm94LCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaUNoZXZyb25Eb3duSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgc3RhdGVzLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IExheW91dE1lbnVTZWN0aW9uIH0gZnJvbSAnLi9MYXlvdXRNZW51U2VjdGlvbic7XG5cbmNvbnN0IFN0eWxlZEFjY29yZGlvbkFyZWEgPSBzdHlsZWQoQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQpYFxuICBwYWRkaW5nLWJsb2NrOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNpbmdbMTZdfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBsZWZ0OiAtNHB4O1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0zMDAnXX07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEFuY2hvciA9IHN0eWxlZChBbmNob3IpYFxuICA6aG92ZXIge1xuICAgIGNvbG9yOiBpbmhlcml0O1xuICB9XG5gO1xuXG5jb25zdCBjaGV2cm9uU3RhdGVzID0gc3RhdGVzKHtcbiAgZXhwYW5kZWQ6IHsgdHJhbnNmb3JtOiAncm90YXRlKDE4MGRlZyknIH0sXG59KTtcblxuY29uc3QgRXhwYW5kQ2hldnJvbiA9IHN0eWxlZChNaW5pQ2hldnJvbkRvd25JY29uKTxcbiAgU3R5bGVQcm9wczx0eXBlb2YgY2hldnJvblN0YXRlcz5cbj4oXG4gIGNzcyh7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFsndHJhbnNmb3JtJ10sICdzbG93JywgJ2Vhc2Utb3V0JyksXG4gIH0pLFxuICBjaGV2cm9uU3RhdGVzXG4pO1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uSXRlbSA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBocmVmOiBzdHJpbmc7XG4gIG9uQ2xpY2s6IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gdm9pZDtcbiAgYmFkZ2U/OiBKU1guRWxlbWVudDtcbiAgdmFyaWFudD86IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBBbmNob3I+Wyd2YXJpYW50J107XG59O1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBzbHVnOiBzdHJpbmc7XG4gIGl0ZW1zOiBTZWN0aW9uSXRlbVtdO1xufTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uTWVudVByb3BzID0ge1xuICBzZWN0aW9uOiBTZWN0aW9uO1xuICBvblNlY3Rpb25Ub2dnbGU6IChzZWN0aW9uU2x1Zzogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkl0ZW1DbGljazogKCkgPT4gdm9pZDtcbn07XG5cbmV4cG9ydCBjb25zdCBBY2NvcmRpb25NZW51OiBSZWFjdC5GQzxBY2NvcmRpb25NZW51UHJvcHM+ID0gKHtcbiAgc2VjdGlvbixcbiAgb25TZWN0aW9uVG9nZ2xlLFxuICBvbkl0ZW1DbGljayxcbn0pID0+IHtcbiAgY29uc3QgW2V4cGFuZGVkLCBzZXRFeHBhbmRlZF0gPSB1c2VTdGF0ZSh0cnVlKTtcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBY2NvcmRpb25BcmVhXG4gICAgICBleHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICB0b3A9e1xuICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgdmFyaWFudD1cImludGVyZmFjZVwiXG4gICAgICAgICAgcGI9ezEyfVxuICAgICAgICAgIHB4PXs0fVxuICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgIG9uU2VjdGlvblRvZ2dsZShzZWN0aW9uLnNsdWcpO1xuICAgICAgICAgICAgc2V0RXhwYW5kZWQoKHByZXYpID0+ICFwcmV2KTtcbiAgICAgICAgICB9fVxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgIGRpc3BsYXk9XCJmbGV4XCJcbiAgICAgICAgICB3aWR0aD1cIjEwMCVcIlxuICAgICAgICA+XG4gICAgICAgICAgPEJveCBkaXNwbGF5PVwiZmxleFwiIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiIHdpZHRoPVwiMTAwJVwiPlxuICAgICAgICAgICAgPFRleHRcbiAgICAgICAgICAgICAgdmFyaWFudD1cInAtc21hbGxcIlxuICAgICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZ2FtdXQvbm8taW5saW5lLXN0eWxlXG4gICAgICAgICAgICAgIHN0eWxlPXt7IGZsZXg6IDEsIGZvbnRXZWlnaHQ6ICdib2xkJyB9fVxuICAgICAgICAgICAgICB0ZXh0QWxpZ249XCJsZWZ0XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3NlY3Rpb24udGl0bGV9XG4gICAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgICA8RXhwYW5kQ2hldnJvblxuICAgICAgICAgICAgICBtbD17MTJ9XG4gICAgICAgICAgICAgIHNpemU9ezE2fVxuICAgICAgICAgICAgICBleHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgICAgICAgICB0b3A9ezR9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICA8L1N0eWxlZEFuY2hvcj5cbiAgICAgIH1cbiAgICA+XG4gICAgICA8TGF5b3V0TWVudVNlY3Rpb24gaXRlbXM9e3NlY3Rpb24uaXRlbXN9IG9uSXRlbUNsaWNrPXtvbkl0ZW1DbGlja30gLz5cbiAgICA8L1N0eWxlZEFjY29yZGlvbkFyZWE+XG4gICk7XG59O1xuIl19 */"));
+const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
+  target: "e12elcd21",
+  label: "StyledAnchor"
+})(process.env.NODE_ENV === "production" ? {
+  name: "8a4698",
+  styles: ":hover{color:inherit;}"
+} : {
+  name: "8a4698",
+  styles: ":hover{color:inherit;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQm1DIiwiZmlsZSI6Ii4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkLCBBbmNob3IsIEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IE1pbmlDaGV2cm9uRG93bkljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MsIHN0YXRlcywgdHJhbnNpdGlvbkNvbmNhdCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMYXlvdXRNZW51U2VjdGlvbiB9IGZyb20gJy4vTGF5b3V0TWVudVNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRBY2NvcmRpb25BcmVhID0gc3R5bGVkKEFjY29yZGlvbkFyZWFEZXByZWNhdGVkKWBcbiAgcGFkZGluZy1ibG9jazogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjaW5nWzE2XX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTRweDtcblxuICAmOm5vdCg6Zmlyc3QtY2hpbGQpIHtcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMzAwJ119O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKWBcbiAgOmhvdmVyIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgfVxuYDtcblxuY29uc3QgY2hldnJvblN0YXRlcyA9IHN0YXRlcyh7XG4gIGV4cGFuZGVkOiB7IHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyB9LFxufSk7XG5cbmNvbnN0IEV4cGFuZENoZXZyb24gPSBzdHlsZWQoTWluaUNoZXZyb25Eb3duSWNvbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIGNoZXZyb25TdGF0ZXM+XG4+KFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChbJ3RyYW5zZm9ybSddLCAnc2xvdycsICdlYXNlLW91dCcpLFxuICB9KSxcbiAgY2hldnJvblN0YXRlc1xuKTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbkl0ZW0gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xuICBvbkNsaWNrOiAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIGJhZGdlPzogSlNYLkVsZW1lbnQ7XG4gIHZhcmlhbnQ/OiBSZWFjdC5Db21wb25lbnRQcm9wczx0eXBlb2YgQW5jaG9yPlsndmFyaWFudCddO1xufTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbiA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBpdGVtczogU2VjdGlvbkl0ZW1bXTtcbn07XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbk1lbnVQcm9wcyA9IHtcbiAgc2VjdGlvbjogU2VjdGlvbjtcbiAgb25TZWN0aW9uVG9nZ2xlOiAoc2VjdGlvblNsdWc6IHN0cmluZykgPT4gdm9pZDtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uTWVudTogUmVhY3QuRkM8QWNjb3JkaW9uTWVudVByb3BzPiA9ICh7XG4gIHNlY3Rpb24sXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgb25JdGVtQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUodHJ1ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYVxuICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgdG9wPXtcbiAgICAgICAgPFN0eWxlZEFuY2hvclxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIHBiPXsxMn1cbiAgICAgICAgICBweD17NH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKTtcbiAgICAgICAgICAgIHNldEV4cGFuZGVkKChwcmV2KSA9PiAhcHJldik7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxCb3ggZGlzcGxheT1cImZsZXhcIiBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZVxuICAgICAgICAgICAgICBzdHlsZT17eyBmbGV4OiAxLCBmb250V2VpZ2h0OiAnYm9sZCcgfX1cbiAgICAgICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPEV4cGFuZENoZXZyb25cbiAgICAgICAgICAgICAgbWw9ezEyfVxuICAgICAgICAgICAgICBzaXplPXsxNn1cbiAgICAgICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICAgICAgdG9wPXs0fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRBbmNob3I+XG4gICAgICB9XG4gICAgPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfSBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9IC8+XG4gICAgPC9TdHlsZWRBY2NvcmRpb25BcmVhPlxuICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const chevronStates = states({
+  expanded: {
+    transform: 'rotate(180deg)'
+  }
+});
+const ExpandChevron = /*#__PURE__*/_styled(MiniChevronDownIcon, {
+  target: "e12elcd20",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnNCIiwiZmlsZSI6Ii4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkLCBBbmNob3IsIEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IE1pbmlDaGV2cm9uRG93bkljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBjc3MsIHN0YXRlcywgdHJhbnNpdGlvbkNvbmNhdCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgeyBTdHlsZVByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMYXlvdXRNZW51U2VjdGlvbiB9IGZyb20gJy4vTGF5b3V0TWVudVNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRBY2NvcmRpb25BcmVhID0gc3R5bGVkKEFjY29yZGlvbkFyZWFEZXByZWNhdGVkKWBcbiAgcGFkZGluZy1ibG9jazogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjaW5nWzE2XX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTRweDtcblxuICAmOm5vdCg6Zmlyc3QtY2hpbGQpIHtcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ25hdnktMzAwJ119O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRBbmNob3IgPSBzdHlsZWQoQW5jaG9yKWBcbiAgOmhvdmVyIHtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgfVxuYDtcblxuY29uc3QgY2hldnJvblN0YXRlcyA9IHN0YXRlcyh7XG4gIGV4cGFuZGVkOiB7IHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyB9LFxufSk7XG5cbmNvbnN0IEV4cGFuZENoZXZyb24gPSBzdHlsZWQoTWluaUNoZXZyb25Eb3duSWNvbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIGNoZXZyb25TdGF0ZXM+XG4+KFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChbJ3RyYW5zZm9ybSddLCAnc2xvdycsICdlYXNlLW91dCcpLFxuICB9KSxcbiAgY2hldnJvblN0YXRlc1xuKTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbkl0ZW0gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xuICBvbkNsaWNrOiAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIGJhZGdlPzogSlNYLkVsZW1lbnQ7XG4gIHZhcmlhbnQ/OiBSZWFjdC5Db21wb25lbnRQcm9wczx0eXBlb2YgQW5jaG9yPlsndmFyaWFudCddO1xufTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbiA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBpdGVtczogU2VjdGlvbkl0ZW1bXTtcbn07XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbk1lbnVQcm9wcyA9IHtcbiAgc2VjdGlvbjogU2VjdGlvbjtcbiAgb25TZWN0aW9uVG9nZ2xlOiAoc2VjdGlvblNsdWc6IHN0cmluZykgPT4gdm9pZDtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uTWVudTogUmVhY3QuRkM8QWNjb3JkaW9uTWVudVByb3BzPiA9ICh7XG4gIHNlY3Rpb24sXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgb25JdGVtQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUodHJ1ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYVxuICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgdG9wPXtcbiAgICAgICAgPFN0eWxlZEFuY2hvclxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIHBiPXsxMn1cbiAgICAgICAgICBweD17NH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKTtcbiAgICAgICAgICAgIHNldEV4cGFuZGVkKChwcmV2KSA9PiAhcHJldik7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxCb3ggZGlzcGxheT1cImZsZXhcIiBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZVxuICAgICAgICAgICAgICBzdHlsZT17eyBmbGV4OiAxLCBmb250V2VpZ2h0OiAnYm9sZCcgfX1cbiAgICAgICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPEV4cGFuZENoZXZyb25cbiAgICAgICAgICAgICAgbWw9ezEyfVxuICAgICAgICAgICAgICBzaXplPXsxNn1cbiAgICAgICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICAgICAgdG9wPXs0fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRBbmNob3I+XG4gICAgICB9XG4gICAgPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfSBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9IC8+XG4gICAgPC9TdHlsZWRBY2NvcmRpb25BcmVhPlxuICApO1xufTtcbiJdfQ== */");
+export const AccordionMenu = ({
+  section,
+  onSectionToggle,
+  onItemClick
+}) => {
+  const [expanded, setExpanded] = useState(true);
+  return /*#__PURE__*/_jsx(StyledAccordionArea, {
+    expanded: expanded,
+    top: /*#__PURE__*/_jsx(StyledAnchor, {
+      variant: "interface",
+      pb: 12,
+      px: 4,
+      onClick: () => {
+        onSectionToggle(section.slug);
+        setExpanded(prev => !prev);
+      },
+      "aria-expanded": expanded,
+      display: "flex",
+      width: "100%",
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "p-small"
+          // eslint-disable-next-line gamut/no-inline-style
+          ,
+          style: {
+            flex: 1,
+            fontWeight: 'bold'
+          },
+          textAlign: "left",
+          children: section.title
+        }), /*#__PURE__*/_jsx(ExpandChevron, {
+          ml: 12,
+          size: 16,
+          expanded: expanded,
+          position: "relative",
+          top: 4
+        })]
+      })
+    }),
+    children: /*#__PURE__*/_jsx(LayoutMenuSection, {
+      items: section.items,
+      onItemClick: onItemClick
+    })
+  });
+};

package/dist/LayoutMenuVariant/LayoutMenu.d.ts

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

package/dist/LayoutMenuVariant/LayoutMenu.js

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

package/dist/LayoutMenuVariant/LayoutMenuSection.d.ts

@@ -0,0 +1,10 @@
+import { system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
+import React from 'react';
+import { SectionItem } from './AccordionMenu';
+export type LayoutMenuSectionStyles = StyleProps<typeof system.space>;
+export type LayoutMenuSectionProps = LayoutMenuSectionStyles & {
+    items: SectionItem[];
+    onItemClick: () => void;
+};
+export declare const LayoutMenuSection: React.FC<LayoutMenuSectionProps>;

package/dist/LayoutMenuVariant/LayoutMenuSection.js

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

package/dist/LayoutMenuVariant/SectionItemLink.d.ts

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

package/dist/LayoutMenuVariant/SectionItemLink.js

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

package/dist/LayoutMenuVariant/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LayoutMenu';
+export * from './SectionItemLink';