feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js

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

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.js

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

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavSlots = {\n  /**\n   * The element wrapping the carousel pagination. By default this is a div,\n   * it may contain icons or text depending on TeachingPopoverCarouselNavStyle\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (value: string) => React.ReactNode;\n\nexport type TeachingPopoverCarouselNavState = ComponentState<TeachingPopoverCarouselNavSlots> & {\n  values: string[];\n\n  renderNavButton: NavButtonRenderFunction;\n};\n\nexport type TeachingPopoverCarouselNavProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselNavSlots>>,\n  'children'\n> & {\n  children: NavButtonRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/index.js

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';
+export { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';
+export { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';
+export { teachingPopoverCarouselNavClassNames, useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';\nexport type {\n  NavButtonRenderFunction,\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nexport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nexport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nexport {\n  teachingPopoverCarouselNavClassNames,\n  useTeachingPopoverCarouselNavStyles_unstable,\n} from './useTeachingPopoverCarouselNavStyles.styles';\n"],"names":["TeachingPopoverCarouselNav","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNav_unstable","teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable"],"mappings":"AAAA,SAASA,0BAA0B,QAAQ,+BAA+B;AAO1E,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SACEC,oCAAoC,EACpCC,4CAA4C,QACvC,+CAA+C"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.js

@@ -0,0 +1,15 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ValueIdContextProvider } from './valueIdContext';
+/**
+ * Render the final JSX of TeachingPopoverCarouselNav
+ */ export const renderTeachingPopoverCarouselNav_unstable = (state)=>{
+    assertSlots(state);
+    const { values, renderNavButton } = state;
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: values.map((value)=>/*#__PURE__*/ _jsx(ValueIdContextProvider, {
+                value: value,
+                children: renderNavButton(value)
+            }, value))
+    });
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselNavState } from './TeachingPopoverCarouselNav.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';\nimport { ValueIdContextProvider } from './valueIdContext';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselNav\n */\nexport const renderTeachingPopoverCarouselNav_unstable = (state: TeachingPopoverCarouselNavState): JSXElement => {\n  assertSlots<TeachingPopoverCarouselNavSlots>(state);\n\n  const { values, renderNavButton } = state;\n\n  return (\n    <state.root>\n      {values.map(value => (\n        <ValueIdContextProvider value={value} key={value}>\n          {renderNavButton(value)}\n        </ValueIdContextProvider>\n      ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ValueIdContextProvider","renderTeachingPopoverCarouselNav_unstable","state","values","renderNavButton","root","map","value"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDH,YAA6CG;IAE7C,MAAM,EAAEC,MAAM,EAAEC,eAAe,EAAE,GAAGF;IAEpC,qBACE,KAACA,MAAMG,IAAI;kBACRF,OAAOG,GAAG,CAACC,CAAAA,sBACV,KAACP;gBAAuBO,OAAOA;0BAC5BH,gBAAgBG;eADwBA;;AAMnD,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.js

@@ -0,0 +1,36 @@
+'use client';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverCarouselNav properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav
+ */ export const useTeachingPopoverCarouselNav_unstable = (props, ref)=>{
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular: false,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    const values = useCarouselValues_unstable((snapshot)=>snapshot);
+    return {
+        values,
+        renderNavButton: props.children,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'tablist',
+            tabIndex: 0,
+            ...props,
+            ...focusableGroupAttr,
+            children: null
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n  TeachingPopoverCarouselNavProps,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselNav properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav\n */\nexport const useTeachingPopoverCarouselNav_unstable = (\n  props: TeachingPopoverCarouselNavProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselNavState => {\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular: false,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  return {\n    values,\n    renderNavButton: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'tablist',\n        tabIndex: 0,\n        ...props,\n        ...focusableGroupAttr,\n        children: null,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","React","useCarouselValues_unstable","useTeachingPopoverCarouselNav_unstable","props","ref","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","values","snapshot","renderNavButton","children","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;AAEA,SAASA,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAM/B,SAASC,0BAA0B,QAAQ,wDAAwD;AAEnG;;;;CAIC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAMC,qBAAqBR,wBAAwB;QACjDS,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IACA,MAAMC,SAAST,2BAA2BU,CAAAA,WAAYA;IAEtD,OAAO;QACLD;QACAE,iBAAiBT,MAAMU,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACAa,MAAM;YACNC,UAAU;YACV,GAAGf,KAAK;YACR,GAAGE,kBAAkB;YACrBQ,UAAU;QACZ,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverCarouselNavClassNames = {
+  root: 'fui-TeachingPopoverCarouselNav'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    i8kkvl: "f1ufnopg",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f89hs3r",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"]
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", [".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverCarouselNavStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Bt984gj","Brf1p80","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","d","p","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverCarouselNavClassNames = {\n    root: 'fui-TeachingPopoverCarouselNav'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        columnGap: tokens.spacingHorizontalXS,\n        alignItems: 'center',\n        justifyContent: 'center',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        })\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oCAAoC,GAAG;EAChDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAajB,CAAC;AACF;AAAyC,OAAO,MAAMC,4CAA4C,GAAIC,KAAK,IAAG;EAC1G,aAAa;;EACb,MAAMC,MAAM,GAAGvB,SAAS,CAAC,CAAC;EAC1BsB,KAAK,CAACvB,IAAI,CAACyB,SAAS,GAAG9B,YAAY,CAACI,oCAAoC,CAACC,IAAI,EAAEwB,MAAM,CAACxB,IAAI,EAAEuB,KAAK,CAACvB,IAAI,CAACyB,SAAS,CAAC;EACjH,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js

@@ -0,0 +1,27 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverCarouselNavClassNames = {
+    root: 'fui-TeachingPopoverCarouselNav'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        columnGap: tokens.spacingHorizontalXS,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        })
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselNavSlots,\n  TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverCarouselNavClassNames: SlotClassNames<TeachingPopoverCarouselNavSlots> = {\n  root: 'fui-TeachingPopoverCarouselNav',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    columnGap: tokens.spacingHorizontalXS,\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselNavStyles_unstable = (\n  state: TeachingPopoverCarouselNavState,\n): TeachingPopoverCarouselNavState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","display","flexDirection","columnGap","spacingHorizontalXS","alignItems","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,WAAWN,OAAOO,mBAAmB;QACrCC,YAAY;QACZC,gBAAgB;QAChB,GAAGV,gCAAgC;YACjCW,SAAS,GAAGV,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOY,iBAAiB,EAAE;YACvEC,cAAcb,OAAOc,kBAAkB;YACvC,GAAGhB,WAAWiB,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAMC,SAASf;IAEfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,qCAAqCC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAEhH,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/valueIdContext.js

@@ -0,0 +1,9 @@
+'use client';
+import * as React from 'react';
+const valueIdContext = React.createContext(undefined);
+export const valueIdContextDefaultValue = '';
+export const useValueIdContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(valueIdContext)) !== null && _React_useContext !== void 0 ? _React_useContext : valueIdContextDefaultValue;
+};
+export const ValueIdContextProvider = valueIdContext.Provider;

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNav/valueIdContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/valueIdContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst valueIdContext = React.createContext<string | undefined>(undefined);\n\nexport const valueIdContextDefaultValue = '';\n\nexport const useValueIdContext = (): string => React.useContext(valueIdContext) ?? valueIdContextDefaultValue;\n\nexport const ValueIdContextProvider = valueIdContext.Provider;\n"],"names":["React","valueIdContext","createContext","undefined","valueIdContextDefaultValue","useValueIdContext","useContext","ValueIdContextProvider","Provider"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAqBC;AAE/D,OAAO,MAAMC,6BAA6B,GAAG;AAE7C,OAAO,MAAMC,oBAAoB;QAAcL;WAAAA,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,6BAAjBD,+BAAAA,oBAAoCI;EAA2B;AAE9G,OAAO,MAAMG,yBAAyBN,eAAeO,QAAQ,CAAC"}