feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MenuGroupHeader", {
+    enumerable: true,
+    get: function() {
+        return MenuGroupHeader;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useMenuGroupHeader = require("./useMenuGroupHeader");
+const _useMenuGroupHeaderStylesstyles = require("./useMenuGroupHeaderStyles.styles");
+const _renderMenuGroupHeader = require("./renderMenuGroupHeader");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const MenuGroupHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMenuGroupHeader.useMenuGroupHeader_unstable)(props, ref);
+    (0, _useMenuGroupHeaderStylesstyles.useMenuGroupHeaderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuGroupHeaderStyles_unstable')(state);
+    return (0, _renderMenuGroupHeader.renderMenuGroupHeader_unstable)(state);
+});
+MenuGroupHeader.displayName = 'MenuGroupHeader';

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nimport { useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\nimport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nimport type { MenuGroupHeaderProps } from './MenuGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.\n */\nexport const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGroupHeader_unstable(props, ref);\n\n  useMenuGroupHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGroupHeader_unstable(state);\n});\n\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"names":["React","useMenuGroupHeader_unstable","useMenuGroupHeaderStyles_unstable","renderMenuGroupHeader_unstable","useCustomStyleHook_unstable","MenuGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;gDACjB,oCAAoC;uCACvC,0BAA0B;qCAG7B,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDN,iEAAAA,EAAkCO;QAElCL,gDAAAA,EAA4B,qCAAqCK;IAEjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/MenuGroupHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuGroupHeaderSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;\n\nexport type MenuGroupHeaderState = ComponentState<MenuGroupHeaderSlots>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/index.js

@@ -0,0 +1,31 @@
+"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, {
+    MenuGroupHeader: function() {
+        return _MenuGroupHeader.MenuGroupHeader;
+    },
+    menuGroupHeaderClassNames: function() {
+        return _useMenuGroupHeaderStylesstyles.menuGroupHeaderClassNames;
+    },
+    renderMenuGroupHeader_unstable: function() {
+        return _renderMenuGroupHeader.renderMenuGroupHeader_unstable;
+    },
+    useMenuGroupHeaderStyles_unstable: function() {
+        return _useMenuGroupHeaderStylesstyles.useMenuGroupHeaderStyles_unstable;
+    },
+    useMenuGroupHeader_unstable: function() {
+        return _useMenuGroupHeader.useMenuGroupHeader_unstable;
+    }
+});
+const _MenuGroupHeader = require("./MenuGroupHeader");
+const _renderMenuGroupHeader = require("./renderMenuGroupHeader");
+const _useMenuGroupHeader = require("./useMenuGroupHeader");
+const _useMenuGroupHeaderStylesstyles = require("./useMenuGroupHeaderStyles.styles");

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/index.ts"],"sourcesContent":["export type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nexport { MenuGroupHeader } from './MenuGroupHeader';\nexport { renderMenuGroupHeader_unstable } from './renderMenuGroupHeader';\nexport { useMenuGroupHeader_unstable } from './useMenuGroupHeader';\nexport { menuGroupHeaderClassNames, useMenuGroupHeaderStyles_unstable } from './useMenuGroupHeaderStyles.styles';\n"],"names":["MenuGroupHeader","renderMenuGroupHeader_unstable","useMenuGroupHeader_unstable","menuGroupHeaderClassNames","useMenuGroupHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,gCAAe;;;eAGfG,yDAAyB;;;eAFzBF,qDAA8B;;;eAEHG,iEAAiC;;;eAD5DF,+CAA2B;;;iCAFJ,oBAAoB;uCACL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderMenuGroupHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderMenuGroupHeader_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderMenuGroupHeader_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/renderMenuGroupHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroupheader structure but add\n * slots to children.\n */\nexport const renderMenuGroupHeader_unstable = (state: MenuGroupHeaderState): JSXElement => {\n  assertSlots<MenuGroupHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderMenuGroupHeader_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMenuGroupHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMenuGroupHeader_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _menuGroupContext = require("../../contexts/menuGroupContext");
+const _reactutilities = require("@fluentui/react-utilities");
+function useMenuGroupHeader_unstable(props, ref) {
+    const { headerId: id } = (0, _menuGroupContext.useMenuGroupContext_unstable)();
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            id,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroupHeader.\n */\nexport function useMenuGroupHeader_unstable(\n  props: MenuGroupHeaderProps,\n  ref: React.Ref<HTMLElement>,\n): MenuGroupHeaderState {\n  const { headerId: id } = useMenuGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        id,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMenuGroupContext_unstable","getIntrinsicElementProps","slot","useMenuGroupHeader_unstable","props","ref","headerId","id","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACc,kCAAkC;gCAChC,4BAA4B;AAMpE,SAASI,4BACdC,KAA2B,EAC3BC,GAA2B;IAE3B,MAAM,EAAEC,UAAUC,EAAE,EAAE,OAAGP,8CAAAA;IAEzB,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLE;YACA,GAAGH,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js

@@ -0,0 +1,58 @@
+'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, {
+    menuGroupHeaderClassNames: function() {
+        return menuGroupHeaderClassNames;
+    },
+    useMenuGroupHeaderStyles_unstable: function() {
+        return useMenuGroupHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const menuGroupHeaderClassNames = {
+    root: 'fui-MenuGroupHeader'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Be2twd7: "fy9rknc",
+        sj55zd: "f11d4kpn",
+        uwmqm3: [
+            "f177v4lu",
+            "f19lj068"
+        ],
+        z189sj: [
+            "f19lj068",
+            "f177v4lu"
+        ],
+        Bhrd7zp: "fl43uef",
+        Bqenvij: "f1d2rq10",
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    }
+}, {
+    d: [
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f177v4lu{padding-left:8px;}",
+        ".f19lj068{padding-right:8px;}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f1d2rq10{height:32px;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}"
+    ]
+});
+const useMenuGroupHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMenuGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGroupHeaderClassNames = {\n    root: 'fui-MenuGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","tokens","menuGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,yBAAyB;;;IAezBY,iCAAiC;;;;uBAjBL,gBAAgB;AAElD,kCAAkC;IACrCX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAWjB,CAAC;AACK,2CAA2CE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGlB,mBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js

@@ -0,0 +1,42 @@
+'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, {
+    menuGroupHeaderClassNames: function() {
+        return menuGroupHeaderClassNames;
+    },
+    useMenuGroupHeaderStyles_unstable: function() {
+        return useMenuGroupHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const menuGroupHeaderClassNames = {
+    root: 'fui-MenuGroupHeader'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        paddingLeft: '8px',
+        paddingRight: '8px',
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useMenuGroupHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(menuGroupHeaderClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-menu/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {\n  root: 'fui-MenuGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState): MenuGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tokens","menuGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,yBAAAA;;;qCAiBAc;eAAAA;;;uBAtB4B,iBAAiB;4BACnC,wBAAwB;AAIxC,kCAAwE;IAC7Eb,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,UAAUJ,kBAAAA,CAAOK,eAAe;QAChCC,OAAON,kBAAAA,CAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,kBAAAA,CAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,0CAA0C,CAACE;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,OAAGpB,mBAAAA,EAAaG,0BAA0BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAErG,OAAOF;AACT,EAAE"}