feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DialogBody", {
+    enumerable: true,
+    get: function() {
+        return DialogBody;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useDialogBody = require("./useDialogBody");
+const _renderDialogBody = require("./renderDialogBody");
+const _useDialogBodyStylesstyles = require("./useDialogBodyStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const DialogBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useDialogBody.useDialogBody_unstable)(props, ref);
+    (0, _useDialogBodyStylesstyles.useDialogBodyStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDialogBodyStyles_unstable')(state);
+    return (0, _renderDialogBody.renderDialogBody_unstable)(state);
+});
+DialogBody.displayName = 'DialogBody';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","DialogBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAMvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/DialogBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogBodySlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DialogBody Props\n */\nexport type DialogBodyProps = ComponentProps<DialogBodySlots> & {};\n\n/**\n * State used in rendering DialogBody\n */\nexport type DialogBodyState = ComponentState<DialogBodySlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA8D"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogBody/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, {
+    DialogBody: function() {
+        return _DialogBody.DialogBody;
+    },
+    dialogBodyClassNames: function() {
+        return _useDialogBodyStylesstyles.dialogBodyClassNames;
+    },
+    renderDialogBody_unstable: function() {
+        return _renderDialogBody.renderDialogBody_unstable;
+    },
+    useDialogBodyStyles_unstable: function() {
+        return _useDialogBodyStylesstyles.useDialogBodyStyles_unstable;
+    },
+    useDialogBody_unstable: function() {
+        return _useDialogBody.useDialogBody_unstable;
+    }
+});
+const _DialogBody = require("./DialogBody");
+const _renderDialogBody = require("./renderDialogBody");
+const _useDialogBody = require("./useDialogBody");
+const _useDialogBodyStylesstyles = require("./useDialogBodyStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/index.ts"],"sourcesContent":["export { DialogBody } from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody.types';\nexport { renderDialogBody_unstable } from './renderDialogBody';\nexport { useDialogBody_unstable } from './useDialogBody';\nexport { dialogBodyClassNames, useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\n"],"names":["DialogBody","renderDialogBody_unstable","useDialogBody_unstable","dialogBodyClassNames","useDialogBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAIVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAEHG,uDAA4B;;;eADlDF,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderDialogBody_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderDialogBody_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderDialogBody_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    // TODO Add additional slots in the appropriate place
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/renderDialogBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState): JSXElement => {\n  assertSlots<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDialogBody_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialogBody_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDialogBody_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 useDialogBody_unstable = (props, ref)=>{
+    var _props_as;
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {
+            // FIXME:
+            // `ref` 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: ref,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/useDialogBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(props.as ?? 'div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogBody_unstable","props","ref","components","root","always","as","elementType"],"mappings":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,+BAA+B,CAACC,OAAwBC;QAMhCD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyBG,aAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js

@@ -0,0 +1,40 @@
+'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, {
+    dialogBodyClassNames: function() {
+        return dialogBodyClassNames;
+    },
+    useDialogBodyStyles_unstable: function() {
+        return useDialogBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const dialogBodyClassNames = {
+    root: 'fui-DialogBody'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rhwx3p8", null, {
+    r: [
+        ".rhwx3p8{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);max-height:calc(100dvh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"
+    ],
+    s: [
+        "@media screen and (max-width: 480px){.rhwx3p8{max-width:100vw;grid-template-rows:auto 1fr auto;}}",
+        "@media screen and (max-height: 359px){.rhwx3p8{max-height:unset;}}"
+    ]
+});
+const useDialogBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n    root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    overflow: 'unset',\n    gap: DIALOG_GAP,\n    display: 'grid',\n    maxHeight: [\n        `calc(100vh - 2 * ${SURFACE_PADDING})`,\n        `calc(100dvh - 2 * ${SURFACE_PADDING})`\n    ],\n    boxSizing: 'border-box',\n    gridTemplateRows: 'auto 1fr',\n    gridTemplateColumns: '1fr 1fr auto',\n    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw',\n        gridTemplateRows: 'auto 1fr auto'\n    },\n    [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n        maxHeight: 'unset'\n    }\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useResetStyles();\n    state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;gCA0BY;;;;uBA5BC,gBAAgB;AAEvD,6BAA6B;IAChCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAAS,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAkB1B,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpCI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGb,mBAAY,EAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACjG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js

@@ -0,0 +1,51 @@
+'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, {
+    dialogBodyClassNames: function() {
+        return dialogBodyClassNames;
+    },
+    useDialogBodyStyles_unstable: function() {
+        return useDialogBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _contexts = require("../../contexts");
+const dialogBodyClassNames = {
+    root: 'fui-DialogBody'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    overflow: 'unset',
+    gap: _contexts.DIALOG_GAP,
+    display: 'grid',
+    maxHeight: [
+        `calc(100vh - 2 * ${_contexts.SURFACE_PADDING})`,
+        `calc(100dvh - 2 * ${_contexts.SURFACE_PADDING})`
+    ],
+    boxSizing: 'border-box',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateColumns: '1fr 1fr auto',
+    [_contexts.DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw',
+        gridTemplateRows: 'auto 1fr auto'
+    },
+    [_contexts.DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {
+        maxHeight: 'unset'
+    }
+});
+const useDialogBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  DIALOG_GAP,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  overflow: 'unset',\n  gap: DIALOG_GAP,\n  display: 'grid',\n  maxHeight: [`calc(100vh - 2 * ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n  boxSizing: 'border-box',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateColumns: '1fr 1fr auto',\n\n  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n    gridTemplateRows: 'auto 1fr auto',\n  },\n\n  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n    maxHeight: 'unset',\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  'use no memo';\n\n  const resetStyles = useResetStyles();\n\n  state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAYaM,oBAAAA;;;gCA6BAW;;;;uBAvCiC,iBAAiB;0BAQxD,iBAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,oBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,yBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,yBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,gDAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpBU,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}