@fluentui/react-teaching-popover 9.5.6 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-teaching-popover
 
-This log was last generated on Fri, 04 Jul 2025 10:00:11 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.6.0)
+
+Thu, 17 Jul 2025 13:45:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.5.7..@fluentui/react-teaching-popover_v9.6.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-popover to v9.12.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-button to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.5.7)
+
+Fri, 11 Jul 2025 15:59:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.5.6..@fluentui/react-teaching-popover_v9.5.7)
+
+### Patches
+
+- Bump @fluentui/react-popover to v9.11.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+
 ## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-teaching-popover_v9.5.6)
 
-Fri, 04 Jul 2025 10:00:11 GMT 
+Fri, 04 Jul 2025 10:02:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-teaching-popover_v9.5.5..@fluentui/react-teaching-popover_v9.5.6)
 
 ### Patches

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

@@ -0,0 +1,53 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverBodyClassNames = {
+    root: 'fui-TeachingPopoverBody',
+    media: 'fui-TeachingPopoverBody__media'
+};
+const popoverBodyDimension = 288;
+export const useMediaStyles = makeStyles({
+    base: {
+        gridArea: 'media',
+        overflow: 'hidden',
+        width: 'auto',
+        marginBottom: '12px',
+        verticalAlign: 'middle',
+        justifyContent: 'center',
+        display: 'flex'
+    },
+    short: {
+        aspectRatio: popoverBodyDimension / 117,
+        '@supports not (aspect-ratio)': {
+            height: '117px'
+        }
+    },
+    medium: {
+        aspectRatio: popoverBodyDimension / 176,
+        '@supports not (aspect-ratio)': {
+            height: '176px'
+        }
+    },
+    tall: {
+        aspectRatio: 1,
+        '@supports not (aspect-ratio)': {
+            height: `${popoverBodyDimension}px`
+        }
+    }
+});
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '12px'
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{
+    'use no memo';
+    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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TeachingPopoverBodySlots, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverBodyClassNames: SlotClassNames<TeachingPopoverBodySlots> = {\n  root: 'fui-TeachingPopoverBody',\n  media: 'fui-TeachingPopoverBody__media',\n};\n\nconst popoverBodyDimension = 288;\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    overflow: 'hidden',\n    width: 'auto',\n    marginBottom: '12px',\n    verticalAlign: 'middle',\n    justifyContent: 'center',\n    display: 'flex',\n  },\n  short: {\n    aspectRatio: popoverBodyDimension / 117,\n    '@supports not (aspect-ratio)': {\n      height: '117px',\n    },\n  },\n  medium: {\n    aspectRatio: popoverBodyDimension / 176,\n    '@supports not (aspect-ratio)': {\n      height: '176px',\n    },\n  },\n  tall: {\n    aspectRatio: 1,\n    '@supports not (aspect-ratio)': {\n      height: `${popoverBodyDimension}px`,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    paddingBottom: '12px',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverBodyStyles_unstable = (state: TeachingPopoverBodyState) => {\n  'use no memo';\n\n  const { mediaLength } = state;\n  const styles = useStyles();\n  const mediaStyles = useMediaStyles();\n\n  state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      teachingPopoverBodyClassNames.media,\n      mediaStyles.base,\n      mediaStyles[mediaLength],\n      state.media.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverBodyClassNames","root","media","popoverBodyDimension","useMediaStyles","base","gridArea","overflow","width","marginBottom","verticalAlign","justifyContent","display","short","aspectRatio","height","medium","tall","useStyles","flexDirection","paddingBottom","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gCAA0E;IACrFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuB;AAE7B,OAAO,MAAMC,iBAAiBN,WAAW;IACvCO,MAAM;QACJC,UAAU;QACVC,UAAU;QACVC,OAAO;QACPC,cAAc;QACdC,eAAe;QACfC,gBAAgB;QAChBC,SAAS;IACX;IACAC,OAAO;QACLC,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAC,QAAQ;QACNF,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAE,MAAM;QACJH,aAAa;QACb,gCAAgC;YAC9BC,QAAQ,CAAC,EAAEZ,qBAAqB,EAAE,CAAC;QACrC;IACF;AACF,GAAG;AAEH,MAAMe,YAAYpB,WAAW;IAC3BG,MAAM;QACJW,SAAS;QACTO,eAAe;QACfC,eAAe;IACjB;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAME,SAASN;IACf,MAAMO,cAAcrB;IAEpBkB,MAAMrB,IAAI,CAACyB,SAAS,GAAG3B,aAAaC,8BAA8BC,IAAI,EAAEuB,OAAOvB,IAAI,EAAEqB,MAAMrB,IAAI,CAACyB,SAAS;IAEzG,IAAIJ,MAAMpB,KAAK,EAAE;QACfoB,MAAMpB,KAAK,CAACwB,SAAS,GAAG3B,aACtBC,8BAA8BE,KAAK,EACnCuB,YAAYpB,IAAI,EAChBoB,WAAW,CAACF,YAAY,EACxBD,MAAMpB,KAAK,CAACwB,SAAS;IAEzB;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarouselStyles.styles.raw.js

@@ -0,0 +1,14 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselClassNames = {
+    root: 'fui-TeachingPopoverCarousel'
+};
+// Todo: Page change animation & styles
+const useStyles = makeStyles({
+    root: {}
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/TeachingPopoverCarousel/useTeachingPopoverCarouselStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarouselStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TeachingPopoverCarouselSlots, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselClassNames: SlotClassNames<TeachingPopoverCarouselSlots> = {\n  root: 'fui-TeachingPopoverCarousel',\n};\n\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n  root: {},\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselStyles_unstable = (state: TeachingPopoverCarouselState) => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselClassNames","root","useStyles","useTeachingPopoverCarouselStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM,CAAC;AACT;AAEA,sCAAsC,GACtC,OAAO,MAAME,4CAA4C,CAACC;IACxD;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aAAaC,kCAAkCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAE7G,OAAOF;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.raw.js

@@ -0,0 +1,13 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselCardClassNames = {
+    root: 'fui-TeachingPopoverCarouselCard'
+};
+const useStyles = makeStyles({
+    root: {}
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselCardSlots,\n  TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselCardClassNames: SlotClassNames<TeachingPopoverCarouselCardSlots> = {\n  root: 'fui-TeachingPopoverCarouselCard',\n};\n\nconst useStyles = makeStyles({\n  root: {},\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselCardStyles_unstable = (state: TeachingPopoverCarouselCardState) => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselCardClassNames","root","useStyles","useTeachingPopoverCarouselCardStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,wCAA0F;IACrGC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM,CAAC;AACT;AAEA,sCAAsC,GACtC,OAAO,MAAME,gDAAgD,CAACC;IAC5D;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aAAaC,sCAAsCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAEjH,OAAOF;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.raw.js

@@ -0,0 +1,34 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselFooterClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooter',
+    previous: 'fui-TeachingPopoverCarouselFooter__previous',
+    next: 'fui-TeachingPopoverCarouselFooter__next'
+};
+// Todo: Page change animation & styles
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    rootCentered: {
+        justifyContent: 'space-between',
+        gap: '8px'
+    },
+    rootRightAligned: {
+        gap: '8px',
+        '& :first-child': {
+            marginInlineEnd: 'auto'
+        }
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { layout } = state;
+    state.root.className = mergeClasses(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
+    if (state.previous) {
+        state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
+    }
+    state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);
+    return state;
+};

package/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselFooterSlots,\n  TeachingPopoverCarouselFooterState,\n} from './TeachingPopoverCarouselFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselFooterClassNames: SlotClassNames<TeachingPopoverCarouselFooterSlots> = {\n  root: 'fui-TeachingPopoverCarouselFooter',\n  previous: 'fui-TeachingPopoverCarouselFooter__previous',\n  next: 'fui-TeachingPopoverCarouselFooter__next',\n};\n\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  rootCentered: {\n    justifyContent: 'space-between',\n    gap: '8px',\n  },\n  rootRightAligned: {\n    gap: '8px',\n    '& :first-child': {\n      marginInlineEnd: 'auto',\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselFooterStyles_unstable = (state: TeachingPopoverCarouselFooterState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { layout } = state;\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselFooterClassNames.root,\n    styles.root,\n    layout === 'centered' ? styles.rootCentered : styles.rootRightAligned,\n    state.root.className,\n  );\n\n  if (state.previous) {\n    state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);\n  }\n\n  state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselFooterClassNames","root","previous","next","useStyles","display","flexDirection","rootCentered","justifyContent","gap","rootRightAligned","marginInlineEnd","useTeachingPopoverCarouselFooterStyles_unstable","state","styles","layout","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,0CAA8F;IACzGC,MAAM;IACNC,UAAU;IACVC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,YAAYN,WAAW;IAC3BG,MAAM;QACJI,SAAS;QACTC,eAAe;IACjB;IACAC,cAAc;QACZC,gBAAgB;QAChBC,KAAK;IACP;IACAC,kBAAkB;QAChBD,KAAK;QACL,kBAAkB;YAChBE,iBAAiB;QACnB;IACF;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,kDAAkD,CAACC;IAC9D;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,MAAM,EAAE,GAAGF;IAEnBA,MAAMZ,IAAI,CAACe,SAAS,GAAGjB,aACrBC,wCAAwCC,IAAI,EAC5Ca,OAAOb,IAAI,EACXc,WAAW,aAAaD,OAAOP,YAAY,GAAGO,OAAOJ,gBAAgB,EACrEG,MAAMZ,IAAI,CAACe,SAAS;IAGtB,IAAIH,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACc,SAAS,GAAGjB,aAAaC,wCAAwCE,QAAQ,EAAEW,MAAMX,QAAQ,CAACc,SAAS;IACpH;IAEAH,MAAMV,IAAI,CAACa,SAAS,GAAGjB,aAAaC,wCAAwCG,IAAI,EAAEU,MAAMV,IAAI,CAACa,SAAS;IAEtG,OAAOH;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.raw.js

@@ -0,0 +1,54 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+export const teachingPopoverCarouselFooterButtonClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooterButton'
+};
+const useStyles = makeStyles({
+    root: {
+        minWidth: '96px'
+    },
+    brandNext: {
+        color: tokens.colorBrandForeground1,
+        backgroundColor: tokens.colorNeutralForegroundOnBrand,
+        ...shorthands.borderColor(tokens.colorTransparentBackground),
+        ':hover': {
+            color: tokens.colorCompoundBrandForeground1Hover,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            color: tokens.colorCompoundBrandForeground1Pressed,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    brandPrevious: {
+        // In brand, this is always 'NeutralForegroundOnBrand'
+        color: tokens.colorNeutralForegroundOnBrand,
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+        ':hover': {
+            color: tokens.colorNeutralForegroundOnBrand,
+            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: tokens.colorBrandBackgroundHover
+        },
+        ':hover:active': {
+            color: tokens.colorNeutralForegroundOnBrand,
+            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: tokens.colorBrandBackgroundPressed
+        }
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
+ */ export const useTeachingPopoverCarouselFooterButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { navType, popoverAppearance } = state;
+    // Apply underlying fluent Button styles
+    state = {
+        ...state,
+        ...useButtonStyles_unstable(state)
+    };
+    state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
+    return state;
+};

package/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselFooterButtonSlots,\n  TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\n\nexport const teachingPopoverCarouselFooterButtonClassNames: SlotClassNames<TeachingPopoverCarouselFooterButtonSlots> = {\n  root: 'fui-TeachingPopoverCarouselFooterButton',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    minWidth: '96px',\n  },\n  brandNext: {\n    color: tokens.colorBrandForeground1,\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorTransparentBackground),\n    ':hover': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':hover:active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  brandPrevious: {\n    // In brand, this is always 'NeutralForegroundOnBrand'\n    color: tokens.colorNeutralForegroundOnBrand,\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n      backgroundColor: tokens.colorBrandBackgroundHover,\n    },\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state\n */\nexport const useTeachingPopoverCarouselFooterButtonStyles_unstable = (\n  state: TeachingPopoverCarouselFooterButtonState,\n): TeachingPopoverCarouselFooterButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { navType, popoverAppearance } = state;\n\n  // Apply underlying fluent Button styles\n  state = {\n    ...state,\n    ...useButtonStyles_unstable(state),\n  };\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselFooterButtonClassNames.root,\n    styles.root,\n    navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious,\n    navType === 'next' && popoverAppearance === 'brand' && styles.brandNext,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","useButtonStyles_unstable","teachingPopoverCarouselFooterButtonClassNames","root","useStyles","minWidth","brandNext","color","colorBrandForeground1","backgroundColor","colorNeutralForegroundOnBrand","borderColor","colorTransparentBackground","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","brandPrevious","colorBrandBackground","colorBrandBackgroundHover","colorBrandBackgroundPressed","useTeachingPopoverCarouselFooterButtonStyles_unstable","state","styles","navType","popoverAppearance","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,OAAO,MAAMC,gDAA0G;IACrHC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;IACZ;IACAC,WAAW;QACTC,OAAOP,OAAOQ,qBAAqB;QACnCC,iBAAiBT,OAAOU,6BAA6B;QACrD,GAAGX,WAAWY,WAAW,CAACX,OAAOY,0BAA0B,CAAC;QAC5D,UAAU;YACRL,OAAOP,OAAOa,kCAAkC;YAChDJ,iBAAiBT,OAAOU,6BAA6B;QACvD;QACA,iBAAiB;YACfH,OAAOP,OAAOc,oCAAoC;YAClDL,iBAAiBT,OAAOU,6BAA6B;QACvD;IACF;IACAK,eAAe;QACb,sDAAsD;QACtDR,OAAOP,OAAOU,6BAA6B;QAC3CD,iBAAiBT,OAAOgB,oBAAoB;QAC5C,GAAGjB,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;QAC/D,UAAU;YACRH,OAAOP,OAAOU,6BAA6B;YAC3C,GAAGX,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;YAC/DD,iBAAiBT,OAAOiB,yBAAyB;QACnD;QACA,iBAAiB;YACfV,OAAOP,OAAOU,6BAA6B;YAC3C,GAAGX,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;YAC/DD,iBAAiBT,OAAOkB,2BAA2B;QACrD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wDAAwD,CACnEC;IAEA;IAEA,MAAMC,SAASjB;IACf,MAAM,EAAEkB,OAAO,EAAEC,iBAAiB,EAAE,GAAGH;IAEvC,wCAAwC;IACxCA,QAAQ;QACN,GAAGA,KAAK;QACR,GAAGnB,yBAAyBmB,MAAM;IACpC;IAEAA,MAAMjB,IAAI,CAACqB,SAAS,GAAG1B,aACrBI,8CAA8CC,IAAI,EAClDkB,OAAOlB,IAAI,EACXmB,YAAY,UAAUC,sBAAsB,WAAWF,OAAON,aAAa,EAC3EO,YAAY,UAAUC,sBAAsB,WAAWF,OAAOf,SAAS,EACvEc,MAAMjB,IAAI,CAACqB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js

@@ -0,0 +1,26 @@
+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;
+};

package/lib/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts"],"sourcesContent":["import { 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 = (state: 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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,CAAC,EAAEV,OAAOW,gBAAgB,CAAC,OAAO,EAAEX,OAAOY,iBAAiB,CAAC,CAAC;YACvEC,cAAcb,OAAOc,kBAAkB;YACvC,GAAGhB,WAAWiB,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,+CAA+C,CAACC;IAC3D;IAEA,MAAMC,SAASf;IAEfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,qCAAqCC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAEhH,OAAOF;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.raw.js

@@ -0,0 +1,71 @@
+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;
+};

package/lib/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselNavButton/useTeachingPopoverCarouselNavButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselNavButtonSlots,\n  TeachingPopoverCarouselNavButtonState,\n} from './TeachingPopoverCarouselNavButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const teachingPopoverCarouselNavButtonClassNames: SlotClassNames<TeachingPopoverCarouselNavButtonSlots> = {\n  root: 'fui-TeachingPopoverCarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    cursor: 'pointer',\n    boxSizing: 'border-box',\n    height: '8px',\n    width: '8px',\n    backgroundColor: tokens.colorBrandBackground,\n  },\n  rootUnselected: {\n    border: 'none',\n    borderRadius: '50%',\n    padding: '0px',\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n  rootSelected: {\n    outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n    width: '16px',\n    border: 'none',\n    borderRadius: '4px',\n    padding: '0px',\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rootBrand: {\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n  },\n  rootBrandUnselected: {\n    backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n    '@supports not (color: color-mix(in lch, white, black))': {\n      // This will also affect the focus border, but only in older unsupported browsers\n      opacity: 0.3,\n      backgroundColor: tokens.colorBrandBackground,\n    },\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */\nexport const useTeachingPopoverCarouselNavButtonStyles_unstable = (\n  state: TeachingPopoverCarouselNavButtonState,\n): TeachingPopoverCarouselNavButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, isSelected } = state;\n\n  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselNavButtonClassNames.root,\n    styles.root,\n    isSelected ? styles.rootSelected : styles.rootUnselected,\n    appearance === 'brand' && brandStyles,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","display","cursor","boxSizing","height","width","backgroundColor","colorBrandBackground","rootUnselected","border","borderRadius","padding","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","borderRadiusMedium","borderColor","opacity","rootSelected","rootBrand","colorNeutralForegroundOnBrand","rootBrandUnselected","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,6CAAoG;IAC/GC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,QAAQ;QACRC,WAAW;QACXC,QAAQ;QACRC,OAAO;QACPC,iBAAiBV,OAAOW,oBAAoB;IAC9C;IACAC,gBAAgB;QACdC,QAAQ;QACRC,cAAc;QACdC,SAAS;QACTC,SAAS,CAAC,EAAEhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtD,GAAGhB,gCAAgC;YACjCe,SAAS,CAAC,EAAEhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,CAAC,CAAC;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFX,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOW,oBAAoB,CAAC,kBAAkB,CAAC;QACtF,0DAA0D;YACxD,iFAAiF;YACjFW,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;IACAY,cAAc;QACZP,SAAS,CAAC,EAAEhB,OAAOiB,eAAe,CAAC,kBAAkB,CAAC;QACtDR,OAAO;QACPI,QAAQ;QACRC,cAAc;QACdC,SAAS;QACT,GAAGd,gCAAgC;YACjCe,SAAS,CAAC,EAAEhB,OAAOkB,gBAAgB,CAAC,OAAO,EAAElB,OAAOmB,iBAAiB,CAAC,CAAC;YACvEL,cAAcd,OAAOoB,kBAAkB;YACvC,GAAGrB,WAAWsB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACF,kCAAkC;YAChCX,iBAAiB;QACnB;IACF;IACAc,WAAW;QACTd,iBAAiBV,OAAOyB,6BAA6B;IACvD;IACAC,qBAAqB;QACnBhB,iBAAiB,CAAC,mBAAmB,EAAEV,OAAOyB,6BAA6B,CAAC,kBAAkB,CAAC;QAC/F,0DAA0D;YACxD,iFAAiF;YACjFH,SAAS;YACTZ,iBAAiBV,OAAOW,oBAAoB;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMgB,qDAAqD,CAChEC;IAEA;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,UAAU,EAAEC,UAAU,EAAE,GAAGH;IAEnC,MAAMI,cAAcD,aAAaF,OAAOL,SAAS,GAAGK,OAAOH,mBAAmB;IAE9EE,MAAMzB,IAAI,CAAC8B,SAAS,GAAGnC,aACrBI,2CAA2CC,IAAI,EAC/C0B,OAAO1B,IAAI,EACX4B,aAAaF,OAAON,YAAY,GAAGM,OAAOjB,cAAc,EACxDkB,eAAe,WAAWE,aAC1BJ,MAAMzB,IAAI,CAAC8B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.raw.js

@@ -0,0 +1,21 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselPageCountClassNames = {
+    root: 'fui-TeachingPopoverCarouselPageCount'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state
+ */ export const useTeachingPopoverCarouselPageCountStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountSlots,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\n\nexport const teachingPopoverCarouselPageCountClassNames: SlotClassNames<TeachingPopoverCarouselPageCountSlots> = {\n  root: 'fui-TeachingPopoverCarouselPageCount',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state\n */\nexport const useTeachingPopoverCarouselPageCountStyles_unstable = (\n  state: TeachingPopoverCarouselPageCountState,\n): TeachingPopoverCarouselPageCountState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselPageCountClassNames.root,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselPageCountClassNames","root","useStyles","display","alignItems","justifyContent","useTeachingPopoverCarouselPageCountStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,6CAAoG;IAC/GC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qDAAqD,CAChEC;IAEA;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGV,aACrBC,2CAA2CC,IAAI,EAC/CO,OAAOP,IAAI,EACXM,MAAMN,IAAI,CAACQ,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.raw.js

@@ -0,0 +1,55 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverFooterClassNames = {
+    root: 'fui-TeachingPopoverFooter',
+    primary: 'fui-TeachingPopoverFooter__primary',
+    secondary: 'fui-TeachingPopoverFooter__secondary'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        gap: '8px',
+        paddingTop: '12px'
+    },
+    rootVertical: {
+        flexDirection: 'column'
+    },
+    rootHorizontal: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
+    },
+    buttonRootVertical: {
+        width: 'auto',
+        borderRadius: '4px'
+    },
+    buttonRootHorizontal: {
+        minWidth: '96px',
+        borderRadius: '4px'
+    },
+    brandSecondary: {
+        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand)
+    },
+    brandPrimary: {
+        color: tokens.colorBrandForeground1,
+        backgroundColor: tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            color: tokens.colorCompoundBrandForeground1Hover,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            color: tokens.colorCompoundBrandForeground1Pressed,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        }
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance, footerLayout } = state;
+    state.root.className = mergeClasses(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);
+    if (state.secondary) {
+        state.secondary.className = mergeClasses(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);
+    }
+    state.primary.className = mergeClasses(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);
+    return state;
+};

package/lib/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TeachingPopoverFooterSlots, TeachingPopoverFooterState } from './TeachingPopoverFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverFooterClassNames: SlotClassNames<TeachingPopoverFooterSlots> = {\n  root: 'fui-TeachingPopoverFooter',\n  primary: 'fui-TeachingPopoverFooter__primary',\n  secondary: 'fui-TeachingPopoverFooter__secondary',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    gap: '8px',\n    paddingTop: '12px',\n  },\n  rootVertical: {\n    flexDirection: 'column',\n  },\n  rootHorizontal: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n  },\n  buttonRootVertical: {\n    width: 'auto',\n    borderRadius: '4px',\n  },\n  buttonRootHorizontal: {\n    minWidth: '96px',\n    borderRadius: '4px',\n  },\n  brandSecondary: {\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n  },\n  brandPrimary: {\n    color: tokens.colorBrandForeground1,\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    ':hover': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':hover:active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverFooterStyles_unstable = (state: TeachingPopoverFooterState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, footerLayout } = state;\n\n  state.root.className = mergeClasses(\n    teachingPopoverFooterClassNames.root,\n    styles.root,\n    footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical,\n    state.root.className,\n  );\n  if (state.secondary) {\n    state.secondary.className = mergeClasses(\n      teachingPopoverFooterClassNames.secondary,\n      footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical,\n      appearance === 'brand' ? styles.brandSecondary : undefined,\n      state.secondary.className,\n    );\n  }\n  state.primary.className = mergeClasses(\n    teachingPopoverFooterClassNames.primary,\n    footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical,\n    appearance === 'brand' ? styles.brandPrimary : undefined,\n    state.primary.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","teachingPopoverFooterClassNames","root","primary","secondary","useStyles","display","gap","paddingTop","rootVertical","flexDirection","rootHorizontal","justifyContent","buttonRootVertical","width","borderRadius","buttonRootHorizontal","minWidth","brandSecondary","borderColor","colorNeutralForegroundOnBrand","brandPrimary","color","colorBrandForeground1","backgroundColor","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","useTeachingPopoverFooterStyles_unstable","state","styles","appearance","footerLayout","className","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,kCAA8E;IACzFC,MAAM;IACNC,SAAS;IACTC,WAAW;AACb,EAAE;AAEF,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,KAAK;QACLC,YAAY;IACd;IACAC,cAAc;QACZC,eAAe;IACjB;IACAC,gBAAgB;QACdD,eAAe;QACfE,gBAAgB;IAClB;IACAC,oBAAoB;QAClBC,OAAO;QACPC,cAAc;IAChB;IACAC,sBAAsB;QACpBC,UAAU;QACVF,cAAc;IAChB;IACAG,gBAAgB;QACd,GAAGnB,WAAWoB,WAAW,CAACnB,OAAOoB,6BAA6B,CAAC;IACjE;IACAC,cAAc;QACZC,OAAOtB,OAAOuB,qBAAqB;QACnCC,iBAAiBxB,OAAOoB,6BAA6B;QACrD,UAAU;YACRE,OAAOtB,OAAOyB,kCAAkC;YAChDD,iBAAiBxB,OAAOoB,6BAA6B;QACvD;QACA,iBAAiB;YACfE,OAAOtB,OAAO0B,oCAAoC;YAClDF,iBAAiBxB,OAAOoB,6BAA6B;QACvD;IACF;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMO,0CAA0C,CAACC;IACtD;IAEA,MAAMC,SAASxB;IACf,MAAM,EAAEyB,UAAU,EAAEC,YAAY,EAAE,GAAGH;IAErCA,MAAM1B,IAAI,CAAC8B,SAAS,GAAGlC,aACrBG,gCAAgCC,IAAI,EACpC2B,OAAO3B,IAAI,EACX6B,iBAAiB,eAAeF,OAAOlB,cAAc,GAAGkB,OAAOpB,YAAY,EAC3EmB,MAAM1B,IAAI,CAAC8B,SAAS;IAEtB,IAAIJ,MAAMxB,SAAS,EAAE;QACnBwB,MAAMxB,SAAS,CAAC4B,SAAS,GAAGlC,aAC1BG,gCAAgCG,SAAS,EACzC2B,iBAAiB,eAAeF,OAAOb,oBAAoB,GAAGa,OAAOhB,kBAAkB,EACvFiB,eAAe,UAAUD,OAAOX,cAAc,GAAGe,WACjDL,MAAMxB,SAAS,CAAC4B,SAAS;IAE7B;IACAJ,MAAMzB,OAAO,CAAC6B,SAAS,GAAGlC,aACxBG,gCAAgCE,OAAO,EACvC4B,iBAAiB,eAAeF,OAAOb,oBAAoB,GAAGa,OAAOhB,kBAAkB,EACvFiB,eAAe,UAAUD,OAAOR,YAAY,GAAGY,WAC/CL,MAAMzB,OAAO,CAAC6B,SAAS;IAGzB,OAAOJ;AACT,EAAE"}

package/lib/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.raw.js

@@ -0,0 +1,81 @@
+import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const teachingPopoverHeaderClassNames = {
+    root: 'fui-TeachingPopoverHeader',
+    dismissButton: 'fui-TeachingPopoverHeader__dismissButton',
+    icon: 'fui-TeachingPopoverHeader__icon'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        color: tokens.colorNeutralForeground3,
+        fontWeight: tokens.fontWeightSemibold,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        paddingBottom: tokens.spacingVerticalXS,
+        alignItems: 'center',
+        marginTop: tokens.spacingHorizontalNone,
+        marginBottom: tokens.spacingHorizontalNone
+    },
+    rootBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    dismissButton: {
+        color: tokens.colorNeutralForeground2,
+        position: 'relative',
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        ...typographyStyles.body1,
+        backgroundColor: tokens.colorTransparentBackground,
+        boxSizing: 'border-box',
+        borderTopRightRadius: tokens.borderRadiusNone,
+        borderBottomRightRadius: tokens.borderRadiusNone,
+        borderRightStyle: 'none',
+        marginInlineStart: 'auto',
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        })
+    },
+    dismissBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    icon: {
+        height: tokens.fontSizeBase200,
+        width: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        fontSize: tokens.fontSizeBase200,
+        alignItems: 'center',
+        boxSizing: 'content-box',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        textDecorationLine: 'none',
+        verticalAlign: 'middle',
+        position: 'relative',
+        backgroundColor: tokens.colorTransparentBackground,
+        color: tokens.colorNeutralForeground2,
+        marginInlineEnd: tokens.spacingHorizontalXS
+    },
+    iconBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = mergeClasses(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+    if (state.dismissButton) {
+        state.dismissButton.className = mergeClasses(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(teachingPopoverHeaderClassNames.icon, styles.icon, appearance === 'brand' ? styles.iconBrand : undefined, state.icon.className);
+    }
+    return state;
+};

package/lib/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { TeachingPopoverHeaderSlots, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverHeaderClassNames: SlotClassNames<TeachingPopoverHeaderSlots> = {\n  root: 'fui-TeachingPopoverHeader',\n  dismissButton: 'fui-TeachingPopoverHeader__dismissButton',\n  icon: 'fui-TeachingPopoverHeader__icon',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    color: tokens.colorNeutralForeground3,\n    fontWeight: tokens.fontWeightSemibold,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    paddingBottom: tokens.spacingVerticalXS,\n    alignItems: 'center',\n    marginTop: tokens.spacingHorizontalNone,\n    marginBottom: tokens.spacingHorizontalNone,\n  },\n  rootBrand: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  dismissButton: {\n    color: tokens.colorNeutralForeground2,\n    position: 'relative',\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    display: 'flex',\n    alignItems: 'center',\n    cursor: 'pointer',\n    ...typographyStyles.body1,\n    backgroundColor: tokens.colorTransparentBackground,\n    boxSizing: 'border-box',\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n    borderRightStyle: 'none',\n    marginInlineStart: 'auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n  },\n  dismissBrand: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  icon: {\n    height: tokens.fontSizeBase200,\n    width: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    fontSize: tokens.fontSizeBase200,\n    alignItems: 'center',\n    boxSizing: 'content-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n    marginInlineEnd: tokens.spacingHorizontalXS,\n  },\n  iconBrand: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverHeaderStyles_unstable = (state: TeachingPopoverHeaderState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance } = state;\n\n  state.root.className = mergeClasses(\n    teachingPopoverHeaderClassNames.root,\n    styles.root,\n    appearance === 'brand' && styles.rootBrand,\n    state.root.className,\n  );\n\n  if (state.dismissButton) {\n    state.dismissButton.className = mergeClasses(\n      teachingPopoverHeaderClassNames.dismissButton,\n      styles.dismissButton,\n      appearance === 'brand' ? styles.dismissBrand : undefined,\n      state.dismissButton.className,\n    );\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      teachingPopoverHeaderClassNames.icon,\n      styles.icon,\n      appearance === 'brand' ? styles.iconBrand : undefined,\n      state.icon.className,\n    );\n  }\n  return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverHeaderClassNames","root","dismissButton","icon","useStyles","display","flexDirection","color","colorNeutralForeground3","fontWeight","fontWeightSemibold","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","paddingBottom","spacingVerticalXS","alignItems","marginTop","spacingHorizontalNone","marginBottom","rootBrand","colorNeutralForegroundOnBrand","colorNeutralForeground2","position","border","strokeWidthThin","colorTransparentStroke","cursor","body1","backgroundColor","colorTransparentBackground","boxSizing","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","marginInlineStart","padding","spacingHorizontalXS","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","dismissBrand","height","width","justifyContent","textDecorationLine","verticalAlign","marginInlineEnd","iconBrand","useTeachingPopoverHeaderStyles_unstable","state","styles","appearance","className","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,kCAA8E;IACzFC,MAAM;IACNC,eAAe;IACfC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BM,MAAM;QACJI,SAAS;QACTC,eAAe;QACfC,OAAOT,OAAOU,uBAAuB;QACrCC,YAAYX,OAAOY,kBAAkB;QACrCC,UAAUb,OAAOc,eAAe;QAChCC,YAAYf,OAAOgB,iBAAiB;QACpCC,eAAejB,OAAOkB,iBAAiB;QACvCC,YAAY;QACZC,WAAWpB,OAAOqB,qBAAqB;QACvCC,cAActB,OAAOqB,qBAAqB;IAC5C;IACAE,WAAW;QACTd,OAAOT,OAAOwB,6BAA6B;IAC7C;IACApB,eAAe;QACbK,OAAOT,OAAOyB,uBAAuB;QACrCC,UAAU;QACVC,QAAQ,CAAC,EAAE3B,OAAO4B,eAAe,CAAC,OAAO,EAAE5B,OAAO6B,sBAAsB,CAAC,CAAC;QAC1EtB,SAAS;QACTY,YAAY;QACZW,QAAQ;QACR,GAAG7B,iBAAiB8B,KAAK;QACzBC,iBAAiBhC,OAAOiC,0BAA0B;QAClDC,WAAW;QACXC,sBAAsBnC,OAAOoC,gBAAgB;QAC7CC,yBAAyBrC,OAAOoC,gBAAgB;QAChDE,kBAAkB;QAClBC,mBAAmB;QACnBC,SAAS,CAAC,EAAExC,OAAOkB,iBAAiB,CAAC,CAAC,EAAElB,OAAOyC,mBAAmB,CAAC,CAAC;QACpE,GAAG1C,gCAAgC;YACjC2C,SAAS,CAAC,EAAE1C,OAAO2C,gBAAgB,CAAC,OAAO,EAAE3C,OAAO4C,iBAAiB,CAAC,CAAC;YACvEC,cAAc7C,OAAO8C,kBAAkB;YACvC,GAAGlD,WAAWmD,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;IACAC,cAAc;QACZvC,OAAOT,OAAOwB,6BAA6B;IAC7C;IACAnB,MAAM;QACJ4C,QAAQjD,OAAOc,eAAe;QAC9BoC,OAAOlD,OAAOc,eAAe;QAC7BC,YAAYf,OAAOgB,iBAAiB;QACpCH,UAAUb,OAAOc,eAAe;QAChCK,YAAY;QACZe,WAAW;QACX3B,SAAS;QACT4C,gBAAgB;QAChBC,oBAAoB;QACpBC,eAAe;QACf3B,UAAU;QACVM,iBAAiBhC,OAAOiC,0BAA0B;QAClDxB,OAAOT,OAAOyB,uBAAuB;QACrC6B,iBAAiBtD,OAAOyC,mBAAmB;IAC7C;IACAc,WAAW;QACT9C,OAAOT,OAAOwB,6BAA6B;IAC7C;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMgC,0CAA0C,CAACC;IACtD;IAEA,MAAMC,SAASpD;IACf,MAAM,EAAEqD,UAAU,EAAE,GAAGF;IAEvBA,MAAMtD,IAAI,CAACyD,SAAS,GAAG9D,aACrBI,gCAAgCC,IAAI,EACpCuD,OAAOvD,IAAI,EACXwD,eAAe,WAAWD,OAAOnC,SAAS,EAC1CkC,MAAMtD,IAAI,CAACyD,SAAS;IAGtB,IAAIH,MAAMrD,aAAa,EAAE;QACvBqD,MAAMrD,aAAa,CAACwD,SAAS,GAAG9D,aAC9BI,gCAAgCE,aAAa,EAC7CsD,OAAOtD,aAAa,EACpBuD,eAAe,UAAUD,OAAOV,YAAY,GAAGa,WAC/CJ,MAAMrD,aAAa,CAACwD,SAAS;IAEjC;IAEA,IAAIH,MAAMpD,IAAI,EAAE;QACdoD,MAAMpD,IAAI,CAACuD,SAAS,GAAG9D,aACrBI,gCAAgCG,IAAI,EACpCqD,OAAOrD,IAAI,EACXsD,eAAe,UAAUD,OAAOH,SAAS,GAAGM,WAC5CJ,MAAMpD,IAAI,CAACuD,SAAS;IAExB;IACA,OAAOH;AACT,EAAE"}

package/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.raw.js

@@ -0,0 +1,24 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverSurfaceClassNames = {
+    root: 'fui-TeachingPopoverSurface'
+};
+const useStyles = makeStyles({
+    root: {
+        padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,
+        borderRadius: tokens.borderRadiusXLarge,
+        minWidth: '320px',
+        boxSizing: 'border-box'
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverSurface slots based on the state
+ */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    // Make sure to merge teaching bubble surface prior to popover styles
+    state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
+    const updatedState = usePopoverSurfaceStyles_unstable(state);
+    return updatedState;
+};

package/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverSurfaceClassNames: SlotClassNames<TeachingPopoverSurfaceSlots> = {\n  root: 'fui-TeachingPopoverSurface',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    minWidth: '320px',\n    boxSizing: 'border-box',\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverSurface slots based on the state\n */\nexport const useTeachingPopoverSurfaceStyles_unstable = (\n  state: TeachingPopoverSurfaceState,\n): TeachingPopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // Make sure to merge teaching bubble surface prior to popover styles\n  state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n\n  const updatedState = usePopoverSurfaceStyles_unstable(state);\n\n  return updatedState;\n};\n"],"names":["makeStyles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","padding","spacingVerticalL","borderRadius","borderRadiusXLarge","minWidth","boxSizing","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gCAAgC,QAAQ,0BAA0B;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAEJ,OAAOK,gBAAgB,CAAC,CAAC,EAAEL,OAAOK,gBAAgB,CAAC,CAAC;QAChEC,cAAcN,OAAOO,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAAST;IAEf,qEAAqE;IACrEQ,MAAMT,IAAI,CAACW,SAAS,GAAGf,aAAaG,iCAAiCC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE5G,MAAMC,eAAef,iCAAiCY;IAEtD,OAAOG;AACT,EAAE"}