@fluentui/react-alert 9.0.0-beta.3 → 9.0.0-beta.31

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;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,IAAI,EAAE,iBAFmD;AAGzD,EAAA,MAAM,EAAE;AAHiD,CAApD;;AAMP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AA0BA,MAAM,mBAAmB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,eAAe,CAAC,IAAjB,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,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;AAMD;;AAED,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,eAAe,CAAC,MAAjB,EAAyB,MAAM,CAAC,MAAhC,EAAwC,KAAK,CAAC,MAAN,CAAa,SAArD,CAArC;AACD;;AAED,SAAO,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,"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AAIzE,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE,mBAAmB;EAC3BC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgChB;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAa1B;AAEF,MAAMC,2BAA2B,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAalC;AAEF,MAAMC,4BAA4B,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWnC;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,QAAQ,GAAGD,KAAK,CAACE,UAAU,KAAK,UAAU;EAChD,MAAMC,MAAM,GAAGR,SAAS,EAAE;EAC1B,MAAMS,uBAAuB,GAAGR,mBAAmB,EAAE;EACrD,MAAMS,wBAAwB,GAAGR,2BAA2B,EAAE;EAC9D,MAAMS,oBAAoB,GAAGR,4BAA4B,EAAE;EAE3DE,KAAK,CAACT,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CACjCG,eAAe,CAACC,IAAI,EACpBY,MAAM,CAACZ,IAAI,EACXU,QAAQ,IAAIE,MAAM,CAACF,QAAQ,EAC3BD,KAAK,CAACT,IAAI,CAACgB,SAAS,CACrB;EAED,IAAIP,KAAK,CAACR,IAAI,EAAE;IACdQ,KAAK,CAACR,IAAI,CAACe,SAAS,GAAGpB,YAAY,CACjCG,eAAe,CAACE,IAAI,EACpBW,MAAM,CAACX,IAAI,EACXQ,KAAK,CAACQ,MAAM,KAAKP,QAAQ,GAAGI,wBAAwB,CAACL,KAAK,CAACQ,MAAM,CAAC,GAAGJ,uBAAuB,CAACJ,KAAK,CAACQ,MAAM,CAAC,CAAC,EAC3GR,KAAK,CAACR,IAAI,CAACe,SAAS,CACrB;;EAGH,IAAIP,KAAK,CAACN,MAAM,EAAE;IAChBM,KAAK,CAACN,MAAM,CAACa,SAAS,GAAGpB,YAAY,CAACG,eAAe,CAACI,MAAM,EAAES,MAAM,CAACT,MAAM,EAAEM,KAAK,CAACN,MAAM,CAACa,SAAS,CAAC;;EAGtG,IAAIP,KAAK,CAACP,MAAM,EAAE;IAChB;IACAO,KAAK,CAACP,MAAM,CAACc,SAAS,GAAGpB,YAAY,CACnCG,eAAe,CAACG,MAAM,EACtBU,MAAM,CAACV,MAAM,EACbQ,QAAQ,IAAIK,oBAAoB,CAACb,MAAM,EACvCO,KAAK,CAACP,MAAM,CAACc,SAAS,CACvB;;EAGH,OAAOP,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","useIntentIconStyles","useIntentIconStylesInverted","useActionButtonColorInverted","useAlertStyles_unstable","state","inverted","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sourceRoot":"../src/","sources":["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"]}

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,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-alert/src/Alert.ts"],"sourcesContent":["export * from './components/Alert/index';\n"]}

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;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,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,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAKA;;;;AAIaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAoC;AAErCL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useAlert_1","useAlertStyles_1","renderAlert_1","displayName"],"sourceRoot":"../src/","sources":["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"]}

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

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

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,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["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"]}

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;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,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,"mappings":";;;;;;AAAA;AAEA;AAIO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,IAAI,IAAIF,oBAACH,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EAChDL,KAAK,CAACM,MAAM,IAAIH,oBAACH,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,EAAI,EACtDL,SAAS,CAACG,IAAI,CAACG,QAAQ,EACvBP,KAAK,CAACQ,MAAM,IAAIL,oBAACH,KAAK,CAACQ,MAAM;IAAA,GAAKP,SAAS,CAACO;EAAM,EAAI,CAC5C;AAEjB,CAAC;AAXYC,4BAAoB","names":["renderAlert_unstable","state","slots","slotProps","react_utilities_1","React","root","icon","avatar","children","action","exports"],"sourceRoot":"../src/","sources":["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"]}

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;AAC9F,QAAM;AAAE,IAAA;AAAF,MAAa,KAAnB;AAEA;;AACA,MAAI,WAAJ;;AACA,UAAQ,MAAR;AACE,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAd;AACA;;AACF,SAAK,OAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CAAd;AACA;;AACF,SAAK,SAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,aAAD,EAAc,IAAd,CAAd;AACA;;AACF,SAAK,MAAL;AACE,MAAA,WAAW,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,UAAD,EAAW,IAAX,CAAd;AACA;AAZJ;;AAeA,QAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACxC,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE;AADE,KAD0B;AAIxC,IAAA,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;AAJsB,GAA7B,CAAb;AAOA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,MAAM,EAAE,cAAA,CAAA;AAHE,KADP;AAML,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,MAAA,QAAQ,EAAE,KAAK,CAAC,QAFiB;AAGjC,SAAG;AAH8B,KAA7B,CAND;AAWL,IAAA,IAXK;AAYL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,MAAvB,CAZH;AAaL,IAAA;AAbK,GAAP;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,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AAIA;;;;;;;;;AASO,MAAMA,iBAAiB,GAAG,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,GAAGE,oBAACC,mCAAqB,OAAG;MACvC;IACF,KAAK,OAAO;MACVH,WAAW,GAAGE,oBAACC,iCAAmB,OAAG;MACrCF,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,SAAS;MACZD,WAAW,GAAGE,oBAACC,2BAAa,OAAG;MAC/BF,WAAW,GAAG,OAAO;MACrB;IACF,KAAK,MAAM;MACTD,WAAW,GAAGE,oBAACC,wBAAU,OAAG;MAC5B;EAAM;EAGV,MAAMC,MAAM,GAAGC,kCAAgB,CAACT,KAAK,CAACQ,MAAM,EAAE;IAAEE,YAAY,EAAE;MAAER,UAAU,EAAE;IAAa;EAAE,CAAE,CAAC;EAC9F,MAAMS,MAAM,GAAGF,kCAAgB,CAACT,KAAK,CAACW,MAAM,CAAC;EAC7C,IAAIC,IAAI;EACR;EACA,IAAI,CAACD,MAAM,EAAE;IACXC,IAAI,GAAGH,kCAAgB,CAACT,KAAK,CAACY,IAAI,EAAE;MAClCF,YAAY,EAAE;QACZG,QAAQ,EAAET;OACX;MACDU,QAAQ,EAAE,CAAC,CAACd,KAAK,CAACG;KACnB,CAAC;;EAGJ,OAAO;IACLK,MAAM;IACNN,UAAU;IACVS,MAAM;IACNI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,IAAI,EAAE,MAAM;MACZJ,MAAM,EAAES,qBAAM;MACdN,MAAM,EAAEO;KACT;IACDN,IAAI;IACJT,MAAM;IACNa,IAAI,EAAEP,uCAAqB,CAAC,KAAK,EAAE;MACjCR,GAAG;MACHkB,IAAI,EAAEd,WAAW;MACjBQ,QAAQ,EAAEb,KAAK,CAACa,QAAQ;MACxB,GAAGb;KACJ;GACF;AACH,CAAC;AAvDYoB,yBAAiB","names":["useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","React","react_icons_1","action","react_utilities_1","defaultProps","avatar","icon","children","required","components","root","react_button_1","react_avatar_1","role","exports"],"sourceRoot":"../src/","sources":["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"]}