@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/LayoutMenuVariant/LayoutMenu.js

@@ -1,93 +1,70 @@
-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"
+import { LogoCodecademy } from "../Logos/LogoCodecademy/index.js";
+import "../Logos/index.js";
+import { LayoutMenuSection } from "./LayoutMenuSection.js";
+import { AccordionMenu } from "./AccordionMenu.js";
+import { Box, Flyout, StrokeButton } from "@codecademy/gamut";
+import { variant } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+
+//#region src/LayoutMenuVariant/LayoutMenu.tsx
+const StyleBox = /* @__PURE__ */ styled(Box, {
+	target: "ew2umbw0",
+	label: "brand-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]
-    })]
-  });
-};
+	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" }
+	}
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnVWYXJpYW50L0xheW91dE1lbnUudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTGF5b3V0TWVudVZhcmlhbnQvTGF5b3V0TWVudS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbHlvdXQsIFN0cm9rZUJ1dHRvbiwgV2l0aENoaWxkcmVuUHJvcCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgdmFyaWFudCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50VHlwZSwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IExvZ29Db2RlY2FkZW15IH0gZnJvbSAnLi4vTG9nb3MnO1xuaW1wb3J0IHsgQWNjb3JkaW9uTWVudSwgU2VjdGlvbiwgU2VjdGlvbkl0ZW0gfSBmcm9tICcuL0FjY29yZGlvbk1lbnUnO1xuaW1wb3J0IHsgTGF5b3V0TWVudVNlY3Rpb24gfSBmcm9tICcuL0xheW91dE1lbnVTZWN0aW9uJztcblxuZXhwb3J0IGludGVyZmFjZSBMYXlvdXRNZW51UHJvcHMgZXh0ZW5kcyBXaXRoQ2hpbGRyZW5Qcm9wIHtcbiAgLyoqXG4gICAqIEFjY2Vzc2liaWxpdHkgbGFiZWwgZm9yIHRoZSBtb2JpbGUgRmx5b3V0J3MgY2xvc2UgYnV0dG9uLlxuICAgKi9cbiAgY2xvc2VMYWJlbDogc3RyaW5nO1xuICAvKipcbiAgICogQW4gYXJyYXkgb2Ygc2VjdGlvbnMgY29udGFpbmluZyB0aGUgdGl0bGUsIHNsdWcsIGFuZCBpdGVtcywgZWFjaCBvZiB3aGljaCB3aWxsIGJlY29tZSBhbiBhY2NvcmRpb24uIEVhY2ggaXRlbSBjb250YWlucyBhIHRpdGxlLCBzbHVnLCBhbmQgb25DbGljay5cbiAgICovXG4gIHNlY3Rpb25zOiBTZWN0aW9uW107XG4gIC8qKlxuICAgKiBDYWxsYmFjayB0byBiZSBydW4gb24gY2xpY2sgb2YgdGhlIGFjY29yZGlvbiBidXR0b25cbiAgICovXG4gIG9uU2VjdGlvblRvZ2dsZTogKHNlY3Rpb25TbHVnOiBzdHJpbmcpID0+IHZvaWQ7XG4gIC8qKlxuICAgKiBUZXh0IHNob3duIGluIG1vYmlsZSBidXR0b24gdGhhdCBvcGVucyBmbHlvdXQgb24gY2xpY2tcbiAgICovXG4gIG1vYmlsZUJ1dHRvblRleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqIEljb24gc2hvd24gaW4gbW9iaWxlIGJ1dHRvbiB0aGF0IG9wZW5zIGZseW91dCBvbiBjbGlja1xuICAgKi9cbiAgbW9iaWxlQnV0dG9uSWNvbj86IENvbXBvbmVudFR5cGU8R2FtdXRJY29uUHJvcHM+O1xuICAvKipcbiAgICogQnJlYWtwb2ludCBhYm92ZSB3aGljaCB0aGUgbWVudSBidXR0b24gZGlzcGxheXMgYXMgYSBmdWxsIHNpZGViYXJcbiAgICovXG4gIGJyZWFrcG9pbnQ/OiAneHMnIHwgJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJztcbiAgLyoqXG4gICAqIEFuIGFycmF5IG9mIHNlY3Rpb24gaXRlbXMsIGVhY2ggb2Ygd2hpY2ggYmVjb21lIGFuIGFkZGl0aW9uYWwgbGluayBvbiB0b3Agb2YgdGhlIGFjY29yZGlvbiBzZWN0aW9uLlxuICAgKi9cbiAgdG9wTGlua1NlY3Rpb25zPzogU2VjdGlvbkl0ZW1bXTtcbiAgLyoqXG4gICAqIFNldCBmaXhlZCBoZWlnaHQgZm9yIG1lbnUgd2l0aCBvdmVyZmxvd1xuICAgKi9cbiAgbWVudUhlaWdodD86ICdzbScgfCAnbWQnIHwgJ2xnJztcbn1cblxuY29uc3QgU3R5bGVCb3ggPSBzdHlsZWQoQm94KShcbiAgdmFyaWFudCh7XG4gICAgcHJvcDogJ21lbnVIZWlnaHQnLFxuICAgIGJhc2U6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnYmxhY2snLFxuICAgICAgYm9yZGVyU3R5bGVCb3R0b206ICdzb2xpZCcsXG4gICAgICBib3JkZXJXaWR0aEJvdHRvbTogJzFweCcsXG4gICAgICBvdmVyZmxvd1k6ICdhdXRvJyxcbiAgICAgIG92ZXJmbG93WDogJ2hpZGRlbicsXG4gICAgICBwYWRkaW5nVG9wOiAnNHB4JyxcbiAgICAgIHBhZGRpbmdMZWZ0OiAnNHB4JyxcbiAgICB9LFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzbToge1xuICAgICAgICBoZWlnaHQ6ICc2MzBweCcsXG4gICAgICB9LFxuICAgICAgbWQ6IHtcbiAgICAgICAgaGVpZ2h0OiAnMTAwMHB4JyxcbiAgICAgIH0sXG4gICAgICBsZzoge1xuICAgICAgICBoZWlnaHQ6ICcxMzcwcHgnLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IExheW91dE1lbnU6IFJlYWN0LkZDPExheW91dE1lbnVQcm9wcz4gPSAoe1xuICBjbG9zZUxhYmVsLFxuICBzZWN0aW9ucyxcbiAgb25TZWN0aW9uVG9nZ2xlLFxuICBtb2JpbGVCdXR0b25UZXh0LFxuICBtb2JpbGVCdXR0b25JY29uLFxuICBicmVha3BvaW50ID0gJ2xnJyxcbiAgY2hpbGRyZW4sXG4gIHRvcExpbmtTZWN0aW9ucyxcbiAgbWVudUhlaWdodCxcbn0pID0+IHtcbiAgY29uc3QgW2V4cGFuZGVkLCBzZXRFeHBhbmRlZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgYWNjb3JkaW9uTWVudVNlY3Rpb25zID0gc2VjdGlvbnMubWFwKChzZWN0aW9uKSA9PiAoXG4gICAgPEFjY29yZGlvbk1lbnVcbiAgICAgIGtleT17c2VjdGlvbi5zbHVnfVxuICAgICAgc2VjdGlvbj17c2VjdGlvbn1cbiAgICAgIG9uU2VjdGlvblRvZ2dsZT17b25TZWN0aW9uVG9nZ2xlfVxuICAgICAgb25JdGVtQ2xpY2s9eygpID0+IHNldEV4cGFuZGVkKGZhbHNlKX1cbiAgICAvPlxuICApKTtcblxuICBjb25zdCB0b3BMaW5rTGF5b3V0TWVudVNlY3Rpb25zID0gdG9wTGlua1NlY3Rpb25zICYmIChcbiAgICA8TGF5b3V0TWVudVNlY3Rpb25cbiAgICAgIGl0ZW1zPXt0b3BMaW5rU2VjdGlvbnN9XG4gICAgICBvbkl0ZW1DbGljaz17KCkgPT4gc2V0RXhwYW5kZWQoZmFsc2UpfVxuICAgICAgcGI9ezMyfVxuICAgIC8+XG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8bmF2IGFyaWEtbGFiZWw9XCJTZWNvbmRhcnlcIj5cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiAnYmxvY2snLCBbYnJlYWtwb2ludF06ICdub25lJyB9fT5cbiAgICAgICAgPEZseW91dFxuICAgICAgICAgIGNsb3NlTGFiZWw9e2Nsb3NlTGFiZWx9XG4gICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgIG9uQ2xvc2U9eygpID0+IHNldEV4cGFuZGVkKGZhbHNlKX1cbiAgICAgICAgICB0aXRsZT17PExvZ29Db2RlY2FkZW15IG1iPXszMn0gLz59XG4gICAgICAgID5cbiAgICAgICAgICA8Qm94IHB4PXsyNH0+XG4gICAgICAgICAgICB7dG9wTGlua0xheW91dE1lbnVTZWN0aW9uc31cbiAgICAgICAgICAgIHthY2NvcmRpb25NZW51U2VjdGlvbnN9XG4gICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgIDwvRmx5b3V0PlxuICAgICAgICA8U3Ryb2tlQnV0dG9uXG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgd2lkdGg9ezF9XG4gICAgICAgICAgaWNvbj17bW9iaWxlQnV0dG9uSWNvbn1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBzZXRFeHBhbmRlZCh0cnVlKX1cbiAgICAgICAgPlxuICAgICAgICAgIHttb2JpbGVCdXR0b25UZXh0fVxuICAgICAgICA8L1N0cm9rZUJ1dHRvbj5cbiAgICAgIDwvQm94PlxuICAgICAgPFN0eWxlQm94XG4gICAgICAgIG1lbnVIZWlnaHQ9e21lbnVIZWlnaHR9XG4gICAgICAgIGRpc3BsYXk9e3sgXzogJ25vbmUnLCBbYnJlYWtwb2ludF06ICdibG9jaycgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJkZXNrdG9wLW1lbnVcIlxuICAgICAgPlxuICAgICAgICB7dG9wTGlua0xheW91dE1lbnVTZWN0aW9uc31cbiAgICAgICAge2FjY29yZGlvbk1lbnVTZWN0aW9uc31cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZUJveD5cbiAgICA8L25hdj5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNpQiJ9 */");
+const LayoutMenu = ({ closeLabel, sections, onSectionToggle, mobileButtonText, mobileButtonIcon, breakpoint = "lg", children, topLinkSections, menuHeight }) => {
+	const [expanded, setExpanded] = useState(false);
+	const accordionMenuSections = sections.map((section) => /* @__PURE__ */ React.createElement(AccordionMenu, {
+		key: section.slug,
+		section,
+		onSectionToggle,
+		onItemClick: () => setExpanded(false)
+	}));
+	const topLinkLayoutMenuSections = topLinkSections && /* @__PURE__ */ React.createElement(LayoutMenuSection, {
+		items: topLinkSections,
+		onItemClick: () => setExpanded(false),
+		pb: 32
+	});
+	return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Secondary" }, /* @__PURE__ */ React.createElement(Box, { display: {
+		_: "block",
+		[breakpoint]: "none"
+	} }, /* @__PURE__ */ React.createElement(Flyout, {
+		closeLabel,
+		expanded,
+		onClose: () => setExpanded(false),
+		title: /* @__PURE__ */ React.createElement(LogoCodecademy, { mb: 32 })
+	}, /* @__PURE__ */ React.createElement(Box, { px: 24 }, topLinkLayoutMenuSections, accordionMenuSections, children)), /* @__PURE__ */ React.createElement(StrokeButton, {
+		"aria-expanded": expanded,
+		variant: "secondary",
+		width: 1,
+		icon: mobileButtonIcon,
+		onClick: () => setExpanded(true)
+	}, mobileButtonText)), /* @__PURE__ */ React.createElement(StyleBox, {
+		menuHeight,
+		display: {
+			_: "none",
+			[breakpoint]: "block"
+		},
+		"data-testid": "desktop-menu"
+	}, topLinkLayoutMenuSections, accordionMenuSections, children));
+};
+
+//#endregion
+export { LayoutMenu };
+//# sourceMappingURL=LayoutMenu.js.map

package/dist/LayoutMenuVariant/LayoutMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenu.js","names":["Box","Flyout","StrokeButton","variant","styled","React","useState","LogoCodecademy","AccordionMenu","LayoutMenuSection","StyleBox","prop","base","borderColor","borderStyleBottom","borderWidthBottom","overflowY","overflowX","paddingTop","paddingLeft","variants","sm","height","md","lg","LayoutMenu","closeLabel","sections","onSectionToggle","mobileButtonText","mobileButtonIcon","breakpoint","children","topLinkSections","menuHeight","expanded","setExpanded","accordionMenuSections","map","section","key","slug","onItemClick","topLinkLayoutMenuSections","items","pb","nav","aria-label","display","_","onClose","title","mb","px","aria-expanded","width","icon","onClick","data-testid"],"sources":["../../src/LayoutMenuVariant/LayoutMenu.tsx"],"sourcesContent":["import { Box, Flyout, StrokeButton, WithChildrenProp } from '@codecademy/gamut';\nimport { GamutIconProps } from '@codecademy/gamut-icons';\nimport { variant } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport React, { ComponentType, useState } from 'react';\n\nimport { LogoCodecademy } from '../Logos';\nimport { AccordionMenu, Section, SectionItem } 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   */\n  sections: Section[];\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   * Icon shown in mobile button that opens flyout on click\n   */\n  mobileButtonIcon?: ComponentType<GamutIconProps>;\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}\n\nconst StyleBox = styled(Box)(\n  variant({\n    prop: 'menuHeight',\n    base: {\n      borderColor: 'black',\n      borderStyleBottom: 'solid',\n      borderWidthBottom: '1px',\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      },\n    },\n  })\n);\n\nexport const LayoutMenu: React.FC<LayoutMenuProps> = ({\n  closeLabel,\n  sections,\n  onSectionToggle,\n  mobileButtonText,\n  mobileButtonIcon,\n  breakpoint = 'lg',\n  children,\n  topLinkSections,\n  menuHeight,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const accordionMenuSections = sections.map((section) => (\n    <AccordionMenu\n      key={section.slug}\n      section={section}\n      onSectionToggle={onSectionToggle}\n      onItemClick={() => setExpanded(false)}\n    />\n  ));\n\n  const topLinkLayoutMenuSections = topLinkSections && (\n    <LayoutMenuSection\n      items={topLinkSections}\n      onItemClick={() => setExpanded(false)}\n      pb={32}\n    />\n  );\n\n  return (\n    <nav aria-label=\"Secondary\">\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 px={24}>\n            {topLinkLayoutMenuSections}\n            {accordionMenuSections}\n            {children}\n          </Box>\n        </Flyout>\n        <StrokeButton\n          aria-expanded={expanded}\n          variant=\"secondary\"\n          width={1}\n          icon={mobileButtonIcon}\n          onClick={() => setExpanded(true)}\n        >\n          {mobileButtonText}\n        </StrokeButton>\n      </Box>\n      <StyleBox\n        menuHeight={menuHeight}\n        display={{ _: 'none', [breakpoint]: 'block' }}\n        data-testid=\"desktop-menu\"\n      >\n        {topLinkLayoutMenuSections}\n        {accordionMenuSections}\n        {children}\n      </StyleBox>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;AA6CA,MAAMU,WAAWN,uBAAOJ,KAAAA;;;GACtBG,QAAQ;CACNQ,MAAM;CACNC,MAAM;EACJC,aAAa;EACbC,mBAAmB;EACnBC,mBAAmB;EACnBC,WAAW;EACXC,WAAW;EACXC,YAAY;EACZC,aAAa;EACf;CACAC,UAAU;EACRC,IAAI,EACFC,QAAQ,SACV;EACAC,IAAI,EACFD,QAAQ,UACV;EACAE,IAAI,EACFF,QAAQ,UACV;EACF;CACF,CAAA,EAAA,kzKAAA;AAGF,MAAaG,cAAyC,EACpDC,YACAC,UACAC,iBACAC,kBACAC,kBACAC,aAAa,MACbC,UACAC,iBACAC,iBACD;CACC,MAAM,CAACC,UAAUC,eAAe9B,SAAS,MAAA;CAEzC,MAAM+B,wBAAwBV,SAASW,KAAKC,YAC1C,sBAAA,cAAC/B,eAAAA;EACCgC,KAAKD,QAAQE;EACJF;EACQX;EACjBc,mBAAmBN,YAAY,MAAA;;CAInC,MAAMO,4BAA4BV,mBAChC,sBAAA,cAACxB,mBAAAA;EACCmC,OAAOX;EACPS,mBAAmBN,YAAY,MAAA;EAC/BS,IAAI;;AAIR,QACE,sBAAA,cAACC,OAAAA,EAAIC,cAAW,eACd,sBAAA,cAAC/C,KAAAA,EAAIgD,SAAS;EAAEC,GAAG;GAAUlB,aAAa;EAAO,IAC/C,sBAAA,cAAC9B,QAAAA;EACayB;EACFS;EACVe,eAAed,YAAY,MAAA;EAC3Be,OAAO,sBAAA,cAAC5C,gBAAAA,EAAe6C,IAAI;IAE3B,sBAAA,cAACpD,KAAAA,EAAIqD,IAAI,MACNV,2BACAN,uBACAL,SAAAA,CAAAA,EAGL,sBAAA,cAAC9B,cAAAA;EACCoD,iBAAenB;EACfhC,SAAQ;EACRoD,OAAO;EACPC,MAAM1B;EACN2B,eAAerB,YAAY,KAAA;IAE1BP,iBAAAA,CAAAA,EAGL,sBAAA,cAACnB,UAAAA;EACawB;EACZc,SAAS;GAAEC,GAAG;IAASlB,aAAa;GAAQ;EAC5C2B,eAAY;IAEXf,2BACAN,uBACAL,SAAAA,CAAAA"}

package/dist/LayoutMenuVariant/LayoutMenuSection.cjs

@@ -0,0 +1,33 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_SectionItemLink = require('./SectionItemLink.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/LayoutMenuVariant/LayoutMenuSection.tsx
+const StyledBox = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut.Box, {
+	target: "e1tyyby60",
+	label: "brand-StyledBox"
+})("list-style:none;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnVWYXJpYW50L0xheW91dE1lbnVTZWN0aW9uLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnVWYXJpYW50L0xheW91dE1lbnVTZWN0aW9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFNlY3Rpb25JdGVtIH0gZnJvbSAnLi9BY2NvcmRpb25NZW51JztcbmltcG9ydCB7IFNlY3Rpb25JdGVtTGluayB9IGZyb20gJy4vU2VjdGlvbkl0ZW1MaW5rJztcblxuZXhwb3J0IHR5cGUgTGF5b3V0TWVudVNlY3Rpb25TdHlsZXMgPSBTdHlsZVByb3BzPHR5cGVvZiBzeXN0ZW0uc3BhY2U+O1xuXG5leHBvcnQgdHlwZSBMYXlvdXRNZW51U2VjdGlvblByb3BzID0gTGF5b3V0TWVudVNlY3Rpb25TdHlsZXMgJiB7XG4gIGl0ZW1zOiBTZWN0aW9uSXRlbVtdO1xuICBvbkl0ZW1DbGljazogKCkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChCb3gpYFxuICBsaXN0LXN0eWxlOiBub25lO1xuYDtcbmV4cG9ydCBjb25zdCBMYXlvdXRNZW51U2VjdGlvbjogUmVhY3QuRkM8TGF5b3V0TWVudVNlY3Rpb25Qcm9wcz4gPSAoe1xuICBpdGVtcyxcbiAgb25JdGVtQ2xpY2ssXG4gIC4uLnN0eWxlUHJvcHNcbn0pID0+IChcbiAgPEJveCB7Li4uc3R5bGVQcm9wc30gYXM9XCJtZW51XCIgcHg9ezR9IG09ezB9PlxuICAgIHtpdGVtcy5tYXAoKGl0ZW0pID0+IChcbiAgICAgIDxTdHlsZWRCb3gga2V5PXtpdGVtLnNsdWd9IGFzPVwibGlcIj5cbiAgICAgICAgPFNlY3Rpb25JdGVtTGlua1xuICAgICAgICAgIGhyZWY9e2l0ZW0uaHJlZn1cbiAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICAgIGl0ZW0ub25DbGljayhldmVudCk7XG4gICAgICAgICAgICBvbkl0ZW1DbGljaygpO1xuICAgICAgICAgIH19XG4gICAgICAgICAgdmFyaWFudD17aXRlbS52YXJpYW50ID8/ICdpbnRlcmZhY2UnfVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAge2l0ZW0udGl0bGV9XG4gICAgICAgICAgICB7aXRlbS5iYWRnZX1cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvU2VjdGlvbkl0ZW1MaW5rPlxuICAgICAgPC9TdHlsZWRCb3g+XG4gICAgKSl9XG4gIDwvQm94PlxuKTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmtCIn0= */");
+const LayoutMenuSection = ({ items, onItemClick, ...styleProps }) => /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+	...styleProps,
+	as: "menu",
+	px: 4,
+	m: 0
+}, items.map((item) => /* @__PURE__ */ react.default.createElement(StyledBox, {
+	key: item.slug,
+	as: "li"
+}, /* @__PURE__ */ react.default.createElement(require_SectionItemLink.SectionItemLink, {
+	href: item.href,
+	onClick: (event) => {
+		item.onClick(event);
+		onItemClick();
+	},
+	variant: item.variant ?? "interface"
+}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, item.title, item.badge)))));
+
+//#endregion
+exports.LayoutMenuSection = LayoutMenuSection;
+//# sourceMappingURL=LayoutMenuSection.cjs.map

package/dist/LayoutMenuVariant/LayoutMenuSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.cjs","names":["Box","FlexBox","styled","React","SectionItemLink","StyledBox","LayoutMenuSection","items","onItemClick","styleProps","as","px","m","map","item","key","slug","href","onClick","event","variant","alignItems","title","badge"],"sources":["../../src/LayoutMenuVariant/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  onItemClick: () => void;\n};\n\nconst StyledBox = styled(Box)`\n  list-style: none;\n`;\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  onItemClick,\n  ...styleProps\n}) => (\n  <Box {...styleProps} as=\"menu\" px={4} m={0}>\n    {items.map((item) => (\n      <StyledBox key={item.slug} as=\"li\">\n        <SectionItemLink\n          href={item.href}\n          onClick={(event) => {\n            item.onClick(event);\n            onItemClick();\n          }}\n          variant={item.variant ?? 'interface'}\n        >\n          <FlexBox alignItems=\"center\">\n            {item.title}\n            {item.badge}\n          </FlexBox>\n        </SectionItemLink>\n      </StyledBox>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;;;;AAgBA,MAAMK,YAAYH,6CAAOF,uBAAAA;;;;AAGzB,MAAaM,qBAAuD,EAClEC,OACAC,aACA,GAAGC,iBAEH,8BAAA,cAACT,uBAAAA;CAAK,GAAGS;CAAYC,IAAG;CAAOC,IAAI;CAAGC,GAAG;GACtCL,MAAMM,KAAKC,SACV,8BAAA,cAACT,WAAAA;CAAUU,KAAKD,KAAKE;CAAMN,IAAG;GAC5B,8BAAA,cAACN,yCAAAA;CACCa,MAAMH,KAAKG;CACXC,UAAUC,UAAAA;AACRL,OAAKI,QAAQC,MAAAA;AACbX,eAAAA;;CAEFY,SAASN,KAAKM,WAAW;GAEzB,8BAAA,cAACnB,2BAAAA,EAAQoB,YAAW,YACjBP,KAAKQ,OACLR,KAAKS,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/LayoutMenuVariant/LayoutMenuSection.js

@@ -1,42 +1,30 @@
-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))
-});
+import { SectionItemLink } from "./SectionItemLink.js";
+import { Box, FlexBox } from "@codecademy/gamut";
+import styled from "@emotion/styled";
+import React from "react";
+
+//#region src/LayoutMenuVariant/LayoutMenuSection.tsx
+const StyledBox = /* @__PURE__ */ styled(Box, {
+	target: "e1tyyby60",
+	label: "brand-StyledBox"
+})("list-style:none;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnVWYXJpYW50L0xheW91dE1lbnVTZWN0aW9uLnRzeCIsInNvdXJjZXMiOlsiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL0xheW91dE1lbnVWYXJpYW50L0xheW91dE1lbnVTZWN0aW9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3ggfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IFNlY3Rpb25JdGVtIH0gZnJvbSAnLi9BY2NvcmRpb25NZW51JztcbmltcG9ydCB7IFNlY3Rpb25JdGVtTGluayB9IGZyb20gJy4vU2VjdGlvbkl0ZW1MaW5rJztcblxuZXhwb3J0IHR5cGUgTGF5b3V0TWVudVNlY3Rpb25TdHlsZXMgPSBTdHlsZVByb3BzPHR5cGVvZiBzeXN0ZW0uc3BhY2U+O1xuXG5leHBvcnQgdHlwZSBMYXlvdXRNZW51U2VjdGlvblByb3BzID0gTGF5b3V0TWVudVNlY3Rpb25TdHlsZXMgJiB7XG4gIGl0ZW1zOiBTZWN0aW9uSXRlbVtdO1xuICBvbkl0ZW1DbGljazogKCkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFN0eWxlZEJveCA9IHN0eWxlZChCb3gpYFxuICBsaXN0LXN0eWxlOiBub25lO1xuYDtcbmV4cG9ydCBjb25zdCBMYXlvdXRNZW51U2VjdGlvbjogUmVhY3QuRkM8TGF5b3V0TWVudVNlY3Rpb25Qcm9wcz4gPSAoe1xuICBpdGVtcyxcbiAgb25JdGVtQ2xpY2ssXG4gIC4uLnN0eWxlUHJvcHNcbn0pID0+IChcbiAgPEJveCB7Li4uc3R5bGVQcm9wc30gYXM9XCJtZW51XCIgcHg9ezR9IG09ezB9PlxuICAgIHtpdGVtcy5tYXAoKGl0ZW0pID0+IChcbiAgICAgIDxTdHlsZWRCb3gga2V5PXtpdGVtLnNsdWd9IGFzPVwibGlcIj5cbiAgICAgICAgPFNlY3Rpb25JdGVtTGlua1xuICAgICAgICAgIGhyZWY9e2l0ZW0uaHJlZn1cbiAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICAgIGl0ZW0ub25DbGljayhldmVudCk7XG4gICAgICAgICAgICBvbkl0ZW1DbGljaygpO1xuICAgICAgICAgIH19XG4gICAgICAgICAgdmFyaWFudD17aXRlbS52YXJpYW50ID8/ICdpbnRlcmZhY2UnfVxuICAgICAgICA+XG4gICAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAge2l0ZW0udGl0bGV9XG4gICAgICAgICAgICB7aXRlbS5iYWRnZX1cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvU2VjdGlvbkl0ZW1MaW5rPlxuICAgICAgPC9TdHlsZWRCb3g+XG4gICAgKSl9XG4gIDwvQm94PlxuKTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmtCIn0= */");
+const LayoutMenuSection = ({ items, onItemClick, ...styleProps }) => /* @__PURE__ */ React.createElement(Box, {
+	...styleProps,
+	as: "menu",
+	px: 4,
+	m: 0
+}, items.map((item) => /* @__PURE__ */ React.createElement(StyledBox, {
+	key: item.slug,
+	as: "li"
+}, /* @__PURE__ */ React.createElement(SectionItemLink, {
+	href: item.href,
+	onClick: (event) => {
+		item.onClick(event);
+		onItemClick();
+	},
+	variant: item.variant ?? "interface"
+}, /* @__PURE__ */ React.createElement(FlexBox, { alignItems: "center" }, item.title, item.badge)))));
+
+//#endregion
+export { LayoutMenuSection };
+//# sourceMappingURL=LayoutMenuSection.js.map

package/dist/LayoutMenuVariant/LayoutMenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMenuSection.js","names":["Box","FlexBox","styled","React","SectionItemLink","StyledBox","LayoutMenuSection","items","onItemClick","styleProps","as","px","m","map","item","key","slug","href","onClick","event","variant","alignItems","title","badge"],"sources":["../../src/LayoutMenuVariant/LayoutMenuSection.tsx"],"sourcesContent":["import { Box, FlexBox } from '@codecademy/gamut';\nimport { system } from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport React from 'react';\n\nimport { SectionItem } from './AccordionMenu';\nimport { SectionItemLink } from './SectionItemLink';\n\nexport type LayoutMenuSectionStyles = StyleProps<typeof system.space>;\n\nexport type LayoutMenuSectionProps = LayoutMenuSectionStyles & {\n  items: SectionItem[];\n  onItemClick: () => void;\n};\n\nconst StyledBox = styled(Box)`\n  list-style: none;\n`;\nexport const LayoutMenuSection: React.FC<LayoutMenuSectionProps> = ({\n  items,\n  onItemClick,\n  ...styleProps\n}) => (\n  <Box {...styleProps} as=\"menu\" px={4} m={0}>\n    {items.map((item) => (\n      <StyledBox key={item.slug} as=\"li\">\n        <SectionItemLink\n          href={item.href}\n          onClick={(event) => {\n            item.onClick(event);\n            onItemClick();\n          }}\n          variant={item.variant ?? 'interface'}\n        >\n          <FlexBox alignItems=\"center\">\n            {item.title}\n            {item.badge}\n          </FlexBox>\n        </SectionItemLink>\n      </StyledBox>\n    ))}\n  </Box>\n);\n"],"mappings":";;;;;;AAgBA,MAAMK,YAAYH,uBAAOF,KAAAA;;;;AAGzB,MAAaM,qBAAuD,EAClEC,OACAC,aACA,GAAGC,iBAEH,sBAAA,cAACT,KAAAA;CAAK,GAAGS;CAAYC,IAAG;CAAOC,IAAI;CAAGC,GAAG;GACtCL,MAAMM,KAAKC,SACV,sBAAA,cAACT,WAAAA;CAAUU,KAAKD,KAAKE;CAAMN,IAAG;GAC5B,sBAAA,cAACN,iBAAAA;CACCa,MAAMH,KAAKG;CACXC,UAAUC,UAAAA;AACRL,OAAKI,QAAQC,MAAAA;AACbX,eAAAA;;CAEFY,SAASN,KAAKM,WAAW;GAEzB,sBAAA,cAACnB,SAAAA,EAAQoB,YAAW,YACjBP,KAAKQ,OACLR,KAAKS,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/LayoutMenuVariant/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/LayoutMenuVariant/SectionItemLink.tsx
+const SectionItemLink = ({ onClick, href, variant = "interface", children }) => {
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Anchor, {
+		variant,
+		display: "block",
+		href,
+		onClick
+	}, children);
+};
+
+//#endregion
+exports.SectionItemLink = SectionItemLink;
+//# sourceMappingURL=SectionItemLink.cjs.map

package/dist/LayoutMenuVariant/SectionItemLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.cjs","names":["Anchor","React","SectionItemLink","onClick","href","variant","children","display"],"sources":["../../src/LayoutMenuVariant/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n  variant?: React.ComponentProps<typeof Anchor>['variant'];\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  variant = 'interface',\n  children,\n}) => {\n  return (\n    <Anchor variant={variant} display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;;;AASA,MAAaE,mBAAmD,EAC9DC,SACAC,MACAC,UAAU,aACVC,eACD;AACC,QACE,8BAAA,cAACN,0BAAAA;EAAgBK;EAASE,SAAQ;EAAcH;EAAeD;IAC5DG,SAAAA"}

package/dist/LayoutMenuVariant/SectionItemLink.d.cts

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

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

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

package/dist/LayoutMenuVariant/SectionItemLink.d.ts

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

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

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

package/dist/LayoutMenuVariant/SectionItemLink.js

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

package/dist/LayoutMenuVariant/SectionItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionItemLink.js","names":["Anchor","React","SectionItemLink","onClick","href","variant","children","display"],"sources":["../../src/LayoutMenuVariant/SectionItemLink.tsx"],"sourcesContent":["import { Anchor, WithChildrenProp } from '@codecademy/gamut';\nimport React from 'react';\n\nexport interface SectionItemLinkProps extends WithChildrenProp {\n  onClick: (event: React.MouseEvent) => void;\n  href: string;\n  variant?: React.ComponentProps<typeof Anchor>['variant'];\n}\n\nexport const SectionItemLink: React.FC<SectionItemLinkProps> = ({\n  onClick,\n  href,\n  variant = 'interface',\n  children,\n}) => {\n  return (\n    <Anchor variant={variant} display=\"block\" href={href} onClick={onClick}>\n      {children}\n    </Anchor>\n  );\n};\n"],"mappings":";;;;AASA,MAAaE,mBAAmD,EAC9DC,SACAC,MACAC,UAAU,aACVC,eACD;AACC,QACE,sBAAA,cAACN,QAAAA;EAAgBK;EAASE,SAAQ;EAAcH;EAAeD;IAC5DG,SAAAA"}

package/dist/LayoutMenuVariant/index.cjs

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

package/dist/LayoutMenuVariant/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/LayoutMenuVariant/index.ts"],"sourcesContent":["export * from './LayoutMenu';\nexport * from './SectionItemLink';\n"],"mappings":""}

package/dist/LayoutMenuVariant/index.d.cts

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

package/dist/LayoutMenuVariant/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/LayoutMenuVariant/index.ts"],"mappings":""}

package/dist/LayoutMenuVariant/index.d.ts

@@ -1,2 +1,10 @@
-export * from './LayoutMenu';
-export * from './SectionItemLink';
+import { LayoutMenu, LayoutMenuProps } from "./LayoutMenu.js";
+import { SectionItemLink, SectionItemLinkProps } from "./SectionItemLink.js";
+
+//#region src/LayoutMenuVariant/index.d.ts
+declare namespace index_d_exports {
+  export { LayoutMenu, LayoutMenuProps, SectionItemLink, SectionItemLinkProps };
+}
+//#endregion
+export { index_d_exports };
+//# sourceMappingURL=index.d.ts.map

package/dist/LayoutMenuVariant/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/LayoutMenuVariant/index.ts"],"mappings":""}

package/dist/LayoutMenuVariant/index.js

@@ -1,2 +1,13 @@
-export * from './LayoutMenu';
-export * from './SectionItemLink';
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SectionItemLink } from "./SectionItemLink.js";
+import { LayoutMenu } from "./LayoutMenu.js";
+
+//#region src/LayoutMenuVariant/index.ts
+var LayoutMenuVariant_exports = /* @__PURE__ */ __exportAll({
+	LayoutMenu: () => LayoutMenu,
+	SectionItemLink: () => SectionItemLink
+});
+
+//#endregion
+export { LayoutMenuVariant_exports };
+//# sourceMappingURL=index.js.map

package/dist/LayoutMenuVariant/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/LayoutMenuVariant/index.ts"],"sourcesContent":["export * from './LayoutMenu';\nexport * from './SectionItemLink';\n"],"mappings":""}

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.cjs

@@ -0,0 +1,41 @@
+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/LearningOutcomeAssessmentScores/AssessmentDetail.tsx
+const AssessmentDetail = ({ isHighestScore, score, scoreAchievedAt }) => {
+	const hasPassedAssessment = score && score >= 70;
+	return /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		borderColor: "background-hover",
+		borderRight: isHighestScore ? 1 : "none",
+		width: "100%",
+		p: 16,
+		column: true
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { fontWeight: 700 }, isHighestScore ? "Highest score" : "Most recent"), score != null ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		mt: 8,
+		alignItems: "center"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		variant: "title-sm",
+		"data-testid": "score-percent",
+		mr: 4,
+		color: hasPassedAssessment ? "green-700" : void 0
+	}, `${score}%`), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, null, !hasPassedAssessment && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Box, {
+		"data-testid": "failed-assessment-indicator",
+		borderRadius: "full",
+		dimensions: 16,
+		bg: "orange-500",
+		mb: 4
+	}))), !!scoreAchievedAt && /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, { textColor: "text-secondary" }, scoreAchievedAt)) : /* @__PURE__ */ react.default.createElement(_codecademy_gamut.FlexBox, {
+		column: true,
+		color: "text-secondary"
+	}, /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, {
+		fontWeight: 700,
+		my: 4,
+		"aria-hidden": true
+	}, "-"), /* @__PURE__ */ react.default.createElement(_codecademy_gamut.Text, null, "Not tested yet")));
+};
+
+//#endregion
+exports.AssessmentDetail = AssessmentDetail;
+//# sourceMappingURL=AssessmentDetail.cjs.map

package/dist/LearningOutcomeAssessmentScores/AssessmentDetail.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssessmentDetail.cjs","names":["Box","FlexBox","Text","React","AssessmentDetail","isHighestScore","score","scoreAchievedAt","hasPassedAssessment","borderColor","borderRight","width","p","column","fontWeight","mt","alignItems","variant","data-testid","mr","color","undefined","borderRadius","dimensions","bg","mb","textColor","my","aria-hidden"],"sources":["../../src/LearningOutcomeAssessmentScores/AssessmentDetail.tsx"],"sourcesContent":["import { Box, FlexBox, Text } from '@codecademy/gamut';\nimport React from 'react';\n\ninterface AssessmentDetailProps {\n  isHighestScore?: boolean;\n  score?: number | null;\n  scoreAchievedAt?: string | null;\n}\n\nexport const AssessmentDetail: React.FC<AssessmentDetailProps> = ({\n  isHighestScore,\n  score,\n  scoreAchievedAt,\n}) => {\n  const hasPassedAssessment = score && score >= 70;\n\n  return (\n    <FlexBox\n      borderColor=\"background-hover\"\n      borderRight={isHighestScore ? 1 : 'none'}\n      width=\"100%\"\n      p={16}\n      column\n    >\n      <Text fontWeight={700}>\n        {isHighestScore ? 'Highest score' : 'Most recent'}\n      </Text>\n      {score != null ? (\n        <>\n          <FlexBox mt={8} alignItems=\"center\">\n            <Text\n              variant=\"title-sm\"\n              data-testid=\"score-percent\"\n              mr={4}\n              color={hasPassedAssessment ? 'green-700' : undefined}\n            >\n              {`${score}%`}\n            </Text>\n            <Box>\n              {!hasPassedAssessment && (\n                <Box\n                  data-testid=\"failed-assessment-indicator\"\n                  borderRadius=\"full\"\n                  dimensions={16}\n                  bg=\"orange-500\"\n                  mb={4}\n                />\n              )}\n            </Box>\n          </FlexBox>\n          {!!scoreAchievedAt && (\n            <Text textColor=\"text-secondary\">{scoreAchievedAt}</Text>\n          )}\n        </>\n      ) : (\n        <FlexBox column color=\"text-secondary\">\n          <Text fontWeight={700} my={4} aria-hidden>\n            -\n          </Text>\n          <Text>Not tested yet</Text>\n        </FlexBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;AASA,MAAaI,oBAAqD,EAChEC,gBACAC,OACAC,sBACD;CACC,MAAMC,sBAAsBF,SAASA,SAAS;AAE9C,QACE,8BAAA,cAACL,2BAAAA;EACCQ,aAAY;EACZC,aAAaL,iBAAiB,IAAI;EAClCM,OAAM;EACNC,GAAG;EACHC,QAAAA;IAEA,8BAAA,cAACX,wBAAAA,EAAKY,YAAY,OACfT,iBAAiB,kBAAkB,cAAA,EAErCC,SAAS,OACR,8BAAA,cAAA,cAAA,UAAA,MACE,8BAAA,cAACL,2BAAAA;EAAQc,IAAI;EAAGC,YAAW;IACzB,8BAAA,cAACd,wBAAAA;EACCe,SAAQ;EACRC,eAAY;EACZC,IAAI;EACJC,OAAOZ,sBAAsB,cAAca;IAE1C,GAAGf,MAAM,GAAE,EAEd,8BAAA,cAACN,uBAAAA,MACE,CAACQ,uBACA,8BAAA,cAACR,uBAAAA;EACCkB,eAAY;EACZI,cAAa;EACbC,YAAY;EACZC,IAAG;EACHC,IAAI;OAKX,CAAC,CAAClB,mBACD,8BAAA,cAACL,wBAAAA,EAAKwB,WAAU,oBAAkBnB,gBAAAA,CAAAA,GAItC,8BAAA,cAACN,2BAAAA;EAAQY,QAAAA;EAAOO,OAAM;IACpB,8BAAA,cAAClB,wBAAAA;EAAKY,YAAY;EAAKa,IAAI;EAAGC,eAAAA;IAAY,IAAA,EAG1C,8BAAA,cAAC1B,wBAAAA,MAAK,iBAAA,CAAA,CAAA"}