@fluentui/react-alert 9.0.0-beta.4 → 9.0.0-beta.41

package/lib/components/Alert/useAlert.js

@@ -1,4 +1,5 @@
 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';
@@ -11,53 +12,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 {
+    appearance = 'primary',
     intent
   } = props;
-  /** Determine the icon to render based on the intent */
-
+  /** 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 icon = resolveShorthand(props.icon, {
+  const action = resolveShorthand(props.action, {
     defaultProps: {
-      children: defaultIcon
-    },
-    required: !!props.intent
+      appearance: 'transparent'
+    }
   });
+  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
+    });
+  }
   return {
+    action,
+    appearance,
+    avatar,
     components: {
       root: 'div',
       icon: 'span',
-      action: Button
+      action: Button,
+      avatar: Avatar
     },
+    icon,
+    intent,
     root: getNativeElementProps('div', {
       ref,
+      role: defaultRole,
       children: props.children,
       ...props
-    }),
-    icon,
-    action: resolveShorthand(props.action),
-    intent
+    })
   };
 };
 //# 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,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,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;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAZJ;;EAeA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE,CAD0B;IAIxC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;EAJsB,CAAb,CAA7B;EAOA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE;IAHE,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,QAAQ,EAAE,KAAK,CAAC,QAFiB;MAGjC,GAAG;IAH8B,CAAR,CANtB;IAWL,IAXK;IAYL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAZnB;IAaL;EAbK,CAAP;AAeD,CA1CM","sourcesContent":["import * as React from 'react';\n\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 icon to render based on the intent */\n  let defaultIcon;\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DismissCircleFilled />;\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  const icon = resolveShorthand(props.icon, {\n    defaultProps: {\n      children: defaultIcon,\n    },\n    required: !!props.intent,\n  });\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'span',\n      action: Button,\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      children: props.children,\n      ...props,\n    }),\n    icon,\n    action: resolveShorthand(props.action),\n    intent,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","resolveShorthand","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","createElement","action","defaultProps","avatar","icon","children","required","components","root","role"],"sources":["../../../src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,MAAM,QAAQ;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ;AACtF,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAIxD;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA4C;EAC/F,MAAM;IAAEC,UAAA,GAAa;IAAWC;EAAM,CAAE,GAAGH,KAAA;EAE3C;EACA,IAAII,WAAA;EACJ,IAAIC,WAAA,GAAc;EAClB,QAAQF,MAAA;IACN,KAAK;MACHC,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACb,qBAAA;MACf;IACF,KAAK;MACHW,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACZ,mBAAA;MACfW,WAAA,GAAc;MACd;IACF,KAAK;MACHD,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACV,aAAA;MACfS,WAAA,GAAc;MACd;IACF,KAAK;MACHD,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACX,UAAA;MACf;EAAM;EAGV,MAAMY,MAAA,GAAST,gBAAA,CAAiBE,KAAA,CAAMO,MAAM,EAAE;IAAEC,YAAA,EAAc;MAAEN,UAAA,EAAY;IAAc;EAAE;EAC5F,MAAMO,MAAA,GAASX,gBAAA,CAAiBE,KAAA,CAAMS,MAAM;EAC5C,IAAIC,IAAA;EACJ;EACA,IAAI,CAACD,MAAA,EAAQ;IACXC,IAAA,GAAOZ,gBAAA,CAAiBE,KAAA,CAAMU,IAAI,EAAE;MAClCF,YAAA,EAAc;QACZG,QAAA,EAAUP;MACZ;MACAQ,QAAA,EAAU,CAAC,CAACZ,KAAA,CAAMG;IACpB;EACF;EAEA,OAAO;IACLI,MAAA;IACAL,UAAA;IACAO,MAAA;IACAI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNJ,IAAA,EAAM;MACNH,MAAA,EAAQf,MAAA;MACRiB,MAAA,EAAQlB;IACV;IACAmB,IAAA;IACAP,MAAA;IACAW,IAAA,EAAMjB,qBAAA,CAAsB,OAAO;MACjCI,GAAA;MACAc,IAAA,EAAMV,WAAA;MACNM,QAAA,EAAUX,KAAA,CAAMW,QAAQ;MACxB,GAAGX;IACL;EACF;AACF"}

package/lib/components/Alert/useAlertStyles.js

@@ -1,88 +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'
+  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"],
-    "De3pzq": "fxugw4r",
-    "g2u3we": "f1p3nwhy",
-    "h3c5rm": ["f11589ue", "f1pdflbu"],
-    "B9xav0g": "f1q5o8ev",
-    "zhjwy3": ["f1pdflbu", "f11589ue"],
-    "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
-    "Beyfa6y": ["f1bjk9e1", "fff7au0"],
-    "B7oj6ja": ["fwsfkhu", "f8wkphi"],
-    "Btl43ni": ["f8wkphi", "fwsfkhu"],
-    "E5pizo": "fz58gqq",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "fl43uef"
+  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"
   },
-  "icon": {
-    "Bqenvij": "fd461yt",
-    "Be2twd7": "f4ybsrx",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"]
+  inverted: {
+    sj55zd: "f1w7i9ko",
+    De3pzq: "f5pduvr"
   },
-  "action": {
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "Bf4jedk": "fy77jfu",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "sj55zd": "faj9fo0"
+  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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;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": "ffb3rxr"
+  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": "fvi85wt"
+  error: {
+    sj55zd: "fcrp5ll"
   },
-  "warning": {
-    "sj55zd": "fpti2h4"
+  warning: {
+    sj55zd: "f1r8f1cl"
   },
-  "info": {
-    "sj55zd": "fkfq4zb"
+  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": [".ffb3rxr{color:var(--colorPaletteGreenBackground3);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
+  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 intentIconStyles = useIntentIconStyles();
-  state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);
-
+  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 && intentIconStyles[state.intent], state.icon.className);
+    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) {
-    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);
+    // 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.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAKA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE;AAHiD,CAApD;;AAMP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;EACD;;EAED,OAAO,KAAP;AACD,CApBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '44px',\n    ...shorthands.padding('0', '12px'),\n    backgroundColor: tokens.colorNeutralBackground1, // todo - there is no bg10, used bg1\n    ...shorthands.borderColor('transparent'),\n    ...shorthands.borderRadius('4px'),\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300, // todo - lineheight in tokens\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  icon: {\n    height: '16px',\n    fontSize: '16px',\n    ...shorthands.padding('0', '8px', '0', '0'),\n  },\n  action: {\n    ...shorthands.padding('0'),\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForeground2, // todo - foreground3 doesn't exist\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenBackground3,\n  },\n  error: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n  const styles = useStyles();\n  const intentIconStyles = useIntentIconStyles();\n\n  state.root.className = mergeClasses(alertClassNames.root, styles.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      alertClassNames.icon,\n      styles.icon,\n      state.intent && intentIconStyles[state.intent],\n      state.icon.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"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":["../../../src/components/Alert/useAlertStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n  avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '44px',\n    ...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});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  error: {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForegroundInverted,\n  },\n  error: {\n    color: tokens.colorPaletteRedForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        outlineColor: tokens.colorNeutralBackground5Pressed,\n      },\n      { enableOutline: true },\n    ),\n  },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n  const inverted = state.appearance === 'inverted';\n  const styles = useStyles();\n  const intentIconStylesPrimary = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const actionStylesInverted = useActionButtonColorInverted();\n\n  state.root.className = mergeClasses(\n    alertClassNames.root,\n    styles.root,\n    inverted && styles.inverted,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      alertClassNames.icon,\n      styles.icon,\n      state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n      state.icon.className,\n    );\n  }\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n\n  if (state.action) {\n    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n    state.action.className = mergeClasses(\n      alertClassNames.action,\n      styles.action,\n      inverted && actionStylesInverted.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AACvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,+BAA+B,QAAQ;AAIhD,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,IAAA,EAAM;EACNC,MAAA,EAAQ;EACRC,MAAA,EAAQ;AACV;AAEA,MAAMC,SAAA,gBAAYT,QAAA;EAAAK,IAAA;IAAAK,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;EAAA/B,IAAA;IAAAiC,OAAA;IAAAL,OAAA;IAAArB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAR,MAAA;IAAAgC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAApC,MAAA;IAAAM,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA4B,OAAA;IAAAD,MAAA;IAAAP,MAAA;EAAA;AAAA;EAAAS,CAAA;AAAA,EAgClB;AAEA,MAAMC,mBAAA,gBAAsB9C,QAAA;EAAA+C,OAAA;IAAAX,MAAA;EAAA;EAAAY,KAAA;IAAAZ,MAAA;EAAA;EAAAa,OAAA;IAAAb,MAAA;EAAA;EAAAc,IAAA;IAAAd,MAAA;EAAA;AAAA;EAAAS,CAAA;AAAA,EAa5B;AAEA,MAAMM,2BAAA,gBAA8BnD,QAAA;EAAA+C,OAAA;IAAAX,MAAA;EAAA;EAAAY,KAAA;IAAAZ,MAAA;EAAA;EAAAa,OAAA;IAAAb,MAAA;EAAA;EAAAc,IAAA;IAAAd,MAAA;EAAA;AAAA;EAAAS,CAAA;AAAA,EAapC;AAEA,MAAMO,4BAAA,gBAA+BpD,QAAA;EAAAO,MAAA;IAAA6B,MAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,EAWrC;AAEA;;;AAGA,OAAO,MAAMa,uBAAA,GAA2BC,KAAA,IAAkC;EACxE,MAAMrB,QAAA,GAAWqB,KAAA,CAAMC,UAAU,KAAK;EACtC,MAAMC,MAAA,GAASpD,SAAA;EACf,MAAMqD,uBAAA,GAA0BhB,mBAAA;EAChC,MAAMiB,wBAAA,GAA2BZ,2BAAA;EACjC,MAAMa,oBAAA,GAAuBZ,4BAAA;EAE7BO,KAAA,CAAMtD,IAAI,CAAC4D,SAAS,GAAGhE,YAAA,CACrBG,eAAA,CAAgBC,IAAI,EACpBwD,MAAA,CAAOxD,IAAI,EACXiC,QAAA,IAAYuB,MAAA,CAAOvB,QAAQ,EAC3BqB,KAAA,CAAMtD,IAAI,CAAC4D,SAAS;EAGtB,IAAIN,KAAA,CAAMrD,IAAI,EAAE;IACdqD,KAAA,CAAMrD,IAAI,CAAC2D,SAAS,GAAGhE,YAAA,CACrBG,eAAA,CAAgBE,IAAI,EACpBuD,MAAA,CAAOvD,IAAI,EACXqD,KAAA,CAAMO,MAAM,KAAK5B,QAAA,GAAWyB,wBAAwB,CAACJ,KAAA,CAAMO,MAAM,CAAC,GAAGJ,uBAAuB,CAACH,KAAA,CAAMO,MAAM,CAAC,CAAD,EACzGP,KAAA,CAAMrD,IAAI,CAAC2D,SAAS;EAExB;EAEA,IAAIN,KAAA,CAAMnD,MAAM,EAAE;IAChBmD,KAAA,CAAMnD,MAAM,CAACyD,SAAS,GAAGhE,YAAA,CAAaG,eAAA,CAAgBI,MAAM,EAAEqD,MAAA,CAAOrD,MAAM,EAAEmD,KAAA,CAAMnD,MAAM,CAACyD,SAAS;EACrG;EAEA,IAAIN,KAAA,CAAMpD,MAAM,EAAE;IAChB;IACAoD,KAAA,CAAMpD,MAAM,CAAC0D,SAAS,GAAGhE,YAAA,CACvBG,eAAA,CAAgBG,MAAM,EACtBsD,MAAA,CAAOtD,MAAM,EACb+B,QAAA,IAAY0B,oBAAA,CAAqBzD,MAAM,EACvCoD,KAAA,CAAMpD,MAAM,CAAC0D,SAAS;EAE1B;EAEA,OAAON,KAAA;AACT"}

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,"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ"}

package/lib-commonjs/Alert.js

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

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":["../lib/Alert.js"],"sourcesContent":["export * from './components/Alert/index';\n//# sourceMappingURL=Alert.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}

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

@@ -1,27 +1,21 @@
 "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';
+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 _useAlertStyles = require("./useAlertStyles");
+const Alert = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useAlert.useAlert_unstable)(props, ref);
+    (0, _useAlertStyles.useAlertStyles_unstable)(state);
+    return (0, _renderAlert.renderAlert_unstable)(state);
+});
+Alert.displayName = 'Alert'; //# sourceMappingURL=Alert.js.map
+
 //# sourceMappingURL=Alert.js.map

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":["../../../lib/components/Alert/Alert.js"],"sourcesContent":["import * as React from 'react';\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\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 = /*#__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//# sourceMappingURL=Alert.js.map"],"names":["Alert","React","forwardRef","props","ref","state","useAlert_unstable","useAlertStyles_unstable","renderAlert_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;0BACH;gCACM;AAKjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,WAAW,GAAG,SACpB,iCAAiC"}

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

@@ -1,6 +1,7 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+ //# sourceMappingURL=Alert.types.js.map
+
 //# 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":["../../../lib/components/Alert/Alert.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Alert.types.js.map"],"names":[],"mappings":";;;;CACA,uCAAuC"}

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

@@ -1,18 +1,13 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+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"), exports);
+ //# sourceMappingURL=index.js.map
 
-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

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":["../../../lib/components/Alert/index.js"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -1,24 +1,17 @@
 "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
-  }), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
-  }));
-};
+Object.defineProperty(exports, "renderAlert_unstable", {
+    enumerable: true,
+    get: ()=>renderAlert_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const renderAlert_unstable = (state)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.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));
+}; //# sourceMappingURL=renderAlert.js.map
 
-exports.renderAlert_unstable = renderAlert_unstable;
 //# sourceMappingURL=renderAlert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAHnB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/Alert/renderAlert.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nexport const renderAlert_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  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));\n};\n//# sourceMappingURL=renderAlert.js.map"],"names":["renderAlert_unstable","state","slots","slotProps","getSlots","React","createElement","root","icon","avatar","children","action"],"mappings":";;;;+BAEaA;;aAAAA;;;6DAFU;gCACE;AAClB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,IAAI,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMM,IAAI,EAAEL,UAAUK,IAAI,GAAGN,MAAMO,MAAM,IAAI,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMO,MAAM,EAAEN,UAAUM,MAAM,GAAGN,UAAUI,IAAI,CAACG,QAAQ,EAAER,MAAMS,MAAM,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,MAAM,EAAER,UAAUQ,MAAM;AAC5U,GACA,uCAAuC"}