@fluentui/react-teaching-popover 0.0.0-nightly-20240423-0406.1

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

@@ -0,0 +1,104 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const teachingPopoverCarouselNavButtonClassNames = {
+  root: 'fui-TeachingPopoverCarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bceei9c: "f1k6fduh",
+    B7ck84d: "f1ewtqcl",
+    Bqenvij: "f1x82gua",
+    a9b677: "f1o3cbw4",
+    De3pzq: "ffp7eso"
+  },
+  rootUnselected: {
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bbmb7ep: ["fqgqgel", "fchfifz"],
+    Beyfa6y: ["fchfifz", "fqgqgel"],
+    B7oj6ja: ["fc7b1hi", "f1dpx5h9"],
+    Btl43ni: ["f1dpx5h9", "fc7b1hi"],
+    z8tnut: "f1nbblvp",
+    z189sj: ["fifp7yv", "f1asdtw4"],
+    Byoj8tv: "f1ov4xf1",
+    uwmqm3: ["f1asdtw4", "fifp7yv"],
+    Bpd4iqm: "f1iw27ad",
+    oeaueh: "f1yog68k",
+    Bw0xxkn: "f8dfeua",
+    Bn4voq9: "f1p7hgxw",
+    g9k6zt: "f9znhxp",
+    Bfpq7zp: "fqrak0z",
+    kdpuga: ["f1o2ludy", "f1kjnpwc"],
+    Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
+    B6xbmo0: ["fxmnebo", "f1witrsb"],
+    dm238s: ["f1witrsb", "fxmnebo"],
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    De3pzq: "frgiif3",
+    Bfclv37: "f14lfud5",
+    B372c46: "fngekiq"
+  },
+  rootSelected: {
+    Bpd4iqm: "f1iw27ad",
+    oeaueh: "f1yog68k",
+    Bw0xxkn: "f8dfeua",
+    a9b677: "fjw5fx7",
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bbmb7ep: ["fff7au0", "f1bjk9e1"],
+    Beyfa6y: ["f1bjk9e1", "fff7au0"],
+    B7oj6ja: ["fwsfkhu", "f8wkphi"],
+    Btl43ni: ["f8wkphi", "fwsfkhu"],
+    z8tnut: "f1nbblvp",
+    z189sj: ["fifp7yv", "f1asdtw4"],
+    Byoj8tv: "f1ov4xf1",
+    uwmqm3: ["f1asdtw4", "fifp7yv"],
+    Bn4voq9: "f1p7hgxw",
+    g9k6zt: "f9znhxp",
+    Bfpq7zp: "fqrak0z",
+    kdpuga: ["f1o2ludy", "f1kjnpwc"],
+    Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
+    B6xbmo0: ["fxmnebo", "f1witrsb"],
+    dm238s: ["f1witrsb", "fxmnebo"],
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"]
+  },
+  rootBrand: {
+    De3pzq: "f10s6wn9"
+  },
+  rootBrandUnselected: {
+    De3pzq: "frxe7el",
+    Bfclv37: "f14lfud5",
+    B372c46: "fngekiq"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1k6fduh{cursor:pointer;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1x82gua{height:8px;}", ".f1o3cbw4{width:8px;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".fqgqgel{border-bottom-right-radius:50%;}", ".fchfifz{border-bottom-left-radius:50%;}", ".fc7b1hi{border-top-right-radius:50%;}", ".f1dpx5h9{border-top-left-radius:50%;}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".f1iw27ad{outline-width:var(--strokeWidthThin);}", ".f1yog68k{outline-style:solid;}", ".f8dfeua{outline-color:transparent;}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".frgiif3{background-color:color-mix(in srgb, var(--colorBrandBackground) 30%, transparent);}", ".fjw5fx7{width:16px;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".frxe7el{background-color:color-mix(in srgb, var(--colorNeutralForegroundOnBrand) 30%, transparent);}"],
+  t: ["@supports not (color: color-mix(in lch, white, black)){.f14lfud5{opacity:0.3;}}", "@supports not (color: color-mix(in lch, white, black)){.fngekiq{background-color:var(--colorBrandBackground);}}"]
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state
+ */
+export const useTeachingPopoverCarouselNavButtonStyles_unstable = state => {
+  const styles = useStyles();
+  const {
+    appearance,
+    isSelected
+  } = state;
+  const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;
+  state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTeachingPopoverCarouselNavButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","teachingPopoverCarouselNavButtonClassNames","root","useStyles","mc9l5x","Bceei9c","B7ck84d","Bqenvij","a9b677","De3pzq","rootUnselected","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","Bpd4iqm","oeaueh","Bw0xxkn","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfclv37","B372c46","rootSelected","rootBrand","rootBrandUnselected","d","t","useTeachingPopoverCarouselNavButtonStyles_unstable","state","styles","appearance","isSelected","brandStyles","className"],"sources":["useTeachingPopoverCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const teachingPopoverCarouselNavButtonClassNames = {\n    root: 'fui-TeachingPopoverCarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        cursor: 'pointer',\n        boxSizing: 'border-box',\n        height: '8px',\n        width: '8px',\n        backgroundColor: tokens.colorBrandBackground\n    },\n    rootUnselected: {\n        ...shorthands.border(0),\n        ...shorthands.borderRadius('50%'),\n        ...shorthands.padding('0px'),\n        ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.borderColor('transparent')\n        }),\n        backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    },\n    rootSelected: {\n        ...shorthands.outline(tokens.strokeWidthThin, 'solid', 'transparent'),\n        width: '16px',\n        ...shorthands.border(0),\n        ...shorthands.borderRadius('4px'),\n        ...shorthands.padding('0px'),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.borderColor('transparent')\n        })\n    },\n    rootBrand: {\n        backgroundColor: tokens.colorNeutralForegroundOnBrand\n    },\n    rootBrandUnselected: {\n        backgroundColor: `color-mix(in srgb, ${tokens.colorNeutralForegroundOnBrand} 30%, transparent)`,\n        '@supports not (color: color-mix(in lch, white, black))': {\n            // This will also affect the focus border, but only in older unsupported browsers\n            opacity: 0.3,\n            backgroundColor: tokens.colorBrandBackground\n        }\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselNavButton slots based on the state\n */ export const useTeachingPopoverCarouselNavButtonStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { appearance, isSelected } = state;\n    const brandStyles = isSelected ? styles.rootBrand : styles.rootBrandUnselected;\n    state.root.className = mergeClasses(teachingPopoverCarouselNavButtonClassNames.root, styles.root, isSelected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && brandStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,0CAA0C,GAAG;EACtDC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA3B,MAAA;IAAA4B,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAhB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAjB,MAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAI,SAAA;IAAA/B,MAAA;EAAA;EAAAgC,mBAAA;IAAAhC,MAAA;IAAA4B,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;AAAA,CAiDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kDAAkD,GAAIC,KAAK,IAAG;EAC3E,MAAMC,MAAM,GAAG3C,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAE4C,UAAU;IAAEC;EAAW,CAAC,GAAGH,KAAK;EACxC,MAAMI,WAAW,GAAGD,UAAU,GAAGF,MAAM,CAACN,SAAS,GAAGM,MAAM,CAACL,mBAAmB;EAC9EI,KAAK,CAAC3C,IAAI,CAACgD,SAAS,GAAGrD,YAAY,CAACI,0CAA0C,CAACC,IAAI,EAAE4C,MAAM,CAAC5C,IAAI,EAAE8C,UAAU,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACpC,cAAc,EAAEqC,UAAU,KAAK,OAAO,IAAIE,WAAW,EAAEJ,KAAK,CAAC3C,IAAI,CAACgD,SAAS,CAAC;EACxN,OAAOL,KAAK;AAChB,CAAC"}

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';
+import { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';
+import { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';
+/**
+ * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count
+ *
+ * The child render function will provide both current and total page numbers for customization.
+ */ export const TeachingPopoverCarouselPageCount = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);
+    useTeachingPopoverCarouselPageCountStyles_unstable(state);
+    return renderTeachingPopoverCarouselPageCount_unstable(state);
+});
+TeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["React","useTeachingPopoverCarouselPageCount_unstable","renderTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","TeachingPopoverCarouselPageCount","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAGxH;;;;CAIC,GACD,OAAO,MAAMC,iDACXJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQP,6CAA6CK,OAAOC;IAElEJ,mDAAmDK;IAEnD,OAAON,gDAAgDM;AACzD,GAAG;AAELJ,iCAAiCK,WAAW,GAAG"}

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverCarouselPageCount.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselPageCountSlots = {\n  root: Slot<'div'>;\n};\n\nexport type TeachingPopoverCarouselPageCountRenderFunction = (\n  currentPage: number,\n  totalPages: number,\n) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselPageCount Props\n */\nexport type TeachingPopoverCarouselPageCountProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselPageCountSlots>>,\n  'children'\n> & {\n  children: TeachingPopoverCarouselPageCountRenderFunction;\n};\n\n/**\n * State used in rendering TeachingPopoverCarouselPageCount\n */\nexport type TeachingPopoverCarouselPageCountState = ComponentState<TeachingPopoverCarouselPageCountSlots> & {\n  currentIndex: number;\n\n  totalPages: number;\n\n  renderPageCount: TeachingPopoverCarouselPageCountRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/TeachingPopoverCarouselPageCount/index.js

@@ -0,0 +1,5 @@
+export * from './TeachingPopoverCarouselPageCount';
+export * from './TeachingPopoverCarouselPageCount.types';
+export * from './renderTeachingPopoverCarouselPageCount';
+export * from './useTeachingPopoverCarouselPageCount';
+export * from './useTeachingPopoverCarouselPageCountStyles.styles';

package/lib/components/TeachingPopoverCarouselPageCount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TeachingPopoverCarouselPageCount';\nexport * from './TeachingPopoverCarouselPageCount.types';\nexport * from './renderTeachingPopoverCarouselPageCount';\nexport * from './useTeachingPopoverCarouselPageCount';\nexport * from './useTeachingPopoverCarouselPageCountStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC;AACnD,cAAc,2CAA2C;AACzD,cAAc,2CAA2C;AACzD,cAAc,wCAAwC;AACtD,cAAc,qDAAqD"}

package/lib/components/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverCarouselPageCount
+ */ export const renderTeachingPopoverCarouselPageCount_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.js.map

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

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
+import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';
+/**
+ * Create the state required to render TeachingPopoverCarouselPageCount.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselPageCount_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselPageCount
+ * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount
+ */ export const useTeachingPopoverCarouselPageCount_unstable = (props, ref)=>{
+    const values = useCarouselValues_unstable((snapshot)=>snapshot);
+    var _useCarouselContext_unstable;
+    const selectedValue = (_useCarouselContext_unstable = useCarouselContext_unstable((c)=>c.value)) !== null && _useCarouselContext_unstable !== void 0 ? _useCarouselContext_unstable : values[0];
+    const currentIndex = values.indexOf(selectedValue);
+    const totalPages = values.length;
+    return {
+        currentIndex,
+        totalPages,
+        renderPageCount: props.children,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props,
+            children: props.children(currentIndex + 1, totalPages)
+        }), {
+            elementType: 'div'
+        })
+    };
+};

package/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTeachingPopoverCarouselPageCount.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselPageCount.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselPageCount_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselPageCount\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount\n */\nexport const useTeachingPopoverCarouselPageCount_unstable = (\n  props: TeachingPopoverCarouselPageCountProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselPageCountState => {\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  const selectedValue = useCarouselContext_unstable(c => c.value) ?? values[0];\n  const currentIndex = values.indexOf(selectedValue);\n  const totalPages = values.length;\n\n  return {\n    currentIndex,\n    totalPages,\n    renderPageCount: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        children: props.children(currentIndex + 1, totalPages),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCarouselValues_unstable","useCarouselContext_unstable","useTeachingPopoverCarouselPageCount_unstable","props","ref","values","snapshot","selectedValue","c","value","currentIndex","indexOf","totalPages","length","renderPageCount","children","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAK3E,SAASC,0BAA0B,QAAQ,wDAAwD;AACnG,SAASC,2BAA2B,QAAQ,sDAAsD;AAElG;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAMC,SAASL,2BAA2BM,CAAAA,WAAYA;QAEhCL;IAAtB,MAAMM,gBAAgBN,CAAAA,+BAAAA,4BAA4BO,CAAAA,IAAKA,EAAEC,KAAK,eAAxCR,0CAAAA,+BAA6CI,MAAM,CAAC,EAAE;IAC5E,MAAMK,eAAeL,OAAOM,OAAO,CAACJ;IACpC,MAAMK,aAAaP,OAAOQ,MAAM;IAEhC,OAAO;QACLH;QACAE;QACAE,iBAAiBX,MAAMY,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRY,UAAUZ,MAAMY,QAAQ,CAACL,eAAe,GAAGE;QAC7C,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -0,0 +1,25 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselPageCountClassNames = {
+  root: 'fui-TeachingPopoverCarouselPageCount'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}"]
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state
+ */
+export const useTeachingPopoverCarouselPageCountStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTeachingPopoverCarouselPageCountStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","teachingPopoverCarouselPageCountClassNames","root","useStyles","mc9l5x","Bt984gj","Brf1p80","d","useTeachingPopoverCarouselPageCountStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselPageCountStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselPageCountClassNames = {\n    root: 'fui-TeachingPopoverCarouselPageCount'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center'\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state\n */ export const useTeachingPopoverCarouselPageCountStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0CAA0C,GAAG;EACtDC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kDAAkD,GAAIC,KAAK,IAAG;EAC3E,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGX,YAAY,CAACC,0CAA0C,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EACvH,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';
+import { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';
+import { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';
+/**
+ * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,
+ * and handle Popover functionality such as closing the popup.
+ *
+ * Users must provide the localized text for each button within the footer via slots.
+ */ export const TeachingPopoverFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverFooter_unstable(props, ref);
+    useTeachingPopoverFooterStyles_unstable(state);
+    return renderTeachingPopoverFooter_unstable(state);
+});
+TeachingPopoverFooter.displayName = 'TeachingPopoverFooter';

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nimport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nimport { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';\nimport type { TeachingPopoverFooterProps } from './TeachingPopoverFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\n * and handle Popover functionality such as closing the popup.\n *\n * Users must provide the localized text for each button within the footer via slots.\n */\nexport const TeachingPopoverFooter: ForwardRefComponent<TeachingPopoverFooterProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverFooter_unstable(props, ref);\n\n  useTeachingPopoverFooterStyles_unstable(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["React","useTeachingPopoverFooter_unstable","renderTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","TeachingPopoverFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAIlG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAyEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQP,kCAAkCK,OAAOC;IAEvDJ,wCAAwCK;IAExC,OAAON,qCAAqCM;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverFooter.types.ts"],"sourcesContent":["import { Button } from '@fluentui/react-button';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverFooterSlots = {\n  /**\n   * The element wrapping the buttons.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The primary button slot.\n   */\n  primary: NonNullable<Slot<typeof Button>>;\n\n  /**\n   * The secondary button slot.\n   */\n  secondary?: Slot<typeof Button>;\n};\n\nexport type TeachingPopoverFooterState = ComponentState<TeachingPopoverFooterSlots> &\n  Pick<PopoverContextValue, 'appearance'> & {\n    /**\n     * Enables stylization to a horizontal or vertical stack of button layouts.\n     * Defaults to horizontal\n     */\n    footerLayout?: 'horizontal' | 'vertical';\n  };\n\nexport type TeachingPopoverFooterProps = ComponentProps<TeachingPopoverFooterSlots> &\n  Pick<TeachingPopoverFooterState, 'footerLayout'>;\n"],"names":[],"mappings":"AAAA,WA+BmD"}

package/lib/components/TeachingPopoverFooter/index.js

@@ -0,0 +1,5 @@
+export * from './TeachingPopoverFooter';
+export * from './TeachingPopoverFooter.types';
+export * from './renderTeachingPopoverFooter';
+export * from './useTeachingPopoverFooter';
+export * from './useTeachingPopoverFooterStyles.styles';

package/lib/components/TeachingPopoverFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TeachingPopoverFooter';\nexport * from './TeachingPopoverFooter.types';\nexport * from './renderTeachingPopoverFooter';\nexport * from './useTeachingPopoverFooter';\nexport * from './useTeachingPopoverFooterStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC;AAC9C,cAAc,6BAA6B;AAC3C,cAAc,0CAA0C"}

package/lib/components/TeachingPopoverFooter/renderTeachingPopoverFooter.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverFooter
+ */ export const renderTeachingPopoverFooter_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.primary, {}),
+            state.secondary && /*#__PURE__*/ _jsx(state.secondary, {})
+        ]
+    });
+};

package/lib/components/TeachingPopoverFooter/renderTeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTeachingPopoverFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverFooterState } from './TeachingPopoverFooter.types';\nimport { TeachingPopoverFooterSlots } from './TeachingPopoverFooter.types';\nimport { assertSlots } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverFooter\n */\nexport const renderTeachingPopoverFooter_unstable = (state: TeachingPopoverFooterState) => {\n  assertSlots<TeachingPopoverFooterSlots>(state);\n\n  return (\n    <state.root>\n      <state.primary />\n      {state.secondary && <state.secondary />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverFooter_unstable","state","root","primary","secondary"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnDF,YAAwCE;IAExC,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,OAAO;YACbF,MAAMG,SAAS,kBAAI,KAACH,MAAMG,SAAS;;;AAG1C,EAAE"}

package/lib/components/TeachingPopoverFooter/useTeachingPopoverFooter.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
+import { Button } from '@fluentui/react-button';
+import { usePopoverContext_unstable } from '@fluentui/react-popover';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverFooter properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverFooter
+ */ export const useTeachingPopoverFooter_unstable = (props, ref)=>{
+    const appearance = usePopoverContext_unstable((context)=>context.appearance);
+    const toggleOpen = usePopoverContext_unstable((context)=>context.toggleOpen);
+    const handleButtonClick = useEventCallback((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        toggleOpen(event);
+    });
+    const secondary = slot.optional(props.secondary, {
+        defaultProps: {
+            appearance: appearance === 'brand' ? 'primary' : undefined
+        },
+        renderByDefault: props.secondary !== undefined,
+        elementType: Button
+    });
+    // Merge any provided callback with close trigger
+    if (secondary) {
+        secondary.onClick = mergeCallbacks(handleButtonClick, secondary === null || secondary === void 0 ? void 0 : secondary.onClick);
+    }
+    const primary = slot.always(props.primary, {
+        defaultProps: {
+            appearance: appearance === 'brand' ? undefined : 'primary'
+        },
+        elementType: Button
+    });
+    // Primary button will close the popover if no secondary action is available.
+    if (!secondary) {
+        primary.onClick = mergeCallbacks(handleButtonClick, primary === null || primary === void 0 ? void 0 : primary.onClick);
+    }
+    var _props_footerLayout;
+    return {
+        footerLayout: (_props_footerLayout = props.footerLayout) !== null && _props_footerLayout !== void 0 ? _props_footerLayout : 'horizontal',
+        appearance,
+        components: {
+            root: 'div',
+            primary: Button,
+            secondary: Button
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        secondary,
+        primary
+    };
+};

package/lib/components/TeachingPopoverFooter/useTeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTeachingPopoverFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { TeachingPopoverFooterProps, TeachingPopoverFooterState } from './TeachingPopoverFooter.types';\nimport { Button } from '@fluentui/react-button';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverFooter properties\n * @param ref - reference to root HTMLElement of TeachingPopoverFooter\n */\nexport const useTeachingPopoverFooter_unstable = (\n  props: TeachingPopoverFooterProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverFooterState => {\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const toggleOpen = usePopoverContext_unstable(context => context.toggleOpen);\n\n  const handleButtonClick = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      toggleOpen(event);\n    },\n  );\n\n  const secondary = slot.optional(props.secondary, {\n    defaultProps: {\n      appearance: appearance === 'brand' ? 'primary' : undefined,\n    },\n    renderByDefault: props.secondary !== undefined,\n    elementType: Button,\n  });\n\n  // Merge any provided callback with close trigger\n  if (secondary) {\n    secondary.onClick = mergeCallbacks(handleButtonClick, secondary?.onClick);\n  }\n\n  const primary = slot.always(props.primary, {\n    defaultProps: {\n      appearance: appearance === 'brand' ? undefined : 'primary',\n    },\n    elementType: Button,\n  });\n\n  // Primary button will close the popover if no secondary action is available.\n  if (!secondary) {\n    primary.onClick = mergeCallbacks(handleButtonClick, primary?.onClick);\n  }\n\n  return {\n    footerLayout: props.footerLayout ?? 'horizontal',\n    appearance,\n    components: {\n      root: 'div',\n      primary: Button,\n      secondary: Button,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    secondary,\n    primary,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useEventCallback","Button","usePopoverContext_unstable","useTeachingPopoverFooter_unstable","props","ref","appearance","context","toggleOpen","handleButtonClick","event","isDefaultPrevented","secondary","optional","defaultProps","undefined","renderByDefault","elementType","onClick","primary","always","footerLayout","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAE7G,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,0BAA0B,QAAQ,0BAA0B;AAErE;;;;CAIC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAMC,aAAaJ,2BAA2BK,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,MAAME,aAAaN,2BAA2BK,CAAAA,UAAWA,QAAQC,UAAU;IAE3E,MAAMC,oBAAoBT,iBACxB,CAACU;QACC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEAH,WAAWE;IACb;IAGF,MAAME,YAAYb,KAAKc,QAAQ,CAACT,MAAMQ,SAAS,EAAE;QAC/CE,cAAc;YACZR,YAAYA,eAAe,UAAU,YAAYS;QACnD;QACAC,iBAAiBZ,MAAMQ,SAAS,KAAKG;QACrCE,aAAahB;IACf;IAEA,iDAAiD;IACjD,IAAIW,WAAW;QACbA,UAAUM,OAAO,GAAGpB,eAAeW,mBAAmBG,sBAAAA,gCAAAA,UAAWM,OAAO;IAC1E;IAEA,MAAMC,UAAUpB,KAAKqB,MAAM,CAAChB,MAAMe,OAAO,EAAE;QACzCL,cAAc;YACZR,YAAYA,eAAe,UAAUS,YAAY;QACnD;QACAE,aAAahB;IACf;IAEA,6EAA6E;IAC7E,IAAI,CAACW,WAAW;QACdO,QAAQD,OAAO,GAAGpB,eAAeW,mBAAmBU,oBAAAA,8BAAAA,QAASD,OAAO;IACtE;QAGgBd;IADhB,OAAO;QACLiB,cAAcjB,CAAAA,sBAAAA,MAAMiB,YAAY,cAAlBjB,iCAAAA,sBAAsB;QACpCE;QACAgB,YAAY;YACVC,MAAM;YACNJ,SAASlB;YACTW,WAAWX;QACb;QACAsB,MAAMxB,KAAKqB,MAAM,CACfvB,yBAAyB,OAAO;YAC9BQ;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBL;QACAO;IACF;AACF,EAAE"}

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

@@ -0,0 +1,68 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverFooterClassNames = {
+  root: 'fui-TeachingPopoverFooter',
+  primary: 'fui-TeachingPopoverFooter__primary',
+  secondary: 'fui-TeachingPopoverFooter__secondary'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    i8kkvl: "f4px1ci",
+    Belr9w4: "fn67r4l",
+    z8tnut: "f1kcqot9"
+  },
+  rootVertical: {
+    Beiy3e4: "f1vx9l62"
+  },
+  rootHorizontal: {
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f9c4gz4"
+  },
+  buttonRootVertical: {
+    a9b677: "f14z66ap",
+    Bbmb7ep: ["fff7au0", "f1bjk9e1"],
+    Beyfa6y: ["f1bjk9e1", "fff7au0"],
+    B7oj6ja: ["fwsfkhu", "f8wkphi"],
+    Btl43ni: ["f8wkphi", "fwsfkhu"]
+  },
+  buttonRootHorizontal: {
+    Bf4jedk: "f14es27b",
+    Bbmb7ep: ["fff7au0", "f1bjk9e1"],
+    Beyfa6y: ["f1bjk9e1", "fff7au0"],
+    B7oj6ja: ["fwsfkhu", "f8wkphi"],
+    Btl43ni: ["f8wkphi", "fwsfkhu"]
+  },
+  brandSecondary: {
+    g2u3we: "fm1ebug",
+    h3c5rm: ["f28omuz", "f1uhflii"],
+    B9xav0g: "f1ixw5o4",
+    zhjwy3: ["f1uhflii", "f28omuz"]
+  },
+  brandPrimary: {
+    sj55zd: "f16muhyy",
+    De3pzq: "f10s6wn9",
+    Bi91k9c: "f3ymbdj",
+    Jwef8y: "f1rgtb95",
+    B2d53fq: "f1pu27ff",
+    iro3zm: "f1d5c7in"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1kcqot9{padding-top:12px;}", ".f1vx9l62{flex-direction:column;}", ".f1063pyq{flex-direction:row;}", ".f9c4gz4{justify-content:flex-end;}", ".f14z66ap{width:auto;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f14es27b{min-width:96px;}", ".fm1ebug{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f28omuz{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1uhflii{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1ixw5o4{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}"],
+  h: [".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f1rgtb95:hover{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1pu27ff:hover:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1d5c7in:hover:active{background-color:var(--colorNeutralForegroundOnBrand);}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverFooterStyles_unstable = state => {
+  const styles = useStyles();
+  const {
+    appearance,
+    footerLayout
+  } = state;
+  state.root.className = mergeClasses(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);
+  if (state.secondary) {
+    state.secondary.className = mergeClasses(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);
+  }
+  state.primary.className = mergeClasses(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);
+  return state;
+};
+//# sourceMappingURL=useTeachingPopoverFooterStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","teachingPopoverFooterClassNames","root","primary","secondary","useStyles","mc9l5x","i8kkvl","Belr9w4","z8tnut","rootVertical","Beiy3e4","rootHorizontal","Brf1p80","buttonRootVertical","a9b677","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","buttonRootHorizontal","Bf4jedk","brandSecondary","g2u3we","h3c5rm","B9xav0g","zhjwy3","brandPrimary","sj55zd","De3pzq","Bi91k9c","Jwef8y","B2d53fq","iro3zm","d","h","useTeachingPopoverFooterStyles_unstable","state","styles","appearance","footerLayout","className","undefined"],"sources":["useTeachingPopoverFooterStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverFooterClassNames = {\n    root: 'fui-TeachingPopoverFooter',\n    primary: 'fui-TeachingPopoverFooter__primary',\n    secondary: 'fui-TeachingPopoverFooter__secondary'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        ...shorthands.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        ...shorthands.borderRadius('4px')\n    },\n    buttonRootHorizontal: {\n        minWidth: '96px',\n        ...shorthands.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/** Applies style classnames to slots */ export const useTeachingPopoverFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { appearance, footerLayout } = state;\n    state.root.className = mergeClasses(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);\n    if (state.secondary) {\n        state.secondary.className = mergeClasses(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);\n    }\n    state.primary.className = mergeClasses(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,OAAO,EAAE,oCAAoC;EAC7CC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;EAAAC,cAAA;IAAAD,OAAA;IAAAE,OAAA;EAAA;EAAAC,kBAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,oBAAA;IAAAC,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoCjB,CAAC;AACF;AAAyC,OAAO,MAAMC,uCAAuC,GAAIC,KAAK,IAAG;EACrG,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEkC,UAAU;IAAEC;EAAa,CAAC,GAAGH,KAAK;EAC1CA,KAAK,CAACnC,IAAI,CAACuC,SAAS,GAAG3C,YAAY,CAACG,+BAA+B,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEsC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAAC1B,cAAc,GAAG0B,MAAM,CAAC5B,YAAY,EAAE2B,KAAK,CAACnC,IAAI,CAACuC,SAAS,CAAC;EACzL,IAAIJ,KAAK,CAACjC,SAAS,EAAE;IACjBiC,KAAK,CAACjC,SAAS,CAACqC,SAAS,GAAG3C,YAAY,CAACG,+BAA+B,CAACG,SAAS,EAAEoC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAAClB,oBAAoB,GAAGkB,MAAM,CAACxB,kBAAkB,EAAEyB,UAAU,KAAK,OAAO,GAAGD,MAAM,CAAChB,cAAc,GAAGoB,SAAS,EAAEL,KAAK,CAACjC,SAAS,CAACqC,SAAS,CAAC;EACvQ;EACAJ,KAAK,CAAClC,OAAO,CAACsC,SAAS,GAAG3C,YAAY,CAACG,+BAA+B,CAACE,OAAO,EAAEqC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAAClB,oBAAoB,GAAGkB,MAAM,CAACxB,kBAAkB,EAAEyB,UAAU,KAAK,OAAO,GAAGD,MAAM,CAACX,YAAY,GAAGe,SAAS,EAAEL,KAAK,CAAClC,OAAO,CAACsC,SAAS,CAAC;EAC3P,OAAOJ,KAAK;AAChB,CAAC"}

package/lib/components/TeachingPopoverHeader/TeachingPopoverHeader.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTeachingPopoverHeader_unstable } from './useTeachingPopoverHeader';
+import { renderTeachingPopoverHeader_unstable } from './renderTeachingPopoverHeader';
+import { useTeachingPopoverHeaderStyles_unstable } from './useTeachingPopoverHeaderStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverHeader, using the `useTeachingPopoverHeader_unstable` and `useTeachingPopoverHeaderStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverHeader is an info subtitle located at the top of the popover, it provides a dismiss button by default (can be nulled)
+ * and an info-tip icon that can be overridden or removed, subtitle displayed will be the children elements of TeachingPopoverHeader.
+ */ export const TeachingPopoverHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverHeader_unstable(props, ref);
+    useTeachingPopoverHeaderStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverHeaderStyles_unstable')(state);
+    return renderTeachingPopoverHeader_unstable(state);
+});
+TeachingPopoverHeader.displayName = 'TeachingPopoverHeader';

package/lib/components/TeachingPopoverHeader/TeachingPopoverHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTeachingPopoverHeader_unstable } from './useTeachingPopoverHeader';\nimport { renderTeachingPopoverHeader_unstable } from './renderTeachingPopoverHeader';\nimport { useTeachingPopoverHeaderStyles_unstable } from './useTeachingPopoverHeaderStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverHeaderProps } from './TeachingPopoverHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverHeader, using the `useTeachingPopoverHeader_unstable` and `useTeachingPopoverHeaderStyles_unstable`\n * hooks.\n *\n * TeachingPopoverHeader is an info subtitle located at the top of the popover, it provides a dismiss button by default (can be nulled)\n * and an info-tip icon that can be overridden or removed, subtitle displayed will be the children elements of TeachingPopoverHeader.\n */\nexport const TeachingPopoverHeader: ForwardRefComponent<TeachingPopoverHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverHeader_unstable(props, ref);\n\n  useTeachingPopoverHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverHeaderStyles_unstable')(state);\n\n  return renderTeachingPopoverHeader_unstable(state);\n});\n\nTeachingPopoverHeader.displayName = 'TeachingPopoverHeader';\n"],"names":["React","useTeachingPopoverHeader_unstable","renderTeachingPopoverHeader_unstable","useTeachingPopoverHeaderStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAClG,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;;;;;CAMC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOP,qCAAqCO;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

package/lib/components/TeachingPopoverHeader/TeachingPopoverHeader.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/TeachingPopoverHeader/TeachingPopoverHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TeachingPopoverHeader.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\n\nexport type TeachingPopoverHeaderSlots = {\n  /**\n   * The element wrapping the text and close button. By default this is an h3, but can be a div.\n   * Be sure to include role and aria heading level if div is used.\n   */\n  root: Slot<'h3', 'h1' | 'h2' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * The component to be used as close button in heading\n   */\n  dismissButton?: Slot<'button'>;\n  /**\n   * Initial icon slot rendered before children content in heading.\n   */\n  icon?: Slot<'div'>;\n};\n\nexport type TeachingPopoverHeaderState = ComponentState<TeachingPopoverHeaderSlots> &\n  Pick<PopoverContextValue, 'appearance'>;\n\nexport type TeachingPopoverHeaderProps = ComponentProps<TeachingPopoverHeaderSlots>;\n"],"names":[],"mappings":"AAAA,WAsBoF"}

package/lib/components/TeachingPopoverHeader/index.js

@@ -0,0 +1,5 @@
+export * from './TeachingPopoverHeader';
+export * from './TeachingPopoverHeader.types';
+export * from './renderTeachingPopoverHeader';
+export * from './useTeachingPopoverHeader';
+export * from './useTeachingPopoverHeaderStyles.styles';

package/lib/components/TeachingPopoverHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TeachingPopoverHeader';\nexport * from './TeachingPopoverHeader.types';\nexport * from './renderTeachingPopoverHeader';\nexport * from './useTeachingPopoverHeader';\nexport * from './useTeachingPopoverHeaderStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC;AAC9C,cAAc,6BAA6B;AAC3C,cAAc,0CAA0C"}

package/lib/components/TeachingPopoverHeader/renderTeachingPopoverHeader.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverHeader
+ */ export const renderTeachingPopoverHeader_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.root.children,
+            state.dismissButton && /*#__PURE__*/ _jsx(state.dismissButton, {})
+        ]
+    });
+};

package/lib/components/TeachingPopoverHeader/renderTeachingPopoverHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTeachingPopoverHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverHeaderState } from './TeachingPopoverHeader.types';\nimport { TeachingPopoverHeaderSlots } from './TeachingPopoverHeader.types';\nimport { assertSlots } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverHeader\n */\nexport const renderTeachingPopoverHeader_unstable = (state: TeachingPopoverHeaderState) => {\n  assertSlots<TeachingPopoverHeaderSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.root.children}\n      {state.dismissButton && <state.dismissButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverHeader_unstable","state","root","icon","children","dismissButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnDF,YAAwCE;IAExC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,aAAa,kBAAI,KAACJ,MAAMI,aAAa;;;AAGlD,EAAE"}

package/lib/components/TeachingPopoverHeader/useTeachingPopoverHeader.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';
+import { usePopoverContext_unstable } from '@fluentui/react-popover';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverHeader properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverHeader
+ */ export const useTeachingPopoverHeader_unstable = (props, ref)=>{
+    const { dismissButton, icon } = props;
+    const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
+    const triggerRef = usePopoverContext_unstable((context)=>context.triggerRef);
+    const appearance = usePopoverContext_unstable((context)=>context.appearance);
+    const onDismissButtonClick = useEventCallback((ev)=>{
+        if (!ev.defaultPrevented) {
+            setOpen(ev, false);
+        }
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    });
+    return {
+        appearance,
+        components: {
+            root: 'h3',
+            dismissButton: 'button',
+            icon: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('h3', {
+            ref,
+            ...props
+        }), {
+            elementType: 'h3'
+        }),
+        icon: slot.optional(icon, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(Lightbulb16Regular, null),
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        }),
+        dismissButton: slot.optional(dismissButton, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(Dismiss12Regular, null),
+                role: 'button',
+                'aria-label': 'dismiss',
+                onClick: onDismissButtonClick
+            },
+            elementType: 'button'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTeachingPopoverHeader.tsx"],"sourcesContent":["import * 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: 'h3',\n      dismissButton: 'button',\n      icon: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h3', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h3' },\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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAC7E,SAASC,0BAA0B,QAAQ,0BAA0B;AAErE;;;;CAIC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGH;IAEhC,MAAMI,UAAUN,2BAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,aAAaR,2BAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,aAAaT,2BAA2BO,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,uBAAuBd,iBAAiB,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,KAAKoB,MAAM,CACftB,yBAAyB,MAAM;YAC7BQ;YACA,GAAGD,KAAK;QACV,IACA;YAAEgB,aAAa;QAAK;QAEtBb,MAAMR,KAAKsB,QAAQ,CAACd,MAAM;YACxBe,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAACvB;gBACX,eAAe;YACjB;YACAmB,aAAa;QACf;QACAd,eAAeP,KAAKsB,QAAQ,CAACf,eAAe;YAC1CgB,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAACxB;gBACXyB,MAAM;gBACN,cAAc;gBACdC,SAASd;YACX;YACAQ,aAAa;QACf;IACF;AACF,EAAE"}