npm - @fluentui/react-message-bar - Versions diffs - 9.5.3 → 9.6.0 - Mend

@fluentui/react-message-bar 9.5.3 → 9.6.0

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 (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-message-bar
-This log was last generated on Fri, 27 Jun 2025 13:36:33 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:41 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.6.0)
+Thu, 17 Jul 2025 13:45:41 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.5.4..@fluentui/react-message-bar_v9.6.0)
+### Minor changes
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-button to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-link to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.5.4)
+Fri, 11 Jul 2025 15:59:22 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.5.3..@fluentui/react-message-bar_v9.5.4)
+### Patches
+- fix: MessageBarActions renders slots with keys ([PR #34801](https://github.com/microsoft/fluentui/pull/34801) by lingfangao@hotmail.com)
 ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.5.3)
-Fri, 27 Jun 2025 13:36:33 GMT
+Fri, 27 Jun 2025 13:39:41 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.5.2..@fluentui/react-message-bar_v9.5.3)
 ### Patches

package/lib/components/MessageBar/useMessageBarStyles.styles.raw.js ADDED Viewed

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

package/lib/components/MessageBar/useMessageBarStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3,\n});\n\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions',\n});\n\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `,\n },\n\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n },\n\n square: {\n borderRadius: '0',\n },\n});\n\nconst useIconIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground3,\n },\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n});\n\nconst useRootIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1),\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1),\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),\n },\n});\n\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n 'use no memo';\n\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\n state.root.className = mergeClasses(\n messageBarClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && styles.rootMultiline,\n state.shape === 'square' && styles.square,\n rootIntentStyles[state.intent],\n state.transitionClassName,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n messageBarClassNames.icon,\n iconBaseStyles,\n iconIntentStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/MessageBarActions/renderMessageBarActions.js CHANGED Viewed

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

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

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

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const messageBarActionsClassNames = {
+    root: 'fui-MessageBarActions',
+    containerAction: 'fui-MessageBarActions__containerAction'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = makeResetStyles({
+    gridArea: 'secondaryActions',
+    display: 'flex',
+    columnGap: tokens.spacingHorizontalM,
+    paddingRight: tokens.spacingHorizontalM
+});
+const useContainerActionBaseStyles = makeResetStyles({
+    gridArea: 'actions',
+    paddingRight: tokens.spacingHorizontalM
+});
+const useMultilineStyles = makeStyles({
+    root: {
+        justifyContent: 'end',
+        marginTop: tokens.spacingVerticalMNudge,
+        marginBottom: tokens.spacingVerticalS,
+        marginRight: '0px',
+        paddingRight: tokens.spacingVerticalM
+    },
+    noActions: {
+        display: 'none'
+    }
+});
+/**
+ * Apply styling to the MessageBarActions slots based on the state
+ */ export const useMessageBarActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const containerActionBaseStyles = useContainerActionBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);
+    if (state.containerAction) {
+        state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);
+    }
+    return state;
+};

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM,\n },\n\n noActions: {\n display: 'none',\n },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(\n messageBarActionsClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && multilineStyles.root,\n !state.hasActions && multilineStyles.noActions,\n state.root.className,\n );\n\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(\n messageBarActionsClassNames.containerAction,\n containerActionBaseStyles,\n state.containerAction.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","gridArea","display","columnGap","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBP,gBAAgB;IACxCQ,UAAU;IACVC,SAAS;IACTC,WAAWP,OAAOQ,kBAAkB;IACpCC,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAME,+BAA+Bb,gBAAgB;IACnDQ,UAAU;IACVI,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAMG,qBAAqBb,WAAW;IACpCI,MAAM;QACJU,gBAAgB;QAChBC,WAAWb,OAAOc,qBAAqB;QACvCC,cAAcf,OAAOgB,gBAAgB;QACrCC,aAAa;QACbR,cAAcT,OAAOkB,gBAAgB;IACvC;IAEAC,WAAW;QACTb,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMc,sCAAsC,CAACC;IAClD;IAEA,MAAMC,iBAAiBlB;IACvB,MAAMmB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMnB,IAAI,CAACuB,SAAS,GAAG1B,aACrBE,4BAA4BC,IAAI,EAChCoB,gBACAD,MAAMK,MAAM,KAAK,eAAeF,gBAAgBtB,IAAI,EACpD,CAACmB,MAAMM,UAAU,IAAIH,gBAAgBL,SAAS,EAC9CE,MAAMnB,IAAI,CAACuB,SAAS;IAGtB,IAAIJ,MAAMlB,eAAe,EAAE;QACzBkB,MAAMlB,eAAe,CAACsB,SAAS,GAAG1B,aAChCE,4BAA4BE,eAAe,EAC3CoB,2BACAF,MAAMlB,eAAe,CAACsB,SAAS;IAEnC;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const messageBarBodyClassNames = {
+    root: 'fui-MessageBarBody'
+};
+const useRootBaseStyles = makeResetStyles({
+    ...typographyStyles.body1,
+    gridArea: 'body',
+    paddingRight: tokens.spacingHorizontalM
+});
+/**
+ * Apply styling to the MessageBarBody slots based on the state
+ */ export const useMessageBarBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

package/lib/components/MessageBarBody/useMessageBarBodyStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots> = {\n root: 'fui-MessageBarBody',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM,\n});\n\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */\nexport const useMessageBarBodyStyles_unstable = (state: MessageBarBodyState): MessageBarBodyState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","messageBarBodyClassNames","root","useRootBaseStyles","body1","gridArea","paddingRight","spacingHorizontalM","useMessageBarBodyStyles_unstable","state","rootBaseStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBN,gBAAgB;IACxC,GAAGG,iBAAiBI,KAAK;IACzBC,UAAU;IACVC,cAAcP,OAAOQ,kBAAkB;AACzC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,iBAAiBP;IACvBM,MAAMP,IAAI,CAACS,SAAS,GAAGb,aAAaG,yBAAyBC,IAAI,EAAEQ,gBAAgBD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT,EAAE"}

package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const messageBarGroupClassNames = {
+    root: 'fui-MessageBarGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    base: {
+        animationFillMode: 'forwards',
+        animationDuration: tokens.durationNormal
+    },
+    enter: {
+        animationName: {
+            from: {
+                opacity: 0,
+                transform: 'translateY(-100%)'
+            },
+            to: {
+                opacity: 1,
+                transform: 'translateY(0)'
+            }
+        }
+    },
+    exit: {
+        animationName: {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the MessageBarGroup slots based on the state
+ */ export const useMessageBarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
+    state.enterStyles = mergeClasses(styles.base, styles.enter);
+    state.exitStyles = mergeClasses(styles.base, styles.exit);
+    return state;
+};

package/lib/components/MessageBarGroup/useMessageBarGroupStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\n\nexport const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {\n root: 'fui-MessageBarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: tokens.durationNormal,\n },\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\n exit: {\n animationName: {\n from: {\n opacity: 1,\n },\n to: {\n opacity: 0,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */\nexport const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {\n 'use no memo';\n\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":["makeStyles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","animationFillMode","animationDuration","durationNormal","enter","animationName","from","opacity","transform","to","exit","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BM,MAAM;QACJC,mBAAmB;QACnBC,mBAAmBN,OAAOO,cAAc;IAC1C;IAEAC,OAAO;QACLC,eAAe;YACbC,MAAM;gBACJC,SAAS;gBACTC,WAAW;YACb;YACAC,IAAI;gBACFF,SAAS;gBACTC,WAAW;YACb;QACF;IACF;IAEAE,MAAM;QACJL,eAAe;YACbC,MAAM;gBACJC,SAAS;YACX;YACAE,IAAI;gBACFF,SAAS;YACX;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGnB,aAAaE,0BAA0BC,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IACxFF,MAAMG,WAAW,GAAGpB,aAAakB,OAAOb,IAAI,EAAEa,OAAOT,KAAK;IAC1DQ,MAAMI,UAAU,GAAGrB,aAAakB,OAAOb,IAAI,EAAEa,OAAOH,IAAI;IACxD,OAAOE;AACT,EAAE"}

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+export const messageBarTitleClassNames = {
+    root: 'fui-MessageBarTitle'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = makeResetStyles({
+    ...typographyStyles.body1Strong,
+    '::after': {
+        content: '" "'
+    }
+});
+/**
+ * Apply styling to the MessageBarTitle slots based on the state
+ */ export const useMessageBarTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

package/lib/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\n\nexport const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots> = {\n root: 'fui-MessageBarTitle',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"',\n },\n});\n\n/**\n * Apply styling to the MessageBarTitle slots based on the state\n */\nexport const useMessageBarTitleStyles_unstable = (state: MessageBarTitleState): MessageBarTitleState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","typographyStyles","messageBarTitleClassNames","root","useRootBaseStyles","body1Strong","content","useMessageBarTitleStyles_unstable","state","rootBaseStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,gBAAgB,QAAQ,wBAAwB;AAIzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBL,gBAAgB;IACxC,GAAGE,iBAAiBI,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,iBAAiBL;IACvBI,MAAML,IAAI,CAACO,SAAS,GAAGV,aAAaE,0BAA0BC,IAAI,EAAEM,gBAAgBD,MAAML,IAAI,CAACO,SAAS;IAExG,OAAOF;AACT,EAAE"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n root: 'fui-MessageBar',\n icon: 'fui-MessageBar__icon',\n bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n whiteSpace: 'nowrap',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr auto auto',\n gridTemplateRows: '1fr',\n gridTemplateAreas: '\"icon body secondaryActions actions\"',\n paddingLeft: tokens.spacingHorizontalM,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n alignItems: 'center',\n minHeight: '36px',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground3,\n});\n\nconst useIconBaseStyles = makeResetStyles({\n gridArea: 'icon',\n fontSize: tokens.fontSizeBase500,\n marginRight: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n alignItems: 'center',\n});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n marginBottom: tokens.spacingVerticalS,\n gridArea: 'secondaryActions',\n});\n\nconst useStyles = makeStyles({\n rootMultiline: {\n whiteSpace: 'normal',\n alignItems: 'start',\n paddingTop: tokens.spacingVerticalMNudge,\n gridTemplateColumns: 'auto 1fr auto',\n gridTemplateAreas: `\n \"icon body actions\"\n \"secondaryActions secondaryActions secondaryActions\"\n `,\n },\n\n secondaryActionsMultiline: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n },\n\n square: {\n borderRadius: '0',\n },\n});\n\nconst useIconIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n color: tokens.colorStatusDangerForeground1,\n },\n warning: {\n color: tokens.colorStatusWarningForeground3,\n },\n success: {\n color: tokens.colorStatusSuccessForeground1,\n },\n});\n\nconst useRootIntentStyles = makeStyles({\n info: {\n /** already in base reset styles */\n },\n error: {\n backgroundColor: tokens.colorStatusDangerBackground1,\n ...shorthands.borderColor(tokens.colorStatusDangerBorder1),\n },\n warning: {\n backgroundColor: tokens.colorStatusWarningBackground1,\n ...shorthands.borderColor(tokens.colorStatusWarningBorder1),\n },\n success: {\n backgroundColor: tokens.colorStatusSuccessBackground1,\n ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),\n },\n});\n\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n 'use no memo';\n\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\n state.root.className = mergeClasses(\n messageBarClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && styles.rootMultiline,\n state.shape === 'square' && styles.square,\n rootIntentStyles[state.intent],\n state.transitionClassName,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n messageBarClassNames.icon,\n iconBaseStyles,\n iconIntentStyles[state.intent],\n state.icon.className,\n );\n }\n\n if (state.bottomReflowSpacer) {\n state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n }\n\n return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","makeResetStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","tokens","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","makeStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","shorthands","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MessageBarActions/renderMessageBarActions.js CHANGED Viewed

@@ -13,20 +13,12 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactbutton = require("@fluentui/react-button");
 const renderMessageBarActions_unstable = (state, contexts)=>{
     (0, _reactutilities.assertSlots)(state);
-    if (state.layout === 'multiline') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
-            value: contexts.button,
-            children: [
-                state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {}),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
-            ]
-        });
-    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactbutton.ButtonContextProvider, {
         value: contexts.button,
         children: [
+            state.layout === 'multiline' && state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {}, "containerAction"),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
-            state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {})
+            state.layout !== 'multiline' && state.containerAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.containerAction, {}, "containerAction")
         ]
     });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBarActions/renderMessageBarActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n MessageBarActionsState,\n MessageBarActionsSlots,\n MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/\n Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n state: MessageBarActionsState,\n contexts: MessageBarActionsContextValues,\n) => {\n assertSlots<MessageBarActionsSlots>(state);\n ~~if (state.layout === 'multiline') {~~\n return (\n <ButtonContextProvider value={contexts.button}>\n {state.~~containerAction~~ && <state.containerAction ~~/>}\n~~ <state.~~root~~ ~~/>\n </ButtonContextProvider>\n );\n }~~\~~n\n return~~ (\n ~~<ButtonContextProvider value={contexts.button}>\n~~ <state.root />\n {state.containerAction && <state.containerAction />}\n </ButtonContextProvider>\n );\n};\n"],"names":["renderMessageBarActions_unstable","state","contexts","assertSlots","~~layout","~~_jsxs","ButtonContextProvider","value","button","containerAction","_jsx","root"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;gCAE4B;6BAMU;AAK/B,MAAMA,mCAAmC,CAC9CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAoCF;~~IACpC~~,~~IAAIA,MAAMG,MAAM,KAAK,aAAa;QAChC,~~OAAA,WAAA,~~GACEC~~,IAAAA,gBAAA,EAACC,kCAAAA,EAAAA;~~YAAsBC~~,~~OAAOL~~,~~SAASM~~,MAAM;;~~gBAC1CP~~,MAAMQ,eAAe,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACT,MAAMQ,eAAe,EAAA,CAAA;~~8BAChDC~~,IAAAA,eAAA,EAACT,MAAMU,IAAI,EAAA,CAAA~~;;;IAGjB~~;~~IAEA~~,~~OAAA~~,~~WAAA,GACEN,IAAAA,gBAAA,EAACC,kCAAAA,EAAAA;QAAsBC,OAAOL,SAASM,~~MAAM~~;;0BAC3CE~~,~~IAAAA~~,~~eAAA~~,~~EAACT,MAAMU,IAAI,EAAA,CAAA;YACVV,~~MAAMQ,eAAe,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACT,MAAMQ,eAAe,EAAA,CAAA;;;~~AAGtD~~"}
1	+ {"version":3,"sources":["../src/components/MessageBarActions/renderMessageBarActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n MessageBarActionsState,\n MessageBarActionsSlots,\n MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/\n Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n state: MessageBarActionsState,\n contexts: MessageBarActionsContextValues,\n) => {\n assertSlots<MessageBarActionsSlots>(state);\n\n return (\n <ButtonContextProvider value={contexts.button}>\n {state.layout === 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n <state.root />\n {state.layout !== 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n </ButtonContextProvider>\n );\n};\n"],"names":["renderMessageBarActions_unstable","state","contexts","assertSlots","_jsxs","ButtonContextProvider","value","button","layout","containerAction","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;gCAE4B;6BAMU;AAK/B,MAAMA,mCAAmC,CAC9CC,OACAC;IAEAC,IAAAA,2BAAAA,EAAoCF;IAEpC,OAAA,WAAA,GACEG,IAAAA,gBAAA,EAACC,kCAAAA,EAAAA;QAAsBC,OAAOJ,SAASK,MAAM;;YAC1CN,MAAMO,MAAM,KAAK,eAAeP,MAAMQ,eAAe,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACT,MAAMQ,eAAe,EAAA,CAAA,GAAK;0BACrFC,IAAAA,eAAA,EAACT,MAAMU,IAAI,EAAA,CAAA;YACVV,MAAMO,MAAM,KAAK,eAAeP,MAAMQ,eAAe,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACT,MAAMQ,eAAe,EAAA,CAAA,GAAK;;;AAG3F"}

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    messageBarActionsClassNames: function() {
+        return messageBarActionsClassNames;
+    },
+    useMessageBarActionsStyles_unstable: function() {
+        return useMessageBarActionsStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarActionsClassNames = {
+    root: 'fui-MessageBarActions',
+    containerAction: 'fui-MessageBarActions__containerAction'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = (0, _react.makeResetStyles)({
+    gridArea: 'secondaryActions',
+    display: 'flex',
+    columnGap: _reacttheme.tokens.spacingHorizontalM,
+    paddingRight: _reacttheme.tokens.spacingHorizontalM
+});
+const useContainerActionBaseStyles = (0, _react.makeResetStyles)({
+    gridArea: 'actions',
+    paddingRight: _reacttheme.tokens.spacingHorizontalM
+});
+const useMultilineStyles = (0, _react.makeStyles)({
+    root: {
+        justifyContent: 'end',
+        marginTop: _reacttheme.tokens.spacingVerticalMNudge,
+        marginBottom: _reacttheme.tokens.spacingVerticalS,
+        marginRight: '0px',
+        paddingRight: _reacttheme.tokens.spacingVerticalM
+    },
+    noActions: {
+        display: 'none'
+    }
+});
+const useMessageBarActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const containerActionBaseStyles = useContainerActionBaseStyles();
+    const multilineStyles = useMultilineStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);
+    if (state.containerAction) {
+        state.containerAction.className = (0, _react.mergeClasses)(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n root: 'fui-MessageBarActions',\n containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n gridArea: 'secondaryActions',\n display: 'flex',\n columnGap: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n gridArea: 'actions',\n paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n root: {\n justifyContent: 'end',\n marginTop: tokens.spacingVerticalMNudge,\n marginBottom: tokens.spacingVerticalS,\n marginRight: '0px',\n paddingRight: tokens.spacingVerticalM,\n },\n\n noActions: {\n display: 'none',\n },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const containerActionBaseStyles = useContainerActionBaseStyles();\n const multilineStyles = useMultilineStyles();\n state.root.className = mergeClasses(\n messageBarActionsClassNames.root,\n rootBaseStyles,\n state.layout === 'multiline' && multilineStyles.root,\n !state.hasActions && multilineStyles.noActions,\n state.root.className,\n );\n\n if (state.containerAction) {\n state.containerAction.className = mergeClasses(\n messageBarActionsClassNames.containerAction,\n containerActionBaseStyles,\n state.containerAction.className,\n );\n }\n\n return state;\n};\n"],"names":["messageBarActionsClassNames","useMessageBarActionsStyles_unstable","root","containerAction","useRootBaseStyles","makeResetStyles","gridArea","display","columnGap","tokens","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","makeStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","mergeClasses","layout","hasActions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IAqCAC,mCAAAA;eAAAA;;;uBA1C6C;4BAEnC;AAGhB,MAAMD,8BAAsE;IACjFE,MAAM;IACNC,iBAAiB;AACnB;AAEA;;CAEC,GACD,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxCC,UAAU;IACVC,SAAS;IACTC,WAAWC,kBAAAA,CAAOC,kBAAkB;IACpCC,cAAcF,kBAAAA,CAAOC,kBAAkB;AACzC;AAEA,MAAME,+BAA+BP,IAAAA,sBAAAA,EAAgB;IACnDC,UAAU;IACVK,cAAcF,kBAAAA,CAAOC,kBAAkB;AACzC;AAEA,MAAMG,qBAAqBC,IAAAA,iBAAAA,EAAW;IACpCZ,MAAM;QACJa,gBAAgB;QAChBC,WAAWP,kBAAAA,CAAOQ,qBAAqB;QACvCC,cAAcT,kBAAAA,CAAOU,gBAAgB;QACrCC,aAAa;QACbT,cAAcF,kBAAAA,CAAOY,gBAAgB;IACvC;IAEAC,WAAW;QACTf,SAAS;IACX;AACF;AAKO,MAAMN,sCAAsC,CAACsB;IAClD;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMrB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAAA,EACrB5B,4BAA4BE,IAAI,EAChCsB,gBACAD,MAAMM,MAAM,KAAK,eAAeH,gBAAgBxB,IAAI,EACpD,CAACqB,MAAMO,UAAU,IAAIJ,gBAAgBJ,SAAS,EAC9CC,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,eAAe,EAAE;QACzBoB,MAAMpB,eAAe,CAACwB,SAAS,GAAGC,IAAAA,mBAAAA,EAChC5B,4BAA4BG,eAAe,EAC3CsB,2BACAF,MAAMpB,eAAe,CAACwB,SAAS;IAEnC;IAEA,OAAOJ;AACT"}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    messageBarBodyClassNames: function() {
+        return messageBarBodyClassNames;
+    },
+    useMessageBarBodyStyles_unstable: function() {
+        return useMessageBarBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarBodyClassNames = {
+    root: 'fui-MessageBarBody'
+};
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.body1,
+    gridArea: 'body',
+    paddingRight: _reacttheme.tokens.spacingHorizontalM
+});
+const useMessageBarBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarBody/useMessageBarBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots> = {\n root: 'fui-MessageBarBody',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1,\n gridArea: 'body',\n paddingRight: tokens.spacingHorizontalM,\n});\n\n/**\n * Apply styling to the MessageBarBody slots based on the state\n */\nexport const useMessageBarBodyStyles_unstable = (state: MessageBarBodyState): MessageBarBodyState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarBodyClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["messageBarBodyClassNames","useMessageBarBodyStyles_unstable","root","useRootBaseStyles","makeResetStyles","typographyStyles","body1","gridArea","paddingRight","tokens","spacingHorizontalM","state","rootBaseStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAaAC,gCAAAA;eAAAA;;;uBAlBiC;4BAGL;AAElC,MAAMD,2BAAgE;IAC3EE,MAAM;AACR;AAEA,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxC,GAAGC,4BAAAA,CAAiBC,KAAK;IACzBC,UAAU;IACVC,cAAcC,kBAAAA,CAAOC,kBAAkB;AACzC;AAKO,MAAMT,mCAAmC,CAACU;IAC/C;IAEA,MAAMC,iBAAiBT;IACvBQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EAAad,yBAAyBE,IAAI,EAAEU,gBAAgBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT"}

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    messageBarGroupClassNames: function() {
+        return messageBarGroupClassNames;
+    },
+    useMessageBarGroupStyles_unstable: function() {
+        return useMessageBarGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarGroupClassNames = {
+    root: 'fui-MessageBarGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    base: {
+        animationFillMode: 'forwards',
+        animationDuration: _reacttheme.tokens.durationNormal
+    },
+    enter: {
+        animationName: {
+            from: {
+                opacity: 0,
+                transform: 'translateY(-100%)'
+            },
+            to: {
+                opacity: 1,
+                transform: 'translateY(0)'
+            }
+        }
+    },
+    exit: {
+        animationName: {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
+        }
+    }
+});
+const useMessageBarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
+    state.enterStyles = (0, _react.mergeClasses)(styles.base, styles.enter);
+    state.exitStyles = (0, _react.mergeClasses)(styles.base, styles.exit);
+    return state;
+};

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\n\nexport const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots> = {\n root: 'fui-MessageBarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n animationFillMode: 'forwards',\n animationDuration: tokens.durationNormal,\n },\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\n exit: {\n animationName: {\n from: {\n opacity: 1,\n },\n to: {\n opacity: 0,\n },\n },\n },\n});\n\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */\nexport const useMessageBarGroupStyles_unstable = (state: MessageBarGroupState): MessageBarGroupState => {\n 'use no memo';\n\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","makeStyles","base","animationFillMode","animationDuration","tokens","durationNormal","enter","animationName","from","opacity","transform","to","exit","state","styles","className","mergeClasses","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,yBAAAA;eAAAA;;IAyCAC,iCAAAA;eAAAA;;;uBA9C4B;4BAClB;AAIhB,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,MAAM;QACJC,mBAAmB;QACnBC,mBAAmBC,kBAAAA,CAAOC,cAAc;IAC1C;IAEAC,OAAO;QACLC,eAAe;YACbC,MAAM;gBACJC,SAAS;gBACTC,WAAW;YACb;YACAC,IAAI;gBACFF,SAAS;gBACTC,WAAW;YACb;QACF;IACF;IAEAE,MAAM;QACJL,eAAe;YACbC,MAAM;gBACJC,SAAS;YACX;YACAE,IAAI;gBACFF,SAAS;YACX;QACF;IACF;AACF;AAKO,MAAMZ,oCAAoC,CAACgB;IAChD;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAAA,EAAapB,0BAA0BE,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACxFF,MAAMI,WAAW,GAAGD,IAAAA,mBAAAA,EAAaF,OAAOb,IAAI,EAAEa,OAAOR,KAAK;IAC1DO,MAAMK,UAAU,GAAGF,IAAAA,mBAAAA,EAAaF,OAAOb,IAAI,EAAEa,OAAOF,IAAI;IACxD,OAAOC;AACT"}

package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    messageBarTitleClassNames: function() {
+        return messageBarTitleClassNames;
+    },
+    useMessageBarTitleStyles_unstable: function() {
+        return useMessageBarTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const messageBarTitleClassNames = {
+    root: 'fui-MessageBarTitle'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.body1Strong,
+    '::after': {
+        content: '" "'
+    }
+});
+const useMessageBarTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);
+    return state;
+};

package/lib-commonjs/components/MessageBarTitle/useMessageBarTitleStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarTitle/useMessageBarTitleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarTitleSlots, MessageBarTitleState } from './MessageBarTitle.types';\n\nexport const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots> = {\n root: 'fui-MessageBarTitle',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n ...typographyStyles.body1Strong,\n '::after': {\n content: '\" \"',\n },\n});\n\n/**\n * Apply styling to the MessageBarTitle slots based on the state\n */\nexport const useMessageBarTitleStyles_unstable = (state: MessageBarTitleState): MessageBarTitleState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n state.root.className = mergeClasses(messageBarTitleClassNames.root, rootBaseStyles, state.root.className);\n\n return state;\n};\n"],"names":["messageBarTitleClassNames","useMessageBarTitleStyles_unstable","root","useRootBaseStyles","makeResetStyles","typographyStyles","body1Strong","content","state","rootBaseStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,yBAAAA;eAAAA;;IAiBAC,iCAAAA;eAAAA;;;uBAtBiC;4BACb;AAI1B,MAAMD,4BAAkE;IAC7EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,oBAAoBC,IAAAA,sBAAAA,EAAgB;IACxC,GAAGC,4BAAAA,CAAiBC,WAAW;IAC/B,WAAW;QACTC,SAAS;IACX;AACF;AAKO,MAAMN,oCAAoC,CAACO;IAChD;IAEA,MAAMC,iBAAiBN;IACvBK,MAAMN,IAAI,CAACQ,SAAS,GAAGC,IAAAA,mBAAAA,EAAaX,0BAA0BE,IAAI,EAAEO,gBAAgBD,MAAMN,IAAI,CAACQ,SAAS;IAExG,OAAOF;AACT"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-message-bar",
-  "version": "9.5.3",
+  "version": "9.6.0",
   "description": "Fluent UI MessageBar component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,14 +15,15 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*"
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.5.3",
+    "@fluentui/react-button": "^9.6.0",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-link": "^9.5.3",
+    "@fluentui/react-link": "^9.6.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",