feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/DialogSurface.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DialogSurface", {
+    enumerable: true,
+    get: function() {
+        return DialogSurface;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useDialogSurface = require("./useDialogSurface");
+const _renderDialogSurface = require("./renderDialogSurface");
+const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
+const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const DialogSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useDialogSurface.useDialogSurface_unstable)(props, ref);
+    const contextValues = (0, _useDialogSurfaceContextValues.useDialogSurfaceContextValues_unstable)(state);
+    (0, _useDialogSurfaceStylesstyles.useDialogSurfaceStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogSurfaceStyles_unstable')(state);
+    return (0, _renderDialogSurface.renderDialogSurface_unstable)(state, contextValues);
+});
+DialogSurface.displayName = 'DialogSurface';

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/DialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = useDialogSurface_unstable(props, ref);\n  const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n  useDialogSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n  return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;+CAG3B,kCAAkC;qCAC7C,kCAAkC;AAMvE,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,qEAAAA,EAAuCM;QAE7DP,6DAAAA,EAAgCO;QAEhCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/DialogSurface.types.js

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

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/DialogSurface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Controls the backdrop appearance.\n     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n     */\n    appearance?: 'dimmed' | 'transparent';\n  }\n>;\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   * Accepts an `appearance` prop to control backdrop visibility:\n   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n   * - `'transparent'`: Always shows a transparent backdrop.\n   *\n   * @example\n   * ```tsx\n   * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n   * ```\n   */\n  backdrop?: Slot<DialogBackdropSlotProps>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n    /**\n     * Whether the backdrop should be treated as nested (transparent).\n     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n     * preventing the false-positive transparent backdrop.\n     */\n    treatBackdropAsNested: boolean;\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n    backdropAppearance?: DialogBackdropSlotProps['appearance'];\n  };\n"],"names":[],"mappings":"AA2DA;;CAEC,GACD,WAoBI"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/index.js

@@ -0,0 +1,35 @@
+"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, {
+    DialogSurface: function() {
+        return _DialogSurface.DialogSurface;
+    },
+    dialogSurfaceClassNames: function() {
+        return _useDialogSurfaceStylesstyles.dialogSurfaceClassNames;
+    },
+    renderDialogSurface_unstable: function() {
+        return _renderDialogSurface.renderDialogSurface_unstable;
+    },
+    useDialogSurfaceContextValues_unstable: function() {
+        return _useDialogSurfaceContextValues.useDialogSurfaceContextValues_unstable;
+    },
+    useDialogSurfaceStyles_unstable: function() {
+        return _useDialogSurfaceStylesstyles.useDialogSurfaceStyles_unstable;
+    },
+    useDialogSurface_unstable: function() {
+        return _useDialogSurface.useDialogSurface_unstable;
+    }
+});
+const _DialogSurface = require("./DialogSurface");
+const _renderDialogSurface = require("./renderDialogSurface");
+const _useDialogSurface = require("./useDialogSurface");
+const _useDialogSurfaceStylesstyles = require("./useDialogSurfaceStyles.styles");
+const _useDialogSurfaceContextValues = require("./useDialogSurfaceContextValues");

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BAVJ,kBAAkB;qCASH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC;+CACpD,kCAAkC"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/renderDialogSurface.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderDialogSurface_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderDialogSurface_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactmotion = require("@fluentui/react-motion");
+const _reactportal = require("@fluentui/react-portal");
+const _reactutilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const renderDialogSurface_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactportal.Portal, {
+        mountNode: state.mountNode,
+        children: [
+            state.backdrop && // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable
+            // FIXME: this should be resolved by properly splitting props and state slots declaration
+            state.backdropMotion && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.backdropMotion, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.backdrop, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarderReset, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.DialogSurfaceProvider, {
+                    value: contextValues.dialogSurface,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+                })
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/renderDialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n  state: DialogSurfaceState,\n  contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      {state.backdrop &&\n        // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n        // FIXME: this should be resolved by properly splitting props and state slots declaration\n        state.backdropMotion && (\n          <state.backdropMotion>\n            <state.backdrop />\n          </state.backdropMotion>\n        )}\n      <MotionRefForwarderReset>\n        <DialogSurfaceProvider value={contextValues.dialogSurface}>\n          <state.root />\n        </DialogSurfaceProvider>\n      </MotionRefForwarderReset>\n    </Portal>\n  );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":";;;;+BAcaI;;;;;;4BAbb,iCAAiD;6BAET,yBAAyB;6BAC1C,yBAAyB;gCACpB,4BAA4B;0BAGlB,iBAAiB;AAMhD,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,gBAAA,EAACJ,mBAAAA,EAAAA;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,IAAA,WAAA,OAClB,eAAA,EAACJ,MAAMI,cAAc,EAAA;0BACnB,WAAA,GAAA,mBAAA,EAACJ,MAAMG,QAAQ,EAAA,CAAA;;8BAGrB,eAAA,EAACR,oCAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACG,+BAAAA,EAAAA;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,WAAA,OAAA,eAAA,EAACN,MAAMO,IAAI,EAAA,CAAA;;;;;AAKrB,EAAE"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/useDialogSurface.js

@@ -0,0 +1,129 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialogSurface_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDialogSurface_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _reactmotion = require("@fluentui/react-motion");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _contexts = require("../../contexts");
+const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll");
+const _DialogBackdropMotion = require("../DialogBackdropMotion");
+const useDialogSurface_unstable = (props, ref)=>{
+    const contextRef = (0, _reactmotion.useMotionForwardedRef)();
+    const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
+    const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
+    const backdropOverride = (0, _contexts.useDialogBackdropContext_unstable)();
+    const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
+    const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
+    const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
+    const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
+    const dialogTitleID = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
+    const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
+    const unmountOnClose = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.unmountOnClose);
+    const handledBackdropClick = (0, _reactutilities.useEventCallback)((event)=>{
+        if ((0, _reactutilities.isResolvedShorthand)(props.backdrop)) {
+            var _props_backdrop_onClick, _props_backdrop;
+            (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);
+        }
+        if (modalType === 'modal' && !event.isDefaultPrevented()) {
+            requestOpenChange({
+                event,
+                open: false,
+                type: 'backdropClick'
+            });
+        }
+    });
+    const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+        if (event.key === _keyboardkeys.Escape && !event.isDefaultPrevented()) {
+            requestOpenChange({
+                event,
+                open: false,
+                type: 'escapeKeyDown'
+            });
+            // stop propagation to avoid conflicting with other elements that listen for `Escape`
+            // e,g: nested Dialog, Popover, Menu and Tooltip
+            event.preventDefault();
+        }
+    });
+    const backdrop = _reactutilities.slot.optional(props.backdrop, {
+        renderByDefault: modalType !== 'non-modal',
+        defaultProps: {
+            'aria-hidden': 'true'
+        },
+        elementType: 'div'
+    });
+    const backdropAppearance = backdrop === null || backdrop === void 0 ? void 0 : backdrop.appearance;
+    if (backdrop) {
+        backdrop.onClick = handledBackdropClick;
+        // remove backdrop.appearance so it is not passed to the DOM
+        delete backdrop.appearance;
+    }
+    const { disableBodyScroll, enableBodyScroll } = (0, _useDisableBodyScroll.useDisableBodyScroll)();
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!open) {
+            enableBodyScroll();
+            return;
+        }
+        if (isNestedDialog || modalType === 'non-modal') {
+            return;
+        }
+        disableBodyScroll();
+        return ()=>enableBodyScroll();
+    }, [
+        open,
+        modalType,
+        isNestedDialog,
+        disableBodyScroll,
+        enableBodyScroll
+    ]);
+    return {
+        components: {
+            backdrop: 'div',
+            root: 'div',
+            backdropMotion: _DialogBackdropMotion.DialogBackdropMotion
+        },
+        open,
+        backdrop,
+        isNestedDialog,
+        treatBackdropAsNested,
+        backdropAppearance,
+        unmountOnClose,
+        mountNode: props.mountNode,
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            tabIndex: -1,
+            role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+            'aria-modal': modalType !== 'non-modal',
+            'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined,
+            ...props,
+            ...modalAttributes,
+            onKeyDown: handleKeyDown,
+            // FIXME:
+            // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: (0, _reactutilities.useMergedRefs)(ref, contextRef, dialogRef)
+        }), {
+            elementType: 'div'
+        }),
+        backdropMotion: (0, _reactmotion.presenceMotionSlot)(props.backdropMotion, {
+            elementType: _DialogBackdropMotion.DialogBackdropMotion,
+            defaultProps: {
+                appear: unmountOnClose,
+                visible: open
+            }
+        }),
+        // Deprecated properties
+        transitionStatus: undefined
+    };
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialogSurfaceContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDialogSurfaceContextValues_unstable;
+    }
+});
+function useDialogSurfaceContextValues_unstable(state) {
+    const dialogSurface = true;
+    return {
+        dialogSurface
+    };
+}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceContextValues.ts"],"sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n  const dialogSurface: DialogSurfaceContextValue = true;\n\n  return { dialogSurface };\n}\n"],"names":["useDialogSurfaceContextValues_unstable","state","dialogSurface"],"mappings":";;;;;;;;;;AAGO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js

@@ -0,0 +1,78 @@
+'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, {
+    dialogSurfaceClassNames: function() {
+        return dialogSurfaceClassNames;
+    },
+    useDialogSurfaceStyles_unstable: function() {
+        return useDialogSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1u3t6p6", "r5coedp", {
+    r: [
+        ".r1u3t6p6{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;max-height:100dvh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}",
+        ".r1u3t6p6:focus{outline-style:none;}",
+        ".r1u3t6p6:focus-visible{outline-style:none;}",
+        ".r1u3t6p6[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r1u3t6p6[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r5coedp{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;max-height:100dvh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow64);}",
+        ".r5coedp:focus{outline-style:none;}",
+        ".r5coedp:focus-visible{outline-style:none;}",
+        ".r5coedp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r5coedp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r1u3t6p6[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media screen and (max-width: 480px){.r1u3t6p6{max-width:100vw;}}",
+        "@media screen and (max-height: 359px){.r1u3t6p6{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}",
+        "@media (forced-colors: active){.r5coedp[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}",
+        "@media screen and (max-width: 480px){.r5coedp{max-width:100vw;}}",
+        "@media screen and (max-height: 359px){.r5coedp{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"
+    ]
+});
+const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1e18s3l", null, [
+    ".r1e18s3l{inset:0px;background-color:var(--colorBackgroundOverlay);position:fixed;}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    nestedDialogBackdrop: {
+        De3pzq: "f1c21dwh"
+    },
+    dialogHidden: {
+        Bkecrkj: "f1aehjj5"
+    }
+}, {
+    d: [
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1aehjj5{pointer-events:none;}"
+    ]
+});
+const useDialogSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
+    const rootBaseStyle = useRootBaseStyle();
+    const backdropBaseStyle = useBackdropBaseStyle();
+    const styles = useStyles();
+    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
+    const mountedAndClosed = !unmountOnClose && !open;
+    root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.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, {
+    dialogSurfaceClassNames: function() {
+        return dialogSurfaceClassNames;
+    },
+    useDialogSurfaceStyles_unstable: function() {
+        return useDialogSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const _contexts = require("../../contexts");
+const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyle = (0, _react.makeResetStyles)({
+    ...(0, _reacttabster.createFocusOutlineStyle)(),
+    inset: 0,
+    padding: _contexts.SURFACE_PADDING,
+    margin: 'auto',
+    borderStyle: 'none',
+    overflow: 'unset',
+    border: `${_contexts.SURFACE_BORDER_WIDTH} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+    borderRadius: _reacttheme.tokens.borderRadiusXLarge,
+    display: 'block',
+    userSelect: 'unset',
+    visibility: 'unset',
+    position: 'fixed',
+    height: 'fit-content',
+    maxWidth: '600px',
+    maxHeight: [
+        '100vh',
+        '100dvh'
+    ],
+    boxSizing: 'border-box',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    // Same styles as DialogSurfaceMotion last keyframe,
+    // to ensure dialog will be properly styled when surfaceMotion is opted-out
+    boxShadow: _reacttheme.tokens.shadow64,
+    [_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw'
+    },
+    [_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
+        overflowY: 'auto',
+        // We need to offset the scrollbar by adding transparent borders otherwise
+        // it conflicts with the border radius.
+        paddingRight: `calc(${_contexts.SURFACE_PADDING} - ${_contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
+        borderRightWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderTopWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderBottomWidth: _contexts.DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
+    }
+});
+const useBackdropBaseStyle = (0, _react.makeResetStyles)({
+    inset: '0px',
+    backgroundColor: _reacttheme.tokens.colorBackgroundOverlay,
+    position: 'fixed'
+});
+const useStyles = (0, _react.makeStyles)({
+    nestedDialogBackdrop: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground
+    },
+    dialogHidden: {
+        pointerEvents: 'none'
+    }
+});
+const useDialogSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
+    const rootBaseStyle = useRootBaseStyle();
+    const backdropBaseStyle = useBackdropBaseStyle();
+    const styles = useStyles();
+    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
+    const mountedAndClosed = !unmountOnClose && !open;
+    root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
+    }
+    return state;
+};