'use client';
import * as React from 'react';
import { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';
import { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';
import { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
 * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`
 * hooks.
 *
 * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.
 */ export const TeachingPopoverCarouselNav = /*#__PURE__*/ React.forwardRef((props, ref)=>{
    const state = useTeachingPopoverCarouselNav_unstable(props, ref);
    useTeachingPopoverCarouselNavStyles_unstable(state);
    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavStyles_unstable')(state);
    return renderTeachingPopoverCarouselNav_unstable(state);
});
TeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';