@fluentui/react-alert 9.0.0-beta.8 → 9.0.0-beta.81

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0-beta.81",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -13,38 +13,41 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle-size": "bundle-size measure",
+    "bundle-size": "monosize measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-alert/src && yarn docs",
-    "storybook": "node ../../../scripts/storybook/runner",
-    "type-check": "tsc -b tsconfig.json"
+    "storybook": "start-storybook",
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "just-scripts generate-api",
+    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "*",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.0.4",
-    "@fluentui/react-button": "^9.1.0",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-utilities": "^9.0.2",
-    "@griffel/react": "^1.2.3",
-    "tslib": "^2.1.0"
+    "@fluentui/react-avatar": "^9.5.35",
+    "@fluentui/react-button": "^9.3.44",
+    "@fluentui/react-icons": "^2.0.217",
+    "@fluentui/react-tabster": "^9.13.2",
+    "@fluentui/react-theme": "^9.1.14",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@fluentui/react-jsx-runtime": "^9.0.12",
+    "@griffel/react": "^1.5.14",
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "@types/react": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "react": ">=16.14.0 <19.0.0",
+    "react-dom": ">=16.14.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [
@@ -52,5 +55,14 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/Spec.md

@@ -1,97 +0,0 @@
-# Alert
-
-## Background
-
-An Alert displays a brief, important message to attract a user's attention without interrupting their current task.
-
-## Prior Art
-
-- [Alert - Open UI](https://open-ui.org/components/toast.research)
-- [Convergence epic issue #22579](https://github.com/microsoft/fluentui/issues/22579)
-
-## Sample Code
-
-Default Alert
-
-```
-import { Alert } from '@fluentui/react-alert'
-
-const AlertExample = () => <Alert>This is a default alert</Alert>
-```
-
-Success Alert
-
-```
-import { Alert } from '@fluentui/react-alert'
-
-const AlertExample = () =><Alert intent="success">This is a success alert</Alert>
-```
-
-## API
-
-See [Alert.types.ts](./src/components/Alert/Alert.types.ts)
-
-## Structure
-
-### Slots
-
-- `root`: The outermost `<div>` that contains the rest of the slots
-- `icon`: (optional) A `<span>` that renders an icon and is inferred by the `intent` prop or passed in via the `icon` prop
-- `action`: (optional) A `<button>` that prompts users to act on it
-- `avatar`: (optional) A slot that renders an `Avatar` component passed in via the `avatar` prop
-
-### **Public**
-
-```jsx
-<Alert>This is a default alert</Alert>
-```
-
-### **Internal**
-
-```tsx
-<slots.root {...slotProps.root}>
-  {slots.icon && <slots.icon {...slotProps.icon} />}
-  {slots.avatar && <slots.avatar {...slotProps.avatar} />}
-  {slotProps.root.children}
-  {slots.action && <slots.action {...slotProps.action} />}
-</slots.root>
-```
-
-### **DOM**
-
-```html
-<div class="fui-Alert">
-  <span class="fui-Alert__icon">DeletedFilled</span>
-  Chat deleted
-  <button type="button" class="fui-Button fui-Alert__action">Undo</button>
-</div>
-```
-
-## Migration
-
-See [Migration.md](./Migration.md)
-
-## Behaviors
-
-_Explain how the component will behave in use, including:_
-
-- _Component States_
-- _Interaction_
-  - _Keyboard_
-  - _Cursor_
-  - _Touch_
-  - _Screen readers_
-
-## Accessibility
-
-Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document.
-
-- Decide whether to use **native element** or folow **ARIA** and provide reasons
-- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible.
-- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props.
-- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used
-- Specify texts for **state change announcements** - [ARIA live regions
-  ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...)
-- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them
-- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation)
-- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases)

package/dist/tsdoc-metadata.json

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}

package/lib/components/Alert/useAlertStyles.js

@@ -1,99 +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"],
-    "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"
-  },
-  "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": "faj9fo0"
-  }
-}, {
-  "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;}", ".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;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
-});
-
-const useIntentIconStyles = /*#__PURE__*/__styles({
-  "success": {
-    "sj55zd": "ffb3rxr"
-  },
-  "error": {
-    "sj55zd": "fvi85wt"
-  },
-  "warning": {
-    "sj55zd": "fpti2h4"
-  },
-  "info": {
-    "sj55zd": "fkfq4zb"
-  }
-}, {
-  "d": [".ffb3rxr{color:var(--colorPaletteGreenBackground3);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".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.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;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;;AA6BA,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,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,CAxBM","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    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  avatar: {\n    ...shorthands.margin('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.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,110 +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"],
-    "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"
-  },
-  "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": "faj9fo0"
-  }
-}, {
-  "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;}", ".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;}", ".faj9fo0{color:var(--colorBrandForeground2);}"]
-});
-
-const useIntentIconStyles = /*#__PURE__*/react_1.__styles({
-  "success": {
-    "sj55zd": "ffb3rxr"
-  },
-  "error": {
-    "sj55zd": "fvi85wt"
-  },
-  "warning": {
-    "sj55zd": "fpti2h4"
-  },
-  "info": {
-    "sj55zd": "fkfq4zb"
-  }
-}, {
-  "d": [".ffb3rxr{color:var(--colorPaletteGreenBackground3);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".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.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;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;;AA6BA,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,CAAa,OAAA,CAAA,eAAA,CAAgB,IAA7B,EAAmC,MAAM,CAAC,IAA1C,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;;EAEA,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,CAxBM;;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    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  avatar: {\n    ...shorthands.margin('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.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/"}