@fluentui/react-teaching-popover 9.5.6 → 9.6.0

package/lib/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.raw.js

@@ -0,0 +1,56 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const teachingPopoverTitleClassNames = {
+    root: 'fui-TeachingPopoverTitle',
+    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        fontSize: tokens.fontSizeBase400,
+        fontWeight: tokens.fontWeightSemibold,
+        color: tokens.colorNeutralForeground1,
+        lineHeight: tokens.lineHeightBase400,
+        paddingBottom: tokens.spacingVerticalS,
+        marginTop: tokens.spacingHorizontalNone,
+        marginBottom: tokens.spacingHorizontalNone
+    },
+    rootBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    dismissButton: {
+        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',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        }),
+        marginInlineStart: 'auto'
+    },
+    dismissBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+    if (state.dismissButton) {
+        state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+    }
+    return state;
+};

package/lib/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TeachingPopoverTitleSlots, TeachingPopoverTitleState } from './TeachingPopoverTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const teachingPopoverTitleClassNames: SlotClassNames<TeachingPopoverTitleSlots> = {\n  root: 'fui-TeachingPopoverTitle',\n  dismissButton: 'fui-TeachingPopoverTitle__dismissButton',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    lineHeight: tokens.lineHeightBase400,\n    paddingBottom: tokens.spacingVerticalS,\n    marginTop: tokens.spacingHorizontalNone,\n    marginBottom: tokens.spacingHorizontalNone,\n  },\n  rootBrand: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  dismissButton: {\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    ...createCustomFocusIndicatorStyle({\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n      borderRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderColor('transparent'),\n    }),\n    marginInlineStart: 'auto',\n  },\n  dismissBrand: {\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverTitleStyles_unstable = (state: TeachingPopoverTitleState) => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance } = state;\n\n  state.root.className = mergeClasses(\n    teachingPopoverTitleClassNames.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      teachingPopoverTitleClassNames.dismissButton,\n      styles.dismissButton,\n      appearance === 'brand' ? styles.dismissBrand : undefined,\n      state.dismissButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverTitleClassNames","root","dismissButton","useStyles","display","flexDirection","justifyContent","fontSize","fontSizeBase400","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","lineHeight","lineHeightBase400","paddingBottom","spacingVerticalS","marginTop","spacingHorizontalNone","marginBottom","rootBrand","colorNeutralForegroundOnBrand","position","border","strokeWidthThin","colorTransparentStroke","alignItems","cursor","body1","backgroundColor","colorTransparentBackground","boxSizing","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","marginInlineStart","dismissBrand","useTeachingPopoverTitleStyles_unstable","state","styles","appearance","className","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,eAAe;AACjB,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BO,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,gBAAgB;QAChBC,UAAUT,OAAOU,eAAe;QAChCC,YAAYX,OAAOY,kBAAkB;QACrCC,OAAOb,OAAOc,uBAAuB;QACrCC,YAAYf,OAAOgB,iBAAiB;QACpCC,eAAejB,OAAOkB,gBAAgB;QACtCC,WAAWnB,OAAOoB,qBAAqB;QACvCC,cAAcrB,OAAOoB,qBAAqB;IAC5C;IACAE,WAAW;QACTT,OAAOb,OAAOuB,6BAA6B;IAC7C;IACAnB,eAAe;QACboB,UAAU;QACVC,QAAQ,CAAC,EAAEzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO2B,sBAAsB,CAAC,CAAC;QAC1ErB,SAAS;QACTsB,YAAY;QACZC,QAAQ;QACR,GAAG5B,iBAAiB6B,KAAK;QACzBC,iBAAiB/B,OAAOgC,0BAA0B;QAClDC,WAAW;QACXC,sBAAsBlC,OAAOmC,gBAAgB;QAC7CC,yBAAyBpC,OAAOmC,gBAAgB;QAChDE,kBAAkB;QAClB,GAAGtC,gCAAgC;YACjCuC,SAAS,CAAC,EAAEtC,OAAOuC,gBAAgB,CAAC,OAAO,EAAEvC,OAAOwC,iBAAiB,CAAC,CAAC;YACvEC,cAAczC,OAAO0C,kBAAkB;YACvC,GAAG5C,WAAW6C,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFC,mBAAmB;IACrB;IACAC,cAAc;QACZhC,OAAOb,OAAOuB,6BAA6B;IAC7C;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMuB,yCAAyC,CAACC;IACrD;IAEA,MAAMC,SAAS3C;IACf,MAAM,EAAE4C,UAAU,EAAE,GAAGF;IAEvBA,MAAM5C,IAAI,CAAC+C,SAAS,GAAGrD,aACrBK,+BAA+BC,IAAI,EACnC6C,OAAO7C,IAAI,EACX8C,eAAe,WAAWD,OAAO1B,SAAS,EAC1CyB,MAAM5C,IAAI,CAAC+C,SAAS;IAGtB,IAAIH,MAAM3C,aAAa,EAAE;QACvB2C,MAAM3C,aAAa,CAAC8C,SAAS,GAAGrD,aAC9BK,+BAA+BE,aAAa,EAC5C4C,OAAO5C,aAAa,EACpB6C,eAAe,UAAUD,OAAOH,YAAY,GAAGM,WAC/CJ,MAAM3C,aAAa,CAAC8C,SAAS;IAEjC;IAEA,OAAOH;AACT,EAAE"}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverBodyClassNames: function() {
+        return teachingPopoverBodyClassNames;
+    },
+    useMediaStyles: function() {
+        return useMediaStyles;
+    },
+    useTeachingPopoverBodyStyles_unstable: function() {
+        return useTeachingPopoverBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverBodyClassNames = {
+    root: 'fui-TeachingPopoverBody',
+    media: 'fui-TeachingPopoverBody__media'
+};
+const popoverBodyDimension = 288;
+const useMediaStyles = (0, _react.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 = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '12px'
+    }
+});
+const useTeachingPopoverBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const { mediaLength } = state;
+    const styles = useStyles();
+    const mediaStyles = useMediaStyles();
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
+    if (state.media) {
+        state.media.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverBodyClassNames","useMediaStyles","useTeachingPopoverBodyStyles_unstable","root","media","popoverBodyDimension","makeStyles","base","gridArea","overflow","width","marginBottom","verticalAlign","justifyContent","display","short","aspectRatio","height","medium","tall","useStyles","flexDirection","paddingBottom","state","mediaLength","styles","mediaStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,6BAAAA;eAAAA;;IAOAC,cAAAA;eAAAA;;IAuCAC,qCAAAA;eAAAA;;;uBAlD4B;AAIlC,MAAMF,gCAA0E;IACrFG,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,uBAAuB;AAEtB,MAAMJ,iBAAiBK,IAAAA,iBAAAA,EAAW;IACvCC,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;AAEA,MAAMe,YAAYd,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJW,SAAS;QACTO,eAAe;QACfC,eAAe;IACjB;AACF;AAGO,MAAMpB,wCAAwC,CAACqB;IACpD;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAME,SAASL;IACf,MAAMM,cAAczB;IAEpBsB,MAAMpB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,mBAAAA,EAAa5B,8BAA8BG,IAAI,EAAEsB,OAAOtB,IAAI,EAAEoB,MAAMpB,IAAI,CAACwB,SAAS;IAEzG,IAAIJ,MAAMnB,KAAK,EAAE;QACfmB,MAAMnB,KAAK,CAACuB,SAAS,GAAGC,IAAAA,mBAAAA,EACtB5B,8BAA8BI,KAAK,EACnCsB,YAAYnB,IAAI,EAChBmB,WAAW,CAACF,YAAY,EACxBD,MAAMnB,KAAK,CAACuB,SAAS;IAEzB;IAEA,OAAOJ;AACT"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselClassNames: function() {
+        return teachingPopoverCarouselClassNames;
+    },
+    useTeachingPopoverCarouselStyles_unstable: function() {
+        return useTeachingPopoverCarouselStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverCarouselClassNames = {
+    root: 'fui-TeachingPopoverCarousel'
+};
+// Todo: Page change animation & styles
+const useStyles = (0, _react.makeStyles)({
+    root: {}
+});
+const useTeachingPopoverCarouselStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselClassNames","useTeachingPopoverCarouselStyles_unstable","root","useStyles","makeStyles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAUAC,yCAAAA;eAAAA;;;uBAd4B;AAIlC,MAAMD,oCAAkF;IAC7FE,MAAM;AACR;AAEA,uCAAuC;AACvC,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM,CAAC;AACT;AAGO,MAAMD,4CAA4C,CAACI;IACxD;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaR,kCAAkCE,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAE7G,OAAOF;AACT"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselCardClassNames: function() {
+        return teachingPopoverCarouselCardClassNames;
+    },
+    useTeachingPopoverCarouselCardStyles_unstable: function() {
+        return useTeachingPopoverCarouselCardStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverCarouselCardClassNames = {
+    root: 'fui-TeachingPopoverCarouselCard'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {}
+});
+const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselCardClassNames","useTeachingPopoverCarouselCardStyles_unstable","root","useStyles","makeStyles","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,qCAAAA;eAAAA;;IASAC,6CAAAA;eAAAA;;;uBAhB4B;AAOlC,MAAMD,wCAA0F;IACrGE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM,CAAC;AACT;AAGO,MAAMD,gDAAgD,CAACI;IAC5D;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaR,sCAAsCE,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAEjH,OAAOF;AACT"}

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselFooterClassNames: function() {
+        return teachingPopoverCarouselFooterClassNames;
+    },
+    useTeachingPopoverCarouselFooterStyles_unstable: function() {
+        return useTeachingPopoverCarouselFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverCarouselFooterClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooter',
+    previous: 'fui-TeachingPopoverCarouselFooter__previous',
+    next: 'fui-TeachingPopoverCarouselFooter__next'
+};
+// Todo: Page change animation & styles
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    rootCentered: {
+        justifyContent: 'space-between',
+        gap: '8px'
+    },
+    rootRightAligned: {
+        gap: '8px',
+        '& :first-child': {
+            marginInlineEnd: 'auto'
+        }
+    }
+});
+const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { layout } = state;
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
+    if (state.previous) {
+        state.previous.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
+    }
+    state.next.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.next, state.next.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselFooterClassNames","useTeachingPopoverCarouselFooterStyles_unstable","root","previous","next","useStyles","makeStyles","display","flexDirection","rootCentered","justifyContent","gap","rootRightAligned","marginInlineEnd","state","styles","layout","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,uCAAAA;eAAAA;;IAyBAC,+CAAAA;eAAAA;;;uBAhC4B;AAOlC,MAAMD,0CAA8F;IACzGE,MAAM;IACNC,UAAU;IACVC,MAAM;AACR;AAEA,uCAAuC;AACvC,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BJ,MAAM;QACJK,SAAS;QACTC,eAAe;IACjB;IACAC,cAAc;QACZC,gBAAgB;QAChBC,KAAK;IACP;IACAC,kBAAkB;QAChBD,KAAK;QACL,kBAAkB;YAChBE,iBAAiB;QACnB;IACF;AACF;AAGO,MAAMZ,kDAAkD,CAACa;IAC9D;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,MAAM,EAAE,GAAGF;IAEnBA,MAAMZ,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EACrBlB,wCAAwCE,IAAI,EAC5Ca,OAAOb,IAAI,EACXc,WAAW,aAAaD,OAAON,YAAY,GAAGM,OAAOH,gBAAgB,EACrEE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,IAAIH,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,wCAAwCG,QAAQ,EAAEW,MAAMX,QAAQ,CAACc,SAAS;IACpH;IAEAH,MAAMV,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,wCAAwCI,IAAI,EAAEU,MAAMV,IAAI,CAACa,SAAS;IAEtG,OAAOH;AACT"}

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselFooterButtonClassNames: function() {
+        return teachingPopoverCarouselFooterButtonClassNames;
+    },
+    useTeachingPopoverCarouselFooterButtonStyles_unstable: function() {
+        return useTeachingPopoverCarouselFooterButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactbutton = require("@fluentui/react-button");
+const teachingPopoverCarouselFooterButtonClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooterButton'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        minWidth: '96px'
+    },
+    brandNext: {
+        color: _reacttheme.tokens.colorBrandForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentBackground),
+        ':hover': {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Pressed,
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    brandPrevious: {
+        // In brand, this is always 'NeutralForegroundOnBrand'
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundOnBrand),
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover
+        },
+        ':hover:active': {
+            color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed
+        }
+    }
+});
+const useTeachingPopoverCarouselFooterButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { navType, popoverAppearance } = state;
+    // Apply underlying fluent Button styles
+    state = {
+        ...state,
+        ...(0, _reactbutton.useButtonStyles_unstable)(state)
+    };
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselFooterButtonClassNames","useTeachingPopoverCarouselFooterButtonStyles_unstable","root","useStyles","makeStyles","minWidth","brandNext","color","tokens","colorBrandForeground1","backgroundColor","colorNeutralForegroundOnBrand","shorthands","borderColor","colorTransparentBackground","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","brandPrevious","colorBrandBackground","colorBrandBackgroundHover","colorBrandBackgroundPressed","state","styles","navType","popoverAppearance","useButtonStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,6CAAAA;eAAAA;;IA0CAC,qDAAAA;eAAAA;;;uBAnDwC;4BAM9B;6BACkB;AAElC,MAAMD,gDAA0G;IACrHE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,UAAU;IACZ;IACAC,WAAW;QACTC,OAAOC,kBAAAA,CAAOC,qBAAqB;QACnCC,iBAAiBF,kBAAAA,CAAOG,6BAA6B;QACrD,GAAGC,iBAAAA,CAAWC,WAAW,CAACL,kBAAAA,CAAOM,0BAA0B,CAAC;QAC5D,UAAU;YACRP,OAAOC,kBAAAA,CAAOO,kCAAkC;YAChDL,iBAAiBF,kBAAAA,CAAOG,6BAA6B;QACvD;QACA,iBAAiB;YACfJ,OAAOC,kBAAAA,CAAOQ,oCAAoC;YAClDN,iBAAiBF,kBAAAA,CAAOG,6BAA6B;QACvD;IACF;IACAM,eAAe;QACb,sDAAsD;QACtDV,OAAOC,kBAAAA,CAAOG,6BAA6B;QAC3CD,iBAAiBF,kBAAAA,CAAOU,oBAAoB;QAC5C,GAAGN,iBAAAA,CAAWC,WAAW,CAACL,kBAAAA,CAAOG,6BAA6B,CAAC;QAC/D,UAAU;YACRJ,OAAOC,kBAAAA,CAAOG,6BAA6B;YAC3C,GAAGC,iBAAAA,CAAWC,WAAW,CAACL,kBAAAA,CAAOG,6BAA6B,CAAC;YAC/DD,iBAAiBF,kBAAAA,CAAOW,yBAAyB;QACnD;QACA,iBAAiB;YACfZ,OAAOC,kBAAAA,CAAOG,6BAA6B;YAC3C,GAAGC,iBAAAA,CAAWC,WAAW,CAACL,kBAAAA,CAAOG,6BAA6B,CAAC;YAC/DD,iBAAiBF,kBAAAA,CAAOY,2BAA2B;QACrD;IACF;AACF;AAKO,MAAMnB,wDAAwD,CACnEoB;IAEA;IAEA,MAAMC,SAASnB;IACf,MAAM,EAAEoB,OAAO,EAAEC,iBAAiB,EAAE,GAAGH;IAEvC,wCAAwC;IACxCA,QAAQ;QACN,GAAGA,KAAK;QACR,GAAGI,IAAAA,qCAAAA,EAAyBJ,MAAM;IACpC;IAEAA,MAAMnB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,mBAAAA,EACrB3B,8CAA8CE,IAAI,EAClDoB,OAAOpB,IAAI,EACXqB,YAAY,UAAUC,sBAAsB,WAAWF,OAAOL,aAAa,EAC3EM,YAAY,UAAUC,sBAAsB,WAAWF,OAAOhB,SAAS,EACvEe,MAAMnB,IAAI,CAACwB,SAAS;IAGtB,OAAOL;AACT"}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselNavClassNames: function() {
+        return teachingPopoverCarouselNavClassNames;
+    },
+    useTeachingPopoverCarouselNavStyles_unstable: function() {
+        return useTeachingPopoverCarouselNavStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const teachingPopoverCarouselNavClassNames = {
+    root: 'fui-TeachingPopoverCarouselNav'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        columnGap: _reacttheme.tokens.spacingHorizontalXS,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            ..._react.shorthands.borderColor('transparent')
+        })
+    }
+});
+const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable","root","useStyles","makeStyles","display","flexDirection","columnGap","tokens","spacingHorizontalXS","alignItems","justifyContent","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","shorthands","borderColor","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,oCAAAA;eAAAA;;IAoBAC,4CAAAA;eAAAA;;;uBA7BwC;8BAML;4BACzB;AAEhB,MAAMD,uCAAwF;IACnGE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,WAAWC,kBAAAA,CAAOC,mBAAmB;QACrCC,YAAY;QACZC,gBAAgB;QAChB,GAAGC,IAAAA,6CAAAA,EAAgC;YACjCC,SAAS,CAAC,EAAEL,kBAAAA,CAAOM,gBAAgB,CAAC,OAAO,EAAEN,kBAAAA,CAAOO,iBAAiB,CAAC,CAAC;YACvEC,cAAcR,kBAAAA,CAAOS,kBAAkB;YACvC,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAGO,MAAMlB,+CAA+C,CAACmB;IAC3D;IAEA,MAAMC,SAASlB;IAEfiB,MAAMlB,IAAI,CAACoB,SAAS,GAAGC,IAAAA,mBAAAA,EAAavB,qCAAqCE,IAAI,EAAEmB,OAAOnB,IAAI,EAAEkB,MAAMlB,IAAI,CAACoB,SAAS;IAEhH,OAAOF;AACT"}

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselNavButtonClassNames: function() {
+        return teachingPopoverCarouselNavButtonClassNames;
+    },
+    useTeachingPopoverCarouselNavButtonStyles_unstable: function() {
+        return useTeachingPopoverCarouselNavButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const teachingPopoverCarouselNavButtonClassNames = {
+    root: 'fui-TeachingPopoverCarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        height: '8px',
+        width: '8px',
+        backgroundColor: _reacttheme.tokens.colorBrandBackground
+    },
+    rootUnselected: {
+        border: 'none',
+        borderRadius: '50%',
+        padding: '0px',
+        outline: `${_reacttheme.tokens.strokeWidthThin} solid transparent`,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            ..._react.shorthands.borderColor('transparent')
+        }),
+        backgroundColor: `color-mix(in srgb, ${_reacttheme.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: _reacttheme.tokens.colorBrandBackground
+        }
+    },
+    rootSelected: {
+        outline: `${_reacttheme.tokens.strokeWidthThin} solid transparent`,
+        width: '16px',
+        border: 'none',
+        borderRadius: '4px',
+        padding: '0px',
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            ..._react.shorthands.borderColor('transparent')
+        }),
+        '@media (forced-colors: active)': {
+            backgroundColor: 'CanvasText'
+        }
+    },
+    rootBrand: {
+        backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    rootBrandUnselected: {
+        backgroundColor: `color-mix(in srgb, ${_reacttheme.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: _reacttheme.tokens.colorBrandBackground
+        }
+    }
+});
+const useTeachingPopoverCarouselNavButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance, isSelected } = state;
+    const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselNavButtonClassNames","useTeachingPopoverCarouselNavButtonStyles_unstable","root","useStyles","makeStyles","display","cursor","boxSizing","height","width","backgroundColor","tokens","colorBrandBackground","rootUnselected","border","borderRadius","padding","outline","strokeWidthThin","createCustomFocusIndicatorStyle","strokeWidthThick","colorStrokeFocus2","borderRadiusMedium","shorthands","borderColor","opacity","rootSelected","rootBrand","colorNeutralForegroundOnBrand","rootBrandUnselected","state","styles","appearance","isSelected","brandStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,0CAAAA;eAAAA;;IAgEAC,kDAAAA;eAAAA;;;uBAzEwC;4BAM9B;8BACyB;AAEzC,MAAMD,6CAAoG;IAC/GE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,QAAQ;QACRC,WAAW;QACXC,QAAQ;QACRC,OAAO;QACPC,iBAAiBC,kBAAAA,CAAOC,oBAAoB;IAC9C;IACAC,gBAAgB;QACdC,QAAQ;QACRC,cAAc;QACdC,SAAS;QACTC,SAAS,CAAC,EAAEN,kBAAAA,CAAOO,eAAe,CAAC,kBAAkB,CAAC;QACtD,GAAGC,IAAAA,6CAAAA,EAAgC;YACjCF,SAAS,CAAC,EAAEN,kBAAAA,CAAOS,gBAAgB,CAAC,OAAO,EAAET,kBAAAA,CAAOU,iBAAiB,CAAC,CAAC;YACvEN,cAAcJ,kBAAAA,CAAOW,kBAAkB;YACvC,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFd,iBAAiB,CAAC,mBAAmB,EAAEC,kBAAAA,CAAOC,oBAAoB,CAAC,kBAAkB,CAAC;QACtF,0DAA0D;YACxD,iFAAiF;YACjFa,SAAS;YACTf,iBAAiBC,kBAAAA,CAAOC,oBAAoB;QAC9C;IACF;IACAc,cAAc;QACZT,SAAS,CAAC,EAAEN,kBAAAA,CAAOO,eAAe,CAAC,kBAAkB,CAAC;QACtDT,OAAO;QACPK,QAAQ;QACRC,cAAc;QACdC,SAAS;QACT,GAAGG,IAAAA,6CAAAA,EAAgC;YACjCF,SAAS,CAAC,EAAEN,kBAAAA,CAAOS,gBAAgB,CAAC,OAAO,EAAET,kBAAAA,CAAOU,iBAAiB,CAAC,CAAC;YACvEN,cAAcJ,kBAAAA,CAAOW,kBAAkB;YACvC,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,cAAc;QAC1C,EAAE;QACF,kCAAkC;YAChCd,iBAAiB;QACnB;IACF;IACAiB,WAAW;QACTjB,iBAAiBC,kBAAAA,CAAOiB,6BAA6B;IACvD;IACAC,qBAAqB;QACnBnB,iBAAiB,CAAC,mBAAmB,EAAEC,kBAAAA,CAAOiB,6BAA6B,CAAC,kBAAkB,CAAC;QAC/F,0DAA0D;YACxD,iFAAiF;YACjFH,SAAS;YACTf,iBAAiBC,kBAAAA,CAAOC,oBAAoB;QAC9C;IACF;AACF;AAKO,MAAMX,qDAAqD,CAChE6B;IAEA;IAEA,MAAMC,SAAS5B;IACf,MAAM,EAAE6B,UAAU,EAAEC,UAAU,EAAE,GAAGH;IAEnC,MAAMI,cAAcD,aAAaF,OAAOJ,SAAS,GAAGI,OAAOF,mBAAmB;IAE9EC,MAAM5B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBpC,2CAA2CE,IAAI,EAC/C6B,OAAO7B,IAAI,EACX+B,aAAaF,OAAOL,YAAY,GAAGK,OAAOlB,cAAc,EACxDmB,eAAe,WAAWE,aAC1BJ,MAAM5B,IAAI,CAACiC,SAAS;IAGtB,OAAOL;AACT"}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverCarouselPageCountClassNames: function() {
+        return teachingPopoverCarouselPageCountClassNames;
+    },
+    useTeachingPopoverCarouselPageCountStyles_unstable: function() {
+        return useTeachingPopoverCarouselPageCountStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverCarouselPageCountClassNames = {
+    root: 'fui-TeachingPopoverCarouselPageCount'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+const useTeachingPopoverCarouselPageCountStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverCarouselPageCountClassNames","useTeachingPopoverCarouselPageCountStyles_unstable","root","useStyles","makeStyles","display","alignItems","justifyContent","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,0CAAAA;eAAAA;;IAkBAC,kDAAAA;eAAAA;;;uBAzB4B;AAOlC,MAAMD,6CAAoG;IAC/GE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS;QACTC,YAAY;QACZC,gBAAgB;IAClB;AACF;AAKO,MAAMN,qDAAqD,CAChEO;IAEA;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAAA,EACrBX,2CAA2CE,IAAI,EAC/CO,OAAOP,IAAI,EACXM,MAAMN,IAAI,CAACQ,SAAS;IAGtB,OAAOF;AACT"}