@fluentui/react-alert 9.0.0-beta.13 → 9.0.0-beta.131

package/lib/components/Alert/useAlertStyles.js

@@ -1,112 +0,0 @@
-import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-export const alertClassNames = {
-  root: 'fui-Alert',
-  icon: 'fui-Alert__icon',
-  action: 'fui-Alert__action',
-  avatar: 'fui-Alert__avatar'
-};
-
-const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "sshi5w": "f5pgtk9",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
-    "Beyfa6y": ["f1bjk9e1", "fff7au0"],
-    "B7oj6ja": ["fwsfkhu", "f8wkphi"],
-    "Btl43ni": ["f8wkphi", "fwsfkhu"],
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "f1bh3yvw",
-    "h3c5rm": ["fmi79ni", "f11fozsx"],
-    "B9xav0g": "fnzw4c6",
-    "zhjwy3": ["f11fozsx", "fmi79ni"],
-    "E5pizo": "fz58gqq",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "fl43uef",
-    "sj55zd": "f19n0e5",
-    "De3pzq": "fxugw4r"
-  },
-  "inverted": {
-    "sj55zd": "fqpbvvt",
-    "De3pzq": "f5pduvr"
-  },
-  "icon": {
-    "Bqenvij": "fd461yt",
-    "Be2twd7": "f4ybsrx",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"]
-  },
-  "avatar": {
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f1phki43", "ff9s3yw"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"]
-  },
-  "action": {
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "Bf4jedk": "fy77jfu",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "sj55zd": "fyind8e"
-  }
-}, {
-  "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;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".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;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
-});
-
-const useIntentIconStyles = /*#__PURE__*/__styles({
-  "success": {
-    "sj55zd": "f1m7fhi8"
-  },
-  "error": {
-    "sj55zd": "f1whyuy6"
-  },
-  "warning": {
-    "sj55zd": "fpti2h4"
-  },
-  "info": {
-    "sj55zd": "fkfq4zb"
-  }
-}, {
-  "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
-});
-/**
- * Apply styling to the Alert slots based on the state
- */
-
-
-export const useAlertStyles_unstable = state => {
-  const styles = useStyles();
-  const intentIconStyles = useIntentIconStyles();
-  state.root.className = mergeClasses(alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
-
-  if (state.icon) {
-    state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && intentIconStyles[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);
-  }
-
-  return state;
-};
-//# sourceMappingURL=useAlertStyles.js.map

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

@@ -1 +0,0 @@
-{"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,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAApD;;AAOP,MAAM,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,EAAlB;;AAkCA,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,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHR,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,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,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,CA7BM","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  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.colorTransparentStrokeInteractive),\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.colorNeutralForegroundInverted,\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('0'),\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForegroundLink,\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\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(\n    alertClassNames.root,\n    styles.root,\n    state.appearance !== 'primary' && 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 && intentIconStyles[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    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,123 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAlertStyles_unstable = exports.alertClassNames = void 0;
-
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
-const react_1 = /*#__PURE__*/require("@griffel/react");
-
-exports.alertClassNames = {
-  root: 'fui-Alert',
-  icon: 'fui-Alert__icon',
-  action: 'fui-Alert__action',
-  avatar: 'fui-Alert__avatar'
-};
-
-const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "sshi5w": "f5pgtk9",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
-    "Bbmb7ep": ["fff7au0", "f1bjk9e1"],
-    "Beyfa6y": ["f1bjk9e1", "fff7au0"],
-    "B7oj6ja": ["fwsfkhu", "f8wkphi"],
-    "Btl43ni": ["f8wkphi", "fwsfkhu"],
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "f1bh3yvw",
-    "h3c5rm": ["fmi79ni", "f11fozsx"],
-    "B9xav0g": "fnzw4c6",
-    "zhjwy3": ["f11fozsx", "fmi79ni"],
-    "E5pizo": "fz58gqq",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "fl43uef",
-    "sj55zd": "f19n0e5",
-    "De3pzq": "fxugw4r"
-  },
-  "inverted": {
-    "sj55zd": "fqpbvvt",
-    "De3pzq": "f5pduvr"
-  },
-  "icon": {
-    "Bqenvij": "fd461yt",
-    "Be2twd7": "f4ybsrx",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"]
-  },
-  "avatar": {
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f1phki43", "ff9s3yw"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"]
-  },
-  "action": {
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "Bf4jedk": "fy77jfu",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "sj55zd": "fyind8e"
-  }
-}, {
-  "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;}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".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;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fyind8e{color:var(--colorBrandForegroundLink);}"]
-});
-
-const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
-  "success": {
-    "sj55zd": "f1m7fhi8"
-  },
-  "error": {
-    "sj55zd": "f1whyuy6"
-  },
-  "warning": {
-    "sj55zd": "fpti2h4"
-  },
-  "info": {
-    "sj55zd": "fkfq4zb"
-  }
-}, {
-  "d": [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
-});
-/**
- * Apply styling to the Alert slots based on the state
- */
-
-
-const useAlertStyles_unstable = state => {
-  const styles = useStyles();
-  const intentIconStyles = useIntentIconStyles();
-  state.root.className = react_1.mergeClasses(exports.alertClassNames.root, styles.root, state.appearance !== 'primary' && styles.inverted, state.root.className);
-
-  if (state.icon) {
-    state.icon.className = react_1.mergeClasses(exports.alertClassNames.icon, styles.icon, state.intent && intentIconStyles[state.intent], state.icon.className);
-  }
-
-  if (state.avatar) {
-    state.avatar.className = react_1.mergeClasses(exports.alertClassNames.avatar, styles.avatar, state.avatar.className);
-  }
-
-  if (state.action) {
-    state.action.className = react_1.mergeClasses(exports.alertClassNames.action, styles.action, state.action.className);
-  }
-
-  return state;
-};
-
-exports.useAlertStyles_unstable = useAlertStyles_unstable;
-//# sourceMappingURL=useAlertStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["components/Alert/useAlertStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAKa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,IAAI,EAAE,iBAFmD;EAGzD,MAAM,EAAE,mBAHiD;EAIzD,MAAM,EAAE;AAJiD,CAA9C;;AAOb,MAAM,SAAS,gBAAG,OAAA,SAAA;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,EAAlB;;AAkCA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,gBAAgB,GAAG,mBAAmB,EAA5C;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,QAHpB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,IAAgB,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAHX,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,MAA7B,EAAqC,MAAM,CAAC,MAA5C,EAAoD,KAAK,CAAC,MAAN,CAAa,SAAjE,CAAzB;EACD;;EAED,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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  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.colorTransparentStrokeInteractive),\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.colorNeutralForegroundInverted,\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('0'),\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForegroundLink,\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\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(\n    alertClassNames.root,\n    styles.root,\n    state.appearance !== 'primary' && 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 && intentIconStyles[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    state.action.className = mergeClasses(alertClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}