feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { renderDrawerBody_unstable } from '@fluentui/react-drawer';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavDrawerBody_unstable } from './useNavDrawerBody';
+import { useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';
+/**
+ * NavDrawerBody component
+ */ export const NavDrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavDrawerBody_unstable(props, ref);
+    useNavDrawerBodyStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavDrawerBodyStyles_unstable')(state);
+    return renderDrawerBody_unstable(state);
+});
+NavDrawerBody.displayName = 'NavDrawerBody';

node_modules/@fluentui/react-nav/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQN,0BAA0BI,OAAOC;IAE/CJ,gCAAgCK;IAChCP,4BAA4B,mCAAmCO;IAE/D,OAAOR,0BAA0BQ;AACnC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1,3 @@
+export { NavDrawerBody } from './NavDrawerBody';
+export { useNavDrawerBody_unstable } from './useNavDrawerBody';
+export { navDrawerBodyClassNames, useNavDrawerBodyStyles_unstable } from './useNavDrawerBodyStyles.styles';

node_modules/@fluentui/react-nav/lib/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":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC"}

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

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useDrawerBody_unstable } from '@fluentui/react-drawer';
+import { useNavContext_unstable } from '../NavContext';
+/**
+ * Create the state required to render NavDrawerBody.
+ *
+ * The returned state can be modified with hooks such as useNavDrawerBodyStyles_unstable,
+ * before being passed to renderNavDrawerBody_unstable.
+ *
+ * @param props - props from this instance of NavDrawerBody
+ * @param ref - reference to root HTMLDivElement of NavDrawerBody
+ */ export const useNavDrawerBody_unstable = (props, ref)=>{
+    const { tabbable } = useNavContext_unstable();
+    const focusAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        circular: true,
+        tabbable
+    });
+    return useDrawerBody_unstable({
+        ...focusAttributes,
+        ...props
+    }, ref);
+};

node_modules/@fluentui/react-nav/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,sBAAsB,QAAQ,gBAAgB;AAEvD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAMK,kBAAkBP,wBAAwB;QAC9CQ,MAAM;QACNC,UAAU;QACVH;IACF;IAEA,OAAOL,uBAAuB;QAAE,GAAGM,eAAe;QAAE,GAAGH,KAAK;IAAC,GAAGC;AAClE,EAAE"}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
+export const navDrawerBodyClassNames = {
+  root: 'fui-NavDrawerBody'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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);}"]
+});
+/**
+ * Apply styling to the NavDrawerBody slots based on the state
+ */
+export const useNavDrawerBodyStyles_unstable = state => {
+  'use no memo';
+
+  useDrawerBodyStyles_unstable(state);
+  const styles = useStyles();
+  state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);
+  return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACbhB,4BAA4B,CAACgB,KAAK,CAAC;EACnC,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EACpG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,27 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
+export const navDrawerBodyClassNames = {
+    root: 'fui-NavDrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalMNudge}`,
+        alignItems: 'unset',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: tokens.spacingVerticalXXS
+    }
+});
+/**
+ * Apply styling to the NavDrawerBody slots based on the state
+ */ export const useNavDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    useDrawerBodyStyles_unstable(state);
+    const styles = useStyles();
+    state.root.className = mergeClasses(navDrawerBodyClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,CAAC,EAAE,EAAEL,OAAOM,mBAAmB,CAAC,GAAG,EAAEN,OAAOO,uBAAuB,EAAE;QAC9EC,YAAY;QACZC,SAAS;QACTC,eAAe;QACfC,QAAQX,OAAOY,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAb,6BAA6Ba;IAC7B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,wBAAwBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACnG,OAAOF;AACT,EAAE"}