@fluentui/react-alert 9.0.0-beta.7 → 9.0.0-beta.71

package/README.md

@@ -1,6 +1,6 @@
 # @fluentui/react-alert
 
-**React Alert component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+**React Alert component for [Fluent UI React](https://react.fluentui.dev)**
 
 > 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

package/dist/index.d.ts

@@ -26,6 +26,11 @@ export declare type AlertProps = ComponentProps<AlertSlots> & {
      * overrides the intent prop
      */
     intent?: 'info' | 'success' | 'error' | 'warning';
+    /**
+     * The appearance of the Alert.
+     * @default 'primary'
+     */
+    appearance?: 'primary' | 'inverted';
 };
 
 export declare type AlertSlots = {
@@ -50,7 +55,7 @@ export declare type AlertSlots = {
 /**
  * State used in rendering Alert
  */
-export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'>;
+export declare type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
 
 export declare const renderAlert_unstable: (state: AlertState) => JSX.Element;
 

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,13 @@
 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';
 /**
  * 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);
+ */ export const Alert = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAlert_unstable(props, ref);
+    useAlertStyles_unstable(state);
+    return renderAlert_unstable(state);
 });
 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 * 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"],"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;;;CAGC,GACD,OAAO,MAAMC,sBAAyCJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrF,MAAMC,QAAQN,kBAAkBI,OAAOC;IAEvCJ,wBAAwBK;IACxB,OAAOP,qBAAqBO;AAC9B,GAAsC;AAEtCJ,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\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'>;\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\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"],"names":[],"mappings":"AAAA,WA6C2C"}

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,6 @@
-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
-  }));
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
+export const renderAlert_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), state.avatar && /*#__PURE__*/ createElement(state.avatar, null), state.root.children, state.action && /*#__PURE__*/ createElement(state.action, null));
 };
-//# 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 classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\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":["createElement","assertSlots","renderAlert_unstable","state","root","icon","avatar","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAIxD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzDF,YAAwBE;IAExB,qBACE,AAXJ,cAWKA,MAAMC,IAAI,QACRD,MAAME,IAAI,kBAAI,AAZrB,cAYsBF,MAAME,IAAI,SACzBF,MAAMG,MAAM,kBAAI,AAbvB,cAawBH,MAAMG,MAAM,SAC7BH,MAAMC,IAAI,CAACG,QAAQ,EACnBJ,MAAMK,MAAM,kBAAI,AAfvB,cAewBL,MAAMK,MAAM;AAGpC,EAAE"}

package/lib/components/Alert/useAlert.js

@@ -2,7 +2,7 @@ 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 { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Alert.
  *
@@ -11,71 +11,64 @@ 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 {
-    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
+ */ 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 = slot.optional(props.action, {
+        defaultProps: {
+            appearance: 'transparent'
+        },
+        elementType: Button
     });
-  }
-
-  return {
-    components: {
-      root: 'div',
-      icon: 'span',
-      action: Button,
-      avatar: Avatar
-    },
-    root: getNativeElementProps('div', {
-      ref,
-      role: defaultRole,
-      children: props.children,
-      ...props
-    }),
-    icon,
-    avatar,
-    action: resolveShorthand(props.action, {
-      defaultProps: {
-        appearance: 'transparent'
-      }
-    }),
-    intent
-  };
+    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(getNativeElementProps('div', {
+            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;EAAF,IAAa,KAAnB;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,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,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,MAHE;MAIV,MAAM,EAAE;IAJE,CADP;IAOL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,WAF2B;MAGjC,QAAQ,EAAE,KAAK,CAAC,QAHiB;MAIjC,GAAG;IAJ8B,CAAR,CAPtB;IAaL,IAbK;IAcL,MAdK;IAeL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,EAAe;MAAE,YAAY,EAAE;QAAE,UAAU,EAAE;MAAd;IAAhB,CAAf,CAfnB;IAgBL;EAhBK,CAAP;AAkBD,CArDM","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 { 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 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    components: {\n      root: 'div',\n      icon: 'span',\n      action: Button,\n      avatar: Avatar,\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      role: defaultRole,\n      children: props.children,\n      ...props,\n    }),\n    icon,\n    avatar,\n    action: resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } }),\n    intent,\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 { getNativeElementProps, slot } 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 = 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      getNativeElementProps('div', {\n        ref,\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","getNativeElementProps","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,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,MAAM,EAAEC,YAAa,UAAS,EAAEC,OAAM,EAAE,GAAGH;IAE3C,8DAA8D,GAC9D,IAAII;IACJ,IAAIC,cAAc;IAClB,OAAQF;QACN,KAAK;YACHC,4BAAc,oBAACX;YACf,KAAM;QACR,KAAK;YACHW,4BAAc,oBAACV;YACfW,cAAc;YACd,KAAM;QACR,KAAK;YACHD,4BAAc,oBAACR;YACfS,cAAc;YACd,KAAM;QACR,KAAK;YACHD,4BAAc,oBAACT;YACf,KAAM;IACV;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,CAAC;IACD,OAAO;QACLH;QACAJ;QACAQ;QACAI,YAAY;YAAEC,MAAM;YAAOJ,MAAM;YAAQL,QAAQd;YAAQkB,QAAQnB;QAAO;QACxEoB;QACAR;QACAY,MAAMjB,KAAKkB,MAAM,CACfnB,sBAAsB,OAAO;YAC3BI;YACAgB,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,137 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+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);}"]
+});
+/**
+ * Apply styling to the Alert slots based on the state
+ */
+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';\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 * Apply styling to the Alert slots based on the state\n */ export 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 @@
 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":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,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 _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(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":";;;;;oBAAc"}

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

@@ -1,27 +1,19 @@
 "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: ()=>Alert
 });
-exports.Alert.displayName = 'Alert';
-//# sourceMappingURL=Alert.js.map
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _renderAlert = require("./renderAlert");
+const _useAlert = require("./useAlert");
+const _useAlertStylesStyles = require("./useAlertStyles.styles");
+const Alert = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useAlert.useAlert_unstable)(props, ref);
+    (0, _useAlertStylesStyles.useAlertStyles_unstable)(state);
+    return (0, _renderAlert.renderAlert_unstable)(state);
+});
+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 * An Alert component displays a brief, important message to attract a user's attention\n *  without interrupting their current task.\n */ export const Alert = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useAlert_unstable(props, ref);\n    useAlertStyles_unstable(state);\n    return renderAlert_unstable(state);\n});\nAlert.displayName = 'Alert';\n"],"names":["Alert","React","forwardRef","props","ref","state","useAlert_unstable","useAlertStyles_unstable","renderAlert_unstable","displayName"],"mappings":";;;;+BAOiBA;;aAAAA;;;6DAPM;6BACc;0BACH;sCACM;AAI7B,MAAMA,QAAQ,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAClE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,6CAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAChC;AACAL,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":""}

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

@@ -1,18 +1,10 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./Alert"), exports);
-
-tslib_1.__exportStar(require("./Alert.types"), exports);
-
-tslib_1.__exportStar(require("./renderAlert"), exports);
-
-tslib_1.__exportStar(require("./useAlert"), exports);
-
-tslib_1.__exportStar(require("./useAlertStyles"), exports);
-//# sourceMappingURL=index.js.map
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Alert"), exports);
+_exportStar(require("./Alert.types"), exports);
+_exportStar(require("./renderAlert"), exports);
+_exportStar(require("./useAlert"), exports);
+_exportStar(require("./useAlertStyles.styles"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"],"sourceRoot":"../src/"}
+{"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":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}

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

@@ -1,25 +1,14 @@
-"use strict";
-
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.renderAlert_unstable = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const renderAlert_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
-  }), slots.avatar && React.createElement(slots.avatar, { ...slotProps.avatar
-  }), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
-  }));
+Object.defineProperty(exports, "renderAlert_unstable", {
+    enumerable: true,
+    get: ()=>renderAlert_unstable
+});
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
+const _reactUtilities = require("@fluentui/react-utilities");
+const renderAlert_unstable = (state)=>{
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.icon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.icon, null), state.avatar && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.avatar, null), state.root.children, state.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.action, null));
 };
-
-exports.renderAlert_unstable = renderAlert_unstable;
-//# sourceMappingURL=renderAlert.js.map