feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/NavDrawerBody.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NavDrawerBody", {
+    enumerable: true,
+    get: function() {
+        return NavDrawerBody;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdrawer = require("@fluentui/react-drawer");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useNavDrawerBody = require("./useNavDrawerBody");
+const _useNavDrawerBodyStylesstyles = require("./useNavDrawerBodyStyles.styles");
+const NavDrawerBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useNavDrawerBody.useNavDrawerBody_unstable)(props, ref);
+    (0, _useNavDrawerBodyStylesstyles.useNavDrawerBodyStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerBodyStyles_unstable')(state);
+    return (0, _reactdrawer.renderDrawerBody_unstable)(state);
+});
+NavDrawerBody.displayName = 'NavDrawerBody';

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/NavDrawerBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerBody_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nimport { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\nimport type { NavDrawerBodyProps } from './NavDrawerBody.types';\n\n/**\n * NavDrawerBody component\n */\nexport const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerBody_unstable(props, ref);\n\n  useNavDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nNavDrawerBody.displayName = 'NavDrawerBody';\n"],"names":["React","renderDrawerBody_unstable","useCustomStyleHook_unstable","useNavDrawerBody_unstable","useNavDrawerBodyStyles_unstable","NavDrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACW,yBAAyB;qCAEvB,kCAAkC;kCAEpC,qBAAqB;8CACf,kCAAkC;AAM3E,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQN,2CAAAA,EAA0BI,OAAOC;QAE/CJ,6DAAAA,EAAgCK;QAChCP,gDAAAA,EAA4B,mCAAmCO;IAE/D,WAAOR,sCAAAA,EAA0BQ;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/NavDrawerBody.types.js

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

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/NavDrawerBody.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/NavDrawerBody.types.ts"],"sourcesContent":["import type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from '@fluentui/react-drawer';\n\nexport type NavDrawerBodySlots = DrawerBodySlots;\n\n/**\n * NavDrawerBody Props\n */\nexport type NavDrawerBodyProps = DrawerBodyProps;\n\n/**\n * State used in rendering NavDrawerBody\n */\nexport type NavDrawerBodyState = DrawerBodyState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAiD"}

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/index.js

@@ -0,0 +1,27 @@
+"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, {
+    NavDrawerBody: function() {
+        return _NavDrawerBody.NavDrawerBody;
+    },
+    navDrawerBodyClassNames: function() {
+        return _useNavDrawerBodyStylesstyles.navDrawerBodyClassNames;
+    },
+    useNavDrawerBodyStyles_unstable: function() {
+        return _useNavDrawerBodyStylesstyles.useNavDrawerBodyStyles_unstable;
+    },
+    useNavDrawerBody_unstable: function() {
+        return _useNavDrawerBody.useNavDrawerBody_unstable;
+    }
+});
+const _NavDrawerBody = require("./NavDrawerBody");
+const _useNavDrawerBody = require("./useNavDrawerBody");
+const _useNavDrawerBodyStylesstyles = require("./useNavDrawerBodyStyles.styles");

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/index.ts"],"sourcesContent":["export { NavDrawerBody } from './NavDrawerBody';\nexport type { NavDrawerBodyProps, NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\nexport { useNavDrawerBody_unstable } from './useNavDrawerBody';\nexport { navDrawerBodyClassNames, useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';\n"],"names":["NavDrawerBody","useNavDrawerBody_unstable","navDrawerBodyClassNames","useNavDrawerBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAGbE,qDAAuB;;;eAAEC,6DAA+B;;;eADxDF,2CAAyB;;;+BAFJ,kBAAkB;kCAEN,qBAAqB;8CACU,kCAAkC"}

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useNavDrawerBody_unstable", {
+    enumerable: true,
+    get: function() {
+        return useNavDrawerBody_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactdrawer = require("@fluentui/react-drawer");
+const _NavContext = require("../NavContext");
+const useNavDrawerBody_unstable = (props, ref)=>{
+    const { tabbable } = (0, _NavContext.useNavContext_unstable)();
+    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        axis: 'vertical',
+        circular: true,
+        tabbable
+    });
+    return (0, _reactdrawer.useDrawerBody_unstable)({
+        ...focusAttributes,
+        ...props
+    }, ref);
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useDrawerBody_unstable } from '@fluentui/react-drawer';\n\nimport { useNavContext_unstable } from '../NavContext';\nimport type { NavDrawerBodyProps, NavDrawerBodyState } from './NavDrawerBody.types';\n/**\n * Create the state required to render NavDrawerBody.\n *\n * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,\n * before being passed to renderNavDrawerBody_unstable.\n *\n * @param props - props from this instance of NavDrawerBody\n * @param ref - reference to root HTMLDivElement of NavDrawerBody\n */\nexport const useNavDrawerBody_unstable = (\n  props: NavDrawerBodyProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavDrawerBodyState => {\n  const { tabbable } = useNavContext_unstable();\n  const focusAttributes = useArrowNavigationGroup({\n    axis: 'vertical',\n    circular: true,\n    tabbable,\n  });\n\n  return useDrawerBody_unstable({ ...focusAttributes, ...props }, ref);\n};\n"],"names":["React","useArrowNavigationGroup","useDrawerBody_unstable","useNavContext_unstable","useNavDrawerBody_unstable","props","ref","tabbable","focusAttributes","axis","circular"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACS,0BAA0B;6BAC3B,yBAAyB;4BAEzB,gBAAgB;AAWhD,MAAMI,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,OAAGJ,kCAAAA;IACrB,MAAMK,sBAAkBP,qCAAAA,EAAwB;QAC9CQ,MAAM;QACNC,UAAU;QACVH;IACF;IAEA,WAAOL,mCAAAA,EAAuB;QAAE,GAAGM,eAAe;QAAE,GAAGH,KAAK;IAAC,GAAGC;AAClE,EAAE"}

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js

@@ -0,0 +1,68 @@
+'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, {
+    navDrawerBodyClassNames: function() {
+        return navDrawerBodyClassNames;
+    },
+    useNavDrawerBodyStyles_unstable: function() {
+        return useNavDrawerBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactdrawer = require("@fluentui/react-drawer");
+const navDrawerBodyClassNames = {
+    root: 'fui-NavDrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "fif7vu7",
+            "f1htewbf"
+        ],
+        Bt984gj: "f3gca8",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Belr9w4: "f1j0q4x9"
+    }
+}, {
+    d: [
+        [
+            ".fif7vu7{padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalMNudge);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1htewbf{padding:0 var(--spacingHorizontalMNudge) 0 var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f3gca8{align-items:unset;}",
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"
+    ]
+});
+const useNavDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdrawer.useDrawerBodyStyles_unstable)(state);
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navDrawerBodyClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useNavDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerBodyClassNames = {\n    root: 'fui-NavDrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n        alignItems: 'unset',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */ export const useNavDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerBodyStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bt984gj","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,uBAAuB;;;mCAgBY;eAA/Bc;;;uBAnBwB,gBAAgB;6BAEZ,wBAAwB;AAC9D,gCAAgC;IACnCb,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,wCAAyCE,KAAK,IAAG;IACxD,aAAa;QACbhB,yCAA4B,EAACgB,KAAK,CAAC;IACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;IACpG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js

@@ -0,0 +1,43 @@
+'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, {
+    navDrawerBodyClassNames: function() {
+        return navDrawerBodyClassNames;
+    },
+    useNavDrawerBodyStyles_unstable: function() {
+        return useNavDrawerBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactdrawer = require("@fluentui/react-drawer");
+const navDrawerBodyClassNames = {
+    root: 'fui-NavDrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `0 ${_reacttheme.tokens.spacingHorizontalXS} 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
+        alignItems: 'unset',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: _reacttheme.tokens.spacingVerticalXXS
+    }
+});
+const useNavDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reactdrawer.useDrawerBodyStyles_unstable)(state);
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(navDrawerBodyClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib-commonjs/components/NavDrawerBody/useNavDrawerBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerBody/useNavDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerBodySlots, NavDrawerBodyState } from './NavDrawerBody.types';\n\nexport const navDrawerBodyClassNames: SlotClassNames<NavDrawerBodySlots> = {\n  root: 'fui-NavDrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,\n    alignItems: 'unset',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerBody slots based on the state\n */\nexport const useNavDrawerBodyStyles_unstable = (state: NavDrawerBodyState): NavDrawerBodyState => {\n  'use no memo';\n\n  useDrawerBodyStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerBodyStyles_unstable","navDrawerBodyClassNames","root","useStyles","padding","spacingHorizontalXS","spacingHorizontalMNudge","alignItems","display","flexDirection","rowGap","spacingVerticalXXS","useNavDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,uBAAAA;;;IAoBAW,+BAAAA;;;;uBA1B4B,iBAAiB;4BACnC,wBAAwB;6BACF,yBAAyB;AAI/D,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,kBAAAA,CAAOM,mBAAmB,CAAC,GAAG,EAAEN,kBAAAA,CAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,kBAAAA,CAAOY,kBAAkB;IACnC;AACF;AAKO,wCAAwC,CAACE;IAC9C;QAEAb,yCAAAA,EAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}