feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MessageBar", {
+    enumerable: true,
+    get: function() {
+        return MessageBar;
+    }
+});
+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 _useMessageBar = require("./useMessageBar");
+const _renderMessageBar = require("./renderMessageBar");
+const _useMessageBarStylesstyles = require("./useMessageBarStyles.styles");
+const _useMessageBarContextValues = require("./useMessageBarContextValues");
+const MessageBar = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMessageBar.useMessageBar_unstable)(props, ref);
+    (0, _useMessageBarStylesstyles.useMessageBarStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMessageBarStyles_unstable')(state);
+    return (0, _renderMessageBar.renderMessageBar_unstable)(state, (0, _useMessageBarContextValues.useMessageBarContextValue_unstable)(state));
+});
+MessageBar.displayName = 'MessageBar';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/MessageBar.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 { useMessageBar_unstable } from './useMessageBar';\nimport { renderMessageBar_unstable } from './renderMessageBar';\nimport { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nimport type { MessageBarProps } from './MessageBar.types';\nimport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n\n/**\n * MessageBar component\n */\nexport const MessageBar: ForwardRefComponent<MessageBarProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBar_unstable(props, ref);\n\n  useMessageBarStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarStyles_unstable')(state);\n  return renderMessageBar_unstable(state, useMessageBarContextValue_unstable(state));\n});\n\nMessageBar.displayName = 'MessageBar';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBar_unstable","renderMessageBar_unstable","useMessageBarStyles_unstable","useMessageBarContextValue_unstable","MessageBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;+BACvC,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;4CAEzB,+BAA+B;AAK3E,MAAMM,aAAAA,WAAAA,GAAmDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BT,gDAAAA,EAA4B,gCAAgCS;IAC5D,WAAOP,2CAAAA,EAA0BO,WAAOL,8DAAAA,EAAmCK;AAC7E,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'div'>;\n  /**\n   * Rendered when the component is in multiline layout to guarantee correct spacing even\n   * if no actions are rendered. When actions are rendered, the default actions grid area will render\n   * over this element\n   *\n   * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n   * actions, this is not recommended from an accesibility point of view\n   */\n  bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n  messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n  Pick<Partial<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Default designs announcement presets\n     * @default info\n     */\n    intent?: MessageBarIntent;\n    /**\n     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n     */\n    politeness?: 'assertive' | 'polite';\n    /**\n     * Use squal for page level messages and rounded for component level messages\n     * @default rounded\n     */\n    shape?: 'square' | 'rounded';\n  };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n    /**\n     * @deprecated Code is unused, replaced by motion components\n     */\n    transitionClassName: string;\n  };\n"],"names":[],"mappings":"AA4CA;;CAEC,GACD,WAOI"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getIntentIcon", {
+    enumerable: true,
+    get: function() {
+        return getIntentIcon;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacticons = require("@fluentui/react-icons");
+function getIntentIcon(intent) {
+    switch(intent){
+        case 'info':
+            return /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
+        case 'warning':
+            return /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
+        case 'error':
+            return /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismissFilled, null);
+        case 'success':
+            return /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
+        default:
+            return null;
+    }
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']): JSXElement | null {\n  switch (intent) {\n    case 'info':\n      return <InfoFilled />;\n    case 'warning':\n      return <WarningFilled />;\n    case 'error':\n      return <DiamondDismissFilled />;\n    case 'success':\n      return <CheckmarkCircleFilled />;\n\n    default:\n      return null;\n  }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","DiamondDismissFilled","getIntentIcon","intent"],"mappings":";;;;+BAKgBK;;;;;;;iEALO,QAAQ;4BAEwD,wBAAwB;AAGxG,uBAAuBC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACJ,sBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,yBAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACC,gCAAAA,EAAAA;QACV,KAAK;YACH,OAAA,WAAA,GAAO,OAAA,aAAA,CAACH,iCAAAA,EAAAA;QAEV;YACE,OAAO;IACX;AACF"}

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

@@ -0,0 +1,35 @@
+"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, {
+    MessageBar: function() {
+        return _MessageBar.MessageBar;
+    },
+    messageBarClassNames: function() {
+        return _useMessageBarStylesstyles.messageBarClassNames;
+    },
+    renderMessageBar_unstable: function() {
+        return _renderMessageBar.renderMessageBar_unstable;
+    },
+    useMessageBarContextValue_unstable: function() {
+        return _useMessageBarContextValues.useMessageBarContextValue_unstable;
+    },
+    useMessageBarStyles_unstable: function() {
+        return _useMessageBarStylesstyles.useMessageBarStyles_unstable;
+    },
+    useMessageBar_unstable: function() {
+        return _useMessageBar.useMessageBar_unstable;
+    }
+});
+const _MessageBar = require("./MessageBar");
+const _renderMessageBar = require("./renderMessageBar");
+const _useMessageBar = require("./useMessageBar");
+const _useMessageBarStylesstyles = require("./useMessageBarStyles.styles");
+const _useMessageBarContextValues = require("./useMessageBarContextValues");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAUVG,+CAAoB;;;eAFpBF,2CAAyB;;;eAGzBI,8DAAkC;;;eADZD,uDAA4B;;;eADlDF,qCAAsB;;;4BATJ,eAAe;kCAQA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B;4CAC/C,+BAA+B"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderMessageBar_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderMessageBar_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _messageBarContext = require("../../contexts/messageBarContext");
+const renderMessageBar_unstable = (state, contexts)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_messageBarContext.MessageBarContextProvider, {
+        value: contexts.messageBar,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+            children: [
+                state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
+                state.root.children,
+                state.bottomReflowSpacer && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomReflowSpacer, {})
+            ]
+        })
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/renderMessageBar.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 { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues): JSXElement => {\n  assertSlots<MessageBarSlots>(state);\n\n  return (\n    <MessageBarContextProvider value={contexts.messageBar}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n      </state.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;mCAGd,mCAAmC;AAKtE,kCAAkC,CAACC,OAAwBC;QAChEJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,4CAAAA,EAAAA;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,kBAAkB,EAAA,CAAA;;;;AAI9D,EAAE"}

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

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMessageBar_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMessageBar_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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _getIntentIcon = require("./getIntentIcon");
+const _useMessageBarReflow = require("./useMessageBarReflow");
+const _messageBarTransitionContext = require("../../contexts/messageBarTransitionContext");
+const _reactmotion = require("@fluentui/react-motion");
+const useMessageBar_unstable = (props, ref)=>{
+    const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;
+    const computedPoliteness = (politeness !== null && politeness !== void 0 ? politeness : intent === 'info') ? 'polite' : 'assertive';
+    const autoReflow = layout === 'auto';
+    const { ref: reflowRef, reflowing } = (0, _useMessageBarReflow.useMessageBarReflow)(autoReflow);
+    const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { className: transitionClassName, nodeRef } = (0, _messageBarTransitionContext.useMessageBarTransitionContext)();
+    const motionRef = (0, _reactmotion.useMotionForwardedRef)();
+    const actionsRef = _react.useRef(null);
+    const bodyRef = _react.useRef(null);
+    const { announce } = (0, _reactsharedcontexts.useAnnounce)();
+    const titleId = (0, _reactutilities.useId)();
+    _react.useEffect(()=>{
+        var _bodyRef_current, _actionsRef_current;
+        const bodyMessage = (_bodyRef_current = bodyRef.current) === null || _bodyRef_current === void 0 ? void 0 : _bodyRef_current.textContent;
+        const actionsMessage = (_actionsRef_current = actionsRef.current) === null || _actionsRef_current === void 0 ? void 0 : _actionsRef_current.textContent;
+        const message = [
+            bodyMessage,
+            actionsMessage
+        ].filter(Boolean).join(',');
+        announce(message, {
+            polite: computedPoliteness === 'polite',
+            alert: computedPoliteness === 'assertive'
+        });
+    }, [
+        bodyRef,
+        actionsRef,
+        announce,
+        computedPoliteness
+    ]);
+    return {
+        components: {
+            root: 'div',
+            icon: 'div',
+            bottomReflowSpacer: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref: (0, _reactutilities.useMergedRefs)(ref, reflowRef, nodeRef, motionRef),
+            role: 'group',
+            'aria-labelledby': titleId,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: _reactutilities.slot.optional(props.icon, {
+            renderByDefault: true,
+            elementType: 'div',
+            defaultProps: {
+                children: (0, _getIntentIcon.getIntentIcon)(intent)
+            }
+        }),
+        bottomReflowSpacer: _reactutilities.slot.optional(props.bottomReflowSpacer, {
+            renderByDefault: computedLayout === 'multiline',
+            elementType: 'div'
+        }),
+        layout: computedLayout,
+        intent,
+        transitionClassName,
+        actionsRef,
+        bodyRef,
+        titleId,
+        shape
+    };
+};

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

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMessageBarContextValue_unstable", {
+    enumerable: true,
+    get: function() {
+        return useMessageBarContextValue_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function useMessageBarContextValue_unstable(state) {
+    const { layout, actionsRef, bodyRef, titleId } = state;
+    const messageBarContext = _react.useMemo(()=>({
+            layout,
+            actionsRef,
+            bodyRef,
+            titleId
+        }), [
+        layout,
+        actionsRef,
+        bodyRef,
+        titleId
+    ]);
+    return {
+        messageBar: messageBarContext
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBar/useMessageBarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarContextValues, MessageBarState } from './MessageBar.types';\n\nexport function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {\n  const { layout, actionsRef, bodyRef, titleId } = state;\n\n  const messageBarContext = React.useMemo(\n    () => ({\n      layout,\n      actionsRef,\n      bodyRef,\n      titleId,\n    }),\n    [layout, actionsRef, bodyRef, titleId],\n  );\n\n  return {\n    messageBar: messageBarContext,\n  };\n}\n"],"names":["React","useMessageBarContextValue_unstable","state","layout","actionsRef","bodyRef","titleId","messageBarContext","useMemo","messageBar"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,OAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}

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

@@ -0,0 +1,95 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMessageBarReflow", {
+    enumerable: true,
+    get: function() {
+        return useMessageBarReflow;
+    }
+});
+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 _reactutilities = require("@fluentui/react-utilities");
+function useMessageBarReflow(enabled = false) {
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const forceUpdate = _react.useReducer(()=>({}), {})[1];
+    const reflowingRef = _react.useRef(false);
+    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
+    const resizeObserverRef = _react.useRef(null);
+    const prevInlineSizeRef = _react.useRef(-1);
+    const handleResize = _react.useCallback((entries)=>{
+        var _entry_borderBoxSize_, _entry_borderBoxSize;
+        // Resize observer is only owned by this component - one resize observer entry expected
+        // No need to support multiple fragments - one border box entry expected
+        if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
+            // eslint-disable-next-line no-console
+            console.error([
+                'useMessageBarReflow: Resize observer should only have one entry. ',
+                'If multiple entries are observed, the first entry will be used.',
+                'This is a bug, please report it to the Fluent UI team.'
+            ].join(' '));
+        }
+        const entry = entries[0];
+        var _entry_borderBoxSize__inlineSize;
+        // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
+        const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
+        if (inlineSize === undefined || !entry) {
+            return;
+        }
+        const { target } = entry;
+        if (!(0, _reactutilities.isHTMLElement)(target)) {
+            return;
+        }
+        let nextReflowing;
+        // No easy way to really determine when the single line layout will fit
+        // Just keep try to set single line layout as long as the size is growing
+        // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
+        if (reflowingRef.current) {
+            if (prevInlineSizeRef.current < inlineSize) {
+                nextReflowing = false;
+            }
+        } else {
+            const scrollWidth = target.scrollWidth;
+            if (inlineSize < scrollWidth) {
+                nextReflowing = true;
+            }
+        }
+        prevInlineSizeRef.current = inlineSize;
+        if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
+            reflowingRef.current = nextReflowing;
+            forceUpdate();
+        }
+    }, [
+        forceUpdate
+    ]);
+    const ref = _react.useCallback((el)=>{
+        var _resizeObserverRef_current;
+        if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
+            return;
+        }
+        (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
+        const win = targetDocument.defaultView;
+        const resizeObserver = new win.ResizeObserver(handleResize);
+        resizeObserverRef.current = resizeObserver;
+        resizeObserver.observe(el, {
+            box: 'border-box'
+        });
+    }, [
+        targetDocument,
+        handleResize,
+        enabled
+    ]);
+    _react.useEffect(()=>{
+        return ()=>{
+            var _resizeObserverRef_current;
+            (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
+        };
+    }, []);
+    return {
+        ref,
+        reflowing: reflowingRef.current
+    };
+}

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js

@@ -0,0 +1,175 @@
+'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, {
+    messageBarClassNames: function() {
+        return messageBarClassNames;
+    },
+    useMessageBarStyles_unstable: function() {
+        return useMessageBarStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const messageBarClassNames = {
+    root: 'fui-MessageBar',
+    icon: 'fui-MessageBar__icon',
+    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
+};
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r2oyxsj", "r1wuyrhw", [
+    ".r2oyxsj{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-left:var(--spacingHorizontalM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}",
+    ".r1wuyrhw{white-space:nowrap;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-rows:1fr;grid-template-areas:\"icon body secondaryActions actions\";padding-right:var(--spacingHorizontalM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}"
+]);
+const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1df1z33", "rivnfjc", [
+    ".r1df1z33{grid-area:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}",
+    ".rivnfjc{grid-area:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}"
+]);
+const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1vx593n", null, [
+    ".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    rootMultiline: {
+        Huce71: "f6juhto",
+        Bt984gj: "f1s2louj",
+        z8tnut: "f1ngh7ph",
+        Budl1dq: "f17g0uqy",
+        zoa1oz: "f1w7oly7"
+    },
+    secondaryActionsMultiline: {
+        Brf1p80: "f1e8xxv9",
+        B6of3ja: "f1gaxbfw",
+        jrapky: "fqcjy3b",
+        t21cq0: [
+            "fibjyge",
+            "f9yszdx"
+        ]
+    },
+    square: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fokr779"
+    }
+}, {
+    d: [
+        ".f6juhto{white-space:normal;}",
+        ".f1s2louj{align-items:start;}",
+        ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
+        ".f17g0uqy{grid-template-columns:auto 1fr auto;}",
+        ".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}",
+        ".f1e8xxv9{justify-content:end;}",
+        ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}",
+        ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}",
+        ".fibjyge{margin-right:0px;}",
+        ".f9yszdx{margin-left:0px;}",
+        [
+            ".fokr779{border-radius:0;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useIconIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
+    info: {},
+    error: {
+        sj55zd: "f1ca9wz"
+    },
+    warning: {
+        sj55zd: "f14a4cve"
+    },
+    success: {
+        sj55zd: "f36rra6"
+    }
+}, {
+    d: [
+        ".f1ca9wz{color:var(--colorStatusDangerForeground1);}",
+        ".f14a4cve{color:var(--colorStatusWarningForeground3);}",
+        ".f36rra6{color:var(--colorStatusSuccessForeground1);}"
+    ]
+});
+const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
+    info: {},
+    error: {
+        De3pzq: "f1eon7jj",
+        g2u3we: "f1f8dvr7",
+        h3c5rm: [
+            "f1g1ijmo",
+            "f1nxacbt"
+        ],
+        B9xav0g: "fo25q1j",
+        zhjwy3: [
+            "f1nxacbt",
+            "f1g1ijmo"
+        ]
+    },
+    warning: {
+        De3pzq: "f13ftzij",
+        g2u3we: "frd1ypx",
+        h3c5rm: [
+            "f1gyjrma",
+            "f18qd5xz"
+        ],
+        B9xav0g: "fqyqtrt",
+        zhjwy3: [
+            "f18qd5xz",
+            "f1gyjrma"
+        ]
+    },
+    success: {
+        De3pzq: "f64thcm",
+        g2u3we: "f1b4u7v",
+        h3c5rm: [
+            "f1nyd2b1",
+            "f70v3om"
+        ],
+        B9xav0g: "fk173vo",
+        zhjwy3: [
+            "f70v3om",
+            "f1nyd2b1"
+        ]
+    }
+}, {
+    d: [
+        ".f1eon7jj{background-color:var(--colorStatusDangerBackground1);}",
+        ".f1f8dvr7{border-top-color:var(--colorStatusDangerBorder1);}",
+        ".f1g1ijmo{border-right-color:var(--colorStatusDangerBorder1);}",
+        ".f1nxacbt{border-left-color:var(--colorStatusDangerBorder1);}",
+        ".fo25q1j{border-bottom-color:var(--colorStatusDangerBorder1);}",
+        ".f13ftzij{background-color:var(--colorStatusWarningBackground1);}",
+        ".frd1ypx{border-top-color:var(--colorStatusWarningBorder1);}",
+        ".f1gyjrma{border-right-color:var(--colorStatusWarningBorder1);}",
+        ".f18qd5xz{border-left-color:var(--colorStatusWarningBorder1);}",
+        ".fqyqtrt{border-bottom-color:var(--colorStatusWarningBorder1);}",
+        ".f64thcm{background-color:var(--colorStatusSuccessBackground1);}",
+        ".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}",
+        ".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}",
+        ".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}",
+        ".fk173vo{border-bottom-color:var(--colorStatusSuccessBorder1);}"
+    ]
+});
+const useMessageBarStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const iconIntentStyles = useIconIntentStyles();
+    const rootIntentStyles = useRootIntentStyles();
+    const reflowSpacerStyles = useReflowSpacerBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
+    }
+    if (state.bottomReflowSpacer) {
+        state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
+    }
+    return state;
+};

node_modules/@fluentui/react-message-bar/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.js

@@ -0,0 +1,117 @@
+'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, {
+    messageBarClassNames: function() {
+        return messageBarClassNames;
+    },
+    useMessageBarStyles_unstable: function() {
+        return useMessageBarStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarClassNames = {
+    root: 'fui-MessageBar',
+    icon: 'fui-MessageBar__icon',
+    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    whiteSpace: 'nowrap',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto auto',
+    gridTemplateRows: '1fr',
+    gridTemplateAreas: '"icon body secondaryActions actions"',
+    paddingLeft: _reacttheme.tokens.spacingHorizontalM,
+    border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    alignItems: 'center',
+    minHeight: '36px',
+    boxSizing: 'border-box',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+});
+const useIconBaseStyles = (0, _react.makeResetStyles)({
+    gridArea: 'icon',
+    fontSize: _reacttheme.tokens.fontSizeBase500,
+    marginRight: _reacttheme.tokens.spacingHorizontalS,
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    display: 'flex',
+    alignItems: 'center'
+});
+const useReflowSpacerBaseStyles = (0, _react.makeResetStyles)({
+    marginBottom: _reacttheme.tokens.spacingVerticalS,
+    gridArea: 'secondaryActions'
+});
+const useStyles = (0, _react.makeStyles)({
+    rootMultiline: {
+        whiteSpace: 'normal',
+        alignItems: 'start',
+        paddingTop: _reacttheme.tokens.spacingVerticalMNudge,
+        gridTemplateColumns: 'auto 1fr auto',
+        gridTemplateAreas: `
+      "icon body actions"
+      "secondaryActions secondaryActions secondaryActions"
+    `
+    },
+    secondaryActionsMultiline: {
+        justifyContent: 'end',
+        marginTop: _reacttheme.tokens.spacingVerticalMNudge,
+        marginBottom: _reacttheme.tokens.spacingVerticalS,
+        marginRight: '0px'
+    },
+    square: {
+        borderRadius: '0'
+    }
+});
+const useIconIntentStyles = (0, _react.makeStyles)({
+    info: {},
+    error: {
+        color: _reacttheme.tokens.colorStatusDangerForeground1
+    },
+    warning: {
+        color: _reacttheme.tokens.colorStatusWarningForeground3
+    },
+    success: {
+        color: _reacttheme.tokens.colorStatusSuccessForeground1
+    }
+});
+const useRootIntentStyles = (0, _react.makeStyles)({
+    info: {},
+    error: {
+        backgroundColor: _reacttheme.tokens.colorStatusDangerBackground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusDangerBorder1)
+    },
+    warning: {
+        backgroundColor: _reacttheme.tokens.colorStatusWarningBackground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusWarningBorder1)
+    },
+    success: {
+        backgroundColor: _reacttheme.tokens.colorStatusSuccessBackground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorStatusSuccessBorder1)
+    }
+});
+const useMessageBarStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const iconBaseStyles = useIconBaseStyles();
+    const iconIntentStyles = useIconIntentStyles();
+    const rootIntentStyles = useRootIntentStyles();
+    const reflowSpacerStyles = useReflowSpacerBaseStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
+    }
+    if (state.bottomReflowSpacer) {
+        state.bottomReflowSpacer.className = (0, _react.mergeClasses)(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
+    }
+    return state;
+};