@fluentui/react-teaching-popover 9.2.4 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-teaching-popover
 
-This log was last generated on Fri, 07 Feb 2025 10:40:53 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Mar 2025 18:54:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.4.0)
+
+Tue, 11 Mar 2025 18:54:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.3.0..@fluentui/react-teaching-popover_v9.4.0)
+
+### Minor changes
+
+- feat: Adds custom style hooks to TeachingPopoverCarousel and related subcomponents. ([PR #33943](https://github.com/microsoft/fluentui/pull/33943) by matejera@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-popover to v9.10.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-button to v9.4.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-aria to v9.14.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.73 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.3.0)
+
+Fri, 21 Feb 2025 14:34:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.2.4..@fluentui/react-teaching-popover_v9.3.0)
+
+### Minor changes
+
+- Bump @fluentui/react-popover to v9.10.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-button to v9.4.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+- Bump @fluentui/react-aria to v9.14.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
+
+### Patches
+
+- fix: TeachingPopoverCarousel fires announce() messages on slide change ([PR #33833](https://github.com/microsoft/fluentui/pull/33833) by sarah.higley@microsoft.com)
+
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.2.4)
 
-Fri, 07 Feb 2025 10:40:53 GMT 
+Fri, 07 Feb 2025 10:42:12 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.2.3..@fluentui/react-teaching-popover_v9.2.4)
 
 ### Patches

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { ButtonState } from '@fluentui/react-button';
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import { EventData } from '@fluentui/react-utilities';
-import type { EventHandler } from '@fluentui/react-utilities';
+import { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
 import { PopoverContextValue } from '@fluentui/react-popover';
@@ -383,24 +383,7 @@ export declare type TeachingPopoverCarouselPageCountState = ComponentState<Teach
 /**
  * TeachingPopoverCarousel Props
  */
-export declare type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & {
-    /**
-     * The initial page to display in uncontrolled mode.
-     */
-    defaultValue?: string;
-    /**
-     * The value of the currently active page.
-     */
-    value?: string;
-    /**
-     * Callback to notify a page change.
-     */
-    onValueChange?: EventHandler<CarouselValueChangeData>;
-    /**
-     * Callback to notify when the final button step of a carousel has been activated.
-     */
-    onFinish?: EventHandler<CarouselValueChangeData>;
-};
+export declare type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;
 
 export declare type TeachingPopoverCarouselSlots = {
     /**
@@ -570,6 +553,30 @@ export declare type TeachingPopoverTriggerProps = PopoverTriggerProps;
  */
 export declare type TeachingPopoverTriggerState = PopoverTriggerState;
 
+declare type UseCarouselOptions = {
+    /**
+     * Localizes the string used to announce carousel page changes to screen reader users
+     * Defaults to: undefined
+     */
+    announcement?: (newValue: string) => string;
+    /**
+     * The initial page to display in uncontrolled mode.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the currently active page.
+     */
+    value?: string;
+    /**
+     * Callback to notify a page change.
+     */
+    onValueChange?: EventHandler<CarouselValueChangeData>;
+    /**
+     * Callback to notify when the final button step of a carousel has been activated.
+     */
+    onFinish?: EventHandler<CarouselValueChangeData>;
+};
+
 export declare const useTeachingPopover_unstable: (props: TeachingPopoverProps) => TeachingPopoverState;
 
 /**

package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { CAROUSEL_ITEM } from './constants';
 import { useCarouselWalker_unstable } from './useCarouselWalker';
 import { createCarouselStore } from './createCarouselStore';
@@ -8,7 +8,7 @@ import { createCarouselStore } from './createCarouselStore';
 // For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
 export function useCarousel_unstable(options) {
     'use no memo';
-    const { onValueChange, onFinish } = options;
+    const { announcement, onValueChange, onFinish } = options;
     const { targetDocument } = useFluent();
     const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();
@@ -19,6 +19,7 @@ export function useCarousel_unstable(options) {
         initialState: null
     });
     const rootRef = React.useRef(null);
+    const { announce } = useAnnounce();
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useEffect(()=>{
@@ -90,6 +91,20 @@ export function useCarousel_unstable(options) {
         store,
         win
     ]);
+    const updateSlide = useEventCallback((event, newValue)=>{
+        setValue(newValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
+            event,
+            type: 'click',
+            value: newValue
+        });
+        const announceText = announcement === null || announcement === void 0 ? void 0 : announcement(newValue);
+        if (announceText) {
+            announce(announceText, {
+                polite: true
+            });
+        }
+    });
     const selectPageByDirection = useEventCallback((event, direction)=>{
         const active = carouselWalker.active();
         if (!(active === null || active === void 0 ? void 0 : active.value)) {
@@ -97,12 +112,7 @@ export function useCarousel_unstable(options) {
         }
         const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);
         if (newPage) {
-            setValue(newPage === null || newPage === void 0 ? void 0 : newPage.value);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
-                event,
-                type: 'click',
-                value: newPage === null || newPage === void 0 ? void 0 : newPage.value
-            });
+            updateSlide(event, newPage === null || newPage === void 0 ? void 0 : newPage.value);
         } else {
             onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
                 event,
@@ -111,21 +121,13 @@ export function useCarousel_unstable(options) {
             });
         }
     });
-    const selectPageByValue = useEventCallback((event, _value)=>{
-        setValue(_value);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
-            event,
-            type: 'click',
-            value: _value
-        });
-    });
     return {
         carouselRef: useMergedRefs(rootRef, carouselRef),
         carousel: {
             store,
             value,
             selectPageByDirection,
-            selectPageByValue
+            selectPageByValue: updateSlide
         }
     };
 }

package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  isHTMLElement,\n  useMergedRefs,\n  useControllableState,\n  type EventHandler,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { CarouselValueChangeData } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\nexport type UseCarouselOptions = {\n  defaultValue?: string;\n  value?: string;\n\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n  'use no memo';\n\n  const { onValueChange, onFinish } = options;\n\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n  const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n  const [store] = React.useState(() => createCarouselStore());\n\n  const [value, setValue] = useControllableState({\n    defaultState: options.defaultValue,\n    state: options.value,\n    initialState: null,\n  });\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (value === null) {\n        // eslint-disable-next-line no-console\n        console.error(\n          'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n        );\n      }\n    }, [value]);\n  }\n\n  React.useEffect(() => {\n    const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n    for (let i = 0; i < allItems.length; i++) {\n      store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n    }\n\n    return () => {\n      store.clear();\n    };\n  }, [store]);\n\n  React.useEffect(() => {\n    if (!win) {\n      return;\n    }\n\n    const config: MutationObserverInit = {\n      attributes: true,\n      attributeFilter: [CAROUSEL_ITEM],\n      childList: true,\n      subtree: true,\n    };\n\n    // Callback function to execute when mutations are observed\n    const callback: MutationCallback = mutationList => {\n      for (const mutation of mutationList) {\n        for (const addedNode of Array.from(mutation.addedNodes)) {\n          if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n            const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n            const newNode = carouselWalker.find(newValue);\n            if (!newNode?.value) {\n              return;\n            }\n\n            const previousNode = carouselWalker.prevPage(newNode?.value);\n            store.insertValue(newValue, previousNode?.value ?? null);\n          }\n        }\n\n        for (const removedNode of Array.from(mutation.removedNodes)) {\n          if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n            const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n            store.removeValue(removedValue);\n          }\n        }\n      }\n    };\n\n    // Create an observer instance linked to the callback function\n    const observer = new win.MutationObserver(callback);\n\n    // Start observing the target node for configured mutations\n    observer.observe(rootRef.current!, config);\n\n    // Later, you can stop observing\n    return () => {\n      observer.disconnect();\n    };\n  }, [carouselWalker, store, win]);\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const active = carouselWalker.active();\n\n    if (!active?.value) {\n      return;\n    }\n\n    const newPage =\n      direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n    if (newPage) {\n      setValue(newPage?.value);\n      onValueChange?.(event, { event, type: 'click', value: newPage?.value });\n    } else {\n      onFinish?.(event, { event, type: 'click', value: active?.value });\n    }\n  });\n\n  const selectPageByValue: CarouselContextValue['selectPageByValue'] = useEventCallback((event, _value) => {\n    setValue(_value);\n    onValueChange?.(event, { event, type: 'click', value: _value });\n  });\n\n  return {\n    carouselRef: useMergedRefs(rootRef, carouselRef),\n    carousel: {\n      store,\n      value,\n      selectPageByDirection,\n      selectPageByValue,\n    },\n  };\n}\n"],"names":["React","isHTMLElement","useMergedRefs","useControllableState","useEventCallback","useFluent_unstable","useFluent","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","onValueChange","onFinish","targetDocument","win","defaultView","ref","carouselRef","walker","carouselWalker","store","useState","value","setValue","defaultState","defaultValue","state","initialState","rootRef","useRef","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","selectPageByDirection","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","carousel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { UseCarouselOptions } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n  'use no memo';\n\n  const { announcement, onValueChange, onFinish } = options;\n\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n  const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n  const [store] = React.useState(() => createCarouselStore());\n\n  const [value, setValue] = useControllableState({\n    defaultState: options.defaultValue,\n    state: options.value,\n    initialState: null,\n  });\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const { announce } = useAnnounce();\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (value === null) {\n        // eslint-disable-next-line no-console\n        console.error(\n          'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n        );\n      }\n    }, [value]);\n  }\n\n  React.useEffect(() => {\n    const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n    for (let i = 0; i < allItems.length; i++) {\n      store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n    }\n\n    return () => {\n      store.clear();\n    };\n  }, [store]);\n\n  React.useEffect(() => {\n    if (!win) {\n      return;\n    }\n\n    const config: MutationObserverInit = {\n      attributes: true,\n      attributeFilter: [CAROUSEL_ITEM],\n      childList: true,\n      subtree: true,\n    };\n\n    // Callback function to execute when mutations are observed\n    const callback: MutationCallback = mutationList => {\n      for (const mutation of mutationList) {\n        for (const addedNode of Array.from(mutation.addedNodes)) {\n          if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n            const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n            const newNode = carouselWalker.find(newValue);\n            if (!newNode?.value) {\n              return;\n            }\n\n            const previousNode = carouselWalker.prevPage(newNode?.value);\n            store.insertValue(newValue, previousNode?.value ?? null);\n          }\n        }\n\n        for (const removedNode of Array.from(mutation.removedNodes)) {\n          if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n            const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n            store.removeValue(removedValue);\n          }\n        }\n      }\n    };\n\n    // Create an observer instance linked to the callback function\n    const observer = new win.MutationObserver(callback);\n\n    // Start observing the target node for configured mutations\n    observer.observe(rootRef.current!, config);\n\n    // Later, you can stop observing\n    return () => {\n      observer.disconnect();\n    };\n  }, [carouselWalker, store, win]);\n\n  const updateSlide = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, newValue: string) => {\n      setValue(newValue);\n      onValueChange?.(event, { event, type: 'click', value: newValue });\n\n      const announceText = announcement?.(newValue);\n      if (announceText) {\n        announce(announceText, { polite: true });\n      }\n    },\n  );\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const active = carouselWalker.active();\n\n    if (!active?.value) {\n      return;\n    }\n\n    const newPage =\n      direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n    if (newPage) {\n      updateSlide(event, newPage?.value);\n    } else {\n      onFinish?.(event, { event, type: 'click', value: active?.value });\n    }\n  });\n\n  return {\n    carouselRef: useMergedRefs(rootRef, carouselRef),\n    carousel: {\n      store,\n      value,\n      selectPageByDirection,\n      selectPageByValue: updateSlide,\n    },\n  };\n}\n"],"names":["React","isHTMLElement","useMergedRefs","useControllableState","useEventCallback","useAnnounce","useFluent_unstable","useFluent","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","announcement","onValueChange","onFinish","targetDocument","win","defaultView","ref","carouselRef","walker","carouselWalker","store","useState","value","setValue","defaultState","defaultValue","state","initialState","rootRef","useRef","announce","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","updateSlide","event","type","announceText","polite","selectPageByDirection","direction","active","newPage","nextPage","carousel","selectPageByValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/TeachingPopoverCarousel/Carousel/Carousel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n  clear: () => void;\n  addValue: (value: string) => void;\n  insertValue: (value: string, prev: string | null) => void;\n  removeValue: (value: string) => void;\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n  el: HTMLElement;\n  value: string | null;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value to be set after event has occurred.\n   */\n  value?: string;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n  clear: () => void;\n  addValue: (value: string) => void;\n  insertValue: (value: string, prev: string | null) => void;\n  removeValue: (value: string) => void;\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n  el: HTMLElement;\n  value: string | null;\n};\n\nexport type UseCarouselOptions = {\n  /**\n   * Localizes the string used to announce carousel page changes to screen reader users\n   * Defaults to: undefined\n   */\n  announcement?: (newValue: string) => string;\n\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultValue?: string;\n\n  /**\n   * The value of the currently active page.\n   */\n  value?: string;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n\n  /**\n   * Callback to notify when the final button step of a carousel has been activated.\n   */\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value to be set after event has occurred.\n   */\n  value?: string;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { CarouselValueChangeData } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & {\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultValue?: string;\n\n  /**\n   * The value of the currently active page.\n   */\n  value?: string;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n\n  /**\n   * Callback to notify when the final button step of a carousel has been activated.\n   */\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n  Partial<Pick<PopoverContextValue, 'appearance'>> &\n  CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AA6CA;;CAEC,GACD,WAEE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { UseCarouselOptions } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n  Partial<Pick<PopoverContextValue, 'appearance'>> &\n  CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC,GACD,WAEE"}

package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js

@@ -10,6 +10,7 @@ export const useTeachingPopoverCarousel_unstable = (props, ref)=>{
         toggleOpen(event);
     });
     const { carousel, carouselRef } = useCarousel_unstable({
+        announcement: props.announcement,
         defaultValue: props.defaultValue,
         value: props.value,
         onValueChange: props.onValueChange,

package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable, type UseCarouselOptions } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n  props: TeachingPopoverCarouselProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n  const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n  const handleFinish: UseCarouselOptions['onFinish'] = useEventCallback((event, data) => {\n    props.onFinish?.(event, data);\n    toggleOpen(event as React.MouseEvent<HTMLElement>);\n  });\n\n  const { carousel, carouselRef } = useCarousel_unstable({\n    defaultValue: props.defaultValue,\n    value: props.value,\n    onValueChange: props.onValueChange,\n    onFinish: handleFinish,\n  });\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  return {\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, carouselRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    ...carousel,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","usePopoverContext_unstable","useCarousel_unstable","useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","c","handleFinish","event","data","onFinish","carousel","carouselRef","defaultValue","value","onValueChange","appearance","context","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5G,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAiC,sBAAsB;AAEpF,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaL,2BAA2BM,CAAAA,IAAKA,EAAED,UAAU;IAC/D,MAAME,eAA+CT,iBAAiB,CAACU,OAAOC;YAC5EN;SAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,sCAAAA,qBAAAA,OAAiBK,OAAOC;QACxBJ,WAAWG;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGX,qBAAqB;QACrDY,cAAcV,MAAMU,YAAY;QAChCC,OAAOX,MAAMW,KAAK;QAClBC,eAAeZ,MAAMY,aAAa;QAClCL,UAAUH;IACZ;IAEA,MAAMS,aAAahB,2BAA2BiB,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtB,KAAKuB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKQ;YACxB,GAAGT,KAAK;QACV,IACA;YAAEkB,aAAa;QAAM;QAEvB,GAAGV,QAAQ;IACb;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n  props: TeachingPopoverCarouselProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n  const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n  const handleFinish: TeachingPopoverCarouselProps['onFinish'] = useEventCallback((event, data) => {\n    props.onFinish?.(event, data);\n    toggleOpen(event as React.MouseEvent<HTMLElement>);\n  });\n\n  const { carousel, carouselRef } = useCarousel_unstable({\n    announcement: props.announcement,\n    defaultValue: props.defaultValue,\n    value: props.value,\n    onValueChange: props.onValueChange,\n    onFinish: handleFinish,\n  });\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  return {\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, carouselRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    ...carousel,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","usePopoverContext_unstable","useCarousel_unstable","useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","c","handleFinish","event","data","onFinish","carousel","carouselRef","announcement","defaultValue","value","onValueChange","appearance","context","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5G,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,sBAAsB;AAE3D,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaL,2BAA2BM,CAAAA,IAAKA,EAAED,UAAU;IAC/D,MAAME,eAAyDT,iBAAiB,CAACU,OAAOC;YACtFN;SAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,sCAAAA,qBAAAA,OAAiBK,OAAOC;QACxBJ,WAAWG;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGX,qBAAqB;QACrDY,cAAcV,MAAMU,YAAY;QAChCC,cAAcX,MAAMW,YAAY;QAChCC,OAAOZ,MAAMY,KAAK;QAClBC,eAAeb,MAAMa,aAAa;QAClCN,UAAUH;IACZ;IAEA,MAAMU,aAAajB,2BAA2BkB,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACfzB,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKQ;YACxB,GAAGT,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvB,GAAGX,QAAQ;IACb;AACF,EAAE"}

package/lib/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';
 import { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';
 import { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`
  * hooks.
@@ -10,6 +11,7 @@ import { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopo
  */ export const TeachingPopoverCarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTeachingPopoverCarouselCard_unstable(props, ref);
     useTeachingPopoverCarouselCardStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);
     return renderTeachingPopoverCarouselCard_unstable(state);
 });
 TeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';

package/lib/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n    useTeachingPopoverCarouselCardStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselCard_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["React","useTeachingPopoverCarouselCard_unstable","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","TeachingPopoverCarouselCard","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,0CAA0C,QAAQ,sCAAsC;AAGjG,SAASC,6CAA6C,QAAQ,gDAAgD;AAE9G;;;;;CAKC,GACD,OAAO,MAAMC,4CAAqFJ,MAAMK,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQP,wCAAwCK,OAAOC;IAE7DJ,8CAA8CK;IAE9C,OAAON,2CAA2CM;AACpD,GACA;AAEFJ,4BAA4BK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n    useTeachingPopoverCarouselCardStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselCard_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["React","useTeachingPopoverCarouselCard_unstable","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselCard","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,0CAA0C,QAAQ,sCAAsC;AAGjG,SAASC,6CAA6C,QAAQ,gDAAgD;AAC9G,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4CAAqFL,MAAMM,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQR,wCAAwCM,OAAOC;IAE7DL,8CAA8CM;IAE9CL,4BAA4B,iDAAiDK;IAE7E,OAAOP,2CAA2CO;AACpD,GACA;AAEFJ,4BAA4BK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';
 import { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';
 import { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`
  * hooks.
@@ -10,6 +11,7 @@ import { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPo
  */ export const TeachingPopoverCarouselFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTeachingPopoverCarouselFooter_unstable(props, ref);
     useTeachingPopoverCarouselFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);
     return renderTeachingPopoverCarouselFooter_unstable(state);
 });
 TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';

package/lib/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselFooter_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["React","useTeachingPopoverCarouselFooter_unstable","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","TeachingPopoverCarouselFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,kDAAkD;AAIlH;;;;;CAKC,GACD,OAAO,MAAMC,8CAAyFJ,MAAMK,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,QAAQP,0CAA0CK,OAAOC;IAE/DJ,gDAAgDK;IAEhD,OAAON,6CAA6CM;AACtD,GACA;AAEFJ,8BAA8BK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooter_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["React","useTeachingPopoverCarouselFooter_unstable","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,kDAAkD;AAGlH,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,8CAAyFL,MAAMM,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,QAAQR,0CAA0CM,OAAOC;IAE/DL,gDAAgDM;IAEhDL,4BAA4B,mDAAmDK;IAE/E,OAAOP,6CAA6CO;AACtD,GACA;AAEFJ,8BAA8BK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';
 import { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';
 import { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TeachingPopoverCarouselFooterButton component
  *
@@ -10,6 +11,7 @@ import { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeac
  */ export const TeachingPopoverCarouselFooterButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);
     useTeachingPopoverCarouselFooterButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);
     return renderTeachingPopoverCarouselFooterButton_unstable(state);
 });
 TeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';

package/lib/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselFooterButton_unstable(state);\n  });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["React","useTeachingPopoverCarouselFooterButton_unstable","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","TeachingPopoverCarouselFooterButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,8CAA8C;AACjH,SAASC,qDAAqD,QAAQ,wDAAwD;AAG9H;;;;;CAKC,GACD,OAAO,MAAMC,oDACXJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQP,gDAAgDK,OAAOC;IAErEJ,sDAAsDK;IAEtD,OAAON,mDAAmDM;AAC5D,GAAG;AAELJ,oCAAoCK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooterButton_unstable(state);\n  });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["React","useTeachingPopoverCarouselFooterButton_unstable","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooterButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,8CAA8C;AACjH,SAASC,qDAAqD,QAAQ,wDAAwD;AAE9H,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,oDACXL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQR,gDAAgDM,OAAOC;IAErEL,sDAAsDM;IAEtDL,4BAA4B,yDAAyDK;IAErF,OAAOP,mDAAmDO;AAC5D,GAAG;AAELJ,oCAAoCK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js

@@ -2,6 +2,7 @@ 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.
@@ -10,6 +11,7 @@ import { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopov
  */ 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';

package/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nimport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nimport { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';\nimport type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.\n */\nexport const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselNav_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselNav_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';\n"],"names":["React","useTeachingPopoverCarouselNav_unstable","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavStyles_unstable","TeachingPopoverCarouselNav","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,4CAA4C,QAAQ,+CAA+C;AAI5G;;;;;CAKC,GACD,OAAO,MAAMC,2CAAmFJ,MAAMK,UAAU,CAC9G,CAACC,OAAOC;IACN,MAAMC,QAAQP,uCAAuCK,OAAOC;IAE5DJ,6CAA6CK;IAE7C,OAAON,0CAA0CM;AACnD,GACA;AAEFJ,2BAA2BK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nimport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nimport { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';\nimport type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.\n */\nexport const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselNav_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselNav_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';\n"],"names":["React","useTeachingPopoverCarouselNav_unstable","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselNav","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,4CAA4C,QAAQ,+CAA+C;AAG5G,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,2CAAmFL,MAAMM,UAAU,CAC9G,CAACC,OAAOC;IACN,MAAMC,QAAQR,uCAAuCM,OAAOC;IAE5DL,6CAA6CM;IAE7CL,4BAA4B,gDAAgDK;IAE5E,OAAOP,0CAA0CO;AACnD,GACA;AAEFJ,2BAA2BK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.js

@@ -2,6 +2,7 @@ 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
  *
@@ -9,6 +10,7 @@ import { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachin
  */ 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';

package/lib/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nimport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nimport { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';\nimport type { TeachingPopoverCarouselNavButtonProps } from './TeachingPopoverCarouselNavButton.types';\n\n/**\n * TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel\n *\n * It's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)\n */\nexport const TeachingPopoverCarouselNavButton: ForwardRefComponent<TeachingPopoverCarouselNavButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselNavButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavButtonStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselNavButton_unstable(state);\n  }) as ForwardRefComponent<TeachingPopoverCarouselNavButtonProps>;\n\nTeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';\n"],"names":["React","useTeachingPopoverCarouselNavButton_unstable","renderTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButtonStyles_unstable","TeachingPopoverCarouselNavButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAGxH;;;;CAIC,GACD,OAAO,MAAMC,iDACXJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQP,6CAA6CK,OAAOC;IAElEJ,mDAAmDK;IAEnD,OAAON,gDAAgDM;AACzD,GAAiE;AAEnEJ,iCAAiCK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nimport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nimport { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';\nimport type { TeachingPopoverCarouselNavButtonProps } from './TeachingPopoverCarouselNavButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel\n *\n * It's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)\n */\nexport const TeachingPopoverCarouselNavButton: ForwardRefComponent<TeachingPopoverCarouselNavButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselNavButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavButtonStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselNavButton_unstable(state);\n  }) as ForwardRefComponent<TeachingPopoverCarouselNavButtonProps>;\n\nTeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';\n"],"names":["React","useTeachingPopoverCarouselNavButton_unstable","renderTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselNavButton","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAExH,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,iDACXL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQR,6CAA6CM,OAAOC;IAElEL,mDAAmDM;IAEnDL,4BAA4B,sDAAsDK;IAElF,OAAOP,gDAAgDO;AACzD,GAAiE;AAEnEJ,iCAAiCK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';
 import { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';
 import { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count
  *
@@ -9,6 +10,7 @@ import { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachin
  */ export const TeachingPopoverCarouselPageCount = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);
     useTeachingPopoverCarouselPageCountStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselPageCountStyles_unstable')(state);
     return renderTeachingPopoverCarouselPageCount_unstable(state);
 });
 TeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["React","useTeachingPopoverCarouselPageCount_unstable","renderTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","TeachingPopoverCarouselPageCount","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAGxH;;;;CAIC,GACD,OAAO,MAAMC,iDACXJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQP,6CAA6CK,OAAOC;IAElEJ,mDAAmDK;IAEnD,OAAON,gDAAgDM;AACzD,GAAG;AAELJ,iCAAiCK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselPageCountStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["React","useTeachingPopoverCarouselPageCount_unstable","renderTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselPageCount","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAExH,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,iDACXL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQR,6CAA6CM,OAAOC;IAElEL,mDAAmDM;IAEnDL,4BAA4B,sDAAsDK;IAElF,OAAOP,gDAAgDO;AACzD,GAAG;AAELJ,iCAAiCK,WAAW,GAAG"}

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';
 import { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';
 import { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`
  * hooks.
@@ -13,6 +14,7 @@ import { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFoo
  */ export const TeachingPopoverFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useTeachingPopoverFooter_unstable(props, ref);
     useTeachingPopoverFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverFooterStyles_unstable')(state);
     return renderTeachingPopoverFooter_unstable(state);
 });
 TeachingPopoverFooter.displayName = 'TeachingPopoverFooter';

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverFooter/TeachingPopoverFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nimport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nimport { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';\nimport type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\n * and handle Popover functionality such as closing the popup.\n *\n * Users must provide the localized text for each button within the footer via slots.\n */\nexport const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverFooter_unstable(props, ref);\n\n  useTeachingPopoverFooterStyles_unstable(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["React","useTeachingPopoverFooter_unstable","renderTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","TeachingPopoverFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAIlG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAyEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQP,kCAAkCK,OAAOC;IAEvDJ,wCAAwCK;IAExC,OAAON,qCAAqCM;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/TeachingPopoverFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nimport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nimport { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';\nimport type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\n * and handle Popover functionality such as closing the popup.\n *\n * Users must provide the localized text for each button within the footer via slots.\n */\nexport const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverFooter_unstable(props, ref);\n\n  useTeachingPopoverFooterStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverFooterStyles_unstable')(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["React","useTeachingPopoverFooter_unstable","renderTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOP,qCAAqCO;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js

@@ -17,7 +17,7 @@ const _useCarouselWalker = require("./useCarouselWalker");
 const _createCarouselStore = require("./createCarouselStore");
 function useCarousel_unstable(options) {
     'use no memo';
-    const { onValueChange, onFinish } = options;
+    const { announcement, onValueChange, onFinish } = options;
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { ref: carouselRef, walker: carouselWalker } = (0, _useCarouselWalker.useCarouselWalker_unstable)();
@@ -28,6 +28,7 @@ function useCarousel_unstable(options) {
         initialState: null
     });
     const rootRef = _react.useRef(null);
+    const { announce } = (0, _reactsharedcontexts.useAnnounce)();
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         _react.useEffect(()=>{
@@ -99,6 +100,20 @@ function useCarousel_unstable(options) {
         store,
         win
     ]);
+    const updateSlide = (0, _reactutilities.useEventCallback)((event, newValue)=>{
+        setValue(newValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
+            event,
+            type: 'click',
+            value: newValue
+        });
+        const announceText = announcement === null || announcement === void 0 ? void 0 : announcement(newValue);
+        if (announceText) {
+            announce(announceText, {
+                polite: true
+            });
+        }
+    });
     const selectPageByDirection = (0, _reactutilities.useEventCallback)((event, direction)=>{
         const active = carouselWalker.active();
         if (!(active === null || active === void 0 ? void 0 : active.value)) {
@@ -106,12 +121,7 @@ function useCarousel_unstable(options) {
         }
         const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);
         if (newPage) {
-            setValue(newPage === null || newPage === void 0 ? void 0 : newPage.value);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
-                event,
-                type: 'click',
-                value: newPage === null || newPage === void 0 ? void 0 : newPage.value
-            });
+            updateSlide(event, newPage === null || newPage === void 0 ? void 0 : newPage.value);
         } else {
             onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
                 event,
@@ -120,21 +130,13 @@ function useCarousel_unstable(options) {
             });
         }
     });
-    const selectPageByValue = (0, _reactutilities.useEventCallback)((event, _value)=>{
-        setValue(_value);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
-            event,
-            type: 'click',
-            value: _value
-        });
-    });
     return {
         carouselRef: (0, _reactutilities.useMergedRefs)(rootRef, carouselRef),
         carousel: {
             store,
             value,
             selectPageByDirection,
-            selectPageByValue
+            selectPageByValue: updateSlide
         }
     };
 }

package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  isHTMLElement,\n  useMergedRefs,\n  useControllableState,\n  type EventHandler,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { CarouselValueChangeData } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\nexport type UseCarouselOptions = {\n  defaultValue?: string;\n  value?: string;\n\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n  'use no memo';\n\n  const { onValueChange, onFinish } = options;\n\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n  const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n  const [store] = React.useState(() => createCarouselStore());\n\n  const [value, setValue] = useControllableState({\n    defaultState: options.defaultValue,\n    state: options.value,\n    initialState: null,\n  });\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (value === null) {\n        // eslint-disable-next-line no-console\n        console.error(\n          'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n        );\n      }\n    }, [value]);\n  }\n\n  React.useEffect(() => {\n    const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n    for (let i = 0; i < allItems.length; i++) {\n      store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n    }\n\n    return () => {\n      store.clear();\n    };\n  }, [store]);\n\n  React.useEffect(() => {\n    if (!win) {\n      return;\n    }\n\n    const config: MutationObserverInit = {\n      attributes: true,\n      attributeFilter: [CAROUSEL_ITEM],\n      childList: true,\n      subtree: true,\n    };\n\n    // Callback function to execute when mutations are observed\n    const callback: MutationCallback = mutationList => {\n      for (const mutation of mutationList) {\n        for (const addedNode of Array.from(mutation.addedNodes)) {\n          if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n            const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n            const newNode = carouselWalker.find(newValue);\n            if (!newNode?.value) {\n              return;\n            }\n\n            const previousNode = carouselWalker.prevPage(newNode?.value);\n            store.insertValue(newValue, previousNode?.value ?? null);\n          }\n        }\n\n        for (const removedNode of Array.from(mutation.removedNodes)) {\n          if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n            const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n            store.removeValue(removedValue);\n          }\n        }\n      }\n    };\n\n    // Create an observer instance linked to the callback function\n    const observer = new win.MutationObserver(callback);\n\n    // Start observing the target node for configured mutations\n    observer.observe(rootRef.current!, config);\n\n    // Later, you can stop observing\n    return () => {\n      observer.disconnect();\n    };\n  }, [carouselWalker, store, win]);\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const active = carouselWalker.active();\n\n    if (!active?.value) {\n      return;\n    }\n\n    const newPage =\n      direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n    if (newPage) {\n      setValue(newPage?.value);\n      onValueChange?.(event, { event, type: 'click', value: newPage?.value });\n    } else {\n      onFinish?.(event, { event, type: 'click', value: active?.value });\n    }\n  });\n\n  const selectPageByValue: CarouselContextValue['selectPageByValue'] = useEventCallback((event, _value) => {\n    setValue(_value);\n    onValueChange?.(event, { event, type: 'click', value: _value });\n  });\n\n  return {\n    carouselRef: useMergedRefs(rootRef, carouselRef),\n    carousel: {\n      store,\n      value,\n      selectPageByDirection,\n      selectPageByValue,\n    },\n  };\n}\n"],"names":["useCarousel_unstable","options","onValueChange","onFinish","targetDocument","useFluent","win","defaultView","ref","carouselRef","walker","carouselWalker","useCarouselWalker_unstable","store","React","useState","createCarouselStore","value","setValue","useControllableState","defaultState","defaultValue","state","initialState","rootRef","useRef","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","CAROUSEL_ITEM","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","isHTMLElement","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","selectPageByDirection","useEventCallback","event","direction","active","newPage","nextPage","type","selectPageByValue","_value","useMergedRefs","carousel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { CAROUSEL_ITEM } from './constants';\nimport { useCarouselWalker_unstable } from './useCarouselWalker';\nimport { createCarouselStore } from './createCarouselStore';\nimport type { UseCarouselOptions } from './Carousel.types';\nimport { CarouselContextValue } from './CarouselContext';\n\n// TODO: Migrate this into an external @fluentui/carousel component\n// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.\nexport function useCarousel_unstable(options: UseCarouselOptions) {\n  'use no memo';\n\n  const { announcement, onValueChange, onFinish } = options;\n\n  const { targetDocument } = useFluent();\n  const win = targetDocument?.defaultView;\n  const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();\n  const [store] = React.useState(() => createCarouselStore());\n\n  const [value, setValue] = useControllableState({\n    defaultState: options.defaultValue,\n    state: options.value,\n    initialState: null,\n  });\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const { announce } = useAnnounce();\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (value === null) {\n        // eslint-disable-next-line no-console\n        console.error(\n          'useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.',\n        );\n      }\n    }, [value]);\n  }\n\n  React.useEffect(() => {\n    const allItems = rootRef.current?.querySelectorAll(`[${CAROUSEL_ITEM}]`)!;\n\n    for (let i = 0; i < allItems.length; i++) {\n      store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM)!);\n    }\n\n    return () => {\n      store.clear();\n    };\n  }, [store]);\n\n  React.useEffect(() => {\n    if (!win) {\n      return;\n    }\n\n    const config: MutationObserverInit = {\n      attributes: true,\n      attributeFilter: [CAROUSEL_ITEM],\n      childList: true,\n      subtree: true,\n    };\n\n    // Callback function to execute when mutations are observed\n    const callback: MutationCallback = mutationList => {\n      for (const mutation of mutationList) {\n        for (const addedNode of Array.from(mutation.addedNodes)) {\n          if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {\n            const newValue = addedNode.getAttribute(CAROUSEL_ITEM)!;\n            const newNode = carouselWalker.find(newValue);\n            if (!newNode?.value) {\n              return;\n            }\n\n            const previousNode = carouselWalker.prevPage(newNode?.value);\n            store.insertValue(newValue, previousNode?.value ?? null);\n          }\n        }\n\n        for (const removedNode of Array.from(mutation.removedNodes)) {\n          if (isHTMLElement(removedNode) && removedNode?.hasAttribute(CAROUSEL_ITEM)) {\n            const removedValue = removedNode.getAttribute(CAROUSEL_ITEM)!;\n\n            store.removeValue(removedValue);\n          }\n        }\n      }\n    };\n\n    // Create an observer instance linked to the callback function\n    const observer = new win.MutationObserver(callback);\n\n    // Start observing the target node for configured mutations\n    observer.observe(rootRef.current!, config);\n\n    // Later, you can stop observing\n    return () => {\n      observer.disconnect();\n    };\n  }, [carouselWalker, store, win]);\n\n  const updateSlide = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, newValue: string) => {\n      setValue(newValue);\n      onValueChange?.(event, { event, type: 'click', value: newValue });\n\n      const announceText = announcement?.(newValue);\n      if (announceText) {\n        announce(announceText, { polite: true });\n      }\n    },\n  );\n\n  const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n    const active = carouselWalker.active();\n\n    if (!active?.value) {\n      return;\n    }\n\n    const newPage =\n      direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);\n\n    if (newPage) {\n      updateSlide(event, newPage?.value);\n    } else {\n      onFinish?.(event, { event, type: 'click', value: active?.value });\n    }\n  });\n\n  return {\n    carouselRef: useMergedRefs(rootRef, carouselRef),\n    carousel: {\n      store,\n      value,\n      selectPageByDirection,\n      selectPageByValue: updateSlide,\n    },\n  };\n}\n"],"names":["useCarousel_unstable","options","announcement","onValueChange","onFinish","targetDocument","useFluent","win","defaultView","ref","carouselRef","walker","carouselWalker","useCarouselWalker_unstable","store","React","useState","createCarouselStore","value","setValue","useControllableState","defaultState","defaultValue","state","initialState","rootRef","useRef","announce","useAnnounce","process","env","NODE_ENV","useEffect","console","error","allItems","current","querySelectorAll","CAROUSEL_ITEM","i","length","addValue","item","getAttribute","clear","config","attributes","attributeFilter","childList","subtree","callback","mutationList","mutation","addedNode","Array","from","addedNodes","isHTMLElement","hasAttribute","newValue","newNode","find","previousNode","prevPage","insertValue","removedNode","removedNodes","removedValue","removeValue","observer","MutationObserver","observe","disconnect","updateSlide","useEventCallback","event","type","announceText","polite","selectPageByDirection","direction","active","newPage","nextPage","useMergedRefs","carousel","selectPageByValue"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/TeachingPopoverCarousel/Carousel/Carousel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n  clear: () => void;\n  addValue: (value: string) => void;\n  insertValue: (value: string, prev: string | null) => void;\n  removeValue: (value: string) => void;\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n  el: HTMLElement;\n  value: string | null;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value to be set after event has occurred.\n   */\n  value?: string;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n  clear: () => void;\n  addValue: (value: string) => void;\n  insertValue: (value: string, prev: string | null) => void;\n  removeValue: (value: string) => void;\n  subscribe: (listener: () => void) => () => void;\n  getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n  el: HTMLElement;\n  value: string | null;\n};\n\nexport type UseCarouselOptions = {\n  /**\n   * Localizes the string used to announce carousel page changes to screen reader users\n   * Defaults to: undefined\n   */\n  announcement?: (newValue: string) => string;\n\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultValue?: string;\n\n  /**\n   * The value of the currently active page.\n   */\n  value?: string;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n\n  /**\n   * Callback to notify when the final button step of a carousel has been activated.\n   */\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n  /**\n   * The value to be set after event has occurred.\n   */\n  value?: string;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { CarouselValueChangeData } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & {\n  /**\n   * The initial page to display in uncontrolled mode.\n   */\n  defaultValue?: string;\n\n  /**\n   * The value of the currently active page.\n   */\n  value?: string;\n\n  /**\n   * Callback to notify a page change.\n   */\n  onValueChange?: EventHandler<CarouselValueChangeData>;\n\n  /**\n   * Callback to notify when the final button step of a carousel has been activated.\n   */\n  onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n  Partial<Pick<PopoverContextValue, 'appearance'>> &\n  CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AA6CA;;CAEC"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { UseCarouselOptions } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n  Partial<Pick<PopoverContextValue, 'appearance'>> &\n  CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n  carousel: CarouselContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAyBA;;CAEC"}

package/lib-commonjs/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js

@@ -21,6 +21,7 @@ const useTeachingPopoverCarousel_unstable = (props, ref)=>{
         toggleOpen(event);
     });
     const { carousel, carouselRef } = (0, _Carousel.useCarousel_unstable)({
+        announcement: props.announcement,
         defaultValue: props.defaultValue,
         value: props.value,
         onValueChange: props.onValueChange,

package/lib-commonjs/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable, type UseCarouselOptions } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n  props: TeachingPopoverCarouselProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n  const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n  const handleFinish: UseCarouselOptions['onFinish'] = useEventCallback((event, data) => {\n    props.onFinish?.(event, data);\n    toggleOpen(event as React.MouseEvent<HTMLElement>);\n  });\n\n  const { carousel, carouselRef } = useCarousel_unstable({\n    defaultValue: props.defaultValue,\n    value: props.value,\n    onValueChange: props.onValueChange,\n    onFinish: handleFinish,\n  });\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  return {\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, carouselRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    ...carousel,\n  };\n};\n"],"names":["useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","usePopoverContext_unstable","c","handleFinish","useEventCallback","event","data","onFinish","carousel","carouselRef","useCarousel_unstable","defaultValue","value","onValueChange","appearance","context","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;gCACyD;8BAErC;0BACmB;AAEvD,MAAMA,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaC,IAAAA,wCAAAA,EAA2BC,CAAAA,IAAKA,EAAEF,UAAU;IAC/D,MAAMG,eAA+CC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;YAC5ER;QAAAA,CAAAA,kBAAAA,MAAMS,QAAQ,AAARA,MAAQ,QAAdT,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBO,OAAOC;QACxBN,WAAWK;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGC,IAAAA,8BAAAA,EAAqB;QACrDC,cAAcb,MAAMa,YAAY;QAChCC,OAAOd,MAAMc,KAAK;QAClBC,eAAef,MAAMe,aAAa;QAClCN,UAAUJ;IACZ;IAEA,MAAMW,aAAab,IAAAA,wCAAAA,EAA2Bc,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BrB,KAAKsB,IAAAA,6BAAAA,EAActB,KAAKU;YACxB,GAAGX,KAAK;QACV,IACA;YAAEwB,aAAa;QAAM;QAEvB,GAAGd,QAAQ;IACb;AACF"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n  props: TeachingPopoverCarouselProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n  const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n  const handleFinish: TeachingPopoverCarouselProps['onFinish'] = useEventCallback((event, data) => {\n    props.onFinish?.(event, data);\n    toggleOpen(event as React.MouseEvent<HTMLElement>);\n  });\n\n  const { carousel, carouselRef } = useCarousel_unstable({\n    announcement: props.announcement,\n    defaultValue: props.defaultValue,\n    value: props.value,\n    onValueChange: props.onValueChange,\n    onFinish: handleFinish,\n  });\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  return {\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, carouselRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    ...carousel,\n  };\n};\n"],"names":["useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","usePopoverContext_unstable","c","handleFinish","useEventCallback","event","data","onFinish","carousel","carouselRef","useCarousel_unstable","announcement","defaultValue","value","onValueChange","appearance","context","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;gCACyD;8BAErC;0BACN;AAE9B,MAAMA,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaC,IAAAA,wCAAAA,EAA2BC,CAAAA,IAAKA,EAAEF,UAAU;IAC/D,MAAMG,eAAyDC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;YACtFR;QAAAA,CAAAA,kBAAAA,MAAMS,QAAQ,AAARA,MAAQ,QAAdT,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBO,OAAOC;QACxBN,WAAWK;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGC,IAAAA,8BAAAA,EAAqB;QACrDC,cAAcb,MAAMa,YAAY;QAChCC,cAAcd,MAAMc,YAAY;QAChCC,OAAOf,MAAMe,KAAK;QAClBC,eAAehB,MAAMgB,aAAa;QAClCP,UAAUJ;IACZ;IAEA,MAAMY,aAAad,IAAAA,wCAAAA,EAA2Be,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BtB,KAAKuB,IAAAA,6BAAAA,EAAcvB,KAAKU;YACxB,GAAGX,KAAK;QACV,IACA;YAAEyB,aAAa;QAAM;QAEvB,GAAGf,QAAQ;IACb;AACF"}

package/lib-commonjs/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselCard = require("./useTeachingPopoverCarouselCard");
 const _renderTeachingPopoverCarouselCard = require("./renderTeachingPopoverCarouselCard");
 const _useTeachingPopoverCarouselCardStylesstyles = require("./useTeachingPopoverCarouselCardStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselCard = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselCard.useTeachingPopoverCarouselCard_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselCardStylesstyles.useTeachingPopoverCarouselCardStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselCardStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselCard.renderTeachingPopoverCarouselCard_unstable)(state);
 });
 TeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';

package/lib-commonjs/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n    useTeachingPopoverCarouselCardStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselCard_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["TeachingPopoverCarouselCard","React","forwardRef","props","ref","state","useTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","renderTeachingPopoverCarouselCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gDACiC;mDACG;4DAGG;AAQvD,MAAMA,8BAAAA,WAAAA,GAAqFC,OAAMC,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,uEAAAA,EAAwCH,OAAOC;IAE7DG,IAAAA,yFAAAA,EAA8CF;IAE9C,OAAOG,IAAAA,6EAAAA,EAA2CH;AACpD;AAGFL,4BAA4BS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n    useTeachingPopoverCarouselCardStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselCard_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["TeachingPopoverCarouselCard","React","forwardRef","props","ref","state","useTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;gDACiC;mDACG;4DAGG;qCAClB;AAQrC,MAAMA,8BAAAA,WAAAA,GAAqFC,OAAMC,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,uEAAAA,EAAwCH,OAAOC;IAE7DG,IAAAA,yFAAAA,EAA8CF;IAE9CG,IAAAA,gDAAAA,EAA4B,iDAAiDH;IAE7E,OAAOI,IAAAA,6EAAAA,EAA2CJ;AACpD;AAGFL,4BAA4BU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselFooter = require("./useTeachingPopoverCarouselFooter");
 const _renderTeachingPopoverCarouselFooter = require("./renderTeachingPopoverCarouselFooter");
 const _useTeachingPopoverCarouselFooterStylesstyles = require("./useTeachingPopoverCarouselFooterStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselFooter.useTeachingPopoverCarouselFooter_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselFooterStylesstyles.useTeachingPopoverCarouselFooterStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselFooterStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselFooter.renderTeachingPopoverCarouselFooter_unstable)(state);
 });
 TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';

package/lib-commonjs/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselFooter_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["TeachingPopoverCarouselFooter","React","forwardRef","props","ref","state","useTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","renderTeachingPopoverCarouselFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;kDACmC;qDACG;8DACG;AAUzD,MAAMA,gCAAAA,WAAAA,GAAyFC,OAAMC,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,2EAAAA,EAA0CH,OAAOC;IAE/DG,IAAAA,6FAAAA,EAAgDF;IAEhD,OAAOG,IAAAA,iFAAAA,EAA6CH;AACtD;AAGFL,8BAA8BS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooter_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["TeachingPopoverCarouselFooter","React","forwardRef","props","ref","state","useTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;kDACmC;qDACG;8DACG;qCAGpB;AAQrC,MAAMA,gCAAAA,WAAAA,GAAyFC,OAAMC,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,2EAAAA,EAA0CH,OAAOC;IAE/DG,IAAAA,6FAAAA,EAAgDF;IAEhDG,IAAAA,gDAAAA,EAA4B,mDAAmDH;IAE/E,OAAOI,IAAAA,iFAAAA,EAA6CJ;AACtD;AAGFL,8BAA8BU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselFooterButton = require("./useTeachingPopoverCarouselFooterButton");
 const _renderTeachingPopoverCarouselFooterButton = require("./renderTeachingPopoverCarouselFooterButton");
 const _useTeachingPopoverCarouselFooterButtonStylesstyles = require("./useTeachingPopoverCarouselFooterButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselFooterButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselFooterButton.useTeachingPopoverCarouselFooterButton_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselFooterButtonStylesstyles.useTeachingPopoverCarouselFooterButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselFooterButton.renderTeachingPopoverCarouselFooterButton_unstable)(state);
 });
 TeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';

package/lib-commonjs/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselFooterButton_unstable(state);\n  });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["TeachingPopoverCarouselFooterButton","React","forwardRef","props","ref","state","useTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","renderTeachingPopoverCarouselFooterButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;wDAEyC;2DACG;oEACG;AAS/D,MAAMA,sCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,uFAAAA,EAAgDH,OAAOC;IAErEG,IAAAA,yGAAAA,EAAsDF;IAEtD,OAAOG,IAAAA,6FAAAA,EAAmDH;AAC5D;AAEFL,oCAAoCS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooterButton_unstable(state);\n  });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["TeachingPopoverCarouselFooterButton","React","forwardRef","props","ref","state","useTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselFooterButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;wDAEyC;2DACG;oEACG;qCAE1B;AAQrC,MAAMA,sCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,uFAAAA,EAAgDH,OAAOC;IAErEG,IAAAA,yGAAAA,EAAsDF;IAEtDG,IAAAA,gDAAAA,EAA4B,yDAAyDH;IAErF,OAAOI,IAAAA,6FAAAA,EAAmDJ;AAC5D;AAEFL,oCAAoCU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselNav = require("./useTeachingPopoverCarouselNav");
 const _renderTeachingPopoverCarouselNav = require("./renderTeachingPopoverCarouselNav");
 const _useTeachingPopoverCarouselNavStylesstyles = require("./useTeachingPopoverCarouselNavStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselNav.useTeachingPopoverCarouselNav_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselNavStylesstyles.useTeachingPopoverCarouselNavStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselNavStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselNav.renderTeachingPopoverCarouselNav_unstable)(state);
 });
 TeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';

package/lib-commonjs/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nimport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nimport { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';\nimport type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.\n */\nexport const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselNav_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselNav_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';\n"],"names":["TeachingPopoverCarouselNav","React","forwardRef","props","ref","state","useTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavStyles_unstable","renderTeachingPopoverCarouselNav_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;+CACgC;kDACG;2DACG;AAUtD,MAAMA,6BAAAA,WAAAA,GAAmFC,OAAMC,UAAU,CAC9G,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,qEAAAA,EAAuCH,OAAOC;IAE5DG,IAAAA,uFAAAA,EAA6CF;IAE7C,OAAOG,IAAAA,2EAAAA,EAA0CH;AACnD;AAGFL,2BAA2BS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nimport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nimport { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';\nimport type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.\n */\nexport const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselNav_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselNav_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';\n"],"names":["TeachingPopoverCarouselNav","React","forwardRef","props","ref","state","useTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselNav_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;+CACgC;kDACG;2DACG;qCAGjB;AAQrC,MAAMA,6BAAAA,WAAAA,GAAmFC,OAAMC,UAAU,CAC9G,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,qEAAAA,EAAuCH,OAAOC;IAE5DG,IAAAA,uFAAAA,EAA6CF;IAE7CG,IAAAA,gDAAAA,EAA4B,gDAAgDH;IAE5E,OAAOI,IAAAA,2EAAAA,EAA0CJ;AACnD;AAGFL,2BAA2BU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselNavButton = require("./useTeachingPopoverCarouselNavButton");
 const _renderTeachingPopoverCarouselNavButton = require("./renderTeachingPopoverCarouselNavButton");
 const _useTeachingPopoverCarouselNavButtonStylesstyles = require("./useTeachingPopoverCarouselNavButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselNavButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselNavButton.useTeachingPopoverCarouselNavButton_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselNavButtonStylesstyles.useTeachingPopoverCarouselNavButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselNavButtonStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselNavButton.renderTeachingPopoverCarouselNavButton_unstable)(state);
 });
 TeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';

package/lib-commonjs/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nimport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nimport { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';\nimport type { TeachingPopoverCarouselNavButtonProps } from './TeachingPopoverCarouselNavButton.types';\n\n/**\n * TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel\n *\n * It's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)\n */\nexport const TeachingPopoverCarouselNavButton: ForwardRefComponent<TeachingPopoverCarouselNavButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselNavButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavButtonStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselNavButton_unstable(state);\n  }) as ForwardRefComponent<TeachingPopoverCarouselNavButtonProps>;\n\nTeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';\n"],"names":["TeachingPopoverCarouselNavButton","React","forwardRef","props","ref","state","useTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButtonStyles_unstable","renderTeachingPopoverCarouselNavButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qDAEsC;wDACG;iEACG;AAQ5D,MAAMA,mCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,iFAAAA,EAA6CH,OAAOC;IAElEG,IAAAA,mGAAAA,EAAmDF;IAEnD,OAAOG,IAAAA,uFAAAA,EAAgDH;AACzD;AAEFL,iCAAiCS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nimport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nimport { useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';\nimport type { TeachingPopoverCarouselNavButtonProps } from './TeachingPopoverCarouselNavButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel\n *\n * It's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)\n */\nexport const TeachingPopoverCarouselNavButton: ForwardRefComponent<TeachingPopoverCarouselNavButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselNavButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselNavButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselNavButtonStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselNavButton_unstable(state);\n  }) as ForwardRefComponent<TeachingPopoverCarouselNavButtonProps>;\n\nTeachingPopoverCarouselNavButton.displayName = 'TeachingPopoverCarouselNavButton';\n"],"names":["TeachingPopoverCarouselNavButton","React","forwardRef","props","ref","state","useTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselNavButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;qDAEsC;wDACG;iEACG;qCAEvB;AAOrC,MAAMA,mCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,iFAAAA,EAA6CH,OAAOC;IAElEG,IAAAA,mGAAAA,EAAmDF;IAEnDG,IAAAA,gDAAAA,EAA4B,sDAAsDH;IAElF,OAAOI,IAAAA,uFAAAA,EAAgDJ;AACzD;AAEFL,iCAAiCU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverCarouselPageCount = require("./useTeachingPopoverCarouselPageCount");
 const _renderTeachingPopoverCarouselPageCount = require("./renderTeachingPopoverCarouselPageCount");
 const _useTeachingPopoverCarouselPageCountStylesstyles = require("./useTeachingPopoverCarouselPageCountStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverCarouselPageCount = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverCarouselPageCount.useTeachingPopoverCarouselPageCount_unstable)(props, ref);
     (0, _useTeachingPopoverCarouselPageCountStylesstyles.useTeachingPopoverCarouselPageCountStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselPageCountStyles_unstable')(state);
     return (0, _renderTeachingPopoverCarouselPageCount.renderTeachingPopoverCarouselPageCount_unstable)(state);
 });
 TeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';

package/lib-commonjs/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["TeachingPopoverCarouselPageCount","React","forwardRef","props","ref","state","useTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","renderTeachingPopoverCarouselPageCount_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;qDAEsC;wDACG;iEACG;AAQ5D,MAAMA,mCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,iFAAAA,EAA6CH,OAAOC;IAElEG,IAAAA,mGAAAA,EAAmDF;IAEnD,OAAOG,IAAAA,uFAAAA,EAAgDH;AACzD;AAEFL,iCAAiCS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselPageCountStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["TeachingPopoverCarouselPageCount","React","forwardRef","props","ref","state","useTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverCarouselPageCount_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;qDAEsC;wDACG;iEACG;qCAEvB;AAOrC,MAAMA,mCAAAA,WAAAA,GACXC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQC,IAAAA,iFAAAA,EAA6CH,OAAOC;IAElEG,IAAAA,mGAAAA,EAAmDF;IAEnDG,IAAAA,gDAAAA,EAA4B,sDAAsDH;IAElF,OAAOI,IAAAA,uFAAAA,EAAgDJ;AACzD;AAEFL,iCAAiCU,WAAW,GAAG"}

package/lib-commonjs/components/TeachingPopoverFooter/TeachingPopoverFooter.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTeachingPopoverFooter = require("./useTeachingPopoverFooter");
 const _renderTeachingPopoverFooter = require("./renderTeachingPopoverFooter");
 const _useTeachingPopoverFooterStylesstyles = require("./useTeachingPopoverFooterStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TeachingPopoverFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTeachingPopoverFooter.useTeachingPopoverFooter_unstable)(props, ref);
     (0, _useTeachingPopoverFooterStylesstyles.useTeachingPopoverFooterStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverFooterStyles_unstable')(state);
     return (0, _renderTeachingPopoverFooter.renderTeachingPopoverFooter_unstable)(state);
 });
 TeachingPopoverFooter.displayName = 'TeachingPopoverFooter';

package/lib-commonjs/components/TeachingPopoverFooter/TeachingPopoverFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverFooter/TeachingPopoverFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nimport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nimport { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';\nimport type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\n * and handle Popover functionality such as closing the popup.\n *\n * Users must provide the localized text for each button within the footer via slots.\n */\nexport const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverFooter_unstable(props, ref);\n\n  useTeachingPopoverFooterStyles_unstable(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["TeachingPopoverFooter","React","forwardRef","props","ref","state","useTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","renderTeachingPopoverFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;0CAC2B;6CACG;sDACG;AAajD,MAAMA,wBAAAA,WAAAA,GAAyEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQC,IAAAA,2DAAAA,EAAkCH,OAAOC;IAEvDG,IAAAA,6EAAAA,EAAwCF;IAExC,OAAOG,IAAAA,iEAAAA,EAAqCH;AAC9C;AAEAL,sBAAsBS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/TeachingPopoverFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nimport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nimport { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';\nimport type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\n * and handle Popover functionality such as closing the popup.\n *\n * Users must provide the localized text for each button within the footer via slots.\n */\nexport const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverFooter_unstable(props, ref);\n\n  useTeachingPopoverFooterStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverFooterStyles_unstable')(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["TeachingPopoverFooter","React","forwardRef","props","ref","state","useTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","useCustomStyleHook_unstable","renderTeachingPopoverFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;0CAC2B;6CACG;sDACG;qCAGZ;AAWrC,MAAMA,wBAAAA,WAAAA,GAAyEC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQC,IAAAA,2DAAAA,EAAkCH,OAAOC;IAEvDG,IAAAA,6EAAAA,EAAwCF;IAExCG,IAAAA,gDAAAA,EAA4B,2CAA2CH;IAEvE,OAAOI,IAAAA,iEAAAA,EAAqCJ;AAC9C;AAEAL,sBAAsBU,WAAW,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-teaching-popover",
-  "version": "9.2.4",
+  "version": "9.4.0",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -24,18 +24,18 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.0.50",
+    "@fluentui/react-jsx-runtime": "^9.0.51",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.18.20",
+    "@fluentui/react-utilities": "^9.18.21",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
-    "@fluentui/react-shared-contexts": "^9.21.2",
-    "@fluentui/react-popover": "^9.9.32",
-    "@fluentui/react-button": "^9.3.102",
-    "@fluentui/react-tabster": "^9.23.3",
+    "@fluentui/react-shared-contexts": "^9.22.0",
+    "@fluentui/react-popover": "^9.10.1",
+    "@fluentui/react-button": "^9.4.1",
+    "@fluentui/react-tabster": "^9.24.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-aria": "^9.13.14",
-    "@fluentui/react-context-selector": "^9.1.72",
+    "@fluentui/react-aria": "^9.14.1",
+    "@fluentui/react-context-selector": "^9.1.73",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {