'use client';
import * as React from 'react';
import { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';
import { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';
import { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
 * TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel
 *
 * It's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)
 */ export const TeachingPopoverCarouselNavButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
    const state = useTeachingPopoverCarouselNavButton_unstable(props, ref);
    useTeachingPopoverCarouselNavButtonStyles_unstable(state);
    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavButtonStyles_unstable')(state);
    return renderTeachingPopoverCarouselNavButton_unstable(state);
});
TeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';