@fluentui/react-badge 9.0.26 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,42 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 11:41:24 GMT",
+      "date": "Wed, 08 Mar 2023 17:38:54 GMT",
+      "tag": "@fluentui/react-badge_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "31ac442c7c5f4478999e14181cf4c91db727e4d2",
+            "comment": "feat: Adding calls to custom styles hooks derived from context."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ],
+        "patch": [
+          {
+            "author": "kakrookaran@gmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "52a16d07c3b95eebf39ebe46fa73c4a825f73e29",
+            "comment": "updated colors for unknown variant for presence badge"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
       "tag": "@fluentui/react-badge_v9.0.26",
       "version": "9.0.26",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Wed, 15 Feb 2023 11:41:24 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:38:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.0)
+
+Wed, 08 Mar 2023 17:38:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.26..@fluentui/react-badge_v9.1.0)
+
+### Minor changes
+
+- feat: Adding calls to custom styles hooks derived from context. ([PR #27061](https://github.com/microsoft/fluentui/pull/27061) by gcox@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+### Patches
+
+- updated colors for unknown variant for presence badge ([PR #26970](https://github.com/microsoft/fluentui/pull/26970) by kakrookaran@gmail.com)
+
 ## [9.0.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.26)
 
-Wed, 15 Feb 2023 11:41:24 GMT 
+Wed, 15 Feb 2023 11:44:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.25..@fluentui/react-badge_v9.0.26)
 
 ### Patches

package/lib/components/Badge/Badge.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useBadge_unstable } from './useBadge';
 import { useBadgeStyles_unstable } from './useBadgeStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from './renderBadge';
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
@@ -8,6 +9,10 @@ import { renderBadge_unstable } from './renderBadge';
 export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useBadge_unstable(props, ref);
   useBadgeStyles_unstable(state);
+  const {
+    useBadgeStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderBadge_unstable(state);
 });
 Badge.displayName = 'Badge';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AAIpD;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAC3CL,uBAAuB,CAACM,KAAK,CAAC;EAE9B,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","useBadge_unstable","useBadgeStyles_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"]}
+{"version":3,"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n\n  useBadgeStyles_unstable(state);\n\n  const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,eAAe;AAIpD;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGR,iBAAiB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE3CN,uBAAuB,CAACO,KAAK,CAAC;EAE9B,MAAM;IAAEP,uBAAuB,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACnFO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACM,WAAW,GAAG,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BH,KAAK,CAACI,YAAY,KAAK,QAAQ,IAAIH,KAAK,CAACI,IAAI,iBAAIR,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,EACnFL,KAAK,CAACG,IAAI,CAACG,QAAQ,EACnBN,KAAK,CAACI,YAAY,KAAK,OAAO,IAAIH,KAAK,CAACI,IAAI,iBAAIR,oBAACI,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACxE;AAEjB,CAAC","names":["React","getSlots","renderBadge_unstable","state","slots","slotProps","root","iconPosition","icon","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/renderBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","renderBadge_unstable","state","slots","slotProps","createElement","root","iconPosition","icon","children"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BJ,KAAK,CAACK,YAAY,KAAK,QAAQ,IAAIJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EACnFN,KAAK,CAACI,IAAI,CAACG,QAAQ,EACnBP,KAAK,CAACK,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACxE;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,IAAI,GAAG,QAAQ;IACfC,YAAY,GAAG,QAAQ;IACvBC,UAAU,GAAG,QAAQ;IACrBC,KAAK,GAAG;EAAO,CAChB,GAAGN,KAAK;EAET,MAAMO,KAAK,GAAe;IACxBL,KAAK;IACLC,IAAI;IACJC,YAAY;IACZC,UAAU;IACVC,KAAK;IACLE,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE;KACP;IACDD,IAAI,EAAEZ,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD;KACJ,CAAC;IACFU,IAAI,EAAEZ,gBAAgB,CAACE,KAAK,CAACU,IAAI;GAClC;EAED,OAAOH,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"]}
+{"version":3,"names":["getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;AAGA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,IAAI,GAAG,QAAQ;IACfC,YAAY,GAAG,QAAQ;IACvBC,UAAU,GAAG,QAAQ;IACrBC,KAAK,GAAG;EAAO,CAChB,GAAGN,KAAK;EAET,MAAMO,KAAK,GAAe;IACxBL,KAAK;IACLC,IAAI;IACJC,YAAY;IACZC,UAAU;IACVC,KAAK;IACLE,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE;KACP;IACDD,IAAI,EAAEZ,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD;KACJ,CAAC;IACFU,IAAI,EAAEZ,gBAAgB,CAACE,KAAK,CAACU,IAAI;GAClC;EAED,OAAOH,KAAK;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["shorthands","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","useIconRootClassName","useIconStyles","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","fontSmallToTiny","shape","roundedSmallToTiny","appearance","borderGhost","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition","afterTextXL","beforeTextXL","afterText","beforeText"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    ...shorthands.padding('unset'),\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    ...shorthands.padding('unset'),\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n  },\n\n  // shape\n\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    // Set by useRootClassName\n  },\n\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\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.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\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.colorNeutralForegroundStaticInverted,\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.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\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.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\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.colorPaletteDarkOrangeBorder1),\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.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\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    // Set by useIconRootClassName\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 rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    if (state.root.children) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","small","medium","large","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    ...shorthands.padding('unset'),\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    ...shorthands.padding('unset'),\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n  },\n\n  // shape\n\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    // Set by useRootClassName\n  },\n\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\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.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\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.colorNeutralForegroundStaticInverted,\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.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\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.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\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.colorPaletteDarkOrangeBorder1),\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.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\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    // Set by useIconRootClassName\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 rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    if (state.root.children) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/CounterBadge/CounterBadge.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useCounterBadge_unstable } from './useCounterBadge';
 import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from '../Badge/index';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
@@ -8,6 +9,10 @@ import { renderBadge_unstable } from '../Badge/index';
 export const CounterBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCounterBadge_unstable(props, ref);
   useCounterBadgeStyles_unstable(state);
+  const {
+    useCounterBadgeStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderBadge_unstable(state);
 });
 CounterBadge.displayName = 'CounterBadge';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGP,wBAAwB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAClDL,8BAA8B,CAACM,KAAK,CAAC;EAErC,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,YAAY,CAACK,WAAW,GAAG,cAAc","names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n  useCounterBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}
+{"version":3,"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n\n  useCounterBadgeStyles_unstable(state);\n\n  const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,wBAAwB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAElDN,8BAA8B,CAACO,KAAK,CAAC;EAErC,MAAM;IAAEP,8BAA8B,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC1FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,YAAY,CAACM,WAAW,GAAG,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAEA,SAASA,iBAAiB,QAAQ,gBAAgB;AAGlD;;;AAGA,OAAO,MAAMC,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,UAAU,GAAG,QAAQ;IACrBC,QAAQ,GAAG,KAAK;IAChBC,aAAa,GAAG,EAAE;IAClBC,KAAK,GAAG,CAAC;IACTC,GAAG,GAAG;EAAK,CACZ,GAAGP,KAAK;EAET,MAAMQ,KAAK,GAAsB;IAC/B,GAAIV,iBAAiB,CAACE,KAAK,EAAEC,GAAG,CAA+C;IAC/EC,KAAK;IACLC,UAAU;IACVC,QAAQ;IACRE,KAAK;IACLC;GACD;EAED,IAAI,CAACD,KAAK,KAAK,CAAC,IAAIF,QAAQ,KAAK,CAACG,GAAG,IAAI,CAACC,KAAK,CAACC,IAAI,CAACC,QAAQ,EAAE;IAC7DF,KAAK,CAACC,IAAI,CAACC,QAAQ,GAAGJ,KAAK,GAAGD,aAAa,GAAG,GAAGA,aAAa,GAAG,GAAG,GAAGC,KAAK,EAAE;;EAGhF,OAAOE,KAAK;AACd,CAAC","names":["useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const {\n    shape = 'circular',\n    appearance = 'filled',\n    showZero = false,\n    overflowCount = 99,\n    count = 0,\n    dot = false,\n  } = props;\n\n  const state: CounterBadgeState = {\n    ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n    shape,\n    appearance,\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const {\n    shape = 'circular',\n    appearance = 'filled',\n    showZero = false,\n    overflowCount = 99,\n    count = 0,\n    dot = false,\n  } = props;\n\n  const state: CounterBadgeState = {\n    ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n    shape,\n    appearance,\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,gBAAgB;AAGlD;;;AAGA,OAAO,MAAMC,wBAAwB,GAAGA,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,UAAU,GAAG,QAAQ;IACrBC,QAAQ,GAAG,KAAK;IAChBC,aAAa,GAAG,EAAE;IAClBC,KAAK,GAAG,CAAC;IACTC,GAAG,GAAG;EAAK,CACZ,GAAGP,KAAK;EAET,MAAMQ,KAAK,GAAsB;IAC/B,GAAIV,iBAAiB,CAACE,KAAK,EAAEC,GAAG,CAA+C;IAC/EC,KAAK;IACLC,UAAU;IACVC,QAAQ;IACRE,KAAK;IACLC;GACD;EAED,IAAI,CAACD,KAAK,KAAK,CAAC,IAAIF,QAAQ,KAAK,CAACG,GAAG,IAAI,CAACC,KAAK,CAACC,IAAI,CAACC,QAAQ,EAAE;IAC7DF,KAAK,CAACC,IAAI,CAACC,QAAQ,GAAGJ,KAAK,GAAGD,aAAa,GAAG,GAAGA,aAAa,GAAG,GAAG,GAAGC,KAAK,EAAE;;EAGhF,OAAOE,KAAK;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,kBAAoB,gBAAgB;AACrE,SAASC,uBAAuB,QAAQ,yBAAyB;AAKjE,OAAO,MAAMC,sBAAsB,GAA+B;EAChEC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUhB;AAEF;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGT,YAAY,CACjCE,sBAAsB,CAACC,IAAI,EAC3BI,KAAK,CAACG,GAAG,IAAIF,MAAM,CAACE,GAAG,EACvB,CAACH,KAAK,CAACJ,IAAI,CAACQ,QAAQ,IAAI,CAACJ,KAAK,CAACG,GAAG,IAAIF,MAAM,CAACI,IAAI,EACjDL,KAAK,CAACJ,IAAI,CAACM,SAAS,CACrB;EAED,IAAIF,KAAK,CAACH,IAAI,EAAE;IACdG,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACE,sBAAsB,CAACE,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;;EAGxF,OAAOR,uBAAuB,CAACM,KAAK,CAAsB;AAC5D,CAAC","names":["shorthands","mergeClasses","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","useCounterBadgeStyles_unstable","state","styles","className","dot","children","hide"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts"],"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\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.root.children && !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"]}
+{"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts"],"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\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.root.children && !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"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,uBAAuB,QAAQ,yBAAyB;AAKjE,OAAO,MAAMC,sBAAsB,GAA+B;EAChEC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAUhB;AAEF;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGd,SAAS,EAAE;EAC1Ba,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CACjCG,sBAAsB,CAACC,IAAI,EAC3Be,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACb,GAAG,EACvB,CAACY,KAAK,CAACf,IAAI,CAACkB,QAAQ,IAAI,CAACH,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACL,IAAI,EACjDI,KAAK,CAACf,IAAI,CAACiB,SAAS,CACrB;EAED,IAAIF,KAAK,CAACd,IAAI,EAAE;IACdc,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;;EAGxF,OAAOnB,uBAAuB,CAACiB,KAAK,CAAsB;AAC5D,CAAC"}

package/lib/components/PresenceBadge/PresenceBadge.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { usePresenceBadge_unstable } from './usePresenceBadge';
 import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from '../../Badge';
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
@@ -8,6 +9,10 @@ import { renderBadge_unstable } from '../../Badge';
 export const PresenceBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = usePresenceBadge_unstable(props, ref);
   usePresenceBadgeStyles_unstable(state);
+  const {
+    usePresenceBadgeStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderBadge_unstable(state);
 });
 PresenceBadge.displayName = 'PresenceBadge';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,oBAAoB,QAAQ,aAAa;AAIlD;;;AAGA,OAAO,MAAMC,aAAa,gBAA4CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGP,yBAAyB,CAACK,KAAK,EAAEC,GAAG,CAAC;EACnDL,+BAA+B,CAACM,KAAK,CAAC;EAEtC,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACK,WAAW,GAAG,eAAe","names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n  const state = usePresenceBadge_unstable(props, ref);\n  usePresenceBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"]}
+{"version":3,"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n  const state = usePresenceBadge_unstable(props, ref);\n\n  usePresenceBadgeStyles_unstable(state);\n\n  const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,aAAa;AAIlD;;;AAGA,OAAO,MAAMC,aAAa,gBAA4CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGR,yBAAyB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEnDN,+BAA+B,CAACO,KAAK,CAAC;EAEtC,MAAM;IAAEP,+BAA+B,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC3FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACM,WAAW,GAAG,eAAe"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["PresenceAvailable10Regular","PresenceAvailable12Regular","PresenceAvailable16Regular","PresenceAvailable10Filled","PresenceAvailable12Filled","PresenceAvailable16Filled","PresenceAway10Filled","PresenceAway12Filled","PresenceAway16Filled","PresenceBlocked10Regular","PresenceBlocked12Regular","PresenceBlocked16Regular","PresenceBusy10Filled","PresenceBusy12Filled","PresenceBusy16Filled","PresenceDnd10Regular","PresenceDnd12Regular","PresenceDnd16Regular","PresenceDnd10Filled","PresenceDnd12Filled","PresenceDnd16Filled","PresenceOof10Regular","PresenceOof12Regular","PresenceOof16Regular","PresenceOffline10Regular","PresenceOffline12Regular","PresenceOffline16Regular","PresenceUnknown10Regular","PresenceUnknown12Regular","PresenceUnknown16Regular","presenceAwayFilled","tiny","small","medium","large","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  PresenceAvailable10Regular,\n  PresenceAvailable12Regular,\n  PresenceAvailable16Regular,\n  PresenceAvailable10Filled,\n  PresenceAvailable12Filled,\n  PresenceAvailable16Filled,\n  PresenceAway10Filled,\n  PresenceAway12Filled,\n  PresenceAway16Filled,\n  PresenceBlocked10Regular,\n  PresenceBlocked12Regular,\n  PresenceBlocked16Regular,\n  PresenceBusy10Filled,\n  PresenceBusy12Filled,\n  PresenceBusy16Filled,\n  PresenceDnd10Regular,\n  PresenceDnd12Regular,\n  PresenceDnd16Regular,\n  PresenceDnd10Filled,\n  PresenceDnd12Filled,\n  PresenceDnd16Filled,\n  PresenceOof10Regular,\n  PresenceOof12Regular,\n  PresenceOof16Regular,\n  PresenceOffline10Regular,\n  PresenceOffline12Regular,\n  PresenceOffline16Regular,\n  PresenceUnknown10Regular,\n  PresenceUnknown12Regular,\n  PresenceUnknown16Regular,\n} from '@fluentui/react-icons';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAway10Filled,\n  'extra-small': PresenceAway10Filled,\n  small: PresenceAway12Filled,\n  medium: PresenceAway16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAway16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAway16Filled,\n};\n\nexport const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAvailable10Regular,\n  'extra-small': PresenceAvailable10Regular,\n  small: PresenceAvailable12Regular,\n  medium: PresenceAvailable16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAvailable16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAvailable16Regular,\n};\n\nexport const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAvailable10Filled,\n  'extra-small': PresenceAvailable10Filled,\n  small: PresenceAvailable12Filled,\n  medium: PresenceAvailable16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAvailable16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAvailable16Filled,\n};\n\nexport const presenceBlockedRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceBlocked10Regular,\n  'extra-small': PresenceBlocked10Regular,\n  small: PresenceBlocked12Regular,\n  medium: PresenceBlocked16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceBlocked16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceBlocked16Regular,\n};\n\nexport const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceBusy10Filled,\n  'extra-small': PresenceBusy10Filled,\n  small: PresenceBusy12Filled,\n  medium: PresenceBusy16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceBusy16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceBusy16Filled,\n};\n\nexport const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceDnd10Filled,\n  'extra-small': PresenceDnd10Filled,\n  small: PresenceDnd12Filled,\n  medium: PresenceDnd16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceDnd16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceDnd16Filled,\n};\n\nexport const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceDnd10Regular,\n  'extra-small': PresenceDnd10Regular,\n  small: PresenceDnd12Regular,\n  medium: PresenceDnd16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceDnd16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceDnd16Regular,\n};\n\nexport const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceOof10Regular,\n  'extra-small': PresenceOof10Regular,\n  small: PresenceOof12Regular,\n  medium: PresenceOof16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceOof16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceOof16Regular,\n};\n\nexport const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceOffline10Regular,\n  'extra-small': PresenceOffline10Regular,\n  small: PresenceOffline12Regular,\n  medium: PresenceOffline16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceOffline16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceOffline16Regular,\n};\n\nexport const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceUnknown10Regular,\n  'extra-small': PresenceUnknown10Regular,\n  small: PresenceUnknown12Regular,\n  medium: PresenceUnknown16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceUnknown16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceUnknown16Regular,\n};\n"]}
+{"version":3,"names":["PresenceAvailable10Regular","PresenceAvailable12Regular","PresenceAvailable16Regular","PresenceAvailable10Filled","PresenceAvailable12Filled","PresenceAvailable16Filled","PresenceAway10Filled","PresenceAway12Filled","PresenceAway16Filled","PresenceBlocked10Regular","PresenceBlocked12Regular","PresenceBlocked16Regular","PresenceBusy10Filled","PresenceBusy12Filled","PresenceBusy16Filled","PresenceDnd10Regular","PresenceDnd12Regular","PresenceDnd16Regular","PresenceDnd10Filled","PresenceDnd12Filled","PresenceDnd16Filled","PresenceOof10Regular","PresenceOof12Regular","PresenceOof16Regular","PresenceOffline10Regular","PresenceOffline12Regular","PresenceOffline16Regular","PresenceUnknown10Regular","PresenceUnknown12Regular","PresenceUnknown16Regular","presenceAwayFilled","tiny","small","medium","large","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular"],"sources":["../src/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  PresenceAvailable10Regular,\n  PresenceAvailable12Regular,\n  PresenceAvailable16Regular,\n  PresenceAvailable10Filled,\n  PresenceAvailable12Filled,\n  PresenceAvailable16Filled,\n  PresenceAway10Filled,\n  PresenceAway12Filled,\n  PresenceAway16Filled,\n  PresenceBlocked10Regular,\n  PresenceBlocked12Regular,\n  PresenceBlocked16Regular,\n  PresenceBusy10Filled,\n  PresenceBusy12Filled,\n  PresenceBusy16Filled,\n  PresenceDnd10Regular,\n  PresenceDnd12Regular,\n  PresenceDnd16Regular,\n  PresenceDnd10Filled,\n  PresenceDnd12Filled,\n  PresenceDnd16Filled,\n  PresenceOof10Regular,\n  PresenceOof12Regular,\n  PresenceOof16Regular,\n  PresenceOffline10Regular,\n  PresenceOffline12Regular,\n  PresenceOffline16Regular,\n  PresenceUnknown10Regular,\n  PresenceUnknown12Regular,\n  PresenceUnknown16Regular,\n} from '@fluentui/react-icons';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAway10Filled,\n  'extra-small': PresenceAway10Filled,\n  small: PresenceAway12Filled,\n  medium: PresenceAway16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAway16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAway16Filled,\n};\n\nexport const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAvailable10Regular,\n  'extra-small': PresenceAvailable10Regular,\n  small: PresenceAvailable12Regular,\n  medium: PresenceAvailable16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAvailable16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAvailable16Regular,\n};\n\nexport const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceAvailable10Filled,\n  'extra-small': PresenceAvailable10Filled,\n  small: PresenceAvailable12Filled,\n  medium: PresenceAvailable16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceAvailable16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceAvailable16Filled,\n};\n\nexport const presenceBlockedRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceBlocked10Regular,\n  'extra-small': PresenceBlocked10Regular,\n  small: PresenceBlocked12Regular,\n  medium: PresenceBlocked16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceBlocked16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceBlocked16Regular,\n};\n\nexport const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceBusy10Filled,\n  'extra-small': PresenceBusy10Filled,\n  small: PresenceBusy12Filled,\n  medium: PresenceBusy16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceBusy16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceBusy16Filled,\n};\n\nexport const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceDnd10Filled,\n  'extra-small': PresenceDnd10Filled,\n  small: PresenceDnd12Filled,\n  medium: PresenceDnd16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceDnd16Filled,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceDnd16Filled,\n};\n\nexport const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceDnd10Regular,\n  'extra-small': PresenceDnd10Regular,\n  small: PresenceDnd12Regular,\n  medium: PresenceDnd16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceDnd16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceDnd16Regular,\n};\n\nexport const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceOof10Regular,\n  'extra-small': PresenceOof10Regular,\n  small: PresenceOof12Regular,\n  medium: PresenceOof16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceOof16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceOof16Regular,\n};\n\nexport const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceOffline10Regular,\n  'extra-small': PresenceOffline10Regular,\n  small: PresenceOffline12Regular,\n  medium: PresenceOffline16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceOffline16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceOffline16Regular,\n};\n\nexport const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  tiny: PresenceUnknown10Regular,\n  'extra-small': PresenceUnknown10Regular,\n  small: PresenceUnknown12Regular,\n  medium: PresenceUnknown16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  large: PresenceUnknown16Regular,\n  // FIXME not all presence icon sizes are available\n  // https://github.com/microsoft/fluentui/issues/20650\n  'extra-large': PresenceUnknown16Regular,\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,iBAAiB;AACxB,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,MAAMC,OAAO,GAAG,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGZ,wBAAwB,CAACa,IAAI,CAAC,GAAGd,uBAAuB,CAACc,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGL,kBAAkB,CAACM,IAAI,CAAC,GAAGZ,kBAAkB,CAACY,IAAI,CAAC;IAC1E,KAAK,SAAS;MACZ,OAAOX,sBAAsB,CAACW,IAAI,CAAC;IACrC,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGJ,sBAAsB,CAACK,IAAI,CAAC,GAAGV,kBAAkB,CAACU,IAAI,CAAC;IAC9E,KAAK,gBAAgB;MACnB,OAAOD,WAAW,GAAGP,kBAAkB,CAACQ,IAAI,CAAC,GAAGT,iBAAiB,CAACS,IAAI,CAAC;IACzE,KAAK,SAAS;MACZ,OAAOP,sBAAsB,CAACO,IAAI,CAAC;IACrC,KAAK,eAAe;MAClB,OAAON,kBAAkB,CAACM,IAAI,CAAC;IACjC,KAAK,SAAS;MACZ,OAAOL,sBAAsB,CAACK,IAAI,CAAC;EAAC;AAE1C,CAAC;AAED,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,MAAM;EACZ,eAAe,EAAE,eAAe;EAChCC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,gBAAgB;EAClCC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;CACV;AAED;;;AAGA,OAAO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEV,IAAI,GAAG,QAAQ;IAAEF,MAAM,GAAG,WAAW;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGU,KAAK;EAE5E,MAAME,UAAU,GAAGV,eAAe,CAACH,MAAM,CAAC;EAC1C,MAAMc,OAAO,GAAGH,KAAK,CAACV,WAAW,IAAIU,KAAK,CAACX,MAAM,KAAK,eAAe,GAAG,IAAIG,eAAe,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;EAEnH,MAAMY,WAAW,GAAGhB,OAAO,CAACC,MAAM,EAAEC,WAAW,EAAEC,IAAI,CAAC;EAEtD,MAAMc,KAAK,GAAuB;IAChC,GAAGlB,iBAAiB,CAClB;MACE,YAAY,EAAEe,UAAU,GAAGC,OAAO;MAClCG,IAAI,EAAE,KAAK;MACX,GAAGN,KAAK;MACRT,IAAI;MACJgB,IAAI,EAAE/B,gBAAgB,CAACwB,KAAK,CAACO,IAAI,EAAE;QACjCC,YAAY,EAAE;UACZC,QAAQ,EAAEL,WAAW,gBAAG7B,oBAAC6B,WAAW,OAAG,GAAG;SAC3C;QACDM,QAAQ,EAAE;OACX;KACF,EACDT,GAAG,CACJ;IACDZ,MAAM;IACNC;GACD;EAED,OAAOe,KAAK;AACd,CAAC","names":["React","resolveShorthand","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","useBadge_unstable","iconMap","status","outOfOffice","size","DEFAULT_STRINGS","busy","away","available","offline","unknown","blocked","usePresenceBadge_unstable","props","ref","statusText","oofText","IconElement","state","role","icon","defaultProps","children","required"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (status: PresenceBadgeState['status'], outOfOffice: boolean, size: PresenceBadgeState['size']) => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];\n    case 'blocked':\n      return presenceBlockedRegular[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'do-not-disturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'out-of-office':\n      return presenceOofRegular[size];\n    case 'unknown':\n      return presenceUnknownRegular[size];\n  }\n};\n\nconst DEFAULT_STRINGS = {\n  busy: 'busy',\n  'out-of-office': 'out of office',\n  away: 'away',\n  available: 'available',\n  offline: 'offline',\n  'do-not-disturb': 'do not disturb',\n  unknown: 'unknown',\n  blocked: 'blocked',\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const { size = 'medium', status = 'available', outOfOffice = false } = props;\n\n  const statusText = DEFAULT_STRINGS[status];\n  const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n\n  const IconElement = iconMap(status, outOfOffice, size);\n\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        'aria-label': statusText + oofText,\n        role: 'img',\n        ...props,\n        size,\n        icon: resolveShorthand(props.icon, {\n          defaultProps: {\n            children: IconElement ? <IconElement /> : null,\n          },\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status,\n    outOfOffice,\n  };\n\n  return state;\n};\n"]}
+{"version":3,"names":["React","resolveShorthand","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","useBadge_unstable","iconMap","status","outOfOffice","size","DEFAULT_STRINGS","busy","away","available","offline","unknown","blocked","usePresenceBadge_unstable","props","ref","statusText","oofText","IconElement","state","role","icon","defaultProps","children","createElement","required"],"sources":["../src/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (status: PresenceBadgeState['status'], outOfOffice: boolean, size: PresenceBadgeState['size']) => {\n  switch (status) {\n    case 'available':\n      return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n    case 'away':\n      return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];\n    case 'blocked':\n      return presenceBlockedRegular[size];\n    case 'busy':\n      return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n    case 'do-not-disturb':\n      return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n    case 'offline':\n      return presenceOfflineRegular[size];\n    case 'out-of-office':\n      return presenceOofRegular[size];\n    case 'unknown':\n      return presenceUnknownRegular[size];\n  }\n};\n\nconst DEFAULT_STRINGS = {\n  busy: 'busy',\n  'out-of-office': 'out of office',\n  away: 'away',\n  available: 'available',\n  offline: 'offline',\n  'do-not-disturb': 'do not disturb',\n  unknown: 'unknown',\n  blocked: 'blocked',\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n  props: PresenceBadgeProps,\n  ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n  const { size = 'medium', status = 'available', outOfOffice = false } = props;\n\n  const statusText = DEFAULT_STRINGS[status];\n  const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n\n  const IconElement = iconMap(status, outOfOffice, size);\n\n  const state: PresenceBadgeState = {\n    ...useBadge_unstable(\n      {\n        'aria-label': statusText + oofText,\n        role: 'img',\n        ...props,\n        size,\n        icon: resolveShorthand(props.icon, {\n          defaultProps: {\n            children: IconElement ? <IconElement /> : null,\n          },\n          required: true,\n        }),\n      },\n      ref,\n    ),\n    status,\n    outOfOffice,\n  };\n\n  return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,iBAAiB;AACxB,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,MAAMC,OAAO,GAAGA,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGZ,wBAAwB,CAACa,IAAI,CAAC,GAAGd,uBAAuB,CAACc,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGL,kBAAkB,CAACM,IAAI,CAAC,GAAGZ,kBAAkB,CAACY,IAAI,CAAC;IAC1E,KAAK,SAAS;MACZ,OAAOX,sBAAsB,CAACW,IAAI,CAAC;IACrC,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGJ,sBAAsB,CAACK,IAAI,CAAC,GAAGV,kBAAkB,CAACU,IAAI,CAAC;IAC9E,KAAK,gBAAgB;MACnB,OAAOD,WAAW,GAAGP,kBAAkB,CAACQ,IAAI,CAAC,GAAGT,iBAAiB,CAACS,IAAI,CAAC;IACzE,KAAK,SAAS;MACZ,OAAOP,sBAAsB,CAACO,IAAI,CAAC;IACrC,KAAK,eAAe;MAClB,OAAON,kBAAkB,CAACM,IAAI,CAAC;IACjC,KAAK,SAAS;MACZ,OAAOL,sBAAsB,CAACK,IAAI,CAAC;EAAC;AAE1C,CAAC;AAED,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,MAAM;EACZ,eAAe,EAAE,eAAe;EAChCC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,gBAAgB;EAClCC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;CACV;AAED;;;AAGA,OAAO,MAAMC,yBAAyB,GAAGA,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEV,IAAI,GAAG,QAAQ;IAAEF,MAAM,GAAG,WAAW;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGU,KAAK;EAE5E,MAAME,UAAU,GAAGV,eAAe,CAACH,MAAM,CAAC;EAC1C,MAAMc,OAAO,GAAGH,KAAK,CAACV,WAAW,IAAIU,KAAK,CAACX,MAAM,KAAK,eAAe,GAAG,IAAIG,eAAe,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;EAEnH,MAAMY,WAAW,GAAGhB,OAAO,CAACC,MAAM,EAAEC,WAAW,EAAEC,IAAI,CAAC;EAEtD,MAAMc,KAAK,GAAuB;IAChC,GAAGlB,iBAAiB,CAClB;MACE,YAAY,EAAEe,UAAU,GAAGC,OAAO;MAClCG,IAAI,EAAE,KAAK;MACX,GAAGN,KAAK;MACRT,IAAI;MACJgB,IAAI,EAAE/B,gBAAgB,CAACwB,KAAK,CAACO,IAAI,EAAE;QACjCC,YAAY,EAAE;UACZC,QAAQ,EAAEL,WAAW,gBAAG7B,KAAA,CAAAmC,aAAA,CAACN,WAAW,OAAG,GAAG;SAC3C;QACDO,QAAQ,EAAE;OACX;KACF,EACDV,GAAG,CACJ;IACDZ,MAAM;IACNC;GACD;EAED,OAAOe,KAAK;AACd,CAAC"}

package/lib/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -5,7 +5,7 @@ export const presenceBadgeClassNames = {
   icon: 'fui-PresenceBadge__icon'
 };
 const getIsBusy = status => {
-  if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown' || status === 'blocked') {
+  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
     return true;
   }
   return false;
@@ -27,6 +27,9 @@ const useStyles = /*#__PURE__*/__styles({
   statusOutOfOffice: {
     sj55zd: "fdce8r3"
   },
+  statusUnknown: {
+    sj55zd: "f11d4kpn"
+  },
   outOfOffice: {
     sj55zd: "fr0bkrk"
   },
@@ -36,6 +39,9 @@ const useStyles = /*#__PURE__*/__styles({
   outOfOfficeBusy: {
     sj55zd: "fvi85wt"
   },
+  outOfOfficeUnknown: {
+    sj55zd: "f11d4kpn"
+  },
   tiny: {
     Bubjx69: "f9ikmtg",
     a9b677: "f16dn6v3",
@@ -64,7 +70,7 @@ export const usePresenceBadgeStyles_unstable = state => {
   const rootClassName = useRootClassName();
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
-  state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.statusOutOfOffice, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'out-of-office' && 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, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.statusOutOfOffice, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, 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);
   }

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,kCAAsCA,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAK9C,OAAO,MAAMC,uBAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,SAAS,EAAE;IACpG,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,gBAAgB,gBAAG,8iBAYvB;AAEF,MAAMC,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqDhB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,aAAa,GAAGJ,gBAAgB,EAAE;EACxC,MAAMK,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAMK,MAAM,GAAGR,SAAS,CAACK,KAAK,CAACJ,MAAM,CAAC;EACtCI,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGd,YAAY,CACjCE,uBAAuB,CAACC,IAAI,EAC5BQ,aAAa,EACbE,MAAM,IAAID,MAAM,CAACG,UAAU,EAC3BL,KAAK,CAACJ,MAAM,KAAK,MAAM,IAAIM,MAAM,CAACI,UAAU,EAC5CN,KAAK,CAACJ,MAAM,KAAK,WAAW,IAAIM,MAAM,CAACK,eAAe,EACtDP,KAAK,CAACJ,MAAM,KAAK,SAAS,IAAIM,MAAM,CAACM,aAAa,EAClDR,KAAK,CAACJ,MAAM,KAAK,eAAe,IAAIM,MAAM,CAACO,iBAAiB,EAC5DT,KAAK,CAACU,WAAW,IAAIR,MAAM,CAACQ,WAAW,EACvCV,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACJ,MAAM,KAAK,WAAW,IAAIM,MAAM,CAACS,oBAAoB,EAChFX,KAAK,CAACU,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,EACrDZ,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACJ,MAAM,KAAK,MAAM,IAAIM,MAAM,CAACO,iBAAiB,EACxET,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACJ,MAAM,KAAK,SAAS,IAAIM,MAAM,CAACM,aAAa,EACvER,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACJ,MAAM,KAAK,eAAe,IAAIM,MAAM,CAACO,iBAAiB,EACjFT,KAAK,CAACa,IAAI,KAAK,MAAM,IAAIX,MAAM,CAACY,IAAI,EACpCd,KAAK,CAACa,IAAI,KAAK,OAAO,IAAIX,MAAM,CAACa,KAAK,EACtCf,KAAK,CAACa,IAAI,KAAK,aAAa,IAAIX,MAAM,CAACc,UAAU,EACjDhB,KAAK,CAACP,IAAI,CAACW,SAAS,CACrB;EAED,IAAIJ,KAAK,CAACN,IAAI,EAAE;IACdM,KAAK,CAACN,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACE,uBAAuB,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACU,SAAS,CAAC;;EAGzF,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useStyles","usePresenceBadgeStyles_unstable","state","rootClassName","styles","isBusy","className","statusBusy","statusAway","statusAvailable","statusOffline","statusOutOfOffice","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","size","tiny","large","extraLarge"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  '& span': {\n    display: 'flex',\n  },\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n});\n\nconst useStyles = makeStyles({\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\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 rootClassName = useRootClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'out-of-office' && 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"]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","styles","isBusy","className","size"],"sources":["../src/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  padding: 0,\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  '& span': {\n    display: 'flex',\n  },\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n});\n\nconst useStyles = makeStyles({\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  statusUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeUnknown: {\n    color: tokens.colorNeutralForeground3,\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 rootClassName = useRootClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.status === 'unknown' && styles.statusUnknown,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\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"],"mappings":"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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,SAAS;AAElH,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,QACpB,iBAAiB;AAExB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,gBAAgB","names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"]}
+{"version":3,"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"sources":["../src/packages/react-components/react-badge/src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,SAAS;AAElH,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,QACpB,iBAAiB;AAExB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,gBAAgB"}

package/lib-amd/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useBadge", "./useBadgeStyles", "./renderBadge"], function (require, exports, React, useBadge_1, useBadgeStyles_1, renderBadge_1) {
+define(["require", "exports", "react", "./useBadge", "./useBadgeStyles", "@fluentui/react-shared-contexts", "./renderBadge"], function (require, exports, React, useBadge_1, useBadgeStyles_1, react_shared_contexts_1, renderBadge_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Badge = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useBadge", "./useBadgeStyles", "./rend
     exports.Badge = React.forwardRef(function (props, ref) {
         var state = useBadge_1.useBadge_unstable(props, ref);
         useBadgeStyles_1.useBadgeStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useBadgeStyles_unstable;
+        useCustomStyles(state);
         return renderBadge_1.renderBadge_unstable(state);
     });
     exports.Badge.displayName = 'Badge';

package/lib-amd/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAE/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAyB,eAAe,GAAK,oDAA4B,EAAE,wBAAnC,CAAoC;QACpF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n\n  useBadgeStyles_unstable(state);\n\n  const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"]}

package/lib-amd/components/CounterBadge/CounterBadge.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useCounterBadge", "./useCounterBadgeStyles", "../Badge/index"], function (require, exports, React, useCounterBadge_1, useCounterBadgeStyles_1, index_1) {
+define(["require", "exports", "react", "./useCounterBadge", "./useCounterBadgeStyles", "@fluentui/react-shared-contexts", "../Badge/index"], function (require, exports, React, useCounterBadge_1, useCounterBadgeStyles_1, react_shared_contexts_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CounterBadge = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useCounterBadge", "./useCounterBadgeSt
     exports.CounterBadge = React.forwardRef(function (props, ref) {
         var state = useCounterBadge_1.useCounterBadge_unstable(props, ref);
         useCounterBadgeStyles_1.useCounterBadgeStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useCounterBadgeStyles_unstable;
+        useCustomStyles(state);
         return index_1.renderBadge_unstable(state);
     });
     exports.CounterBadge.displayName = 'CounterBadge';

package/lib-amd/components/CounterBadge/CounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,YAAY,GAA2C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC9F,IAAM,KAAK,GAAG,0CAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACnD,sDAA8B,CAAC,KAAK,CAAC,CAAC;QAEtC,OAAO,4BAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n  useCounterBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}
+{"version":3,"file":"CounterBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,YAAY,GAA2C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC9F,IAAM,KAAK,GAAG,0CAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEnD,sDAA8B,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAgC,eAAe,GAAK,oDAA4B,EAAE,+BAAnC,CAAoC;QAC3F,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,4BAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n\n  useCounterBadgeStyles_unstable(state);\n\n  const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}

package/lib-amd/components/PresenceBadge/PresenceBadge.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./usePresenceBadge", "./usePresenceBadgeStyles", "../../Badge"], function (require, exports, React, usePresenceBadge_1, usePresenceBadgeStyles_1, Badge_1) {
+define(["require", "exports", "react", "./usePresenceBadge", "./usePresenceBadgeStyles", "@fluentui/react-shared-contexts", "../../Badge"], function (require, exports, React, usePresenceBadge_1, usePresenceBadgeStyles_1, react_shared_contexts_1, Badge_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.PresenceBadge = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./usePresenceBadge", "./usePresenceBadge
     exports.PresenceBadge = React.forwardRef(function (props, ref) {
         var state = usePresenceBadge_1.usePresenceBadge_unstable(props, ref);
         usePresenceBadgeStyles_1.usePresenceBadgeStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().usePresenceBadgeStyles_unstable;
+        useCustomStyles(state);
         return Badge_1.renderBadge_unstable(state);
     });
     exports.PresenceBadge.displayName = 'PresenceBadge';

package/lib-amd/components/PresenceBadge/PresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChG,IAAM,KAAK,GAAG,4CAAyB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACpD,wDAA+B,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,4BAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n  const state = usePresenceBadge_unstable(props, ref);\n  usePresenceBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"]}
+{"version":3,"file":"PresenceBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChG,IAAM,KAAK,GAAG,4CAAyB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpD,wDAA+B,CAAC,KAAK,CAAC,CAAC;QAE/B,IAAiC,eAAe,GAAK,oDAA4B,EAAE,gCAAnC,CAAoC;QAC5F,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,4BAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n  const state = usePresenceBadge_unstable(props, ref);\n\n  usePresenceBadgeStyles_unstable(state);\n\n  const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"]}