feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSectionHeader_unstable } from './useNavSectionHeader';
+import { renderNavSectionHeader_unstable } from './renderNavSectionHeader';
+import { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';
+/**
+ * NavSectionHeader component
+ */ export const NavSectionHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSectionHeader_unstable(props, ref);
+    useNavSectionHeaderStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);
+    return renderNavSectionHeader_unstable(state);
+});
+NavSectionHeader.displayName = 'NavSectionHeader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nimport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nimport { useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\nimport type { NavSectionHeaderProps } from './NavSectionHeader.types';\n\n/**\n * NavSectionHeader component\n */\nexport const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useNavSectionHeader_unstable(props, ref);\n\n  useNavSectionHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSectionHeaderStyles_unstable')(state);\n\n  return renderNavSectionHeader_unstable(state);\n});\n\nNavSectionHeader.displayName = 'NavSectionHeader';\n"],"names":["React","useCustomStyleHook_unstable","useNavSectionHeader_unstable","renderNavSectionHeader_unstable","useNavSectionHeaderStyles_unstable","NavSectionHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAGxF;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQP,6BAA6BK,OAAOC;IAElDJ,mCAAmCK;IACnCR,4BAA4B,sCAAsCQ;IAElE,OAAON,gCAAgCM;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

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

@@ -0,0 +1,4 @@
+/**
+ * State used in rendering NavSectionHeader
+ */ export { }; // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.
+ // & Required<Pick<NavSectionHeaderProps, 'propName'>>

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/NavSectionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type NavSectionHeaderSlots = {\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n};\n\n/**\n * NavSectionHeader Props\n */\nexport type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;\n\n/**\n * State used in rendering NavSectionHeader\n */\nexport type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;\n// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from NavSectionHeaderProps.\n// & Required<Pick<NavSectionHeaderProps, 'propName'>>\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA0E,CAC1E,iIAAiI;CACjI,sDAAsD"}

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

@@ -0,0 +1,4 @@
+export { NavSectionHeader } from './NavSectionHeader';
+export { renderNavSectionHeader_unstable } from './renderNavSectionHeader';
+export { useNavSectionHeader_unstable } from './useNavSectionHeader';
+export { navSectionHeaderClassNames, useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/index.ts"],"sourcesContent":["export { NavSectionHeader } from './NavSectionHeader';\nexport type { NavSectionHeaderProps, NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nexport { renderNavSectionHeader_unstable } from './renderNavSectionHeader';\nexport { useNavSectionHeader_unstable } from './useNavSectionHeader';\nexport { navSectionHeaderClassNames, useNavSectionHeaderStyles_unstable } from './useNavSectionHeaderStyles.styles';\n"],"names":["NavSectionHeader","renderNavSectionHeader_unstable","useNavSectionHeader_unstable","navSectionHeaderClassNames","useNavSectionHeaderStyles_unstable"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAEtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,0BAA0B,EAAEC,kCAAkC,QAAQ,qCAAqC"}

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/renderNavSectionHeader.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of NavSectionHeader
+ */ export const renderNavSectionHeader_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/renderNavSectionHeader.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 { NavSectionHeaderState, NavSectionHeaderSlots } from './NavSectionHeader.types';\n\n/**\n * Render the final JSX of NavSectionHeader\n */\nexport const renderNavSectionHeader_unstable = (state: NavSectionHeaderState): JSXElement => {\n  assertSlots<NavSectionHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderNavSectionHeader_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAAmCE;IAEnC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/useNavSectionHeader.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render NavSectionHeader.
+ *
+ * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,
+ * before being passed to renderNavSectionHeader_unstable.
+ *
+ * @param props - props from this instance of NavSectionHeader
+ * @param ref - reference to root HTMLDivElement of NavSectionHeader
+ */ export const useNavSectionHeader_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'h3'
+        },
+        root: slot.always(getIntrinsicElementProps('h3', {
+            ref,
+            ...props
+        }), {
+            elementType: 'h3'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderProps, NavSectionHeaderState } from './NavSectionHeader.types';\n\n/**\n * Create the state required to render NavSectionHeader.\n *\n * The returned state can be modified with hooks such as useNavSectionHeaderStyles_unstable,\n * before being passed to renderNavSectionHeader_unstable.\n *\n * @param props - props from this instance of NavSectionHeader\n * @param ref - reference to root HTMLDivElement of NavSectionHeader\n */\nexport const useNavSectionHeader_unstable = (\n  props: NavSectionHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSectionHeaderState => {\n  return {\n    components: {\n      root: 'h3',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h3', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h3' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useNavSectionHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,MAAM;YAC7BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAK;IAExB;AACF,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js

@@ -0,0 +1,36 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+export const navSectionHeaderClassNames = {
+  root: 'fui-NavSectionHeader'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Jyy4pa: "f1gr6hdk",
+    Bo78w4l: 0,
+    Cgygva: 0,
+    yil37a: "f1ulrxyd",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm"
+  }
+}, {
+  d: [".f1gr6hdk{-webkit-margin-start:10px;margin-inline-start:10px;}", [".f1ulrxyd{margin-block:8px;}", {
+    p: -1
+  }], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+});
+/**
+ * Apply styling to the NavSectionHeader slots based on the state
+ */
+export const useNavSectionHeaderStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","Jyy4pa","Bo78w4l","Cgygva","yil37a","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","p","useNavSectionHeaderStyles_unstable","state","styles","className"],"sources":["useNavSectionHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const navSectionHeaderClassNames = {\n    root: 'fui-NavSectionHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        marginInlineStart: `10px`,\n        marginBlock: '8px',\n        ...typographyStyles.caption1Strong\n    }\n});\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */ export const useNavSectionHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGlB,YAAY,CAACE,0BAA0B,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js

@@ -0,0 +1,23 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+export const navSectionHeaderClassNames = {
+    root: 'fui-NavSectionHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        marginInlineStart: `10px`,
+        marginBlock: '8px',
+        ...typographyStyles.caption1Strong
+    }
+});
+/**
+ * Apply styling to the NavSectionHeader slots based on the state
+ */ export const useNavSectionHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSectionHeader/useNavSectionHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSectionHeader/useNavSectionHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSectionHeaderSlots, NavSectionHeaderState } from './NavSectionHeader.types';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const navSectionHeaderClassNames: SlotClassNames<NavSectionHeaderSlots> = {\n  root: 'fui-NavSectionHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    marginInlineStart: `10px`,\n    marginBlock: '8px',\n    ...typographyStyles.caption1Strong,\n  },\n});\n\n/**\n * Apply styling to the NavSectionHeader slots based on the state\n */\nexport const useNavSectionHeaderStyles_unstable = (state: NavSectionHeaderState): NavSectionHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(navSectionHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","navSectionHeaderClassNames","root","useStyles","marginInlineStart","marginBlock","caption1Strong","useNavSectionHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,mBAAmB,CAAC,IAAI,CAAC;QACzBC,aAAa;QACb,GAAGL,iBAAiBM,cAAc;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,2BAA2BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAEtG,OAAOF;AACT,EAAE"}