@fluentui/react-teaching-popover 9.6.21 → 9.7.0

package/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTeachingPopoverHeader_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTeachingPopoverHeaderBase_unstable: function() {
+        return useTeachingPopoverHeaderBase_unstable;
+    },
+    useTeachingPopoverHeader_unstable: function() {
         return useTeachingPopoverHeader_unstable;
     }
 });
@@ -14,11 +22,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacticons = require("@fluentui/react-icons");
 const _reactpopover = require("@fluentui/react-popover");
-const useTeachingPopoverHeader_unstable = (props, ref)=>{
+const useTeachingPopoverHeaderBase_unstable = (props, ref)=>{
     const { dismissButton, icon } = props;
     const setOpen = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.setOpen);
     const triggerRef = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.triggerRef);
-    const appearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
     const onDismissButtonClick = (0, _reactutilities.useEventCallback)((ev)=>{
         if (!ev.defaultPrevented) {
             setOpen(ev, false);
@@ -28,7 +35,6 @@ const useTeachingPopoverHeader_unstable = (props, ref)=>{
         }
     });
     return {
-        appearance,
         components: {
             root: 'div',
             dismissButton: 'button',
@@ -43,7 +49,6 @@ const useTeachingPopoverHeader_unstable = (props, ref)=>{
         icon: _reactutilities.slot.optional(icon, {
             renderByDefault: true,
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.Lightbulb16Regular, null),
                 'aria-hidden': true
             },
             elementType: 'div'
@@ -51,7 +56,6 @@ const useTeachingPopoverHeader_unstable = (props, ref)=>{
         dismissButton: _reactutilities.slot.optional(dismissButton, {
             renderByDefault: true,
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss12Regular, null),
                 role: 'button',
                 'aria-label': 'dismiss',
                 onClick: onDismissButtonClick
@@ -60,3 +64,21 @@ const useTeachingPopoverHeader_unstable = (props, ref)=>{
         })
     };
 };
+const useTeachingPopoverHeader_unstable = (props, ref)=>{
+    const baseState = useTeachingPopoverHeaderBase_unstable(props, ref);
+    const appearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
+    const icon = baseState.icon && baseState.icon.children === undefined ? {
+        ...baseState.icon,
+        children: /*#__PURE__*/ _react.createElement(_reacticons.Lightbulb16Regular, null)
+    } : baseState.icon;
+    const dismissButton = baseState.dismissButton && baseState.dismissButton.children === undefined ? {
+        ...baseState.dismissButton,
+        children: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss12Regular, null)
+    } : baseState.dismissButton;
+    return {
+        ...baseState,
+        appearance,
+        icon,
+        dismissButton
+    };
+};

package/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n  props: TeachingPopoverHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n  const { dismissButton, icon } = props;\n\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    if (!ev.defaultPrevented) {\n      setOpen(ev, false);\n    }\n\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  });\n\n  return {\n    appearance,\n    components: {\n      root: 'div',\n      dismissButton: 'button',\n      icon: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <Lightbulb16Regular />,\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n    dismissButton: slot.optional(dismissButton, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <Dismiss12Regular />,\n        role: 'button',\n        'aria-label': 'dismiss',\n        onClick: onDismissButtonClick,\n      },\n      elementType: 'button',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","Dismiss12Regular","Lightbulb16Regular","usePopoverContext_unstable","useTeachingPopoverHeader_unstable","props","ref","dismissButton","icon","setOpen","context","triggerRef","appearance","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","children","role","onClick"],"mappings":"AAAA;;;;;+BAcaO;;;;;;;iEAZU,QAAQ;gCACkC,4BAA4B;4BAGxC,wBAAwB;8BAClC,0BAA0B;AAO9D,0CAA0C,CAC/CC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGH;IAEhC,MAAMI,cAAUN,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,iBAAaR,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,iBAAaT,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,2BAAuBd,gCAAAA,EAAiB,CAACe;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBN,QAAQK,IAAI;QACd;QAEA,IAAIH,WAAWK,OAAO,EAAE;YACtBL,WAAWK,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLL;QACAM,YAAY;YACVC,MAAM;YACNZ,eAAe;YACfC,MAAM;QACR;QACAW,MAAMnB,oBAAAA,CAAKoB,MAAM,KACftB,wCAAAA,EAAyB,OAAO;YAC9BQ;YACA,GAAGD,KAAK;QACV,IACA;YAAEgB,aAAa;QAAM;QAEvBb,MAAMR,oBAAAA,CAAKsB,QAAQ,CAACd,MAAM;YACxBe,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACvB,8BAAAA,EAAAA;gBACX,eAAe;YACjB;YACAmB,aAAa;QACf;QACAd,eAAeP,oBAAAA,CAAKsB,QAAQ,CAACf,eAAe;YAC1CgB,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACxB,4BAAAA,EAAAA;gBACXyB,MAAM;gBACN,cAAc;gBACdC,SAASd;YACX;YACAQ,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverHeaderBaseProps,\n  TeachingPopoverHeaderBaseState,\n  TeachingPopoverHeaderProps,\n  TeachingPopoverHeaderState,\n} from './TeachingPopoverHeader.types';\n\nimport { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Base hook that builds TeachingPopoverHeader state for behavior and structure only.\n * Does not add styling defaults such as icon JSX or `appearance` from popover context.\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeaderBase_unstable = (\n  props: TeachingPopoverHeaderBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderBaseState => {\n  const { dismissButton, icon } = props;\n\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n\n  const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    if (!ev.defaultPrevented) {\n      setOpen(ev, false);\n    }\n\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n      dismissButton: 'button',\n      icon: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n    dismissButton: slot.optional(dismissButton, {\n      renderByDefault: true,\n      defaultProps: {\n        role: 'button',\n        'aria-label': 'dismiss',\n        onClick: onDismissButtonClick,\n      },\n      elementType: 'button',\n    }),\n  };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverHeader properties\n * @param ref - reference to root HTMLElement of TeachingPopoverHeader\n */\nexport const useTeachingPopoverHeader_unstable = (\n  props: TeachingPopoverHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverHeaderState => {\n  const baseState = useTeachingPopoverHeaderBase_unstable(props, ref);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const icon =\n    baseState.icon && baseState.icon.children === undefined\n      ? { ...baseState.icon, children: <Lightbulb16Regular /> }\n      : baseState.icon;\n  const dismissButton =\n    baseState.dismissButton && baseState.dismissButton.children === undefined\n      ? { ...baseState.dismissButton, children: <Dismiss12Regular /> }\n      : baseState.dismissButton;\n\n  return {\n    ...baseState,\n    appearance,\n    icon,\n    dismissButton,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","Dismiss12Regular","Lightbulb16Regular","usePopoverContext_unstable","useTeachingPopoverHeaderBase_unstable","props","ref","dismissButton","icon","setOpen","context","triggerRef","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","role","onClick","useTeachingPopoverHeader_unstable","baseState","appearance","children","undefined"],"mappings":"AAAA;;;;;;;;;;;;IAoBaO,qCAAAA;;;qCAwDAsB;eAAAA;;;;iEA1EU,QAAQ;gCACkC,4BAA4B;4BAQxC,wBAAwB;8BAClC,0BAA0B;AAQ9D,8CAA8C,CACnDrB,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGH;IAEhC,MAAMI,cAAUN,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,iBAAaR,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAE3E,MAAMC,2BAAuBb,gCAAAA,EAAiB,CAACc;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBL,QAAQI,IAAI;QACd;QAEA,IAAIF,WAAWI,OAAO,EAAE;YACtBJ,WAAWI,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;YACNX,eAAe;YACfC,MAAM;QACR;QACAU,MAAMlB,oBAAAA,CAAKmB,MAAM,KACfrB,wCAAAA,EAAyB,OAAO;YAC9BQ;YACA,GAAGD,KAAK;QACV,IACA;YAAEe,aAAa;QAAM;QAEvBZ,MAAMR,oBAAAA,CAAKqB,QAAQ,CAACb,MAAM;YACxBc,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;YACjB;YACAH,aAAa;QACf;QACAb,eAAeP,oBAAAA,CAAKqB,QAAQ,CAACd,eAAe;YAC1Ce,iBAAiB;YACjBC,cAAc;gBACZC,MAAM;gBACN,cAAc;gBACdC,SAASb;YACX;YACAQ,aAAa;QACf;IACF;AACF,EAAE;AAOK,0CAA0C,CAC/Cf,OACAC;IAEA,MAAMqB,YAAYvB,sCAAsCC,OAAOC;IAC/D,MAAMsB,iBAAazB,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQkB,UAAU;IAE3E,MAAMpB,OACJmB,UAAUnB,IAAI,IAAImB,UAAUnB,IAAI,CAACqB,QAAQ,KAAKC,YAC1C;QAAE,GAAGH,UAAUnB,IAAI;QAAEqB,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC3B,8BAAAA,EAAAA;IAAsB,IACtDyB,UAAUnB,IAAI;IACpB,MAAMD,gBACJoB,UAAUpB,aAAa,IAAIoB,UAAUpB,aAAa,CAACsB,QAAQ,KAAKC,YAC5D;QAAE,GAAGH,UAAUpB,aAAa;QAAEsB,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC5B,4BAAAA,EAAAA;IAAoB,IAC7D0B,UAAUpB,aAAa;IAE7B,OAAO;QACL,GAAGoB,SAAS;QACZC;QACApB;QACAD;IACF;AACF,EAAE"}

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

@@ -198,11 +198,14 @@ const useTeachingPopoverHeaderStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
     if (state.dismissButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismissButton.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTeachingPopoverHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const teachingPopoverHeaderClassNames = {\n    root: 'fui-TeachingPopoverHeader',\n    dismissButton: 'fui-TeachingPopoverHeader__dismissButton',\n    icon: 'fui-TeachingPopoverHeader__icon'\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/** Applies style classnames to slots */ export const useTeachingPopoverHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    state.root.className = mergeClasses(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);\n    if (state.dismissButton) {\n        state.dismissButton.className = mergeClasses(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(teachingPopoverHeaderClassNames.icon, styles.icon, appearance === 'brand' ? styles.iconBrand : undefined, state.icon.className);\n    }\n    return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverHeaderClassNames","root","dismissButton","icon","useStyles","mc9l5x","Beiy3e4","sj55zd","Bhrd7zp","Be2twd7","Bg96gwp","Byoj8tv","Bt984gj","B6of3ja","jrapky","rootBrand","qhf8xq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bceei9c","Bahqtrf","De3pzq","B7ck84d","B7oj6ja","Bbmb7ep","Jyy4pa","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","dismissBrand","Bqenvij","a9b677","Brf1p80","w71qe1","ha4doy","Bokbzmb","iconBrand","d","p","useTeachingPopoverHeaderStyles_unstable","state","styles","appearance","className","undefined"],"mappings":"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"}
+{"version":3,"sources":["useTeachingPopoverHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const teachingPopoverHeaderClassNames = {\n    root: 'fui-TeachingPopoverHeader',\n    dismissButton: 'fui-TeachingPopoverHeader__dismissButton',\n    icon: 'fui-TeachingPopoverHeader__icon'\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/** Applies style classnames to slots */ export const useTeachingPopoverHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);\n    if (state.dismissButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.dismissButton.className = mergeClasses(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(teachingPopoverHeaderClassNames.icon, styles.icon, appearance === 'brand' ? styles.iconBrand : undefined, state.icon.className);\n    }\n    return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverHeaderClassNames","root","dismissButton","icon","useStyles","mc9l5x","Beiy3e4","sj55zd","Bhrd7zp","Be2twd7","Bg96gwp","Byoj8tv","Bt984gj","B6of3ja","jrapky","rootBrand","qhf8xq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bceei9c","Bahqtrf","De3pzq","B7ck84d","B7oj6ja","Bbmb7ep","Jyy4pa","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","dismissBrand","Bqenvij","a9b677","Brf1p80","w71qe1","ha4doy","Bokbzmb","iconBrand","d","p","useTeachingPopoverHeaderStyles_unstable","state","styles","appearance","className","undefined"],"mappings":"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"}

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

@@ -89,11 +89,14 @@ const useTeachingPopoverHeaderStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
     if (state.dismissButton) {
+        // eslint-disable-next-line react-hooks/immutability
         state.dismissButton.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 = (\n  state: TeachingPopoverHeaderState,\n): 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"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 = (\n  state: TeachingPopoverHeaderState,\n): TeachingPopoverHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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"}

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

@@ -59,6 +59,7 @@ const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     // Make sure to merge teaching bubble surface prior to popover styles
+    // eslint-disable-next-line react-hooks/immutability
     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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTeachingPopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverSurfaceClassNames = {\n    root: 'fui-TeachingPopoverSurface'\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 * Apply styling to the TeachingPopoverSurface slots based on the state\n */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\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    const updatedState = usePopoverSurfaceStyles_unstable(state);\n    return updatedState;\n};\n"],"names":["__styles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bf4jedk","B7ck84d","d","p","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,gCAAgC;;;IAa5BiB,wCAAwC;;;;uBAhBhB,gBAAgB;8BACR,yBAAyB;AAEnE,yCAAyC;IAC5ChB,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,kDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,qEAAA;IACAgB,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEiB,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAC7G,MAAMC,YAAY,OAAGvB,8CAAgC,EAACoB,KAAK,CAAC;IAC5D,OAAOG,YAAY;AACvB,CAAC"}
+{"version":3,"sources":["useTeachingPopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverSurfaceClassNames = {\n    root: 'fui-TeachingPopoverSurface'\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 * Apply styling to the TeachingPopoverSurface slots based on the state\n */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // Make sure to merge teaching bubble surface prior to popover styles\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n    const updatedState = usePopoverSurfaceStyles_unstable(state);\n    return updatedState;\n};\n"],"names":["__styles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bf4jedk","B7ck84d","d","p","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,gCAAgC;;;IAa5BiB,wCAAwC;;;;uBAhBhB,gBAAgB;8BACR,yBAAyB;AAEnE,yCAAyC;IAC5ChB,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,kDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,qEAAA;IACA,oDAAA;IACAgB,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEiB,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAC7G,MAAMC,YAAY,OAAGvB,8CAAgC,EAACoB,KAAK,CAAC;IAC5D,OAAOG,YAAY;AACvB,CAAC"}

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

@@ -35,6 +35,7 @@ const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     // Make sure to merge teaching bubble surface prior to popover styles
+    // eslint-disable-next-line react-hooks/immutability
     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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { 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"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,gCAAAA;;;4CAgBAS;eAAAA;;;uBAtB4B,iBAAiB;8BAGT,0BAA0B;4BACpD,wBAAwB;AAExC,yCAAsF;IAC3FR,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,gBAAgB,CAAC,CAAC,EAAEL,kBAAAA,CAAOK,gBAAgB,EAAE;QAChEC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAKO,iDAAiD,CACtDE;IAEA;IAEA,MAAMC,SAAST;IAEf,qEAAqE;IACrEQ,MAAMT,IAAI,CAACW,SAAS,OAAGf,mBAAAA,EAAaG,iCAAiCC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE5G,MAAMC,mBAAef,8CAAAA,EAAiCY;IAEtD,OAAOG;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { 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  // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,gCAAAA;;;IAgBAS,wCAAAA;;;;uBAtB4B,iBAAiB;8BAGT,0BAA0B;4BACpD,wBAAwB;AAExC,yCAAsF;IAC3FR,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,gBAAgB,CAAC,CAAC,EAAEL,kBAAAA,CAAOK,gBAAgB,EAAE;QAChEC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAKO,iDAAiD,CACtDE;IAEA;IAEA,MAAMC,SAAST;IAEf,qEAAqE;IACrE,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,GAAGf,uBAAAA,EAAaG,iCAAiCC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE5G,MAAMC,mBAAef,8CAAAA,EAAiCY;IAEtD,OAAOG;AACT,EAAE"}

package/lib-commonjs/components/TeachingPopoverTitle/TeachingPopoverTitle.types.js

@@ -1,6 +1,4 @@
-/**
- * State used in rendering TeachingPopoverTitle
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/TeachingPopoverTitle/TeachingPopoverTitle.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts"],"sourcesContent":["import type { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverTitleSlots = {\n  /**\n   * Title for teaching bubble\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * An alternate close button path if not placed in the TeachingPopoverHeader\n   */\n  dismissButton?: Slot<'button'>;\n};\n\n/**\n * TeachingPopoverTitle Props\n */\nexport type TeachingPopoverTitleProps = ComponentProps<TeachingPopoverTitleSlots>;\n\n/**\n * State used in rendering TeachingPopoverTitle\n */\nexport type TeachingPopoverTitleState = ComponentState<TeachingPopoverTitleSlots> &\n  Pick<PopoverContextValue, 'appearance'>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAC0C"}
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts"],"sourcesContent":["import type { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverTitleSlots = {\n  /**\n   * Title for teaching bubble\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * An alternate close button path if not placed in the TeachingPopoverHeader\n   */\n  dismissButton?: Slot<'button'>;\n};\n\n/**\n * TeachingPopoverTitle Props\n */\nexport type TeachingPopoverTitleProps = ComponentProps<TeachingPopoverTitleSlots>;\n\n/**\n * State used in rendering TeachingPopoverTitle\n */\nexport type TeachingPopoverTitleState = ComponentState<TeachingPopoverTitleSlots> &\n  Pick<PopoverContextValue, 'appearance'>;\n\nexport type TeachingPopoverTitleBaseProps = TeachingPopoverTitleProps;\n\nexport type TeachingPopoverTitleBaseState = Omit<TeachingPopoverTitleState, 'appearance'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/TeachingPopoverTitle/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     teachingPopoverTitleClassNames: function() {
         return _useTeachingPopoverTitleStylesstyles.teachingPopoverTitleClassNames;
     },
+    useTeachingPopoverTitleBase_unstable: function() {
+        return _useTeachingPopoverTitle.useTeachingPopoverTitleBase_unstable;
+    },
     useTeachingPopoverTitleStyles_unstable: function() {
         return _useTeachingPopoverTitleStylesstyles.useTeachingPopoverTitleStyles_unstable;
     },

package/lib-commonjs/components/TeachingPopoverTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverTitle/index.ts"],"sourcesContent":["export { TeachingPopoverTitle } from './TeachingPopoverTitle';\nexport type {\n  TeachingPopoverTitleProps,\n  TeachingPopoverTitleSlots,\n  TeachingPopoverTitleState,\n} from './TeachingPopoverTitle.types';\nexport { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';\nexport { useTeachingPopoverTitle_unstable } from './useTeachingPopoverTitle';\nexport {\n  teachingPopoverTitleClassNames,\n  useTeachingPopoverTitleStyles_unstable,\n} from './useTeachingPopoverTitleStyles.styles';\n"],"names":["TeachingPopoverTitle","renderTeachingPopoverTitle_unstable","useTeachingPopoverTitle_unstable","teachingPopoverTitleClassNames","useTeachingPopoverTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eAMpBC,+DAAmC;;;eAG1CE,mEAA8B;;;eAC9BC,2EAAsC;;;eAH/BF,yDAAgC;;;sCAPJ,yBAAyB;4CAMV,+BAA+B;yCAClC,4BAA4B;qDAItE,yCAAyC"}
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/index.ts"],"sourcesContent":["export { TeachingPopoverTitle } from './TeachingPopoverTitle';\nexport type {\n  TeachingPopoverTitleBaseProps,\n  TeachingPopoverTitleBaseState,\n  TeachingPopoverTitleProps,\n  TeachingPopoverTitleSlots,\n  TeachingPopoverTitleState,\n} from './TeachingPopoverTitle.types';\nexport { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';\nexport { useTeachingPopoverTitle_unstable, useTeachingPopoverTitleBase_unstable } from './useTeachingPopoverTitle';\nexport {\n  teachingPopoverTitleClassNames,\n  useTeachingPopoverTitleStyles_unstable,\n} from './useTeachingPopoverTitleStyles.styles';\n"],"names":["TeachingPopoverTitle","renderTeachingPopoverTitle_unstable","useTeachingPopoverTitle_unstable","useTeachingPopoverTitleBase_unstable","teachingPopoverTitleClassNames","useTeachingPopoverTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eAQpBC,+DAAmC;;;eAG1CG,mEAA8B;;;eAFWD,6DAAoC;;;eAG7EE,2EAAsC;;;eAH/BH,yDAAgC;;;sCATJ,yBAAyB;4CAQV,+BAA+B;yCACI,4BAA4B;qDAI5G,yCAAyC"}

package/lib-commonjs/components/TeachingPopoverTitle/useTeachingPopoverTitle.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTeachingPopoverTitle_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTeachingPopoverTitleBase_unstable: function() {
+        return useTeachingPopoverTitleBase_unstable;
+    },
+    useTeachingPopoverTitle_unstable: function() {
         return useTeachingPopoverTitle_unstable;
     }
 });
@@ -15,11 +23,10 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reacticons = require("@fluentui/react-icons");
 const _reactpopover = require("@fluentui/react-popover");
 const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.DismissFilled, _reacticons.DismissRegular);
-const useTeachingPopoverTitle_unstable = (props, ref)=>{
+const useTeachingPopoverTitleBase_unstable = (props, ref)=>{
     const { dismissButton } = props;
     const setOpen = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.setOpen);
     const triggerRef = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.triggerRef);
-    const appearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
     const onDismissButtonClick = (0, _reactutilities.useEventCallback)((ev)=>{
         if (!ev.defaultPrevented) {
             setOpen(ev, false);
@@ -29,7 +36,6 @@ const useTeachingPopoverTitle_unstable = (props, ref)=>{
         }
     });
     return {
-        appearance,
         components: {
             root: 'h2',
             dismissButton: 'button'
@@ -43,7 +49,6 @@ const useTeachingPopoverTitle_unstable = (props, ref)=>{
         dismissButton: _reactutilities.slot.optional(dismissButton, {
             renderByDefault: false,
             defaultProps: {
-                children: /*#__PURE__*/ _react.createElement(DismissIcon, null),
                 onClick: onDismissButtonClick,
                 'aria-label': 'dismiss',
                 'aria-hidden': true
@@ -52,3 +57,16 @@ const useTeachingPopoverTitle_unstable = (props, ref)=>{
         })
     };
 };
+const useTeachingPopoverTitle_unstable = (props, ref)=>{
+    const baseState = useTeachingPopoverTitleBase_unstable(props, ref);
+    const appearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
+    const dismissButton = baseState.dismissButton && baseState.dismissButton.children === undefined ? {
+        ...baseState.dismissButton,
+        children: /*#__PURE__*/ _react.createElement(DismissIcon, null)
+    } : baseState.dismissButton;
+    return {
+        ...baseState,
+        appearance,
+        dismissButton
+    };
+};

package/lib-commonjs/components/TeachingPopoverTitle/useTeachingPopoverTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverTitleProps, TeachingPopoverTitleState } from './TeachingPopoverTitle.types';\nimport { DismissFilled, DismissRegular, bundleIcon } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\nconst DismissIcon = bundleIcon(DismissFilled, DismissRegular);\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverTitle properties\n * @param ref - reference to root HTMLElement of TeachingPopoverTitle\n */\nexport const useTeachingPopoverTitle_unstable = (\n  props: TeachingPopoverTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverTitleState => {\n  const { dismissButton } = props;\n\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    if (!ev.defaultPrevented) {\n      setOpen(ev, false);\n    }\n\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  });\n\n  return {\n    appearance,\n    components: {\n      root: 'h2',\n      dismissButton: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h2', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    dismissButton: slot.optional(dismissButton, {\n      renderByDefault: false,\n      defaultProps: {\n        children: <DismissIcon />,\n        onClick: onDismissButtonClick,\n        'aria-label': 'dismiss',\n        'aria-hidden': true,\n      },\n      elementType: 'button',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","DismissFilled","DismissRegular","bundleIcon","usePopoverContext_unstable","DismissIcon","useTeachingPopoverTitle_unstable","props","ref","dismissButton","setOpen","context","triggerRef","appearance","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","children","onClick"],"mappings":"AAAA;;;;;+BAcaS;;;;;;;iEAZU,QAAQ;gCACkC,4BAA4B;4BAEnC,wBAAwB;8BACvC,0BAA0B;AAErE,MAAMD,kBAAcF,sBAAAA,EAAWF,yBAAAA,EAAeC,0BAAAA;AAMvC,yCAAyC,CAC9CK,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAE1B,MAAMG,cAAUN,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,iBAAaR,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,iBAAaT,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,2BAAuBf,gCAAAA,EAAiB,CAACgB;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBN,QAAQK,IAAI;QACd;QAEA,IAAIH,WAAWK,OAAO,EAAE;YACtBL,WAAWK,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLL;QACAM,YAAY;YACVC,MAAM;YACNX,eAAe;QACjB;QACAW,MAAMpB,oBAAAA,CAAKqB,MAAM,KACfvB,wCAAAA,EAAyB,MAAM;YAC7BU;YACA,GAAGD,KAAK;QACV,IACA;YAAEe,aAAa;QAAK;QAEtBb,eAAeT,oBAAAA,CAAKuB,QAAQ,CAACd,eAAe;YAC1Ce,iBAAiB;YACjBC,cAAc;gBACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACrB,aAAAA;gBACXsB,SAASb;gBACT,cAAc;gBACd,eAAe;YACjB;YACAQ,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverTitleBaseProps,\n  TeachingPopoverTitleBaseState,\n  TeachingPopoverTitleProps,\n  TeachingPopoverTitleState,\n} from './TeachingPopoverTitle.types';\nimport { DismissFilled, DismissRegular, bundleIcon } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\nconst DismissIcon = bundleIcon(DismissFilled, DismissRegular);\n\n/**\n * Base hook that builds TeachingPopoverTitle state for behavior and structure only.\n * Does not bundle/render the dismiss icon and does not read `appearance` from popover context.\n * @param props - TeachingPopoverTitle properties\n * @param ref - reference to root HTMLElement of TeachingPopoverTitle\n */\nexport const useTeachingPopoverTitleBase_unstable = (\n  props: TeachingPopoverTitleBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverTitleBaseState => {\n  const { dismissButton } = props;\n\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n\n  const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    if (!ev.defaultPrevented) {\n      setOpen(ev, false);\n    }\n\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  });\n\n  return {\n    components: {\n      root: 'h2',\n      dismissButton: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h2', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    dismissButton: slot.optional(dismissButton, {\n      renderByDefault: false,\n      defaultProps: {\n        onClick: onDismissButtonClick,\n        'aria-label': 'dismiss',\n        'aria-hidden': true,\n      },\n      elementType: 'button',\n    }),\n  };\n};\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverTitle properties\n * @param ref - reference to root HTMLElement of TeachingPopoverTitle\n */\nexport const useTeachingPopoverTitle_unstable = (\n  props: TeachingPopoverTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverTitleState => {\n  const baseState = useTeachingPopoverTitleBase_unstable(props, ref);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const dismissButton =\n    baseState.dismissButton && baseState.dismissButton.children === undefined\n      ? { ...baseState.dismissButton, children: <DismissIcon /> }\n      : baseState.dismissButton;\n\n  return {\n    ...baseState,\n    appearance,\n    dismissButton,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","DismissFilled","DismissRegular","bundleIcon","usePopoverContext_unstable","DismissIcon","useTeachingPopoverTitleBase_unstable","props","ref","dismissButton","setOpen","context","triggerRef","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","onClick","useTeachingPopoverTitle_unstable","baseState","appearance","children","undefined"],"mappings":"AAAA;;;;;;;;;;;;IAqBaS,oCAAAA;;;oCAgDAoB;;;;;iEAnEU,QAAQ;gCACkC,4BAA4B;4BAOnC,wBAAwB;8BACvC,0BAA0B;AAErE,MAAMrB,kBAAcF,sBAAAA,EAAWF,yBAAAA,EAAeC,0BAAAA;AAQvC,6CAA6C,CAClDK,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAE1B,MAAMG,cAAUN,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,iBAAaR,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAE3E,MAAMC,2BAAuBd,gCAAAA,EAAiB,CAACe;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBL,QAAQI,IAAI;QACd;QAEA,IAAIF,WAAWI,OAAO,EAAE;YACtBJ,WAAWI,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;YACNV,eAAe;QACjB;QACAU,MAAMnB,oBAAAA,CAAKoB,MAAM,KACftB,wCAAAA,EAAyB,MAAM;YAC7BU;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAK;QAEtBZ,eAAeT,oBAAAA,CAAKsB,QAAQ,CAACb,eAAe;YAC1Cc,iBAAiB;YACjBC,cAAc;gBACZC,SAASZ;gBACT,cAAc;gBACd,eAAe;YACjB;YACAQ,aAAa;QACf;IACF;AACF,EAAE;AAOK,MAAMK,mCAAmC,CAC9CnB,OACAC;IAEA,MAAMmB,YAAYrB,qCAAqCC,OAAOC;IAC9D,MAAMoB,iBAAaxB,wCAAAA,EAA2BO,CAAAA,UAAWA,QAAQiB,UAAU;IAE3E,MAAMnB,gBACJkB,UAAUlB,aAAa,IAAIkB,UAAUlB,aAAa,CAACoB,QAAQ,KAAKC,YAC5D;QAAE,GAAGH,UAAUlB,aAAa;QAAEoB,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACxB,aAAAA;IAAe,IACxDsB,UAAUlB,aAAa;IAE7B,OAAO;QACL,GAAGkB,SAAS;QACZC;QACAnB;IACF;AACF,EAAE"}

package/lib-commonjs/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.js

@@ -158,8 +158,10 @@ const useTeachingPopoverTitleStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
     if (state.dismissButton) {
+        // eslint-disable-next-line react-hooks/immutability
         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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTeachingPopoverTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const teachingPopoverTitleClassNames = {\n    root: 'fui-TeachingPopoverTitle',\n    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'\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/** Applies style classnames to slots */ export const useTeachingPopoverTitleStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);\n    if (state.dismissButton) {\n        state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverTitleClassNames","root","dismissButton","useStyles","mc9l5x","Beiy3e4","Brf1p80","Be2twd7","Bhrd7zp","sj55zd","Bg96gwp","Byoj8tv","B6of3ja","jrapky","rootBrand","qhf8xq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bt984gj","Bceei9c","Bahqtrf","De3pzq","B7ck84d","B7oj6ja","Bbmb7ep","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Jyy4pa","dismissBrand","d","p","useTeachingPopoverTitleStyles_unstable","state","styles","appearance","className","undefined"],"mappings":"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"}
+{"version":3,"sources":["useTeachingPopoverTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const teachingPopoverTitleClassNames = {\n    root: 'fui-TeachingPopoverTitle',\n    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'\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/** Applies style classnames to slots */ export const useTeachingPopoverTitleStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);\n    if (state.dismissButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverTitleClassNames","root","dismissButton","useStyles","mc9l5x","Beiy3e4","Brf1p80","Be2twd7","Bhrd7zp","sj55zd","Bg96gwp","Byoj8tv","B6of3ja","jrapky","rootBrand","qhf8xq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bt984gj","Bceei9c","Bahqtrf","De3pzq","B7ck84d","B7oj6ja","Bbmb7ep","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Jyy4pa","dismissBrand","d","p","useTeachingPopoverTitleStyles_unstable","state","styles","appearance","className","undefined"],"mappings":"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"}

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

@@ -67,8 +67,10 @@ const useTeachingPopoverTitleStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
     if (state.dismissButton) {
+        // eslint-disable-next-line react-hooks/immutability
         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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): 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"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,8BAAAA;;;0CA8CA4C;eAAAA;;;uBApDwC,iBAAiB;8BAGtB,0BAA0B;4BACjC,wBAAwB;AAE1D,uCAAkF;IACvF3C,MAAM;IACNC,eAAe;AACjB,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BO,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,gBAAgB;QAChBC,UAAUT,kBAAAA,CAAOU,eAAe;QAChCC,YAAYX,kBAAAA,CAAOY,kBAAkB;QACrCC,OAAOb,kBAAAA,CAAOc,uBAAuB;QACrCC,YAAYf,kBAAAA,CAAOgB,iBAAiB;QACpCC,eAAejB,kBAAAA,CAAOkB,gBAAgB;QACtCC,WAAWnB,kBAAAA,CAAOoB,qBAAqB;QACvCC,cAAcrB,kBAAAA,CAAOoB,qBAAqB;IAC5C;IACAE,WAAW;QACTT,OAAOb,kBAAAA,CAAOuB,6BAA6B;IAC7C;IACAnB,eAAe;QACboB,UAAU;QACVC,QAAQ,GAAGzB,kBAAAA,CAAO0B,eAAe,CAAC,OAAO,EAAE1B,kBAAAA,CAAO2B,sBAAsB,EAAE;QAC1ErB,SAAS;QACTsB,YAAY;QACZC,QAAQ;QACR,GAAG5B,4BAAAA,CAAiB6B,KAAK;QACzBC,iBAAiB/B,kBAAAA,CAAOgC,0BAA0B;QAClDC,WAAW;QACXC,sBAAsBlC,kBAAAA,CAAOmC,gBAAgB;QAC7CC,yBAAyBpC,kBAAAA,CAAOmC,gBAAgB;QAChDE,kBAAkB;QAClB,OAAGtC,6CAAAA,EAAgC;YACjCuC,SAAS,GAAGtC,kBAAAA,CAAOuC,gBAAgB,CAAC,OAAO,EAAEvC,kBAAAA,CAAOwC,iBAAiB,EAAE;YACvEC,cAAczC,kBAAAA,CAAO0C,kBAAkB;YACvC,GAAG5C,iBAAAA,CAAW6C,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFC,mBAAmB;IACrB;IACAC,cAAc;QACZhC,OAAOb,kBAAAA,CAAOuB,6BAA6B;IAC7C;AACF;AAGO,+CAA+C,CAACwB;IACrD;IAEA,MAAMC,SAAS3C;IACf,MAAM,EAAE4C,UAAU,EAAE,GAAGF;IAEvBA,MAAM5C,IAAI,CAAC+C,SAAS,OAAGrD,mBAAAA,EACrBK,+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,OAAGrD,mBAAAA,EAC9BK,+BAA+BE,aAAa,EAC5C4C,OAAO5C,aAAa,EACpB6C,eAAe,UAAUD,OAAOH,YAAY,GAAGM,WAC/CJ,MAAM3C,aAAa,CAAC8C,SAAS;IAEjC;IAEA,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): TeachingPopoverTitleState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,8BAAAA;;;IA8CA4C,sCAAAA;;;;uBApDwC,iBAAiB;8BAGtB,0BAA0B;4BACjC,wBAAwB;AAE1D,uCAAkF;IACvF3C,MAAM;IACNC,eAAe;AACjB,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BO,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,gBAAgB;QAChBC,UAAUT,kBAAAA,CAAOU,eAAe;QAChCC,YAAYX,kBAAAA,CAAOY,kBAAkB;QACrCC,OAAOb,kBAAAA,CAAOc,uBAAuB;QACrCC,YAAYf,kBAAAA,CAAOgB,iBAAiB;QACpCC,eAAejB,kBAAAA,CAAOkB,gBAAgB;QACtCC,WAAWnB,kBAAAA,CAAOoB,qBAAqB;QACvCC,cAAcrB,kBAAAA,CAAOoB,qBAAqB;IAC5C;IACAE,WAAW;QACTT,OAAOb,kBAAAA,CAAOuB,6BAA6B;IAC7C;IACAnB,eAAe;QACboB,UAAU;QACVC,QAAQ,GAAGzB,kBAAAA,CAAO0B,eAAe,CAAC,OAAO,EAAE1B,kBAAAA,CAAO2B,sBAAsB,EAAE;QAC1ErB,SAAS;QACTsB,YAAY;QACZC,QAAQ;QACR,GAAG5B,4BAAAA,CAAiB6B,KAAK;QACzBC,iBAAiB/B,kBAAAA,CAAOgC,0BAA0B;QAClDC,WAAW;QACXC,sBAAsBlC,kBAAAA,CAAOmC,gBAAgB;QAC7CC,yBAAyBpC,kBAAAA,CAAOmC,gBAAgB;QAChDE,kBAAkB;QAClB,OAAGtC,6CAAAA,EAAgC;YACjCuC,SAAS,GAAGtC,kBAAAA,CAAOuC,gBAAgB,CAAC,OAAO,EAAEvC,kBAAAA,CAAOwC,iBAAiB,EAAE;YACvEC,cAAczC,kBAAAA,CAAO0C,kBAAkB;YACvC,GAAG5C,iBAAAA,CAAW6C,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFC,mBAAmB;IACrB;IACAC,cAAc;QACZhC,OAAOb,kBAAAA,CAAOuB,6BAA6B;IAC7C;AACF;AAGO,+CAA+C,CAACwB;IACrD;IAEA,MAAMC,SAAS3C;IACf,MAAM,EAAE4C,UAAU,EAAE,GAAGF;IAEvB,oDAAoD;IACpDA,MAAM5C,IAAI,CAAC+C,SAAS,OAAGrD,mBAAAA,EACrBK,+BAA+BC,IAAI,EACnC6C,OAAO7C,IAAI,EACX8C,eAAe,WAAWD,OAAO1B,SAAS,EAC1CyB,MAAM5C,IAAI,CAAC+C,SAAS;IAGtB,IAAIH,MAAM3C,aAAa,EAAE;QACvB,oDAAoD;QACpD2C,MAAM3C,aAAa,CAAC8C,SAAS,OAAGrD,mBAAAA,EAC9BK,+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/index.js

@@ -135,6 +135,9 @@ _export(exports, {
     useTeachingPopoverBody_unstable: function() {
         return _TeachingPopoverBody.useTeachingPopoverBody_unstable;
     },
+    useTeachingPopoverCarouselBase_unstable: function() {
+        return _TeachingPopoverCarousel.useTeachingPopoverCarouselBase_unstable;
+    },
     useTeachingPopoverCarouselCardStyles_unstable: function() {
         return _TeachingPopoverCarouselCard.useTeachingPopoverCarouselCardStyles_unstable;
     },
@@ -144,6 +147,9 @@ _export(exports, {
     useTeachingPopoverCarouselContextValues_unstable: function() {
         return _TeachingPopoverCarousel.useTeachingPopoverCarouselContextValues_unstable;
     },
+    useTeachingPopoverCarouselFooterButtonBase_unstable: function() {
+        return _TeachingPopoverCarouselFooterButton.useTeachingPopoverCarouselFooterButtonBase_unstable;
+    },
     useTeachingPopoverCarouselFooterButtonStyles_unstable: function() {
         return _TeachingPopoverCarouselFooterButton.useTeachingPopoverCarouselFooterButtonStyles_unstable;
     },
@@ -156,6 +162,12 @@ _export(exports, {
     useTeachingPopoverCarouselFooter_unstable: function() {
         return _TeachingPopoverCarouselFooter.useTeachingPopoverCarouselFooter_unstable;
     },
+    useTeachingPopoverCarouselNavBase_unstable: function() {
+        return _TeachingPopoverCarouselNav.useTeachingPopoverCarouselNavBase_unstable;
+    },
+    useTeachingPopoverCarouselNavButtonBase_unstable: function() {
+        return _TeachingPopoverCarouselNavButton.useTeachingPopoverCarouselNavButtonBase_unstable;
+    },
     useTeachingPopoverCarouselNavButtonStyles_unstable: function() {
         return _TeachingPopoverCarouselNavButton.useTeachingPopoverCarouselNavButtonStyles_unstable;
     },
@@ -183,9 +195,15 @@ _export(exports, {
     useTeachingPopoverContextValues_unstable: function() {
         return _TeachingPopover.useTeachingPopoverContextValues_unstable;
     },
+    useTeachingPopoverFooterBase_unstable: function() {
+        return _TeachingPopoverFooter.useTeachingPopoverFooterBase_unstable;
+    },
     useTeachingPopoverFooter_unstable: function() {
         return _TeachingPopoverFooter.useTeachingPopoverFooter_unstable;
     },
+    useTeachingPopoverHeaderBase_unstable: function() {
+        return _TeachingPopoverHeader.useTeachingPopoverHeaderBase_unstable;
+    },
     useTeachingPopoverHeaderStyles_unstable: function() {
         return _TeachingPopoverHeader.useTeachingPopoverHeaderStyles_unstable;
     },
@@ -198,6 +216,9 @@ _export(exports, {
     useTeachingPopoverSurface_unstable: function() {
         return _TeachingPopoverSurface.useTeachingPopoverSurface_unstable;
     },
+    useTeachingPopoverTitleBase_unstable: function() {
+        return _TeachingPopoverTitle.useTeachingPopoverTitleBase_unstable;
+    },
     useTeachingPopoverTitleStyles_unstable: function() {
         return _TeachingPopoverTitle.useTeachingPopoverTitleStyles_unstable;
     },