@codecademy/brand 5.8.1 → 5.9.0-alpha.10aaf123e.0

package/dist/AccordionDeprecated/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AccordionButtonSize, AccordionButtonTheme } from '../AccordionButtonDeprecated';
+export type ChildrenOrExpandedRender = React.ReactNode | ((expanded: boolean) => React.ReactNode);
+export type AccordionDeprecatedProps = {
+    children: ChildrenOrExpandedRender;
+    /**
+     * CSS class name added to the root area container.
+     */
+    className?: string;
+    /**
+     * Whether the accordion should start off with expanded state.
+     */
+    initiallyExpanded?: boolean;
+    /**
+     * Called when the top button is clicked.
+     *
+     * @param expanding - New expanded state the accordion will transition to.
+     */
+    onClick?: (expanding: boolean) => void;
+    /**
+     * Visual size of the top button.
+     */
+    size?: AccordionButtonSize;
+    /**
+     * Visual theme of the top button.
+     */
+    theme?: AccordionButtonTheme;
+    /**
+     * Contents to place within the top button.
+     */
+    top: ChildrenOrExpandedRender;
+};
+/**
+ * @deprecated
+ * This component is in the old visual identity and will be updated soon.
+ *
+ * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
+ */
+export declare const AccordionDeprecated: React.FC<AccordionDeprecatedProps>;

package/dist/AccordionDeprecated/index.js

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import * as React from 'react';
+import { AccordionAreaDeprecated } from '../AccordionAreaDeprecated';
+import { AccordionButtonDeprecated } from '../AccordionButtonDeprecated';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated
+ * This component is in the old visual identity and will be updated soon.
+ *
+ * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
+ */
+
+export const AccordionDeprecated = ({
+  children,
+  className,
+  initiallyExpanded,
+  onClick,
+  size,
+  theme,
+  top
+}) => {
+  const [expanded, setExpanded] = useState(!!initiallyExpanded);
+  const expandRenderer = renderer => renderer instanceof Function ? renderer(expanded) : renderer;
+  return /*#__PURE__*/_jsx(AccordionAreaDeprecated, {
+    className: className,
+    expanded: expanded,
+    top: /*#__PURE__*/_jsx(AccordionButtonDeprecated, {
+      expanded: expanded,
+      size: size,
+      theme: theme,
+      onClick: () => {
+        setExpanded(!expanded);
+        onClick?.(!expanded);
+      },
+      children: expandRenderer(top)
+    }),
+    children: expandRenderer(children)
+  });
+};

package/dist/LayoutMenu/AccordionMenu.js

@@ -1,28 +1,15 @@
 import _styled from "@emotion/styled/base";
-import { AccordionAreaDeprecated, Anchor, Text } from '@codecademy/gamut';
-import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
-import { css, states, transitionConcat } from '@codecademy/gamut-styles';
+import { Box, Text } from '@codecademy/gamut';
 import * as React from 'react';
+import { Accordion, AccordionBody, AccordionTrigger } from '../Accordion';
 import { LayoutMenuSection } from './LayoutMenuSection';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAccordionArea = /*#__PURE__*/_styled(AccordionAreaDeprecated, {
-  target: "e1erzfk91",
+const StyledAccordionArea = /*#__PURE__*/_styled(Box, {
+  target: "e1erzfk90",
   label: "StyledAccordionArea"
 })("padding-bottom:", ({
   theme
-}) => theme.spacing[32], ";position:relative;left:-4px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0FjY29yZGlvbk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVUyRCIsImZpbGUiOiIuLi8uLi9zcmMvTGF5b3V0TWVudS9BY2NvcmRpb25NZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkLCBBbmNob3IsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBNaW5pQ2hldnJvbkRvd25JY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRyYW5zaXRpb25Db25jYXQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlJztcbmltcG9ydCB7IFNjYWxlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UvZGlzdC90eXBlcy9jb25maWcnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBMYXlvdXRNZW51U2VjdGlvbiB9IGZyb20gJy4vTGF5b3V0TWVudVNlY3Rpb24nO1xuXG5jb25zdCBTdHlsZWRBY2NvcmRpb25BcmVhID0gc3R5bGVkKEFjY29yZGlvbkFyZWFEZXByZWNhdGVkKWBcbiAgcGFkZGluZy1ib3R0b206ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2luZ1szMl19O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGxlZnQ6IC00cHg7XG5gO1xuXG5jb25zdCBjaGV2cm9uU3RhdGVzID0gc3RhdGVzKHtcbiAgZXhwYW5kZWQ6IHsgdHJhbnNmb3JtOiAncm90YXRlKDE4MGRlZyknIH0sXG59KTtcblxuY29uc3QgRXhwYW5kQ2hldnJvbiA9IHN0eWxlZChNaW5pQ2hldnJvbkRvd25JY29uKTxcbiAgU3R5bGVQcm9wczx0eXBlb2YgY2hldnJvblN0YXRlcz5cbj4oXG4gIGNzcyh7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2l0aW9uQ29uY2F0KFsndHJhbnNmb3JtJ10sICdzbG93JywgJ2Vhc2Utb3V0JyksXG4gIH0pLFxuICBjaGV2cm9uU3RhdGVzXG4pO1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uSXRlbSA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBocmVmOiBzdHJpbmc7XG4gIG9uQ2xpY2s6IChldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gdm9pZDtcbiAgYmFkZ2U/OiBSZWFjdC5KU1guRWxlbWVudDtcbn07XG5cbmV4cG9ydCB0eXBlIFNlY3Rpb24gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaXRlbXM6IFNlY3Rpb25JdGVtW107XG59O1xuXG5leHBvcnQgY29uc3QgaXNTZWN0aW9uID0gKGl0ZW06IFNlY3Rpb24gfCBSZWFjdC5SZWFjdE5vZGUpOiBpdGVtIGlzIFNlY3Rpb24gPT4ge1xuICByZXR1cm4gKFxuICAgIHR5cGVvZiBpdGVtID09PSAnb2JqZWN0JyAmJlxuICAgIGl0ZW0gIT09IG51bGwgJiZcbiAgICAndGl0bGUnIGluIGl0ZW0gJiZcbiAgICAnc2x1ZycgaW4gaXRlbSAmJlxuICAgICdpdGVtcycgaW4gaXRlbVxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgQWNjb3JkaW9uTWVudVByb3BzID0ge1xuICBzZWN0aW9uOiBTZWN0aW9uO1xuICBvblNlY3Rpb25Ub2dnbGU6IChzZWN0aW9uU2x1Zzogc3RyaW5nKSA9PiB2b2lkO1xuICBvbkl0ZW1DbGljazogKCkgPT4gdm9pZDtcbiAgc2VsZWN0ZWRJdGVtPzogc3RyaW5nO1xuICB2ZXJ0aWNhbFNwYWNpbmc/OiBTY2FsZTx7XG4gICAgcmVhZG9ubHkgcHJvcGVydHk6ICdwYWRkaW5nJztcbiAgICByZWFkb25seSBzY2FsZTogJ3NwYWNpbmcnO1xuICB9Pjtcbn07XG5cbmV4cG9ydCBjb25zdCBBY2NvcmRpb25NZW51OiBSZWFjdC5GQzxBY2NvcmRpb25NZW51UHJvcHM+ID0gKHtcbiAgc2VjdGlvbixcbiAgb25TZWN0aW9uVG9nZ2xlLFxuICBvbkl0ZW1DbGljayxcbiAgc2VsZWN0ZWRJdGVtLFxuICB2ZXJ0aWNhbFNwYWNpbmcsXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gUmVhY3QudXNlU3RhdGUodHJ1ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYVxuICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgdG9wPXtcbiAgICAgICAgPEFuY2hvclxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIHB5PXsxMn1cbiAgICAgICAgICBweD17NH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKTtcbiAgICAgICAgICAgIHNldEV4cGFuZGVkKChwcmV2KSA9PiAhcHJldik7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgID5cbiAgICAgICAgICB7LyogZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZSAqL31cbiAgICAgICAgICA8VGV4dCB2YXJpYW50PVwidGl0bGUteHNcIiBzdHlsZT17eyBmbGV4OiAxIH19IHRleHRBbGlnbj1cImxlZnRcIj5cbiAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICA8RXhwYW5kQ2hldnJvblxuICAgICAgICAgICAgbWw9ezEyfVxuICAgICAgICAgICAgc2l6ZT17MTR9XG4gICAgICAgICAgICBleHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICAgIHRvcD17NH1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0FuY2hvcj5cbiAgICAgIH1cbiAgICA+XG4gICAgICA8TGF5b3V0TWVudVNlY3Rpb25cbiAgICAgICAgaXRlbXM9e3NlY3Rpb24uaXRlbXN9XG4gICAgICAgIHNlbGVjdGVkSXRlbT17c2VsZWN0ZWRJdGVtfVxuICAgICAgICBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9XG4gICAgICAgIHZlcnRpY2FsU3BhY2luZz17dmVydGljYWxTcGFjaW5nfVxuICAgICAgLz5cbiAgICA8L1N0eWxlZEFjY29yZGlvbkFyZWE+XG4gICk7XG59O1xuIl19 */"));
-const chevronStates = states({
-  expanded: {
-    transform: 'rotate(180deg)'
-  }
-});
-const ExpandChevron = /*#__PURE__*/_styled(MiniChevronDownIcon, {
-  target: "e1erzfk90",
-  label: "ExpandChevron"
-})(css({
-  transform: 'rotate(0deg)',
-  transition: transitionConcat(['transform'], 'slow', 'ease-out')
-}), chevronStates, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0FjY29yZGlvbk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Cc0IiLCJmaWxlIjoiLi4vLi4vc3JjL0xheW91dE1lbnUvQWNjb3JkaW9uTWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZCwgQW5jaG9yLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaUNoZXZyb25Eb3duSWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7IGNzcywgc3RhdGVzLCB0cmFuc2l0aW9uQ29uY2F0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCB7IFN0eWxlUHJvcHMgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgeyBTY2FsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L3ZhcmlhbmNlL2Rpc3QvdHlwZXMvY29uZmlnJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgTGF5b3V0TWVudVNlY3Rpb24gfSBmcm9tICcuL0xheW91dE1lbnVTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQXJlYSA9IHN0eWxlZChBY2NvcmRpb25BcmVhRGVwcmVjYXRlZClgXG4gIHBhZGRpbmctYm90dG9tOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNpbmdbMzJdfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBsZWZ0OiAtNHB4O1xuYDtcblxuY29uc3QgY2hldnJvblN0YXRlcyA9IHN0YXRlcyh7XG4gIGV4cGFuZGVkOiB7IHRyYW5zZm9ybTogJ3JvdGF0ZSgxODBkZWcpJyB9LFxufSk7XG5cbmNvbnN0IEV4cGFuZENoZXZyb24gPSBzdHlsZWQoTWluaUNoZXZyb25Eb3duSWNvbik8XG4gIFN0eWxlUHJvcHM8dHlwZW9mIGNoZXZyb25TdGF0ZXM+XG4+KFxuICBjc3Moe1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gICAgdHJhbnNpdGlvbjogdHJhbnNpdGlvbkNvbmNhdChbJ3RyYW5zZm9ybSddLCAnc2xvdycsICdlYXNlLW91dCcpLFxuICB9KSxcbiAgY2hldnJvblN0YXRlc1xuKTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbkl0ZW0gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xuICBvbkNsaWNrOiAoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gIGJhZGdlPzogUmVhY3QuSlNYLkVsZW1lbnQ7XG59O1xuXG5leHBvcnQgdHlwZSBTZWN0aW9uID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBzbHVnOiBzdHJpbmc7XG4gIGl0ZW1zOiBTZWN0aW9uSXRlbVtdO1xufTtcblxuZXhwb3J0IGNvbnN0IGlzU2VjdGlvbiA9IChpdGVtOiBTZWN0aW9uIHwgUmVhY3QuUmVhY3ROb2RlKTogaXRlbSBpcyBTZWN0aW9uID0+IHtcbiAgcmV0dXJuIChcbiAgICB0eXBlb2YgaXRlbSA9PT0gJ29iamVjdCcgJiZcbiAgICBpdGVtICE9PSBudWxsICYmXG4gICAgJ3RpdGxlJyBpbiBpdGVtICYmXG4gICAgJ3NsdWcnIGluIGl0ZW0gJiZcbiAgICAnaXRlbXMnIGluIGl0ZW1cbiAgKTtcbn07XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbk1lbnVQcm9wcyA9IHtcbiAgc2VjdGlvbjogU2VjdGlvbjtcbiAgb25TZWN0aW9uVG9nZ2xlOiAoc2VjdGlvblNsdWc6IHN0cmluZykgPT4gdm9pZDtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG4gIHNlbGVjdGVkSXRlbT86IHN0cmluZztcbiAgdmVydGljYWxTcGFjaW5nPzogU2NhbGU8e1xuICAgIHJlYWRvbmx5IHByb3BlcnR5OiAncGFkZGluZyc7XG4gICAgcmVhZG9ubHkgc2NhbGU6ICdzcGFjaW5nJztcbiAgfT47XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uTWVudTogUmVhY3QuRkM8QWNjb3JkaW9uTWVudVByb3BzPiA9ICh7XG4gIHNlY3Rpb24sXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgb25JdGVtQ2xpY2ssXG4gIHNlbGVjdGVkSXRlbSxcbiAgdmVydGljYWxTcGFjaW5nLFxufSkgPT4ge1xuICBjb25zdCBbZXhwYW5kZWQsIHNldEV4cGFuZGVkXSA9IFJlYWN0LnVzZVN0YXRlKHRydWUpO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEFjY29yZGlvbkFyZWFcbiAgICAgIGV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgIHRvcD17XG4gICAgICAgIDxBbmNob3JcbiAgICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgICBweT17MTJ9XG4gICAgICAgICAgcHg9ezR9XG4gICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgb25TZWN0aW9uVG9nZ2xlKHNlY3Rpb24uc2x1Zyk7XG4gICAgICAgICAgICBzZXRFeHBhbmRlZCgocHJldikgPT4gIXByZXYpO1xuICAgICAgICAgIH19XG4gICAgICAgICAgYXJpYS1leHBhbmRlZD17ZXhwYW5kZWR9XG4gICAgICAgICAgZGlzcGxheT1cImZsZXhcIlxuICAgICAgICA+XG4gICAgICAgICAgey8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGUgKi99XG4gICAgICAgICAgPFRleHQgdmFyaWFudD1cInRpdGxlLXhzXCIgc3R5bGU9e3sgZmxleDogMSB9fSB0ZXh0QWxpZ249XCJsZWZ0XCI+XG4gICAgICAgICAgICB7c2VjdGlvbi50aXRsZX1cbiAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPEV4cGFuZENoZXZyb25cbiAgICAgICAgICAgIG1sPXsxMn1cbiAgICAgICAgICAgIHNpemU9ezE0fVxuICAgICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgICAgcG9zaXRpb249XCJyZWxhdGl2ZVwiXG4gICAgICAgICAgICB0b3A9ezR9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9BbmNob3I+XG4gICAgICB9XG4gICAgPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uXG4gICAgICAgIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfVxuICAgICAgICBzZWxlY3RlZEl0ZW09e3NlbGVjdGVkSXRlbX1cbiAgICAgICAgb25JdGVtQ2xpY2s9e29uSXRlbUNsaWNrfVxuICAgICAgICB2ZXJ0aWNhbFNwYWNpbmc9e3ZlcnRpY2FsU3BhY2luZ31cbiAgICAgIC8+XG4gICAgPC9TdHlsZWRBY2NvcmRpb25BcmVhPlxuICApO1xufTtcbiJdfQ== */");
+}) => theme.spacing[32], ";position:relative;left:-4px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51L0FjY29yZGlvbk1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVF1QyIsImZpbGUiOiIuLi8uLi9zcmMvTGF5b3V0TWVudS9BY2NvcmRpb25NZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IFNjYWxlIH0gZnJvbSAnQGNvZGVjYWRlbXkvdmFyaWFuY2UvZGlzdC90eXBlcy9jb25maWcnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBY2NvcmRpb24sIEFjY29yZGlvbkJvZHksIEFjY29yZGlvblRyaWdnZXIgfSBmcm9tICcuLi9BY2NvcmRpb24nO1xuaW1wb3J0IHsgTGF5b3V0TWVudVNlY3Rpb24gfSBmcm9tICcuL0xheW91dE1lbnVTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQXJlYSA9IHN0eWxlZChCb3gpYFxuICBwYWRkaW5nLWJvdHRvbTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjaW5nWzMyXX07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTRweDtcbmA7XG5cbmV4cG9ydCB0eXBlIFNlY3Rpb25JdGVtID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBzbHVnOiBzdHJpbmc7XG4gIGhyZWY6IHN0cmluZztcbiAgb25DbGljazogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICBiYWRnZT86IFJlYWN0LkpTWC5FbGVtZW50O1xufTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbiA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBpdGVtczogU2VjdGlvbkl0ZW1bXTtcbn07XG5cbmV4cG9ydCBjb25zdCBpc1NlY3Rpb24gPSAoaXRlbTogU2VjdGlvbiB8IFJlYWN0LlJlYWN0Tm9kZSk6IGl0ZW0gaXMgU2VjdGlvbiA9PiB7XG4gIHJldHVybiAoXG4gICAgdHlwZW9mIGl0ZW0gPT09ICdvYmplY3QnICYmXG4gICAgaXRlbSAhPT0gbnVsbCAmJlxuICAgICd0aXRsZScgaW4gaXRlbSAmJlxuICAgICdzbHVnJyBpbiBpdGVtICYmXG4gICAgJ2l0ZW1zJyBpbiBpdGVtXG4gICk7XG59O1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25NZW51UHJvcHMgPSB7XG4gIHNlY3Rpb246IFNlY3Rpb247XG4gIG9uU2VjdGlvblRvZ2dsZTogKHNlY3Rpb25TbHVnOiBzdHJpbmcpID0+IHZvaWQ7XG4gIG9uSXRlbUNsaWNrOiAoKSA9PiB2b2lkO1xuICBzZWxlY3RlZEl0ZW0/OiBzdHJpbmc7XG4gIHZlcnRpY2FsU3BhY2luZz86IFNjYWxlPHtcbiAgICByZWFkb25seSBwcm9wZXJ0eTogJ3BhZGRpbmcnO1xuICAgIHJlYWRvbmx5IHNjYWxlOiAnc3BhY2luZyc7XG4gIH0+O1xufTtcblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbk1lbnU6IFJlYWN0LkZDPEFjY29yZGlvbk1lbnVQcm9wcz4gPSAoe1xuICBzZWN0aW9uLFxuICBvblNlY3Rpb25Ub2dnbGUsXG4gIG9uSXRlbUNsaWNrLFxuICBzZWxlY3RlZEl0ZW0sXG4gIHZlcnRpY2FsU3BhY2luZyxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYT5cbiAgICAgIDxBY2NvcmRpb25cbiAgICAgICAgaW5pdGlhbGx5RXhwYW5kZWRcbiAgICAgICAgb25DbGljaz17KCkgPT4gb25TZWN0aW9uVG9nZ2xlKHNlY3Rpb24uc2x1Zyl9XG4gICAgICA+XG4gICAgICAgIDxBY2NvcmRpb25UcmlnZ2VyIHB5PXsxMn0gcHg9ezR9PlxuICAgICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJ0aXRsZS14c1wiIHRleHRBbGlnbj1cImxlZnRcIj5cbiAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgPC9BY2NvcmRpb25UcmlnZ2VyPlxuICAgICAgICA8QWNjb3JkaW9uQm9keT5cbiAgICAgICAgICA8TGF5b3V0TWVudVNlY3Rpb25cbiAgICAgICAgICAgIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfVxuICAgICAgICAgICAgc2VsZWN0ZWRJdGVtPXtzZWxlY3RlZEl0ZW19XG4gICAgICAgICAgICBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9XG4gICAgICAgICAgICB2ZXJ0aWNhbFNwYWNpbmc9e3ZlcnRpY2FsU3BhY2luZ31cbiAgICAgICAgICAvPlxuICAgICAgICA8L0FjY29yZGlvbkJvZHk+XG4gICAgICA8L0FjY29yZGlvbj5cbiAgICA8L1N0eWxlZEFjY29yZGlvbkFyZWE+XG4gICk7XG59O1xuIl19 */"));
 export const isSection = item => {
   return typeof item === 'object' && item !== null && 'title' in item && 'slug' in item && 'items' in item;
 };
@@ -33,39 +20,26 @@ export const AccordionMenu = ({
   selectedItem,
   verticalSpacing
 }) => {
-  const [expanded, setExpanded] = React.useState(true);
   return /*#__PURE__*/_jsx(StyledAccordionArea, {
-    expanded: expanded,
-    top: /*#__PURE__*/_jsxs(Anchor, {
-      variant: "interface",
-      py: 12,
-      px: 4,
-      onClick: () => {
-        onSectionToggle(section.slug);
-        setExpanded(prev => !prev);
-      },
-      "aria-expanded": expanded,
-      display: "flex",
-      children: [/*#__PURE__*/_jsx(Text, {
-        variant: "title-xs",
-        style: {
-          flex: 1
-        },
-        textAlign: "left",
-        children: section.title
-      }), /*#__PURE__*/_jsx(ExpandChevron, {
-        ml: 12,
-        size: 14,
-        expanded: expanded,
-        position: "relative",
-        top: 4
+    children: /*#__PURE__*/_jsxs(Accordion, {
+      initiallyExpanded: true,
+      onClick: () => onSectionToggle(section.slug),
+      children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+        py: 12,
+        px: 4,
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          textAlign: "left",
+          children: section.title
+        })
+      }), /*#__PURE__*/_jsx(AccordionBody, {
+        children: /*#__PURE__*/_jsx(LayoutMenuSection, {
+          items: section.items,
+          selectedItem: selectedItem,
+          onItemClick: onItemClick,
+          verticalSpacing: verticalSpacing
+        })
       })]
-    }),
-    children: /*#__PURE__*/_jsx(LayoutMenuSection, {
-      items: section.items,
-      selectedItem: selectedItem,
-      onItemClick: onItemClick,
-      verticalSpacing: verticalSpacing
     })
   });
 };

package/dist/LayoutMenuVariant/AccordionMenu.js

@@ -1,66 +1,31 @@
 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 { Box, Text } from '@codecademy/gamut';
+import React from 'react';
+import { Accordion, AccordionBody, AccordionTrigger } from '../Accordion';
 import { LayoutMenuSection } from './LayoutMenuSection';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAccordionArea = /*#__PURE__*/_styled(AccordionAreaDeprecated, {
-  target: "e12elcd22",
+const StyledAccordionArea = /*#__PURE__*/_styled(Box, {
+  target: "e12elcd20",
   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/OiBSZWFjdC5KU1guRWxlbWVudDtcbiAgdmFyaWFudD86IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBBbmNob3I+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+IHZvaWQ7XG4gIGJhZGdlPzogUmVhY3QuSlNYLkVsZW1lbnQ7XG4gIHZhcmlhbnQ/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+IHZvaWQ7XG4gIGJhZGdlPzogUmVhY3QuSlNYLkVsZW1lbnQ7XG4gIHZhcmlhbnQ/OiBSZWFjdC5Db21wb25lbnRQcm9wczx0eXBlb2YgQW5jaG9yPlsndmFyaWFudCddO1xufTtcblxuZXhwb3J0IHR5cGUgU2VjdGlvbiA9IHtcbiAgdGl0bGU6IHN0cmluZztcbiAgc2x1Zzogc3RyaW5nO1xuICBpdGVtczogU2VjdGlvbkl0ZW1bXTtcbn07XG5cbmV4cG9ydCB0eXBlIEFjY29yZGlvbk1lbnVQcm9wcyA9IHtcbiAgc2VjdGlvbjogU2VjdGlvbjtcbiAgb25TZWN0aW9uVG9nZ2xlOiAoc2VjdGlvblNsdWc6IHN0cmluZykgPT4gdm9pZDtcbiAgb25JdGVtQ2xpY2s6ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uTWVudTogUmVhY3QuRkM8QWNjb3JkaW9uTWVudVByb3BzPiA9ICh7XG4gIHNlY3Rpb24sXG4gIG9uU2VjdGlvblRvZ2dsZSxcbiAgb25JdGVtQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IFtleHBhbmRlZCwgc2V0RXhwYW5kZWRdID0gdXNlU3RhdGUodHJ1ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8U3R5bGVkQWNjb3JkaW9uQXJlYVxuICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgdG9wPXtcbiAgICAgICAgPFN0eWxlZEFuY2hvclxuICAgICAgICAgIHZhcmlhbnQ9XCJpbnRlcmZhY2VcIlxuICAgICAgICAgIHBiPXsxMn1cbiAgICAgICAgICBweD17NH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKTtcbiAgICAgICAgICAgIHNldEV4cGFuZGVkKChwcmV2KSA9PiAhcHJldik7XG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWV4cGFuZGVkPXtleHBhbmRlZH1cbiAgICAgICAgICBkaXNwbGF5PVwiZmxleFwiXG4gICAgICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxCb3ggZGlzcGxheT1cImZsZXhcIiBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGdhbXV0L25vLWlubGluZS1zdHlsZVxuICAgICAgICAgICAgICBzdHlsZT17eyBmbGV4OiAxLCBmb250V2VpZ2h0OiAnYm9sZCcgfX1cbiAgICAgICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtzZWN0aW9uLnRpdGxlfVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPEV4cGFuZENoZXZyb25cbiAgICAgICAgICAgICAgbWw9ezEyfVxuICAgICAgICAgICAgICBzaXplPXsxNn1cbiAgICAgICAgICAgICAgZXhwYW5kZWQ9e2V4cGFuZGVkfVxuICAgICAgICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgICAgICAgICAgdG9wPXs0fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgPC9TdHlsZWRBbmNob3I+XG4gICAgICB9XG4gICAgPlxuICAgICAgPExheW91dE1lbnVTZWN0aW9uIGl0ZW1zPXtzZWN0aW9uLml0ZW1zfSBvbkl0ZW1DbGljaz17b25JdGVtQ2xpY2t9IC8+XG4gICAgPC9TdHlsZWRBY2NvcmRpb25BcmVhPlxuICApO1xufTtcbiJdfQ== */");
+}) => theme.colors['navy-300'], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9MYXlvdXRNZW51VmFyaWFudC9BY2NvcmRpb25NZW51LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUMiLCJmaWxlIjoiLi4vLi4vc3JjL0xheW91dE1lbnVWYXJpYW50L0FjY29yZGlvbk1lbnUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBCb3gsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBY2NvcmRpb24sIEFjY29yZGlvbkJvZHksIEFjY29yZGlvblRyaWdnZXIgfSBmcm9tICcuLi9BY2NvcmRpb24nO1xuaW1wb3J0IHsgTGF5b3V0TWVudVNlY3Rpb24gfSBmcm9tICcuL0xheW91dE1lbnVTZWN0aW9uJztcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQXJlYSA9IHN0eWxlZChCb3gpYFxuICBwYWRkaW5nLWJsb2NrOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNpbmdbMTZdfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBsZWZ0OiAtNHB4O1xuXG4gICY6bm90KDpmaXJzdC1jaGlsZCkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0zMDAnXX07XG4gIH1cbmA7XG5cbmV4cG9ydCB0eXBlIFNlY3Rpb25JdGVtID0ge1xuICB0aXRsZTogc3RyaW5nO1xuICBzbHVnOiBzdHJpbmc7XG4gIGhyZWY6IHN0cmluZztcbiAgb25DbGljazogKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50KSA9PiB2b2lkO1xuICBiYWRnZT86IFJlYWN0LkpTWC5FbGVtZW50O1xuICB2YXJpYW50PzogUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEFuY2hvcj5bJ3ZhcmlhbnQnXTtcbn07XG5cbmV4cG9ydCB0eXBlIFNlY3Rpb24gPSB7XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHNsdWc6IHN0cmluZztcbiAgaXRlbXM6IFNlY3Rpb25JdGVtW107XG59O1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25NZW51UHJvcHMgPSB7XG4gIHNlY3Rpb246IFNlY3Rpb247XG4gIG9uU2VjdGlvblRvZ2dsZTogKHNlY3Rpb25TbHVnOiBzdHJpbmcpID0+IHZvaWQ7XG4gIG9uSXRlbUNsaWNrOiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbk1lbnU6IFJlYWN0LkZDPEFjY29yZGlvbk1lbnVQcm9wcz4gPSAoe1xuICBzZWN0aW9uLFxuICBvblNlY3Rpb25Ub2dnbGUsXG4gIG9uSXRlbUNsaWNrLFxufSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRBY2NvcmRpb25BcmVhPlxuICAgICAgPEFjY29yZGlvblxuICAgICAgICBpbml0aWFsbHlFeHBhbmRlZFxuICAgICAgICBvbkNsaWNrPXsoKSA9PiBvblNlY3Rpb25Ub2dnbGUoc2VjdGlvbi5zbHVnKX1cbiAgICAgID5cbiAgICAgICAgPEFjY29yZGlvblRyaWdnZXIgcGI9ezEyfSBweD17NH0gd2lkdGg9XCIxMDAlXCI+XG4gICAgICAgICAgPFRleHRcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJwLXNtYWxsXCJcbiAgICAgICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGVcbiAgICAgICAgICAgIHN0eWxlPXt7IGZsZXg6IDEsIGZvbnRXZWlnaHQ6ICdib2xkJyB9fVxuICAgICAgICAgICAgdGV4dEFsaWduPVwibGVmdFwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge3NlY3Rpb24udGl0bGV9XG4gICAgICAgICAgPC9UZXh0PlxuICAgICAgICA8L0FjY29yZGlvblRyaWdnZXI+XG4gICAgICAgIDxBY2NvcmRpb25Cb2R5PlxuICAgICAgICAgIDxMYXlvdXRNZW51U2VjdGlvbiBpdGVtcz17c2VjdGlvbi5pdGVtc30gb25JdGVtQ2xpY2s9e29uSXRlbUNsaWNrfSAvPlxuICAgICAgICA8L0FjY29yZGlvbkJvZHk+XG4gICAgICA8L0FjY29yZGlvbj5cbiAgICA8L1N0eWxlZEFjY29yZGlvbkFyZWE+XG4gICk7XG59O1xuIl19 */"));
 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",
+    children: /*#__PURE__*/_jsxs(Accordion, {
+      initiallyExpanded: true,
+      onClick: () => onSectionToggle(section.slug),
+      children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+        pb: 12,
+        px: 4,
         width: "100%",
-        children: [/*#__PURE__*/_jsx(Text, {
+        children: /*#__PURE__*/_jsx(Text, {
           variant: "p-small"
           // eslint-disable-next-line gamut/no-inline-style
           ,
@@ -70,18 +35,13 @@ export const AccordionMenu = ({
           },
           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
+        })
+      }), /*#__PURE__*/_jsx(AccordionBody, {
+        children: /*#__PURE__*/_jsx(LayoutMenuSection, {
+          items: section.items,
+          onItemClick: onItemClick
+        })
+      })]
     })
   });
 };

package/dist/index.d.ts

@@ -1,4 +1,8 @@
 export * as LayoutMenuVariant from './LayoutMenuVariant';
+export * from './Accordion';
+export * from './AccordionDeprecated';
+export * from './AccordionAreaDeprecated';
+export * from './AccordionButtonDeprecated';
 export * from './AbbreviatedCommunityEventCard';
 export * from './AppBar';
 export * from './AppBar/AppBarSection';

package/dist/index.js

@@ -1,4 +1,8 @@
 export * as LayoutMenuVariant from './LayoutMenuVariant';
+export * from './Accordion';
+export * from './AccordionDeprecated';
+export * from './AccordionAreaDeprecated';
+export * from './AccordionButtonDeprecated';
 export * from './AbbreviatedCommunityEventCard';
 export * from './AppBar';
 export * from './AppBar/AppBarSection';

package/dist/stories/Molecules/Accordion.stories.js

@@ -0,0 +1,122 @@
+import { Box, Text } from '@codecademy/gamut';
+import { useState } from 'react';
+import { Accordion, AccordionBody, AccordionTrigger } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: Accordion,
+  title: 'Molecules/Accordion'
+};
+export default meta;
+export const Default = {
+  render: () => /*#__PURE__*/_jsxs(Accordion, {
+    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+      children: "Click to expand"
+    }), /*#__PURE__*/_jsx(AccordionBody, {
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: "Accordion panel content."
+        })
+      })
+    })]
+  }),
+  name: 'Default (uncontrolled)'
+};
+export const InitiallyExpanded = {
+  render: () => /*#__PURE__*/_jsxs(Accordion, {
+    initiallyExpanded: true,
+    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+      children: "Expanded by default"
+    }), /*#__PURE__*/_jsx(AccordionBody, {
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: "This panel starts open."
+        })
+      })
+    })]
+  }),
+  name: 'Initially expanded'
+};
+export const Controlled = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsxs(Text, {
+        mb: 8,
+        variant: "p-small",
+        children: ["Controlled externally \u2014 expanded: ", String(isOpen)]
+      }), /*#__PURE__*/_jsxs(Accordion, {
+        expanded: isOpen,
+        onClick: setIsOpen,
+        children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+          children: "Controlled accordion"
+        }), /*#__PURE__*/_jsx(AccordionBody, {
+          children: /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(Text, {
+              children: "Caller manages expanded state via onToggle."
+            })
+          })
+        })]
+      })]
+    });
+  },
+  name: 'Controlled'
+};
+export const WithOnClickCallback = {
+  render: () => /*#__PURE__*/_jsxs(Accordion, {
+    onClick: next => {
+      // eslint-disable-next-line no-console
+      console.log('toggled:', next);
+    },
+    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+      children: "Section with callbacks"
+    }), /*#__PURE__*/_jsx(AccordionBody, {
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Text, {
+          children: "Check the console \u2014 onToggle and onClick fire on each toggle."
+        })
+      })
+    })]
+  }),
+  name: 'With callbacks'
+};
+export const MultipleAccordions = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    children: ['Section A', 'Section B', 'Section C'].map(label => /*#__PURE__*/_jsxs(Accordion, {
+      children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+        children: label
+      }), /*#__PURE__*/_jsx(AccordionBody, {
+        children: /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsxs(Text, {
+            children: ["Content for ", label, ". Each accordion is independent."]
+          })
+        })
+      })]
+    }, label))
+  }),
+  name: 'Multiple independent accordions'
+};
+export const RichContent = {
+  render: () => /*#__PURE__*/_jsxs(Accordion, {
+    initiallyExpanded: true,
+    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
+      children: "Frequently asked question"
+    }), /*#__PURE__*/_jsx(AccordionBody, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          children: "Answer heading"
+        }), /*#__PURE__*/_jsxs(Text, {
+          children: ["This body can hold any React content \u2014 text, links, forms, lists, or nested components. The height animates in and out using Gamut's", ' ', "ExpandInCollapseOut primitive."]
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "p-small",
+          color: "text-secondary",
+          children: "Supporting detail with secondary text color."
+        })]
+      })
+    })]
+  }),
+  name: 'Rich body content'
+};

package/dist/stories/Molecules/AccordionDeprecated.stories.js

@@ -0,0 +1,19 @@
+import { AccordionDeprecated } from '../../index';
+const meta = {
+  component: AccordionDeprecated
+};
+export default meta;
+export const Default = {
+  args: {
+    top: 'Click to expand',
+    children: 'Accordion panel content.'
+  },
+  name: 'AccordionDeprecated'
+};
+export const InitiallyExpanded = {
+  args: {
+    top: 'Expanded by default',
+    children: 'This panel starts open.',
+    initiallyExpanded: true
+  }
+};

package/dist/typings/react.d.ts

@@ -0,0 +1,7 @@
+import { Attributes, ReactHTML } from 'react';
+import * as React from 'react';
+
+/**
+ * Simple tag string, component class, or functional component for a render prop.
+ */
+export type ChildComponentDescriptor = string | React.ComponentClass | React.FC;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './omitProps';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './omitProps';

package/dist/utils/omitProps.d.ts

@@ -0,0 +1,10 @@
+export type RemoveFrom<TContainer, TRemoved> = {
+    [P in keyof TContainer]: P extends keyof TRemoved ? never : TContainer[P];
+};
+/**
+ * omitProps
+ *
+ * removes a provided array of props from a props object,
+ * leaving necessary props like children intact
+ */
+export declare function omitProps<TOmittedProps extends {}, TProps extends {}>(initialPropsToOmit: TOmittedProps | (keyof TOmittedProps)[], props: TProps): RemoveFrom<TOmittedProps, TProps>;

package/dist/utils/omitProps.js

@@ -0,0 +1,18 @@
+import invariant from 'invariant';
+import isPlainObject from 'lodash/isPlainObject';
+import omit from 'lodash/omit';
+import without from 'lodash/without';
+/**
+ * omitProps
+ *
+ * removes a provided array of props from a props object,
+ * leaving necessary props like children intact
+ */
+export function omitProps(initialPropsToOmit, props) {
+  const propsToOmit = isPlainObject(initialPropsToOmit) ? Object.keys(initialPropsToOmit) : initialPropsToOmit;
+  invariant(Array.isArray(propsToOmit), 'omitProps first argument should be an Array');
+
+  // allow all data-* props, mainly used for testing libraries
+  const dataProps = propsToOmit.filter(p => /^data-.*/.exec(p));
+  return omit(props, without(propsToOmit, 'children', 'className', ...dataProps));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.8.1",
+  "version": "5.9.0-alpha.10aaf123e.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",
@@ -21,6 +21,7 @@
     "framer-motion": "^11.18.0",
     "freezeframe": "^5.0.2",
     "intersection-observer": "^0.12.0",
+    "invariant": "^2.2.4",
     "ismobilejs": "^1.1.1",
     "lodash": "^4.18.1",
     "pluralize": "^8.0.0",
@@ -28,6 +29,9 @@
     "react-use": "15.3.8",
     "universal-cookie": "^8.0.1"
   },
+  "devDependencies": {
+    "@types/invariant": "^2.2.37"
+  },
   "peerDependencies": {
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",