@fluentui/react-badge 9.0.0-rc.4 → 9.0.0-rc.7

package/CHANGELOG.json

@@ -2,7 +2,126 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Tue, 01 Mar 2022 02:16:14 GMT",
+      "date": "Wed, 04 May 2022 13:24:22 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.7",
+      "version": "9.0.0-rc.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:17:10 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.6",
+      "version": "9.0.0-rc.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "dff926519f57df390afefee4351fc488bc7c4569",
+            "comment": "Removing star exports."
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "bea6aecfed8612f7b0664ab8bac77c5fccee1efb",
+            "comment": "update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "1f83caa61c5bea877ec67667ef748aaaf50ad14b",
+            "comment": "PresenceBadge: Adding unknown status."
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Add static classnames to Badge"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ],
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:34 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "dzearing@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
+            "comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
+            "commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:40 GMT",
       "tag": "@fluentui/react-badge_v9.0.0-rc.4",
       "version": "9.0.0-rc.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Tue, 01 Mar 2022 02:16:14 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 13:24:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.7)
+
+Wed, 04 May 2022 13:24:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.6..@fluentui/react-badge_v9.0.0-rc.7)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.6)
+
+Tue, 19 Apr 2022 19:17:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.5..@fluentui/react-badge_v9.0.0-rc.6)
+
+### Changes
+
+- Removing star exports. ([PR #22114](https://github.com/microsoft/fluentui/pull/22114) by Humberto.Morimoto@microsoft.com)
+- update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
+- PresenceBadge: Adding unknown status. ([PR #21951](https://github.com/microsoft/fluentui/pull/21951) by Humberto.Morimoto@microsoft.com)
+- Add static classnames to Badge ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.5)
+
+Fri, 04 Mar 2022 05:17:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.4..@fluentui/react-badge_v9.0.0-rc.5)
+
+### Changes
+
+- Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
+- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
+
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.4)
 
-Tue, 01 Mar 2022 02:16:14 GMT 
+Tue, 01 Mar 2022 02:17:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.3..@fluentui/react-badge_v9.0.0-rc.4)
 
 ### Changes

package/dist/{react-badge.d.ts → index.d.ts}

@@ -3,14 +3,20 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
  */
 export declare const Badge: ForwardRefComponent<BadgeProps>;
 
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
 export declare const badgeClassName = "fui-Badge";
 
+export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
+
 declare type BadgeCommons = {
     /**
      * A Badge can be filled, outline, ghost, inverted
@@ -53,8 +59,13 @@ export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
  */
 export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
 export declare const counterBadgeClassName = "fui-CounterBadge";
 
+export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 declare type CounterBadgeCommons = {
     /**
      * Max number to be displayed
@@ -102,8 +113,13 @@ export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'
  */
 export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
 export declare const presenceBadgeClassName = "fui-PresenceBadge";
 
+export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 declare type PresenceBadgeCommons = {
     /**
      * Represents several status
@@ -122,7 +138,7 @@ export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'r
 
 export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
 
-export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
 
 export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
 

package/lib/components/Badge/useBadgeStyles.d.ts

@@ -1,5 +1,10 @@
-import type { BadgeState } from './Badge.types';
+import type { BadgeSlots, BadgeState } from './Badge.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
 export declare const badgeClassName = "fui-Badge";
+export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib/components/Badge/useBadgeStyles.js

@@ -1,6 +1,14 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
+
 export const badgeClassName = 'fui-Badge';
+export const badgeClassNames = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon'
+};
 
 const useRootStyles = /*#__PURE__*/__styles({
   "base": {
@@ -319,11 +327,11 @@ const useIconStyles = /*#__PURE__*/__styles({
 
 export const useBadgeStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(badgeClassName, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  state.root.className = mergeClasses(badgeClassNames.root, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
   const iconStyles = useIconStyles();
 
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(badgeClassNames.icon, iconStyles.base, iconStyles[state.size], state.icon.className);
   }
 
   return state;

package/lib/components/Badge/useBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeState } from './Badge.types';\n\nexport const badgeClassName = 'fui-Badge';\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: tokens.fontWeightSemibold,\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    ...shorthands.borderStyle('solid'),\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding('2px'),\n    ...shorthands.gap('4px'),\n    fontSize: '8px',\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.gap('4px'),\n    ...shorthands.padding('4px'),\n    fontSize: '10px',\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding('4px'),\n    fontSize: '12px',\n    ...shorthands.gap('4px'),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding('6px'),\n    ...shorthands.gap('6px'),\n    fontSize: '12px',\n    ...shorthands.borderWidth(tokens.strokeWidthThick),\n  },\n\n  // shape\n\n  square: {\n    // Default border radius\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius('99px'),\n  },\n\n  // appearance: filled\n\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandBackground),\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    ...shorthands.borderStyle('none'),\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignContent: 'center',\n    alignItems: 'center',\n    height: '100%',\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    badgeClassName,\n    rootStyles.base,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' &&\n      (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n      rootStyles.roundedSmallToTiny,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `badgeClassNames.root` instead.\n */\nexport const badgeClassName = 'fui-Badge';\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: tokens.fontWeightSemibold,\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    ...shorthands.borderStyle('solid'),\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding('2px'),\n    ...shorthands.gap('4px'),\n    fontSize: '8px',\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.gap('4px'),\n    ...shorthands.padding('4px'),\n    fontSize: '10px',\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding('4px'),\n    fontSize: '12px',\n    ...shorthands.gap('4px'),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding('6px'),\n    ...shorthands.gap('6px'),\n    fontSize: '12px',\n    ...shorthands.borderWidth(tokens.strokeWidthThick),\n  },\n\n  // shape\n\n  square: {\n    // Default border radius\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius('99px'),\n  },\n\n  // appearance: filled\n\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandBackground),\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    ...shorthands.borderStyle('none'),\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignContent: 'center',\n    alignItems: 'center',\n    height: '100%',\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootStyles.base,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' &&\n      (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n      rootStyles.roundedSmallToTiny,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconStyles.base,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CounterBadge/useCounterBadgeStyles.d.ts

@@ -1,5 +1,11 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { CounterBadgeState } from './CounterBadge.types';
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
 export declare const counterBadgeClassName = "fui-CounterBadge";
+export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib/components/CounterBadge/useCounterBadgeStyles.js

@@ -1,6 +1,14 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
+
 export const counterBadgeClassName = 'fui-CounterBadge';
+export const counterBadgeClassNames = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "dot": {
@@ -25,7 +33,12 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCounterBadgeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(counterBadgeClassName, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
+  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+
   return useBadgeStyles_unstable(state);
 };
 //# sourceMappingURL=useCounterBadgeStyles.js.map

package/lib/components/CounterBadge/useCounterBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAEjC,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFa,EAGjC,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAH5B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMA,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CATM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassName = 'fui-CounterBadge';\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    ...shorthands.padding('0'),\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassName,\n    state.dot && styles.dot,\n    !state.showZero && state.count === 0 && !state.dot && styles.hide,\n    state.root.className,\n  );\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAKA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;AACP,OAAO,MAAM,sBAAsB,GAA+B;AAChE,EAAA,IAAI,EAAE,kBAD0D;AAEhE,EAAA,IAAI,EAAE;AAF0D,CAA3D;;AAKP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,sBAAsB,CAAC,IADU,EAEjC,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFa,EAGjC,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAH5B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;AAOA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;AACD;;AAED,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAdM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\n/**\n * @deprecated Use `counterBadgeClassNames.root` instead.\n */\nexport const counterBadgeClassName = 'fui-CounterBadge';\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    ...shorthands.padding('0'),\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.showZero && state.count === 0 && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/PresenceBadge/PresenceBadge.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';
-export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
 declare type PresenceBadgeCommons = {
     /**
      * Represents several status

package/lib/components/PresenceBadge/PresenceBadge.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceBadge.types.js","sourceRoot":"../src/","sources":["components/PresenceBadge/PresenceBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';\n\ntype PresenceBadgeCommons = {\n  /**\n   * Represents several status\n   * @default available\n   */\n  status: PresenceBadgeStatus;\n  /**\n   * Modifies the display to indicate that the user is out of office.\n   * This can be combined with any status to display an out-of-office version of that status\n   * @default false\n   */\n  outOfOffice: boolean;\n} & BadgeCommons;\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> &\n  Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;\n\nexport type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;\n"]}
+{"version":3,"file":"PresenceBadge.types.js","sourceRoot":"../src/","sources":["components/PresenceBadge/PresenceBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n  | 'busy'\n  | 'outOfOffice'\n  | 'away'\n  | 'available'\n  | 'offline'\n  | 'doNotDisturb'\n  | 'unknown';\n\ntype PresenceBadgeCommons = {\n  /**\n   * Represents several status\n   * @default available\n   */\n  status: PresenceBadgeStatus;\n  /**\n   * Modifies the display to indicate that the user is out of office.\n   * This can be combined with any status to display an out-of-office version of that status\n   * @default false\n   */\n  outOfOffice: boolean;\n} & BadgeCommons;\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> &\n  Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;\n\nexport type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;\n"]}

package/lib/components/PresenceBadge/usePresenceBadge.js

@@ -22,6 +22,9 @@ const iconMap = (status, outOfOffice, size) => {
 
     case 'outOfOffice':
       return presenceOofRegular[size];
+
+    case 'unknown':
+      return presenceUnknownRegular[size];
   }
 };
 /**

package/lib/components/PresenceBadge/usePresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SACE,uBADF,EAEE,wBAFF,EAGE,kBAHF,EAIE,kBAJF,EAKE,iBALF,EAME,kBANF,EAOE,sBAPF,EAQE,kBARF,EASE,sBATF,QAUO,iBAVP;AAWA,SAAS,iBAAT,QAA8C,gBAA9C;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;AAClC,UAAQ,MAAR;AACE,SAAK,WAAL;AACE,aAAO,WAAW,GAAG,wBAAwB,CAAC,IAAD,CAA3B,GAAoC,uBAAuB,CAAC,IAAD,CAA7E;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,sBAAsB,CAAC,IAAD,CAAzB,GAAkC,kBAAkB,CAAC,IAAD,CAAtE;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,sBAAsB,CAAC,IAAD,CAAzB,GAAkC,kBAAkB,CAAC,IAAD,CAAtE;;AACF,SAAK,cAAL;AACE,aAAO,WAAW,GAAG,kBAAkB,CAAC,IAAD,CAArB,GAA8B,iBAAiB,CAAC,IAAD,CAAjE;;AACF,SAAK,SAAL;AACE,aAAO,sBAAsB,CAAC,IAAD,CAA7B;;AACF,SAAK,aAAL;AACE,aAAO,kBAAkB,CAAC,IAAD,CAAzB;AAZJ;AAcD,CAnBD;AAqBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;AACtB,QAAM,KAAK,GAAuB,EAChC,GAAG,iBAAiB,CAClB;AACE,MAAA,IAAI,EAAE,QADR;AAEE,SAAG,KAFL;AAGE,MAAA,IAAI,EAAE,gBAAgB,CAAC,SAAD,EAAkC;AACtD,QAAA,QAAQ,EAAE;AAD4C,OAAlC;AAHxB,KADkB,EAQlB,GARkB,CADY;AAWhC,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB,WAXQ;AAYhC,IAAA,WAAW,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,WAAN,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,EAAjB,GAAqB;AAZF,GAAlC;AAeA,QAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,MAAP,EAAe,KAAK,CAAC,WAArB,EAAkC,KAAK,CAAC,IAAxC,CAA3B;;AACA,MAAI,WAAJ,EAAiB;AACf,IAAA,KAAK,CAAC,IAAN,CAAY,QAAZ,gBAAuB,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable, BadgeProps } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n  status: PresenceBadgeState['status'],\n  outOfOffice: boolean,\n  size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'doNotDisturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'outOfOffice':\n      return presenceOofRegular[size];\n  }\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        size: 'medium',\n        ...props,\n        icon: resolveShorthand(undefined as BadgeProps['icon'], {\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status: props.status ?? 'available',\n    outOfOffice: props.outOfOffice ?? false,\n  };\n\n  const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n  if (IconElement) {\n    state.icon!.children = <IconElement />;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SACE,uBADF,EAEE,wBAFF,EAGE,kBAHF,EAIE,kBAJF,EAKE,iBALF,EAME,kBANF,EAOE,sBAPF,EAQE,kBARF,EASE,sBATF,QAUO,iBAVP;AAWA,SAAS,iBAAT,QAA8C,gBAA9C;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;AAClC,UAAQ,MAAR;AACE,SAAK,WAAL;AACE,aAAO,WAAW,GAAG,wBAAwB,CAAC,IAAD,CAA3B,GAAoC,uBAAuB,CAAC,IAAD,CAA7E;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,sBAAsB,CAAC,IAAD,CAAzB,GAAkC,kBAAkB,CAAC,IAAD,CAAtE;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,sBAAsB,CAAC,IAAD,CAAzB,GAAkC,kBAAkB,CAAC,IAAD,CAAtE;;AACF,SAAK,cAAL;AACE,aAAO,WAAW,GAAG,kBAAkB,CAAC,IAAD,CAArB,GAA8B,iBAAiB,CAAC,IAAD,CAAjE;;AACF,SAAK,SAAL;AACE,aAAO,sBAAsB,CAAC,IAAD,CAA7B;;AACF,SAAK,aAAL;AACE,aAAO,kBAAkB,CAAC,IAAD,CAAzB;;AACF,SAAK,SAAL;AACE,aAAO,sBAAsB,CAAC,IAAD,CAA7B;AAdJ;AAgBD,CArBD;AAuBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;AACtB,QAAM,KAAK,GAAuB,EAChC,GAAG,iBAAiB,CAClB;AACE,MAAA,IAAI,EAAE,QADR;AAEE,SAAG,KAFL;AAGE,MAAA,IAAI,EAAE,gBAAgB,CAAC,SAAD,EAAkC;AACtD,QAAA,QAAQ,EAAE;AAD4C,OAAlC;AAHxB,KADkB,EAQlB,GARkB,CADY;AAWhC,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB,WAXQ;AAYhC,IAAA,WAAW,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,WAAN,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,EAAjB,GAAqB;AAZF,GAAlC;AAeA,QAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,MAAP,EAAe,KAAK,CAAC,WAArB,EAAkC,KAAK,CAAC,IAAxC,CAA3B;;AACA,MAAI,WAAJ,EAAiB;AACf,IAAA,KAAK,CAAC,IAAN,CAAY,QAAZ,gBAAuB,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable, BadgeProps } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n  status: PresenceBadgeState['status'],\n  outOfOffice: boolean,\n  size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'doNotDisturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'outOfOffice':\n      return presenceOofRegular[size];\n    case 'unknown':\n      return presenceUnknownRegular[size];\n  }\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        size: 'medium',\n        ...props,\n        icon: resolveShorthand(undefined as BadgeProps['icon'], {\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status: props.status ?? 'available',\n    outOfOffice: props.outOfOffice ?? false,\n  };\n\n  const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n  if (IconElement) {\n    state.icon!.children = <IconElement />;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/PresenceBadge/usePresenceBadgeStyles.d.ts

@@ -1,5 +1,11 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { PresenceBadgeState } from './PresenceBadge.types';
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
 export declare const presenceBadgeClassName = "fui-PresenceBadge";
+export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -1,6 +1,14 @@
 import { mergeClasses, __styles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
+
 export const presenceBadgeClassName = 'fui-PresenceBadge';
+export const presenceBadgeClassNames = {
+  root: 'fui-PresenceBadge',
+  icon: 'fui-PresenceBadge__icon'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -74,7 +82,12 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const usePresenceBadgeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(presenceBadgeClassName, styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+  state.root.className = mergeClasses(presenceBadgeClassNames.root, styles.root, ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
+  }
+
   return state;
 };
 //# sourceMappingURL=usePresenceBadgeStyles.js.map

package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;;AAEP,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;AAC/F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,sBADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,KAAK,CAAC,MAAN,KAAiB,cAA7C,KAAgE,MAAM,CAAC,UAHtC,EAIjC,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJD,EAKjC,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALN,EAMjC,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANJ,EAOjC,KAAK,CAAC,MAAN,KAAiB,aAAjB,IAAkC,MAAM,CAAC,iBAPR,EAQjC,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARK,EASjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBAT3B,EAUjC,KAAK,CAAC,WAAN,KAAsB,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,KAAK,CAAC,MAAN,KAAiB,cAAlE,KAAqF,MAAM,CAAC,eAV3D,EAWjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXtB,EAYjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZzB,EAajC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,aAAtC,IAAuD,MAAM,CAAC,iBAb7B,EAcjC,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdC,EAejC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfA,EAgBjC,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBN,EAiBjC,KAAK,CAAC,IAAN,CAAW,SAjBsB,CAAnC;AAoBA,SAAO,KAAP;AACD,CAvBM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceBadgeClassName = 'fui-PresenceBadge';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    presenceBadgeClassName,\n    styles.root,\n    (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAKA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AACP,OAAO,MAAM,uBAAuB,GAA+B;AACjE,EAAA,IAAI,EAAE,mBAD2D;AAEjE,EAAA,IAAI,EAAE;AAF2D,CAA5D;;AAKP,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;AAC/F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,MAAD,EAAS,cAAT,EAAyB,SAAzB,EAAoC,QAApC,CAA6C,KAAK,CAAC,MAAnD,KAA8D,MAAM,CAAC,UAHpC,EAIjC,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJD,EAKjC,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALN,EAMjC,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANJ,EAOjC,KAAK,CAAC,MAAN,KAAiB,aAAjB,IAAkC,MAAM,CAAC,iBAPR,EAQjC,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARK,EASjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBAT3B,EAUjC,KAAK,CAAC,WAAN,IAAqB,CAAC,MAAD,EAAS,cAAT,EAAyB,SAAzB,EAAoC,QAApC,CAA6C,KAAK,CAAC,MAAnD,CAArB,IAAmF,MAAM,CAAC,eAVzD,EAWjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXtB,EAYjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZzB,EAajC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,aAAtC,IAAuD,MAAM,CAAC,iBAb7B,EAcjC,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdC,EAejC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfA,EAgBjC,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBN,EAiBjC,KAAK,CAAC,IAAN,CAAW,SAjBsB,CAAnC;;AAoBA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CA3BM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\n/**\n * @deprecated Use `presenceBadgeClassNames.root` instead.\n */\nexport const presenceBadgeClassName = 'fui-PresenceBadge';\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    styles.root,\n    ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -1,5 +1,6 @@
-export * from './components/Badge/index';
-export * from './Badge';
-export * from './PresenceBadge';
-export * from './components/CounterBadge/index';
-export * from './CounterBadge';
+export { Badge, badgeClassName, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, } from './Badge';
+export type { BadgeProps, BadgeSlots, BadgeState } from './Badge';
+export { PresenceBadge, presenceBadgeClassName, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, } from './PresenceBadge';
+export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';
+export { CounterBadge, counterBadgeClassName, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, } from './CounterBadge';
+export type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';

package/lib/index.js

@@ -1,6 +1,7 @@
-export * from './components/Badge/index';
-export * from './Badge';
-export * from './PresenceBadge';
-export * from './components/CounterBadge/index';
-export * from './CounterBadge';
+export { Badge, // eslint-disable-next-line deprecation/deprecation
+badgeClassName, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';
+export { PresenceBadge, // eslint-disable-next-line deprecation/deprecation
+presenceBadgeClassName, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable } from './PresenceBadge';
+export { CounterBadge, // eslint-disable-next-line deprecation/deprecation
+counterBadgeClassName, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable } from './CounterBadge';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './components/Badge/index';\nexport * from './Badge';\nexport * from './PresenceBadge';\nexport * from './components/CounterBadge/index';\nexport * from './CounterBadge';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,KADF,EAEE;AACA,cAHF,EAIE,eAJF,EAKE,oBALF,EAME,uBANF,EAOE,iBAPF,QAQO,SARP;AAUA,SACE,aADF,EAEE;AACA,sBAHF,EAIE,uBAJF,EAKE,+BALF,EAME,yBANF,QAOO,iBAPP;AASA,SACE,YADF,EAEE;AACA,qBAHF,EAIE,sBAJF,EAKE,8BALF,EAME,wBANF,QAOO,gBAPP","sourcesContent":["export {\n  Badge,\n  // eslint-disable-next-line deprecation/deprecation\n  badgeClassName,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n} from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  // eslint-disable-next-line deprecation/deprecation\n  presenceBadgeClassName,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  // eslint-disable-next-line deprecation/deprecation\n  counterBadgeClassName,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Badge/useBadgeStyles.d.ts

@@ -1,5 +1,10 @@
-import type { BadgeState } from './Badge.types';
+import type { BadgeSlots, BadgeState } from './Badge.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
 export declare const badgeClassName = "fui-Badge";
+export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib-commonjs/components/Badge/useBadgeStyles.js

@@ -3,13 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBadgeStyles_unstable = exports.badgeClassName = void 0;
+exports.useBadgeStyles_unstable = exports.badgeClassNames = exports.badgeClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+/**
+ * @deprecated Use `badgeClassNames.root` instead.
+ */
+
 
 exports.badgeClassName = 'fui-Badge';
+exports.badgeClassNames = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon'
+};
 
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
@@ -328,11 +336,11 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
 
 const useBadgeStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(exports.badgeClassName, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
   const iconStyles = useIconStyles();
 
   if (state.icon) {
-    state.icon.className = react_1.mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconStyles[state.size], state.icon.className);
   }
 
   return state;

package/lib-commonjs/components/Badge/useBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;;AAEb,MAAM,aAAa,gBAAG,OAAA,SAAA;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;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;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;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;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;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;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,EAAtB;;AA4NA,MAAM,aAAa,gBAAG,OAAA,SAAA;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,EAAtB;AA8BA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,KAAK,CAAC,IAAP,CAHW,EAIrB,UAAU,CAAC,KAAK,CAAC,KAAP,CAJW,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,KACG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,IAAN,KAAe,aAAzC,IAA0D,KAAK,CAAC,IAAN,KAAe,MAD5E,KAEE,UAAU,CAAC,kBAPQ,EAQrB,UAAU,CAAC,KAAK,CAAC,UAAP,CARW,EASrB,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,EAAnC,CATW,EAUrB,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAaA,QAAM,UAAU,GAAG,aAAa,EAAhC;;AACA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,UAAU,CAAC,IAAxB,EAA8B,UAAU,CAAC,KAAK,CAAC,IAAP,CAAxC,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAtBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeState } from './Badge.types';\n\nexport const badgeClassName = 'fui-Badge';\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: tokens.fontWeightSemibold,\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    ...shorthands.borderStyle('solid'),\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding('2px'),\n    ...shorthands.gap('4px'),\n    fontSize: '8px',\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.gap('4px'),\n    ...shorthands.padding('4px'),\n    fontSize: '10px',\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding('4px'),\n    fontSize: '12px',\n    ...shorthands.gap('4px'),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding('6px'),\n    ...shorthands.gap('6px'),\n    fontSize: '12px',\n    ...shorthands.borderWidth(tokens.strokeWidthThick),\n  },\n\n  // shape\n\n  square: {\n    // Default border radius\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius('99px'),\n  },\n\n  // appearance: filled\n\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandBackground),\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    ...shorthands.borderStyle('none'),\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignContent: 'center',\n    alignItems: 'center',\n    height: '100%',\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    badgeClassName,\n    rootStyles.base,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' &&\n      (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n      rootStyles.roundedSmallToTiny,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `badgeClassNames.root` instead.\n */\nexport const badgeClassName = 'fui-Badge';\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontWeight: tokens.fontWeightSemibold,\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    ...shorthands.borderStyle('solid'),\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding('2px'),\n    ...shorthands.gap('4px'),\n    fontSize: '8px',\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.gap('4px'),\n    ...shorthands.padding('4px'),\n    fontSize: '10px',\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding('4px'),\n    fontSize: '12px',\n    ...shorthands.gap('4px'),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding('6px'),\n    ...shorthands.gap('6px'),\n    fontSize: '12px',\n    ...shorthands.borderWidth(tokens.strokeWidthThick),\n  },\n\n  // shape\n\n  square: {\n    // Default border radius\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius('99px'),\n  },\n\n  // appearance: filled\n\n  filled: {\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandBackground),\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    ...shorthands.borderStyle('none'),\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandBackground,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignContent: 'center',\n    alignItems: 'center',\n    height: '100%',\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootStyles.base,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' &&\n      (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n      rootStyles.roundedSmallToTiny,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconStyles.base,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.d.ts

@@ -1,5 +1,11 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { CounterBadgeState } from './CounterBadge.types';
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
 export declare const counterBadgeClassName = "fui-CounterBadge";
+export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js

@@ -3,13 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassName = void 0;
+exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = exports.counterBadgeClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const useBadgeStyles_1 = /*#__PURE__*/require("../Badge/useBadgeStyles");
+/**
+ * @deprecated Use `counterBadgeClassNames.root` instead.
+ */
+
 
 exports.counterBadgeClassName = 'fui-CounterBadge';
+exports.counterBadgeClassNames = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "dot": {
@@ -34,7 +42,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useCounterBadgeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.counterBadgeClassName, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.counterBadgeClassNames.root, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = react_1.mergeClasses(exports.counterBadgeClassNames.icon, state.icon.className);
+  }
+
   return useBadgeStyles_1.useBadgeStyles_unstable(state);
 };
 

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGa,OAAA,CAAA,qBAAA,GAAwB,kBAAxB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBADqB,EAErB,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFC,EAGrB,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAHxC,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMA,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CATM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassName = 'fui-CounterBadge';\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    ...shorthands.padding('0'),\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassName,\n    state.dot && styles.dot,\n    !state.showZero && state.count === 0 && !state.dot && styles.hide,\n    state.root.className,\n  );\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAKA;;AAEG;;;AACU,OAAA,CAAA,qBAAA,GAAwB,kBAAxB;AACA,OAAA,CAAA,sBAAA,GAAqD;AAChE,EAAA,IAAI,EAAE,kBAD0D;AAEhE,EAAA,IAAI,EAAE;AAF0D,CAArD;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,sBAAA,CAAuB,IADF,EAErB,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFC,EAGrB,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAHxC,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;AAOA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;AACD;;AAED,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAdM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\n/**\n * @deprecated Use `counterBadgeClassNames.root` instead.\n */\nexport const counterBadgeClassName = 'fui-CounterBadge';\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    ...shorthands.padding('0'),\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.showZero && state.count === 0 && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';
-export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
 declare type PresenceBadgeCommons = {
     /**
      * Represents several status

package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js

@@ -32,6 +32,9 @@ const iconMap = (status, outOfOffice, size) => {
 
     case 'outOfOffice':
       return presenceIcons_1.presenceOofRegular[size];
+
+    case 'unknown':
+      return presenceIcons_1.presenceUnknownRegular[size];
   }
 };
 /**

package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAWA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;AAClC,UAAQ,MAAR;AACE,SAAK,WAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,wBAAA,CAAyB,IAAzB,CAAH,GAAoC,eAAA,CAAA,uBAAA,CAAwB,IAAxB,CAAtD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,cAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAH,GAA8B,eAAA,CAAA,iBAAA,CAAkB,IAAlB,CAAhD;;AACF,SAAK,SAAL;AACE,aAAO,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAP;;AACF,SAAK,aAAL;AACE,aAAO,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAP;AAZJ;AAcD,CAnBD;AAqBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;AACtB,QAAM,KAAK,GAAuB,EAChC,GAAG,OAAA,CAAA,iBAAA,CACD;AACE,MAAA,IAAI,EAAE,QADR;AAEE,SAAG,KAFL;AAGE,MAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,SAAjB,EAAkD;AACtD,QAAA,QAAQ,EAAE;AAD4C,OAAlD;AAHR,KADC,EAQD,GARC,CAD6B;AAWhC,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB,WAXQ;AAYhC,IAAA,WAAW,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,WAAN,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,EAAjB,GAAqB;AAZF,GAAlC;AAeA,QAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,MAAP,EAAe,KAAK,CAAC,WAArB,EAAkC,KAAK,CAAC,IAAxC,CAA3B;;AACA,MAAI,WAAJ,EAAiB;AACf,IAAA,KAAK,CAAC,IAAN,CAAY,QAAZ,GAAuB,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable, BadgeProps } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n  status: PresenceBadgeState['status'],\n  outOfOffice: boolean,\n  size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'doNotDisturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'outOfOffice':\n      return presenceOofRegular[size];\n  }\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        size: 'medium',\n        ...props,\n        icon: resolveShorthand(undefined as BadgeProps['icon'], {\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status: props.status ?? 'available',\n    outOfOffice: props.outOfOffice ?? false,\n  };\n\n  const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n  if (IconElement) {\n    state.icon!.children = <IconElement />;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAWA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;AAClC,UAAQ,MAAR;AACE,SAAK,WAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,wBAAA,CAAyB,IAAzB,CAAH,GAAoC,eAAA,CAAA,uBAAA,CAAwB,IAAxB,CAAtD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,cAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAH,GAA8B,eAAA,CAAA,iBAAA,CAAkB,IAAlB,CAAhD;;AACF,SAAK,SAAL;AACE,aAAO,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAP;;AACF,SAAK,aAAL;AACE,aAAO,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAP;;AACF,SAAK,SAAL;AACE,aAAO,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAP;AAdJ;AAgBD,CArBD;AAuBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;AACtB,QAAM,KAAK,GAAuB,EAChC,GAAG,OAAA,CAAA,iBAAA,CACD;AACE,MAAA,IAAI,EAAE,QADR;AAEE,SAAG,KAFL;AAGE,MAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,SAAjB,EAAkD;AACtD,QAAA,QAAQ,EAAE;AAD4C,OAAlD;AAHR,KADC,EAQD,GARC,CAD6B;AAWhC,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB,WAXQ;AAYhC,IAAA,WAAW,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,WAAN,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,EAAjB,GAAqB;AAZF,GAAlC;AAeA,QAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,MAAP,EAAe,KAAK,CAAC,WAArB,EAAkC,KAAK,CAAC,IAAxC,CAA3B;;AACA,MAAI,WAAJ,EAAiB;AACf,IAAA,KAAK,CAAC,IAAN,CAAY,QAAZ,GAAuB,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable, BadgeProps } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n  status: PresenceBadgeState['status'],\n  outOfOffice: boolean,\n  size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'doNotDisturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'outOfOffice':\n      return presenceOofRegular[size];\n    case 'unknown':\n      return presenceUnknownRegular[size];\n  }\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        size: 'medium',\n        ...props,\n        icon: resolveShorthand(undefined as BadgeProps['icon'], {\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status: props.status ?? 'available',\n    outOfOffice: props.outOfOffice ?? false,\n  };\n\n  const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n  if (IconElement) {\n    state.icon!.children = <IconElement />;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.d.ts

@@ -1,5 +1,11 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { PresenceBadgeState } from './PresenceBadge.types';
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
 export declare const presenceBadgeClassName = "fui-PresenceBadge";
+export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
 /**
  * Applies style classnames to slots
  */

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -3,13 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassName = void 0;
+exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = exports.presenceBadgeClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+/**
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
+ */
+
 
 exports.presenceBadgeClassName = 'fui-PresenceBadge';
+exports.presenceBadgeClassNames = {
+  root: 'fui-PresenceBadge',
+  icon: 'fui-PresenceBadge__icon'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -83,7 +91,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const usePresenceBadgeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.presenceBadgeClassName, styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.presenceBadgeClassNames.root, styles.root, ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
+  }
+
   return state;
 };
 

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;AAC/F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,sBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,CAAC,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,KAAK,CAAC,MAAN,KAAiB,cAA7C,KAAgE,MAAM,CAAC,UAHlD,EAIrB,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJb,EAKrB,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALlB,EAMrB,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANhB,EAOrB,KAAK,CAAC,MAAN,KAAiB,aAAjB,IAAkC,MAAM,CAAC,iBAPpB,EAQrB,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARP,EASrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBATvC,EAUrB,KAAK,CAAC,WAAN,KAAsB,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,KAAK,CAAC,MAAN,KAAiB,cAAlE,KAAqF,MAAM,CAAC,eAVvE,EAWrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXlC,EAYrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZrC,EAarB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,aAAtC,IAAuD,MAAM,CAAC,iBAbzC,EAcrB,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdX,EAerB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfZ,EAgBrB,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBlB,EAiBrB,KAAK,CAAC,IAAN,CAAW,SAjBU,CAAvB;AAoBA,SAAO,KAAP;AACD,CAvBM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceBadgeClassName = 'fui-PresenceBadge';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    presenceBadgeClassName,\n    styles.root,\n    (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAKA;;AAEG;;;AACU,OAAA,CAAA,sBAAA,GAAyB,mBAAzB;AACA,OAAA,CAAA,uBAAA,GAAsD;AACjE,EAAA,IAAI,EAAE,mBAD2D;AAEjE,EAAA,IAAI,EAAE;AAF2D,CAAtD;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;AAC/F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,IAFc,EAGrB,CAAC,MAAD,EAAS,cAAT,EAAyB,SAAzB,EAAoC,QAApC,CAA6C,KAAK,CAAC,MAAnD,KAA8D,MAAM,CAAC,UAHhD,EAIrB,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJb,EAKrB,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALlB,EAMrB,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANhB,EAOrB,KAAK,CAAC,MAAN,KAAiB,aAAjB,IAAkC,MAAM,CAAC,iBAPpB,EAQrB,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARP,EASrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBATvC,EAUrB,KAAK,CAAC,WAAN,IAAqB,CAAC,MAAD,EAAS,cAAT,EAAyB,SAAzB,EAAoC,QAApC,CAA6C,KAAK,CAAC,MAAnD,CAArB,IAAmF,MAAM,CAAC,eAVrE,EAWrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXlC,EAYrB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZrC,EAarB,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,aAAtC,IAAuD,MAAM,CAAC,iBAbzC,EAcrB,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdX,EAerB,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfZ,EAgBrB,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBlB,EAiBrB,KAAK,CAAC,IAAN,CAAW,SAjBU,CAAvB;;AAoBA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,KAAK,CAAC,IAAN,CAAW,SAAtD,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\n/**\n * @deprecated Use `presenceBadgeClassNames.root` instead.\n */\nexport const presenceBadgeClassName = 'fui-PresenceBadge';\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    styles.root,\n    ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -1,5 +1,6 @@
-export * from './components/Badge/index';
-export * from './Badge';
-export * from './PresenceBadge';
-export * from './components/CounterBadge/index';
-export * from './CounterBadge';
+export { Badge, badgeClassName, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, } from './Badge';
+export type { BadgeProps, BadgeSlots, BadgeState } from './Badge';
+export { PresenceBadge, presenceBadgeClassName, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, } from './PresenceBadge';
+export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';
+export { CounterBadge, counterBadgeClassName, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, } from './CounterBadge';
+export type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';

package/lib-commonjs/index.js

@@ -3,16 +3,113 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useCounterBadge_unstable = exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = exports.counterBadgeClassName = exports.CounterBadge = exports.usePresenceBadge_unstable = exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = exports.presenceBadgeClassName = exports.PresenceBadge = exports.useBadge_unstable = exports.useBadgeStyles_unstable = exports.renderBadge_unstable = exports.badgeClassNames = exports.badgeClassName = exports.Badge = void 0;
 
-const tslib_1 = /*#__PURE__*/require("tslib");
+var Badge_1 = /*#__PURE__*/require("./Badge");
 
-tslib_1.__exportStar(require("./components/Badge/index"), exports);
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.Badge;
+  }
+}); // eslint-disable-next-line deprecation/deprecation
 
-tslib_1.__exportStar(require("./Badge"), exports);
+Object.defineProperty(exports, "badgeClassName", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.badgeClassName;
+  }
+});
+Object.defineProperty(exports, "badgeClassNames", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.badgeClassNames;
+  }
+});
+Object.defineProperty(exports, "renderBadge_unstable", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.renderBadge_unstable;
+  }
+});
+Object.defineProperty(exports, "useBadgeStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.useBadgeStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useBadge_unstable", {
+  enumerable: true,
+  get: function () {
+    return Badge_1.useBadge_unstable;
+  }
+});
+
+var PresenceBadge_1 = /*#__PURE__*/require("./PresenceBadge");
+
+Object.defineProperty(exports, "PresenceBadge", {
+  enumerable: true,
+  get: function () {
+    return PresenceBadge_1.PresenceBadge;
+  }
+}); // eslint-disable-next-line deprecation/deprecation
+
+Object.defineProperty(exports, "presenceBadgeClassName", {
+  enumerable: true,
+  get: function () {
+    return PresenceBadge_1.presenceBadgeClassName;
+  }
+});
+Object.defineProperty(exports, "presenceBadgeClassNames", {
+  enumerable: true,
+  get: function () {
+    return PresenceBadge_1.presenceBadgeClassNames;
+  }
+});
+Object.defineProperty(exports, "usePresenceBadgeStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return PresenceBadge_1.usePresenceBadgeStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "usePresenceBadge_unstable", {
+  enumerable: true,
+  get: function () {
+    return PresenceBadge_1.usePresenceBadge_unstable;
+  }
+});
 
-tslib_1.__exportStar(require("./PresenceBadge"), exports);
+var CounterBadge_1 = /*#__PURE__*/require("./CounterBadge");
 
-tslib_1.__exportStar(require("./components/CounterBadge/index"), exports);
+Object.defineProperty(exports, "CounterBadge", {
+  enumerable: true,
+  get: function () {
+    return CounterBadge_1.CounterBadge;
+  }
+}); // eslint-disable-next-line deprecation/deprecation
 
-tslib_1.__exportStar(require("./CounterBadge"), exports);
+Object.defineProperty(exports, "counterBadgeClassName", {
+  enumerable: true,
+  get: function () {
+    return CounterBadge_1.counterBadgeClassName;
+  }
+});
+Object.defineProperty(exports, "counterBadgeClassNames", {
+  enumerable: true,
+  get: function () {
+    return CounterBadge_1.counterBadgeClassNames;
+  }
+});
+Object.defineProperty(exports, "useCounterBadgeStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return CounterBadge_1.useCounterBadgeStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useCounterBadge_unstable", {
+  enumerable: true,
+  get: function () {
+    return CounterBadge_1.useCounterBadge_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Badge/index';\nexport * from './Badge';\nexport * from './PresenceBadge';\nexport * from './components/CounterBadge/index';\nexport * from './CounterBadge';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  Badge,\n  // eslint-disable-next-line deprecation/deprecation\n  badgeClassName,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n} from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  // eslint-disable-next-line deprecation/deprecation\n  presenceBadgeClassName,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  // eslint-disable-next-line deprecation/deprecation\n  counterBadgeClassName,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0-rc.7",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,24 +28,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.3",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-icons": "^2.0.159-beta.10",
-    "@griffel/react": "1.0.0",
-    "@fluentui/react-theme": "9.0.0-rc.3",
-    "@fluentui/react-utilities": "9.0.0-rc.4",
+    "@fluentui/react-icons": "^2.0.166-rc.3",
+    "@griffel/react": "1.0.3",
+    "@fluentui/react-theme": "9.0.0-rc.6",
+    "@fluentui/react-utilities": "9.0.0-rc.7",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -60,5 +50,12 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }