feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useMessageBar_unstable } from './useMessageBar';
+import { renderMessageBar_unstable } from './renderMessageBar';
+import { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
+import { useMessageBarContextValue_unstable } from './useMessageBarContextValues';
+/**
+ * MessageBar component
+ */ export const MessageBar = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMessageBar_unstable(props, ref);
+    useMessageBarStyles_unstable(state);
+    useCustomStyleHook_unstable('useMessageBarStyles_unstable')(state);
+    return renderMessageBar_unstable(state, useMessageBarContextValue_unstable(state));
+});
+MessageBar.displayName = 'MessageBar';

node_modules/@fluentui/react-message-bar/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,kCAAkC,QAAQ,+BAA+B;AAElF;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BT,4BAA4B,gCAAgCS;IAC5D,OAAOP,0BAA0BO,OAAOL,mCAAmCK;AAC7E,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-message-bar/lib/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/components/MessageBar/getIntentIcon.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';
+export function getIntentIcon(intent) {
+    switch(intent){
+        case 'info':
+            return /*#__PURE__*/ React.createElement(InfoFilled, null);
+        case 'warning':
+            return /*#__PURE__*/ React.createElement(WarningFilled, null);
+        case 'error':
+            return /*#__PURE__*/ React.createElement(DiamondDismissFilled, null);
+        case 'success':
+            return /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);
+        default:
+            return null;
+    }
+}

node_modules/@fluentui/react-message-bar/lib/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":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,oBAAoB,QAAQ,wBAAwB;AAG/G,OAAO,SAASC,cAAcC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,qBAAO,oBAACJ;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACH;QAEV;YACE,OAAO;IACX;AACF"}

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

@@ -0,0 +1,5 @@
+export { MessageBar } from './MessageBar';
+export { renderMessageBar_unstable } from './renderMessageBar';
+export { useMessageBar_unstable } from './useMessageBar';
+export { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
+export { useMessageBarContextValue_unstable } from './useMessageBarContextValues';

node_modules/@fluentui/react-message-bar/lib/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":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B;AAClG,SAASC,kCAAkC,QAAQ,+BAA+B"}

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

@@ -0,0 +1,18 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { MessageBarContextProvider } from '../../contexts/messageBarContext';
+/**
+ * Render the final JSX of MessageBar
+ */ export const renderMessageBar_unstable = (state, contexts)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(MessageBarContextProvider, {
+        value: contexts.messageBar,
+        children: /*#__PURE__*/ _jsxs(state.root, {
+            children: [
+                state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+                state.root.children,
+                state.bottomReflowSpacer && /*#__PURE__*/ _jsx(state.bottomReflowSpacer, {})
+            ]
+        })
+    });
+};

node_modules/@fluentui/react-message-bar/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAE7B,qBACE,KAACF;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,kBAAI,KAACP,MAAMO,kBAAkB;;;;AAI9D,EAAE"}

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

@@ -0,0 +1,81 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { useAnnounce } from '@fluentui/react-shared-contexts';
+import { getIntentIcon } from './getIntentIcon';
+import { useMessageBarReflow } from './useMessageBarReflow';
+import { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';
+import { useMotionForwardedRef } from '@fluentui/react-motion';
+/**
+ * Create the state required to render MessageBar.
+ *
+ * The returned state can be modified with hooks such as useMessageBarStyles_unstable,
+ * before being passed to renderMessageBar_unstable.
+ *
+ * @param props - props from this instance of MessageBar
+ * @param ref - reference to root HTMLElement of MessageBar
+ */ export 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 } = useMessageBarReflow(autoReflow);
+    const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
+    const motionRef = useMotionForwardedRef();
+    const actionsRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const { announce } = useAnnounce();
+    const titleId = 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: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, reflowRef, nodeRef, motionRef),
+            role: 'group',
+            'aria-labelledby': titleId,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: slot.optional(props.icon, {
+            renderByDefault: true,
+            elementType: 'div',
+            defaultProps: {
+                children: getIntentIcon(intent)
+            }
+        }),
+        bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {
+            renderByDefault: computedLayout === 'multiline',
+            elementType: 'div'
+        }),
+        layout: computedLayout,
+        intent,
+        transitionClassName,
+        actionsRef,
+        bodyRef,
+        titleId,
+        shape
+    };
+};

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

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+export 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/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;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,MAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}

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

@@ -0,0 +1,84 @@
+'use client';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { isHTMLElement } from '@fluentui/react-utilities';
+export function useMessageBarReflow(enabled = false) {
+    const { targetDocument } = useFluent();
+    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 (!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/components/MessageBar/useMessageBarStyles.styles.js

@@ -0,0 +1,99 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const messageBarClassNames = {
+  root: 'fui-MessageBar',
+  icon: 'fui-MessageBar__icon',
+  bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
+};
+const useRootBaseStyles = /*#__PURE__*/__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__*/__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__*/__resetStyles("r1vx593n", null, [".r1vx593n{margin-bottom:var(--spacingVerticalS);grid-area:secondaryActions;}"]);
+const useStyles = /*#__PURE__*/__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__*/__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__*/__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);}"]
+});
+/**
+ * Apply styling to the MessageBar slots based on the state
+ */
+export 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 = 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 = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
+  }
+  if (state.bottomReflowSpacer) {
+    state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);
+  }
+  return state;
+};

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

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