@fluentui/react-teaching-popover 0.0.0-nightly-20240423-0406.1

package/lib/TeachingPopover.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopover/index';

package/lib/TeachingPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopover.ts"],"sourcesContent":["export * from './components/TeachingPopover/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/TeachingPopoverBody.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverBody/index';

package/lib/TeachingPopoverBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverBody.ts"],"sourcesContent":["export * from './components/TeachingPopoverBody/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}

package/lib/TeachingPopoverCarousel.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarousel/index';

package/lib/TeachingPopoverCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarousel.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarousel/index';\n"],"names":[],"mappings":"AAAA,cAAc,6CAA6C"}

package/lib/TeachingPopoverCarouselCard.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselCard/index';

package/lib/TeachingPopoverCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselCard.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselCard/index';\n"],"names":[],"mappings":"AAAA,cAAc,iDAAiD"}

package/lib/TeachingPopoverCarouselFooter.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselFooter/index';

package/lib/TeachingPopoverCarouselFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselFooter.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselFooter/index';\n"],"names":[],"mappings":"AAAA,cAAc,mDAAmD"}

package/lib/TeachingPopoverCarouselFooterButton.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselFooterButton/index';

package/lib/TeachingPopoverCarouselFooterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselFooterButton.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselFooterButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,yDAAyD"}

package/lib/TeachingPopoverCarouselNav.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselNav/index';

package/lib/TeachingPopoverCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselNav.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselNav/index';\n"],"names":[],"mappings":"AAAA,cAAc,gDAAgD"}

package/lib/TeachingPopoverCarouselNavButton.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselNavButton/index';

package/lib/TeachingPopoverCarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselNavButton.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselNavButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,sDAAsD"}

package/lib/TeachingPopoverCarouselPageCount.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverCarouselPageCount/index';

package/lib/TeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselPageCount.ts"],"sourcesContent":["export * from './components/TeachingPopoverCarouselPageCount/index';\n"],"names":[],"mappings":"AAAA,cAAc,sDAAsD"}

package/lib/TeachingPopoverFooter.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverFooter';

package/lib/TeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverFooter.ts"],"sourcesContent":["export * from './components/TeachingPopoverFooter';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/TeachingPopoverHeader.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverHeader/index';

package/lib/TeachingPopoverHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverHeader.ts"],"sourcesContent":["export * from './components/TeachingPopoverHeader/index';\n"],"names":[],"mappings":"AAAA,cAAc,2CAA2C"}

package/lib/TeachingPopoverSurface.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverSurface/index';

package/lib/TeachingPopoverSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverSurface.ts"],"sourcesContent":["export * from './components/TeachingPopoverSurface/index';\n"],"names":[],"mappings":"AAAA,cAAc,4CAA4C"}

package/lib/TeachingPopoverTitle.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverTitle/index';

package/lib/TeachingPopoverTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverTitle.ts"],"sourcesContent":["export * from './components/TeachingPopoverTitle/index';\n"],"names":[],"mappings":"AAAA,cAAc,0CAA0C"}

package/lib/TeachingPopoverTrigger.js

@@ -0,0 +1 @@
+export * from './components/TeachingPopoverTrigger/index';

package/lib/TeachingPopoverTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverTrigger.ts"],"sourcesContent":["export * from './components/TeachingPopoverTrigger/index';\n"],"names":[],"mappings":"AAAA,cAAc,4CAA4C"}

package/lib/components/TeachingPopover/TeachingPopover.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { useTeachingPopover_unstable } from './useTeachingPopover';
+import { renderTeachingPopover_unstable } from './renderTeachingPopover';
+/**
+ * An extension class of Popover which defaults to withArrow and FocusTrap enabled.
+ */ export const TeachingPopover = (props)=>{
+    const state = useTeachingPopover_unstable(props);
+    return renderTeachingPopover_unstable(state);
+};
+TeachingPopover.displayName = 'TeachingPopover';

package/lib/components/TeachingPopover/TeachingPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopover_unstable } from './useTeachingPopover';\nimport { renderTeachingPopover_unstable } from './renderTeachingPopover';\nimport type { TeachingPopoverProps } from './TeachingPopover.types';\n\n/**\n * An extension class of Popover which defaults to withArrow and FocusTrap enabled.\n */\nexport const TeachingPopover: React.FC<TeachingPopoverProps> = props => {\n  const state = useTeachingPopover_unstable(props);\n\n  return renderTeachingPopover_unstable(state);\n};\n\nTeachingPopover.displayName = 'TeachingPopover';\n"],"names":["React","useTeachingPopover_unstable","renderTeachingPopover_unstable","TeachingPopover","props","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAGzE;;CAEC,GACD,OAAO,MAAMC,kBAAkDC,CAAAA;IAC7D,MAAMC,QAAQJ,4BAA4BG;IAE1C,OAAOF,+BAA+BG;AACxC,EAAE;AAEFF,gBAAgBG,WAAW,GAAG"}

package/lib/components/TeachingPopover/TeachingPopover.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopover.types.ts"],"sourcesContent":["import type { PopoverState, PopoverProps } from '@fluentui/react-popover';\n\n/**\n * TeachingPopover Props\n */\nexport type TeachingPopoverProps = PopoverProps;\n\n/**\n * TeachingPopover State\n */\nexport type TeachingPopoverState = PopoverState;\n"],"names":[],"mappings":"AAAA,WAUgD"}

package/lib/components/TeachingPopover/index.js

@@ -0,0 +1,4 @@
+export * from './TeachingPopover';
+export * from './TeachingPopover.types';
+export * from './renderTeachingPopover';
+export * from './useTeachingPopover';

package/lib/components/TeachingPopover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TeachingPopover';\nexport * from './TeachingPopover.types';\nexport * from './renderTeachingPopover';\nexport * from './useTeachingPopover';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB"}

package/lib/components/TeachingPopover/renderTeachingPopover.js

@@ -0,0 +1,4 @@
+import { renderPopover_unstable } from '@fluentui/react-popover';
+/**
+ * Render the final JSX of TeachingPopover
+ */ export const renderTeachingPopover_unstable = renderPopover_unstable;

package/lib/components/TeachingPopover/renderTeachingPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTeachingPopover.tsx"],"sourcesContent":["import { renderPopover_unstable } from '@fluentui/react-popover';\n\n/**\n * Render the final JSX of TeachingPopover\n */\nexport const renderTeachingPopover_unstable = renderPopover_unstable;\n"],"names":["renderPopover_unstable","renderTeachingPopover_unstable"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,0BAA0B;AAEjE;;CAEC,GACD,OAAO,MAAMC,iCAAiCD,uBAAuB"}

package/lib/components/TeachingPopover/useTeachingPopover.js

@@ -0,0 +1,11 @@
+import { usePopover_unstable } from '@fluentui/react-popover';
+export const useTeachingPopover_unstable = (props)=>{
+    const popoverState = usePopover_unstable(props);
+    var _props_withArrow, _props_trapFocus;
+    return {
+        ...popoverState,
+        withArrow: (_props_withArrow = props.withArrow) !== null && _props_withArrow !== void 0 ? _props_withArrow : true,
+        // We trap focus because the default TeachingPopover view has buttons/carousel.
+        trapFocus: (_props_trapFocus = props.trapFocus) !== null && _props_trapFocus !== void 0 ? _props_trapFocus : true
+    };
+};

package/lib/components/TeachingPopover/useTeachingPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTeachingPopover.ts"],"sourcesContent":["import { usePopover_unstable } from '@fluentui/react-popover';\nimport type { TeachingPopoverProps, TeachingPopoverState } from './TeachingPopover.types';\n\nexport const useTeachingPopover_unstable = (props: TeachingPopoverProps): TeachingPopoverState => {\n  const popoverState = usePopover_unstable(props);\n\n  return {\n    ...popoverState,\n    withArrow: props.withArrow ?? true,\n    // We trap focus because the default TeachingPopover view has buttons/carousel.\n    trapFocus: props.trapFocus ?? true,\n  };\n};\n"],"names":["usePopover_unstable","useTeachingPopover_unstable","props","popoverState","withArrow","trapFocus"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,0BAA0B;AAG9D,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAMC,eAAeH,oBAAoBE;QAI5BA,kBAEAA;IAJb,OAAO;QACL,GAAGC,YAAY;QACfC,WAAWF,CAAAA,mBAAAA,MAAME,SAAS,cAAfF,8BAAAA,mBAAmB;QAC9B,+EAA+E;QAC/EG,WAAWH,CAAAA,mBAAAA,MAAMG,SAAS,cAAfH,8BAAAA,mBAAmB;IAChC;AACF,EAAE"}

package/lib/components/TeachingPopoverBody/TeachingPopoverBody.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';
+import { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';
+import { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot
+ */ export const TeachingPopoverBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverBody_unstable(props, ref);
+    useTeachingPopoverBodyStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);
+    return renderTeachingPopoverBody_unstable(state);
+});
+TeachingPopoverBody.displayName = 'TeachingPopoverBody';

package/lib/components/TeachingPopoverBody/TeachingPopoverBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';\nimport { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';\nimport { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverBodyProps } from './TeachingPopoverBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`\n * hooks.\n *\n * TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot\n */\nexport const TeachingPopoverBody: ForwardRefComponent<TeachingPopoverBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverBody_unstable(props, ref);\n\n  useTeachingPopoverBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);\n\n  return renderTeachingPopoverBody_unstable(state);\n});\n\nTeachingPopoverBody.displayName = 'TeachingPopoverBody';\n"],"names":["React","useTeachingPopoverBody_unstable","renderTeachingPopoverBody_unstable","useTeachingPopoverBodyStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,wCAAwC;AAC9F,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;;;;CAKC,GACD,OAAO,MAAMC,oCAAqEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQR,gCAAgCM,OAAOC;IAErDL,sCAAsCM;IAEtCL,4BAA4B,yCAAyCK;IAErE,OAAOP,mCAAmCO;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

package/lib/components/TeachingPopoverBody/TeachingPopoverBody.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverBody.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverBodySlots = {\n  /**\n   * The element wrapping the buttons.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Optional Media Content.\n   */\n  media?: Slot<'span'>;\n};\n\nexport type TeachingPopoverBodyProps = ComponentProps<TeachingPopoverBodySlots> & {\n  mediaLength?: 'short' | 'medium' | 'tall';\n};\n\nexport type TeachingPopoverBodyState = ComponentState<TeachingPopoverBodySlots> &\n  Required<Pick<TeachingPopoverBodyProps, 'mediaLength'>>;\n"],"names":[],"mappings":"AAAA,WAkB0D"}

package/lib/components/TeachingPopoverBody/index.js

@@ -0,0 +1,5 @@
+export * from './TeachingPopoverBody';
+export * from './TeachingPopoverBody.types';
+export * from './renderTeachingPopoverBody';
+export * from './useTeachingPopoverBody';
+export * from './useTeachingPopoverBodyStyles.styles';

package/lib/components/TeachingPopoverBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TeachingPopoverBody';\nexport * from './TeachingPopoverBody.types';\nexport * from './renderTeachingPopoverBody';\nexport * from './useTeachingPopoverBody';\nexport * from './useTeachingPopoverBodyStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,8BAA8B;AAC5C,cAAc,8BAA8B;AAC5C,cAAc,2BAA2B;AACzC,cAAc,wCAAwC"}

package/lib/components/TeachingPopoverBody/renderTeachingPopoverBody.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverBody
+ */ export const renderTeachingPopoverBody_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ _jsx(state.media, {}),
+            state.root.children
+        ]
+    });
+};

package/lib/components/TeachingPopoverBody/renderTeachingPopoverBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTeachingPopoverBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport { TeachingPopoverBodySlots } from './TeachingPopoverBody.types';\nimport { assertSlots } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverBody\n */\nexport const renderTeachingPopoverBody_unstable = (state: TeachingPopoverBodyState) => {\n  assertSlots<TeachingPopoverBodySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && <state.media />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverBody_unstable","state","root","media","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjDF,YAAsCE;IAEtC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

package/lib/components/TeachingPopoverBody/useTeachingPopoverBody.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverBody properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverBody
+ */ export const useTeachingPopoverBody_unstable = (props, ref)=>{
+    const { mediaLength } = props;
+    return {
+        components: {
+            root: 'div',
+            media: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        media: slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        mediaLength: mediaLength !== null && mediaLength !== void 0 ? mediaLength : 'short'
+    };
+};

package/lib/components/TeachingPopoverBody/useTeachingPopoverBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTeachingPopoverBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverBodyProps, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverBody properties\n * @param ref - reference to root HTMLElement of TeachingPopoverBody\n */\nexport const useTeachingPopoverBody_unstable = (\n  props: TeachingPopoverBodyProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverBodyState => {\n  const { mediaLength } = props;\n\n  return {\n    components: {\n      root: 'div',\n      media: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    mediaLength: mediaLength ?? 'short',\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTeachingPopoverBody_unstable","props","ref","mediaLength","components","root","media","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGF;IAExB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNC,OAAO;QACT;QACAD,MAAMN,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBF,OAAOP,KAAKU,QAAQ,CAACR,MAAMK,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDL,aAAaA,wBAAAA,yBAAAA,cAAe;IAC9B;AACF,EAAE"}

package/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.js

@@ -0,0 +1,58 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const teachingPopoverBodyClassNames = {
+  root: 'fui-TeachingPopoverBody',
+  media: 'fui-TeachingPopoverBody__media'
+};
+export const useMediaStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "f11uok23",
+    Br312pm: "f1qdfnnj",
+    nk6f5a: "f1s27gz",
+    Bw0ie65: "f86d0yl",
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    a9b677: "f1dxqujg",
+    jrapky: "f1jlhsmd",
+    ha4doy: "fmrv4ls",
+    Brf1p80: "f4d9j23",
+    mc9l5x: "f22iagw"
+  },
+  short: {
+    Bubjx69: "f1taewuw",
+    Bmuttt3: "fs5pxn9"
+  },
+  medium: {
+    Bubjx69: "f7da563",
+    Bmuttt3: "f98prui"
+  },
+  tall: {
+    Bubjx69: "f9ikmtg",
+    Bmuttt3: "fqws08j"
+  }
+}, {
+  d: [".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1dxqujg{width:288px;}", ".f1jlhsmd{margin-bottom:12px;}", ".fmrv4ls{vertical-align:middle;}", ".f4d9j23{justify-content:center;}", ".f22iagw{display:flex;}", ".f1taewuw{aspect-ratio:2.4615384615384617;}", ".f7da563{aspect-ratio:1.6363636363636365;}", ".f9ikmtg{aspect-ratio:1;}"],
+  t: ["@supports not (aspect-ratio){.fs5pxn9{height:117px;}}", "@supports not (aspect-ratio){.f98prui{height:176px;}}", "@supports not (aspect-ratio){.fqws08j{height:288px;}}"]
+});
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Byoj8tv: "fpe6lb7"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fpe6lb7{padding-bottom:12px;}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverBodyStyles_unstable = state => {
+  const {
+    mediaLength
+  } = state;
+  const styles = useStyles();
+  const mediaStyles = useMediaStyles();
+  state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTeachingPopoverBodyStyles.styles.js.map

package/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","teachingPopoverBodyClassNames","root","media","useMediaStyles","base","Ijaq50","Br312pm","nk6f5a","Bw0ie65","B68tc82","Bmxbyg5","a9b677","jrapky","ha4doy","Brf1p80","mc9l5x","short","Bubjx69","Bmuttt3","medium","tall","d","t","useStyles","Beiy3e4","Byoj8tv","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"sources":["useTeachingPopoverBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const teachingPopoverBodyClassNames = {\n    root: 'fui-TeachingPopoverBody',\n    media: 'fui-TeachingPopoverBody__media'\n};\nexport const useMediaStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('media'),\n        ...shorthands.overflow('hidden'),\n        width: '288px',\n        marginBottom: '12px',\n        verticalAlign: 'middle',\n        justifyContent: 'center',\n        display: 'flex'\n    },\n    short: {\n        aspectRatio: 288 / 117,\n        '@supports not (aspect-ratio)': {\n            height: '117px'\n        }\n    },\n    medium: {\n        aspectRatio: 288 / 176,\n        '@supports not (aspect-ratio)': {\n            height: '176px'\n        }\n    },\n    tall: {\n        aspectRatio: 288 / 288,\n        '@supports not (aspect-ratio)': {\n            height: '288px'\n        }\n    }\n});\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        paddingBottom: '12px'\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{\n    const { mediaLength } = state;\n    const styles = useStyles();\n    const mediaStyles = useMediaStyles();\n    state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE,yBAAyB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,IAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAG,CAAA;EAAAC,CAAA;AAAA,CA4B7B,CAAC;AACF,MAAMC,SAAS,gBAAG1B,QAAA;EAAAI,IAAA;IAAAc,MAAA;IAAAS,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAMjB,CAAC;AACF;AAAyC,OAAO,MAAMK,qCAAqC,GAAIC,KAAK,IAAG;EACnG,MAAM;IAAEC;EAAY,CAAC,GAAGD,KAAK;EAC7B,MAAME,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1B,MAAMO,WAAW,GAAG3B,cAAc,CAAC,CAAC;EACpCwB,KAAK,CAAC1B,IAAI,CAAC8B,SAAS,GAAGjC,YAAY,CAACE,6BAA6B,CAACC,IAAI,EAAE4B,MAAM,CAAC5B,IAAI,EAAE0B,KAAK,CAAC1B,IAAI,CAAC8B,SAAS,CAAC;EAC1G,IAAIJ,KAAK,CAACzB,KAAK,EAAE;IACbyB,KAAK,CAACzB,KAAK,CAAC6B,SAAS,GAAGjC,YAAY,CAACE,6BAA6B,CAACE,KAAK,EAAE4B,WAAW,CAAC1B,IAAI,EAAE0B,WAAW,CAACF,WAAW,CAAC,EAAED,KAAK,CAACzB,KAAK,CAAC6B,SAAS,CAAC;EAChJ;EACA,OAAOJ,KAAK;AAChB,CAAC"}

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

@@ -0,0 +1,123 @@
+import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { CAROUSEL_ITEM } from './constants';
+import { useCarouselWalker_unstable } from './useCarouselWalker';
+import { createCarouselStore } from './createCarouselStore';
+// TODO: Migrate this into an external @fluentui/carousel component
+// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
+export function useCarousel_unstable(options) {
+    const { onValueChange, onFinish } = options;
+    const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();
+    const [store] = React.useState(()=>createCarouselStore());
+    const [value, setValue] = useControllableState({
+        defaultState: options.defaultValue,
+        state: options.value,
+        initialState: null
+    });
+    const rootRef = React.useRef(null);
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(()=>{
+            if (value === null) {
+                // eslint-disable-next-line no-console
+                console.error('useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.');
+            }
+        }, [
+            value
+        ]);
+    }
+    React.useEffect(()=>{
+        var _rootRef_current;
+        const allItems = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelectorAll(`[${CAROUSEL_ITEM}]`);
+        for(let i = 0; i < allItems.length; i++){
+            store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM));
+        }
+        return ()=>{
+            store.clear();
+        };
+    }, [
+        store
+    ]);
+    React.useEffect(()=>{
+        const config = {
+            attributes: true,
+            attributeFilter: [
+                CAROUSEL_ITEM
+            ],
+            childList: true,
+            subtree: true
+        };
+        // Callback function to execute when mutations are observed
+        const callback = (mutationList)=>{
+            for (const mutation of mutationList){
+                for (const addedNode of Array.from(mutation.addedNodes)){
+                    if (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {
+                        const newValue = addedNode.getAttribute(CAROUSEL_ITEM);
+                        const newNode = carouselWalker.find(newValue);
+                        if (!(newNode === null || newNode === void 0 ? void 0 : newNode.value)) {
+                            return;
+                        }
+                        const previousNode = carouselWalker.prevPage(newNode === null || newNode === void 0 ? void 0 : newNode.value);
+                        var _previousNode_value;
+                        store.insertValue(newValue, (_previousNode_value = previousNode === null || previousNode === void 0 ? void 0 : previousNode.value) !== null && _previousNode_value !== void 0 ? _previousNode_value : null);
+                    }
+                }
+                for (const removedNode of Array.from(mutation.removedNodes)){
+                    if (isHTMLElement(removedNode) && (removedNode === null || removedNode === void 0 ? void 0 : removedNode.hasAttribute(CAROUSEL_ITEM))) {
+                        const removedValue = removedNode.getAttribute(CAROUSEL_ITEM);
+                        store.removeValue(removedValue);
+                    }
+                }
+            }
+        };
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
+        // Start observing the target node for configured mutations
+        observer.observe(rootRef.current, config);
+        // Later, you can stop observing
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        carouselWalker,
+        store
+    ]);
+    const selectPageByDirection = useEventCallback((event, direction)=>{
+        const active = carouselWalker.active();
+        if (!(active === null || active === void 0 ? void 0 : active.value)) {
+            return;
+        }
+        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
+            });
+        } else {
+            onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
+                event,
+                type: 'click',
+                value: active === null || active === void 0 ? void 0 : active.value
+            });
+        }
+    });
+    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
+        }
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Carousel.tsx"],"sourcesContent":["import {\n  isHTMLElement,\n  useMergedRefs,\n  useControllableState,\n  type EventHandler,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\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  const { onValueChange, onFinish } = options;\n\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    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 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]);\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":["isHTMLElement","useMergedRefs","useControllableState","useEventCallback","React","CAROUSEL_ITEM","useCarouselWalker_unstable","createCarouselStore","useCarousel_unstable","options","onValueChange","onFinish","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"],"mappings":"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"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,14 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import * as React from 'react';
+import { createCarouselStore } from './createCarouselStore';
+export const carouselContextDefaultValue = {
+    store: createCarouselStore(),
+    value: null,
+    selectPageByDirection: ()=>{
+    /** noop */ },
+    selectPageByValue: ()=>{
+    /** noop */ }
+};
+const CarouselContext = createContext(undefined);
+export const CarouselProvider = CarouselContext.Provider;
+export const useCarouselContext_unstable = (selector)=>useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue)=>selector(ctx));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselContext.ts"],"sourcesContent":["import { type Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport * as React from 'react';\n\nimport type { CarouselStore } from './Carousel.types';\nimport { createCarouselStore } from './createCarouselStore';\n\nexport type CarouselContextValue = {\n  store: CarouselStore;\n  value: string | null;\n  selectPageByDirection: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n    direction: 'next' | 'prev',\n  ) => void;\n  selectPageByValue: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: string) => void;\n};\n\nexport const carouselContextDefaultValue: CarouselContextValue = {\n  store: createCarouselStore(),\n  value: null,\n  selectPageByDirection: () => {\n    /** noop */\n  },\n  selectPageByValue: () => {\n    /** noop */\n  },\n};\n\nconst CarouselContext: Context<CarouselContextValue> = createContext<CarouselContextValue | undefined>(\n  undefined,\n) as Context<CarouselContextValue>;\n\nexport const CarouselProvider = CarouselContext.Provider;\n\nexport const useCarouselContext_unstable = <T>(selector: ContextSelector<CarouselContextValue, T>): T =>\n  useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","React","createCarouselStore","carouselContextDefaultValue","store","value","selectPageByDirection","selectPageByValue","CarouselContext","undefined","CarouselProvider","Provider","useCarouselContext_unstable","selector","ctx"],"mappings":"AAAA,SAAwCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AACpH,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,wBAAwB;AAY5D,OAAO,MAAMC,8BAAoD;IAC/DC,OAAOF;IACPG,OAAO;IACPC,uBAAuB;IACrB,SAAS,GACX;IACAC,mBAAmB;IACjB,SAAS,GACX;AACF,EAAE;AAEF,MAAMC,kBAAiDT,cACrDU;AAGF,OAAO,MAAMC,mBAAmBF,gBAAgBG,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBQ,iBAAiB,CAACM,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CarouselItem.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselItemSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type CarouselItemProps = ComponentProps<CarouselItemSlots> & {\n  /**\n   * The value used to identify a page,\n   * it should be unique and is necessary for pagination\n   */\n  value: string;\n};\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type CarouselItemState = ComponentState<Required<CarouselItemSlots>> & {\n  visible: boolean;\n} & Pick<CarouselItemProps, 'value'>;\n"],"names":[],"mappings":"AAAA,WAsBqC"}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useCarouselItem_unstable } from './useCarouselItem';
+import { renderCarouselItem_unstable } from './renderCarouselItem';
+/**
+ * Define a CarouselItem, using the `useCarouselItem_unstable` and 'renderCarouselItem_unstable' hooks.
+ * It has no styling opinions.
+ */ export const CarouselItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselItem_unstable(props, ref);
+    return renderCarouselItem_unstable(state);
+});
+CarouselItem.displayName = 'CarouselItem';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Carouseltem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { CarouselItemProps } from './CarouselItem.types';\nimport { useCarouselItem_unstable } from './useCarouselItem';\nimport { renderCarouselItem_unstable } from './renderCarouselItem';\n\n/**\n * Define a CarouselItem, using the `useCarouselItem_unstable` and 'renderCarouselItem_unstable' hooks.\n * It has no styling opinions.\n */\nexport const CarouselItem: ForwardRefComponent<CarouselItemProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselItem_unstable(props, ref);\n\n  return renderCarouselItem_unstable(state);\n});\n\nCarouselItem.displayName = 'CarouselItem';\n"],"names":["React","useCarouselItem_unstable","renderCarouselItem_unstable","CarouselItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAEnE;;;CAGC,GACD,OAAO,MAAMC,6BAAuDH,MAAMI,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQN,yBAAyBI,OAAOC;IAE9C,OAAOJ,4BAA4BK;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverCarousel
+ */ export const renderCarouselItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderCarouselItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselItemState, CarouselItemSlots } from './CarouselItem.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarousel\n */\nexport const renderCarouselItem_unstable = (state: CarouselItemState) => {\n  assertSlots<CarouselItemSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselItem_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useCarouselContext_unstable } from '../CarouselContext';
+import { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from '../constants';
+export const useCarouselItem_unstable = (props, ref)=>{
+    const { value } = props;
+    const visible = useCarouselContext_unstable((c)=>c.value === value);
+    const state = {
+        value,
+        visible,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            [CAROUSEL_ITEM]: value,
+            [CAROUSEL_ACTIVE_ITEM]: visible,
+            hidden: !visible,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+    if (!visible) {
+        state.root.children = null;
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useCarouselItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { CarouselItemProps, CarouselItemState } from './CarouselItem.types';\nimport { useCarouselContext_unstable } from '../CarouselContext';\nimport { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from '../constants';\n\nexport const useCarouselItem_unstable = (\n  props: CarouselItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselItemState => {\n  const { value } = props;\n\n  const visible = useCarouselContext_unstable(c => c.value === value);\n  const state: CarouselItemState = {\n    value,\n    visible,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        [CAROUSEL_ITEM]: value,\n        [CAROUSEL_ACTIVE_ITEM]: visible,\n        hidden: !visible,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  if (!visible) {\n    state.root.children = null;\n  }\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCarouselContext_unstable","CAROUSEL_ACTIVE_ITEM","CAROUSEL_ITEM","useCarouselItem_unstable","props","ref","value","visible","c","state","components","root","always","hidden","elementType","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,2BAA2B,QAAQ,qBAAqB;AACjE,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAe;AAEnE,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAAUP,4BAA4BQ,CAAAA,IAAKA,EAAEF,KAAK,KAAKA;IAC7D,MAAMG,QAA2B;QAC/BH;QACAC;QACAG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BO;YACA,CAACH,cAAc,EAAEI;YACjB,CAACL,qBAAqB,EAAEM;YACxBM,QAAQ,CAACN;YACT,GAAGH,KAAK;QACV,IACA;YAAEU,aAAa;QAAM;IAEzB;IAEA,IAAI,CAACP,SAAS;QACZE,MAAME,IAAI,CAACI,QAAQ,GAAG;IACxB;IAEA,OAAON;AACT,EAAE"}

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

@@ -0,0 +1,2 @@
+export const CAROUSEL_ITEM = 'data-carousel-item';
+export const CAROUSEL_ACTIVE_ITEM = 'data-carousel-active-item';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["constants.ts"],"sourcesContent":["export const CAROUSEL_ITEM = 'data-carousel-item';\nexport const CAROUSEL_ACTIVE_ITEM = 'data-carousel-active-item';\n"],"names":["CAROUSEL_ITEM","CAROUSEL_ACTIVE_ITEM"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,qBAAqB;AAClD,OAAO,MAAMC,uBAAuB,4BAA4B"}