@fluentui/react-alert 9.0.0-beta.9 → 9.0.0-beta.90

package/README.md

@@ -1,6 +1,8 @@
 # @fluentui/react-alert
 
-**React Alert component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+## DEPRECATED
 
-> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
-> See the [spec.md](./Spec.md) for usage and component API details
+This component is deprecated please use the following components instead:
+
+- Toast - @fluentui/react-toast
+- MessageBar - @fluentui/react-message-bar

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
+ * @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.
  */
@@ -19,6 +20,7 @@ export declare const alertClassNames: SlotClassNames<AlertSlots>;
 
 /**
  * Alert Props
+ * @deprecated please use the Toast or MessageBar component
  */
 export declare type AlertProps = ComponentProps<AlertSlots> & {
     /**
@@ -33,6 +35,9 @@ export declare type AlertProps = ComponentProps<AlertSlots> & {
     appearance?: 'primary' | 'inverted';
 };
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
 export declare type AlertSlots = {
     /**
      * The root slot is the top level container for the alert component
@@ -54,12 +59,17 @@ export declare type AlertSlots = {
 
 /**
  * State used in rendering Alert
+ * @deprecated please use the Toast or MessageBar component
  */
 export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
 export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Create the state required to render Alert.
  *
  * The returned state can be modified with hooks such as useAlertStyles_unstable,
@@ -71,6 +81,7 @@ export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
 export declare const useAlert_unstable: (props: AlertProps, ref: React_2.Ref<HTMLElement>) => AlertState;
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Apply styling to the Alert slots based on the state
  */
 export declare const useAlertStyles_unstable: (state: AlertState) => AlertState;

package/lib/Alert.js

@@ -1,2 +1 @@
 export * from './components/Alert/index';
-//# sourceMappingURL=Alert.js.map

package/lib/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"../src/","sources":["Alert.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Alert/index';\n"]}
+{"version":3,"sources":["Alert.ts"],"sourcesContent":["export * from './components/Alert/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}

package/lib/components/Alert/Alert.js

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { renderAlert_unstable } from './renderAlert';
 import { useAlert_unstable } from './useAlert';
-import { useAlertStyles_unstable } from './useAlertStyles';
+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.
- */
-
-export const Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAlert_unstable(props, ref);
-  useAlertStyles_unstable(state);
-  return renderAlert_unstable(state);
+ */ // eslint-disable-next-line deprecation/deprecation
+export const Alert = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    // eslint-disable-next-line deprecation/deprecation
+    const state = useAlert_unstable(props, ref);
+    // eslint-disable-next-line deprecation/deprecation
+    useAlertStyles_unstable(state);
+    // eslint-disable-next-line deprecation/deprecation
+    return renderAlert_unstable(state);
+// eslint-disable-next-line deprecation/deprecation
 });
+// eslint-disable-next-line deprecation/deprecation
 Alert.displayName = 'Alert';
-//# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAKA;;;AAGG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n  const state = useAlert_unstable(props, ref);\n\n  useAlertStyles_unstable(state);\n  return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
+{"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"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Alert.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 */\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 */\nexport type AlertState = ComponentState<AlertSlots> &\n  Pick<AlertProps, 'intent'> &\n  Required<Pick<AlertProps, 'appearance'>>;\n"]}
+{"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"}

package/lib/components/Alert/index.js

@@ -2,5 +2,4 @@ export * from './Alert';
 export * from './Alert.types';
 export * from './renderAlert';
 export * from './useAlert';
-export * from './useAlertStyles';
-//# sourceMappingURL=index.js.map
+export * from './useAlertStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"]}
+{"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"}

package/lib/components/Alert/renderAlert.js

@@ -1,14 +1,17 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
-export const renderAlert_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
-  }), slots.avatar && /*#__PURE__*/React.createElement(slots.avatar, { ...slotProps.avatar
-  }), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
-  }));
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */ // eslint-disable-next-line deprecation/deprecation
+export const renderAlert_unstable = (state)=>{
+    // eslint-disable-next-line deprecation/deprecation
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.avatar && /*#__PURE__*/ _jsx(state.avatar, {}),
+            state.root.children,
+            state.action && /*#__PURE__*/ _jsx(state.action, {})
+        ]
+    });
 };
-//# sourceMappingURL=renderAlert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAJnB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n  const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"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"}

package/lib/components/Alert/useAlert.js

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
 import { Button } from '@fluentui/react-button';
 import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Create the state required to render Alert.
  *
  * The returned state can be modified with hooks such as useAlertStyles_unstable,
@@ -11,74 +12,68 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
  *
  * @param props - props from this instance of Alert
  * @param ref - reference to root HTMLElement of Alert
- */
-
-export const useAlert_unstable = (props, ref) => {
-  const {
-    appearance = 'primary',
-    intent
-  } = props;
-  /** Determine the role and icon to render based on the intent */
-
-  let defaultIcon;
-  let defaultRole = 'status';
-
-  switch (intent) {
-    case 'success':
-      defaultIcon = /*#__PURE__*/React.createElement(CheckmarkCircleFilled, null);
-      break;
-
-    case 'error':
-      defaultIcon = /*#__PURE__*/React.createElement(DismissCircleFilled, null);
-      defaultRole = 'alert';
-      break;
-
-    case 'warning':
-      defaultIcon = /*#__PURE__*/React.createElement(WarningFilled, null);
-      defaultRole = 'alert';
-      break;
-
-    case 'info':
-      defaultIcon = /*#__PURE__*/React.createElement(InfoFilled, null);
-      break;
-  }
-
-  const action = resolveShorthand(props.action, {
-    defaultProps: {
-      appearance: 'transparent'
+ */ // eslint-disable-next-line deprecation/deprecation
+export const useAlert_unstable = (props, ref)=>{
+    const { appearance = 'primary', intent } = props;
+    /** Determine the role and icon to render based on the intent */ let defaultIcon;
+    let defaultRole = 'status';
+    switch(intent){
+        case 'success':
+            defaultIcon = /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);
+            break;
+        case 'error':
+            defaultIcon = /*#__PURE__*/ React.createElement(DismissCircleFilled, null);
+            defaultRole = 'alert';
+            break;
+        case 'warning':
+            defaultIcon = /*#__PURE__*/ React.createElement(WarningFilled, null);
+            defaultRole = 'alert';
+            break;
+        case 'info':
+            defaultIcon = /*#__PURE__*/ React.createElement(InfoFilled, null);
+            break;
     }
-  });
-  const avatar = resolveShorthand(props.avatar);
-  let icon;
-  /** Avatar prop takes precedence over the icon or intent prop */
-
-  if (!avatar) {
-    icon = resolveShorthand(props.icon, {
-      defaultProps: {
-        children: defaultIcon
-      },
-      required: !!props.intent
+    const action = slot.optional(props.action, {
+        defaultProps: {
+            appearance: 'transparent'
+        },
+        elementType: Button
     });
-  }
-
-  return {
-    action,
-    appearance,
-    avatar,
-    components: {
-      root: 'div',
-      icon: 'span',
-      action: Button,
-      avatar: Avatar
-    },
-    icon,
-    intent,
-    root: getNativeElementProps('div', {
-      ref,
-      role: defaultRole,
-      children: props.children,
-      ...props
-    })
-  };
+    const avatar = slot.optional(props.avatar, {
+        elementType: Avatar
+    });
+    let icon;
+    /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {
+        icon = slot.optional(props.icon, {
+            defaultProps: {
+                children: defaultIcon
+            },
+            renderByDefault: !!props.intent,
+            elementType: 'span'
+        });
+    }
+    return {
+        action,
+        appearance,
+        avatar,
+        components: {
+            root: 'div',
+            icon: 'span',
+            action: Button,
+            avatar: Avatar
+        },
+        icon,
+        intent,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            role: defaultRole,
+            children: props.children,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
 };
-//# sourceMappingURL=useAlert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B;EAA1B,IAAqC,KAA3C;EAEA;;EACA,IAAI,WAAJ;EACA,IAAI,WAAW,GAAG,QAAlB;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA,WAAW,GAAG,OAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAdJ;;EAiBA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;IAAE,YAAY,EAAE;MAAE,UAAU,EAAE;IAAd;EAAhB,CAAf,CAA/B;EACA,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAA/B;EACA,IAAI,IAAJ;EACA;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAClC,YAAY,EAAE;QACZ,QAAQ,EAAE;MADE,CADoB;MAIlC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;IAJgB,CAAb,CAAvB;EAMD;;EAED,OAAO;IACL,MADK;IAEL,UAFK;IAGL,MAHK;IAIL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CAJP;IAUL,IAVK;IAWL,MAXK;IAYL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR;EAZtB,CAAP;AAmBD,CAvDM","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 { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\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 */\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 = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n  const avatar = resolveShorthand(props.avatar);\n  let icon;\n  /** Avatar prop takes precedence over the icon or intent prop */\n  if (!avatar) {\n    icon = resolveShorthand(props.icon, {\n      defaultProps: {\n        children: defaultIcon,\n      },\n      required: !!props.intent,\n    });\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: getNativeElementProps('div', {\n      ref,\n      role: defaultRole,\n      children: props.children,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"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"}

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

@@ -0,0 +1,139 @@
+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
+export const alertClassNames = {
+  root: 'fui-Alert',
+  icon: 'fui-Alert__icon',
+  action: 'fui-Alert__action',
+  avatar: 'fui-Alert__avatar'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    sshi5w: "f5pgtk9",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f11qrl6u", "fjlbh76"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["fjlbh76", "f11qrl6u"],
+    Bbmb7ep: ["fff7au0", "f1bjk9e1"],
+    Beyfa6y: ["f1bjk9e1", "fff7au0"],
+    B7oj6ja: ["fwsfkhu", "f8wkphi"],
+    Btl43ni: ["f8wkphi", "fwsfkhu"],
+    B4j52fo: "f5ogflp",
+    Bekrc4i: ["f1hqa2wf", "finvdd3"],
+    Bn0qgzm: "f1f09k3d",
+    ibv6hh: ["finvdd3", "f1hqa2wf"],
+    icvyot: "fzkkow9",
+    vrafjx: ["fcdblym", "fjik90z"],
+    oivjwe: "fg706s2",
+    wvpqe5: ["fjik90z", "fcdblym"],
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    E5pizo: "fz58gqq",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    sj55zd: "f19n0e5",
+    De3pzq: "fxugw4r"
+  },
+  inverted: {
+    sj55zd: "f1w7i9ko",
+    De3pzq: "f5pduvr"
+  },
+  icon: {
+    Bqenvij: "fd461yt",
+    Be2twd7: "f4ybsrx",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f19lj068", "f177v4lu"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  },
+  avatar: {
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f1phki43", "ff9s3yw"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"]
+  },
+  action: {
+    z8tnut: "f1sbtcvk",
+    z189sj: ["f81rol6", "frdkuqy"],
+    Byoj8tv: "fdghr9",
+    uwmqm3: ["frdkuqy", "f81rol6"],
+    Bf4jedk: "fy77jfu",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    sj55zd: "f16muhyy"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".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;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
+});
+const useIntentIconStyles = /*#__PURE__*/__styles({
+  success: {
+    sj55zd: "f1m7fhi8"
+  },
+  error: {
+    sj55zd: "f1whyuy6"
+  },
+  warning: {
+    sj55zd: "fpti2h4"
+  },
+  info: {
+    sj55zd: "fkfq4zb"
+  }
+}, {
+  d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
+});
+const useIntentIconStylesInverted = /*#__PURE__*/__styles({
+  success: {
+    sj55zd: "f1pvjcpr"
+  },
+  error: {
+    sj55zd: "fcrp5ll"
+  },
+  warning: {
+    sj55zd: "f1r8f1cl"
+  },
+  info: {
+    sj55zd: "f1w7i9ko"
+  }
+}, {
+  d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
+});
+const useActionButtonColorInverted = /*#__PURE__*/__styles({
+  action: {
+    sj55zd: "f1qz2gb0",
+    B8q5s1w: "fa5e339",
+    Bci5o5g: ["fk4svks", "fqzoz0o"],
+    n8qw10: "fw8q0i0",
+    Bdrgwmp: ["fqzoz0o", "fk4svks"],
+    Bfpq7zp: "f1dlk4fq"
+  }
+}, {
+  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);}"]
+});
+/**
+ * @deprecated please use the Toast or MessageBar component
+ * Apply styling to the Alert slots based on the state
+ */ // eslint-disable-next-line deprecation/deprecation
+export const useAlertStyles_unstable = state => {
+  const inverted = state.appearance === 'inverted';
+  const styles = useStyles();
+  const intentIconStylesPrimary = useIntentIconStyles();
+  const intentIconStylesInverted = useIntentIconStylesInverted();
+  const actionStylesInverted = useActionButtonColorInverted();
+  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;
+};
+//# sourceMappingURL=useAlertStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","z8tnut","z189sj","Byoj8tv","uwmqm3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","B6of3ja","t21cq0","jrapky","Frg6f3","Bf4jedk","d","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        ...shorthands.padding('0', '12px'),\n        ...shorthands.borderRadius('4px'),\n        ...shorthands.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        ...shorthands.padding('0', '8px', '0', '0')\n    },\n    avatar: {\n        ...shorthands.margin('0', '8px', '0', '0')\n    },\n    action: {\n        ...shorthands.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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"}

package/lib/index.js

@@ -1,2 +1,2 @@
+// eslint-disable-next-line deprecation/deprecation
 export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"]}
+{"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"}

package/lib-commonjs/Alert.js

@@ -1,10 +1,6 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./components/Alert/index"), exports);
-//# sourceMappingURL=Alert.js.map
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/Alert/index"), exports);

package/lib-commonjs/Alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Alert.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Alert/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["Alert.js"],"sourcesContent":["export * from './components/Alert/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

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

@@ -1,27 +1,26 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.Alert = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const renderAlert_1 = /*#__PURE__*/require("./renderAlert");
-
-const useAlert_1 = /*#__PURE__*/require("./useAlert");
-
-const useAlertStyles_1 = /*#__PURE__*/require("./useAlertStyles");
-/**
- * An Alert component displays a brief, important message to attract a user's attention
- *  without interrupting their current task.
- */
-
-
-exports.Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAlert_1.useAlert_unstable(props, ref);
-  useAlertStyles_1.useAlertStyles_unstable(state);
-  return renderAlert_1.renderAlert_unstable(state);
+Object.defineProperty(exports, "Alert", {
+    enumerable: true,
+    get: function() {
+        return Alert;
+    }
 });
-exports.Alert.displayName = 'Alert';
-//# sourceMappingURL=Alert.js.map
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+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
+    const state = (0, _useAlert.useAlert_unstable)(props, ref);
+    // eslint-disable-next-line deprecation/deprecation
+    (0, _useAlertStylesstyles.useAlertStyles_unstable)(state);
+    // eslint-disable-next-line deprecation/deprecation
+    return (0, _renderAlert.renderAlert_unstable)(state);
+// eslint-disable-next-line deprecation/deprecation
+});
+// eslint-disable-next-line deprecation/deprecation
+Alert.displayName = 'Alert';

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAKA;;;AAGG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n  const state = useAlert_unstable(props, ref);\n\n  useAlertStyles_unstable(state);\n  return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"sourceRoot":"../src/"}
+{"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"}

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

@@ -1,6 +1,4 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-//# sourceMappingURL=Alert.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":[],"names":[],"mappings":""}