feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TeachingPopoverHeader", {
+    enumerable: true,
+    get: function() {
+        return TeachingPopoverHeader;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTeachingPopoverHeader = require("./useTeachingPopoverHeader");
+const _renderTeachingPopoverHeader = require("./renderTeachingPopoverHeader");
+const _useTeachingPopoverHeaderStylesstyles = require("./useTeachingPopoverHeaderStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TeachingPopoverHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTeachingPopoverHeader.useTeachingPopoverHeader_unstable)(props, ref);
+    (0, _useTeachingPopoverHeaderStylesstyles.useTeachingPopoverHeaderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverHeaderStyles_unstable')(state);
+    return (0, _renderTeachingPopoverHeader.renderTeachingPopoverHeader_unstable)(state);
+});
+TeachingPopoverHeader.displayName = 'TeachingPopoverHeader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/TeachingPopoverHeader.tsx"],"sourcesContent":["'use client';\n\nimport * 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;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;6CAC1B,gCAAgC;sDAC7B,0CAA0C;qCACtD,kCAAkC;AAWvE,MAAMK,wBAAAA,WAAAA,GAAyEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,YAAQR,2DAAAA,EAAkCM,OAAOC;QAEvDL,6EAAAA,EAAwCM;QAExCL,gDAAAA,EAA4B,2CAA2CK;IAEvE,WAAOP,iEAAAA,EAAqCO;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/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 div; although it can be a heading, this should not be done.\n   * Instead, wrap the child text in a heading tag if one is needed.\n   * Be sure to include role and aria heading level if div is used.\n   */\n  root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\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":""}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TeachingPopoverHeader: function() {
+        return _TeachingPopoverHeader.TeachingPopoverHeader;
+    },
+    renderTeachingPopoverHeader_unstable: function() {
+        return _renderTeachingPopoverHeader.renderTeachingPopoverHeader_unstable;
+    },
+    teachingPopoverHeaderClassNames: function() {
+        return _useTeachingPopoverHeaderStylesstyles.teachingPopoverHeaderClassNames;
+    },
+    useTeachingPopoverHeaderStyles_unstable: function() {
+        return _useTeachingPopoverHeaderStylesstyles.useTeachingPopoverHeaderStyles_unstable;
+    },
+    useTeachingPopoverHeader_unstable: function() {
+        return _useTeachingPopoverHeader.useTeachingPopoverHeader_unstable;
+    }
+});
+const _TeachingPopoverHeader = require("./TeachingPopoverHeader");
+const _renderTeachingPopoverHeader = require("./renderTeachingPopoverHeader");
+const _useTeachingPopoverHeader = require("./useTeachingPopoverHeader");
+const _useTeachingPopoverHeaderStylesstyles = require("./useTeachingPopoverHeaderStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/index.ts"],"sourcesContent":["export { TeachingPopoverHeader } from './TeachingPopoverHeader';\nexport type {\n  TeachingPopoverHeaderProps,\n  TeachingPopoverHeaderSlots,\n  TeachingPopoverHeaderState,\n} from './TeachingPopoverHeader.types';\nexport { renderTeachingPopoverHeader_unstable } from './renderTeachingPopoverHeader';\nexport { useTeachingPopoverHeader_unstable } from './useTeachingPopoverHeader';\nexport {\n  teachingPopoverHeaderClassNames,\n  useTeachingPopoverHeaderStyles_unstable,\n} from './useTeachingPopoverHeaderStyles.styles';\n"],"names":["TeachingPopoverHeader","renderTeachingPopoverHeader_unstable","useTeachingPopoverHeader_unstable","teachingPopoverHeaderClassNames","useTeachingPopoverHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4CAAqB;;;eAMrBC,iEAAoC;;;eAG3CE,qEAA+B;;;eAC/BC,6EAAuC;;;eAHhCF,2DAAiC;;;uCAPJ,0BAA0B;6CAMX,gCAAgC;0CACnC,6BAA6B;sDAIxE,0CAA0C"}

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/renderTeachingPopoverHeader.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTeachingPopoverHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTeachingPopoverHeader_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderTeachingPopoverHeader_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+            state.root.children,
+            state.dismissButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dismissButton, {})
+        ]
+    });
+};

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/renderTeachingPopoverHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverHeader/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';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverHeader\n */\nexport const renderTeachingPopoverHeader_unstable = (state: TeachingPopoverHeaderState): JSXElement => {\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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAGrB,4BAA4B;AAMjD,6CAA6C,CAACC;QACnDF,2BAAAA,EAAwCE;IAExC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzBF,MAAMC,IAAI,CAACE,QAAQ;YACnBH,MAAMI,aAAa,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,aAAa,EAAA,CAAA;;;AAGlD,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js

@@ -0,0 +1,62 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTeachingPopoverHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTeachingPopoverHeader_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+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 { 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);
+        }
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    });
+    return {
+        appearance,
+        components: {
+            root: 'div',
+            dismissButton: 'button',
+            icon: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: _reactutilities.slot.optional(icon, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.Lightbulb16Regular, null),
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        }),
+        dismissButton: _reactutilities.slot.optional(dismissButton, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss12Regular, null),
+                role: 'button',
+                'aria-label': 'dismiss',
+                onClick: onDismissButtonClick
+            },
+            elementType: 'button'
+        })
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeader.js.map

@@ -0,0 +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"}

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.js

@@ -0,0 +1,209 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    teachingPopoverHeaderClassNames: function() {
+        return teachingPopoverHeaderClassNames;
+    },
+    useTeachingPopoverHeaderStyles_unstable: function() {
+        return useTeachingPopoverHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const teachingPopoverHeaderClassNames = {
+    root: 'fui-TeachingPopoverHeader',
+    dismissButton: 'fui-TeachingPopoverHeader__dismissButton',
+    icon: 'fui-TeachingPopoverHeader__icon'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        sj55zd: "f11d4kpn",
+        Bhrd7zp: "fl43uef",
+        Be2twd7: "fy9rknc",
+        Bg96gwp: "fwrc4pm",
+        Byoj8tv: "f14wxoun",
+        Bt984gj: "f122n59",
+        B6of3ja: "f1jkagg5",
+        jrapky: "fi2ljxd"
+    },
+    rootBrand: {
+        sj55zd: "f1phragk"
+    },
+    dismissButton: {
+        sj55zd: "fkfq4zb",
+        qhf8xq: "f10pi13n",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: [
+            "f1n71otn",
+            "f1deefiw"
+        ],
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f88035w",
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        Bceei9c: "f1k6fduh",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        De3pzq: "f1c21dwh",
+        B7ck84d: "f1ewtqcl",
+        B7oj6ja: [
+            "f3fg2lr",
+            "f13av6d4"
+        ],
+        Bbmb7ep: [
+            "fzi6hpg",
+            "fyowgf4"
+        ],
+        Jyy4pa: "f1lfeew",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f16d74zd",
+        Bfpq7zp: 0,
+        g9k6zt: 0,
+        Bn4voq9: 0,
+        giviqs: "f89hs3r",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w",
+        B8q5s1w: "f8hki3x",
+        Bci5o5g: [
+            "f1d2448m",
+            "ffh67wi"
+        ],
+        n8qw10: "f1bjia2o",
+        Bdrgwmp: [
+            "ffh67wi",
+            "f1d2448m"
+        ]
+    },
+    dismissBrand: {
+        sj55zd: "f1phragk"
+    },
+    icon: {
+        Bqenvij: "fsv12xs",
+        a9b677: "f19bqwv",
+        Bg96gwp: "fwrc4pm",
+        Be2twd7: "fy9rknc",
+        Bt984gj: "f122n59",
+        B7ck84d: "f1e4lqlz",
+        mc9l5x: "ftuwxu6",
+        Brf1p80: "f4d9j23",
+        w71qe1: "f1iuv45f",
+        ha4doy: "fmrv4ls",
+        qhf8xq: "f10pi13n",
+        De3pzq: "f1c21dwh",
+        sj55zd: "fkfq4zb",
+        Bokbzmb: "fpvr8q1"
+    },
+    iconBrand: {
+        sj55zd: "f1phragk"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1063pyq{flex-direction:row;}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
+        ".f122n59{align-items:center;}",
+        ".f1jkagg5{margin-top:var(--spacingHorizontalNone);}",
+        ".fi2ljxd{margin-bottom:var(--spacingHorizontalNone);}",
+        ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f10pi13n{position:relative;}",
+        [
+            ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".f1k6fduh{cursor:pointer;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}",
+        ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}",
+        ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}",
+        ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}",
+        ".f1n71otn{border-right-style:none;}",
+        ".f1deefiw{border-left-style:none;}",
+        ".f1lfeew{-webkit-margin-start:auto;margin-inline-start:auto;}",
+        [
+            ".f16d74zd{padding:var(--spacingVerticalXS) var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".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;}",
+        ".fsv12xs{height:var(--fontSizeBase200);}",
+        ".f19bqwv{width:var(--fontSizeBase200);}",
+        ".f1e4lqlz{box-sizing:content-box;}",
+        ".ftuwxu6{display:inline-flex;}",
+        ".f4d9j23{justify-content:center;}",
+        ".f1iuv45f{text-decoration-line:none;}",
+        ".fmrv4ls{vertical-align:middle;}",
+        ".fpvr8q1{-webkit-margin-end:var(--spacingHorizontalXS);margin-inline-end:var(--spacingHorizontalXS);}"
+    ]
+});
+const useTeachingPopoverHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+    if (state.dismissButton) {
+        state.dismissButton.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+    }
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(teachingPopoverHeaderClassNames.icon, styles.icon, appearance === 'brand' ? styles.iconBrand : undefined, state.icon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib-commonjs/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.raw.js

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