feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { renderDrawerFooter_unstable } from '@fluentui/react-drawer';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavDrawerFooter_unstable } from './useNavDrawerFooter';
+import { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';
+/**
+ * NavDrawerFooter component
+ */ export const NavDrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavDrawerFooter_unstable(props, ref);
+    useNavDrawerFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);
+    return renderDrawerFooter_unstable(state);
+});
+NavDrawerFooter.displayName = 'NavDrawerFooter';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nimport { useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\nimport type { NavDrawerFooterProps } from './NavDrawerFooter.types';\n\n/**\n * NavDrawerFooter component\n */\nexport const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawerFooter_unstable(props, ref);\n\n  useNavDrawerFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerFooterStyles_unstable')(state);\n\n  return renderDrawerFooter_unstable(state);\n});\n\nNavDrawerFooter.displayName = 'NavDrawerFooter';\n"],"names":["React","renderDrawerFooter_unstable","useCustomStyleHook_unstable","useNavDrawerFooter_unstable","useNavDrawerFooterStyles_unstable","NavDrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,yBAAyB;AAErE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQN,4BAA4BI,OAAOC;IAEjDJ,kCAAkCK;IAClCP,4BAA4B,qCAAqCO;IAEjE,OAAOR,4BAA4BQ;AACrC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/NavDrawerFooter.types.ts"],"sourcesContent":["import type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from '@fluentui/react-drawer';\n\nexport type NavDrawerFooterSlots = DrawerFooterSlots;\n\n/**\n * NavDrawerFooter Props\n */\nexport type NavDrawerFooterProps = DrawerFooterProps;\n\n/**\n * State used in rendering NavDrawerFooter\n */\nexport type NavDrawerFooterState = DrawerFooterState;\n"],"names":[],"mappings":"AASA;;CAEC,GACD,WAAqD"}

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

@@ -0,0 +1,3 @@
+export { NavDrawerFooter } from './NavDrawerFooter';
+export { useNavDrawerFooter_unstable } from './useNavDrawerFooter';
+export { navDrawerFooterClassNames, useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/index.ts"],"sourcesContent":["export { NavDrawerFooter } from './NavDrawerFooter';\nexport type { NavDrawerFooterProps, NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\nexport { useNavDrawerFooter_unstable } from './useNavDrawerFooter';\nexport { navDrawerFooterClassNames, useNavDrawerFooterStyles_unstable } from './useNavDrawerFooterStyles.styles';\n"],"names":["NavDrawerFooter","useNavDrawerFooter_unstable","navDrawerFooterClassNames","useNavDrawerFooterStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooter.js

@@ -0,0 +1,14 @@
+'use client';
+import * as React from 'react';
+import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
+/**
+ * Create the state required to render NavDrawerFooter.
+ *
+ * The returned state can be modified with hooks such as useNavDrawerFooterStyles_unstable,
+ * before being passed to renderNavDrawerFooter_unstable.
+ *
+ * @param props - props from this instance of NavDrawerFooter
+ * @param ref - reference to root HTMLDivElement of NavDrawerFooter
+ */ export const useNavDrawerFooter_unstable = (props, ref)=>{
+    return useDrawerFooter_unstable(props, ref);
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDrawerFooter_unstable } from '@fluentui/react-drawer';\nimport type { NavDrawerFooterProps, NavDrawerFooterState } from './NavDrawerFooter.types';\n\n/**\n * Create the state required to render NavDrawerFooter.\n *\n * The returned state can be modified with hooks such as useNavDrawerFooterStyles_unstable,\n * before being passed to renderNavDrawerFooter_unstable.\n *\n * @param props - props from this instance of NavDrawerFooter\n * @param ref - reference to root HTMLDivElement of NavDrawerFooter\n */\nexport const useNavDrawerFooter_unstable = (\n  props: NavDrawerFooterProps,\n  ref: React.Ref<HTMLElement>,\n): NavDrawerFooterState => {\n  return useDrawerFooter_unstable(props, ref);\n};\n"],"names":["React","useDrawerFooter_unstable","useNavDrawerFooter_unstable","props","ref"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,OAAOH,yBAAyBE,OAAOC;AACzC,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';
+export const navDrawerFooterClassNames = {
+  root: 'fui-NavDrawerFooter'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1j1cbdv",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "f1j0q4x9"
+  }
+}, {
+  d: [[".f1j1cbdv{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXS) var(--spacingVerticalXXS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
+});
+/**
+ * Apply styling to the NavDrawerFooter slots based on the state
+ */
+export const useNavDrawerFooterStyles_unstable = state => {
+  'use no memo';
+
+  useDrawerFooterStyles_unstable(state);
+  const styles = useStyles();
+  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","Beiy3e4","Belr9w4","d","p","useNavDrawerFooterStyles_unstable","state","styles","className"],"sources":["useNavDrawerFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nexport const navDrawerFooterClassNames = {\n    root: 'fui-NavDrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    }\n});\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */ export const useNavDrawerFooterStyles_unstable = (state)=>{\n    'use no memo';\n    useDrawerFooterStyles_unstable(state);\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerFooterClassNames.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,8BAA8B,QAAQ,wBAAwB;AACvE,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,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,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAOrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbf,8BAA8B,CAACe,KAAK,CAAC;EACrC,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,yBAAyB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js

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

node_modules/@fluentui/react-nav/lib/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawerFooter/useNavDrawerFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerFooterSlots, NavDrawerFooterState } from './NavDrawerFooter.types';\n\nexport const navDrawerFooterClassNames: SlotClassNames<NavDrawerFooterSlots> = {\n  root: 'fui-NavDrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXS}  ${tokens.spacingHorizontalMNudge}`,\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the NavDrawerFooter slots based on the state\n */\nexport const useNavDrawerFooterStyles_unstable = (state: NavDrawerFooterState): NavDrawerFooterState => {\n  'use no memo';\n\n  useDrawerFooterStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(navDrawerFooterClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useDrawerFooterStyles_unstable","navDrawerFooterClassNames","root","useStyles","padding","spacingVerticalXXS","spacingHorizontalXS","spacingVerticalXS","spacingHorizontalMNudge","display","flexDirection","rowGap","useNavDrawerFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGL,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOO,mBAAmB,CAAC,CAAC,EAAEP,OAAOM,kBAAkB,CAAC,CAAC,EAAEN,OAAOQ,iBAAiB,CAAC,EAAE,EAAER,OAAOS,uBAAuB,EAAE;QACjKC,SAAS;QACTC,eAAe;QACfC,QAAQZ,OAAOM,kBAAkB;IACnC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,oCAAoC,CAACC;IAChD;IAEAb,+BAA+Ba;IAC/B,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aAAaG,0BAA0BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErG,OAAOF;AACT,EAAE"}