feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { renderDivider_unstable } from '@fluentui/react-divider';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavDivider_unstable } from './useNavDivider';
+import { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';
+/**
+ * NavDivider component - a divider used within navigation components to separate items.
+ */ export const NavDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavDivider_unstable(props, ref);
+    useNavDividerStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);
+    return renderDivider_unstable(state);
+});
+NavDivider.displayName = 'NavDivider';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDivider/NavDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavDivider_unstable } from './useNavDivider';\nimport { useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\nimport type { NavDividerProps } from './NavDivider.types';\n\n/**\n * NavDivider component - a divider used within navigation components to separate items.\n */\nexport const NavDivider: ForwardRefComponent<NavDividerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDivider_unstable(props, ref);\n\n  useNavDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nNavDivider.displayName = 'NavDivider';\n"],"names":["React","renderDivider_unstable","useCustomStyleHook_unstable","useNavDivider_unstable","useNavDividerStyles_unstable","NavDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AAEjE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BP,4BAA4B,gCAAgCO;IAE5D,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDivider/NavDivider.types.ts"],"sourcesContent":["import type { DividerProps, DividerState } from '@fluentui/react-divider';\n\n/**\n * NavDivider Props\n */\nexport type NavDividerProps = DividerProps;\n\n/**\n * State used in rendering NavDivider\n */\nexport type NavDividerState = DividerState;\n"],"names":[],"mappings":"AAOA;;CAEC,GACD,WAA2C"}

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

@@ -0,0 +1,3 @@
+export { NavDivider } from './NavDivider';
+export { useNavDivider_unstable } from './useNavDivider';
+export { navDividerClassNames, useNavDividerStyles_unstable } from './useNavDividerStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDivider/index.ts"],"sourcesContent":["export { NavDivider } from './NavDivider';\nexport type { NavDividerProps, NavDividerState } from './NavDivider.types';\nexport { useNavDivider_unstable } from './useNavDivider';\nexport { navDividerClassNames, useNavDividerStyles_unstable } from './useNavDividerStyles.styles';\n"],"names":["NavDivider","useNavDivider_unstable","navDividerClassNames","useNavDividerStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

node_modules/@fluentui/react-nav/lib/components/NavDivider/useNavDivider.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useDivider_unstable } from '@fluentui/react-divider';
+/**
+ * Create the state required to render NavDivider.
+ *
+ * The returned state can be modified with hooks such as useNavDividerStyles_unstable,
+ * before being passed to renderNavDivider_unstable.
+ *
+ * @param props - props from this instance of NavDivider
+ * @param ref - reference to root HTMLDivElement of NavDivider
+ */ export const useNavDivider_unstable = (props, ref)=>{
+    return useDivider_unstable({
+        appearance: 'strong',
+        ...props
+    }, ref);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDivider/useNavDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { NavDividerProps, NavDividerState } from './NavDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\n\n/**\n * Create the state required to render NavDivider.\n *\n * The returned state can be modified with hooks such as useNavDividerStyles_unstable,\n * before being passed to renderNavDivider_unstable.\n *\n * @param props - props from this instance of NavDivider\n * @param ref - reference to root HTMLDivElement of NavDivider\n */\nexport const useNavDivider_unstable = (props: NavDividerProps, ref: React.Ref<HTMLElement>): NavDividerState => {\n  return useDivider_unstable({ appearance: 'strong', ...props }, ref);\n};\n"],"names":["React","useDivider_unstable","useNavDivider_unstable","props","ref","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAOH,oBAAoB;QAAEI,YAAY;QAAU,GAAGF,KAAK;IAAC,GAAGC;AACjE,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavDivider/useNavDividerStyles.styles.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { useDividerStyles_unstable } from '@fluentui/react-divider';
+export const navDividerClassNames = {
+  root: 'fui-NavDivider',
+  wrapper: 'fui-NavDivider__wrapper'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bh6795r: "f1jhi6b8",
+    B6of3ja: "fvjh0tl",
+    jrapky: "fd1gkq"
+  }
+}, {
+  d: [".f1jhi6b8{flex-grow:0;}", ".fvjh0tl{margin-top:4px;}", ".fd1gkq{margin-bottom:4px;}"]
+});
+/**
+ * Apply styling to the NavDivider slots based on the state
+ */
+export const useNavDividerStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
+  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);
+  useDividerStyles_unstable(state);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavDivider/useNavDividerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","Bh6795r","B6of3ja","jrapky","d","useNavDividerStyles_unstable","state","styles","className"],"sources":["useNavDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nexport const navDividerClassNames = {\n    root: 'fui-NavDivider',\n    wrapper: 'fui-NavDivider__wrapper'\n};\nconst useStyles = makeStyles({\n    root: {\n        flexGrow: 0,\n        marginTop: '4px',\n        marginBottom: '4px'\n    }\n});\n/**\n * Apply styling to the NavDivider slots based on the state\n */ export const useNavDividerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n    useDividerStyles_unstable(state);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACjGF,KAAK,CAACP,OAAO,CAACS,SAAS,GAAGb,YAAY,CAACE,oBAAoB,CAACE,OAAO,EAAEO,KAAK,CAACP,OAAO,CAACS,SAAS,CAAC;EAC7FZ,yBAAyB,CAACU,KAAK,CAAC;EAChC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavDivider/useNavDividerStyles.styles.raw.js

@@ -0,0 +1,24 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useDividerStyles_unstable } from '@fluentui/react-divider';
+export const navDividerClassNames = {
+    root: 'fui-NavDivider',
+    wrapper: 'fui-NavDivider__wrapper'
+};
+const useStyles = makeStyles({
+    root: {
+        flexGrow: 0,
+        marginTop: '4px',
+        marginBottom: '4px'
+    }
+});
+/**
+ * Apply styling to the NavDivider slots based on the state
+ */ export const useNavDividerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);
+    state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);
+    useDividerStyles_unstable(state);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavDivider/useNavDividerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDivider/useNavDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable, type DividerSlots } from '@fluentui/react-divider';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDividerState } from './NavDivider.types';\n\nexport const navDividerClassNames: SlotClassNames<DividerSlots> = {\n  root: 'fui-NavDivider',\n  wrapper: 'fui-NavDivider__wrapper',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    flexGrow: 0,\n    marginTop: '4px',\n    marginBottom: '4px',\n  },\n});\n\n/**\n * Apply styling to the NavDivider slots based on the state\n */\nexport const useNavDividerStyles_unstable = (state: NavDividerState): NavDividerState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navDividerClassNames.root, styles.root, state.root.className);\n  state.wrapper.className = mergeClasses(navDividerClassNames.wrapper, state.wrapper.className);\n\n  useDividerStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","navDividerClassNames","root","wrapper","useStyles","flexGrow","marginTop","marginBottom","useNavDividerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAA2B,0BAA0B;AAIvF,OAAO,MAAMC,uBAAqD;IAChEC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASN;IAEfK,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,qBAAqBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAChGF,MAAMN,OAAO,CAACQ,SAAS,GAAGZ,aAAaE,qBAAqBE,OAAO,EAAEM,MAAMN,OAAO,CAACQ,SAAS;IAE5FX,0BAA0BS;IAC1B,OAAOA;AACT,EAAE"}