feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';
+import { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';
+import { useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * 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);
+    useCustomStyleHook_unstable('useTeachingPopoverFooterStyles_unstable')(state);
+    return renderTeachingPopoverFooter_unstable(state);
+});
+TeachingPopoverFooter.displayName = 'TeachingPopoverFooter';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/TeachingPopoverFooter.tsx"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('useTeachingPopoverFooterStyles_unstable')(state);\n\n  return renderTeachingPopoverFooter_unstable(state);\n});\n\nTeachingPopoverFooter.displayName = 'TeachingPopoverFooter';\n"],"names":["React","useTeachingPopoverFooter_unstable","renderTeachingPopoverFooter_unstable","useTeachingPopoverFooterStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;;CAQC,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"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.types.js

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

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/TeachingPopoverFooter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/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":"AA8BA,WACmD"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/index.js

@@ -0,0 +1,4 @@
+export { TeachingPopoverFooter } from './TeachingPopoverFooter';
+export { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';
+export { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';
+export { teachingPopoverFooterClassNames, useTeachingPopoverFooterStyles_unstable } from './useTeachingPopoverFooterStyles.styles';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/index.ts"],"sourcesContent":["export { TeachingPopoverFooter } from './TeachingPopoverFooter';\nexport type {\n  TeachingPopoverFooterProps,\n  TeachingPopoverFooterSlots,\n  TeachingPopoverFooterState,\n} from './TeachingPopoverFooter.types';\nexport { renderTeachingPopoverFooter_unstable } from './renderTeachingPopoverFooter';\nexport { useTeachingPopoverFooter_unstable } from './useTeachingPopoverFooter';\nexport {\n  teachingPopoverFooterClassNames,\n  useTeachingPopoverFooterStyles_unstable,\n} from './useTeachingPopoverFooterStyles.styles';\n"],"names":["TeachingPopoverFooter","renderTeachingPopoverFooter_unstable","useTeachingPopoverFooter_unstable","teachingPopoverFooterClassNames","useTeachingPopoverFooterStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAMhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}

node_modules/@fluentui/react-teaching-popover/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, {})
+        ]
+    });
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/renderTeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/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';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverFooter\n */\nexport const renderTeachingPopoverFooter_unstable = (state: TeachingPopoverFooterState): JSXElement => {\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;AAGxD;;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"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/useTeachingPopoverFooter.js

@@ -0,0 +1,58 @@
+'use client';
+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
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/useTeachingPopoverFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverFooter/useTeachingPopoverFooter.ts"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.js

@@ -0,0 +1,80 @@
+'use client';
+
+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: 0,
+    Belr9w4: 0,
+    rmohyg: "f19gb1f4",
+    z8tnut: "f1kcqot9"
+  },
+  rootVertical: {
+    Beiy3e4: "f1vx9l62"
+  },
+  rootHorizontal: {
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f9c4gz4"
+  },
+  buttonRootVertical: {
+    a9b677: "f14z66ap",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ff3glw6"
+  },
+  buttonRootHorizontal: {
+    Bf4jedk: "f14es27b",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ff3glw6"
+  },
+  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;}", [".f19gb1f4{gap:8px;}", {
+    p: -1
+  }], ".f1kcqot9{padding-top:12px;}", ".f1vx9l62{flex-direction:column;}", ".f1063pyq{flex-direction:row;}", ".f9c4gz4{justify-content:flex-end;}", ".f14z66ap{width:auto;}", [".ff3glw6{border-radius:4px;}", {
+    p: -1
+  }], ".f14es27b{min-width:96px;}", [".ff3glw6{border-radius:4px;}", {
+    p: -1
+  }], ".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 => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    appearance,
+    footerLayout
+  } = state;
+  state.root.className = mergeClasses(teachingPopoverFooterClassNames.root, styles.root, footerLayout === 'horizontal' ? styles.rootHorizontal : styles.rootVertical, state.root.className);
+  if (state.secondary) {
+    state.secondary.className = mergeClasses(teachingPopoverFooterClassNames.secondary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandSecondary : undefined, state.secondary.className);
+  }
+  state.primary.className = mergeClasses(teachingPopoverFooterClassNames.primary, footerLayout === 'horizontal' ? styles.buttonRootHorizontal : styles.buttonRootVertical, appearance === 'brand' ? styles.brandPrimary : undefined, state.primary.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/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","rmohyg","z8tnut","rootVertical","Beiy3e4","rootHorizontal","Brf1p80","buttonRootVertical","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","buttonRootHorizontal","Bf4jedk","brandSecondary","g2u3we","h3c5rm","B9xav0g","zhjwy3","brandPrimary","sj55zd","De3pzq","Bi91k9c","Jwef8y","B2d53fq","iro3zm","d","p","h","useTeachingPopoverFooterStyles_unstable","state","styles","appearance","footerLayout","className","undefined"],"sources":["useTeachingPopoverFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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        gap: '8px',\n        paddingTop: '12px'\n    },\n    rootVertical: {\n        flexDirection: 'column'\n    },\n    rootHorizontal: {\n        flexDirection: 'row',\n        justifyContent: 'flex-end'\n    },\n    buttonRootVertical: {\n        width: 'auto',\n        borderRadius: '4px'\n    },\n    buttonRootHorizontal: {\n        minWidth: '96px',\n        borderRadius: '4px'\n    },\n    brandSecondary: {\n        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand)\n    },\n    brandPrimary: {\n        color: tokens.colorBrandForeground1,\n        backgroundColor: tokens.colorNeutralForegroundOnBrand,\n        ':hover': {\n            color: tokens.colorCompoundBrandForeground1Hover,\n            backgroundColor: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active': {\n            color: tokens.colorCompoundBrandForeground1Pressed,\n            backgroundColor: tokens.colorNeutralForegroundOnBrand\n        }\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverFooterStyles_unstable = (state)=>{\n    'use no memo';\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,YAAY;;AACZ,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;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;IAAAC,MAAA;EAAA;EAAAC,oBAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;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;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAoCjB,CAAC;AACF;AAAyC,OAAO,MAAMC,uCAAuC,GAAIC,KAAK,IAAG;EACrG,aAAa;;EACb,MAAMC,MAAM,GAAGpC,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEqC,UAAU;IAAEC;EAAa,CAAC,GAAGH,KAAK;EAC1CA,KAAK,CAACtC,IAAI,CAAC0C,SAAS,GAAG9C,YAAY,CAACG,+BAA+B,CAACC,IAAI,EAAEuC,MAAM,CAACvC,IAAI,EAAEyC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAAC5B,cAAc,GAAG4B,MAAM,CAAC9B,YAAY,EAAE6B,KAAK,CAACtC,IAAI,CAAC0C,SAAS,CAAC;EACzL,IAAIJ,KAAK,CAACpC,SAAS,EAAE;IACjBoC,KAAK,CAACpC,SAAS,CAACwC,SAAS,GAAG9C,YAAY,CAACG,+BAA+B,CAACG,SAAS,EAAEuC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAACnB,oBAAoB,GAAGmB,MAAM,CAAC1B,kBAAkB,EAAE2B,UAAU,KAAK,OAAO,GAAGD,MAAM,CAACjB,cAAc,GAAGqB,SAAS,EAAEL,KAAK,CAACpC,SAAS,CAACwC,SAAS,CAAC;EACvQ;EACAJ,KAAK,CAACrC,OAAO,CAACyC,SAAS,GAAG9C,YAAY,CAACG,+BAA+B,CAACE,OAAO,EAAEwC,YAAY,KAAK,YAAY,GAAGF,MAAM,CAACnB,oBAAoB,GAAGmB,MAAM,CAAC1B,kBAAkB,EAAE2B,UAAU,KAAK,OAAO,GAAGD,MAAM,CAACZ,YAAY,GAAGgB,SAAS,EAAEL,KAAK,CAACrC,OAAO,CAACyC,SAAS,CAAC;EAC3P,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.raw.js

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

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverFooter/useTeachingPopoverFooterStyles.styles.raw.js.map

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