@codecademy/brand 3.19.0-alpha.c35a1cb4bd.0 → 3.19.0-alpha.c8b1055646.0

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/AppHeaderSection.test.js

@@ -2,11 +2,12 @@ import { setupRtl } from '@codecademy/gamut-tests';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
-import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
+import { CATALOG_TAB_SECTIONS } from '../AppHeaderCatalogDropdown/tabConfig';
 import { AppHeaderSection } from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
 const mockOnClick = jest.fn();
 const mockKeyDownEvents = jest.fn();
+const mockHandleClose = jest.fn();
 const mockItem = {
   text: 'catalog',
   id: 'the-catalog',
@@ -21,6 +22,15 @@ const defaultProps = {
 const mockContextValue = {
   globalHeaderItemClick: mockOnClick
 };
+const MockMarketingBanner = jest.fn().mockReturnValue(/*#__PURE__*/_jsx("div", {
+  "data-testid": "marketing-banner",
+  children: "Marketing Banner"
+}));
+jest.mock('../../../GlobalHeader/context', () => ({
+  ...jest.requireActual('../../../GlobalHeader/context'),
+  useGlobalHeaderDynamicDataContext: jest.fn()
+}));
+const mockUseGlobalHeaderDynamicDataContext = require('../../../GlobalHeader/context').useGlobalHeaderDynamicDataContext;
 describe('AppHeaderSection', () => {
   const renderView = setupRtl(AppHeaderSection, defaultProps).options({
     wrapper: ({
@@ -30,50 +40,171 @@ describe('AppHeaderSection', () => {
       children: children
     })
   });
-  it('renders the component ', () => {
+  beforeEach(() => {
+    mockUseGlobalHeaderDynamicDataContext.mockReturnValue({
+      globalHeaderDynamicData: {
+        catalogDropdown: {
+          banner: null,
+          skillPaths: {
+            totalSkillPathCount: 0,
+            promotedSkillPaths: []
+          },
+          careerPaths: {
+            totalCareerPathCount: 0,
+            promotedCareerPaths: []
+          },
+          certificationPaths: {
+            totalCertificationPathCount: 0
+          }
+        }
+      }
+    });
+  });
+  it('renders the component with default tab selected', () => {
     const {
       view
     } = renderView({
-      navSections: CATALOG_NAV_SECTIONS,
-      handleClose: jest.fn(),
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
       type: 'catalog-dropdown'
     });
     expect(view.getByRole('heading', {
       name: 'Course topics'
     })).toBeInTheDocument();
+
+    // First tab should be active by default, this is handled by the react-aria-component
+    // but leaving this test anyway to ensure the right default tab is selected
+    expect(view.getByRole('tab', {
+      selected: true
+    })).toHaveTextContent('Course topics');
   });
-  describe('tab navigation', () => {
-    it('starts with the first tab active by default', () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'true');
+  it('renders with custom defaultSelectedKey', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown',
+      defaultSelectedKey: 'career-paths'
     });
-    it('switches active tab when clicking on different sections', async () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const careerPathsButton = view.getByTestId('nav-section-career-paths');
-      await userEvent.click(careerPathsButton);
-      expect(careerPathsButton).toHaveAttribute('aria-expanded', 'true');
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'false');
+    expect(view.getByRole('tab', {
+      selected: true
+    })).toHaveTextContent('Career paths');
+  });
+  it('shows right arrow icon for active tab on larger screens', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown'
+    });
+
+    // First tab should be active and show arrow
+    const activeTab = view.getByRole('tab', {
+      selected: true
+    });
+    expect(activeTab.querySelector('svg')).toBeInTheDocument();
+  });
+  it('renders marketing banner when banner data and component are provided', () => {
+    mockUseGlobalHeaderDynamicDataContext.mockReturnValue({
+      globalHeaderDynamicData: {
+        catalogDropdown: {
+          banner: {
+            title: 'Test Banner'
+          },
+          skillPaths: {
+            totalSkillPathCount: 0,
+            promotedSkillPaths: []
+          },
+          careerPaths: {
+            totalCareerPathCount: 0,
+            promotedCareerPaths: []
+          },
+          certificationPaths: {
+            totalCertificationPathCount: 0
+          }
+        }
+      }
+    });
+  });
+  it('does not render marketing banner when no banner data', () => {
+    mockUseGlobalHeaderDynamicDataContext.mockReturnValue({
+      globalHeaderDynamicData: {
+        catalogDropdown: {
+          banner: null,
+          skillPaths: {
+            totalSkillPathCount: 0,
+            promotedSkillPaths: []
+          },
+          careerPaths: {
+            totalCareerPathCount: 0,
+            promotedCareerPaths: []
+          },
+          certificationPaths: {
+            totalCertificationPathCount: 0
+          }
+        }
+      }
+    });
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown',
+      MarketingBanner: MockMarketingBanner
+    });
+    expect(MockMarketingBanner).not.toHaveBeenCalled();
+  });
+  it('renders with custom aria-label when provided', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown',
+      ariaLabel: 'Custom Navigation Label'
+    });
+    expect(view.getByRole('tablist')).toHaveAttribute('aria-label', 'Custom Navigation Label');
+  });
+  it('uses default aria-label when not provided', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown'
+    });
+    expect(view.getByRole('tablist')).toHaveAttribute('aria-label', 'catalog navigation');
+  });
+  it('uses resources aria-label for resources dropdown type', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: CATALOG_TAB_SECTIONS,
+      handleClose: mockHandleClose,
+      type: 'resources-dropdown'
     });
+    expect(view.getByRole('tablist')).toHaveAttribute('aria-label', 'resources navigation');
+  });
+  it('handles empty tabSections gracefully', () => {
+    const {
+      view
+    } = renderView({
+      tabSections: [],
+      handleClose: mockHandleClose,
+      type: 'catalog-dropdown'
+    });
+    expect(view.container).toBeInTheDocument();
+  });
+  describe('tab tracking', () => {
     it('calls tracking with correct parameters when clicking nav section', async () => {
       const {
         view
       } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
+        tabSections: CATALOG_TAB_SECTIONS,
+        handleClose: mockHandleClose,
         type: 'catalog-dropdown'
       });
       const careerPathsButton = view.getByTestId('nav-section-career-paths');
@@ -87,5 +218,59 @@ describe('AppHeaderSection', () => {
       }) // tracking parameters
       );
     });
+    it('calls tracking for all tab sections when clicked', async () => {
+      const {
+        view
+      } = renderView({
+        tabSections: CATALOG_TAB_SECTIONS,
+        handleClose: mockHandleClose,
+        type: 'catalog-dropdown'
+      });
+
+      // Click each tab to verify tracking
+      const tabs = ['course-topics', 'skill-paths', 'career-paths', 'certification-paths', 'live-learning'];
+      await Promise.all(tabs.map(async tabId => {
+        const tabButton = view.getByTestId(`nav-section-${tabId}`);
+        await userEvent.click(tabButton);
+      }));
+      expect(mockOnClick).toHaveBeenCalledTimes(5);
+    });
+  });
+  describe('tab panel rendering', () => {
+    it('renders the active tab panel content', () => {
+      const {
+        view
+      } = renderView({
+        tabSections: CATALOG_TAB_SECTIONS,
+        handleClose: mockHandleClose,
+        type: 'catalog-dropdown'
+      });
+      expect(view.getByRole('tabpanel', {
+        name: 'Course topics'
+      })).toBeInTheDocument();
+    });
+    it('switches panel content when different tab is selected', async () => {
+      const {
+        view
+      } = renderView({
+        tabSections: CATALOG_TAB_SECTIONS,
+        handleClose: mockHandleClose,
+        type: 'catalog-dropdown'
+      });
+
+      // Click on career paths tab
+      const careerPathsTab = view.getByRole('tab', {
+        name: 'Career paths'
+      });
+      await userEvent.click(careerPathsTab);
+
+      // Career paths panel should now be visible
+      expect(view.getByRole('tabpanel', {
+        name: 'Career paths'
+      })).toBeInTheDocument();
+      expect(view.queryByRole('tabpanel', {
+        name: 'Course topics'
+      })).not.toBeInTheDocument();
+    });
   });
 });

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileBackButton.js

@@ -3,8 +3,7 @@ import { Box, FlexBox, IconButton, Text } from '@codecademy/gamut';
 import { ArrowLeftIcon } from '@codecademy/gamut-icons';
 import React from 'react';
 import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
-import { SmallMenuButton } from './elements';
-import { NavigationButton } from './NavSection';
+import { NavigationButton, SmallMenuButton } from './elements';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const NavIconButton = /*#__PURE__*/_styled(IconButton, {
   target: "ew664c00",
@@ -13,7 +12,7 @@ export const NavIconButton = /*#__PURE__*/_styled(IconButton, {
   theme
 }) => theme.colors.primary, ";background-color:", ({
   theme
-}) => theme.colors['navy-100'], ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9Nb2JpbGVCYWNrQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTK0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTZWN0aW9uL01vYmlsZUJhY2tCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94LCBJY29uQnV0dG9uLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dMZWZ0SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7IFNtYWxsTWVudUJ1dHRvbiB9IGZyb20gJy4vZWxlbWVudHMnO1xuaW1wb3J0IHsgTmF2aWdhdGlvbkJ1dHRvbiB9IGZyb20gJy4vTmF2U2VjdGlvbic7XG5cbmV4cG9ydCBjb25zdCBOYXZJY29uQnV0dG9uID0gc3R5bGVkKEljb25CdXR0b24pYFxuICAmOmhvdmVyLFxuICAmOmZvY3VzIHN2ZyB7XG4gICAgJjpob3ZlcixcbiAgICAmOmZvY3VzIHtcbiAgICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWyduYXZ5LTEwMCddfTtcbiAgICB9XG4gIH1cbmA7XG5cbmV4cG9ydCB0eXBlIE1vYmlsZUJhY2tCdXR0b25Qcm9wcyA9IHtcbiAgaGFuZGxlQ2xvc2U6ICgpID0+IHZvaWQ7XG4gIHR5cGU6ICdjYXRhbG9nLWRyb3Bkb3duJyB8ICdyZXNvdXJjZXMtZHJvcGRvd24nO1xufTtcblxuZXhwb3J0IGNvbnN0IE1vYmlsZUJhY2tCdXR0b246IFJlYWN0LkZDPE1vYmlsZUJhY2tCdXR0b25Qcm9wcz4gPSAoe1xuICBoYW5kbGVDbG9zZSxcbiAgdHlwZSxcbn0pID0+IHtcbiAgY29uc3QgeyBnbG9iYWxIZWFkZXJJdGVtQ2xpY2sgfSA9IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljaygpO1xuXG4gIGNvbnN0IGhhbmRsZUJhY2tCdXR0b25DbGljayA9IChcbiAgICBldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudD5cbiAgKSA9PiB7XG4gICAgZ2xvYmFsSGVhZGVySXRlbUNsaWNrKGV2ZW50LCB7XG4gICAgICBpZDogJ2JhY2snLFxuICAgICAgdGV4dDogJ0JhY2snLFxuICAgICAgdHlwZSxcbiAgICB9KTtcbiAgICBoYW5kbGVDbG9zZSgpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiAnbm9uZScsIHNtOiAnYmxvY2snIH19PlxuICAgICAgICA8TmF2aWdhdGlvbkJ1dHRvblxuICAgICAgICAgIGlzQWN0aXZlPXtmYWxzZX1cbiAgICAgICAgICBpbmRleD17MH1cbiAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVCYWNrQnV0dG9uQ2xpY2t9XG4gICAgICAgID5cbiAgICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICAgIDxCb3ggaGVpZ2h0PXsyNH0gd2lkdGg9ezI0fT5cbiAgICAgICAgICAgICAgPEFycm93TGVmdEljb24gc2l6ZT17MjR9IC8+XG4gICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJwLWxhcmdlXCI+QmFjazwvVGV4dD5cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvTmF2aWdhdGlvbkJ1dHRvbj5cbiAgICAgIDwvQm94PlxuICAgICAgPEJveFxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgeHM6ICdncmlkJywgc206ICdub25lJyB9fVxuICAgICAgICBtbD17OH1cbiAgICAgICAgZ3JpZENvbHVtbj1cIjFcIlxuICAgICAgICBncmlkUm93PVwiMVwiXG4gICAgICA+XG4gICAgICAgIDxOYXZJY29uQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17aGFuZGxlQmFja0J1dHRvbkNsaWNrfVxuICAgICAgICAgIGljb249e0Fycm93TGVmdEljb259XG4gICAgICAgICAgdGlwPVwiQmFjayB0byBtYWluIG5hdmlnYXRpb25cIlxuICAgICAgICAgIHRpcFByb3BzPXt7XG4gICAgICAgICAgICBhbGlnbm1lbnQ6ICdyaWdodC1jZW50ZXInLFxuICAgICAgICAgICAgbmFycm93OiBmYWxzZSxcbiAgICAgICAgICAgIHBsYWNlbWVudDogJ2Zsb2F0aW5nJyxcbiAgICAgICAgICB9fVxuICAgICAgICAgIGFyaWEtbGFiZWw9XCJCYWNrIHRvIG1haW4gbmF2aWdhdGlvblwiXG4gICAgICAgIC8+XG4gICAgICA8L0JveD5cbiAgICAgIDxCb3ggZGlzcGxheT17eyBfOiAnZmxleCcsIHhzOiAnbm9uZScgfX0+XG4gICAgICAgIDxTbWFsbE1lbnVCdXR0b24gaW5kZXg9ezB9IG9uQ2xpY2s9e2hhbmRsZUJhY2tCdXR0b25DbGlja30+XG4gICAgICAgICAgPEZsZXhCb3ggZ2FwPXs4fSBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+XG4gICAgICAgICAgICA8Qm94IGhlaWdodD17MjR9IHdpZHRoPXsyNH0+XG4gICAgICAgICAgICAgIDxBcnJvd0xlZnRJY29uIHNpemU9ezI0fSAvPlxuICAgICAgICAgICAgPC9Cb3g+XG4gICAgICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1sYXJnZVwiPkJhY2s8L1RleHQ+XG4gICAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8L1NtYWxsTWVudUJ1dHRvbj5cbiAgICAgIDwvQm94PlxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */"));
+}) => theme.colors['navy-100'], ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbi9Nb2JpbGVCYWNrQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRK0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJTZWN0aW9uL01vYmlsZUJhY2tCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94LCBJY29uQnV0dG9uLCBUZXh0IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dMZWZ0SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IHVzZUdsb2JhbEhlYWRlckl0ZW1DbGljayB9IGZyb20gJy4uLy4uLy4uL0dsb2JhbEhlYWRlci9jb250ZXh0JztcbmltcG9ydCB7IE5hdmlnYXRpb25CdXR0b24sIFNtYWxsTWVudUJ1dHRvbiB9IGZyb20gJy4vZWxlbWVudHMnO1xuXG5leHBvcnQgY29uc3QgTmF2SWNvbkJ1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uKWBcbiAgJjpob3ZlcixcbiAgJjpmb2N1cyBzdmcge1xuICAgICY6aG92ZXIsXG4gICAgJjpmb2N1cyB7XG4gICAgICBjb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9yc1snbmF2eS0xMDAnXX07XG4gICAgfVxuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBNb2JpbGVCYWNrQnV0dG9uUHJvcHMgPSB7XG4gIGhhbmRsZUNsb3NlOiAoKSA9PiB2b2lkO1xuICB0eXBlOiAnY2F0YWxvZy1kcm9wZG93bicgfCAncmVzb3VyY2VzLWRyb3Bkb3duJztcbn07XG5cbmV4cG9ydCBjb25zdCBNb2JpbGVCYWNrQnV0dG9uOiBSZWFjdC5GQzxNb2JpbGVCYWNrQnV0dG9uUHJvcHM+ID0gKHtcbiAgaGFuZGxlQ2xvc2UsXG4gIHR5cGUsXG59KSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICBjb25zdCBoYW5kbGVCYWNrQnV0dG9uQ2xpY2sgPSAoXG4gICAgZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+XG4gICkgPT4ge1xuICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwge1xuICAgICAgaWQ6ICdiYWNrJyxcbiAgICAgIHRleHQ6ICdCYWNrJyxcbiAgICAgIHR5cGUsXG4gICAgfSk7XG4gICAgaGFuZGxlQ2xvc2UoKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8Qm94IGRpc3BsYXk9e3sgXzogJ25vbmUnLCBzbTogJ2Jsb2NrJyB9fT5cbiAgICAgICAgPE5hdmlnYXRpb25CdXR0b25cbiAgICAgICAgICBpc0FjdGl2ZT17ZmFsc2V9XG4gICAgICAgICAgaW5kZXg9ezB9XG4gICAgICAgICAgb25DbGljaz17aGFuZGxlQmFja0J1dHRvbkNsaWNrfVxuICAgICAgICAgIGRhdGEtdGVzdGlkPVwibW9iaWxlLWJhY2stYnV0dG9uXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxGbGV4Qm94IGdhcD17OH0gYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgPEJveCBoZWlnaHQ9ezI0fSB3aWR0aD17MjR9PlxuICAgICAgICAgICAgICA8QXJyb3dMZWZ0SWNvbiBzaXplPXsyNH0gLz5cbiAgICAgICAgICAgIDwvQm94PlxuICAgICAgICAgICAgPFRleHQ+QmFjazwvVGV4dD5cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvTmF2aWdhdGlvbkJ1dHRvbj5cbiAgICAgIDwvQm94PlxuICAgICAgPEJveFxuICAgICAgICBkaXNwbGF5PXt7IF86ICdub25lJywgeHM6ICdncmlkJywgc206ICdub25lJyB9fVxuICAgICAgICBtbD17OH1cbiAgICAgICAgZ3JpZENvbHVtbj1cIjFcIlxuICAgICAgICBncmlkUm93PVwiMVwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwibW9iaWxlLWJhY2staWNvbi1idXR0b25cIlxuICAgICAgPlxuICAgICAgICA8TmF2SWNvbkJ1dHRvblxuICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZUJhY2tCdXR0b25DbGlja31cbiAgICAgICAgICBpY29uPXtBcnJvd0xlZnRJY29ufVxuICAgICAgICAgIHRpcD1cIkJhY2sgdG8gbWFpbiBuYXZpZ2F0aW9uXCJcbiAgICAgICAgICB0aXBQcm9wcz17e1xuICAgICAgICAgICAgYWxpZ25tZW50OiAncmlnaHQtY2VudGVyJyxcbiAgICAgICAgICAgIG5hcnJvdzogZmFsc2UsXG4gICAgICAgICAgICBwbGFjZW1lbnQ6ICdmbG9hdGluZycsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWxhYmVsPVwiQmFjayB0byBtYWluIG5hdmlnYXRpb25cIlxuICAgICAgICAvPlxuICAgICAgPC9Cb3g+XG4gICAgICA8Qm94IGRpc3BsYXk9e3sgXzogJ2ZsZXgnLCB4czogJ25vbmUnIH19PlxuICAgICAgICA8U21hbGxNZW51QnV0dG9uIGluZGV4PXswfSBvbkNsaWNrPXtoYW5kbGVCYWNrQnV0dG9uQ2xpY2t9PlxuICAgICAgICAgIDxGbGV4Qm94IGdhcD17OH0gYWxpZ25JdGVtcz1cImNlbnRlclwiPlxuICAgICAgICAgICAgPEJveCBoZWlnaHQ9ezI0fSB3aWR0aD17MjR9PlxuICAgICAgICAgICAgICA8QXJyb3dMZWZ0SWNvbiBzaXplPXsyNH0gLz5cbiAgICAgICAgICAgIDwvQm94PlxuICAgICAgICAgICAgPFRleHQ+QmFjazwvVGV4dD5cbiAgICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICAgIDwvU21hbGxNZW51QnV0dG9uPlxuICAgICAgPC9Cb3g+XG4gICAgPC8+XG4gICk7XG59O1xuIl19 */"));
 export const MobileBackButton = ({
   handleClose,
   type
@@ -39,6 +38,7 @@ export const MobileBackButton = ({
         isActive: false,
         index: 0,
         onClick: handleBackButtonClick,
+        "data-testid": "mobile-back-button",
         children: /*#__PURE__*/_jsxs(FlexBox, {
           gap: 8,
           alignItems: "center",
@@ -49,7 +49,6 @@ export const MobileBackButton = ({
               size: 24
             })
           }), /*#__PURE__*/_jsx(Text, {
-            variant: "p-large",
             children: "Back"
           })]
         })
@@ -63,6 +62,7 @@ export const MobileBackButton = ({
       ml: 8,
       gridColumn: "1",
       gridRow: "1",
+      "data-testid": "mobile-back-icon-button",
       children: /*#__PURE__*/_jsx(NavIconButton, {
         onClick: handleBackButtonClick,
         icon: ArrowLeftIcon,
@@ -92,7 +92,6 @@ export const MobileBackButton = ({
               size: 24
             })
           }), /*#__PURE__*/_jsx(Text, {
-            variant: "p-large",
             children: "Back"
           })]
         })

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
+import { TabSectionConfig } from '.';
 export type MobileNavMenuProps = {
     handleClose: () => void;
     type: 'catalog-dropdown' | 'resources-dropdown';
-    navSections: {
-        item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-        panel: React.ComponentType;
-    }[];
+    tabSections: TabSectionConfig[];
 };
 export declare const MobileNavMenu: React.FC<MobileNavMenuProps>;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/MobileNavMenu.js

@@ -9,13 +9,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 export const MobileNavMenu = ({
   handleClose,
   type,
-  navSections
+  tabSections
 }) => {
   const {
     activePanel,
     setActivePanel
   } = useAppHeaderSectionContext();
-  const ActivePanel = navSections[activePanel ?? 0].panel;
+  if (tabSections.length === 0) {
+    return null;
+  }
+  const ActivePanel = tabSections[activePanel ?? 0].panel;
   return /*#__PURE__*/_jsxs(FlexBox, {
     display: {
       _: 'flex',
@@ -28,7 +31,7 @@ export const MobileNavMenu = ({
       children: [/*#__PURE__*/_jsx(MobileBackButton, {
         handleClose: handleClose,
         type: type
-      }), navSections.map(({
+      }), tabSections.map(({
         item
       }, index) => {
         return /*#__PURE__*/_jsxs(SmallMenuButton, {
@@ -44,10 +47,9 @@ export const MobileNavMenu = ({
                 size: 24
               })
             }), /*#__PURE__*/_jsx(Text, {
-              variant: "p-large",
               children: item.text
             })]
-          }), /*#__PURE__*/_jsx(Box, {
+          }), /*#__PURE__*/_jsx(FlexBox, {
             children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {})
           })]
         }, item.id);

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/consts.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const syntheticMouseEvent: React.MouseEvent<Element, MouseEvent>;

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/consts.js

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+export const syntheticMouseEvent = {
+  type: 'click',
+  target: null,
+  currentTarget: null,
+  bubbles: true,
+  cancelable: true,
+  defaultPrevented: false,
+  eventPhase: 2,
+  isTrusted: true,
+  nativeEvent: null,
+  preventDefault: () => {},
+  isDefaultPrevented: () => false,
+  stopPropagation: () => {},
+  isPropagationStopped: () => false,
+  persist: () => {},
+  timeStamp: Date.now(),
+  altKey: false,
+  button: 0,
+  buttons: 0,
+  clientX: 0,
+  clientY: 0,
+  ctrlKey: false,
+  getModifierState: () => false,
+  metaKey: false,
+  movementX: 0,
+  movementY: 0,
+  pageX: 0,
+  pageY: 0,
+  relatedTarget: null,
+  screenX: 0,
+  screenY: 0,
+  shiftKey: false,
+  x: 0,
+  y: 0
+};

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/elements.d.ts

@@ -6,6 +6,12 @@ export declare const StyledSection: import("@emotion/styled").StyledComponent<{
 } & {
     activePanelSelected: boolean;
 }, {}, {}>;
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("react-aria-components").TabsProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledTabList: import("@emotion/styled").StyledComponent<import("react-aria-components").TabListProps<object> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
 export declare const StyledGridBox: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -24,3 +30,34 @@ export declare const SmallMenuButton: import("@emotion/styled").StyledComponent<
 } & {
     index: number;
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const OverflowText: import("@emotion/styled").StyledComponent<((Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").TextTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref"> | Omit<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").TextNoTruncateProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLSpanElement>>, "ref">) & import("react").RefAttributes<HTMLSpanElement>) & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const NavTabPanelContainer: import("@emotion/styled").StyledComponent<import("react-aria-components").TabPanelProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    isActive: boolean;
+    isFirst: boolean;
+}, {}, {}>;
+export declare const NavigationButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    isActive: boolean;
+    index: number;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const NavIconButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    isActive: boolean;
+    index: number;
+}, {}, {}>;