@fluentui/react-message-bar 0.0.0-nightly-20231013-0415.1

package/lib/MessageBarBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBarBody.ts"],"sourcesContent":["export * from './components/MessageBarBody/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/MessageBarGroup.js

@@ -0,0 +1 @@
+export * from './components/MessageBarGroup/index';

package/lib/MessageBarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBarGroup.ts"],"sourcesContent":["export * from './components/MessageBarGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/MessageBarTitle.js

@@ -0,0 +1 @@
+export * from './components/MessageBarTitle/index';

package/lib/MessageBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBarTitle.ts"],"sourcesContent":["export * from './components/MessageBarTitle/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}

package/lib/components/MessageBar/MessageBar.js

@@ -0,0 +1,15 @@
+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';

package/lib/components/MessageBar/MessageBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBar.tsx"],"sourcesContent":["import * 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,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"}

package/lib/components/MessageBar/MessageBar.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/MessageBar/MessageBar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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\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    transitionClassName: string;\n  };\n"],"names":[],"mappings":"AAAA,WA0CI"}

package/lib/components/MessageBar/getIntentIcon.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CheckmarkCircleFilled, InfoFilled, WarningFilled, ErrorCircleFilled } 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(ErrorCircleFilled, null);
+        case 'success':
+            return /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);
+        default:
+            return null;
+    }
+}

package/lib/components/MessageBar/getIntentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, ErrorCircleFilled } from '@fluentui/react-icons';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']) {\n  switch (intent) {\n    case 'info':\n      return <InfoFilled />;\n    case 'warning':\n      return <WarningFilled />;\n    case 'error':\n      return <ErrorCircleFilled />;\n    case 'success':\n      return <CheckmarkCircleFilled />;\n\n    default:\n      return null;\n  }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","ErrorCircleFilled","getIntentIcon","intent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,wBAAwB;AAE5G,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"}

package/lib/components/MessageBar/index.js

@@ -0,0 +1,5 @@
+export * from './MessageBar';
+export * from './MessageBar.types';
+export * from './renderMessageBar';
+export * from './useMessageBar';
+export * from './useMessageBarStyles.styles';

package/lib/components/MessageBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './MessageBar';\nexport * from './MessageBar.types';\nexport * from './renderMessageBar';\nexport * from './useMessageBar';\nexport * from './useMessageBarStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/MessageBar/renderMessageBar.js

@@ -0,0 +1,17 @@
+  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
+            ]
+        })
+    });
+};

package/lib/components/MessageBar/renderMessageBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,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;;;;AAI5B,EAAE"}

package/lib/components/MessageBar/useMessageBar.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { useAnnounce_unstable } from '@fluentui/react-shared-contexts';
+import { getIntentIcon } from './getIntentIcon';
+import { useMessageBarReflow } from './useMessageBarReflow';
+import { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';
+/**
+ * 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;
+    const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
+    const actionsRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const { announce } = useAnnounce_unstable();
+    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'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, reflowRef, nodeRef),
+            role: 'group',
+            'aria-labelledby': titleId,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        icon: slot.optional(props.icon, {
+            renderByDefault: true,
+            elementType: 'div',
+            defaultProps: {
+                children: getIntentIcon(intent)
+            }
+        }),
+        layout: computedLayout,
+        intent,
+        transitionClassName,
+        actionsRef,
+        bodyRef,
+        titleId,
+        shape
+    };
+};

package/lib/components/MessageBar/useMessageBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce_unstable } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n  const actionsRef = React.useRef<HTMLDivElement | null>(null);\n  const bodyRef = React.useRef<HTMLDivElement | null>(null);\n  const { announce } = useAnnounce_unstable();\n  const titleId = useId();\n\n  React.useEffect(() => {\n    const bodyMessage = bodyRef.current?.textContent;\n    const actionsMessage = actionsRef.current?.textContent;\n\n    const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n    announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n  }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, reflowRef, nodeRef),\n        role: 'group',\n        'aria-labelledby': titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\n      defaultProps: { children: getIntentIcon(intent) },\n    }),\n    layout: computedLayout,\n    intent,\n    transitionClassName,\n    actionsRef,\n    bodyRef,\n    titleId,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce_unstable","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","always","role","elementType","optional","renderByDefault","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,oBAAoB,QAAQ,kCAAkC;AAEvE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMvC,KAAKyC,MAAM,CACf1C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCqB,MAAM;YACN,mBAAmBhB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEmC,aAAa;QAAM;QAGvBH,MAAMxC,KAAK4C,QAAQ,CAACpC,MAAMgC,IAAI,EAAE;YAC9BK,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU3C,cAAcO;YAAQ;QAClD;QACAD,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}

package/lib/components/MessageBar/useMessageBarContextValues.js

@@ -0,0 +1,18 @@
+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
+    };
+}

package/lib/components/MessageBar/useMessageBarContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBarContextValues.ts"],"sourcesContent":["import * 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,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"}

package/lib/components/MessageBar/useMessageBarReflow.js

@@ -0,0 +1,80 @@
+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);
+    const resizeObserverRef = React.useRef(null);
+    const prevInlineSizeRef = React.useRef(-1);
+    const handleResize = React.useCallback((entries)=>{
+        // 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];
+        const borderBoxSize = entry === null || entry === void 0 ? void 0 : entry.borderBoxSize[0];
+        if (!borderBoxSize || !entry) {
+            return;
+        }
+        const { inlineSize } = borderBoxSize;
+        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
+    };
+}

package/lib/components/MessageBar/useMessageBarReflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n  const { targetDocument } = useFluent();\n  const forceUpdate = React.useReducer(() => ({}), {})[1];\n  const reflowingRef = React.useRef(false);\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n  const prevInlineSizeRef = React.useRef(-1);\n\n  const handleResize: ResizeObserverCallback = React.useCallback(\n    entries => {\n      // Resize observer is only owned by this component - one resize observer entry expected\n      // No need to support multiple fragments - one border box entry expected\n      if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            'useMessageBarReflow: Resize observer should only have one entry. ',\n            'If multiple entries are observed, the first entry will be used.',\n            'This is a bug, please report it to the Fluent UI team.',\n          ].join(' '),\n        );\n      }\n\n      const entry = entries[0];\n      const borderBoxSize = entry?.borderBoxSize[0];\n      if (!borderBoxSize || !entry) {\n        return;\n      }\n\n      const { inlineSize } = borderBoxSize;\n      const { target } = entry;\n\n      if (!isHTMLElement(target)) {\n        return;\n      }\n\n      let nextReflowing: boolean | undefined;\n\n      // No easy way to really determine when the single line layout will fit\n      // Just keep try to set single line layout as long as the size is growing\n      // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n      if (reflowingRef.current) {\n        if (prevInlineSizeRef.current < inlineSize) {\n          nextReflowing = false;\n        }\n      } else {\n        const scrollWidth = target.scrollWidth;\n        if (inlineSize < scrollWidth) {\n          nextReflowing = true;\n        }\n      }\n\n      prevInlineSizeRef.current = inlineSize;\n      if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n        reflowingRef.current = nextReflowing;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  const ref = React.useCallback(\n    (el: HTMLElement | null) => {\n      if (!enabled || !el || !targetDocument?.defaultView) {\n        return;\n      }\n\n      resizeObserverRef.current?.disconnect();\n\n      const win = targetDocument.defaultView;\n      const resizeObserver = new win.ResizeObserver(handleResize);\n      resizeObserverRef.current = resizeObserver;\n      resizeObserver.observe(el, { box: 'border-box' });\n    },\n    [targetDocument, handleResize, enabled],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserverRef.current?.disconnect();\n    };\n  }, []);\n\n  return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","process","env","NODE_ENV","length","console","error","join","entry","borderBoxSize","inlineSize","target","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,cAAcP,MAAMQ,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeT,MAAMU,MAAM,CAAC;IAClC,MAAMC,oBAAoBX,MAAMU,MAAM,CAAwB;IAC9D,MAAME,oBAAoBZ,MAAMU,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCb,MAAMc,WAAW,CAC5DC,CAAAA;QACE,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBH,QAAQI,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,MAAMC,QAAQR,OAAO,CAAC,EAAE;QACxB,MAAMS,gBAAgBD,kBAAAA,4BAAAA,MAAOC,aAAa,CAAC,EAAE;QAC7C,IAAI,CAACA,iBAAiB,CAACD,OAAO;YAC5B;QACF;QAEA,MAAM,EAAEE,UAAU,EAAE,GAAGD;QACvB,MAAM,EAAEE,MAAM,EAAE,GAAGH;QAEnB,IAAI,CAACpB,cAAcuB,SAAS;YAC1B;QACF;QAEA,IAAIC;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,IAAIlB,aAAamB,OAAO,EAAE;YACxB,IAAIhB,kBAAkBgB,OAAO,GAAGH,YAAY;gBAC1CE,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,cAAcH,OAAOG,WAAW;YACtC,IAAIJ,aAAaI,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;QAEAf,kBAAkBgB,OAAO,GAAGH;QAC5B,IAAI,OAAOE,kBAAkB,eAAelB,aAAamB,OAAO,KAAKD,eAAe;YAClFlB,aAAamB,OAAO,GAAGD;YACvBpB;QACF;IACF,GACA;QAACA;KAAY;IAGf,MAAMuB,MAAM9B,MAAMc,WAAW,CAC3B,CAACiB;YAKCpB;QAJA,IAAI,CAACN,WAAW,CAAC0B,MAAM,EAACzB,2BAAAA,qCAAAA,eAAgB0B,WAAW,GAAE;YACnD;QACF;SAEArB,6BAAAA,kBAAkBiB,OAAO,cAAzBjB,iDAAAA,2BAA2BsB,UAAU;QAErC,MAAMC,MAAM5B,eAAe0B,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,CAACvB;QAC9CF,kBAAkBiB,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;QAAChC;QAAgBO;QAAcR;KAAQ;IAGzCL,MAAMuC,SAAS,CAAC;QACd,OAAO;gBACL5B;aAAAA,6BAAAA,kBAAkBiB,OAAO,cAAzBjB,iDAAAA,2BAA2BsB,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,WAAW/B,aAAamB,OAAO;IAAC;AAChD"}

package/lib/components/MessageBar/useMessageBarStyles.styles.js

@@ -0,0 +1,87 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const messageBarClassNames = {
+  root: 'fui-MessageBar',
+  icon: 'fui-MessageBar__icon'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("rashqx", "ri1c0vc", [".rashqx{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-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}", ".ri1c0vc{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-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorNeutralStroke1);border-left-color:var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStroke1);border-right-color:var(--colorNeutralStroke1);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--colorNeutralBackground3);}"]);
+const useIconBaseStyles = /*#__PURE__*/__resetStyles("r1bxgyar", "rv8i6h8", [".r1bxgyar{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-right:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}", ".rv8i6h8{grid-row-start:icon;grid-column-start:icon;grid-row-end:icon;grid-column-end:icon;font-size:var(--fontSizeBase500);margin-left:var(--spacingHorizontalS);color:var(--colorNeutralForeground3);display:flex;align-items:center;}"]);
+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: {
+    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
+    Beyfa6y: ["f1deotkl", "f1krrbdw"],
+    B7oj6ja: ["f10ostut", "f1ozlkrg"],
+    Btl43ni: ["f1ozlkrg", "f10ostut"]
+  }
+}, {
+  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;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}"]
+});
+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 => {
+  const rootBaseStyles = useRootBaseStyles();
+  const iconBaseStyles = useIconBaseStyles();
+  const iconIntentStyles = useIconIntentStyles();
+  const rootIntentStyles = useRootIntentStyles();
+  const styles = useStyles();
+  state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useMessageBarStyles.styles.js.map

package/lib/components/MessageBar/useMessageBarStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","useRootBaseStyles","useIconBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","d","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","styles","className","layout","shape","intent","transitionClassName"],"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n    root: 'fui-MessageBar',\n    icon: 'fui-MessageBar__icon'\n};\nconst useRootBaseStyles = makeResetStyles({\n    whiteSpace: 'nowrap',\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto auto',\n    gridTemplateRows: '1fr',\n    gridTemplateAreas: '\"icon body secondaryActions actions\"',\n    paddingLeft: tokens.spacingHorizontalM,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    alignItems: 'center',\n    minHeight: '36px',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n    ...shorthands.gridArea('icon'),\n    fontSize: tokens.fontSizeBase500,\n    marginRight: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useStyles = makeStyles({\n    rootMultiline: {\n        whiteSpace: 'normal',\n        alignItems: 'start',\n        paddingTop: tokens.spacingVerticalMNudge,\n        gridTemplateColumns: 'auto 1fr auto',\n        gridTemplateAreas: `\n      \"icon body actions\"\n      \"secondaryActions secondaryActions secondaryActions\"\n    `\n    },\n    secondaryActionsMultiline: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px'\n    },\n    square: {\n        ...shorthands.borderRadius(0)\n    }\n});\nconst useIconIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        color: tokens.colorStatusDangerForeground1\n    },\n    warning: {\n        color: tokens.colorStatusWarningForeground3\n    },\n    success: {\n        color: tokens.colorStatusSuccessForeground1\n    }\n});\nconst useRootIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        backgroundColor: tokens.colorStatusDangerBackground1,\n        ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n    },\n    warning: {\n        backgroundColor: tokens.colorStatusWarningBackground1,\n        ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n    },\n    success: {\n        backgroundColor: tokens.colorStatusSuccessBackground1,\n        ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n    }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconIntentStyles = useIconIntentStyles();\n    const rootIntentStyles = useRootIntentStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGR,aAAA,45DAazB,CAAC;AACF,MAAMS,iBAAiB,gBAAGT,aAAA,kfAOzB,CAAC;AACF,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,yBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG3B,QAAA;EAAA4B,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMO,mBAAmB,gBAAGjC,QAAA;EAAA4B,IAAA;EAAAC,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,OAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,cAAc,GAAGlC,iBAAiB,CAAC,CAAC;EAC1C,MAAMmC,cAAc,GAAGlC,iBAAiB,CAAC,CAAC;EAC1C,MAAMmC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,MAAM,GAAGpC,SAAS,CAAC,CAAC;EAC1B+B,KAAK,CAACnC,IAAI,CAACyC,SAAS,GAAG7C,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEoC,cAAc,EAAED,KAAK,CAACO,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACnC,aAAa,EAAE8B,KAAK,CAACQ,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAACxB,MAAM,EAAEuB,gBAAgB,CAACJ,KAAK,CAACS,MAAM,CAAC,EAAET,KAAK,CAACU,mBAAmB,EAAEV,KAAK,CAACnC,IAAI,CAACyC,SAAS,CAAC;EAChQ,IAAIN,KAAK,CAAClC,IAAI,EAAE;IACZkC,KAAK,CAAClC,IAAI,CAACwC,SAAS,GAAG7C,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEoC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACS,MAAM,CAAC,EAAET,KAAK,CAAClC,IAAI,CAACwC,SAAS,CAAC;EACxI;EACA,OAAON,KAAK;AAChB,CAAC"}

package/lib/components/MessageBarActions/MessageBarActions.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useMessageBarActions_unstable } from './useMessageBarActions';
+import { renderMessageBarActions_unstable } from './renderMessageBarActions';
+import { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';
+import { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';
+/**
+ * MessageBarActions component
+ */ export const MessageBarActions = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMessageBarActions_unstable(props, ref);
+    useMessageBarActionsStyles_unstable(state);
+    useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);
+    return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());
+});
+MessageBarActions.displayName = 'MessageBarActions';

package/lib/components/MessageBarActions/MessageBarActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBarActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarActions_unstable(props, ref);\n\n  useMessageBarActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n  return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAE1F,SAASC,yCAAyC,QAAQ,sCAAsC;AAEhG;;CAEC,GACD,OAAO,MAAMC,kCAAiEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCT,4BAA4B,uCAAuCS;IACnE,OAAOP,iCAAiCO,OAAOL;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}

package/lib/components/MessageBarActions/MessageBarActions.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/MessageBarActions/MessageBarActions.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageBarActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarActionsSlots = {\n  root: Slot<'div'>;\n  /**\n   * Generally the 'Dismiss' button for the MessageBar\n   */\n  containerAction?: Slot<'div'>;\n};\n\nexport type MessageBarActionsContextValues = {\n  button: ButtonContextValue;\n};\n\n/**\n * MessageBarActions Props\n */\nexport type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;\n\n/**\n * State used in rendering MessageBarActions\n */\nexport type MessageBarActionsState = ComponentState<MessageBarActionsSlots> &\n  Pick<Required<MessageBarContextValue>, 'layout'>;\n"],"names":[],"mappings":"AAAA,WAyBmD"}

package/lib/components/MessageBarActions/index.js

@@ -0,0 +1,5 @@
+export * from './MessageBarActions';
+export * from './MessageBarActions.types';
+export * from './renderMessageBarActions';
+export * from './useMessageBarActions';
+export * from './useMessageBarActionsStyles.styles';

package/lib/components/MessageBarActions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './MessageBarActions';\nexport * from './MessageBarActions.types';\nexport * from './renderMessageBarActions';\nexport * from './useMessageBarActions';\nexport * from './useMessageBarActionsStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,yBAAyB;AACvC,cAAc,sCAAsC"}

package/lib/components/MessageBarActions/renderMessageBarActions.js

@@ -0,0 +1,24 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of MessageBarActions
+ */ export const renderMessageBarActions_unstable = (state, contexts)=>{
+    assertSlots(state);
+    if (state.layout === 'multiline') {
+        return /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+            value: contexts.button,
+            children: [
+                state.containerAction && /*#__PURE__*/ _jsx(state.containerAction, {}),
+                /*#__PURE__*/ _jsx(state.root, {})
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+        value: contexts.button,
+        children: [
+            /*#__PURE__*/ _jsx(state.root, {}),
+            state.containerAction && /*#__PURE__*/ _jsx(state.containerAction, {})
+        ]
+    });
+};

package/lib/components/MessageBarActions/renderMessageBarActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderMessageBarActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  MessageBarActionsState,\n  MessageBarActionsSlots,\n  MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n  state: MessageBarActionsState,\n  contexts: MessageBarActionsContextValues,\n) => {\n  assertSlots<MessageBarActionsSlots>(state);\n  if (state.layout === 'multiline') {\n    return (\n      <ButtonContextProvider value={contexts.button}>\n        {state.containerAction && <state.containerAction />}\n        <state.root />\n      </ButtonContextProvider>\n    );\n  }\n\n  return (\n    <ButtonContextProvider value={contexts.button}>\n      <state.root />\n      {state.containerAction && <state.containerAction />}\n    </ButtonContextProvider>\n  );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderMessageBarActions_unstable","state","contexts","layout","value","button","containerAction","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEAJ,YAAoCG;IACpC,IAAIA,MAAME,MAAM,KAAK,aAAa;QAChC,qBACE,MAACJ;YAAsBK,OAAOF,SAASG,MAAM;;gBAC1CJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe;8BAChD,KAACL,MAAMM,IAAI;;;IAGjB;IAEA,qBACE,MAACR;QAAsBK,OAAOF,SAASG,MAAM;;0BAC3C,KAACJ,MAAMM,IAAI;YACVN,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe;;;AAGtD,EAAE"}

package/lib/components/MessageBarActions/useMessageBarActions.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useMessageBarContext } from '../../contexts/messageBarContext';
+/**
+ * Create the state required to render MessageBarActions.
+ *
+ * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,
+ * before being passed to renderMessageBarActions_unstable.
+ *
+ * @param props - props from this instance of MessageBarActions
+ * @param ref - reference to root HTMLElement of MessageBarActions
+ */ export const useMessageBarActions_unstable = (props, ref)=>{
+    const { layout = 'singleline', actionsRef } = useMessageBarContext();
+    return {
+        components: {
+            root: 'div',
+            containerAction: 'div'
+        },
+        containerAction: slot.optional(props.containerAction, {
+            renderByDefault: false,
+            elementType: 'div'
+        }),
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, actionsRef),
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        layout
+    };
+};

package/lib/components/MessageBarActions/useMessageBarActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBarActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarActions.\n *\n * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,\n * before being passed to renderMessageBarActions_unstable.\n *\n * @param props - props from this instance of MessageBarActions\n * @param ref - reference to root HTMLElement of MessageBarActions\n */\nexport const useMessageBarActions_unstable = (\n  props: MessageBarActionsProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarActionsState => {\n  const { layout = 'singleline', actionsRef } = useMessageBarContext();\n  return {\n    components: {\n      root: 'div',\n      containerAction: 'div',\n    },\n    containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, actionsRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    layout,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarActions_unstable","props","ref","layout","actionsRef","components","root","containerAction","optional","renderByDefault","elementType","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,SAAS,YAAY,EAAEC,UAAU,EAAE,GAAGL;IAC9C,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,iBAAiB;QACnB;QACAA,iBAAiBV,KAAKW,QAAQ,CAACP,MAAMM,eAAe,EAAE;YAAEE,iBAAiB;YAAOC,aAAa;QAAM;QACnGJ,MAAMT,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BM,KAAKJ,cAAcI,KAAKE;YACxB,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP;IACF;AACF,EAAE"}

package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export function useMessageBarActionsContextValue_unstable() {
+    const buttonContext = React.useMemo(()=>({
+            size: 'small'
+        }), []);
+    return {
+        button: buttonContext
+    };
+}

package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMessageBarActionsContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarActionsContextValues } from './MessageBarActions.types';\n\nexport function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {\n  const buttonContext = React.useMemo(\n    () => ({\n      size: 'small' as const,\n    }),\n    [],\n  );\n\n  return {\n    button: buttonContext,\n  };\n}\n"],"names":["React","useMessageBarActionsContextValue_unstable","buttonContext","useMemo","size","button"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC;IACd,MAAMC,gBAAgBF,MAAMG,OAAO,CACjC,IAAO,CAAA;YACLC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QACLC,QAAQH;IACV;AACF"}

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js

@@ -0,0 +1,36 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const messageBarActionsClassNames = {
+  root: 'fui-MessageBarActions',
+  containerAction: 'fui-MessageBarActions__containerAction'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1qydg9p", "r1to27xx", [".r1qydg9p{grid-row-start:secondaryActions;grid-column-start:secondaryActions;grid-row-end:secondaryActions;grid-column-end:secondaryActions;display:flex;column-gap:var(--spacingHorizontalM);padding-right:var(--spacingHorizontalM);}", ".r1to27xx{grid-row-start:secondaryActions;grid-column-start:secondaryActions;grid-row-end:secondaryActions;grid-column-end:secondaryActions;display:flex;column-gap:var(--spacingHorizontalM);padding-left:var(--spacingHorizontalM);}"]);
+const useContainerActionBaseStyles = /*#__PURE__*/__resetStyles("r1y6i9ar", "rc0rof2", [".r1y6i9ar{grid-row-start:actions;grid-column-start:actions;grid-row-end:actions;grid-column-end:actions;padding-right:var(--spacingHorizontalM);}", ".rc0rof2{grid-row-start:actions;grid-column-start:actions;grid-row-end:actions;grid-column-end:actions;padding-left:var(--spacingHorizontalM);}"]);
+const useMultilineStyles = /*#__PURE__*/__styles({
+  root: {
+    Brf1p80: "f1e8xxv9",
+    B6of3ja: "f1gaxbfw",
+    jrapky: "fqcjy3b",
+    t21cq0: ["fibjyge", "f9yszdx"],
+    z189sj: ["f1p3vkop", "f8cewkv"]
+  }
+}, {
+  d: [".f1e8xxv9{justify-content:end;}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", ".f1p3vkop{padding-right:var(--spacingVerticalM);}", ".f8cewkv{padding-left:var(--spacingVerticalM);}"]
+});
+/**
+ * Apply styling to the MessageBarActions slots based on the state
+ */
+export const useMessageBarActionsStyles_unstable = state => {
+  const rootBaseStyles = useRootBaseStyles();
+  const containerActionBaseStyles = useContainerActionBaseStyles();
+  const multilineStyles = useMultilineStyles();
+  state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, state.root.className);
+  if (state.containerAction) {
+    state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useMessageBarActionsStyles.styles.js.map

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n    root: 'fui-MessageBarActions',\n    containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n    ...shorthands.gridArea('secondaryActions'),\n    display: 'flex',\n    columnGap: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n    ...shorthands.gridArea('actions'),\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useMultilineStyles = makeStyles({\n    root: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px',\n        paddingRight: tokens.spacingVerticalM\n    }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const containerActionBaseStyles = useContainerActionBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, state.root.className);\n    if (state.containerAction) {\n        state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGR,aAAA,8eAK7B,CAAC;AACF,MAAMS,4BAA4B,gBAAGT,aAAA,gUAGpC,CAAC;AACF,MAAMU,kBAAkB,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQ1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,cAAc,GAAGX,iBAAiB,CAAC,CAAC;EAC1C,MAAMY,yBAAyB,GAAGX,4BAA4B,CAAC,CAAC;EAChE,MAAMY,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5CQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEa,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACf,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjK,IAAIJ,KAAK,CAACX,eAAe,EAAE;IACvBW,KAAK,CAACX,eAAe,CAACe,SAAS,GAAGpB,YAAY,CAACG,2BAA2B,CAACE,eAAe,EAAEa,yBAAyB,EAAEF,KAAK,CAACX,eAAe,CAACe,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC"}