import React, { useContext, useMemo } from 'react';
import { SidebarNextContext } from '../SidebarNext/SidebarNextContext';
import { st, classes } from './SidebarItemNext.st.css.js';
import SidebarItemButtonNext from './SidebarItemButtonNext';
import { dataHooks } from './constants';
/** An item for the section within the sidebar */
const SidebarItemNext = ({ as = 'button', role = 'link', ...propsWithNoDefaults }) => {
    const { dataHook, onMouseEnter, onMouseLeave, ...rest } = {
        as,
        role,
        ...propsWithNoDefaults,
    };
    const context = useContext(SidebarNextContext);
    return (React.createElement("li", { className: classes.listItem, "aria-level": context.level, "data-hook": dataHook, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
        React.createElement(SidebarItemButtonNext, { ...rest, dataHook: dataHooks.button })));
};
SidebarItemNext.displayName = 'SidebarItemNext';
export default SidebarItemNext;
//# sourceMappingURL=SidebarItemNext.js.map