feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useDialogSurface_unstable } from './useDialogSurface';
+import { renderDialogSurface_unstable } from './renderDialogSurface';
+import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
+import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * DialogSurface component represents the visual part of a `Dialog` as a whole,
+ * it contains everything that should be visible.
+ */ export const DialogSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDialogSurface_unstable(props, ref);
+    const contextValues = useDialogSurfaceContextValues_unstable(state);
+    useDialogSurfaceStyles_unstable(state);
+    useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);
+    return renderDialogSurface_unstable(state, contextValues);
+});
+DialogSurface.displayName = 'DialogSurface';

node_modules/@fluentui/react-dialog/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DP,gCAAgCO;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering DialogSurface
+ */ export { };

node_modules/@fluentui/react-dialog/lib/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/components/DialogSurface/index.js

@@ -0,0 +1,5 @@
+export { DialogSurface } from './DialogSurface';
+export { renderDialogSurface_unstable } from './renderDialogSurface';
+export { useDialogSurface_unstable } from './useDialogSurface';
+export { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
+export { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';

node_modules/@fluentui/react-dialog/lib/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":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAShD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,kCAAkC"}

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

@@ -0,0 +1,26 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { MotionRefForwarderReset } from '@fluentui/react-motion';
+import { Portal } from '@fluentui/react-portal';
+import { assertSlots } from '@fluentui/react-utilities';
+import { DialogSurfaceProvider } from '../../contexts';
+/**
+ * Render the final JSX of DialogSurface
+ */ export const renderDialogSurface_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(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__*/ _jsx(state.backdropMotion, {
+                children: /*#__PURE__*/ _jsx(state.backdrop, {})
+            }),
+            /*#__PURE__*/ _jsx(MotionRefForwarderReset, {
+                children: /*#__PURE__*/ _jsx(DialogSurfaceProvider, {
+                    value: contextValues.dialogSurface,
+                    children: /*#__PURE__*/ _jsx(state.root, {})
+                })
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-dialog/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACR;0BACC,cAAA,KAACG;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,cAAA,KAACN,MAAMO,IAAI;;;;;AAKrB,EAAE"}

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

@@ -0,0 +1,127 @@
+'use client';
+import { Escape } from '@fluentui/keyboard-keys';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';
+import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
+import { DialogBackdropMotion } from '../DialogBackdropMotion';
+import { useMotionForwardedRef } from '@fluentui/react-motion';
+/**
+ * Create the state required to render DialogSurface.
+ *
+ * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
+ * before being passed to renderDialogSurface_unstable.
+ *
+ * @param props - props from this instance of DialogSurface
+ * @param ref - reference to root HTMLElement of DialogSurface
+ */ export const useDialogSurface_unstable = (props, ref)=>{
+    const contextRef = useMotionForwardedRef();
+    const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
+    const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
+    const backdropOverride = useDialogBackdropContext_unstable();
+    const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
+    const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
+    const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
+    const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
+    const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
+    const open = useDialogContext_unstable((ctx)=>ctx.open);
+    const unmountOnClose = useDialogContext_unstable((ctx)=>ctx.unmountOnClose);
+    const handledBackdropClick = useEventCallback((event)=>{
+        if (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 = useEventCallback((event)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+        if (event.key === 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 = 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 } = useDisableBodyScroll();
+    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
+        },
+        open,
+        backdrop,
+        isNestedDialog,
+        treatBackdropAsNested,
+        backdropAppearance,
+        unmountOnClose,
+        mountNode: props.mountNode,
+        root: slot.always(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: useMergedRefs(ref, contextRef, dialogRef)
+        }), {
+            elementType: 'div'
+        }),
+        backdropMotion: presenceMotionSlot(props.backdropMotion, {
+            elementType: DialogBackdropMotion,
+            defaultProps: {
+                appear: unmountOnClose,
+                visible: open
+            }
+        }),
+        // Deprecated properties
+        transitionStatus: undefined
+    };
+};

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

@@ -0,0 +1,6 @@
+export function useDialogSurfaceContextValues_unstable(state) {
+    const dialogSurface = true;
+    return {
+        dialogSurface
+    };
+}

node_modules/@fluentui/react-dialog/lib/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":"AAGA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
+export const dialogSurfaceClassNames = {
+  root: 'fui-DialogSurface',
+  backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseStyle = /*#__PURE__*/__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__*/__resetStyles("r1e18s3l", null, [".r1e18s3l{inset:0px;background-color:var(--colorBackgroundOverlay);position:fixed;}"]);
+const useStyles = /*#__PURE__*/__styles({
+  nestedDialogBackdrop: {
+    De3pzq: "f1c21dwh"
+  },
+  dialogHidden: {
+    Bkecrkj: "f1aehjj5"
+  }
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1aehjj5{pointer-events:none;}"]
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */
+export 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 = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,78 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
+export const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyle = makeResetStyles({
+    ...createFocusOutlineStyle(),
+    inset: 0,
+    padding: SURFACE_PADDING,
+    margin: 'auto',
+    borderStyle: 'none',
+    overflow: 'unset',
+    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,
+    borderRadius: tokens.borderRadiusXLarge,
+    display: 'block',
+    userSelect: 'unset',
+    visibility: 'unset',
+    position: 'fixed',
+    height: 'fit-content',
+    maxWidth: '600px',
+    maxHeight: [
+        '100vh',
+        '100dvh'
+    ],
+    boxSizing: 'border-box',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    // Same styles as DialogSurfaceMotion last keyframe,
+    // to ensure dialog will be properly styled when surfaceMotion is opted-out
+    boxShadow: tokens.shadow64,
+    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw'
+    },
+    [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(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
+        borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
+    }
+});
+const useBackdropBaseStyle = makeResetStyles({
+    inset: '0px',
+    backgroundColor: tokens.colorBackgroundOverlay,
+    position: 'fixed'
+});
+const useStyles = makeStyles({
+    nestedDialogBackdrop: {
+        backgroundColor: tokens.colorTransparentBackground
+    },
+    dialogHidden: {
+        pointerEvents: 'none'
+    }
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */ export 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 = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
+    if (backdrop) {
+        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
+    }
+    return state;
+};