@fluentui/react-teaching-popover 9.5.6 → 9.6.0

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

@@ -0,0 +1,73 @@
+"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, {
+    teachingPopoverFooterClassNames: function() {
+        return teachingPopoverFooterClassNames;
+    },
+    useTeachingPopoverFooterStyles_unstable: function() {
+        return useTeachingPopoverFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const teachingPopoverFooterClassNames = {
+    root: 'fui-TeachingPopoverFooter',
+    primary: 'fui-TeachingPopoverFooter__primary',
+    secondary: 'fui-TeachingPopoverFooter__secondary'
+};
+const useStyles = (0, _react.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: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundOnBrand)
+    },
+    brandPrimary: {
+        color: _reacttheme.tokens.colorBrandForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand,
+        ':hover': {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            color: _reacttheme.tokens.colorCompoundBrandForeground1Pressed,
+            backgroundColor: _reacttheme.tokens.colorNeutralForegroundOnBrand
+        }
+    }
+});
+const useTeachingPopoverFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance, footerLayout } = state;
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);
+    if (state.secondary) {
+        state.secondary.className = (0, _react.mergeClasses)(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);
+    }
+    state.primary.className = (0, _react.mergeClasses)(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverFooterClassNames","useTeachingPopoverFooterStyles_unstable","root","primary","secondary","useStyles","makeStyles","display","gap","paddingTop","rootVertical","flexDirection","rootHorizontal","justifyContent","buttonRootVertical","width","borderRadius","buttonRootHorizontal","minWidth","brandSecondary","shorthands","borderColor","tokens","colorNeutralForegroundOnBrand","brandPrimary","color","colorBrandForeground1","backgroundColor","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","state","styles","appearance","footerLayout","className","mergeClasses","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,+BAAAA;eAAAA;;IA6CAC,uCAAAA;eAAAA;;;uBAlDwC;4BAG9B;AAEhB,MAAMD,kCAA8E;IACzFE,MAAM;IACNC,SAAS;IACTC,WAAW;AACb;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BJ,MAAM;QACJK,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,GAAGC,iBAAAA,CAAWC,WAAW,CAACC,kBAAAA,CAAOC,6BAA6B,CAAC;IACjE;IACAC,cAAc;QACZC,OAAOH,kBAAAA,CAAOI,qBAAqB;QACnCC,iBAAiBL,kBAAAA,CAAOC,6BAA6B;QACrD,UAAU;YACRE,OAAOH,kBAAAA,CAAOM,kCAAkC;YAChDD,iBAAiBL,kBAAAA,CAAOC,6BAA6B;QACvD;QACA,iBAAiB;YACfE,OAAOH,kBAAAA,CAAOO,oCAAoC;YAClDF,iBAAiBL,kBAAAA,CAAOC,6BAA6B;QACvD;IACF;AACF;AAGO,MAAMtB,0CAA0C,CAAC6B;IACtD;IAEA,MAAMC,SAAS1B;IACf,MAAM,EAAE2B,UAAU,EAAEC,YAAY,EAAE,GAAGH;IAErCA,MAAM5B,IAAI,CAACgC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBnC,gCAAgCE,IAAI,EACpC6B,OAAO7B,IAAI,EACX+B,iBAAiB,eAAeF,OAAOnB,cAAc,GAAGmB,OAAOrB,YAAY,EAC3EoB,MAAM5B,IAAI,CAACgC,SAAS;IAEtB,IAAIJ,MAAM1B,SAAS,EAAE;QACnB0B,MAAM1B,SAAS,CAAC8B,SAAS,GAAGC,IAAAA,mBAAAA,EAC1BnC,gCAAgCI,SAAS,EACzC6B,iBAAiB,eAAeF,OAAOd,oBAAoB,GAAGc,OAAOjB,kBAAkB,EACvFkB,eAAe,UAAUD,OAAOZ,cAAc,GAAGiB,WACjDN,MAAM1B,SAAS,CAAC8B,SAAS;IAE7B;IACAJ,MAAM3B,OAAO,CAAC+B,SAAS,GAAGC,IAAAA,mBAAAA,EACxBnC,gCAAgCG,OAAO,EACvC8B,iBAAiB,eAAeF,OAAOd,oBAAoB,GAAGc,OAAOjB,kBAAkB,EACvFkB,eAAe,UAAUD,OAAOP,YAAY,GAAGY,WAC/CN,MAAM3B,OAAO,CAAC+B,SAAS;IAGzB,OAAOJ;AACT"}

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

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

package/lib-commonjs/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":["teachingPopoverHeaderClassNames","useTeachingPopoverHeaderStyles_unstable","root","dismissButton","icon","useStyles","makeStyles","display","flexDirection","color","tokens","colorNeutralForeground3","fontWeight","fontWeightSemibold","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","paddingBottom","spacingVerticalXS","alignItems","marginTop","spacingHorizontalNone","marginBottom","rootBrand","colorNeutralForegroundOnBrand","colorNeutralForeground2","position","border","strokeWidthThin","colorTransparentStroke","cursor","typographyStyles","body1","backgroundColor","colorTransparentBackground","boxSizing","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","marginInlineStart","padding","spacingHorizontalXS","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","shorthands","borderColor","dismissBrand","height","width","justifyContent","textDecorationLine","verticalAlign","marginInlineEnd","iconBrand","state","styles","appearance","className","mergeClasses","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,40 @@
+"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, {
+    teachingPopoverSurfaceClassNames: function() {
+        return teachingPopoverSurfaceClassNames;
+    },
+    useTeachingPopoverSurfaceStyles_unstable: function() {
+        return useTeachingPopoverSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactpopover = require("@fluentui/react-popover");
+const _reacttheme = require("@fluentui/react-theme");
+const teachingPopoverSurfaceClassNames = {
+    root: 'fui-TeachingPopoverSurface'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `${_reacttheme.tokens.spacingVerticalL} ${_reacttheme.tokens.spacingVerticalL}`,
+        borderRadius: _reacttheme.tokens.borderRadiusXLarge,
+        minWidth: '320px',
+        boxSizing: 'border-box'
+    }
+});
+const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    // Make sure to merge teaching bubble surface prior to popover styles
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
+    const updatedState = (0, _reactpopover.usePopoverSurfaceStyles_unstable)(state);
+    return updatedState;
+};

package/lib-commonjs/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":["teachingPopoverSurfaceClassNames","useTeachingPopoverSurfaceStyles_unstable","root","useStyles","makeStyles","padding","tokens","spacingVerticalL","borderRadius","borderRadiusXLarge","minWidth","boxSizing","state","styles","className","mergeClasses","updatedState","usePopoverSurfaceStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,gCAAAA;eAAAA;;IAgBAC,wCAAAA;eAAAA;;;uBAtB4B;8BAGQ;4BAC1B;AAEhB,MAAMD,mCAAgF;IAC3FE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC,EAAED,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC;QAChEC,cAAcF,kBAAAA,CAAOG,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAKO,MAAMV,2CAA2C,CACtDW;IAEA;IAEA,MAAMC,SAASV;IAEf,qEAAqE;IACrES,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAaf,iCAAiCE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAE5G,MAAME,eAAeC,IAAAA,8CAAAA,EAAiCL;IAEtD,OAAOI;AACT"}

package/lib-commonjs/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.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, {
+    teachingPopoverTitleClassNames: function() {
+        return teachingPopoverTitleClassNames;
+    },
+    useTeachingPopoverTitleStyles_unstable: function() {
+        return useTeachingPopoverTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const teachingPopoverTitleClassNames = {
+    root: 'fui-TeachingPopoverTitle',
+    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        lineHeight: _reacttheme.tokens.lineHeightBase400,
+        paddingBottom: _reacttheme.tokens.spacingVerticalS,
+        marginTop: _reacttheme.tokens.spacingHorizontalNone,
+        marginBottom: _reacttheme.tokens.spacingHorizontalNone
+    },
+    rootBrand: {
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    dismissButton: {
+        position: 'relative',
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        ..._reacttheme.typographyStyles.body1,
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        boxSizing: 'border-box',
+        borderTopRightRadius: _reacttheme.tokens.borderRadiusNone,
+        borderBottomRightRadius: _reacttheme.tokens.borderRadiusNone,
+        borderRightStyle: 'none',
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            ..._react.shorthands.borderColor('transparent')
+        }),
+        marginInlineStart: 'auto'
+    },
+    dismissBrand: {
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    }
+});
+const useTeachingPopoverTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+    if (state.dismissButton) {
+        state.dismissButton.className = (0, _react.mergeClasses)(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["teachingPopoverTitleClassNames","useTeachingPopoverTitleStyles_unstable","root","dismissButton","useStyles","makeStyles","display","flexDirection","justifyContent","fontSize","tokens","fontSizeBase400","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","lineHeight","lineHeightBase400","paddingBottom","spacingVerticalS","marginTop","spacingHorizontalNone","marginBottom","rootBrand","colorNeutralForegroundOnBrand","position","border","strokeWidthThin","colorTransparentStroke","alignItems","cursor","typographyStyles","body1","backgroundColor","colorTransparentBackground","boxSizing","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","shorthands","borderColor","marginInlineStart","dismissBrand","state","styles","appearance","className","mergeClasses","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,8BAAAA;eAAAA;;IA8CAC,sCAAAA;eAAAA;;;uBApDwC;8BAGL;4BACP;AAElC,MAAMD,iCAA4E;IACvFE,MAAM;IACNC,eAAe;AACjB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJI,SAAS;QACTC,eAAe;QACfC,gBAAgB;QAChBC,UAAUC,kBAAAA,CAAOC,eAAe;QAChCC,YAAYF,kBAAAA,CAAOG,kBAAkB;QACrCC,OAAOJ,kBAAAA,CAAOK,uBAAuB;QACrCC,YAAYN,kBAAAA,CAAOO,iBAAiB;QACpCC,eAAeR,kBAAAA,CAAOS,gBAAgB;QACtCC,WAAWV,kBAAAA,CAAOW,qBAAqB;QACvCC,cAAcZ,kBAAAA,CAAOW,qBAAqB;IAC5C;IACAE,WAAW;QACTT,OAAOJ,kBAAAA,CAAOc,6BAA6B;IAC7C;IACArB,eAAe;QACbsB,UAAU;QACVC,QAAQ,CAAC,EAAEhB,kBAAAA,CAAOiB,eAAe,CAAC,OAAO,EAAEjB,kBAAAA,CAAOkB,sBAAsB,CAAC,CAAC;QAC1EtB,SAAS;QACTuB,YAAY;QACZC,QAAQ;QACR,GAAGC,4BAAAA,CAAiBC,KAAK;QACzBC,iBAAiBvB,kBAAAA,CAAOwB,0BAA0B;QAClDC,WAAW;QACXC,sBAAsB1B,kBAAAA,CAAO2B,gBAAgB;QAC7CC,yBAAyB5B,kBAAAA,CAAO2B,gBAAgB;QAChDE,kBAAkB;QAClB,GAAGC,IAAAA,6CAAAA,EAAgC;YACjCC,SAAS,CAAC,EAAE/B,kBAAAA,CAAOgC,gBAAgB,CAAC,OAAO,EAAEhC,kBAAAA,CAAOiC,iBAAiB,CAAC,CAAC;YACvEC,cAAclC,kBAAAA,CAAOmC,kBAAkB;YACvC,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFC,mBAAmB;IACrB;IACAC,cAAc;QACZnC,OAAOJ,kBAAAA,CAAOc,6BAA6B;IAC7C;AACF;AAGO,MAAMvB,yCAAyC,CAACiD;IACrD;IAEA,MAAMC,SAAS/C;IACf,MAAM,EAAEgD,UAAU,EAAE,GAAGF;IAEvBA,MAAMhD,IAAI,CAACmD,SAAS,GAAGC,IAAAA,mBAAAA,EACrBtD,+BAA+BE,IAAI,EACnCiD,OAAOjD,IAAI,EACXkD,eAAe,WAAWD,OAAO5B,SAAS,EAC1C2B,MAAMhD,IAAI,CAACmD,SAAS;IAGtB,IAAIH,MAAM/C,aAAa,EAAE;QACvB+C,MAAM/C,aAAa,CAACkD,SAAS,GAAGC,IAAAA,mBAAAA,EAC9BtD,+BAA+BG,aAAa,EAC5CgD,OAAOhD,aAAa,EACpBiD,eAAe,UAAUD,OAAOF,YAAY,GAAGM,WAC/CL,MAAM/C,aAAa,CAACkD,SAAS;IAEjC;IAEA,OAAOH;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-teaching-popover",
-  "version": "9.5.6",
+  "version": "9.6.0",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,11 +30,11 @@
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-popover": "^9.11.6",
-    "@fluentui/react-button": "^9.5.3",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-popover": "^9.12.0",
+    "@fluentui/react-button": "^9.6.0",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-aria": "^9.15.3",
+    "@fluentui/react-aria": "^9.15.4",
     "@fluentui/react-context-selector": "^9.2.2",
     "use-sync-external-store": "^1.2.0"
   },