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

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/packages/react-components/react-alert/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,uBAAuB;AAC7G,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAInF;;;;;;;;;AASA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC;EAAM,CAAE,GAAGH,KAAK;EAEhD;EACA,IAAII,WAAW;EACf,IAAIC,WAAW,GAAG,QAAQ;EAC1B,QAAQF,MAAM;IACZ,KAAK,SAAS;MACZC,WAAW,gBAAGd,KAAA,CAAAgB,aAAA,CAACb,qBAAqB,OAAG;MACvC;IACF,KAAK,OAAO;MACVW,WAAW,gBAAGd,KAAA,CAAAgB,aAAA,CAACZ,mBAAmB,OAAG;MACrCW,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,SAAS;MACZD,WAAW,gBAAGd,KAAA,CAAAgB,aAAA,CAACV,aAAa,OAAG;MAC/BS,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,MAAM;MACTD,WAAW,gBAAGd,KAAA,CAAAgB,aAAA,CAACX,UAAU,OAAG;MAC5B;EAAM;EAGV,MAAMY,MAAM,GAAGT,gBAAgB,CAACE,KAAK,CAACO,MAAM,EAAE;IAAEC,YAAY,EAAE;MAAEN,UAAU,EAAE;IAAa;EAAE,CAAE,CAAC;EAC9F,MAAMO,MAAM,GAAGX,gBAAgB,CAACE,KAAK,CAACS,MAAM,CAAC;EAC7C,IAAIC,IAAI;EACR;EACA,IAAI,CAACD,MAAM,EAAE;IACXC,IAAI,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,IAAI,EAAE;MAClCF,YAAY,EAAE;QACZG,QAAQ,EAAEP;OACX;MACDQ,QAAQ,EAAE,CAAC,CAACZ,KAAK,CAACG;KACnB,CAAC;;EAGJ,OAAO;IACLI,MAAM;IACNL,UAAU;IACVO,MAAM;IACNI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,IAAI,EAAE,MAAM;MACZH,MAAM,EAAEf,MAAM;MACdiB,MAAM,EAAElB;KACT;IACDmB,IAAI;IACJP,MAAM;IACNW,IAAI,EAAEjB,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACHc,IAAI,EAAEV,WAAW;MACjBM,QAAQ,EAAEX,KAAK,CAACW,QAAQ;MACxB,GAAGX;KACJ;GACF;AACH,CAAC"}

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/packages/react-components/react-alert/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":"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"}

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,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/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"]}

package/lib-commonjs/Alert.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-alert/src/Alert.ts"],"sourcesContent":["export * from './components/Alert/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,8BAAAC,OAAA"}

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

@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   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);

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,"names":["React","require","renderAlert_1","useAlert_1","useAlertStyles_1","exports","Alert","forwardRef","props","ref","state","useAlert_unstable","useAlertStyles_unstable","renderAlert_unstable","displayName"],"sources":["../src/packages/react-components/react-alert/src/components/Alert/Alert.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAEA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AAKA;;;;AAIaI,OAAA,CAAAC,KAAK,gBAAoCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,UAAA,CAAAQ,iBAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CL,gBAAA,CAAAQ,uBAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOR,aAAA,CAAAW,oBAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAoC;AAErCL,OAAA,CAAAC,KAAK,CAACQ,WAAW,GAAG,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-alert/src/components/Alert/Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\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"],"mappings":""}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   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

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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-alert/src/components/Alert/index.ts"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA"}

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

@@ -4,21 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   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
+  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
   }));
 };
-
 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,"names":["React","require","react_utilities_1","renderAlert_unstable","state","slots","slotProps","getSlots","createElement","root","icon","avatar","children","action","exports"],"sources":["../src/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAEA,MAAAC,iBAAA,gBAAAD,OAAA;AAIO,MAAME,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAaH,KAAK,CAAC;EAExD,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,IAAI,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChDL,KAAK,CAACM,MAAM,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,EACtDL,SAAS,CAACG,IAAI,CAACG,QAAQ,EACvBP,KAAK,CAACQ,MAAM,IAAIb,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACQ,MAAM;IAAA,GAAKP,SAAS,CAACO;EAAM,EAAI,CAC5C;AAEjB,CAAC;AAXYC,OAAA,CAAAX,oBAAoB,GAAAA,oBAAA"}

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

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAlert_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
+const react_avatar_1 = /*#__PURE__*/require("@fluentui/react-avatar");
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render Alert.
@@ -21,56 +18,65 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  * @param props - props from this instance of Alert
  * @param ref - reference to root HTMLElement of Alert
  */
-
-
 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 = React.createElement(react_icons_1.CheckmarkCircleFilled, null);
       break;
-
     case 'error':
       defaultIcon = React.createElement(react_icons_1.DismissCircleFilled, null);
+      defaultRole = 'alert';
       break;
-
     case 'warning':
       defaultIcon = React.createElement(react_icons_1.WarningFilled, null);
+      defaultRole = 'alert';
       break;
-
     case 'info':
       defaultIcon = React.createElement(react_icons_1.InfoFilled, null);
       break;
   }
-
-  const icon = react_utilities_1.resolveShorthand(props.icon, {
+  const action = react_utilities_1.resolveShorthand(props.action, {
     defaultProps: {
-      children: defaultIcon
-    },
-    required: !!props.intent
+      appearance: 'transparent'
+    }
   });
+  const avatar = react_utilities_1.resolveShorthand(props.avatar);
+  let icon;
+  /** Avatar prop takes precedence over the icon or intent prop */
+  if (!avatar) {
+    icon = react_utilities_1.resolveShorthand(props.icon, {
+      defaultProps: {
+        children: defaultIcon
+      },
+      required: !!props.intent
+    });
+  }
   return {
+    action,
+    appearance,
+    avatar,
     components: {
       root: 'div',
       icon: 'span',
-      action: react_button_1.Button
+      action: react_button_1.Button,
+      avatar: react_avatar_1.Avatar
     },
+    icon,
+    intent,
     root: react_utilities_1.getNativeElementProps('div', {
       ref,
+      role: defaultRole,
       children: props.children,
       ...props
-    }),
-    icon,
-    action: react_utilities_1.resolveShorthand(props.action),
-    intent
+    })
   };
 };
-
 exports.useAlert_unstable = useAlert_unstable;
 //# sourceMappingURL=useAlert.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;;;;;AAQG;;;AACI,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,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;MACA;EAZJ;;EAeA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE,CAD0B;IAIxC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;EAJsB,CAA7B,CAAb;EAOA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE,cAAA,CAAA;IAHE,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,QAAQ,EAAE,KAAK,CAAC,QAFiB;MAGjC,GAAG;IAH8B,CAA7B,CAND;IAWL,IAXK;IAYL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAZH;IAaL;EAbK,CAAP;AAeD,CA1CM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","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","require","react_avatar_1","react_button_1","react_icons_1","react_utilities_1","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","createElement","CheckmarkCircleFilled","DismissCircleFilled","WarningFilled","InfoFilled","action","resolveShorthand","defaultProps","avatar","icon","children","required","components","root","Button","Avatar","getNativeElementProps","role","exports"],"sources":["../src/packages/react-components/react-alert/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,MAAAA,KAAA,gBAAAC,OAAA;AAEA,MAAAC,cAAA,gBAAAD,OAAA;AACA,MAAAE,cAAA,gBAAAF,OAAA;AACA,MAAAG,aAAA,gBAAAH,OAAA;AACA,MAAAI,iBAAA,gBAAAJ,OAAA;AAIA;;;;;;;;;AASO,MAAMK,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC;EAAM,CAAE,GAAGH,KAAK;EAEhD;EACA,IAAII,WAAW;EACf,IAAIC,WAAW,GAAG,QAAQ;EAC1B,QAAQF,MAAM;IACZ,KAAK,SAAS;MACZC,WAAW,GAAGX,KAAA,CAAAa,aAAA,CAACT,aAAA,CAAAU,qBAAqB,OAAG;MACvC;IACF,KAAK,OAAO;MACVH,WAAW,GAAGX,KAAA,CAAAa,aAAA,CAACT,aAAA,CAAAW,mBAAmB,OAAG;MACrCH,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,SAAS;MACZD,WAAW,GAAGX,KAAA,CAAAa,aAAA,CAACT,aAAA,CAAAY,aAAa,OAAG;MAC/BJ,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,MAAM;MACTD,WAAW,GAAGX,KAAA,CAAAa,aAAA,CAACT,aAAA,CAAAa,UAAU,OAAG;MAC5B;EAAM;EAGV,MAAMC,MAAM,GAAGb,iBAAA,CAAAc,gBAAgB,CAACZ,KAAK,CAACW,MAAM,EAAE;IAAEE,YAAY,EAAE;MAAEX,UAAU,EAAE;IAAa;EAAE,CAAE,CAAC;EAC9F,MAAMY,MAAM,GAAGhB,iBAAA,CAAAc,gBAAgB,CAACZ,KAAK,CAACc,MAAM,CAAC;EAC7C,IAAIC,IAAI;EACR;EACA,IAAI,CAACD,MAAM,EAAE;IACXC,IAAI,GAAGjB,iBAAA,CAAAc,gBAAgB,CAACZ,KAAK,CAACe,IAAI,EAAE;MAClCF,YAAY,EAAE;QACZG,QAAQ,EAAEZ;OACX;MACDa,QAAQ,EAAE,CAAC,CAACjB,KAAK,CAACG;KACnB,CAAC;;EAGJ,OAAO;IACLQ,MAAM;IACNT,UAAU;IACVY,MAAM;IACNI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAEf,cAAA,CAAAwB,MAAM;MACdN,MAAM,EAAEnB,cAAA,CAAA0B;KACT;IACDN,IAAI;IACJZ,MAAM;IACNgB,IAAI,EAAErB,iBAAA,CAAAwB,qBAAqB,CAAC,KAAK,EAAE;MACjCrB,GAAG;MACHsB,IAAI,EAAElB,WAAW;MACjBW,QAAQ,EAAEhB,KAAK,CAACgB,QAAQ;MACxB,GAAGhB;KACJ;GACF;AACH,CAAC;AAvDYwB,OAAA,CAAAzB,iBAAiB,GAAAA,iBAAA"}