npm - @fluentui/react-badge - Versions diffs - 0.0.0-nightly-20220314-0419.1 → 0.0.0-nightly-20220317-0422.1 - Mend

@fluentui/react-badge 0.0.0-nightly-20220314-0419.1 → 0.0.0-nightly-20220317-0422.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Mon, 14 Mar 2022 04:29:18 GMT",
-      "tag": "@fluentui/react-badge_v0.0.0-nightly-20220314-0419.1",
-      "version": "0.0.0-nightly-20220314-0419.1",
+      "date": "Thu, 17 Mar 2022 04:32:31 GMT",
+      "tag": "@fluentui/react-badge_v0.0.0-nightly-20220317-0422.1",
+      "version": "0.0.0-nightly-20220317-0422.1",
       "comments": {
         "prerelease": [
           {
@@ -13,29 +13,41 @@
             "commit": "not available",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "dff926519f57df390afefee4351fc488bc7c4569",
+            "comment": "Removing star exports."
+          },
           {
             "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": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220314-0419.1",
-            "commit": "beb5c46f1c6605a128e9eecbeb156151afbfaebd"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220317-0422.1",
+            "commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220314-0419.1",
-            "commit": "beb5c46f1c6605a128e9eecbeb156151afbfaebd"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220317-0422.1",
+            "commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220314-0419.1",
-            "commit": "beb5c46f1c6605a128e9eecbeb156151afbfaebd"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220317-0422.1",
+            "commit": "92725e01f18c7d9e976104f4399e9a42ac564df3"
           }
         ],
         "none": [

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,23 @@
 # Change Log - @fluentui/react-badge
-This log was last generated on Mon, 14 Mar 2022 04:29:18 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Mar 2022 04:32:31 GMT and should not be manually modified.
 <!-- Start content -->
-## [0.0.0-nightly-20220314-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220314-0419.1)
+## [0.0.0-nightly-20220317-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220317-0422.1)
-Mon, 14 Mar 2022 04:29:18 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.5..@fluentui/react-badge_v0.0.0-nightly-20220314-0419.1)
+Thu, 17 Mar 2022 04:32:31 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.5..@fluentui/react-badge_v0.0.0-nightly-20220317-0422.1)
 ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- Removing star exports. ([PR #22114](https://github.com/microsoft/fluentui/pull/22114) by Humberto.Morimoto@microsoft.com)
 - PresenceBadge: Adding unknown status. ([PR #21951](https://github.com/microsoft/fluentui/pull/21951) by Humberto.Morimoto@microsoft.com)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220314-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/beb5c46f1c6605a128e9eecbeb156151afbfaebd) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220314-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/beb5c46f1c6605a128e9eecbeb156151afbfaebd) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220314-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/beb5c46f1c6605a128e9eecbeb156151afbfaebd) by beachball)
+- Add static classnames to Badge ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220317-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/92725e01f18c7d9e976104f4399e9a42ac564df3) by beachball)
 ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-rc.5)

package/dist/react-badge.d.ts CHANGED Viewed

@@ -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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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/"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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/"}
1	+ {"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/usePresenceBadgeStyles.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, ['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);
+  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 CHANGED Viewed

	@@ -1 +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,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,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 ['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 return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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/"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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/"}
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;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/usePresenceBadgeStyles.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, ['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);
+  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 CHANGED Viewed

	@@ -1 +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,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,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 ['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 return state;\n};\n"],"sourceRoot":"../src/"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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/"}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "0.0.0-nightly-20220314-0419.1",
+  "version": "0.0.0-nightly-20220317-0422.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,14 +28,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220314-0419.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220317-0422.1",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.159-beta.10",
     "@griffel/react": "1.0.0",
-    "@fluentui/react-theme": "0.0.0-nightly-20220314-0419.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220314-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220317-0422.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220317-0422.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {