feat: Fluent UI Outlook Lite + connections mockup

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

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

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

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

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

@@ -0,0 +1,3 @@
+/**
+ * TeachingPopoverCarouselNavButton State
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * TeachingPopoverCarouselNavButton Props\n */\nexport type TeachingPopoverCarouselNavButtonProps = ComponentProps<TeachingPopoverCarouselNavButtonSlots>;\n\n/**\n * TeachingPopoverCarouselNavButton State\n */\nexport type TeachingPopoverCarouselNavButtonState = ComponentState<TeachingPopoverCarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  isSelected?: boolean;\n} & Pick<PopoverContextValue, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAK4C"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton';
+export { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';
+export { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';
+export { teachingPopoverCarouselNavButtonClassNames, useTeachingPopoverCarouselNavButtonStyles_unstable } from './useTeachingPopoverCarouselNavButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNavButton } from './TeachingPopoverCarouselNavButton';\nexport type {\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nexport { renderTeachingPopoverCarouselNavButton_unstable } from './renderTeachingPopoverCarouselNavButton';\nexport { useTeachingPopoverCarouselNavButton_unstable } from './useTeachingPopoverCarouselNavButton';\nexport {\n  teachingPopoverCarouselNavButtonClassNames,\n  useTeachingPopoverCarouselNavButtonStyles_unstable,\n} from './useTeachingPopoverCarouselNavButtonStyles.styles';\n"],"names":["TeachingPopoverCarouselNavButton","renderTeachingPopoverCarouselNavButton_unstable","useTeachingPopoverCarouselNavButton_unstable","teachingPopoverCarouselNavButtonClassNames","useTeachingPopoverCarouselNavButtonStyles_unstable"],"mappings":"AAAA,SAASA,gCAAgC,QAAQ,qCAAqC;AAMtF,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SACEC,0CAA0C,EAC1CC,kDAAkD,QAC7C,qDAAqD"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.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 TeachingPopoverCarouselNavButton
+ */ export const renderTeachingPopoverCarouselNavButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/renderTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselNavButtonState,\n  TeachingPopoverCarouselNavButtonSlots,\n} from './TeachingPopoverCarouselNavButton.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselNavButton\n */\nexport const renderTeachingPopoverCarouselNavButton_unstable = (\n  state: TeachingPopoverCarouselNavButtonState,\n): JSXElement => {\n  assertSlots<TeachingPopoverCarouselNavButtonSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselNavButton_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD;;CAEC,GACD,OAAO,MAAMC,kDAAkD,CAC7DC;IAEAF,YAAmDE;IAEnD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,54 @@
+'use client';
+import * as React from 'react';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { usePopoverContext_unstable } from '@fluentui/react-popover';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';
+import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';
+import { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';
+/**
+ * Create the state required to render TeachingPopoverCarouselNavButton.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselNavButton_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselNavButton
+ * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton
+ */ export const useTeachingPopoverCarouselNavButton_unstable = (props, ref)=>{
+    const { onClick, as = 'a' } = props;
+    const value = useValueIdContext();
+    const appearance = usePopoverContext_unstable((context)=>context.appearance);
+    const selectPageByValue = useCarouselContext_unstable((c)=>c.selectPageByValue);
+    const isSelected = useCarouselContext_unstable((c)=>c.value === value);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            selectPageByValue(event, value);
+        }
+    });
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: isSelected
+        }
+    });
+    const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: ref,
+            role: 'tab',
+            type: 'button',
+            'aria-selected': `${!!isSelected}`,
+            ...defaultTabProps
+        }
+    });
+    _carouselButton.onClick = handleClick;
+    const state = {
+        isSelected,
+        appearance,
+        components: {
+            root: 'button'
+        },
+        root: _carouselButton
+    };
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback } from '@fluentui/react-utilities';\n\nimport type {\n  TeachingPopoverCarouselNavButtonProps,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\nimport { useValueIdContext } from '../TeachingPopoverCarouselNav/valueIdContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselNavButton.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselNavButtonStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselNavButton_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselNavButton\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNavButton\n */\nexport const useTeachingPopoverCarouselNavButton_unstable = (\n  props: TeachingPopoverCarouselNavButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): TeachingPopoverCarouselNavButtonState => {\n  const { onClick, as = 'a' } = props;\n\n  const value = useValueIdContext();\n\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const selectPageByValue = useCarouselContext_unstable(c => c.selectPageByValue);\n  const isSelected = useCarouselContext_unstable(c => c.value === value);\n\n  const handleClick: ARIAButtonSlotProps<'a'>['onClick'] = useEventCallback(event => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented && isHTMLElement(event.target)) {\n      selectPageByValue(event, value);\n    }\n  });\n\n  const defaultTabProps = useTabsterAttributes({\n    focusable: { isDefault: isSelected },\n  });\n\n  const _carouselButton = slot.always<ARIAButtonSlotProps<'a'>>(\n    getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n    {\n      elementType: 'button',\n      defaultProps: {\n        ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n        role: 'tab',\n        type: 'button',\n        'aria-selected': `${!!isSelected}`,\n        ...defaultTabProps,\n      },\n    },\n  );\n\n  _carouselButton.onClick = handleClick;\n\n  const state: TeachingPopoverCarouselNavButtonState = {\n    isSelected,\n    appearance,\n    components: {\n      root: 'button',\n    },\n    root: _carouselButton,\n  };\n\n  return state;\n};\n"],"names":["React","useARIAButtonProps","usePopoverContext_unstable","useTabsterAttributes","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useCarouselContext_unstable","useValueIdContext","useTeachingPopoverCarouselNavButton_unstable","props","ref","onClick","as","value","appearance","context","selectPageByValue","c","isSelected","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","_carouselButton","always","elementType","defaultProps","role","type","state","components","root"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAM5G,SAASC,2BAA2B,QAAQ,sDAAsD;AAClG,SAASC,iBAAiB,QAAQ,+CAA+C;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,GAAG,EAAE,GAAGH;IAE9B,MAAMI,QAAQN;IAEd,MAAMO,aAAad,2BAA2Be,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,oBAAoBV,4BAA4BW,CAAAA,IAAKA,EAAED,iBAAiB;IAC9E,MAAME,aAAaZ,4BAA4BW,CAAAA,IAAKA,EAAEJ,KAAK,KAAKA;IAEhE,MAAMM,cAAmDd,iBAAiBe,CAAAA;QACxET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIlB,cAAciB,MAAME,MAAM,GAAG;YAC1DN,kBAAkBI,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBtB,qBAAqB;QAC3CuB,WAAW;YAAEC,WAAWP;QAAW;IACrC;IAEA,MAAMQ,kBAAkBtB,KAAKuB,MAAM,CACjCzB,yBAAyBU,IAAIb,mBAAmBU,MAAMG,EAAE,EAAEH,SAC1D;QACEmB,aAAa;QACbC,cAAc;YACZnB,KAAKA;YACLoB,MAAM;YACNC,MAAM;YACN,iBAAiB,GAAG,CAAC,CAACb,YAAY;YAClC,GAAGK,eAAe;QACpB;IACF;IAGFG,gBAAgBf,OAAO,GAAGQ;IAE1B,MAAMa,QAA+C;QACnDd;QACAJ;QACAmB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR;IACR;IAEA,OAAOM;AACT,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.js

@@ -0,0 +1,171 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const teachingPopoverCarouselNavButtonClassNames = {
+  root: 'fui-TeachingPopoverCarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bceei9c: "f1k6fduh",
+    B7ck84d: "f1ewtqcl",
+    Bqenvij: "f1x82gua",
+    a9b677: "f1o3cbw4",
+    De3pzq: "ffp7eso"
+  },
+  rootUnselected: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f5q2cvs",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    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"],
+    De3pzq: "frgiif3",
+    o2ey54: "fawpdd5",
+    C3llkk: "feyhbel"
+  },
+  rootSelected: {
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f71xx7",
+    a9b677: "fjw5fx7",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ff3glw6",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
+    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"],
+    By8wz76: "f1wgxgin"
+  },
+  rootBrand: {
+    De3pzq: "f10s6wn9"
+  },
+  rootBrandUnselected: {
+    De3pzq: "frxe7el",
+    o2ey54: "fawpdd5",
+    C3llkk: "feyhbel"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1k6fduh{cursor:pointer;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1x82gua{height:8px;}", ".f1o3cbw4{width:8px;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], [".f5q2cvs{border-radius:50%;}", {
+    p: -1
+  }], [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], [".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;}", ".frgiif3{background-color:color-mix(in srgb, var(--colorBrandBackground) 30%, transparent);}", [".f71xx7{outline:var(--strokeWidthThin) solid transparent;}", {
+    p: -1
+  }], ".fjw5fx7{width:16px;}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], [".ff3glw6{border-radius:4px;}", {
+    p: -1
+  }], [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], [".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".frxe7el{background-color:color-mix(in srgb, var(--colorNeutralForegroundOnBrand) 30%, transparent);}"],
+  t: ["@supports not (color: color-mix(in lch, white, black)){.fawpdd5{opacity:0.3;}}", "@supports not (color: color-mix(in lch, white, black)){.feyhbel{background-color:var(--colorBrandBackground);}}"],
+  m: [["@media (forced-colors: active){.f1wgxgin{background-color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state
+ */
+export const useTeachingPopoverCarouselNavButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    appearance,
+    isSelected
+  } = state;
+  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+  state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.raw.js

@@ -0,0 +1,72 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const teachingPopoverCarouselNavButtonClassNames = {
+    root: 'fui-TeachingPopoverCarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        height: '8px',
+        width: '8px',
+        backgroundColor: tokens.colorBrandBackground
+    },
+    rootUnselected: {
+        border: 'none',
+        borderRadius: '50%',
+        padding: '0px',
+        outline: `${tokens.strokeWidthThin} solid transparent`,
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        }),
+        backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,
+        '@supports not (color: color-mix(in lch, white, black))': {
+            // This will also affect the focus border, but only in older unsupported browsers
+            opacity: 0.3,
+            backgroundColor: tokens.colorBrandBackground
+        }
+    },
+    rootSelected: {
+        outline: `${tokens.strokeWidthThin} solid transparent`,
+        width: '16px',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '0px',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        }),
+        '@media (forced-colors: active)': {
+            backgroundColor: 'CanvasText'
+        }
+    },
+    rootBrand: {
+        backgroundColor: tokens.colorNeutralForegroundOnBrand
+    },
+    rootBrandUnselected: {
+        backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,
+        '@supports not (color: color-mix(in lch, white, black))': {
+            // This will also affect the focus border, but only in older unsupported browsers
+            opacity: 0.3,
+            backgroundColor: tokens.colorBrandBackground
+        }
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state
+ */ export const useTeachingPopoverCarouselNavButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance, isSelected } = state;
+    const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+    state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
+    return state;
+};