@fluentui/react-alert 9.0.0-beta.124 → 9.0.0-beta.126

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-alert
 
-This log was last generated on Thu, 06 Jun 2024 15:22:27 GMT and should not be manually modified.
+This log was last generated on Tue, 21 Oct 2025 14:13:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.126](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.126)
+
+Tue, 21 Oct 2025 14:13:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.125..@fluentui/react-alert_v9.0.0-beta.126)
+
+### Changes
+
+- Bump @fluentui/react-avatar to v9.9.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-button to v9.6.9 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+
+## [9.0.0-beta.125](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.125)
+
+Wed, 08 Oct 2025 12:04:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.124..@fluentui/react-alert_v9.0.0-beta.125)
+
+### Changes
+
+- feat: add react 19 support ([PR #35285](https://github.com/microsoft/fluentui/pull/35285) by martinhochel@microsoft.com)
+- Bump @fluentui/react-avatar to v9.9.8 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-button to v9.6.8 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
+
 ## [9.0.0-beta.124](https://github.com/microsoft/fluentui/tree/@fluentui/react-alert_v9.0.0-beta.124)
 
-Thu, 06 Jun 2024 15:22:27 GMT 
+Thu, 06 Jun 2024 15:26:45 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-alert_v9.0.0-beta.123..@fluentui/react-alert_v9.0.0-beta.124)
 
 ### Changes

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { Avatar } from '@fluentui/react-avatar';
 import { Button } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -66,7 +64,7 @@ export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, '
 /**
  * @deprecated please use the Toast or MessageBar component
  */
-export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
+export declare const renderAlert_unstable: (state: AlertState) => React_2.ReactElement;
 
 /**
  * @deprecated please use the Toast or MessageBar component

package/lib/Alert.js

@@ -1 +1 @@
-export * from './components/Alert/index';
+/* eslint-disable @typescript-eslint/no-deprecated */ export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './components/Alert/index';

package/lib/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Alert.ts"],"sourcesContent":["export * from './components/Alert/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}
+{"version":3,"sources":["../src/Alert.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport type { AlertProps, AlertSlots, AlertState } from './components/Alert/index';\nexport {\n  Alert,\n  alertClassNames,\n  renderAlert_unstable,\n  useAlertStyles_unstable,\n  useAlert_unstable,\n} from './components/Alert/index';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,mDAAmD,GAEnD,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}

package/lib/components/Alert/Alert.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderAlert_unstable } from './renderAlert';
 import { useAlert_unstable } from './useAlert';
@@ -6,15 +7,15 @@ import { useAlertStyles_unstable } from './useAlertStyles.styles';
  * @deprecated please use the Toast or MessageBar component
  * An Alert component displays a brief, important message to attract a user's attention
  *  without interrupting their current task.
- */ // eslint-disable-next-line deprecation/deprecation
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 export const Alert = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const state = useAlert_unstable(props, ref);
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     useAlertStyles_unstable(state);
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     return renderAlert_unstable(state);
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 });
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 Alert.displayName = 'Alert';

package/lib/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Alert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n  // eslint-disable-next-line deprecation/deprecation\n  const state = useAlert_unstable(props, ref);\n\n  // eslint-disable-next-line deprecation/deprecation\n  useAlertStyles_unstable(state);\n  // eslint-disable-next-line deprecation/deprecation\n  return renderAlert_unstable(state);\n  // eslint-disable-next-line deprecation/deprecation\n}) as ForwardRefComponent<AlertProps>;\n\n// eslint-disable-next-line deprecation/deprecation\nAlert.displayName = 'Alert';\n"],"names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAKlE;;;;CAIC,GACD,mDAAmD;AACnD,OAAO,MAAMC,sBAAyCJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7E,mDAAmD;IACnD,MAAMC,QAAQN,kBAAkBI,OAAOC;IAEvC,mDAAmD;IACnDJ,wBAAwBK;IACxB,mDAAmD;IACnD,OAAOP,qBAAqBO;AAC5B,mDAAmD;AACrD,GAAsC;AAEtC,mDAAmD;AACnDJ,MAAMK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const state = useAlert_unstable(props, ref);\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  useAlertStyles_unstable(state);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return renderAlert_unstable(state);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ForwardRefComponent<AlertProps>;\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nAlert.displayName = 'Alert';\n"],"names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAKlE;;;;CAIC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,sBAAyCJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7E,4DAA4D;IAC5D,MAAMC,QAAQN,kBAAkBI,OAAOC;IAEvC,4DAA4D;IAC5DJ,wBAAwBK;IACxB,4DAA4D;IAC5D,OAAOP,qBAAqBO;AAC5B,4DAA4D;AAC9D,GAAsC;AAEtC,4DAA4D;AAC5DJ,MAAMK,WAAW,GAAG"}

package/lib/components/Alert/Alert.types.js

@@ -1 +1,5 @@
+/**
+ * State used in rendering Alert
+ * @deprecated please use the Toast or MessageBar component
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\nexport type AlertSlots = {\n  /**\n   * The root slot is the top level container for the alert component\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The icon slot renders the icon determined by the `icon` or `intent` prop\n   */\n  icon?: Slot<'span'>;\n  /**\n   * The action slot renders a button that prompts the user to take action on the alert\n   */\n  action?: Slot<typeof Button>;\n  /**\n   * The avatar slot renders an avatar before the contents of the alert\n   */\n  avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line deprecation/deprecation\nexport type AlertProps = ComponentProps<AlertSlots> & {\n  /**\n   * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n   * overrides the intent prop\n   */\n  intent?: 'info' | 'success' | 'error' | 'warning';\n  /**\n   * The appearance of the Alert.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line deprecation/deprecation\nexport type AlertState = ComponentState<AlertSlots> &\n  // eslint-disable-next-line deprecation/deprecation\n  Pick<AlertProps, 'intent'> &\n  // eslint-disable-next-line deprecation/deprecation\n  Required<Pick<AlertProps, 'appearance'>>;\n"],"names":[],"mappings":"AAAA,WAsD2C"}
+{"version":3,"sources":["../src/components/Alert/Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\nexport type AlertSlots = {\n  /**\n   * The root slot is the top level container for the alert component\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The icon slot renders the icon determined by the `icon` or `intent` prop\n   */\n  icon?: Slot<'span'>;\n  /**\n   * The action slot renders a button that prompts the user to take action on the alert\n   */\n  action?: Slot<typeof Button>;\n  /**\n   * The avatar slot renders an avatar before the contents of the alert\n   */\n  avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertProps = ComponentProps<AlertSlots> & {\n  /**\n   * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n   * overrides the intent prop\n   */\n  intent?: 'info' | 'success' | 'error' | 'warning';\n  /**\n   * The appearance of the Alert.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertState = ComponentState<AlertSlots> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Pick<AlertProps, 'intent'> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Required<Pick<AlertProps, 'appearance'>>;\n"],"names":[],"mappings":"AA6CA;;;CAGC,GACD,4DAA4D;AAC5D,WAI2C"}

package/lib/components/Alert/index.js

@@ -1,5 +1,4 @@
-export * from './Alert';
-export * from './Alert.types';
-export * from './renderAlert';
-export * from './useAlert';
-export * from './useAlertStyles.styles';
+/* eslint-disable @typescript-eslint/no-deprecated */ export { Alert } from './Alert';
+export { renderAlert_unstable } from './renderAlert';
+export { useAlert_unstable } from './useAlert';
+export { alertClassNames, useAlertStyles_unstable } from './useAlertStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}
+{"version":3,"sources":["../src/components/Alert/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { Alert } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert.types';\nexport { renderAlert_unstable } from './renderAlert';\nexport { useAlert_unstable } from './useAlert';\nexport { alertClassNames, useAlertStyles_unstable } from './useAlertStyles.styles';\n"],"names":["Alert","renderAlert_unstable","useAlert_unstable","alertClassNames","useAlertStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Alert/renderAlert.js

@@ -2,9 +2,9 @@
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * @deprecated please use the Toast or MessageBar component
- */ // eslint-disable-next-line deprecation/deprecation
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 export const renderAlert_unstable = (state)=>{
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     assertSlots(state);
     return /*#__PURE__*/ _jsxs(state.root, {
         children: [

package/lib/components/Alert/renderAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAlert.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const renderAlert_unstable = (state: AlertState) => {\n  // eslint-disable-next-line deprecation/deprecation\n  assertSlots<AlertSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.avatar && <state.avatar />}\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlert_unstable","state","root","icon","avatar","children","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,mDAAmD;AACnD,OAAO,MAAMC,uBAAuB,CAACC;IACnC,mDAAmD;IACnDF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;YAC7BH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;;;AAGpC,EAAE"}
+{"version":3,"sources":["../src/components/Alert/renderAlert.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const renderAlert_unstable = (state: AlertState): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  assertSlots<AlertSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.avatar && <state.avatar />}\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlert_unstable","state","root","icon","avatar","children","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,uBAAuB,CAACC;IACnC,4DAA4D;IAC5DF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,kBAAI,KAACF,MAAME,IAAI;YACzBF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;YAC7BH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;;;AAGpC,EAAE"}

package/lib/components/Alert/useAlert.js

@@ -12,7 +12,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
  *
  * @param props - props from this instance of Alert
  * @param ref - reference to root HTMLElement of Alert
- */ // eslint-disable-next-line deprecation/deprecation
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 export const useAlert_unstable = (props, ref)=>{
     const { appearance = 'primary', intent } = props;
     /** Determine the role and icon to render based on the intent */ let defaultIcon;

package/lib/components/Alert/useAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n  const { appearance = 'primary', intent } = props;\n\n  /** Determine the role and icon to render based on the intent */\n  let defaultIcon;\n  let defaultRole = 'status';\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  const action = slot.optional(props.action, { defaultProps: { appearance: 'transparent' }, elementType: Button });\n  const avatar = slot.optional(props.avatar, { elementType: Avatar });\n  let icon;\n  /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {\n    icon = slot.optional(props.icon, {\n      defaultProps: { children: defaultIcon },\n      renderByDefault: !!props.intent,\n      elementType: 'span',\n    });\n  }\n  return {\n    action,\n    appearance,\n    avatar,\n    components: { root: 'div', icon: 'span', action: Button, avatar: Avatar },\n    icon,\n    intent,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: defaultRole,\n        children: props.children,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","action","optional","defaultProps","elementType","avatar","icon","children","renderByDefault","components","root","always","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB;AAC9G,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;;CASC,GACD,mDAAmD;AACnD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,aAAa,SAAS,EAAEC,MAAM,EAAE,GAAGH;IAE3C,8DAA8D,GAC9D,IAAII;IACJ,IAAIC,cAAc;IAClB,OAAQF;QACN,KAAK;YACHC,4BAAc,oBAACX;YACf;QACF,KAAK;YACHW,4BAAc,oBAACV;YACfW,cAAc;YACd;QACF,KAAK;YACHD,4BAAc,oBAACR;YACfS,cAAc;YACd;QACF,KAAK;YACHD,4BAAc,oBAACT;YACf;IACJ;IAEA,MAAMW,SAASR,KAAKS,QAAQ,CAACP,MAAMM,MAAM,EAAE;QAAEE,cAAc;YAAEN,YAAY;QAAc;QAAGO,aAAajB;IAAO;IAC9G,MAAMkB,SAASZ,KAAKS,QAAQ,CAACP,MAAMU,MAAM,EAAE;QAAED,aAAalB;IAAO;IACjE,IAAIoB;IACJ,8DAA8D,GAAG,IAAI,CAACD,QAAQ;QAC5EC,OAAOb,KAAKS,QAAQ,CAACP,MAAMW,IAAI,EAAE;YAC/BH,cAAc;gBAAEI,UAAUR;YAAY;YACtCS,iBAAiB,CAAC,CAACb,MAAMG,MAAM;YAC/BM,aAAa;QACf;IACF;IACA,OAAO;QACLH;QACAJ;QACAQ;QACAI,YAAY;YAAEC,MAAM;YAAOJ,MAAM;YAAQL,QAAQd;YAAQkB,QAAQnB;QAAO;QACxEoB;QACAR;QACAY,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLgB,MAAMZ;YACNO,UAAUZ,MAAMY,QAAQ;YACxB,GAAGZ,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n  const { appearance = 'primary', intent } = props;\n\n  /** Determine the role and icon to render based on the intent */\n  let defaultIcon;\n  let defaultRole = 'status';\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  const action = slot.optional(props.action, { defaultProps: { appearance: 'transparent' }, elementType: Button });\n  const avatar = slot.optional(props.avatar, { elementType: Avatar });\n  let icon;\n  /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {\n    icon = slot.optional(props.icon, {\n      defaultProps: { children: defaultIcon },\n      renderByDefault: !!props.intent,\n      elementType: 'span',\n    });\n  }\n  return {\n    action,\n    appearance,\n    avatar,\n    components: { root: 'div', icon: 'span', action: Button, avatar: Avatar },\n    icon,\n    intent,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: defaultRole,\n        children: props.children,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","action","optional","defaultProps","elementType","avatar","icon","children","renderByDefault","components","root","always","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB;AAC9G,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAI3E;;;;;;;;;CASC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,aAAa,SAAS,EAAEC,MAAM,EAAE,GAAGH;IAE3C,8DAA8D,GAC9D,IAAII;IACJ,IAAIC,cAAc;IAClB,OAAQF;QACN,KAAK;YACHC,4BAAc,oBAACX;YACf;QACF,KAAK;YACHW,4BAAc,oBAACV;YACfW,cAAc;YACd;QACF,KAAK;YACHD,4BAAc,oBAACR;YACfS,cAAc;YACd;QACF,KAAK;YACHD,4BAAc,oBAACT;YACf;IACJ;IAEA,MAAMW,SAASR,KAAKS,QAAQ,CAACP,MAAMM,MAAM,EAAE;QAAEE,cAAc;YAAEN,YAAY;QAAc;QAAGO,aAAajB;IAAO;IAC9G,MAAMkB,SAASZ,KAAKS,QAAQ,CAACP,MAAMU,MAAM,EAAE;QAAED,aAAalB;IAAO;IACjE,IAAIoB;IACJ,8DAA8D,GAAG,IAAI,CAACD,QAAQ;QAC5EC,OAAOb,KAAKS,QAAQ,CAACP,MAAMW,IAAI,EAAE;YAC/BH,cAAc;gBAAEI,UAAUR;YAAY;YACtCS,iBAAiB,CAAC,CAACb,MAAMG,MAAM;YAC/BM,aAAa;QACf;IACF;IACA,OAAO;QACLH;QACAJ;QACAQ;QACAI,YAAY;YAAEC,MAAM;YAAOJ,MAAM;YAAQL,QAAQd;YAAQkB,QAAQnB;QAAO;QACxEoB;QACAR;QACAY,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLgB,MAAMZ;YACNO,UAAUZ,MAAMY,QAAQ;YACxB,GAAGZ,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/Alert/useAlertStyles.styles.js

@@ -1,7 +1,9 @@
+'use client';
+
 import { tokens } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 export const alertClassNames = {
   root: 'fui-Alert',
   icon: 'fui-Alert__icon',
@@ -142,13 +144,14 @@ const useActionButtonColorInverted = /*#__PURE__*/__styles({
 /**
  * @deprecated please use the Toast or MessageBar component
  * Apply styling to the Alert slots based on the state
- */ // eslint-disable-next-line deprecation/deprecation
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 export const useAlertStyles_unstable = state => {
   const inverted = state.appearance === 'inverted';
   const styles = useStyles();
   const intentIconStylesPrimary = useIntentIconStyles();
   const intentIconStylesInverted = useIntentIconStylesInverted();
   const actionStylesInverted = useActionButtonColorInverted();
+  // eslint-disable-next-line react-compiler/react-compiler
   state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
   if (state.icon) {
     state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
@@ -161,5 +164,4 @@ export const useAlertStyles_unstable = state => {
     state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
   }
   return state;
-};
-//# sourceMappingURL=useAlertStyles.styles.js.map
+};

package/lib/components/Alert/useAlertStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bf4jedk","d","p","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sources":["useAlertStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n// eslint-disable-next-line deprecation/deprecation\nexport const alertClassNames = {\n    root: 'fui-Alert',\n    icon: 'fui-Alert__icon',\n    action: 'fui-Alert__action',\n    avatar: 'fui-Alert__avatar'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '44px',\n        padding: '0 12px',\n        borderRadius: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        boxShadow: tokens.shadow8,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    },\n    icon: {\n        height: '16px',\n        fontSize: '16px',\n        padding: '0 8px 0 0'\n    },\n    avatar: {\n        margin: '0 8px 0 0'\n    },\n    action: {\n        padding: '5px 10px',\n        minWidth: 0,\n        marginLeft: 'auto',\n        color: tokens.colorBrandForeground1\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        color: tokens.colorPaletteRedForeground3\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\nconst useActionButtonColorInverted = makeStyles({\n    action: {\n        color: tokens.colorBrandForegroundInverted,\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n            outlineColor: tokens.colorNeutralBackground5Pressed\n        }, {\n            enableOutline: true\n        })\n    }\n});\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */ // eslint-disable-next-line deprecation/deprecation\nexport const useAlertStyles_unstable = (state)=>{\n    const inverted = state.appearance === 'inverted';\n    const styles = useStyles();\n    const intentIconStylesPrimary = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const actionStylesInverted = useActionButtonColorInverted();\n    state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);\n    }\n    if (state.avatar) {\n        state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n    }\n    if (state.action) {\n        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n        state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bf4jedk","d","p","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sources":["useAlertStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames = {\n    root: 'fui-Alert',\n    icon: 'fui-Alert__icon',\n    action: 'fui-Alert__action',\n    avatar: 'fui-Alert__avatar'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '44px',\n        padding: '0 12px',\n        borderRadius: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        boxShadow: tokens.shadow8,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    },\n    icon: {\n        height: '16px',\n        fontSize: '16px',\n        padding: '0 8px 0 0'\n    },\n    avatar: {\n        margin: '0 8px 0 0'\n    },\n    action: {\n        padding: '5px 10px',\n        minWidth: 0,\n        marginLeft: 'auto',\n        color: tokens.colorBrandForeground1\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        color: tokens.colorPaletteRedForeground3\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\nconst useActionButtonColorInverted = makeStyles({\n    action: {\n        color: tokens.colorBrandForegroundInverted,\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n            outlineColor: tokens.colorNeutralBackground5Pressed\n        }, {\n            enableOutline: true\n        })\n    }\n});\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */ // eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state)=>{\n    const inverted = state.appearance === 'inverted';\n    const styles = useStyles();\n    const intentIconStylesPrimary = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const actionStylesInverted = useActionButtonColorInverted();\n    // eslint-disable-next-line react-compiler/react-compiler\n    state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);\n    }\n    if (state.avatar) {\n        state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n    }\n    if (state.action) {\n        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n        state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Alert/useAlertStyles.styles.raw.js

@@ -0,0 +1,107 @@
+'use client';
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+export const alertClassNames = {
+    root: 'fui-Alert',
+    icon: 'fui-Alert__icon',
+    action: 'fui-Alert__action',
+    avatar: 'fui-Alert__avatar'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '44px',
+        padding: '0 12px',
+        borderRadius: '4px',
+        border: `1px solid ${tokens.colorTransparentStroke}`,
+        boxShadow: tokens.shadow8,
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightSemibold,
+        color: tokens.colorNeutralForeground1,
+        backgroundColor: tokens.colorNeutralBackground1
+    },
+    inverted: {
+        color: tokens.colorNeutralForegroundInverted2,
+        backgroundColor: tokens.colorNeutralBackgroundInverted
+    },
+    icon: {
+        height: '16px',
+        fontSize: '16px',
+        padding: '0 8px 0 0'
+    },
+    avatar: {
+        margin: '0 8px 0 0'
+    },
+    action: {
+        padding: '5px 10px',
+        minWidth: 0,
+        marginLeft: 'auto',
+        color: tokens.colorBrandForeground1
+    }
+});
+const useIntentIconStyles = makeStyles({
+    success: {
+        color: tokens.colorPaletteGreenForeground3
+    },
+    error: {
+        color: tokens.colorPaletteRedForeground3
+    },
+    warning: {
+        color: tokens.colorPaletteYellowForeground2
+    },
+    info: {
+        color: tokens.colorNeutralForeground2
+    }
+});
+const useIntentIconStylesInverted = makeStyles({
+    success: {
+        color: tokens.colorPaletteGreenForegroundInverted
+    },
+    error: {
+        color: tokens.colorPaletteRedForegroundInverted
+    },
+    warning: {
+        color: tokens.colorPaletteYellowForegroundInverted
+    },
+    info: {
+        color: tokens.colorNeutralForegroundInverted2
+    }
+});
+const useActionButtonColorInverted = makeStyles({
+    action: {
+        color: tokens.colorBrandForegroundInverted,
+        ...createCustomFocusIndicatorStyle({
+            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
+            outlineColor: tokens.colorNeutralBackground5Pressed
+        }, {
+            enableOutline: true
+        })
+    }
+});
+/**
+ * @deprecated please use the Toast or MessageBar component
+ * Apply styling to the Alert slots based on the state
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
+export const useAlertStyles_unstable = (state)=>{
+    const inverted = state.appearance === 'inverted';
+    const styles = useStyles();
+    const intentIconStylesPrimary = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const actionStylesInverted = useActionButtonColorInverted();
+    // eslint-disable-next-line react-compiler/react-compiler
+    state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
+    }
+    if (state.avatar) {
+        state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.action) {
+        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+        state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
+    }
+    return state;
+};

package/lib/components/Alert/useAlertStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/useAlertStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n  avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '44px',\n    padding: '0 12px',\n    borderRadius: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n  icon: {\n    height: '16px',\n    fontSize: '16px',\n    padding: '0 8px 0 0',\n  },\n  avatar: { margin: '0 8px 0 0' },\n  action: {\n    padding: '5px 10px',\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForeground1,\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  error: {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForegroundInverted,\n  },\n  error: {\n    color: tokens.colorPaletteRedForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        outlineColor: tokens.colorNeutralBackground5Pressed,\n      },\n      { enableOutline: true },\n    ),\n  },\n});\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n  const inverted = state.appearance === 'inverted';\n  const styles = useStyles();\n  const intentIconStylesPrimary = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const actionStylesInverted = useActionButtonColorInverted();\n\n  // eslint-disable-next-line react-compiler/react-compiler\n  state.root.className = mergeClasses(\n    alertClassNames.root,\n    styles.root,\n    inverted && styles.inverted,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      alertClassNames.icon,\n      styles.icon,\n      state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n      state.icon.className,\n    );\n  }\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n\n  if (state.action) {\n    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n    state.action.className = mergeClasses(\n      alertClassNames.action,\n      styles.action,\n      inverted && actionStylesInverted.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","display","alignItems","minHeight","padding","borderRadius","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","height","margin","minWidth","marginLeft","colorBrandForeground1","useIntentIconStyles","success","colorPaletteGreenForeground3","error","colorPaletteRedForeground3","warning","colorPaletteYellowForeground2","info","colorNeutralForeground2","useIntentIconStylesInverted","colorPaletteGreenForegroundInverted","colorPaletteRedForegroundInverted","colorPaletteYellowForegroundInverted","useActionButtonColorInverted","colorBrandForegroundInverted","borderColor","colorTransparentStrokeInteractive","outlineColor","colorNeutralBackground5Pressed","enableOutline","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"mappings":"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"}

package/lib/index.js

@@ -1,2 +1,2 @@
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n// eslint-disable-next-line deprecation/deprecation\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,mDAAmD;AACnD,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,4DAA4D;AAC5D,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}

package/lib-commonjs/Alert.js

@@ -1,6 +1,28 @@
-"use strict";
+/* eslint-disable @typescript-eslint/no-deprecated */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./components/Alert/index"), exports);
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Alert: function() {
+        return _index.Alert;
+    },
+    alertClassNames: function() {
+        return _index.alertClassNames;
+    },
+    renderAlert_unstable: function() {
+        return _index.renderAlert_unstable;
+    },
+    useAlertStyles_unstable: function() {
+        return _index.useAlertStyles_unstable;
+    },
+    useAlert_unstable: function() {
+        return _index.useAlert_unstable;
+    }
+});
+const _index = require("./components/Alert/index");

package/lib-commonjs/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Alert.js"],"sourcesContent":["export * from './components/Alert/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
+{"version":3,"sources":["../src/Alert.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport type { AlertProps, AlertSlots, AlertState } from './components/Alert/index';\nexport {\n  Alert,\n  alertClassNames,\n  renderAlert_unstable,\n  useAlertStyles_unstable,\n  useAlert_unstable,\n} from './components/Alert/index';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,mDAAmD,GAEnD;;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}

package/lib-commonjs/components/Alert/Alert.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -14,13 +15,13 @@ const _renderAlert = require("./renderAlert");
 const _useAlert = require("./useAlert");
 const _useAlertStylesstyles = require("./useAlertStyles.styles");
 const Alert = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const state = (0, _useAlert.useAlert_unstable)(props, ref);
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     (0, _useAlertStylesstyles.useAlertStyles_unstable)(state);
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     return (0, _renderAlert.renderAlert_unstable)(state);
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 });
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 Alert.displayName = 'Alert';

package/lib-commonjs/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Alert.js"],"sourcesContent":["import * as React from 'react';\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n/**\n * @deprecated please use the Toast or MessageBar component\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */ // eslint-disable-next-line deprecation/deprecation\nexport const Alert = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    // eslint-disable-next-line deprecation/deprecation\n    const state = useAlert_unstable(props, ref);\n    // eslint-disable-next-line deprecation/deprecation\n    useAlertStyles_unstable(state);\n    // eslint-disable-next-line deprecation/deprecation\n    return renderAlert_unstable(state);\n// eslint-disable-next-line deprecation/deprecation\n});\n// eslint-disable-next-line deprecation/deprecation\nAlert.displayName = 'Alert';\n"],"names":["Alert","React","forwardRef","props","ref","state","useAlert_unstable","useAlertStyles_unstable","renderAlert_unstable","displayName"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;6BACc;0BACH;sCACM;AAMjC,MAAMA,QAAQ,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACxD,mDAAmD;IACnD,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvC,mDAAmD;IACnDG,IAAAA,6CAAuB,EAACF;IACxB,mDAAmD;IACnD,OAAOG,IAAAA,iCAAoB,EAACH;AAChC,mDAAmD;AACnD;AACA,mDAAmD;AACnDL,MAAMS,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const state = useAlert_unstable(props, ref);\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  useAlertStyles_unstable(state);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return renderAlert_unstable(state);\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n}) as ForwardRefComponent<AlertProps>;\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nAlert.displayName = 'Alert';\n"],"names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;AAW3D,MAAMI,QAAAA,WAAAA,GAAyCJ,OAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7E,4DAA4D;IAC5D,MAAMC,YAAQN,2BAAAA,EAAkBI,OAAOC;IAEvC,4DAA4D;QAC5DJ,6CAAAA,EAAwBK;IACxB,4DAA4D;IAC5D,WAAOP,iCAAAA,EAAqBO;AAC5B,4DAA4D;AAC9D,GAAsC;AAEtC,4DAA4D;AAC5DJ,MAAMK,WAAW,GAAG"}

package/lib-commonjs/components/Alert/Alert.types.js

@@ -1,3 +1,7 @@
+/**
+ * State used in rendering Alert
+ * @deprecated please use the Toast or MessageBar component
+ */ // eslint-disable-next-line @typescript-eslint/no-deprecated
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Alert/Alert.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/Alert/Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\nexport type AlertSlots = {\n  /**\n   * The root slot is the top level container for the alert component\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The icon slot renders the icon determined by the `icon` or `intent` prop\n   */\n  icon?: Slot<'span'>;\n  /**\n   * The action slot renders a button that prompts the user to take action on the alert\n   */\n  action?: Slot<typeof Button>;\n  /**\n   * The avatar slot renders an avatar before the contents of the alert\n   */\n  avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertProps = ComponentProps<AlertSlots> & {\n  /**\n   * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n   * overrides the intent prop\n   */\n  intent?: 'info' | 'success' | 'error' | 'warning';\n  /**\n   * The appearance of the Alert.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type AlertState = ComponentState<AlertSlots> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Pick<AlertProps, 'intent'> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  Required<Pick<AlertProps, 'appearance'>>;\n"],"names":[],"mappings":"AA6CA;;;CAGC,GACD,4DAA4D"}

package/lib-commonjs/components/Alert/index.js

@@ -1,10 +1,31 @@
-"use strict";
+/* eslint-disable @typescript-eslint/no-deprecated */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Alert"), exports);
-_export_star._(require("./Alert.types"), exports);
-_export_star._(require("./renderAlert"), exports);
-_export_star._(require("./useAlert"), exports);
-_export_star._(require("./useAlertStyles.styles"), exports);
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Alert: function() {
+        return _Alert.Alert;
+    },
+    alertClassNames: function() {
+        return _useAlertStylesstyles.alertClassNames;
+    },
+    renderAlert_unstable: function() {
+        return _renderAlert.renderAlert_unstable;
+    },
+    useAlertStyles_unstable: function() {
+        return _useAlertStylesstyles.useAlertStyles_unstable;
+    },
+    useAlert_unstable: function() {
+        return _useAlert.useAlert_unstable;
+    }
+});
+const _Alert = require("./Alert");
+const _renderAlert = require("./renderAlert");
+const _useAlert = require("./useAlert");
+const _useAlertStylesstyles = require("./useAlertStyles.styles");

package/lib-commonjs/components/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["../src/components/Alert/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { Alert } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert.types';\nexport { renderAlert_unstable } from './renderAlert';\nexport { useAlert_unstable } from './useAlert';\nexport { alertClassNames, useAlertStyles_unstable } from './useAlertStyles.styles';\n"],"names":["Alert","renderAlert_unstable","useAlert_unstable","alertClassNames","useAlertStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD;;;;;;;;;;;;eAASA,YAAK;;;eAILG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}

package/lib-commonjs/components/Alert/renderAlert.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "renderAlert_unstable", {
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const renderAlert_unstable = (state)=>{
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [

package/lib-commonjs/components/Alert/renderAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAlert.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * @deprecated please use the Toast or MessageBar component\n */ // eslint-disable-next-line deprecation/deprecation\nexport const renderAlert_unstable = (state)=>{\n    // eslint-disable-next-line deprecation/deprecation\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),\n            state.avatar && /*#__PURE__*/ _jsx(state.avatar, {}),\n            state.root.children,\n            state.action && /*#__PURE__*/ _jsx(state.action, {})\n        ]\n    });\n};\n"],"names":["renderAlert_unstable","state","assertSlots","_jsxs","root","children","icon","_jsx","avatar","action"],"mappings":";;;;+BAKaA;;;eAAAA;;;4BALgC;gCACjB;AAIrB,MAAMA,uBAAuB,CAACC;IACjC,mDAAmD;IACnDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,IAAI,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,IAAI,EAAE,CAAC;YAC9CL,MAAMO,MAAM,IAAI,WAAW,GAAGD,IAAAA,eAAI,EAACN,MAAMO,MAAM,EAAE,CAAC;YAClDP,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMQ,MAAM,IAAI,WAAW,GAAGF,IAAAA,eAAI,EAACN,MAAMQ,MAAM,EAAE,CAAC;SACrD;IACL;AACJ"}
+{"version":3,"sources":["../src/components/Alert/renderAlert.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const renderAlert_unstable = (state: AlertState): React.ReactElement => {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  assertSlots<AlertSlots>(state);\n\n  return (\n    <state.root>\n      {state.icon && <state.icon />}\n      {state.avatar && <state.avatar />}\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAlert_unstable","state","root","icon","avatar","children","action"],"mappings":";;;;+BAWaC;;;;;;4BAVb,iCAAiD;gCACrB,4BAA4B;AASjD,6BAA6B,CAACC;IACnC,4DAA4D;QAC5DF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;YACzBF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;YAC7BH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

package/lib-commonjs/components/Alert/useAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAlert.js"],"sourcesContent":["import * as React from 'react';\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * @deprecated please use the Toast or MessageBar component\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */ // eslint-disable-next-line deprecation/deprecation\nexport const useAlert_unstable = (props, ref)=>{\n    const { appearance = 'primary', intent } = props;\n    /** Determine the role and icon to render based on the intent */ let defaultIcon;\n    let defaultRole = 'status';\n    switch(intent){\n        case 'success':\n            defaultIcon = /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);\n            break;\n        case 'error':\n            defaultIcon = /*#__PURE__*/ React.createElement(DismissCircleFilled, null);\n            defaultRole = 'alert';\n            break;\n        case 'warning':\n            defaultIcon = /*#__PURE__*/ React.createElement(WarningFilled, null);\n            defaultRole = 'alert';\n            break;\n        case 'info':\n            defaultIcon = /*#__PURE__*/ React.createElement(InfoFilled, null);\n            break;\n    }\n    const action = slot.optional(props.action, {\n        defaultProps: {\n            appearance: 'transparent'\n        },\n        elementType: Button\n    });\n    const avatar = slot.optional(props.avatar, {\n        elementType: Avatar\n    });\n    let icon;\n    /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {\n        icon = slot.optional(props.icon, {\n            defaultProps: {\n                children: defaultIcon\n            },\n            renderByDefault: !!props.intent,\n            elementType: 'span'\n        });\n    }\n    return {\n        action,\n        appearance,\n        avatar,\n        components: {\n            root: 'div',\n            icon: 'span',\n            action: Button,\n            avatar: Avatar\n        },\n        icon,\n        intent,\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: defaultRole,\n            children: props.children,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","React","createElement","CheckmarkCircleFilled","DismissCircleFilled","WarningFilled","InfoFilled","action","slot","optional","defaultProps","elementType","Button","avatar","Avatar","icon","children","renderByDefault","components","root","always","getIntrinsicElementProps","role"],"mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BACA;6BACA;4BAC+D;gCACvC;AAWxC,MAAMA,oBAAoB,CAACC,OAAOC;IACrC,MAAM,EAAEC,aAAa,SAAS,EAAEC,MAAM,EAAE,GAAGH;IAC3C,8DAA8D,GAAG,IAAII;IACrE,IAAIC,cAAc;IAClB,OAAOF;QACH,KAAK;YACDC,cAAc,WAAW,GAAGE,OAAMC,aAAa,CAACC,iCAAqB,EAAE;YACvE;QACJ,KAAK;YACDJ,cAAc,WAAW,GAAGE,OAAMC,aAAa,CAACE,+BAAmB,EAAE;YACrEJ,cAAc;YACd;QACJ,KAAK;YACDD,cAAc,WAAW,GAAGE,OAAMC,aAAa,CAACG,yBAAa,EAAE;YAC/DL,cAAc;YACd;QACJ,KAAK;YACDD,cAAc,WAAW,GAAGE,OAAMC,aAAa,CAACI,sBAAU,EAAE;YAC5D;IACR;IACA,MAAMC,SAASC,oBAAI,CAACC,QAAQ,CAACd,MAAMY,MAAM,EAAE;QACvCG,cAAc;YACVb,YAAY;QAChB;QACAc,aAAaC,mBAAM;IACvB;IACA,MAAMC,SAASL,oBAAI,CAACC,QAAQ,CAACd,MAAMkB,MAAM,EAAE;QACvCF,aAAaG,mBAAM;IACvB;IACA,IAAIC;IACJ,8DAA8D,GAAG,IAAI,CAACF,QAAQ;QAC1EE,OAAOP,oBAAI,CAACC,QAAQ,CAACd,MAAMoB,IAAI,EAAE;YAC7BL,cAAc;gBACVM,UAAUjB;YACd;YACAkB,iBAAiB,CAAC,CAACtB,MAAMG,MAAM;YAC/Ba,aAAa;QACjB;IACJ;IACA,OAAO;QACHJ;QACAV;QACAgB;QACAK,YAAY;YACRC,MAAM;YACNJ,MAAM;YACNR,QAAQK,mBAAM;YACdC,QAAQC,mBAAM;QAClB;QACAC;QACAjB;QACAqB,MAAMX,oBAAI,CAACY,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FzB,KAAKA;YACL0B,MAAMtB;YACNgB,UAAUrB,MAAMqB,QAAQ;YACxB,GAAGrB,KAAK;QACZ,IAAI;YACAgB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["../src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n  const { appearance = 'primary', intent } = props;\n\n  /** Determine the role and icon to render based on the intent */\n  let defaultIcon;\n  let defaultRole = 'status';\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      defaultRole = 'alert';\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  const action = slot.optional(props.action, { defaultProps: { appearance: 'transparent' }, elementType: Button });\n  const avatar = slot.optional(props.avatar, { elementType: Avatar });\n  let icon;\n  /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {\n    icon = slot.optional(props.icon, {\n      defaultProps: { children: defaultIcon },\n      renderByDefault: !!props.intent,\n      elementType: 'span',\n    });\n  }\n  return {\n    action,\n    appearance,\n    avatar,\n    components: { root: 'div', icon: 'span', action: Button, avatar: Avatar },\n    icon,\n    intent,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: defaultRole,\n        children: props.children,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","action","optional","defaultProps","elementType","avatar","icon","children","renderByDefault","components","root","always","role"],"mappings":";;;;+BAoBaS;;;;;;;iEApBU,QAAQ;6BAER,yBAAyB;6BACzB,yBAAyB;4BACsC,wBAAwB;gCAC/D,4BAA4B;AAepE,0BAA0B,CAACC,OAAmBC;IACnD,MAAM,EAAEC,aAAa,SAAS,EAAEC,MAAM,EAAE,GAAGH;IAE3C,8DAA8D,GAC9D,IAAII;IACJ,IAAIC,cAAc;IAClB,OAAQF;QACN,KAAK;YACHC,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACX,iCAAAA,EAAAA;YACf;QACF,KAAK;YACHW,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACV,+BAAAA,EAAAA;YACfW,cAAc;YACd;QACF,KAAK;YACHD,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACR,yBAAAA,EAAAA;YACfS,cAAc;YACd;QACF,KAAK;YACHD,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACT,sBAAAA,EAAAA;YACf;IACJ;IAEA,MAAMW,SAASR,oBAAAA,CAAKS,QAAQ,CAACP,MAAMM,MAAM,EAAE;QAAEE,cAAc;YAAEN,YAAY;QAAc;QAAGO,aAAajB,mBAAAA;IAAO;IAC9G,MAAMkB,SAASZ,oBAAAA,CAAKS,QAAQ,CAACP,MAAMU,MAAM,EAAE;QAAED,aAAalB,mBAAAA;IAAO;IACjE,IAAIoB;IACJ,8DAA8D,GAAG,IAAI,CAACD,QAAQ;QAC5EC,OAAOb,oBAAAA,CAAKS,QAAQ,CAACP,MAAMW,IAAI,EAAE;YAC/BH,cAAc;gBAAEI,UAAUR;YAAY;YACtCS,iBAAiB,CAAC,CAACb,MAAMG,MAAM;YAC/BM,aAAa;QACf;IACF;IACA,OAAO;QACLH;QACAJ;QACAQ;QACAI,YAAY;YAAEC,MAAM;YAAOJ,MAAM;YAAQL,QAAQd,mBAAAA;YAAQkB,QAAQnB,mBAAAA;QAAO;QACxEoB;QACAR;QACAY,MAAMjB,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACLgB,MAAMZ;YACNO,UAAUZ,MAAMY,QAAQ;YACxB,GAAGZ,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib-commonjs/components/Alert/useAlertStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -241,6 +242,7 @@ const useAlertStyles_unstable = (state)=>{
     const intentIconStylesPrimary = useIntentIconStyles();
     const intentIconStylesInverted = useIntentIconStylesInverted();
     const actionStylesInverted = useActionButtonColorInverted();
+    // eslint-disable-next-line react-compiler/react-compiler
     state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
@@ -253,4 +255,4 @@ const useAlertStyles_unstable = (state)=>{
         state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
     }
     return state;
-}; //# sourceMappingURL=useAlertStyles.styles.js.map
+};

package/lib-commonjs/components/Alert/useAlertStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAlertStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n// eslint-disable-next-line deprecation/deprecation\nexport const alertClassNames = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n  avatar: 'fui-Alert__avatar'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    sshi5w: \"f5pgtk9\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f1oic3e7\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ff3glw6\",\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f9ggezi\",\n    E5pizo: \"fz58gqq\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"fl43uef\",\n    sj55zd: \"f19n0e5\",\n    De3pzq: \"fxugw4r\"\n  },\n  inverted: {\n    sj55zd: \"f1w7i9ko\",\n    De3pzq: \"f5pduvr\"\n  },\n  icon: {\n    Bqenvij: \"fd461yt\",\n    Be2twd7: \"f4ybsrx\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: [\"fhivll6\", \"f1cgepy8\"]\n  },\n  avatar: {\n    jrapky: 0,\n    Frg6f3: 0,\n    t21cq0: 0,\n    B6of3ja: 0,\n    B74szlk: [\"fxal17o\", \"ftghr3s\"]\n  },\n  action: {\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f4jnnbt\",\n    Bf4jedk: \"fy77jfu\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    sj55zd: \"f16muhyy\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\", \".f5pgtk9{min-height:44px;}\", [\".f1oic3e7{padding:0 12px;}\", {\n    p: -1\n  }], [\".ff3glw6{border-radius:4px;}\", {\n    p: -1\n  }], [\".f9ggezi{border:1px solid var(--colorTransparentStroke);}\", {\n    p: -2\n  }], \".fz58gqq{box-shadow:var(--shadow8);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\", \".fd461yt{height:16px;}\", \".f4ybsrx{font-size:16px;}\", [\".fhivll6{padding:0 8px 0 0;}\", {\n    p: -1\n  }], [\".f1cgepy8{padding:0 0 0 8px;}\", {\n    p: -1\n  }], [\".fxal17o{margin:0 8px 0 0;}\", {\n    p: -1\n  }], [\".ftghr3s{margin:0 0 0 8px;}\", {\n    p: -1\n  }], [\".f4jnnbt{padding:5px 10px;}\", {\n    p: -1\n  }], \".fy77jfu{min-width:0;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f16muhyy{color:var(--colorBrandForeground1);}\"]\n});\nconst useIntentIconStyles = /*#__PURE__*/__styles({\n  success: {\n    sj55zd: \"f1m7fhi8\"\n  },\n  error: {\n    sj55zd: \"f1whyuy6\"\n  },\n  warning: {\n    sj55zd: \"fpti2h4\"\n  },\n  info: {\n    sj55zd: \"fkfq4zb\"\n  }\n}, {\n  d: [\".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}\", \".f1whyuy6{color:var(--colorPaletteRedForeground3);}\", \".fpti2h4{color:var(--colorPaletteYellowForeground2);}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\"]\n});\nconst useIntentIconStylesInverted = /*#__PURE__*/__styles({\n  success: {\n    sj55zd: \"f1pvjcpr\"\n  },\n  error: {\n    sj55zd: \"fcrp5ll\"\n  },\n  warning: {\n    sj55zd: \"f1r8f1cl\"\n  },\n  info: {\n    sj55zd: \"f1w7i9ko\"\n  }\n}, {\n  d: [\".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}\", \".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}\", \".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}\", \".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\"]\n});\nconst useActionButtonColorInverted = /*#__PURE__*/__styles({\n  action: {\n    sj55zd: \"f1qz2gb0\",\n    B8q5s1w: \"fa5e339\",\n    Bci5o5g: [\"fk4svks\", \"fqzoz0o\"],\n    n8qw10: \"fw8q0i0\",\n    Bdrgwmp: [\"fqzoz0o\", \"fk4svks\"],\n    Bfpq7zp: \"f1dlk4fq\"\n  }\n}, {\n  d: [\".f1qz2gb0{color:var(--colorBrandForegroundInverted);}\", \".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}\", \".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}\", \".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}\", \".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}\", \".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}\"]\n});\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */ // eslint-disable-next-line deprecation/deprecation\nexport const useAlertStyles_unstable = state => {\n  const inverted = state.appearance === 'inverted';\n  const styles = useStyles();\n  const intentIconStylesPrimary = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const actionStylesInverted = useActionButtonColorInverted();\n  state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);\n  if (state.icon) {\n    state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);\n  }\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n  if (state.action) {\n    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n    state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useAlertStyles.styles.js.map"],"names":["alertClassNames","useAlertStyles_unstable","root","icon","action","avatar","useStyles","__styles","mc9l5x","Bt984gj","sshi5w","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bf4jedk","d","p","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","mergeClasses","intent"],"mappings":"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"}
+{"version":3,"sources":["useAlertStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames = {\n    root: 'fui-Alert',\n    icon: 'fui-Alert__icon',\n    action: 'fui-Alert__action',\n    avatar: 'fui-Alert__avatar'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '44px',\n        padding: '0 12px',\n        borderRadius: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        boxShadow: tokens.shadow8,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    },\n    icon: {\n        height: '16px',\n        fontSize: '16px',\n        padding: '0 8px 0 0'\n    },\n    avatar: {\n        margin: '0 8px 0 0'\n    },\n    action: {\n        padding: '5px 10px',\n        minWidth: 0,\n        marginLeft: 'auto',\n        color: tokens.colorBrandForeground1\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        color: tokens.colorPaletteRedForeground3\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\nconst useActionButtonColorInverted = makeStyles({\n    action: {\n        color: tokens.colorBrandForegroundInverted,\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n            outlineColor: tokens.colorNeutralBackground5Pressed\n        }, {\n            enableOutline: true\n        })\n    }\n});\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */ // eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state)=>{\n    const inverted = state.appearance === 'inverted';\n    const styles = useStyles();\n    const intentIconStylesPrimary = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const actionStylesInverted = useActionButtonColorInverted();\n    // eslint-disable-next-line react-compiler/react-compiler\n    state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);\n    }\n    if (state.avatar) {\n        state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n    }\n    if (state.action) {\n        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n        state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bf4jedk","d","p","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"mappings":"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"}

package/lib-commonjs/components/Alert/useAlertStyles.styles.raw.js

@@ -0,0 +1,120 @@
+'use client';
+"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, {
+    alertClassNames: function() {
+        return alertClassNames;
+    },
+    useAlertStyles_unstable: function() {
+        return useAlertStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const alertClassNames = {
+    root: 'fui-Alert',
+    icon: 'fui-Alert__icon',
+    action: 'fui-Alert__action',
+    avatar: 'fui-Alert__avatar'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '44px',
+        padding: '0 12px',
+        borderRadius: '4px',
+        border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        boxShadow: _reacttheme.tokens.shadow8,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    inverted: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
+    },
+    icon: {
+        height: '16px',
+        fontSize: '16px',
+        padding: '0 8px 0 0'
+    },
+    avatar: {
+        margin: '0 8px 0 0'
+    },
+    action: {
+        padding: '5px 10px',
+        minWidth: 0,
+        marginLeft: 'auto',
+        color: _reacttheme.tokens.colorBrandForeground1
+    }
+});
+const useIntentIconStyles = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3
+    },
+    error: {
+        color: _reacttheme.tokens.colorPaletteRedForeground3
+    },
+    warning: {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForeground2
+    }
+});
+const useIntentIconStylesInverted = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorPaletteGreenForegroundInverted
+    },
+    error: {
+        color: _reacttheme.tokens.colorPaletteRedForegroundInverted
+    },
+    warning: {
+        color: _reacttheme.tokens.colorPaletteYellowForegroundInverted
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    }
+});
+const useActionButtonColorInverted = (0, _react.makeStyles)({
+    action: {
+        color: _reacttheme.tokens.colorBrandForegroundInverted,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive),
+            outlineColor: _reacttheme.tokens.colorNeutralBackground5Pressed
+        }, {
+            enableOutline: true
+        })
+    }
+});
+const useAlertStyles_unstable = (state)=>{
+    const inverted = state.appearance === 'inverted';
+    const styles = useStyles();
+    const intentIconStylesPrimary = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const actionStylesInverted = useActionButtonColorInverted();
+    // eslint-disable-next-line react-compiler/react-compiler
+    state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
+    }
+    if (state.avatar) {
+        state.avatar.className = (0, _react.mergeClasses)(alertClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.action) {
+        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+        state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Alert/useAlertStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/useAlertStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n  avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '44px',\n    padding: '0 12px',\n    borderRadius: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n  icon: {\n    height: '16px',\n    fontSize: '16px',\n    padding: '0 8px 0 0',\n  },\n  avatar: { margin: '0 8px 0 0' },\n  action: {\n    padding: '5px 10px',\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForeground1,\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  error: {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForegroundInverted,\n  },\n  error: {\n    color: tokens.colorPaletteRedForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        outlineColor: tokens.colorNeutralBackground5Pressed,\n      },\n      { enableOutline: true },\n    ),\n  },\n});\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n  const inverted = state.appearance === 'inverted';\n  const styles = useStyles();\n  const intentIconStylesPrimary = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const actionStylesInverted = useActionButtonColorInverted();\n\n  // eslint-disable-next-line react-compiler/react-compiler\n  state.root.className = mergeClasses(\n    alertClassNames.root,\n    styles.root,\n    inverted && styles.inverted,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      alertClassNames.icon,\n      styles.icon,\n      state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n      state.icon.className,\n    );\n  }\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n\n  if (state.action) {\n    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n    state.action.className = mergeClasses(\n      alertClassNames.action,\n      styles.action,\n      inverted && actionStylesInverted.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","display","alignItems","minHeight","padding","borderRadius","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","height","margin","minWidth","marginLeft","colorBrandForeground1","useIntentIconStyles","success","colorPaletteGreenForeground3","error","colorPaletteRedForeground3","warning","colorPaletteYellowForeground2","info","colorNeutralForeground2","useIntentIconStylesInverted","colorPaletteGreenForegroundInverted","colorPaletteRedForegroundInverted","colorPaletteYellowForegroundInverted","useActionButtonColorInverted","colorBrandForegroundInverted","borderColor","colorTransparentStrokeInteractive","outlineColor","colorNeutralBackground5Pressed","enableOutline","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line deprecation/deprecation
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,mDAAmD;;;;;;;;;;;;IAC1CA,KAAK;eAALA,YAAK;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;;uBAAQ"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eACnDA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.124",
+  "version": "9.0.0-beta.126",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,43 +11,28 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "scripts": {
-    "build": "just-scripts build",
-    "bundle-size": "monosize measure",
-    "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style",
-    "just": "just-scripts",
-    "lint": "just-scripts lint",
-    "start": "yarn storybook",
-    "test": "jest --passWithNoTests",
-    "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json",
-    "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
-  },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.6.29",
-    "@fluentui/react-button": "^9.3.83",
+    "@fluentui/react-avatar": "^9.9.9",
+    "@fluentui/react-button": "^9.6.9",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-tabster": "^9.21.5",
-    "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.10",
-    "@fluentui/react-jsx-runtime": "^9.0.39",
+    "@fluentui/react-tabster": "^9.26.7",
+    "@fluentui/react-theme": "^9.2.0",
+    "@fluentui/react-utilities": "^9.25.1",
+    "@fluentui/react-jsx-runtime": "^9.3.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [