feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/MessageBarTitle.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MessageBarTitle", {
+    enumerable: true,
+    get: function() {
+        return MessageBarTitle;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useMessageBarTitle = require("./useMessageBarTitle");
+const _renderMessageBarTitle = require("./renderMessageBarTitle");
+const _useMessageBarTitleStylesstyles = require("./useMessageBarTitleStyles.styles");
+const MessageBarTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMessageBarTitle.useMessageBarTitle_unstable)(props, ref);
+    (0, _useMessageBarTitleStylesstyles.useMessageBarTitleStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarTitleStyles_unstable')(state);
+    return (0, _renderMessageBarTitle.renderMessageBarTitle_unstable)(state);
+});
+MessageBarTitle.displayName = 'MessageBarTitle';

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/MessageBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.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';\nimport { useMessageBarTitle_unstable } from './useMessageBarTitle';\nimport { renderMessageBarTitle_unstable } from './renderMessageBarTitle';\nimport { useMessageBarTitleStyles_unstable } from './useMessageBarTitleStyles.styles';\nimport type { MessageBarTitleProps } from './MessageBarTitle.types';\n\n/**\n * MessageBarTitle component\n */\nexport const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarTitle_unstable(props, ref);\n\n  useMessageBarTitleStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarTitleStyles_unstable')(state);\n  return renderMessageBarTitle_unstable(state);\n});\n\nMessageBarTitle.displayName = 'MessageBarTitle';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarTitle_unstable","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","MessageBarTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAClC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IACjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/MessageBarTitle.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering MessageBarTitle
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/MessageBarTitle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/MessageBarTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MessageBarTitleSlots = {\n  root: Slot<'span'>;\n};\n\n/**\n * MessageBarTitle Props\n */\nexport type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;\n\n/**\n * State used in rendering MessageBarTitle\n */\nexport type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAwE"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/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, {
+    MessageBarTitle: function() {
+        return _MessageBarTitle.MessageBarTitle;
+    },
+    messageBarTitleClassNames: function() {
+        return _useMessageBarTitleStylesstyles.messageBarTitleClassNames;
+    },
+    renderMessageBarTitle_unstable: function() {
+        return _renderMessageBarTitle.renderMessageBarTitle_unstable;
+    },
+    useMessageBarTitleStyles_unstable: function() {
+        return _useMessageBarTitleStylesstyles.useMessageBarTitleStyles_unstable;
+    },
+    useMessageBarTitle_unstable: function() {
+        return _useMessageBarTitle.useMessageBarTitle_unstable;
+    }
+});
+const _MessageBarTitle = require("./MessageBarTitle");
+const _renderMessageBarTitle = require("./renderMessageBarTitle");
+const _useMessageBarTitle = require("./useMessageBarTitle");
+const _useMessageBarTitleStylesstyles = require("./useMessageBarTitleStyles.styles");

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/index.ts"],"sourcesContent":["export { MessageBarTitle } from './MessageBarTitle';\nexport type { MessageBarTitleProps, MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\nexport { renderMessageBarTitle_unstable } from './renderMessageBarTitle';\nexport { useMessageBarTitle_unstable } from './useMessageBarTitle';\nexport { messageBarTitleClassNames, useMessageBarTitleStyles_unstable } from './useMessageBarTitleStyles.styles';\n"],"names":["MessageBarTitle","renderMessageBarTitle_unstable","useMessageBarTitle_unstable","messageBarTitleClassNames","useMessageBarTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAIfG,yDAAyB;;;eAFzBF,qDAA8B;;;eAEHG,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/renderMessageBarTitle.js

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

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/renderMessageBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/renderMessageBarTitle.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 { MessageBarTitleState, MessageBarTitleSlots } from './MessageBarTitle.types';\n\n/**\n * Render the final JSX of MessageBarTitle\n */\nexport const renderMessageBarTitle_unstable = (state: MessageBarTitleState): JSXElement => {\n  assertSlots<MessageBarTitleSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderMessageBarTitle_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitle.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMessageBarTitle_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMessageBarTitle_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _messageBarContext = require("../../contexts/messageBarContext");
+const useMessageBarTitle_unstable = (props, ref)=>{
+    const { titleId } = (0, _messageBarContext.useMessageBarContext)();
+    return {
+        components: {
+            root: 'span'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
+            ref,
+            id: titleId,
+            ...props
+        }), {
+            elementType: 'span'
+        })
+    };
+};

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarTitle.\n *\n * The returned state can be modified with hooks such as useMessageBarTitleStyles_unstable,\n * before being passed to renderMessageBarTitle_unstable.\n *\n * @param props - props from this instance of MessageBarTitle\n * @param ref - reference to root HTMLElement of MessageBarTitle\n */\nexport const useMessageBarTitle_unstable = (\n  props: MessageBarTitleProps,\n  ref: React.Ref<HTMLElement>,\n): MessageBarTitleState => {\n  const { titleId } = useMessageBarContext();\n\n  return {\n    components: {\n      root: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('span', {\n        ref,\n        id: titleId,\n        ...props,\n      }),\n      { elementType: 'span' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMessageBarContext","useMessageBarTitle_unstable","props","ref","titleId","components","root","always","id","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;mCAEtC,mCAAmC;AAWjE,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAE,OAAGJ,uCAAAA;IAEpB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,QAAQ;YAC/BK;YACAK,IAAIJ;YACJ,GAAGF,KAAK;QACV,IACA;YAAEO,aAAa;QAAO;IAE1B;AACF,EAAE"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.js

@@ -0,0 +1,35 @@
+'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, {
+    messageBarTitleClassNames: function() {
+        return messageBarTitleClassNames;
+    },
+    useMessageBarTitleStyles_unstable: function() {
+        return useMessageBarTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const messageBarTitleClassNames = {
+    root: 'fui-MessageBarTitle'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r168xkm9", null, [
+    ".r168xkm9{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);}",
+    ".r168xkm9::after{content:\" \";}"
+]);
+const useMessageBarTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBarTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const messageBarTitleClassNames = {\n    root: 'fui-MessageBarTitle'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n    ...typographyStyles.body1Strong,\n    '::after': {\n        content: '\" \"'\n    }\n});\n/**\n * Apply styling to the MessageBarTitle slots based on the state\n */ export const useMessageBarTitleStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;6BAG0B;;;qCAaY;;;;uBAfJ,gBAAgB;AAEvD,MAAMG,4BAA4B;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,iBAAiB,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAK7B,CAAC;AAGS,MAAMM,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;IAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACzG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js

@@ -0,0 +1,38 @@
+'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, {
+    messageBarTitleClassNames: function() {
+        return messageBarTitleClassNames;
+    },
+    useMessageBarTitleStyles_unstable: function() {
+        return useMessageBarTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarTitleClassNames = {
+    root: 'fui-MessageBarTitle'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.body1Strong,
+    '::after': {
+        content: '" "'
+    }
+});
+const useMessageBarTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\n\nexport const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots> = {\n  root: 'fui-MessageBarTitle',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n  ...typographyStyles.body1Strong,\n  '::after': {\n    content: '\" \"',\n  },\n});\n\n/**\n * Apply styling to the MessageBarTitle slots based on the state\n */\nexport const useMessageBarTitleStyles_unstable = (state: MessageBarTitleState): MessageBarTitleState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","body1Strong","content","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;6BAOaG;;;qCAiBAK;;;;uBAtBiC,iBAAiB;4BAC9B,wBAAwB;AAIlD,MAAML,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,wBAAoBL,sBAAAA,EAAgB;IACxC,GAAGE,4BAAAA,CAAiBI,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAKO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,iBAAiBL;IACvBI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEM,gBAAgBD,MAAML,IAAI,CAACO,SAAS;IAExG,OAAOF;AACT,EAAE"}