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

package/dist/LayoutMenu/LayoutMenuSection.cjs

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

package/dist/LayoutMenu/LayoutMenuSection.js

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

package/dist/LayoutMenu/SectionItemLink.cjs

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

package/dist/LayoutMenu/SectionItemLink.d.cts

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

package/dist/LayoutMenu/SectionItemLink.d.ts

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

package/dist/LayoutMenu/SectionItemLink.js

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

package/dist/LayoutMenu/SelectedSectionItem.cjs

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

package/dist/LayoutMenu/SelectedSectionItem.d.cts

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

package/dist/LayoutMenu/SelectedSectionItem.d.ts

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

package/dist/LayoutMenu/SelectedSectionItem.js

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

package/dist/LayoutMenu/index.cjs

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

package/dist/LayoutMenu/index.d.cts

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

package/dist/LayoutMenu/index.d.ts

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

package/dist/LayoutMenu/index.js

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

package/dist/LayoutMenuVariant/AccordionMenu.cjs

@@ -0,0 +1,76 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_LayoutMenuSection = require('./LayoutMenuSection.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/LayoutMenuVariant/AccordionMenu.tsx
+const StyledAccordionArea = (0, _emotion_styled.default)(_codecademy_gamut.AccordionAreaDeprecated)`
+  padding-block: ${({ theme }) => theme.spacing[16]};
+  position: relative;
+  left: -4px;
+
+  &:not(:first-child) {
+    border-top: 1px solid ${({ theme }) => theme.colors["navy-300"]};
+  }
+`;
+const StyledAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)`
+  :hover {
+    color: inherit;
+  }
+`;
+const chevronStates = (0, _codecademy_gamut_styles.states)({ expanded: { transform: "rotate(180deg)" } });
+const ExpandChevron = (0, _emotion_styled.default)(_codecademy_gamut_icons.MiniChevronDownIcon)((0, _codecademy_gamut_styles.css)({
+	transform: "rotate(0deg)",
+	transition: (0, _codecademy_gamut_styles.transitionConcat)(["transform"], "slow", "ease-out")
+}), chevronStates);
+const AccordionMenu = ({ section, onSectionToggle, onItemClick }) => {
+	const [expanded, setExpanded] = (0, react.useState)(true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionArea, {
+		expanded,
+		top: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAnchor, {
+			variant: "interface",
+			pb: 12,
+			px: 4,
+			onClick: () => {
+				onSectionToggle(section.slug);
+				setExpanded((prev) => !prev);
+			},
+			"aria-expanded": expanded,
+			display: "flex",
+			width: "100%",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+				display: "flex",
+				justifyContent: "space-between",
+				width: "100%",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					variant: "p-small",
+					style: {
+						flex: 1,
+						fontWeight: "bold"
+					},
+					textAlign: "left",
+					children: section.title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandChevron, {
+					ml: 12,
+					size: 16,
+					expanded,
+					position: "relative",
+					top: 4
+				})]
+			})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LayoutMenuSection.LayoutMenuSection, {
+			items: section.items,
+			onItemClick
+		})
+	});
+};
+
+//#endregion
+exports.AccordionMenu = AccordionMenu;

package/dist/LayoutMenuVariant/AccordionMenu.d.cts

@@ -0,0 +1,19 @@
+import { Anchor } from "@codecademy/gamut";
+import React from "react";
+
+//#region src/LayoutMenuVariant/AccordionMenu.d.ts
+type SectionItem = {
+  title: string;
+  slug: string;
+  href: string;
+  onClick: (event: React.MouseEvent) => void;
+  badge?: JSX.Element;
+  variant?: React.ComponentProps<typeof Anchor>['variant'];
+};
+type Section = {
+  title: string;
+  slug: string;
+  items: SectionItem[];
+};
+//#endregion
+export { Section, SectionItem };

package/dist/LayoutMenuVariant/AccordionMenu.d.ts

@@ -1,21 +1,19 @@
-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'];
+import { Anchor } from "@codecademy/gamut";
+import React from "react";
+
+//#region src/LayoutMenuVariant/AccordionMenu.d.ts
+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[];
+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>;
+//#endregion
+export { Section, SectionItem };

package/dist/LayoutMenuVariant/AccordionMenu.js

@@ -1,87 +1,73 @@
-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)'
+import { LayoutMenuSection } from "./LayoutMenuSection.js";
+import { AccordionAreaDeprecated, Anchor, Box, Text } from "@codecademy/gamut";
+import { css, states, transitionConcat } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MiniChevronDownIcon } from "@codecademy/gamut-icons";
+
+//#region src/LayoutMenuVariant/AccordionMenu.tsx
+const StyledAccordionArea = styled(AccordionAreaDeprecated)`
+  padding-block: ${({ theme: theme$1 }) => theme$1.spacing[16]};
+  position: relative;
+  left: -4px;
+
+  &:not(:first-child) {
+    border-top: 1px solid ${({ theme: theme$1 }) => theme$1.colors["navy-300"]};
   }
-});
-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
-    })
-  });
-};
+`;
+const StyledAnchor = styled(Anchor)`
+  :hover {
+    color: inherit;
+  }
+`;
+const chevronStates = states({ expanded: { transform: "rotate(180deg)" } });
+const ExpandChevron = styled(MiniChevronDownIcon)(css({
+	transform: "rotate(0deg)",
+	transition: transitionConcat(["transform"], "slow", "ease-out")
+}), chevronStates);
+const AccordionMenu = ({ section, onSectionToggle, onItemClick }) => {
+	const [expanded, setExpanded] = useState(true);
+	return /* @__PURE__ */ jsx(StyledAccordionArea, {
+		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",
+					style: {
+						flex: 1,
+						fontWeight: "bold"
+					},
+					textAlign: "left",
+					children: section.title
+				}), /* @__PURE__ */ jsx(ExpandChevron, {
+					ml: 12,
+					size: 16,
+					expanded,
+					position: "relative",
+					top: 4
+				})]
+			})
+		}),
+		children: /* @__PURE__ */ jsx(LayoutMenuSection, {
+			items: section.items,
+			onItemClick
+		})
+	});
+};
+
+//#endregion
+export { AccordionMenu };