npm - @fluentui/react-message-bar - Versions diffs - 0.0.0-nightly-20240819-2052.1 → 0.0.0-nightly-20240819-2137.1 - Mend

@fluentui/react-message-bar 0.0.0-nightly-20240819-2052.1 → 0.0.0-nightly-20240819-2137.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,33 +1,24 @@
 # Change Log - @fluentui/react-message-bar
-This log was last generated on Mon, 19 Aug 2024 20:57:13 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Aug 2024 21:48:10 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20240819-2052.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v0.0.0-nightly-20240819-2052.1)
+## [0.0.0-nightly-20240819-2137.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v0.0.0-nightly-20240819-2137.1)
-Mon, 19 Aug 2024 20:57:13 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.7..@fluentui/react-message-bar_v0.0.0-nightly-20240819-2052.1)
+Mon, 19 Aug 2024 21:48:10 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.6..@fluentui/react-message-bar_v0.0.0-nightly-20240819-2137.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2052.1 ([commit](https://github.com/microsoft/fluentui/commit/f7885920740849a4ba4aa36957bde7ce8e856a3e) by beachball)
-## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.7)
-Tue, 06 Aug 2024 21:40:44 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.6..@fluentui/react-message-bar_v9.2.7)
-### Patches
-- Fix undefined reference in older browsers in useMessageBarReflow ([PR #32238](https://github.com/microsoft/fluentui/pull/32238) by miclo@microsoft.com)
+- Bump @fluentui/react-button to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240819-2137.1 ([commit](https://github.com/microsoft/fluentui/commit/58023e0682dfefa133a691f330cc309911710cc7) by beachball)
 ## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.6)

package/lib/components/MessageBar/useMessageBarReflow.js CHANGED Viewed

@@ -10,7 +10,6 @@ export function useMessageBarReflow(enabled = false) {
     const resizeObserverRef = React.useRef(null);
     const prevInlineSizeRef = React.useRef(-1);
     const handleResize = React.useCallback((entries)=>{
-        var _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) {
@@ -22,12 +21,11 @@ export function useMessageBarReflow(enabled = false) {
             ].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[0].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) {
+        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;

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

	@@ -1 +1 @@
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 // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\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 // `borderBoxSize` ~~is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize~~ = entry?.borderBoxSize?.[0]~~.inlineSize ?? entry?.target.getBoundingClientRect().width~~;\n if (~~inlineSize~~ ~~=== undefined~~ \|\| !entry) {\n return;\n }\n\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","~~entry","~~process","env","NODE_ENV","length","console","error","join","~~inlineSize~~","borderBoxSize","~~target~~","~~getBoundingClientRect~~","~~width","undefined","~~nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","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,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,oBAAoBX,MAAMU,MAAM,CAAwB;IAC9D,MAAME,oBAAoBZ,MAAMU,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCb,MAAMc,WAAW,CAC5DC,CAAAA;~~YAgBqBC;QAfnB~~,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,~~gBAAgBJ~~,~~QAAQK~~,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,~~MAAMP~~,~~QAAQD~~,OAAO,CAAC,EAAE;~~YAELC;QADnB~~,~~iFAAiF;QACjF~~,~~MAAMQ~~,~~aAAaR,CAAAA,mCAAAA,~~kBAAAA,~~6BAAAA~~,~~uBAAAA~~,~~MAAOS,~~aAAa,~~cAApBT,2CAAAA,oBAAsB,~~CAAC,EAAE~~,CAACQ,UAAU,cAApCR,8CAAAA,mCAAwCA,kBAAAA,4BAAAA,MAAOU,MAAM,CAACC,qBAAqB,GAAGC,KAAK~~;~~QACtG~~,~~IAAIJ~~,~~eAAeK~~,~~aAAa~~,~~CAACb~~,OAAO;~~YACtC~~;QACF;QAEA,MAAM,~~EAAEU~~,MAAM,EAAE,~~GAAGV~~;QAEnB,IAAI,~~CAACb~~,cAAcuB,SAAS;YAC1B;QACF;QAEA,~~IAAII~~;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,~~IAAIrB~~,~~aAAasB~~,OAAO,EAAE;YACxB,~~IAAInB~~,~~kBAAkBmB~~,OAAO,~~GAAGP~~,YAAY;~~gBAC1CM~~,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,~~cAAcN~~,~~OAAOM~~,WAAW;YACtC,~~IAAIR~~,~~aAAaQ~~,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;~~QAEAlB~~,~~kBAAkBmB~~,OAAO,~~GAAGP~~;QAC5B,IAAI,~~OAAOM~~,kBAAkB,~~eAAerB~~,~~aAAasB~~,OAAO,KAAKD,eAAe;~~YAClFrB~~,~~aAAasB~~,OAAO,GAAGD;~~YACvBvB~~;QACF;IACF,GACA;QAACA;KAAY;IAGf,~~MAAM0B~~,~~MAAMjC~~,MAAMc,WAAW,CAC3B,~~CAACoB~~;~~YAKCvB~~;QAJA,IAAI,CAACN,WAAW,~~CAAC6B~~,MAAM,~~EAAC5B~~,2BAAAA,qCAAAA,~~eAAgB6B~~,WAAW,GAAE;YACnD;QACF;~~SAEAxB~~,6BAAAA,~~kBAAkBoB~~,OAAO,~~cAAzBpB~~,iDAAAA,~~2BAA2ByB~~,UAAU;QAErC,MAAMC,~~MAAM/B~~,~~eAAe6B~~,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,~~CAAC1B~~;QAC9CF,~~kBAAkBoB~~,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;~~QAACnC~~;QAAgBO;QAAcR;KAAQ;IAGzCL,~~MAAM0C~~,SAAS,CAAC;QACd,OAAO;~~gBACL/B~~;aAAAA,6BAAAA,~~kBAAkBoB~~,OAAO,~~cAAzBpB~~,iDAAAA,~~2BAA2ByB~~,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,~~WAAWlC~~,~~aAAasB~~,OAAO;IAAC;AAChD"}
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 // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,8FAA8F;IAC9F,iDAAiD;IACjD,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 CHANGED Viewed

@@ -5,21 +5,21 @@ export const messageBarClassNames = {
   icon: 'fui-MessageBar__icon',
   bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
 };
-const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1mj9xpo", "rybder0", [".r1mj9xpo{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(--1403, var(--1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--1405, var(--1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--1407, var(--1408, var(--colorNeutralBackground3)));}", ".rybder0{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(--1403, var(--1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--1405, var(--1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--1407, var(--1408, var(--colorNeutralBackground3)));}"]);
-const useIconBaseStyles = /*#__PURE__*/__resetStyles("r1x0aljq", "r11fkdo4", [".r1x0aljq{grid-area:icon;font-size:var(--1409, var(--1410, var(--fontSizeBase500)));margin-right:var(--1411, var(--1412, var(--spacingHorizontalS)));color:var(--1413, var(--1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}", ".r11fkdo4{grid-area:icon;font-size:var(--1409, var(--1410, var(--fontSizeBase500)));margin-left:var(--1411, var(--1412, var(--spacingHorizontalS)));color:var(--1413, var(--1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"]);
-const useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles("rybd5ye", null, [".rybd5ye{margin-bottom:var(--1415, var(--1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"]);
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r14q2he5", "r18gsvjx", [".r14q2he5{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(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}", ".r18gsvjx{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(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}"]);
+const useIconBaseStyles = /*#__PURE__*/__resetStyles("r2xf5ig", "r848lq0", [".r2xf5ig{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-right:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}", ".r848lq0{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-left:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"]);
+const useReflowSpacerBaseStyles = /*#__PURE__*/__resetStyles("r110u9yo", null, [".r110u9yo{margin-bottom:var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"]);
 const useStyles = /*#__PURE__*/__styles({
   rootMultiline: {
     Huce71: "f6juhto",
     Bt984gj: "f1s2louj",
-    z8tnut: "fzurkfh",
+    z8tnut: "ft6js49",
     Budl1dq: "f17g0uqy",
     zoa1oz: "f1w7oly7"
   },
   secondaryActionsMultiline: {
     Brf1p80: "f1e8xxv9",
-    B6of3ja: "f15u9rwv",
-    jrapky: "f1myzgog",
+    B6of3ja: "f143zic1",
+    jrapky: "f1d7ei9l",
     t21cq0: ["fibjyge", "f9yszdx"]
   },
   square: {
@@ -30,49 +30,49 @@ const useStyles = /*#__PURE__*/__styles({
     Dimara: "fokr779"
   }
 }, {
-  d: [".f6juhto{white-space:normal;}", ".f1s2louj{align-items:start;}", ".fzurkfh{padding-top:var(--1417, var(--1418, var(--spacingVerticalMNudge)));}", ".f17g0uqy{grid-template-columns:auto 1fr auto;}", ".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}", ".f1e8xxv9{justify-content:end;}", ".f15u9rwv{margin-top:var(--1419, var(--1420, var(--spacingVerticalMNudge)));}", ".f1myzgog{margin-bottom:var(--1421, var(--1422, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", [".fokr779{border-radius:0;}", {
+  d: [".f6juhto{white-space:normal;}", ".f1s2louj{align-items:start;}", ".ft6js49{padding-top:var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, var(--spacingVerticalMNudge)));}", ".f17g0uqy{grid-template-columns:auto 1fr auto;}", ".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}", ".f1e8xxv9{justify-content:end;}", ".f143zic1{margin-top:var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, var(--spacingVerticalMNudge)));}", ".f1d7ei9l{margin-bottom:var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", [".fokr779{border-radius:0;}", {
     p: -1
   }]]
 });
 const useIconIntentStyles = /*#__PURE__*/__styles({
   info: {},
   error: {
-    sj55zd: "f1rznras"
+    sj55zd: "fyaag8u"
   },
   warning: {
-    sj55zd: "f1goomfl"
+    sj55zd: "fqxisni"
   },
   success: {
-    sj55zd: "f1f10dps"
+    sj55zd: "f1jsw6o0"
   }
 }, {
-  d: [".f1rznras{color:var(--1423, var(--1424, var(--colorStatusDangerForeground1)));}", ".f1goomfl{color:var(--1425, var(--1426, var(--colorStatusWarningForeground3)));}", ".f1f10dps{color:var(--1427, var(--1428, var(--colorStatusSuccessForeground1)));}"]
+  d: [".fyaag8u{color:var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, var(--colorStatusDangerForeground1)));}", ".fqxisni{color:var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, var(--colorStatusWarningForeground3)));}", ".f1jsw6o0{color:var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, var(--colorStatusSuccessForeground1)));}"]
 });
 const useRootIntentStyles = /*#__PURE__*/__styles({
   info: {},
   error: {
-    De3pzq: "f1cs29nk",
+    De3pzq: "f1y5vzrf",
     g2u3we: "f1f8dvr7",
     h3c5rm: ["f1g1ijmo", "f1nxacbt"],
     B9xav0g: "fo25q1j",
     zhjwy3: ["f1nxacbt", "f1g1ijmo"]
   },
   warning: {
-    De3pzq: "fjxst40",
+    De3pzq: "f1i8emrx",
     g2u3we: "frd1ypx",
     h3c5rm: ["f1gyjrma", "f18qd5xz"],
     B9xav0g: "fqyqtrt",
     zhjwy3: ["f18qd5xz", "f1gyjrma"]
   },
   success: {
-    De3pzq: "f17ypys0",
+    De3pzq: "fzsqszz",
     g2u3we: "f1b4u7v",
     h3c5rm: ["f1nyd2b1", "f70v3om"],
     B9xav0g: "fk173vo",
     zhjwy3: ["f70v3om", "f1nyd2b1"]
   }
 }, {
-  d: [".f1cs29nk{background-color:var(--1429, var(--1430, 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);}", ".fjxst40{background-color:var(--1431, var(--1432, 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);}", ".f17ypys0{background-color:var(--1433, var(--1434, 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);}"]
+  d: [".f1y5vzrf{background-color:var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, 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);}", ".f1i8emrx{background-color:var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, 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);}", ".fzsqszz{background-color:var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, 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

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","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 bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\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: `var(--1403, var(--1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--1405, var(--1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--1407, var(--1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--1409, var(--1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--1411, var(--1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--1413, var(--1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--1415, var(--1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--1417, var(--1418, ${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: `var(--1419, var(--1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--1421, var(--1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--1423, var(--1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--1425, var(--1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--1427, var(--1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--1429, var(--1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--1431, var(--1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--1433, var(--1434, ${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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\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 if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\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,sBAAsB;EAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,gBAAGT,aAAA,~~s/BAazB~~,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,~~0gBAOzB~~,CAAC;AACF,MAAMW,yBAAyB,gBAAGX,aAAA,~~2HAGjC~~,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,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;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG/B,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,gBAAGrC,QAAA;EAAAgC,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;EAAAb,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;EACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACvC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEwC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACtC,aAAa,EAAEgC,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAAC3B,MAAM,EAAEyB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACW,mBAAmB,EAAEX,KAAK,CAACvC,IAAI,CAAC8C,SAAS,CAAC;EAChQ,IAAIP,KAAK,CAACtC,IAAI,EAAE;IACZsC,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACxI;EACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;IAC1BqC,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;EAClH;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","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 bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\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: `var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, ${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: `var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, ${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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\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 if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\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,sBAAsB;EAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,gBAAGT,aAAA,wxCAazB,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,syBAOzB,CAAC;AACF,MAAMW,yBAAyB,gBAAGX,aAAA,6KAGjC,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,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;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG/B,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,gBAAGrC,QAAA;EAAAgC,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;EAAAb,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;EACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACvC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEwC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACtC,aAAa,EAAEgC,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAAC3B,MAAM,EAAEyB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACW,mBAAmB,EAAEX,KAAK,CAACvC,IAAI,CAAC8C,SAAS,CAAC;EAChQ,IAAIP,KAAK,CAACtC,IAAI,EAAE;IACZsC,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACxI;EACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;IAC1BqC,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;EAClH;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -7,21 +7,21 @@ export const messageBarActionsClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1fr1ixz", "r1flwmss", [".r1fr1ixz{grid-area:secondaryActions;display:flex;column-gap:var(--1435, var(--1436, var(--spacingHorizontalM)));padding-right:var(--1437, var(--1438, var(--spacingHorizontalM)));}", ".r1flwmss{grid-area:secondaryActions;display:flex;column-gap:var(--1435, var(--1436, var(--spacingHorizontalM)));padding-left:var(--1437, var(--1438, var(--spacingHorizontalM)));}"]);
-const useContainerActionBaseStyles = /*#__PURE__*/__resetStyles("rlntmgg", "r1or7a25", [".rlntmgg{grid-area:actions;padding-right:var(--1439, var(--1440, var(--spacingHorizontalM)));}", ".r1or7a25{grid-area:actions;padding-left:var(--1439, var(--1440, var(--spacingHorizontalM)));}"]);
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r3tni6y", "r1r5nxge", [".r3tni6y{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-right:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}", ".r1r5nxge{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-left:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}"]);
+const useContainerActionBaseStyles = /*#__PURE__*/__resetStyles("r16ddk6c", "r1hnez12", [".r16ddk6c{grid-area:actions;padding-right:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}", ".r1hnez12{grid-area:actions;padding-left:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}"]);
 const useMultilineStyles = /*#__PURE__*/__styles({
   root: {
     Brf1p80: "f1e8xxv9",
-    B6of3ja: "f131y9yo",
-    jrapky: "fmi70fv",
+    B6of3ja: "fu9glcb",
+    jrapky: "f14xjzdo",
     t21cq0: ["fibjyge", "f9yszdx"],
-    z189sj: ["f1xbdom7", "faa2w01"]
+    z189sj: ["fh3kwj1", "fexeaj2"]
   },
   noActions: {
     mc9l5x: "fjseox"
   }
 }, {
-  d: [".f1e8xxv9{justify-content:end;}", ".f131y9yo{margin-top:var(--1441, var(--1442, var(--spacingVerticalMNudge)));}", ".fmi70fv{margin-bottom:var(--1443, var(--1444, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", ".f1xbdom7{padding-right:var(--1445, var(--1446, var(--spacingVerticalM)));}", ".faa2w01{padding-left:var(--1445, var(--1446, var(--spacingVerticalM)));}", ".fjseox{display:none;}"]
+  d: [".f1e8xxv9{justify-content:end;}", ".fu9glcb{margin-top:var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, var(--spacingVerticalMNudge)));}", ".f14xjzdo{margin-bottom:var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, var(--spacingVerticalS)));}", ".fibjyge{margin-right:0px;}", ".f9yszdx{margin-left:0px;}", ".fh3kwj1{padding-right:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}", ".fexeaj2{padding-left:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}", ".fjseox{display:none;}"]
 });
 /**
  * Apply styling to the MessageBarActions slots based on the state

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--1435, var(--1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--1437, var(--1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--1439, var(--1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--1441, var(--1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--1443, var(--1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--1445, var(--1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/\n Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\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.hasActions && multilineStyles.noActions, 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,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGP,aAAA,~~wYAK7B~~,CAAC;AACF,MAAMQ,4BAA4B,gBAAGR,aAAA,~~4NAGpC~~,CAAC;AACF,MAAMS,kBAAkB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;EAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;EAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;IACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/\n Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\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.hasActions && multilineStyles.noActions, 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,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGP,aAAA,8nBAK7B,CAAC;AACF,MAAMQ,4BAA4B,gBAAGR,aAAA,0VAGpC,CAAC;AACF,MAAMS,kBAAkB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;EAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;EAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;IACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const messageBarBodyClassNames = {
   root: 'fui-MessageBarBody'
 };
-const useRootBaseStyles = /*#__PURE__*/__resetStyles("r12sewiz", "r334ana", [".r12sewiz{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--1447, var(--1448, var(--spacingHorizontalM)));}", ".r334ana{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--1447, var(--1448, var(--spacingHorizontalM)));}"]);
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r10i509y", "rc0w3vx", [".r10i509y{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}", ".rc0w3vx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}"]);
 /**
  * Apply styling to the MessageBarBody slots based on the state
  */

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--1447, var(--1448, ${tokens.spacingHorizontalM}))`\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGN,aAAA,~~gfAIzB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;EAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, ${tokens.spacingHorizontalM}))`\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGN,aAAA,gmBAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,cAAc,GAAGH,iBAAiB,CAAC,CAAC;EAC1CE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEI,cAAc,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js CHANGED Viewed

@@ -9,7 +9,7 @@ export const messageBarGroupClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   base: {
     Bf5fcs: "f4cll0y",
-    vin17d: "f1ixyhlk"
+    vin17d: "f1k9v4kp"
   },
   enter: {
     Bv12yb3: "f1dg9w1v"
@@ -18,7 +18,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bv12yb3: "fu80iee"
   }
 }, {
-  d: [".f4cll0y{animation-fill-mode:forwards;}", ".f1ixyhlk{animation-duration:var(--1449, var(--1450, var(--durationNormal)));}", ".f1dg9w1v{animation-name:fngeioi;}", ".fu80iee{animation-name:fk0lfw7;}"],
+  d: [".f4cll0y{animation-fill-mode:forwards;}", ".f1k9v4kp{animation-duration:var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, var(--durationNormal)));}", ".f1dg9w1v{animation-name:fngeioi;}", ".fu80iee{animation-name:fk0lfw7;}"],
   k: ["@keyframes fngeioi{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}"]
 });
 /**

package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--1449, var(--1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/\n Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACzFF,KAAK,CAACG,WAAW,GAAGjB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACP,KAAK,CAAC;EAC3DM,KAAK,CAACI,UAAU,GAAGlB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACL,IAAI,CAAC;EACzD,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/\n Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACzFF,KAAK,CAACG,WAAW,GAAGjB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACP,KAAK,CAAC;EAC3DM,KAAK,CAACI,UAAU,GAAGlB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACL,IAAI,CAAC;EACzD,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js CHANGED Viewed

@@ -21,7 +21,6 @@ function useMessageBarReflow(enabled = false) {
     const resizeObserverRef = _react.useRef(null);
     const prevInlineSizeRef = _react.useRef(-1);
     const handleResize = _react.useCallback((entries)=>{
-        var _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) {
@@ -33,12 +32,11 @@ function useMessageBarReflow(enabled = false) {
             ].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[0].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) {
+        const borderBoxSize = entry === null || entry === void 0 ? void 0 : entry.borderBoxSize[0];
+        if (!borderBoxSize || !entry) {
             return;
         }
+        const { inlineSize } = borderBoxSize;
         const { target } = entry;
         if (!(0, _reactutilities.isHTMLElement)(target)) {
             return;

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map CHANGED Viewed

	@@ -1 +1 @@
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 // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\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 // `borderBoxSize` ~~is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize~~ = entry?.borderBoxSize?.[0]~~.inlineSize ?? entry?.target.getBoundingClientRect().width~~;\n if (~~inlineSize~~ ~~=== undefined~~ \|\| !entry) {\n return;\n }\n\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":["useMessageBarReflow","enabled","targetDocument","useFluent","forceUpdate","React","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","~~entry","~~process","env","NODE_ENV","length","console","error","join","~~inlineSize~~","borderBoxSize","~~target~~","~~getBoundingClientRect~~","~~width","undefined","~~isHTMLElement","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;qCACyB;gCAClB;AAEvB,SAASA,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,cAAcC,OAAMC,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeF,OAAMG,MAAM,CAAC;IAClC,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,oBAAoBJ,OAAMG,MAAM,CAAwB;IAC9D,MAAME,oBAAoBL,OAAMG,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCN,OAAMO,WAAW,CAC5DC,CAAAA;~~YAgBqBC;QAfnB~~,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,~~gBAAgBJ~~,~~QAAQK~~,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,~~MAAMP~~,~~QAAQD~~,OAAO,CAAC,EAAE;~~YAELC;QADnB~~,~~iFAAiF;QACjF~~,~~MAAMQ~~,~~aAAaR,CAAAA,mCAAAA,~~UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~CAAAA~~,~~uBAAAA,MAAOS,~~aAAa,~~AAAbA,MAAa,QAApBT,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAsB,~~CAAC,EAAE~~,CAACQ,UAAU,AAAVA,MAAU,QAApCR,qCAAAA,KAAAA,IAAAA,mCAAwCA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOU,MAAM,CAACC,qBAAqB,GAAGC,KAAK~~;~~QACtG~~,~~IAAIJ~~,~~eAAeK~~,~~aAAa~~,~~CAACb~~,OAAO;~~YACtC~~;QACF;QAEA,MAAM,~~EAAEU~~,MAAM,EAAE,~~GAAGV~~;QAEnB,IAAI,~~CAACc~~,IAAAA,6BAAAA,~~EAAcJ~~,SAAS;YAC1B;QACF;QAEA,~~IAAIK~~;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,~~IAAItB~~,~~aAAauB~~,OAAO,EAAE;YACxB,~~IAAIpB~~,~~kBAAkBoB~~,OAAO,~~GAAGR~~,YAAY;~~gBAC1CO~~,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,~~cAAcP~~,~~OAAOO~~,WAAW;YACtC,~~IAAIT~~,~~aAAaS~~,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;~~QAEAnB~~,~~kBAAkBoB~~,OAAO,~~GAAGR~~;QAC5B,IAAI,~~OAAOO~~,kBAAkB,~~eAAetB~~,~~aAAauB~~,OAAO,KAAKD,eAAe;~~YAClFtB~~,~~aAAauB~~,OAAO,GAAGD;~~YACvBzB~~;QACF;IACF,GACA;QAACA;KAAY;IAGf,~~MAAM4B~~,~~MAAM3B~~,OAAMO,WAAW,CAC3B,~~CAACqB~~;~~YAKCxB~~;QAJA,IAAI,CAACR,WAAW,~~CAACgC~~,MAAM,~~CAAC/B~~,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~eAAgBgC~~,WAAW,AAAXA,GAAa;YACnD;QACF;~~QAEAzB~~,CAAAA,6BAAAA,~~kBAAkBqB~~,OAAO,AAAPA,MAAO,~~QAAzBrB~~,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~2BAA2B0B~~,UAAU;QAErC,MAAMC,~~MAAMlC~~,~~eAAegC~~,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,~~CAAC3B~~;QAC9CF,~~kBAAkBqB~~,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;~~QAACtC~~;QAAgBS;QAAcV;KAAQ;IAGzCI,~~OAAMoC~~,SAAS,CAAC;QACd,OAAO;~~gBACLhC~~;YAAAA,CAAAA,6BAAAA,~~kBAAkBqB~~,OAAO,AAAPA,MAAO,~~QAAzBrB~~,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~2BAA2B0B~~,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,~~WAAWnC~~,~~aAAauB~~,OAAO;IAAC;AAChD"}
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 // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n // eslint-disable-next-line no-restricted-globals\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":["useMessageBarReflow","enabled","targetDocument","useFluent","forceUpdate","React","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","process","env","NODE_ENV","length","console","error","join","entry","borderBoxSize","inlineSize","target","isHTMLElement","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;qCACyB;gCAClB;AAEvB,SAASA,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,cAAcC,OAAMC,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeF,OAAMG,MAAM,CAAC;IAClC,8FAA8F;IAC9F,iDAAiD;IACjD,MAAMC,oBAAoBJ,OAAMG,MAAM,CAAwB;IAC9D,MAAME,oBAAoBL,OAAMG,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCN,OAAMO,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,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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,CAACI,IAAAA,6BAAAA,EAAcD,SAAS;YAC1B;QACF;QAEA,IAAIE;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,IAAInB,aAAaoB,OAAO,EAAE;YACxB,IAAIjB,kBAAkBiB,OAAO,GAAGJ,YAAY;gBAC1CG,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,cAAcJ,OAAOI,WAAW;YACtC,IAAIL,aAAaK,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;QAEAhB,kBAAkBiB,OAAO,GAAGJ;QAC5B,IAAI,OAAOG,kBAAkB,eAAenB,aAAaoB,OAAO,KAAKD,eAAe;YAClFnB,aAAaoB,OAAO,GAAGD;YACvBtB;QACF;IACF,GACA;QAACA;KAAY;IAGf,MAAMyB,MAAMxB,OAAMO,WAAW,CAC3B,CAACkB;YAKCrB;QAJA,IAAI,CAACR,WAAW,CAAC6B,MAAM,CAAC5B,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB6B,WAAW,AAAXA,GAAa;YACnD;QACF;QAEAtB,CAAAA,6BAAAA,kBAAkBkB,OAAO,AAAPA,MAAO,QAAzBlB,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2BuB,UAAU;QAErC,MAAMC,MAAM/B,eAAe6B,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,CAACxB;QAC9CF,kBAAkBkB,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;QAACnC;QAAgBS;QAAcV;KAAQ;IAGzCI,OAAMiC,SAAS,CAAC;QACd,OAAO;gBACL7B;YAAAA,CAAAA,6BAAAA,kBAAkBkB,OAAO,AAAPA,MAAO,QAAzBlB,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2BuB,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,WAAWhC,aAAaoB,OAAO;IAAC;AAChD"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js CHANGED Viewed

@@ -22,29 +22,29 @@ const messageBarClassNames = {
     icon: 'fui-MessageBar__icon',
     bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
 };
-const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1mj9xpo", "rybder0", [
-    ".r1mj9xpo{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(--1403, var(--1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--1405, var(--1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--1407, var(--1408, var(--colorNeutralBackground3)));}",
-    ".rybder0{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(--1403, var(--1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--1405, var(--1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--1407, var(--1408, var(--colorNeutralBackground3)));}"
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r14q2he5", "r18gsvjx", [
+    ".r14q2he5{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(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}",
+    ".r18gsvjx{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(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, var(--spacingHorizontalM)));border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, var(--borderRadiusMedium)));align-items:center;min-height:36px;box-sizing:border-box;background-color:var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, var(--colorNeutralBackground3)));}"
 ]);
-const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1x0aljq", "r11fkdo4", [
-    ".r1x0aljq{grid-area:icon;font-size:var(--1409, var(--1410, var(--fontSizeBase500)));margin-right:var(--1411, var(--1412, var(--spacingHorizontalS)));color:var(--1413, var(--1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}",
-    ".r11fkdo4{grid-area:icon;font-size:var(--1409, var(--1410, var(--fontSizeBase500)));margin-left:var(--1411, var(--1412, var(--spacingHorizontalS)));color:var(--1413, var(--1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"
+const useIconBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r2xf5ig", "r848lq0", [
+    ".r2xf5ig{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-right:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}",
+    ".r848lq0{grid-area:icon;font-size:var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, var(--fontSizeBase500)));margin-left:var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, var(--spacingHorizontalS)));color:var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, var(--colorNeutralForeground3)));display:flex;align-items:center;}"
 ]);
-const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rybd5ye", null, [
-    ".rybd5ye{margin-bottom:var(--1415, var(--1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"
+const useReflowSpacerBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r110u9yo", null, [
+    ".r110u9yo{margin-bottom:var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, var(--spacingVerticalS)));grid-area:secondaryActions;}"
 ]);
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     rootMultiline: {
         Huce71: "f6juhto",
         Bt984gj: "f1s2louj",
-        z8tnut: "fzurkfh",
+        z8tnut: "ft6js49",
         Budl1dq: "f17g0uqy",
         zoa1oz: "f1w7oly7"
     },
     secondaryActionsMultiline: {
         Brf1p80: "f1e8xxv9",
-        B6of3ja: "f15u9rwv",
-        jrapky: "f1myzgog",
+        B6of3ja: "f143zic1",
+        jrapky: "f1d7ei9l",
         t21cq0: [
             "fibjyge",
             "f9yszdx"
@@ -61,12 +61,12 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     d: [
         ".f6juhto{white-space:normal;}",
         ".f1s2louj{align-items:start;}",
-        ".fzurkfh{padding-top:var(--1417, var(--1418, var(--spacingVerticalMNudge)));}",
+        ".ft6js49{padding-top:var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, var(--spacingVerticalMNudge)));}",
         ".f17g0uqy{grid-template-columns:auto 1fr auto;}",
         ".f1w7oly7{grid-template-areas:\"icon body actions\" \"secondaryActions secondaryActions secondaryActions\";}",
         ".f1e8xxv9{justify-content:end;}",
-        ".f15u9rwv{margin-top:var(--1419, var(--1420, var(--spacingVerticalMNudge)));}",
-        ".f1myzgog{margin-bottom:var(--1421, var(--1422, var(--spacingVerticalS)));}",
+        ".f143zic1{margin-top:var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, var(--spacingVerticalMNudge)));}",
+        ".f1d7ei9l{margin-bottom:var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, var(--spacingVerticalS)));}",
         ".fibjyge{margin-right:0px;}",
         ".f9yszdx{margin-left:0px;}",
         [
@@ -80,25 +80,25 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useIconIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
     info: {},
     error: {
-        sj55zd: "f1rznras"
+        sj55zd: "fyaag8u"
     },
     warning: {
-        sj55zd: "f1goomfl"
+        sj55zd: "fqxisni"
     },
     success: {
-        sj55zd: "f1f10dps"
+        sj55zd: "f1jsw6o0"
     }
 }, {
     d: [
-        ".f1rznras{color:var(--1423, var(--1424, var(--colorStatusDangerForeground1)));}",
-        ".f1goomfl{color:var(--1425, var(--1426, var(--colorStatusWarningForeground3)));}",
-        ".f1f10dps{color:var(--1427, var(--1428, var(--colorStatusSuccessForeground1)));}"
+        ".fyaag8u{color:var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, var(--colorStatusDangerForeground1)));}",
+        ".fqxisni{color:var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, var(--colorStatusWarningForeground3)));}",
+        ".f1jsw6o0{color:var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, var(--colorStatusSuccessForeground1)));}"
     ]
 });
 const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
     info: {},
     error: {
-        De3pzq: "f1cs29nk",
+        De3pzq: "f1y5vzrf",
         g2u3we: "f1f8dvr7",
         h3c5rm: [
             "f1g1ijmo",
@@ -111,7 +111,7 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     },
     warning: {
-        De3pzq: "fjxst40",
+        De3pzq: "f1i8emrx",
         g2u3we: "frd1ypx",
         h3c5rm: [
             "f1gyjrma",
@@ -124,7 +124,7 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     },
     success: {
-        De3pzq: "f17ypys0",
+        De3pzq: "fzsqszz",
         g2u3we: "f1b4u7v",
         h3c5rm: [
             "f1nyd2b1",
@@ -138,17 +138,17 @@ const useRootIntentStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     d: [
-        ".f1cs29nk{background-color:var(--1429, var(--1430, var(--colorStatusDangerBackground1)));}",
+        ".f1y5vzrf{background-color:var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, 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);}",
-        ".fjxst40{background-color:var(--1431, var(--1432, var(--colorStatusWarningBackground1)));}",
+        ".f1i8emrx{background-color:var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, 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);}",
-        ".f17ypys0{background-color:var(--1433, var(--1434, var(--colorStatusSuccessBackground1)));}",
+        ".fzsqszz{background-color:var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, var(--colorStatusSuccessBackground1)));}",
         ".f1b4u7v{border-top-color:var(--colorStatusSuccessBorder1);}",
         ".f1nyd2b1{border-right-color:var(--colorStatusSuccessBorder1);}",
         ".f70v3om{border-left-color:var(--colorStatusSuccessBorder1);}",

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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 bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\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: `var(--1403, var(--1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--1405, var(--1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--1407, var(--1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--1409, var(--1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--1411, var(--1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--1413, var(--1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--1415, var(--1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--1417, var(--1418, ${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: `var(--1419, var(--1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--1421, var(--1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--1423, var(--1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--1425, var(--1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--1427, var(--1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--1429, var(--1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--1431, var(--1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--1433, var(--1434, ${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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\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 if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAmFIC,4BAA4B;eAA5BA;;;uBArFqD;AAE/D,MAAMD,uBAAuB;IAChCE,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACxB;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,~~WAAA~~;IAAA;IAAA;CAazB;AACD,MAAMC,oBAAiB,WAAA,GAAGD,IAAAA,oBAAA,EAAA,~~YAAA~~,~~YAAA~~;IAAA;IAAA;CAOzB;AACD,MAAME,4BAAyB,WAAA,GAAGF,IAAAA,oBAAA,EAAA,~~WAAA~~,MAAA;IAAA;CAGjC;AACD,MAAMG,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,eAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,2BAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAqBlB,MAAMC,sBAAmB,WAAA,GAAGpB,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA;QAAAD,QAAA;IAAA;IAAAE,SAAA;QAAAF,QAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAa5B,MAAMQ,sBAAmB,WAAA,GAAG1B,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAK,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,SAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,SAAA;QAAAE,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAb,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBjB,MAAM3B,+BAAgCyC,CAAAA;IAC7C;IACA,MAAMC,iBAAiBtC;IACvB,MAAMuC,iBAAiBrC;IACvB,MAAMsC,mBAAmBf;IACzB,MAAMgB,mBAAmBV;IACzB,MAAMW,qBAAqBvC;IAC3B,MAAMwC,SAASvC;IACfiC,MAAMxC,IAAI,CAAC+C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBE,IAAI,EAAEyC,gBAAgBD,MAAMS,MAAM,KAAK,eAAeH,OAAOrC,aAAa,EAAE+B,MAAMU,KAAK,KAAK,YAAYJ,OAAO1B,MAAM,EAAEwB,gBAAgB,CAACJ,MAAMW,MAAM,CAAC,EAAEX,MAAMY,mBAAmB,EAAEZ,MAAMxC,IAAI,CAAC+C,SAAS;IAC/P,IAAIP,MAAMvC,IAAI,EAAE;QACZuC,MAAMvC,IAAI,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBG,IAAI,EAAEyC,gBAAgBC,gBAAgB,CAACH,MAAMW,MAAM,CAAC,EAAEX,MAAMvC,IAAI,CAAC8C,SAAS;IACvI;IACA,IAAIP,MAAMtC,kBAAkB,EAAE;QAC1BsC,MAAMtC,kBAAkB,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBI,kBAAkB,EAAE2C;IAC/F;IACA,OAAOL;AACX"}
1	+ {"version":3,"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 bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\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: `var(--ctrl-token-MessageBar-1403, var(--semantic-token-MessageBar-1404, ${tokens.spacingHorizontalM}))`,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: `var(--ctrl-token-MessageBar-1405, var(--semantic-token-MessageBar-1406, ${tokens.borderRadiusMedium}))`,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: `var(--ctrl-token-MessageBar-1407, var(--semantic-token-MessageBar-1408, ${tokens.colorNeutralBackground3}))`\n});\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: `var(--ctrl-token-MessageBar-1409, var(--semantic-token-MessageBar-1410, ${tokens.fontSizeBase500}))`,\n marginRight: `var(--ctrl-token-MessageBar-1411, var(--semantic-token-MessageBar-1412, ${tokens.spacingHorizontalS}))`,\n color: `var(--ctrl-token-MessageBar-1413, var(--semantic-token-MessageBar-1414, ${tokens.colorNeutralForeground3}))`,\n display: 'flex',\n alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: `var(--ctrl-token-MessageBar-1415, var(--semantic-token-MessageBar-1416, ${tokens.spacingVerticalS}))`,\n gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: `var(--ctrl-token-MessageBar-1417, var(--semantic-token-MessageBar-1418, ${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: `var(--ctrl-token-MessageBar-1419, var(--semantic-token-MessageBar-1420, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBar-1421, var(--semantic-token-MessageBar-1422, ${tokens.spacingVerticalS}))`,\n marginRight: '0px'\n },\n square: {\n borderRadius: '0'\n }\n});\nconst useIconIntentStyles = makeStyles({\n info: {\n },\n error: {\n color: `var(--ctrl-token-MessageBar-1423, var(--semantic-token-MessageBar-1424, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-MessageBar-1425, var(--semantic-token-MessageBar-1426, ${tokens.colorStatusWarningForeground3}))`\n },\n success: {\n color: `var(--ctrl-token-MessageBar-1427, var(--semantic-token-MessageBar-1428, ${tokens.colorStatusSuccessForeground1}))`\n }\n});\nconst useRootIntentStyles = makeStyles({\n info: {\n },\n error: {\n backgroundColor: `var(--ctrl-token-MessageBar-1429, var(--semantic-token-MessageBar-1430, ${tokens.colorStatusDangerBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n },\n warning: {\n backgroundColor: `var(--ctrl-token-MessageBar-1431, var(--semantic-token-MessageBar-1432, ${tokens.colorStatusWarningBackground1}))`,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n },\n success: {\n backgroundColor: `var(--ctrl-token-MessageBar-1433, var(--semantic-token-MessageBar-1434, ${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 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconIntentStyles = useIconIntentStyles();\n const rootIntentStyles = useRootIntentStyles();\n const reflowSpacerStyles = useReflowSpacerBaseStyles();\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 if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAmFIC,4BAA4B;eAA5BA;;;uBArFqD;AAE/D,MAAMD,uBAAuB;IAChCE,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACxB;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;CAazB;AACD,MAAMC,oBAAiB,WAAA,GAAGD,IAAAA,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAOzB;AACD,MAAME,4BAAyB,WAAA,GAAGF,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGjC;AACD,MAAMG,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,eAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,2BAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAqBlB,MAAMC,sBAAmB,WAAA,GAAGpB,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA;QAAAD,QAAA;IAAA;IAAAE,SAAA;QAAAF,QAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAa5B,MAAMQ,sBAAmB,WAAA,GAAG1B,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAK,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,SAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,SAAA;QAAAE,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAb,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBjB,MAAM3B,+BAAgCyC,CAAAA;IAC7C;IACA,MAAMC,iBAAiBtC;IACvB,MAAMuC,iBAAiBrC;IACvB,MAAMsC,mBAAmBf;IACzB,MAAMgB,mBAAmBV;IACzB,MAAMW,qBAAqBvC;IAC3B,MAAMwC,SAASvC;IACfiC,MAAMxC,IAAI,CAAC+C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBE,IAAI,EAAEyC,gBAAgBD,MAAMS,MAAM,KAAK,eAAeH,OAAOrC,aAAa,EAAE+B,MAAMU,KAAK,KAAK,YAAYJ,OAAO1B,MAAM,EAAEwB,gBAAgB,CAACJ,MAAMW,MAAM,CAAC,EAAEX,MAAMY,mBAAmB,EAAEZ,MAAMxC,IAAI,CAAC+C,SAAS;IAC/P,IAAIP,MAAMvC,IAAI,EAAE;QACZuC,MAAMvC,IAAI,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBG,IAAI,EAAEyC,gBAAgBC,gBAAgB,CAACH,MAAMW,MAAM,CAAC,EAAEX,MAAMvC,IAAI,CAAC8C,SAAS;IACvI;IACA,IAAIP,MAAMtC,kBAAkB,EAAE;QAC1BsC,MAAMtC,kBAAkB,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBI,kBAAkB,EAAE2C;IAC/F;IACA,OAAOL;AACX"}

package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js CHANGED Viewed

@@ -23,26 +23,26 @@ const messageBarActionsClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1fr1ixz", "r1flwmss", [
-    ".r1fr1ixz{grid-area:secondaryActions;display:flex;column-gap:var(--1435, var(--1436, var(--spacingHorizontalM)));padding-right:var(--1437, var(--1438, var(--spacingHorizontalM)));}",
-    ".r1flwmss{grid-area:secondaryActions;display:flex;column-gap:var(--1435, var(--1436, var(--spacingHorizontalM)));padding-left:var(--1437, var(--1438, var(--spacingHorizontalM)));}"
+ */ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3tni6y", "r1r5nxge", [
+    ".r3tni6y{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-right:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}",
+    ".r1r5nxge{grid-area:secondaryActions;display:flex;column-gap:var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, var(--spacingHorizontalM)));padding-left:var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, var(--spacingHorizontalM)));}"
 ]);
-const useContainerActionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rlntmgg", "r1or7a25", [
-    ".rlntmgg{grid-area:actions;padding-right:var(--1439, var(--1440, var(--spacingHorizontalM)));}",
-    ".r1or7a25{grid-area:actions;padding-left:var(--1439, var(--1440, var(--spacingHorizontalM)));}"
+const useContainerActionBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r16ddk6c", "r1hnez12", [
+    ".r16ddk6c{grid-area:actions;padding-right:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}",
+    ".r1hnez12{grid-area:actions;padding-left:var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, var(--spacingHorizontalM)));}"
 ]);
 const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
         Brf1p80: "f1e8xxv9",
-        B6of3ja: "f131y9yo",
-        jrapky: "fmi70fv",
+        B6of3ja: "fu9glcb",
+        jrapky: "f14xjzdo",
         t21cq0: [
             "fibjyge",
             "f9yszdx"
         ],
         z189sj: [
-            "f1xbdom7",
-            "faa2w01"
+            "fh3kwj1",
+            "fexeaj2"
         ]
     },
     noActions: {
@@ -51,12 +51,12 @@ const useMultilineStyles = /*#__PURE__*/ (0, _react.__styles)({
 }, {
     d: [
         ".f1e8xxv9{justify-content:end;}",
-        ".f131y9yo{margin-top:var(--1441, var(--1442, var(--spacingVerticalMNudge)));}",
-        ".fmi70fv{margin-bottom:var(--1443, var(--1444, var(--spacingVerticalS)));}",
+        ".fu9glcb{margin-top:var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, var(--spacingVerticalMNudge)));}",
+        ".f14xjzdo{margin-bottom:var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, var(--spacingVerticalS)));}",
         ".fibjyge{margin-right:0px;}",
         ".f9yszdx{margin-left:0px;}",
-        ".f1xbdom7{padding-right:var(--1445, var(--1446, var(--spacingVerticalM)));}",
-        ".faa2w01{padding-left:var(--1445, var(--1446, var(--spacingVerticalM)));}",
+        ".fh3kwj1{padding-right:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}",
+        ".fexeaj2{padding-left:var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, var(--spacingVerticalM)));}",
         ".fjseox{display:none;}"
     ]
 });

package/lib-commonjs/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--1435, var(--1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--1437, var(--1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--1439, var(--1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--1441, var(--1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--1443, var(--1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--1445, var(--1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/\n Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\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.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"names":["messageBarActionsClassNames","useMessageBarActionsStyles_unstable","root","containerAction","useRootBaseStyles","__resetStyles","useContainerActionBaseStyles","useMultilineStyles","__styles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","mergeClasses","layout","hasActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,2BAA2B;eAA3BA;;IA8BIC,mCAAmC;eAAnCA;;;uBAhCyC;AAEnD,MAAMD,8BAA8B;IACvCE,MAAM;IACNC,iBAAiB;AACrB;AACA;;CAEA,GAAI,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,~~YAAA~~,YAAA;IAAA;IAAA;CAK7B;AACD,MAAMC,+BAA4B,WAAA,GAAGD,IAAAA,oBAAA,EAAA,~~WAAA~~,YAAA;IAAA;IAAA;CAGpC;AACD,MAAME,qBAAkB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAN,MAAA;QAAAO,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAchB,MAAMf,sCAAuCgB,CAAAA;IACpD;IACA,MAAMC,iBAAiBd;IACvB,MAAMe,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BE,IAAI,EAAEgB,gBAAgBD,MAAMM,MAAM,KAAK,eAAeH,gBAAgBlB,IAAI,EAAE,CAACe,MAAMO,UAAU,IAAIJ,gBAAgBN,SAAS,EAAEG,MAAMf,IAAI,CAACmB,SAAS;IAChN,IAAIJ,MAAMd,eAAe,EAAE;QACvBc,MAAMd,eAAe,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BG,eAAe,EAAEgB,2BAA2BF,MAAMd,eAAe,CAACkB,SAAS;IAC1J;IACA,OAAOJ;AACX"}
1	+ {"version":3,"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: `var(--ctrl-token-MessageBarActions-1435, var(--semantic-token-MessageBarActions-1436, ${tokens.spacingHorizontalM}))`,\n paddingRight: `var(--ctrl-token-MessageBarActions-1437, var(--semantic-token-MessageBarActions-1438, ${tokens.spacingHorizontalM}))`\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: `var(--ctrl-token-MessageBarActions-1439, var(--semantic-token-MessageBarActions-1440, ${tokens.spacingHorizontalM}))`\n});\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: `var(--ctrl-token-MessageBarActions-1441, var(--semantic-token-MessageBarActions-1442, ${tokens.spacingVerticalMNudge}))`,\n marginBottom: `var(--ctrl-token-MessageBarActions-1443, var(--semantic-token-MessageBarActions-1444, ${tokens.spacingVerticalS}))`,\n marginRight: '0px',\n paddingRight: `var(--ctrl-token-MessageBarActions-1445, var(--semantic-token-MessageBarActions-1446, ${tokens.spacingVerticalM}))`\n },\n noActions: {\n display: 'none'\n }\n});\n/\n Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n 'use no memo';\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.hasActions && multilineStyles.noActions, state.root.className);\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n }\n return state;\n};\n"],"names":["messageBarActionsClassNames","useMessageBarActionsStyles_unstable","root","containerAction","useRootBaseStyles","__resetStyles","useContainerActionBaseStyles","useMultilineStyles","__styles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","mergeClasses","layout","hasActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,2BAA2B;eAA3BA;;IA8BIC,mCAAmC;eAAnCA;;;uBAhCyC;AAEnD,MAAMD,8BAA8B;IACvCE,MAAM;IACNC,iBAAiB;AACrB;AACA;;CAEA,GAAI,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAK7B;AACD,MAAMC,+BAA4B,WAAA,GAAGD,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAA;IAAA;CAGpC;AACD,MAAME,qBAAkB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAN,MAAA;QAAAO,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAchB,MAAMf,sCAAuCgB,CAAAA;IACpD;IACA,MAAMC,iBAAiBd;IACvB,MAAMe,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMf,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BE,IAAI,EAAEgB,gBAAgBD,MAAMM,MAAM,KAAK,eAAeH,gBAAgBlB,IAAI,EAAE,CAACe,MAAMO,UAAU,IAAIJ,gBAAgBN,SAAS,EAAEG,MAAMf,IAAI,CAACmB,SAAS;IAChN,IAAIJ,MAAMd,eAAe,EAAE;QACvBc,MAAMd,eAAe,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,4BAA4BG,eAAe,EAAEgB,2BAA2BF,MAAMd,eAAe,CAACkB,SAAS;IAC1J;IACA,OAAOJ;AACX"}

package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js CHANGED Viewed

@@ -20,9 +20,9 @@ const _react = require("@griffel/react");
 const messageBarBodyClassNames = {
     root: 'fui-MessageBarBody'
 };
-const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r12sewiz", "r334ana", [
-    ".r12sewiz{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--1447, var(--1448, var(--spacingHorizontalM)));}",
-    ".r334ana{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--1447, var(--1448, var(--spacingHorizontalM)));}"
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r10i509y", "rc0w3vx", [
+    ".r10i509y{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-right:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}",
+    ".rc0w3vx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);grid-area:body;padding-left:var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, var(--spacingHorizontalM)));}"
 ]);
 const useMessageBarBodyStyles_unstable = (state)=>{
     'use no memo';

package/lib-commonjs/components/MessageBarBody/useMessageBarBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--1447, var(--1448, ${tokens.spacingHorizontalM}))`\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"names":["messageBarBodyClassNames","useMessageBarBodyStyles_unstable","root","useRootBaseStyles","__resetStyles","state","rootBaseStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,wBAAwB;eAAxBA;;IAUIC,gCAAgC;eAAhCA;;;uBAZ6B;AAEvC,MAAMD,2BAA2B;IACpCE,MAAM;AACV;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAIzB;AAGU,MAAMH,mCAAoCI,CAAAA;IACjD;IACA,MAAMC,iBAAiBH;IACvBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,yBAAyBE,IAAI,EAAEI,gBAAgBD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACX"}
1	+ {"version":3,"sources":["useMessageBarBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const messageBarBodyClassNames = {\n root: 'fui-MessageBarBody'\n};\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: `var(--ctrl-token-MessageBarBody-1447, var(--semantic-token-MessageBarBody-1448, ${tokens.spacingHorizontalM}))`\n});\n/*\n Apply styling to the MessageBarBody slots based on the state\n */ export const useMessageBarBodyStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n return state;\n};\n"],"names":["messageBarBodyClassNames","useMessageBarBodyStyles_unstable","root","useRootBaseStyles","__resetStyles","state","rootBaseStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,wBAAwB;eAAxBA;;IAUIC,gCAAgC;eAAhCA;;;uBAZ6B;AAEvC,MAAMD,2BAA2B;IACpCE,MAAM;AACV;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAIzB;AAGU,MAAMH,mCAAoCI,CAAAA;IACjD;IACA,MAAMC,iBAAiBH;IACvBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,yBAAyBE,IAAI,EAAEI,gBAAgBD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACX"}

package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js CHANGED Viewed

@@ -25,7 +25,7 @@ const messageBarGroupClassNames = {
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         Bf5fcs: "f4cll0y",
-        vin17d: "f1ixyhlk"
+        vin17d: "f1k9v4kp"
     },
     enter: {
         Bv12yb3: "f1dg9w1v"
@@ -36,7 +36,7 @@ const messageBarGroupClassNames = {
 }, {
     d: [
         ".f4cll0y{animation-fill-mode:forwards;}",
-        ".f1ixyhlk{animation-duration:var(--1449, var(--1450, var(--durationNormal)));}",
+        ".f1k9v4kp{animation-duration:var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, var(--durationNormal)));}",
         ".f1dg9w1v{animation-name:fngeioi;}",
         ".fu80iee{animation-name:fk0lfw7;}"
     ],

package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--1449, var(--1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/\n Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"names":["messageBarGroupClassNames","useMessageBarGroupStyles_unstable","root","useStyles","__styles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","state","styles","className","mergeClasses","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAmCIC,iCAAiC;eAAjCA;;;uBArCwB;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAD,SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AA8BX,MAAMX,oCAAqCY,CAAAA;IAClD;IACA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,0BAA0BE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACxFF,MAAMI,WAAW,GAAGD,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAON,KAAK;IAC1DK,MAAMK,UAAU,GAAGF,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAOJ,IAAI;IACxD,OAAOG;AACX"}
1	+ {"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: `var(--ctrl-token-MessageBarGroup-1449, var(--semantic-token-MessageBarGroup-1450, ${tokens.durationNormal}))`\n },\n enter: {\n animationName: {\n from: {\n opacity: 0,\n transform: 'translateY(-100%)'\n },\n to: {\n opacity: 1,\n transform: 'translateY(0)'\n }\n }\n },\n exit: {\n animationName: {\n from: {\n opacity: 1\n },\n to: {\n opacity: 0\n }\n }\n }\n});\n/\n Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n state.enterStyles = mergeClasses(styles.base, styles.enter);\n state.exitStyles = mergeClasses(styles.base, styles.exit);\n return state;\n};\n"],"names":["messageBarGroupClassNames","useMessageBarGroupStyles_unstable","root","useStyles","__styles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","state","styles","className","mergeClasses","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAmCIC,iCAAiC;eAAjCA;;;uBArCwB;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAD,SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AA8BX,MAAMX,oCAAqCY,CAAAA;IAClD;IACA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,0BAA0BE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACxFF,MAAMI,WAAW,GAAGD,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAON,KAAK;IAC1DK,MAAMK,UAAU,GAAGF,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAOJ,IAAI;IACxD,OAAOG;AACX"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-message-bar",
-  "version": "0.0.0-nightly-20240819-2052.1",
+  "version": "0.0.0-nightly-20240819-2137.1",
   "description": "Fluent UI MessageBar component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -24,18 +24,18 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240819-2137.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2137.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-button": "0.0.0-nightly-20240819-2137.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2137.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2137.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240819-2137.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240819-2137.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1",
     "react-transition-group": "^4.4.1"