feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PopoverSurface", {
+    enumerable: true,
+    get: function() {
+        return PopoverSurface;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePopoverSurface = require("./usePopoverSurface");
+const _renderPopoverSurface = require("./renderPopoverSurface");
+const _usePopoverSurfaceStylesstyles = require("./usePopoverSurfaceStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const PopoverSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePopoverSurface.usePopoverSurface_unstable)(props, ref);
+    (0, _usePopoverSurfaceStylesstyles.usePopoverSurfaceStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePopoverSurfaceStyles_unstable')(state);
+    return (0, _renderPopoverSurface.renderPopoverSurface_unstable)(state);
+});
+PopoverSurface.displayName = 'PopoverSurface';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePopoverSurface_unstable } from './usePopoverSurface';\nimport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles_unstable } from './usePopoverSurfaceStyles.styles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  usePopoverSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePopoverSurfaceStyles_unstable')(state);\n\n  return renderPopoverSurface_unstable(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"],"names":["React","usePopoverSurface_unstable","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","useCustomStyleHook_unstable","PopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverSurface/PopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n  root: Slot<'div'>;\n};\n\nexport type PopoverSurfaceBaseProps = PopoverSurfaceProps;\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n  Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {\n    /**\n     * CSS class for the arrow element\n     */\n    arrowClassName?: string;\n  };\n\nexport type PopoverSurfaceBaseState = Omit<PopoverSurfaceState, 'appearance' | 'size'>;\n"],"names":[],"mappings":""}

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

@@ -0,0 +1,37 @@
+"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, {
+    PopoverSurface: function() {
+        return _PopoverSurface.PopoverSurface;
+    },
+    arrowHeights: function() {
+        return _usePopoverSurfaceStylesstyles.arrowHeights;
+    },
+    popoverSurfaceClassNames: function() {
+        return _usePopoverSurfaceStylesstyles.popoverSurfaceClassNames;
+    },
+    renderPopoverSurface_unstable: function() {
+        return _renderPopoverSurface.renderPopoverSurface_unstable;
+    },
+    usePopoverSurfaceBase_unstable: function() {
+        return _usePopoverSurface.usePopoverSurfaceBase_unstable;
+    },
+    usePopoverSurfaceStyles_unstable: function() {
+        return _usePopoverSurfaceStylesstyles.usePopoverSurfaceStyles_unstable;
+    },
+    usePopoverSurface_unstable: function() {
+        return _usePopoverSurface.usePopoverSurface_unstable;
+    }
+});
+const _PopoverSurface = require("./PopoverSurface");
+const _renderPopoverSurface = require("./renderPopoverSurface");
+const _usePopoverSurface = require("./usePopoverSurface");
+const _usePopoverSurfaceStylesstyles = require("./usePopoverSurfaceStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverSurface/index.ts"],"sourcesContent":["export { PopoverSurface } from './PopoverSurface';\nexport type {\n  PopoverSurfaceBaseProps,\n  PopoverSurfaceProps,\n  PopoverSurfaceSlots,\n  PopoverSurfaceBaseState,\n  PopoverSurfaceState,\n} from './PopoverSurface.types';\nexport { renderPopoverSurface_unstable } from './renderPopoverSurface';\nexport { usePopoverSurface_unstable, usePopoverSurfaceBase_unstable } from './usePopoverSurface';\nexport {\n  arrowHeights,\n  popoverSurfaceClassNames,\n  usePopoverSurfaceStyles_unstable,\n} from './usePopoverSurfaceStyles.styles';\n"],"names":["PopoverSurface","renderPopoverSurface_unstable","usePopoverSurface_unstable","usePopoverSurfaceBase_unstable","arrowHeights","popoverSurfaceClassNames","usePopoverSurfaceStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAWrBI,2CAAY;;;eACZC,uDAAwB;;;eAJjBJ,mDAA6B;;;eACDE,iDAA8B;;;eAIjEG,+DAAgC;;;eAJzBJ,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCACI,sBAAsB;+CAK1F,mCAAmC"}

node_modules/@fluentui/react-popover/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderPopoverSurface_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderPopoverSurface_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactportal = require("@fluentui/react-portal");
+const renderPopoverSurface_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    const surface = /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.withArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                ref: state.arrowRef,
+                className: state.arrowClassName
+            }),
+            state.root.children
+        ]
+    });
+    if (state.inline) {
+        return surface;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+        mountNode: state.mountNode,
+        children: surface
+    });
+};

node_modules/@fluentui/react-popover/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PopoverSurface/renderPopoverSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState): JSXElement => {\n  assertSlots<PopoverSurfaceSlots>(state);\n\n  const surface = (\n    <state.root>\n      {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n      {state.root.children}\n    </state.root>\n  );\n\n  if (state.inline) {\n    return surface;\n  }\n\n  return <Portal mountNode={state.mountNode}>{surface}</Portal>;\n};\n"],"names":["assertSlots","Portal","renderPopoverSurface_unstable","state","surface","root","withArrow","div","ref","arrowRef","className","arrowClassName","children","inline","mountNode"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAEjC,yBAAyB;AAMzC,sCAAsC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,MAAMC,UAAAA,WAAAA,OACJ,gBAAA,EAACD,MAAME,IAAI,EAAA;;YACRF,MAAMG,SAAS,IAAA,WAAA,OAAI,eAAA,EAACC,OAAAA;gBAAIC,KAAKL,MAAMM,QAAQ;gBAAEC,WAAWP,MAAMQ,cAAc;;YAC5ER,MAAME,IAAI,CAACO,QAAQ;;;IAIxB,IAAIT,MAAMU,MAAM,EAAE;QAChB,OAAOT;IACT;IAEA,OAAA,WAAA,OAAO,eAAA,EAACH,mBAAAA,EAAAA;QAAOa,WAAWX,MAAMW,SAAS;kBAAGV;;AAC9C,EAAE"}

node_modules/@fluentui/react-popover/lib-commonjs/components/PopoverSurface/usePopoverSurface.js

@@ -0,0 +1,94 @@
+'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, {
+    usePopoverSurfaceBase_unstable: function() {
+        return usePopoverSurfaceBase_unstable;
+    },
+    usePopoverSurface_unstable: function() {
+        return usePopoverSurface_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 _reacttabster = require("@fluentui/react-tabster");
+const _popoverContext = require("../../popoverContext");
+const _reactmotion = require("@fluentui/react-motion");
+const usePopoverSurface_unstable = (props, ref)=>{
+    const size = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.size);
+    const appearance = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.appearance);
+    const motionForwardedRef = (0, _reactmotion.useMotionForwardedRef)();
+    const state = usePopoverSurfaceBase_unstable(props, (0, _reactutilities.useMergedRefs)(ref, motionForwardedRef));
+    return {
+        appearance,
+        size,
+        ...state
+    };
+};
+const usePopoverSurfaceBase_unstable = (props, ref)=>{
+    const contentRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.contentRef);
+    const openOnHover = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.openOnHover);
+    const setOpen = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.setOpen);
+    const mountNode = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.mountNode);
+    const arrowRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.arrowRef);
+    const withArrow = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.withArrow);
+    const trapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.trapFocus);
+    const inertTrapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inertTrapFocus);
+    const inline = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inline);
+    const { modalAttributes } = (0, _reacttabster.useModalAttributes)({
+        trapFocus,
+        legacyTrapFocus: !inertTrapFocus,
+        alwaysFocusable: !trapFocus
+    });
+    const state = {
+        inline,
+        withArrow,
+        arrowRef,
+        mountNode,
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always({
+            ref: (0, _reactutilities.useMergedRefs)(ref, contentRef),
+            role: trapFocus ? 'dialog' : 'group',
+            'aria-modal': trapFocus ? true : undefined,
+            ...modalAttributes,
+            ...props
+        }, {
+            elementType: 'div'
+        })
+    };
+    const { onMouseEnter: onMouseEnterOriginal, onMouseLeave: onMouseLeaveOriginal, onKeyDown: onKeyDownOriginal } = state.root;
+    state.root.onMouseEnter = (e)=>{
+        if (openOnHover) {
+            setOpen(e, true);
+        }
+        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
+    };
+    state.root.onMouseLeave = (e)=>{
+        if (openOnHover) {
+            setOpen(e, false);
+        }
+        onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
+    };
+    state.root.onKeyDown = (e)=>{
+        var _contentRef_current;
+        // only close if the event happened inside the current popover
+        // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
+        if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
+            e.preventDefault();
+            setOpen(e, false);
+        }
+        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
+    };
+    return state;
+};

node_modules/@fluentui/react-popover/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.js

@@ -0,0 +1,246 @@
+'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, {
+    arrowHeights: function() {
+        return arrowHeights;
+    },
+    popoverSurfaceClassNames: function() {
+        return popoverSurfaceClassNames;
+    },
+    usePopoverSurfaceStyles_unstable: function() {
+        return usePopoverSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const popoverSurfaceClassNames = {
+    root: 'fui-PopoverSurface'
+};
+const arrowHeights = {
+    small: 6,
+    medium: 8,
+    large: 8
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        sj55zd: "f19n0e5",
+        De3pzq: "fxugw4r",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f9ggezi",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Bhu2qc9: "fymb6k8"
+    },
+    inline: {
+        Bj3rh1h: "f19g0ac"
+    },
+    inverted: {
+        De3pzq: "fg3r6xk",
+        sj55zd: "fonrgv7"
+    },
+    brand: {
+        De3pzq: "ffp7eso",
+        sj55zd: "f1phragk"
+    },
+    smallPadding: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1sy4kr4"
+    },
+    mediumPadding: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f4zyqsv"
+    },
+    largePadding: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fop8ug2"
+    },
+    smallArrow: {
+        rhnwrx: "f1s3jn22",
+        Bdy53xb: "fv40uqz"
+    },
+    mediumLargeArrow: {
+        rhnwrx: "f1f72gjr",
+        Bdy53xb: "f69yoe5"
+    },
+    arrow: {
+        B7ck84d: "f1ewtqcl",
+        qhf8xq: "f1euv43f",
+        Bj3rh1h: "f1bsuimh",
+        De3pzq: "f1u2r49w",
+        B2eet1l: "fqhgnl",
+        Beyfa6y: "f17bz04i",
+        Bz10aip: "f36o3x3",
+        Bqenvij: "fzofk8q",
+        a9b677: "f1wbx1ie",
+        Ftih45: "f1wl9k8s",
+        Br0sdwz: "f1aocrix",
+        cmx5o7: "f1ljr5q2",
+        susq4k: 0,
+        Biibvgv: 0,
+        Bicfajf: 0,
+        qehafq: 0,
+        Brs5u8j: "f155f1qt",
+        Ccq8qp: "f9mhzq7",
+        Baz25je: "fr6rhvx",
+        Bcgcnre: 0,
+        Bqjgrrk: 0,
+        qa3bma: 0,
+        y0oebl: 0,
+        Biqmznv: 0,
+        Bm6vgfq: 0,
+        Bbv0w2i: 0,
+        uvfttm: 0,
+        eqrjj: 0,
+        Bk5zm6e: 0,
+        m598lv: 0,
+        B4f6apu: 0,
+        ydt019: 0,
+        Bq4z7u6: 0,
+        Bdkvgpv: 0,
+        B0qfbqy: 0,
+        kj8mxx: "f1kc0wz4",
+        r59vdv: "fgq90dz",
+        Bkw5xw4: "fq0y47f",
+        hl6cv3: "f1pwrbz6",
+        aea9ga: "f1hxxcvm",
+        yayu3t: "fw8rgyo",
+        Bhsv975: "f1wnzycx",
+        rhl9o9: "f1730wal",
+        B7gxrvb: "f1fy4ixr",
+        B6q6orb: "fobkauc",
+        B0lu1f8: "f16bqv1l"
+    }
+}, {
+    d: [
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fymb6k8{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));}",
+        ".f19g0ac{z-index:1;}",
+        ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}",
+        ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
+        ".ffp7eso{background-color:var(--colorBrandBackground);}",
+        ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
+        [
+            ".f1sy4kr4{padding:12px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f4zyqsv{padding:16px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fop8ug2{padding:20px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}",
+        ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}",
+        ".f1f72gjr{--fui-positioning-arrow-height:11.312px;}",
+        ".f69yoe5{--fui-positioning-arrow-offset:-5.656px;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f1euv43f{position:absolute;}",
+        ".f1bsuimh{z-index:-1;}",
+        ".f1u2r49w{background-color:inherit;}",
+        ".fqhgnl{background-clip:content-box;}",
+        ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}",
+        ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}",
+        ".fzofk8q{height:var(--fui-positioning-arrow-height);}",
+        ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".f1aocrix::before{display:block;}",
+        ".f1ljr5q2::before{background-color:inherit;}",
+        [
+            ".f155f1qt::before{margin:-1px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f9mhzq7::before{width:100%;}",
+        ".fr6rhvx::before{height:100%;}",
+        [
+            ".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}",
+        ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}",
+        "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}",
+        "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}",
+        "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}",
+        "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}",
+        "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}",
+        "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}",
+        "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}",
+        "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"
+    ]
+});
+const usePopoverSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
+    state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
+    return state;
+};

node_modules/@fluentui/react-popover/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.styles.raw.js

@@ -0,0 +1,80 @@
+'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, {
+    arrowHeights: function() {
+        return arrowHeights;
+    },
+    popoverSurfaceClassNames: function() {
+        return popoverSurfaceClassNames;
+    },
+    usePopoverSurfaceStyles_unstable: function() {
+        return usePopoverSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactpositioning = require("@fluentui/react-positioning");
+const _reacttheme = require("@fluentui/react-theme");
+const popoverSurfaceClassNames = {
+    root: 'fui-PopoverSurface'
+};
+const arrowHeights = {
+    small: 6,
+    medium: 8,
+    large: 8
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        ..._reacttheme.typographyStyles.body1,
+        // TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
+        filter: `drop-shadow(0 0 2px ${_reacttheme.tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 8px 16px ${_reacttheme.tokens.colorNeutralShadowKey})`
+    },
+    inline: {
+        // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.
+        // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
+        zIndex: 1
+    },
+    inverted: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundStatic,
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    brand: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    smallPadding: {
+        padding: '12px'
+    },
+    mediumPadding: {
+        padding: '16px'
+    },
+    largePadding: {
+        padding: '20px'
+    },
+    smallArrow: (0, _reactpositioning.createArrowHeightStyles)(arrowHeights.small),
+    mediumLargeArrow: (0, _reactpositioning.createArrowHeightStyles)(arrowHeights.medium),
+    arrow: (0, _reactpositioning.createArrowStyles)({
+        arrowHeight: undefined
+    })
+});
+const usePopoverSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.inline && styles.inline, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
+    state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
+    return state;
+};