@fluentui/react-message-bar 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/lib-commonjs/MessageBarGroup.cjs

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MessageBarGroup: function() {
+    get MessageBarGroup () {
         return _index.MessageBarGroup;
     },
-    messageBarGroupClassNames: function() {
+    get messageBarGroupClassNames () {
         return _index.messageBarGroupClassNames;
     },
-    renderMessageBarGroup_unstable: function() {
+    get renderMessageBarGroup_unstable () {
         return _index.renderMessageBarGroup_unstable;
     },
-    useMessageBarGroupStyles_unstable: function() {
+    get useMessageBarGroupStyles_unstable () {
         return _index.useMessageBarGroupStyles_unstable;
     },
-    useMessageBarGroup_unstable: function() {
+    get useMessageBarGroup_unstable () {
         return _index.useMessageBarGroup_unstable;
     }
 });

package/lib-commonjs/MessageBarTitle.cjs

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MessageBarTitle: function() {
+    get MessageBarTitle () {
         return _index.MessageBarTitle;
     },
-    messageBarTitleClassNames: function() {
+    get messageBarTitleClassNames () {
         return _index.messageBarTitleClassNames;
     },
-    renderMessageBarTitle_unstable: function() {
+    get renderMessageBarTitle_unstable () {
         return _index.renderMessageBarTitle_unstable;
     },
-    useMessageBarTitleStyles_unstable: function() {
+    get useMessageBarTitleStyles_unstable () {
         return _index.useMessageBarTitleStyles_unstable;
     },
-    useMessageBarTitle_unstable: function() {
+    get useMessageBarTitle_unstable () {
         return _index.useMessageBarTitle_unstable;
     }
 });

package/lib-commonjs/components/MessageBar/MessageBar.cjs.map

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

package/lib-commonjs/components/MessageBar/MessageBar.module.css

@@ -0,0 +1,70 @@
+@layer fluentui {
+  .root {
+    white-space: nowrap;
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'icon body secondaryActions actions';
+    padding-inline-start: var(--spacingHorizontalM);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    border-radius: var(--borderRadiusMedium);
+    align-items: center;
+    min-height: calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalXS));
+    box-sizing: border-box;
+    background-color: var(--colorNeutralBackground3);
+  }
+  .icon {
+    grid-area: icon;
+    font-size: var(--fontSizeBase500);
+    margin-inline-end: var(--spacingHorizontalS);
+    color: var(--colorNeutralForeground3);
+    display: flex;
+    align-items: center;
+  }
+  .bottomReflowSpacer {
+    margin-bottom: var(--spacingVerticalS);
+    grid-area: secondaryActions;
+  }
+  .multiline {
+    white-space: normal;
+    align-items: start;
+    padding-top: var(--spacingVerticalMNudge);
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'icon body actions'
+      'secondaryActions secondaryActions secondaryActions';
+  }
+  .square {
+    border-radius: 0;
+  }
+  .error {
+    background-color: var(--colorStatusDangerBackground1);
+    border-top-color: var(--colorStatusDangerBorder1);
+    border-right-color: var(--colorStatusDangerBorder1);
+    border-bottom-color: var(--colorStatusDangerBorder1);
+    border-left-color: var(--colorStatusDangerBorder1);
+  }
+  .warning {
+    background-color: var(--colorStatusWarningBackground1);
+    border-top-color: var(--colorStatusWarningBorder1);
+    border-right-color: var(--colorStatusWarningBorder1);
+    border-bottom-color: var(--colorStatusWarningBorder1);
+    border-left-color: var(--colorStatusWarningBorder1);
+  }
+  .success {
+    background-color: var(--colorStatusSuccessBackground1);
+    border-top-color: var(--colorStatusSuccessBorder1);
+    border-right-color: var(--colorStatusSuccessBorder1);
+    border-bottom-color: var(--colorStatusSuccessBorder1);
+    border-left-color: var(--colorStatusSuccessBorder1);
+  }
+  :where(.error) > .icon {
+    color: var(--colorStatusDangerForeground1);
+  }
+  :where(.warning) > .icon {
+    color: var(--colorStatusWarningForeground3);
+  }
+  :where(.success) > .icon {
+    color: var(--colorStatusSuccessForeground1);
+  }
+}

package/lib-commonjs/components/MessageBar/MessageBar.types.cjs.map

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

package/lib-commonjs/components/MessageBar/getIntentIcon.cjs.map

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

package/lib-commonjs/components/MessageBar/index.cjs

@@ -5,29 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MessageBar: function() {
+    get MessageBar () {
         return _MessageBar.MessageBar;
     },
-    messageBarClassNames: function() {
+    get messageBarClassNames () {
         return _useMessageBarStylesstyles.messageBarClassNames;
     },
-    renderMessageBar_unstable: function() {
+    get renderMessageBar_unstable () {
         return _renderMessageBar.renderMessageBar_unstable;
     },
-    useMessageBarBase_unstable: function() {
+    get useMessageBarBase_unstable () {
         return _useMessageBar.useMessageBarBase_unstable;
     },
-    useMessageBarContextValue_unstable: function() {
+    get useMessageBarContextValue_unstable () {
         return _useMessageBarContextValues.useMessageBarContextValue_unstable;
     },
-    useMessageBarStyles_unstable: function() {
+    get useMessageBarStyles_unstable () {
         return _useMessageBarStylesstyles.useMessageBarStyles_unstable;
     },
-    useMessageBar_unstable: function() {
+    get useMessageBar_unstable () {
         return _useMessageBar.useMessageBar_unstable;
     }
 });

package/lib-commonjs/components/MessageBar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBarBase_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":";;;;;;;;;;;IAASA;qCAAU;;IAYVI;8DAAoB;;;eAFpBH,2CAAyB;;;eACzBC,yCAA0B;;;eAE1BI,8DAAkC;;;eADZD,uDAA4B;;;eADtBF,qCAAsB;;;4BAXhC,kBAAe;kCAUA,wBAAqB;+BACI,qBAAkB;2CAClB,kCAA+B;4CAC/C,kCAA+B"}
+{"version":3,"sources":["../../../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBarBase_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAYVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACzBC,yCAA0B;;;eAE1BI,8DAAkC;;;eADZD,uDAA4B;;;eADtBF,qCAAsB;;;4BAXhC,kBAAe;kCAUA,wBAAqB;+BACI,qBAAkB;2CAClB,kCAA+B;4CAC/C,kCAA+B"}

package/lib-commonjs/components/MessageBar/renderMessageBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (\n  state: MessageBarBaseState,\n  contexts: MessageBarContextValues,\n): JSXElement => {\n  assertSlots<MessageBarSlots>(state);\n\n  return (\n    <MessageBarContextProvider value={contexts.messageBar}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n      </state.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;mCAGd,sCAAmC;AAKtE,kCAAkC,CACvCC,OACAC;QAEAJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,4CAAAA,EAAAA;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,kBAAkB,EAAA,CAAA;;;;AAI9D,EAAE"}
+{"version":3,"sources":["../../../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (\n  state: MessageBarBaseState,\n  contexts: MessageBarContextValues,\n): JSXElement => {\n  assertSlots<MessageBarSlots>(state);\n\n  return (\n    <MessageBarContextProvider value={contexts.messageBar}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n      </state.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":";;;;+BAWaE;;;;;;;gCAVb,gDAAiD,GAEjD,SAASF,WAAW,QAAQ,4BAA4B;mCAGd,sCAAmC;AAKtE,kCAAkC,CACvCG,OACAC;QAEAJ,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,eAAA,EAACF,4CAAAA,EAAAA;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,kBAAkB,EAAA,CAAA;;;;AAI9D,EAAE"}

package/lib-commonjs/components/MessageBar/useMessageBar.cjs

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useMessageBarBase_unstable: function() {
+    get useMessageBarBase_unstable () {
         return useMessageBarBase_unstable;
     },
-    useMessageBar_unstable: function() {
+    get useMessageBar_unstable () {
         return useMessageBar_unstable;
     }
 });

package/lib-commonjs/components/MessageBar/useMessageBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the base state required to render MessageBar without design-specific props.\n *\n * @param props - props from this instance of MessageBar (without shape)\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBarBase_unstable = (\n  props: MessageBarBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarBaseState => {\n  const { layout = 'auto', intent = 'info', politeness } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n\n  const actionsRef = React.useRef<HTMLDivElement | null>(null);\n  const bodyRef = React.useRef<HTMLDivElement | null>(null);\n  const { announce } = useAnnounce();\n  const titleId = useId();\n\n  React.useEffect(() => {\n    const bodyMessage = bodyRef.current?.textContent;\n    const actionsMessage = actionsRef.current?.textContent;\n\n    const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n    announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n  }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'div',\n      bottomReflowSpacer: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, reflowRef, nodeRef),\n        role: 'group',\n        'aria-labelledby': titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n      renderByDefault: computedLayout === 'multiline',\n      elementType: 'div',\n    }),\n    layout: computedLayout,\n    intent,\n    transitionClassName,\n    actionsRef,\n    bodyRef,\n    titleId,\n  };\n};\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { shape = 'rounded', ...baseProps } = props;\n\n  const motionRef = useMotionForwardedRef();\n  const state = useMessageBarBase_unstable(baseProps, useMergedRefs(ref, motionRef));\n\n  return {\n    ...state,\n    shape,\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: getIntentIcon(state.intent),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","useMessageBarBase_unstable","props","ref","layout","intent","politeness","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","useMessageBar_unstable","shape","baseProps","motionRef","state","defaultProps","children"],"mappings":"AAAA;;;;;;;;;;;;IAiBaU,0BAAAA;;;0BAmEAuC;eAAAA;;;;iEAlFU,QAAQ;gCACsC,4BAA4B;qCACrE,kCAAkC;+BAEhC,qBAAkB;qCACZ,2BAAwB;6CACb,gDAA6C;6BACtD,yBAAyB;AAQxD,mCAAmC,CACxCtC,OACAC;IAEA,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAE,GAAGJ;IACzD,MAAMK,qBAAqBD,CAAAA,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,CAAK,GAAI,WAAW;IACxE,MAAMG,aAAaJ,WAAW;IAC9B,MAAM,EAAED,KAAKM,SAAS,EAAEC,SAAS,EAAE,OAAGZ,wCAAAA,EAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBN;IAE/E,4DAA4D;IAC5D,MAAM,EAAEQ,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,OAAGf,2DAAAA;IAEpD,MAAMgB,aAAaxB,OAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,OAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB,oCAAAA;IACrB,MAAMuB,cAAUzB,qBAAAA;IAEhBH,OAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,cAAAA,CAAcJ,mBAAAA,QAAQK,OAAO,AAAPA,MAAO,QAAfL,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBM,WAAW;QAChD,MAAMC,iBAAAA,CAAiBT,sBAAAA,WAAWO,OAAAA,AAAO,MAAA,QAAlBP,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,oBAAAA,CAAK0C,MAAM,KACf3C,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKR,6BAAAA,EAAcQ,KAAKM,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGjB,KAAK;QACV,IACA;YAAEmC,aAAa;QAAM;QAEvBJ,MAAMxC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAM+B,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;QACf;QACAH,oBAAoBzC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAMgC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAjC,QAAQO;QACRN;QACAQ;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAWK,+BAA+B,CAACjB,OAAwBC;IAC7D,MAAM,EAAEsC,QAAQ,SAAS,EAAE,GAAGC,WAAW,GAAGxC;IAE5C,MAAMyC,gBAAY3C,kCAAAA;IAClB,MAAM4C,QAAQ3C,2BAA2ByC,eAAW/C,6BAAAA,EAAcQ,KAAKwC;IAEvE,OAAO;QACL,GAAGC,KAAK;QACRH;QACAR,MAAMxC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAM+B,IAAI,EAAE;YAC9BY,cAAc;gBACZC,cAAUjD,4BAAAA,EAAc+C,MAAMvC,MAAM;YACtC;YACAkC,iBAAiB;YACjBF,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the base state required to render MessageBar without design-specific props.\n *\n * @param props - props from this instance of MessageBar (without shape)\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBarBase_unstable = (\n  props: MessageBarBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarBaseState => {\n  const { layout = 'auto', intent = 'info', politeness } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n\n  const actionsRef = React.useRef<HTMLDivElement | null>(null);\n  const bodyRef = React.useRef<HTMLDivElement | null>(null);\n  const { announce } = useAnnounce();\n  const titleId = useId();\n\n  React.useEffect(() => {\n    const bodyMessage = bodyRef.current?.textContent;\n    const actionsMessage = actionsRef.current?.textContent;\n\n    const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n    announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n  }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'div',\n      bottomReflowSpacer: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, reflowRef, nodeRef),\n        role: 'group',\n        'aria-labelledby': titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n    bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n      renderByDefault: computedLayout === 'multiline',\n      elementType: 'div',\n    }),\n    layout: computedLayout,\n    intent,\n    transitionClassName,\n    actionsRef,\n    bodyRef,\n    titleId,\n  };\n};\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { shape = 'rounded', ...baseProps } = props;\n\n  const motionRef = useMotionForwardedRef();\n  const state = useMessageBarBase_unstable(baseProps, useMergedRefs(ref, motionRef));\n\n  return {\n    ...state,\n    shape,\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: getIntentIcon(state.intent),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","useMessageBarBase_unstable","props","ref","layout","intent","politeness","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","useMessageBar_unstable","shape","baseProps","motionRef","state","defaultProps","children"],"mappings":"AAAA;;;;;;;;;;;;QAiBaU;;;;eAmEAuC;;;;iEAlFU,QAAQ;gCACsC,4BAA4B;qCACrE,kCAAkC;+BAEhC,qBAAkB;qCACZ,2BAAwB;6CACb,gDAA6C;6BACtD,yBAAyB;AAQxD,mCAAmC,CACxCtC,OACAC;IAEA,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAE,GAAGJ;IACzD,MAAMK,qBAAqBD,gBAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,IAAS,WAAW;IACxE,MAAMG,aAAaJ,WAAW;IAC9B,MAAM,EAAED,KAAKM,SAAS,EAAEC,SAAS,EAAE,OAAGZ,wCAAAA,EAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBN;IAE/E,4DAA4D;IAC5D,MAAM,EAAEQ,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf,+DAAAA;IAEpD,MAAMgB,aAAaxB,OAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,OAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB,oCAAAA;IACrB,MAAMuB,cAAUzB,qBAAAA;IAEhBH,OAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,cAAAA,CAAcJ,mBAAAA,QAAQK,OAAAA,AAAO,MAAA,QAAfL,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBM,WAAW;QAChD,MAAMC,iBAAAA,CAAiBT,sBAAAA,WAAWO,OAAAA,AAAO,MAAA,QAAlBP,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,oBAAAA,CAAK0C,MAAM,KACf3C,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKR,6BAAAA,EAAcQ,KAAKM,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGjB,KAAK;QACV,IACA;YAAEmC,aAAa;QAAM;QAEvBJ,MAAMxC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAM+B,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;QACf;QACAH,oBAAoBzC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAMgC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAjC,QAAQO;QACRN;QACAQ;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAWK,+BAA+B,CAACjB,OAAwBC;IAC7D,MAAM,EAAEsC,QAAQ,SAAS,EAAE,GAAGC,WAAW,GAAGxC;IAE5C,MAAMyC,gBAAY3C,kCAAAA;IAClB,MAAM4C,QAAQ3C,2BAA2ByC,eAAW/C,6BAAAA,EAAcQ,KAAKwC;IAEvE,OAAO;QACL,GAAGC,KAAK;QACRH;QACAR,MAAMxC,oBAAAA,CAAK6C,QAAQ,CAACpC,MAAM+B,IAAI,EAAE;YAC9BY,cAAc;gBACZC,cAAUjD,4BAAAA,EAAc+C,MAAMvC,MAAM;YACtC;YACAkC,iBAAiB;YACjBF,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/MessageBar/useMessageBarContextValues.cjs.map

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

package/lib-commonjs/components/MessageBar/useMessageBarReflow.cjs

@@ -21,6 +21,7 @@ function useMessageBarReflow(enabled = false) {
     const resizeObserverRef = _react.useRef(null);
     const singleLineWidthRef = _react.useRef(Number.POSITIVE_INFINITY);
     const handleResize = _react.useCallback((entries)=>{
+        var _ref;
         var _entry_borderBoxSize_, _entry_borderBoxSize;
         // Resize observer is only owned by this component - one resize observer entry expected
         // No need to support multiple fragments - one border box entry expected
@@ -33,9 +34,8 @@ 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_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
+        const inlineSize = (_ref = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _ref !== void 0 ? _ref : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
         if (inlineSize === undefined || !entry) {
             return;
         }

package/lib-commonjs/components/MessageBar/useMessageBarReflow.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["'use client';\n\nimport * 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  ref: React.RefCallback<HTMLElement>;\n  reflowing: boolean;\n} {\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\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n  const singleLineWidthRef = React.useRef(Number.POSITIVE_INFINITY);\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\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      if (reflowingRef.current) {\n        if (inlineSize >= singleLineWidthRef.current) {\n          nextReflowing = false;\n        }\n      } else {\n        const scrollWidth = target.scrollWidth;\n        if (inlineSize < scrollWidth) {\n          nextReflowing = true;\n          singleLineWidthRef.current = scrollWidth;\n        }\n      }\n\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  // eslint-disable-next-line react-hooks/refs\n  return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","singleLineWidthRef","Number","POSITIVE_INFINITY","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"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["'use client';\n\nimport * 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  ref: React.RefCallback<HTMLElement>;\n  reflowing: boolean;\n} {\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\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n  const singleLineWidthRef = React.useRef(Number.POSITIVE_INFINITY);\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\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      if (reflowingRef.current) {\n        if (inlineSize >= singleLineWidthRef.current) {\n          nextReflowing = false;\n        }\n      } else {\n        const scrollWidth = target.scrollWidth;\n        if (inlineSize < scrollWidth) {\n          nextReflowing = true;\n          singleLineWidthRef.current = scrollWidth;\n        }\n      }\n\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  // eslint-disable-next-line react-hooks/refs\n  return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","singleLineWidthRef","Number","POSITIVE_INFINITY","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"],"mappings":"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"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.cjs

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    messageBarClassNames: function() {
+    get messageBarClassNames () {
         return messageBarClassNames;
     },
-    useMessageBarStyles_unstable: function() {
+    get useMessageBarStyles_unstable () {
         return useMessageBarStyles_unstable;
     }
 });

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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: 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});\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});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n    marginBottom: tokens.spacingVerticalS,\n    gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n    rootMultiline: {\n        whiteSpace: 'normal',\n        alignItems: 'start',\n        paddingTop: tokens.spacingVerticalMNudge,\n        gridTemplateColumns: 'auto 1fr auto',\n        gridTemplateAreas: `\n      \"icon body actions\"\n      \"secondaryActions secondaryActions secondaryActions\"\n    `\n    },\n    secondaryActionsMultiline: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px'\n    },\n    square: {\n        borderRadius: '0'\n    }\n});\nconst useIconIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        color: tokens.colorStatusDangerForeground1\n    },\n    warning: {\n        color: tokens.colorStatusWarningForeground3\n    },\n    success: {\n        color: tokens.colorStatusSuccessForeground1\n    }\n});\nconst useRootIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        backgroundColor: tokens.colorStatusDangerBackground1,\n        ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n    },\n    warning: {\n        backgroundColor: tokens.colorStatusWarningBackground1,\n        ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n    },\n    success: {\n        backgroundColor: tokens.colorStatusSuccessBackground1,\n        ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n    }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconIntentStyles = useIconIntentStyles();\n    const rootIntentStyles = useRootIntentStyles();\n    const reflowSpacerStyles = useReflowSpacerBaseStyles();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n    }\n    if (state.bottomReflowSpacer) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n    }\n    return state;\n};\n"],"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"],"mappings":"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"}
+{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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: 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});\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});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n    marginBottom: tokens.spacingVerticalS,\n    gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n    rootMultiline: {\n        whiteSpace: 'normal',\n        alignItems: 'start',\n        paddingTop: tokens.spacingVerticalMNudge,\n        gridTemplateColumns: 'auto 1fr auto',\n        gridTemplateAreas: `\n      \"icon body actions\"\n      \"secondaryActions secondaryActions secondaryActions\"\n    `\n    },\n    secondaryActionsMultiline: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px'\n    },\n    square: {\n        borderRadius: '0'\n    }\n});\nconst useIconIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        color: tokens.colorStatusDangerForeground1\n    },\n    warning: {\n        color: tokens.colorStatusWarningForeground3\n    },\n    success: {\n        color: tokens.colorStatusSuccessForeground1\n    }\n});\nconst useRootIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        backgroundColor: tokens.colorStatusDangerBackground1,\n        ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n    },\n    warning: {\n        backgroundColor: tokens.colorStatusWarningBackground1,\n        ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n    },\n    success: {\n        backgroundColor: tokens.colorStatusSuccessBackground1,\n        ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n    }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconIntentStyles = useIconIntentStyles();\n    const rootIntentStyles = useRootIntentStyles();\n    const reflowSpacerStyles = useReflowSpacerBaseStyles();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n    }\n    if (state.bottomReflowSpacer) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n    }\n    return state;\n};\n"],"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"],"mappings":"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"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.css.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get messageBarClassNames () {
+        return messageBarClassNames;
+    },
+    get useMessageBarStyles_unstable () {
+        return useMessageBarStyles_unstable;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _clsx = require("clsx");
+const _MessageBarmodulecss = /*#__PURE__*/ _interop_require_default._(require("./MessageBar.module.css"));
+const messageBarClassNames = {
+    root: 'fui-MessageBar',
+    icon: 'fui-MessageBar__icon',
+    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
+};
+const useMessageBarStyles_unstable = (state)=>{
+    state.root.className = (0, _clsx.clsx)(messageBarClassNames.root, _MessageBarmodulecss.default.root, _MessageBarmodulecss.default[state.layout], _MessageBarmodulecss.default[state.shape], _MessageBarmodulecss.default[state.intent], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _clsx.clsx)(messageBarClassNames.icon, _MessageBarmodulecss.default.icon, state.icon.className);
+    }
+    if (state.bottomReflowSpacer) {
+        state.bottomReflowSpacer.className = (0, _clsx.clsx)(messageBarClassNames.bottomReflowSpacer, _MessageBarmodulecss.default.bottomReflowSpacer, state.bottomReflowSpacer.className);
+    }
+    return state;
+};

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MessageBar/useMessageBarStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\nimport styles from './MessageBar.module.css';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n  root: 'fui-MessageBar',\n  icon: 'fui-MessageBar__icon',\n  bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\n\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n  state.root.className = clsx(\n    messageBarClassNames.root,\n    styles.root,\n    styles[state.layout],\n    styles[state.shape],\n    styles[state.intent],\n    state.root.className,\n  );\n  if (state.icon) {\n    state.icon.className = clsx(messageBarClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.bottomReflowSpacer) {\n    state.bottomReflowSpacer.className = clsx(\n      messageBarClassNames.bottomReflowSpacer,\n      styles.bottomReflowSpacer,\n      state.bottomReflowSpacer.className,\n    );\n  }\n  return state;\n};\n"],"names":["clsx","styles","messageBarClassNames","root","icon","bottomReflowSpacer","useMessageBarStyles_unstable","state","className","layout","shape","intent"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;8EAGT,0BAA0B;AAEtC,6BAA8D;IACnEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAKK,MAAMC,+BAA+B,CAACC;IAC3CA,MAAMJ,IAAI,CAACK,SAAS,OAAGR,UAAAA,EACrBE,qBAAqBC,IAAI,EACzBF,4BAAAA,CAAOE,IAAI,EACXF,4BAAM,CAACM,MAAME,MAAM,CAAC,EACpBR,4BAAM,CAACM,MAAMG,KAAK,CAAC,EACnBT,4BAAM,CAACM,MAAMI,MAAM,CAAC,EACpBJ,MAAMJ,IAAI,CAACK,SAAS;IAEtB,IAAID,MAAMH,IAAI,EAAE;QACdG,MAAMH,IAAI,CAACI,SAAS,OAAGR,UAAAA,EAAKE,qBAAqBE,IAAI,EAAEH,4BAAAA,CAAOG,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAC1F;IACA,IAAID,MAAMF,kBAAkB,EAAE;QAC5BE,MAAMF,kBAAkB,CAACG,SAAS,OAAGR,UAAAA,EACnCE,qBAAqBG,kBAAkB,EACvCJ,4BAAAA,CAAOI,kBAAkB,EACzBE,MAAMF,kBAAkB,CAACG,SAAS;IAEtC;IACA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.cjs

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    messageBarClassNames: function() {
+    get messageBarClassNames () {
         return messageBarClassNames;
     },
-    useMessageBarStyles_unstable: function() {
+    get useMessageBarStyles_unstable () {
         return useMessageBarStyles_unstable;
     }
 });

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  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  // eslint-disable-next-line react-hooks/immutability\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.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  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  // eslint-disable-next-line react-hooks/immutability\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.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.css.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get messageBarClassNames () {
+        return messageBarClassNames;
+    },
+    get useMessageBarStyles_unstable () {
+        return useMessageBarStyles_unstable;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _clsx = require("clsx");
+const _MessageBarmodulecss = /*#__PURE__*/ _interop_require_default._(require("./MessageBar.module.css"));
+const messageBarClassNames = {
+    root: 'fui-MessageBar',
+    icon: 'fui-MessageBar__icon',
+    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'
+};
+const useMessageBarStyles_unstable = (state)=>{
+    state.root.className = (0, _clsx.clsx)(messageBarClassNames.root, _MessageBarmodulecss.default.root, _MessageBarmodulecss.default[state.layout], _MessageBarmodulecss.default[state.shape], _MessageBarmodulecss.default[state.intent], state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _clsx.clsx)(messageBarClassNames.icon, _MessageBarmodulecss.default.icon, state.icon.className);
+    }
+    if (state.bottomReflowSpacer) {
+        state.bottomReflowSpacer.className = (0, _clsx.clsx)(messageBarClassNames.bottomReflowSpacer, _MessageBarmodulecss.default.bottomReflowSpacer, state.bottomReflowSpacer.className);
+    }
+    return state;
+};

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.raw.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MessageBar/useMessageBarStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\nimport styles from './MessageBar.module.css';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n  root: 'fui-MessageBar',\n  icon: 'fui-MessageBar__icon',\n  bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\n\n/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n  state.root.className = clsx(\n    messageBarClassNames.root,\n    styles.root,\n    styles[state.layout],\n    styles[state.shape],\n    styles[state.intent],\n    state.root.className,\n  );\n  if (state.icon) {\n    state.icon.className = clsx(messageBarClassNames.icon, styles.icon, state.icon.className);\n  }\n  if (state.bottomReflowSpacer) {\n    state.bottomReflowSpacer.className = clsx(\n      messageBarClassNames.bottomReflowSpacer,\n      styles.bottomReflowSpacer,\n      state.bottomReflowSpacer.className,\n    );\n  }\n  return state;\n};\n"],"names":["clsx","styles","messageBarClassNames","root","icon","bottomReflowSpacer","useMessageBarStyles_unstable","state","className","layout","shape","intent"],"mappings":";;;;;;;;;;;QAKaE;;;;;;;;sBALQ,OAAO;8EAGT,0BAA0B;AAEtC,6BAA8D;IACnEC,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAKK,MAAMC,+BAA+B,CAACC;IAC3CA,MAAMJ,IAAI,CAACK,SAAS,OAAGR,UAAAA,EACrBE,qBAAqBC,IAAI,EACzBF,4BAAAA,CAAOE,IAAI,EACXF,4BAAM,CAACM,MAAME,MAAM,CAAC,EACpBR,4BAAM,CAACM,MAAMG,KAAK,CAAC,EACnBT,4BAAM,CAACM,MAAMI,MAAM,CAAC,EACpBJ,MAAMJ,IAAI,CAACK,SAAS;IAEtB,IAAID,MAAMH,IAAI,EAAE;QACdG,MAAMH,IAAI,CAACI,SAAS,OAAGR,UAAAA,EAAKE,qBAAqBE,IAAI,EAAEH,4BAAAA,CAAOG,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAC1F;IACA,IAAID,MAAMF,kBAAkB,EAAE;QAC5BE,MAAMF,kBAAkB,CAACG,SAAS,OAAGR,UAAAA,EACnCE,qBAAqBG,kBAAkB,EACvCJ,4BAAAA,CAAOI,kBAAkB,EACzBE,MAAMF,kBAAkB,CAACG,SAAS;IAEtC;IACA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/MessageBarActions/MessageBarActions.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarActions_unstable(props, ref);\n\n  useMessageBarActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n  return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;sCAChC,4BAAyB;yCACtB,+BAA4B;kDACzB,yCAAsC;mDAEhC,yCAAsC;AAKzF,MAAMM,oBAAAA,WAAAA,GAAiEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQR,mDAAAA,EAA8BM,OAAOC;QAEnDL,qEAAAA,EAAoCM;QACpCT,gDAAAA,EAA4B,uCAAuCS;IACnE,WAAOP,yDAAAA,EAAiCO,WAAOL,4EAAAA;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarActions_unstable(props, ref);\n\n  useMessageBarActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n  return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;sCAChC,4BAAyB;yCACtB,+BAA4B;kDACzB,yCAAsC;mDAEhC,yCAAsC;AAKzF,MAAMM,oBAAAA,WAAAA,GAAiEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQR,mDAAAA,EAA8BM,OAAOC;QAEnDL,qEAAAA,EAAoCM;QACpCT,gDAAAA,EAA4B,uCAAuCS;IACnE,WAAOP,yDAAAA,EAAiCO,WAAOL,4EAAAA;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}

package/lib-commonjs/components/MessageBarActions/MessageBarActions.module.css

@@ -0,0 +1,22 @@
+@layer fluentui {
+  .root {
+    grid-area: secondaryActions;
+    display: flex;
+    column-gap: var(--spacingHorizontalM);
+    padding-inline-end: var(--spacingHorizontalM);
+  }
+  .containerAction {
+    grid-area: actions;
+    padding-inline-end: var(--spacingHorizontalM);
+  }
+  .multiline {
+    justify-content: end;
+    margin-top: var(--spacingVerticalMNudge);
+    margin-bottom: var(--spacingVerticalS);
+    margin-inline-end: 0px;
+    padding-inline-end: var(--spacingVerticalM);
+  }
+  .noActions {
+    display: none;
+  }
+}

package/lib-commonjs/components/MessageBarActions/MessageBarActions.types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarActionsSlots = {\n  root: Slot<'div'>;\n  /**\n   * Generally the 'Dismiss' button for the MessageBar\n   */\n  containerAction?: Slot<'div'>;\n};\n\nexport type MessageBarActionsContextValues = {\n  button: ButtonContextValue;\n};\n\n/**\n * MessageBarActions Props\n */\nexport type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;\n\n/**\n * State used in rendering MessageBarActions\n */\nexport type MessageBarActionsState = ComponentState<MessageBarActionsSlots> &\n  Pick<Required<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Whether there are actions as children of this component\n     */\n    hasActions: boolean;\n  };\n"],"names":[],"mappings":"AAqBA;;CAEC,GACD,WAMI"}
+{"version":3,"sources":["../../../src/components/MessageBarActions/MessageBarActions.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarActionsSlots = {\n  root: Slot<'div'>;\n  /**\n   * Generally the 'Dismiss' button for the MessageBar\n   */\n  containerAction?: Slot<'div'>;\n};\n\nexport type MessageBarActionsContextValues = {\n  button: ButtonContextValue;\n};\n\n/**\n * MessageBarActions Props\n */\nexport type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;\n\n/**\n * State used in rendering MessageBarActions\n */\nexport type MessageBarActionsState = ComponentState<MessageBarActionsSlots> &\n  Pick<Required<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Whether there are actions as children of this component\n     */\n    hasActions: boolean;\n  };\n"],"names":[],"mappings":"AAqBA;;CAEC,GACD,WAMI"}